@entur/form - npm Package Compare versions

Comparing version 7.2.0 to 8.0.0-beta.0

dist/BaseFormControl.d.ts

 import React from 'react';
+import { VariantType } from '@entur/utils';
 import './BaseFormControl.scss';
-import { VariantType } from '@entur/utils';
 /** @deprecated use variant="information" instead */
@@ -31,2 +31,4 @@ declare const info = "info";
     labelTooltip?: React.ReactNode;
+    /** Forklarende tekst for knappen som åpner labelTooltip */
+    labelTooltipButtonAriaLabel?: string;
     /** Illustrerer om inputfeltet er påkrevd eller ikke */
@@ -33,0 +35,0 @@ required?: boolean;

dist/form.cjs.development.js

@@ -6,7 +6,8 @@ 'use strict';
 var utils = require('@entur/utils');
+var React = require('react');
 var classNames = require('classnames');
-var React = require('react');
 var icons = require('@entur/icons');
+var tooltip = require('@entur/tooltip');
+var button = require('@entur/button');
 var typography = require('@entur/typography');
-var tooltip = require('@entur/tooltip');
 var tokens = require('@entur/tokens');
@@ -174,3 +175,3 @@
 
-var _excluded$e = ["children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
+var _excluded$e = ["children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
 /** @deprecated use variant="negative" instead */
@@ -194,2 +195,4 @@ var error = 'error';
     labelTooltip = _ref.labelTooltip,
+    _ref$labelTooltipButt = _ref.labelTooltipButtonAriaLabel,
+    labelTooltipButtonAriaLabel = _ref$labelTooltipButt === void 0 ? 'Klikk for tilleggsinfo om feltet' : _ref$labelTooltipButt,
     feedback = _ref.feedback,
@@ -206,4 +209,9 @@ labelId = _ref.labelId,
   var currentVariant = variant || contextVariant;
-  return React.createElement(InputGroupContextProvider, null, React.createElement("div", null, React.createElement("div", _extends({
-    className: classNames('eds-form-control-wrapper', className, "eds-form-control-wrapper--size-" + size, {
+  return React.createElement(InputGroupContextProvider, null, React.createElement("div", {
+    className: classNames('eds-form-control__field-and-feedback-text', className, {
+      'eds-form-control__field-and-feedback-text--has-tooltip': labelTooltip !== undefined
+    }),
+    style: style
+  }, React.createElement("div", _extends({
+    className: classNames('eds-form-control-wrapper', "eds-form-control-wrapper--size-" + size, {
       'eds-form-control-wrapper--success': currentVariant === 'success',
@@ -215,4 +223,3 @@ 'eds-form-control-wrapper--negative': currentVariant === 'negative' || currentVariant === error,
     }),
-    ref: ref,
-    style: style
+    ref: ref
   }, rest), prepend && React.createElement("div", {
@@ -225,12 +232,22 @@ className: "eds-form-control__prepend"
     staticAnimation: disableLabelAnimation
-  }, labelProps)), children, append && React.createElement("div", {
+  }, labelProps)), labelTooltip && React.createElement(tooltip.Tooltip, {
+    content: labelTooltip,
+    placement: "right",
+    showCloseButton: false,
+    disableFocusListener: true,
+    disableHoverListener: true,
+    disableClickListner: false,
+    disableKeyboardListener: false
+  }, React.createElement(button.IconButton, {
+    as: "span",
+    tabIndex: 0,
+    role: "button",
+    className: "eds-form-control__append eds-form-control__append--tooltip",
+    "aria-label": labelTooltipButtonAriaLabel
+  }, React.createElement(icons.QuestionIcon, {
+    className: "eds-input-group__label-tooltip-icon",
+    "aria-hidden": "true"
+  }))), children, append && React.createElement("div", {
     className: "eds-form-control__append"
-  }, append), labelTooltip && React.createElement("div", {
-    className: "eds-form-control__append eds-form-control__append--tooltip"
-  }, React.createElement(tooltip.Tooltip, {
-    content: labelTooltip,
-    placement: "right"
-  }, React.createElement("span", {
-    className: "eds-input-group__label-tooltip-icon"
-  }, React.createElement(icons.QuestionIcon, null))))), feedback && currentVariant && React.createElement(FeedbackText, {
+  }, append)), feedback && currentVariant && React.createElement(FeedbackText, {
     variant: currentVariant,
@@ -623,4 +640,5 @@ role: ariaAlertOnFeedback ? 'alert' : undefined
   var textAreaId = utils.useRandomId('eds-textarea');
+  var textareaRef = React.useRef(null);
   return React.createElement(BaseFormControl, {
-    className: className,
+    className: classNames(className, 'eds-textarea__wrapper'),
     disabled: disabled,
@@ -637,7 +655,11 @@ readOnly: readOnly,
     },
-    disableLabelAnimation: disableLabelAnimation
+    disableLabelAnimation: disableLabelAnimation,
+    onClick: function onClick(e) {
+      var _textareaRef$current;
+      if (e.target === e.currentTarget) textareaRef == null ? void 0 : (_textareaRef$current = textareaRef.current) == null ? void 0 : _textareaRef$current.focus();
+    }
   }, React.createElement(TextAreaBase, _extends({
     readOnly: readOnly,
     disabled: disabled,
-    ref: ref,
+    ref: utils.mergeRefs(ref, textareaRef),
     "aria-labelledby": textAreaId,
@@ -722,2 +744,3 @@ onChange: onChange,
   var textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
+  var textFieldRef = React.useRef(null);
   return React.createElement(BaseFormControl, {
@@ -731,3 +754,3 @@ disabled: disabled,
     }) : append,
-    className: className,
+    className: classNames(className, 'eds-textfield__wrapper'),
     style: style,
@@ -742,7 +765,11 @@ size: size,
     labelProps: labelProps,
-    ariaAlertOnFeedback: ariaAlertOnFeedback
+    ariaAlertOnFeedback: ariaAlertOnFeedback,
+    onClick: function onClick(e) {
+      var _textFieldRef$current;
+      if (e.target === e.currentTarget) textFieldRef == null ? void 0 : (_textFieldRef$current = textFieldRef.current) == null ? void 0 : _textFieldRef$current.focus();
+    }
   }, React.createElement(TextFieldBase, _extends({
     disabled: disabled,
     readOnly: readOnly,
-    ref: ref,
+    ref: utils.mergeRefs(ref, textFieldRef),
     "aria-labelledby": textFieldId,
@@ -749,0 +776,0 @@ onChange: onChange,

dist/form.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),a=require("classnames"),l=require("react"),n=require("@entur/icons"),t=require("@entur/typography"),r=require("@entur/tooltip"),i=require("@entur/tokens");function d(e){var a=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(a,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),a.default=e,a}var o=d(l);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var l=arguments[a];for(var n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},c.apply(this,arguments)}function s(e,a){if(null==e)return{};var l,n,t={},r=Object.keys(e);for(n=0;n<r.length;n++)a.indexOf(l=r[n])>=0||(t[l]=e[l]);return t}var u=["children","hideIcon","variant","className"],m=function(e){var a=e.variant,t="eds-feedback-text__icon eds-feedback-text__icon--"+a;switch(a){case"success":return l.createElement(n.ValidationSuccessFilledIcon,{"aria-label":"Suksessmelding",className:t});case"negative":case"error":return l.createElement(n.ValidationErrorFilledIcon,{"aria-label":"Feilmelding",className:t});case"information":default:return null;case"warning":return l.createElement(n.ValidationExclamationFilledIcon,{"aria-label":"Varselmelding",className:t})}},p=function(e){var n=e.children,r=e.hideIcon,i=void 0!==r&&r,d=e.variant,o=e.className,p=s(e,u);return l.createElement(t.SubLabel,c({className:a("eds-feedback-text",{"eds-feedback-text--information":"info"===d||"information"===d},o)},p),!i&&l.createElement(m,{variant:d}),l.createElement("span",{className:"eds-feedback-text__text"},n))},b=o.createContext({isFilled:!1,setFilled:function(){return null}}),v=function(e){var a=e.children,l=o.useState(!1);return o.createElement(b.Provider,{value:{isFilled:l[0],setFilled:l[1]}},a)},h=function(){return o.useContext(b)},f=["label","required","labelId","staticAnimation"],g=function(e){var n=e.label,t=e.required,r=e.labelId,i=e.staticAnimation,d=void 0!==i&&i,o=s(e,f),u=h(),m=d||u.isFilled;return l.createElement("label",c({className:a(o.className,{"eds-input-group-label-wrapper--filled":m}),id:r},o),l.createElement("span",{className:a("eds-input-group__label",{"eds-input-group__label--filled":m})},n," ",t&&l.createElement("span",null,"*")))},E=l.createContext(null),y=function(){return l.useContext(E)},C=["children","className","disabled","readOnly","variant","prepend","append","size","isFilled","label","required","labelTooltip","feedback","labelId","labelProps","style","disableLabelAnimation","ariaAlertOnFeedback"],x=l.forwardRef((function(e,t){var i=e.children,d=e.className,o=e.disabled,u=void 0!==o&&o,m=e.readOnly,b=void 0!==m&&m,h=e.variant,f=e.prepend,E=e.append,x=e.size,N=void 0===x?"medium":x,_=e.isFilled,k=e.label,w=e.required,O=e.labelTooltip,I=e.feedback,F=e.labelId,R=e.labelProps,z=e.style,A=e.disableLabelAnimation,P=void 0!==A&&A,S=e.ariaAlertOnFeedback,V=void 0!==S&&S,L=s(e,C),q=y(),T=h||q;return l.createElement(v,null,l.createElement("div",null,l.createElement("div",c({className:a("eds-form-control-wrapper",d,"eds-form-control-wrapper--size-"+N,{"eds-form-control-wrapper--success":"success"===T,"eds-form-control-wrapper--negative":"negative"===T||"error"===T,"eds-form-control-wrapper--disabled":u,"eds-form-control-wrapper--readonly":b,"eds-form-control-wrapper--is-filled":_}),ref:t,style:z},L),f&&l.createElement("div",{className:"eds-form-control__prepend"},f),l.createElement(g,c({label:k,required:w,labelId:F,staticAnimation:P},R)),i,E&&l.createElement("div",{className:"eds-form-control__append"},E),O&&l.createElement("div",{className:"eds-form-control__append eds-form-control__append--tooltip"},l.createElement(r.Tooltip,{content:O,placement:"right"},l.createElement("span",{className:"eds-input-group__label-tooltip-icon"},l.createElement(n.QuestionIcon,null))))),I&&T&&l.createElement(p,{variant:T,role:V?"alert":void 0},I)))})),N=["checked","className","children","style","disabled","reduceClickArea"],_=l.forwardRef((function(n,r){var i=n.checked,d=n.className,o=n.children,u=n.style,m=n.disabled,p=void 0!==m&&m,b=n.reduceClickArea,v=s(n,N),h=l.useRef(null),f="indeterminate"===i,g=void 0!==i;return l.useEffect((function(){h&&h.current&&(h.current.indeterminate=f)}),[f]),l.createElement("label",{className:a("eds-checkbox__container",d,{"eds-checkbox--disabled":p,"eds-checkbox__container--reduced-click-area":b}),style:u},l.createElement("input",c({type:"checkbox",ref:e.mergeRefs(r,h),checked:g?!0===i:void 0,disabled:p},v)),l.createElement("span",{className:a("eds-checkbox__icon",{"eds-checkbox__icon--disabled":p,"eds-checkbox__icon--reduced-click-area":b})},l.createElement(k,{indeterminate:f})),o&&l.createElement(t.Paragraph,{className:"eds-checkbox__label",margin:"none",as:"span"},o))})),k=function(e){var a=e.indeterminate;return l.createElement("svg",{className:"eds-checkbox-icon",width:"11px",height:"9px",viewBox:"6 11 37 33","aria-hidden":!0},void 0!==a&&a?l.createElement("rect",{x:"10",y:"25",width:"28",height:"5",fill:"white"}):l.createElement("path",{d:"M14.1 27.2l7.1 7.2 14.6-14.8",fill:"none"}))},w=["children","className","label"],O=function(e){var n=e.children,r=e.className,i=e.label,d=s(e,w);return l.createElement("fieldset",c({className:a("eds-fieldset",r)},d),i&&l.createElement(t.Heading5,{as:"legend"},i),n)},I=l.createContext(null),F=I.Provider,R=function(){var e=l.useContext(I);if(!e)throw new Error("You need to wrap your RadioButtons in a RadioGroup component");return e},z=["className","children","value","disabled"],A=l.forwardRef((function(e,n){var r,i,d,o=e.className,u=e.children,m=e.value,p=e.disabled,b=s(e,z),v=a(o,"eds-form-component--radio__radio",{"eds-form-component--radio__radio--disabled":p}),h=R();return l.createElement("label",{className:"eds-form-component--radio__container"},l.createElement("input",c({type:"radio",name:null!=(r=b.name)?r:h.name,ref:n,value:m,checked:null!=(i=b.checked)?i:h.value===m,onChange:null!=(d=b.onChange)?d:h.onChange,disabled:p},b)),l.createElement("span",{className:v},l.createElement("span",{className:"eds-form-component--radio__circle"})),u&&l.createElement(t.Paragraph,{margin:"none",as:"span",className:"eds-form-component--radio__label"},u))})),P=["className","children","value","title","secondaryLabel","size","hideSelectionIndicator","style","id","disabled","type","onChange","checked","name"],S=l.forwardRef((function(n,t){var r,i,d,o,u=n.className,m=n.children,p=n.value,b=n.title,v=n.secondaryLabel,h=n.size,f=void 0===h?"medium":h,g=n.hideSelectionIndicator,E=void 0!==g&&g,y=n.style,C=n.id,x=n.disabled,N=void 0!==x&&x,k=n.type,w=void 0===k?"radio":k,O=n.onChange,I=n.checked,F=n.name,R=s(n,P),z=a(u,"eds-input-panel__container","eds-input-panel--"+f),S=l.useRef(null),V=e.useRandomId("eds-inputpanel"),L=C||V,q=e.useForceUpdate();return l.createElement("label",{className:"eds-input-panel",htmlFor:L},l.createElement("input",c({type:w,name:F,ref:e.mergeRefs(t,S),value:p,checked:I,onChange:function(e){void 0===O&&q(),null==O||O(e)},id:L,disabled:N},R)),l.createElement("div",{className:z,style:y},l.createElement("div",{className:"eds-input-panel__title-wrapper"},l.createElement("div",{className:"eds-input-panel__title"},b),l.createElement("div",{className:"eds-input-panel__secondary-label-and-icon-wrapper"},void 0!==v&&l.createElement(l.Fragment,null,v),l.createElement("span",{style:{pointerEvents:"none"}},!(N||E)&&("radio"===w?l.createElement(A,{name:"",value:"",checked:null!=(r=null!=I?I:null==(i=S.current)?void 0:i.checked)&&r,onChange:function(){},"aria-hidden":"true",tabIndex:-1}):l.createElement(_,{checked:null!=(d=null!=I?I:null==(o=S.current)?void 0:o.checked)&&d,onChange:function(){return null},"aria-hidden":"true",tabIndex:-1}))))),m&&l.createElement("div",{className:"eds-input-panel__additional-content"},m)))})),V=["className","children","value","title","secondaryLabel","size","hideRadioButton","style","id","disabled"],L=l.forwardRef((function(e,a){var n=e.className,t=e.children,r=e.value,i=e.title,d=e.secondaryLabel,o=e.size,u=void 0===o?"medium":o,m=e.hideRadioButton,p=void 0!==m&&m,b=e.style,v=e.id,h=e.disabled,f=void 0!==h&&h,g=s(e,V),E=R();return l.createElement(S,c({type:"radio",name:E.name,title:i,value:r,checked:E.value===r,onChange:E.onChange,className:n,secondaryLabel:d,size:u,hideSelectionIndicator:p,style:b,id:v,disabled:f},g,{ref:a}),t)})),q=["name","checked","onChange","className","children","value","title","secondaryLabel","size","hideCheckbox","style","id","disabled"],T=l.forwardRef((function(e,a){var n=e.name,t=e.checked,r=e.onChange,i=e.className,d=e.children,o=e.value,u=e.title,m=e.secondaryLabel,p=e.size,b=void 0===p?"medium":p,v=e.hideCheckbox,h=void 0!==v&&v,f=e.style,g=e.id,E=e.disabled,y=void 0!==E&&E,C=s(e,q);return l.createElement(S,c({type:"checkbox",name:n,title:u,value:o,checked:t,onChange:r,className:i,secondaryLabel:m,size:b,hideSelectionIndicator:h,style:f,id:g,disabled:y},C,{ref:a}),d)})),j=["name","value","children","onChange","label"],M=["className","children","labelPlacement","icon","hideIcon","color","contrastColor","size","checked"],B=l.forwardRef((function(e,t){var r=e.className,d=e.children,o=e.labelPlacement,u=void 0===o?"right":o,m=e.icon,p=e.hideIcon,b=void 0!==p&&p,v=e.color,h=void 0===v?i.colors.validation.mint:v,f=e.contrastColor,g=void 0===f?i.colors.validation.mintContrast:f,E=e.size,y=void 0===E?"medium":E,C=e.checked,x=s(e,M);return l.createElement("label",{className:a("eds-switch","eds-switch--"+u,r),style:c({},x.style)},l.createElement("input",c({type:"checkbox",ref:t,checked:C},x)),l.createElement("span",{className:a("eds-switch__switch","eds-switch__switch--"+y),style:{"--eds-switch-color":h,"--eds-switch-contrast-color":g},"aria-hidden":"true"},l.createElement("span",{className:"eds-switch__circle"},!b&&(m||(void 0===C?l.createElement(l.Fragment,null):l.createElement(C?n.CheckIcon:n.CloseSmallIcon,{size:"large"===y?23:void 0}))))),d&&l.createElement("span",{className:a("eds-switch__label","eds-switch__label--"+y+"--"+u)},d))}));function G(e){return null!=e&&!(Array.isArray(e)&&0===e.length)}function Y(e,a){return void 0===a&&(a=!1),e&&(G(e.value)&&""!==e.value||a&&G(e.defaultValue)&&""!==e.defaultValue)}var D=["variant","disabled","readOnly","className","style","label","feedback","labelTooltip","onChange","disableLabelAnimation"],H=["readOnly","disabled","onChange","value","variant"],Q=l.forwardRef((function(a,n){var t=a.variant,r=a.disabled,i=void 0!==r&&r,d=a.readOnly,o=void 0!==d&&d,u=a.className,m=a.style,p=a.label,b=a.feedback,v=a.labelTooltip,h=a.onChange,f=a.disableLabelAnimation,g=s(a,D),E=e.useRandomId("eds-textarea");return l.createElement(x,{className:u,disabled:i,readOnly:o,variant:t,style:m,label:p,labelId:E,feedback:b,labelTooltip:v,labelProps:{className:"eds-textarea__label"},disableLabelAnimation:f},l.createElement(U,c({readOnly:o,disabled:i,ref:n,"aria-labelledby":E,onChange:h,variant:t},g)))})),U=l.forwardRef((function(a,n){var t=a.readOnly,r=a.disabled,i=a.onChange,d=a.value,o=a.variant,u=s(a,H),m=y(),p=o||m,b=h(),v=b.isFilled,f=b.setFilled;return e.useOnMount((function(){(null!=d&&d.toString()||u.defaultValue)&&f&&!v&&f(!0)})),l.useEffect((function(){null!=d&&d.toString()&&f&&!v&&f(!0)}),[d,f,v]),l.createElement("textarea",c({className:"eds-form-control eds-textarea",ref:n,readOnly:t,disabled:r,onChange:function(e){Y(e.target)?f&&!v&&f(!0):f&&v&&f(!1),i&&i(e)},value:d,"aria-invalid":"error"===p},u))})),J=["prepend","append","variant","disabled","readOnly","className","style","size","label","required","labelTooltip","feedback","onChange","disableLabelAnimation","labelProps","clearable","onClear","value","ariaAlertOnFeedback"],K=["disabled","readOnly","placeholder","onChange","value","variant"],W=["onClear"],X=l.forwardRef((function(a,n){var t=a.prepend,r=a.append,i=a.variant,d=a.disabled,o=void 0!==d&&d,u=a.readOnly,m=void 0!==u&&u,p=a.className,b=a.style,v=a.size,h=void 0===v?"medium":v,f=a.label,g=a.required,E=a.labelTooltip,y=a.feedback,C=a.onChange,N=a.disableLabelAnimation,_=a.labelProps,k=a.clearable,w=void 0!==k&&k,O=a.onClear,I=a.value,F=a.ariaAlertOnFeedback,R=void 0!==F&&F,z=s(a,J),A=e.useRandomId("eds-textfield"),P=_&&_.id?_.id:A;return l.createElement(x,{disabled:o,readOnly:m,variant:i,prepend:t,append:w&&O?l.createElement($,{onClear:O}):r,className:p,style:b,size:h,label:f,required:g,labelTooltip:E,labelId:P,feedback:y,disableLabelAnimation:N,labelProps:_,ariaAlertOnFeedback:R},l.createElement(Z,c({disabled:o,readOnly:m,ref:n,"aria-labelledby":P,onChange:C,value:I,variant:i},z)))})),Z=l.forwardRef((function(a,n){var t=a.disabled,r=a.readOnly,i=a.placeholder,d=a.onChange,o=a.value,u=a.variant,m=s(a,K),p=y(),b=u||p,v=h(),f=v.isFilled,g=v.setFilled;return e.useOnMount((function(){(null!=o&&o.toString()||m.defaultValue)&&g&&!f&&g(!0)})),l.useEffect((function(){null!=o&&o.toString()&&g&&!f&&g(!0)}),[o,g,f]),l.createElement("input",c({"aria-invalid":"error"===b,className:"eds-form-control",disabled:t,readOnly:r,ref:n,placeholder:i,onChange:function(e){Y(e.target)?g&&!f&&g(!0):g&&f&&g(!1),d&&d(e)},value:o},m))})),$=function(e){var a=e.onClear,t=s(e,W),r=h(),i=r.isFilled,d=r.setFilled;return l.createElement("div",{className:"eds-textfield__clear-button-wrapper"},i&&l.createElement("div",{className:"eds-textfield__divider"}),i&&l.createElement("button",c({className:"eds-textfield__clear-button",type:"button",tabIndex:-1,onClick:function(){d(!1),a()}},t),l.createElement(n.CloseSmallIcon,null)))},ee=["name","onChange","selectedValue","multiple","size"],ae=l.createContext(null),le=function(a){var n=a.name,t=a.onChange,r=void 0===t?function(){}:t,i=a.selectedValue,d=a.multiple,o=a.size,u=s(a,ee),m=e.useRandomId("eds-segmented-control"),p=l.useMemo((function(){return{name:n||m,onChange:r,multiple:d,selectedValue:i,size:o}}),[m,d,n,r,i,o]);return l.createElement(ae.Provider,c({value:p},u))},ne=["children","className","style","value","name","onChange"],te=l.forwardRef((function(e,n){var t=e.children,r=e.className,i=e.style,d=e.value,o=e.name,u=e.onChange,m=void 0===u?function(){}:u,p=s(e,ne),b=function(){var e=l.useContext(ae);if(!e)throw new Error("You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl");return e}(),v=b.name,h=b.selectedValue,f=b.onChange,g=b.multiple,E=b.size,y=g?h[d]:h===d;return l.createElement("label",{className:a("eds-segmented-choice",r),style:i},l.createElement("input",c({type:g?"checkbox":"radio",name:o||v,checked:y,value:d,onChange:function(e){var a;m(e),g?f(c({},h,((a={})[d]=e.target.checked,a))):e.target.checked&&f(d)},ref:n},p)),l.createElement("div",{className:a("eds-base-segmented",{"eds-base-segmented--large":"large"===E})},t))})),re=["children","label","name","onChange","selectedValue","size","className"],ie=["children","label","name","onChange","selectedValue"];e.warnAboutMissingStyles("form","icons","typography"),exports.BaseFormControl=x,exports.Checkbox=_,exports.CheckboxPanel=T,exports.FeedbackText=p,exports.Fieldset=O,exports.InputGroupContextProvider=v,exports.InputGroupLabel=g,exports.MultipleSegmentedControl=function(e){var a=e.children,n=e.label,r=e.name,i=e.onChange,d=e.selectedValue,o=s(e,ie);return l.createElement(le,{name:r,selectedValue:d,onChange:i,multiple:!0,size:"medium"},l.createElement(t.Label,{as:"div"},n),l.createElement("div",c({className:"eds-segmented-control"},o),a))},exports.Radio=A,exports.RadioGroup=function(e){var a=e.name,n=e.value,t=e.children,r=e.onChange,i=e.label,d=s(e,j),o=l.useMemo((function(){return{name:a,value:n,onChange:r}}),[a,n,r]);return l.createElement(F,{value:o},i?l.createElement(O,c({label:i},d),t):t)},exports.RadioPanel=L,exports.SegmentedChoice=te,exports.SegmentedControl=function(e){var n=e.children,t=e.label,r=e.name,i=e.onChange,d=e.selectedValue,o=e.size,u=void 0===o?"medium":o,m=e.className,p=s(e,re);return l.createElement(le,{name:r,selectedValue:d,onChange:i,multiple:!1,size:u},l.createElement(O,{label:t},l.createElement("div",c({className:a("eds-segmented-control",m)},p),n)))},exports.Switch=B,exports.TextArea=Q,exports.TextField=X,exports.VariantProvider=function(e){var a=e.variant;return l.createElement(E.Provider,{value:void 0===a?null:a},e.children)},exports.hasValue=G,exports.isFilled=Y,exports.useInputGroupContext=h,exports.useVariant=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),a=require("react"),l=require("classnames"),n=require("@entur/icons"),t=require("@entur/tooltip"),r=require("@entur/button"),i=require("@entur/typography"),d=require("@entur/tokens");function o(e){var a=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(a,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),a.default=e,a}var c=o(a);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var l=arguments[a];for(var n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},s.apply(this,arguments)}function u(e,a){if(null==e)return{};var l,n,t={},r=Object.keys(e);for(n=0;n<r.length;n++)a.indexOf(l=r[n])>=0||(t[l]=e[l]);return t}var m=["children","hideIcon","variant","className"],b=function(e){var l=e.variant,t="eds-feedback-text__icon eds-feedback-text__icon--"+l;switch(l){case"success":return a.createElement(n.ValidationSuccessFilledIcon,{"aria-label":"Suksessmelding",className:t});case"negative":case"error":return a.createElement(n.ValidationErrorFilledIcon,{"aria-label":"Feilmelding",className:t});case"information":default:return null;case"warning":return a.createElement(n.ValidationExclamationFilledIcon,{"aria-label":"Varselmelding",className:t})}},p=function(e){var n=e.children,t=e.hideIcon,r=void 0!==t&&t,d=e.variant,o=e.className,c=u(e,m);return a.createElement(i.SubLabel,s({className:l("eds-feedback-text",{"eds-feedback-text--information":"info"===d||"information"===d},o)},c),!r&&a.createElement(b,{variant:d}),a.createElement("span",{className:"eds-feedback-text__text"},n))},f=c.createContext({isFilled:!1,setFilled:function(){return null}}),v=function(e){var a=e.children,l=c.useState(!1);return c.createElement(f.Provider,{value:{isFilled:l[0],setFilled:l[1]}},a)},h=function(){return c.useContext(f)},g=["label","required","labelId","staticAnimation"],E=function(e){var n=e.label,t=e.required,r=e.labelId,i=e.staticAnimation,d=void 0!==i&&i,o=u(e,g),c=h(),m=d||c.isFilled;return a.createElement("label",s({className:l(o.className,{"eds-input-group-label-wrapper--filled":m}),id:r},o),a.createElement("span",{className:l("eds-input-group__label",{"eds-input-group__label--filled":m})},n," ",t&&a.createElement("span",null,"*")))},y=a.createContext(null),C=function(){return a.useContext(y)},_=["children","className","disabled","readOnly","variant","prepend","append","size","isFilled","label","required","labelTooltip","labelTooltipButtonAriaLabel","feedback","labelId","labelProps","style","disableLabelAnimation","ariaAlertOnFeedback"],x=a.forwardRef((function(e,i){var d=e.children,o=e.className,c=e.disabled,m=void 0!==c&&c,b=e.readOnly,f=void 0!==b&&b,h=e.variant,g=e.prepend,y=e.append,x=e.size,k=void 0===x?"medium":x,N=e.isFilled,w=e.label,O=e.required,I=e.labelTooltip,F=e.labelTooltipButtonAriaLabel,R=void 0===F?"Klikk for tilleggsinfo om feltet":F,z=e.feedback,L=e.labelId,A=e.labelProps,P=e.style,S=e.disableLabelAnimation,V=void 0!==S&&S,q=e.ariaAlertOnFeedback,T=void 0!==q&&q,j=u(e,_),B=C(),M=h||B;return a.createElement(v,null,a.createElement("div",{className:l("eds-form-control__field-and-feedback-text",o,{"eds-form-control__field-and-feedback-text--has-tooltip":void 0!==I}),style:P},a.createElement("div",s({className:l("eds-form-control-wrapper","eds-form-control-wrapper--size-"+k,{"eds-form-control-wrapper--success":"success"===M,"eds-form-control-wrapper--negative":"negative"===M||"error"===M,"eds-form-control-wrapper--disabled":m,"eds-form-control-wrapper--readonly":f,"eds-form-control-wrapper--is-filled":N}),ref:i},j),g&&a.createElement("div",{className:"eds-form-control__prepend"},g),a.createElement(E,s({label:w,required:O,labelId:L,staticAnimation:V},A)),I&&a.createElement(t.Tooltip,{content:I,placement:"right",showCloseButton:!1,disableFocusListener:!0,disableHoverListener:!0,disableClickListner:!1,disableKeyboardListener:!1},a.createElement(r.IconButton,{as:"span",tabIndex:0,role:"button",className:"eds-form-control__append eds-form-control__append--tooltip","aria-label":R},a.createElement(n.QuestionIcon,{className:"eds-input-group__label-tooltip-icon","aria-hidden":"true"}))),d,y&&a.createElement("div",{className:"eds-form-control__append"},y)),z&&M&&a.createElement(p,{variant:M,role:T?"alert":void 0},z)))})),k=["checked","className","children","style","disabled","reduceClickArea"],N=a.forwardRef((function(n,t){var r=n.checked,d=n.className,o=n.children,c=n.style,m=n.disabled,b=void 0!==m&&m,p=n.reduceClickArea,f=u(n,k),v=a.useRef(null),h="indeterminate"===r,g=void 0!==r;return a.useEffect((function(){v&&v.current&&(v.current.indeterminate=h)}),[h]),a.createElement("label",{className:l("eds-checkbox__container",d,{"eds-checkbox--disabled":b,"eds-checkbox__container--reduced-click-area":p}),style:c},a.createElement("input",s({type:"checkbox",ref:e.mergeRefs(t,v),checked:g?!0===r:void 0,disabled:b},f)),a.createElement("span",{className:l("eds-checkbox__icon",{"eds-checkbox__icon--disabled":b,"eds-checkbox__icon--reduced-click-area":p})},a.createElement(w,{indeterminate:h})),o&&a.createElement(i.Paragraph,{className:"eds-checkbox__label",margin:"none",as:"span"},o))})),w=function(e){var l=e.indeterminate;return a.createElement("svg",{className:"eds-checkbox-icon",width:"11px",height:"9px",viewBox:"6 11 37 33","aria-hidden":!0},void 0!==l&&l?a.createElement("rect",{x:"10",y:"25",width:"28",height:"5",fill:"white"}):a.createElement("path",{d:"M14.1 27.2l7.1 7.2 14.6-14.8",fill:"none"}))},O=["children","className","label"],I=function(e){var n=e.children,t=e.className,r=e.label,d=u(e,O);return a.createElement("fieldset",s({className:l("eds-fieldset",t)},d),r&&a.createElement(i.Heading5,{as:"legend"},r),n)},F=a.createContext(null),R=F.Provider,z=function(){var e=a.useContext(F);if(!e)throw new Error("You need to wrap your RadioButtons in a RadioGroup component");return e},L=["className","children","value","disabled"],A=a.forwardRef((function(e,n){var t,r,d,o=e.className,c=e.children,m=e.value,b=e.disabled,p=u(e,L),f=l(o,"eds-form-component--radio__radio",{"eds-form-component--radio__radio--disabled":b}),v=z();return a.createElement("label",{className:"eds-form-component--radio__container"},a.createElement("input",s({type:"radio",name:null!=(t=p.name)?t:v.name,ref:n,value:m,checked:null!=(r=p.checked)?r:v.value===m,onChange:null!=(d=p.onChange)?d:v.onChange,disabled:b},p)),a.createElement("span",{className:f},a.createElement("span",{className:"eds-form-component--radio__circle"})),c&&a.createElement(i.Paragraph,{margin:"none",as:"span",className:"eds-form-component--radio__label"},c))})),P=["className","children","value","title","secondaryLabel","size","hideSelectionIndicator","style","id","disabled","type","onChange","checked","name"],S=a.forwardRef((function(n,t){var r,i,d,o,c=n.className,m=n.children,b=n.value,p=n.title,f=n.secondaryLabel,v=n.size,h=void 0===v?"medium":v,g=n.hideSelectionIndicator,E=void 0!==g&&g,y=n.style,C=n.id,_=n.disabled,x=void 0!==_&&_,k=n.type,w=void 0===k?"radio":k,O=n.onChange,I=n.checked,F=n.name,R=u(n,P),z=l(c,"eds-input-panel__container","eds-input-panel--"+h),L=a.useRef(null),S=e.useRandomId("eds-inputpanel"),V=C||S,q=e.useForceUpdate();return a.createElement("label",{className:"eds-input-panel",htmlFor:V},a.createElement("input",s({type:w,name:F,ref:e.mergeRefs(t,L),value:b,checked:I,onChange:function(e){void 0===O&&q(),null==O||O(e)},id:V,disabled:x},R)),a.createElement("div",{className:z,style:y},a.createElement("div",{className:"eds-input-panel__title-wrapper"},a.createElement("div",{className:"eds-input-panel__title"},p),a.createElement("div",{className:"eds-input-panel__secondary-label-and-icon-wrapper"},void 0!==f&&a.createElement(a.Fragment,null,f),a.createElement("span",{style:{pointerEvents:"none"}},!(x||E)&&("radio"===w?a.createElement(A,{name:"",value:"",checked:null!=(r=null!=I?I:null==(i=L.current)?void 0:i.checked)&&r,onChange:function(){},"aria-hidden":"true",tabIndex:-1}):a.createElement(N,{checked:null!=(d=null!=I?I:null==(o=L.current)?void 0:o.checked)&&d,onChange:function(){return null},"aria-hidden":"true",tabIndex:-1}))))),m&&a.createElement("div",{className:"eds-input-panel__additional-content"},m)))})),V=["className","children","value","title","secondaryLabel","size","hideRadioButton","style","id","disabled"],q=a.forwardRef((function(e,l){var n=e.className,t=e.children,r=e.value,i=e.title,d=e.secondaryLabel,o=e.size,c=void 0===o?"medium":o,m=e.hideRadioButton,b=void 0!==m&&m,p=e.style,f=e.id,v=e.disabled,h=void 0!==v&&v,g=u(e,V),E=z();return a.createElement(S,s({type:"radio",name:E.name,title:i,value:r,checked:E.value===r,onChange:E.onChange,className:n,secondaryLabel:d,size:c,hideSelectionIndicator:b,style:p,id:f,disabled:h},g,{ref:l}),t)})),T=["name","checked","onChange","className","children","value","title","secondaryLabel","size","hideCheckbox","style","id","disabled"],j=a.forwardRef((function(e,l){var n=e.name,t=e.checked,r=e.onChange,i=e.className,d=e.children,o=e.value,c=e.title,m=e.secondaryLabel,b=e.size,p=void 0===b?"medium":b,f=e.hideCheckbox,v=void 0!==f&&f,h=e.style,g=e.id,E=e.disabled,y=void 0!==E&&E,C=u(e,T);return a.createElement(S,s({type:"checkbox",name:n,title:c,value:o,checked:t,onChange:r,className:i,secondaryLabel:m,size:p,hideSelectionIndicator:v,style:h,id:g,disabled:y},C,{ref:l}),d)})),B=["name","value","children","onChange","label"],M=["className","children","labelPlacement","icon","hideIcon","color","contrastColor","size","checked"],G=a.forwardRef((function(e,t){var r=e.className,i=e.children,o=e.labelPlacement,c=void 0===o?"right":o,m=e.icon,b=e.hideIcon,p=void 0!==b&&b,f=e.color,v=void 0===f?d.colors.validation.mint:f,h=e.contrastColor,g=void 0===h?d.colors.validation.mintContrast:h,E=e.size,y=void 0===E?"medium":E,C=e.checked,_=u(e,M);return a.createElement("label",{className:l("eds-switch","eds-switch--"+c,r),style:s({},_.style)},a.createElement("input",s({type:"checkbox",ref:t,checked:C},_)),a.createElement("span",{className:l("eds-switch__switch","eds-switch__switch--"+y),style:{"--eds-switch-color":v,"--eds-switch-contrast-color":g},"aria-hidden":"true"},a.createElement("span",{className:"eds-switch__circle"},!p&&(m||(void 0===C?a.createElement(a.Fragment,null):a.createElement(C?n.CheckIcon:n.CloseSmallIcon,{size:"large"===y?23:void 0}))))),i&&a.createElement("span",{className:l("eds-switch__label","eds-switch__label--"+y+"--"+c)},i))}));function H(e){return null!=e&&!(Array.isArray(e)&&0===e.length)}function K(e,a){return void 0===a&&(a=!1),e&&(H(e.value)&&""!==e.value||a&&H(e.defaultValue)&&""!==e.defaultValue)}var Y=["variant","disabled","readOnly","className","style","label","feedback","labelTooltip","onChange","disableLabelAnimation"],D=["readOnly","disabled","onChange","value","variant"],Q=a.forwardRef((function(n,t){var r=n.variant,i=n.disabled,d=void 0!==i&&i,o=n.readOnly,c=void 0!==o&&o,m=n.className,b=n.style,p=n.label,f=n.feedback,v=n.labelTooltip,h=n.onChange,g=n.disableLabelAnimation,E=u(n,Y),y=e.useRandomId("eds-textarea"),C=a.useRef(null);return a.createElement(x,{className:l(m,"eds-textarea__wrapper"),disabled:d,readOnly:c,variant:r,style:b,label:p,labelId:y,feedback:f,labelTooltip:v,labelProps:{className:"eds-textarea__label"},disableLabelAnimation:g,onClick:function(e){var a;e.target===e.currentTarget&&(null==C||null==(a=C.current)||a.focus())}},a.createElement(U,s({readOnly:c,disabled:d,ref:e.mergeRefs(t,C),"aria-labelledby":y,onChange:h,variant:r},E)))})),U=a.forwardRef((function(l,n){var t=l.readOnly,r=l.disabled,i=l.onChange,d=l.value,o=l.variant,c=u(l,D),m=C(),b=o||m,p=h(),f=p.isFilled,v=p.setFilled;return e.useOnMount((function(){(null!=d&&d.toString()||c.defaultValue)&&v&&!f&&v(!0)})),a.useEffect((function(){null!=d&&d.toString()&&v&&!f&&v(!0)}),[d,v,f]),a.createElement("textarea",s({className:"eds-form-control eds-textarea",ref:n,readOnly:t,disabled:r,onChange:function(e){K(e.target)?v&&!f&&v(!0):v&&f&&v(!1),i&&i(e)},value:d,"aria-invalid":"error"===b},c))})),J=["prepend","append","variant","disabled","readOnly","className","style","size","label","required","labelTooltip","feedback","onChange","disableLabelAnimation","labelProps","clearable","onClear","value","ariaAlertOnFeedback"],W=["disabled","readOnly","placeholder","onChange","value","variant"],X=["onClear"],Z=a.forwardRef((function(n,t){var r=n.prepend,i=n.append,d=n.variant,o=n.disabled,c=void 0!==o&&o,m=n.readOnly,b=void 0!==m&&m,p=n.className,f=n.style,v=n.size,h=void 0===v?"medium":v,g=n.label,E=n.required,y=n.labelTooltip,C=n.feedback,_=n.onChange,k=n.disableLabelAnimation,N=n.labelProps,w=n.clearable,O=void 0!==w&&w,I=n.onClear,F=n.value,R=n.ariaAlertOnFeedback,z=void 0!==R&&R,L=u(n,J),A=e.useRandomId("eds-textfield"),P=N&&N.id?N.id:A,S=a.useRef(null);return a.createElement(x,{disabled:c,readOnly:b,variant:d,prepend:r,append:O&&I?a.createElement(ee,{onClear:I}):i,className:l(p,"eds-textfield__wrapper"),style:f,size:h,label:g,required:E,labelTooltip:y,labelId:P,feedback:C,disableLabelAnimation:k,labelProps:N,ariaAlertOnFeedback:z,onClick:function(e){var a;e.target===e.currentTarget&&(null==S||null==(a=S.current)||a.focus())}},a.createElement($,s({disabled:c,readOnly:b,ref:e.mergeRefs(t,S),"aria-labelledby":P,onChange:_,value:F,variant:d},L)))})),$=a.forwardRef((function(l,n){var t=l.disabled,r=l.readOnly,i=l.placeholder,d=l.onChange,o=l.value,c=l.variant,m=u(l,W),b=C(),p=c||b,f=h(),v=f.isFilled,g=f.setFilled;return e.useOnMount((function(){(null!=o&&o.toString()||m.defaultValue)&&g&&!v&&g(!0)})),a.useEffect((function(){null!=o&&o.toString()&&g&&!v&&g(!0)}),[o,g,v]),a.createElement("input",s({"aria-invalid":"error"===p,className:"eds-form-control",disabled:t,readOnly:r,ref:n,placeholder:i,onChange:function(e){K(e.target)?g&&!v&&g(!0):g&&v&&g(!1),d&&d(e)},value:o},m))})),ee=function(e){var l=e.onClear,t=u(e,X),r=h(),i=r.isFilled,d=r.setFilled;return a.createElement("div",{className:"eds-textfield__clear-button-wrapper"},i&&a.createElement("div",{className:"eds-textfield__divider"}),i&&a.createElement("button",s({className:"eds-textfield__clear-button",type:"button",tabIndex:-1,onClick:function(){d(!1),l()}},t),a.createElement(n.CloseSmallIcon,null)))},ae=["name","onChange","selectedValue","multiple","size"],le=a.createContext(null),ne=function(l){var n=l.name,t=l.onChange,r=void 0===t?function(){}:t,i=l.selectedValue,d=l.multiple,o=l.size,c=u(l,ae),m=e.useRandomId("eds-segmented-control"),b=a.useMemo((function(){return{name:n||m,onChange:r,multiple:d,selectedValue:i,size:o}}),[m,d,n,r,i,o]);return a.createElement(le.Provider,s({value:b},c))},te=["children","className","style","value","name","onChange"],re=a.forwardRef((function(e,n){var t=e.children,r=e.className,i=e.style,d=e.value,o=e.name,c=e.onChange,m=void 0===c?function(){}:c,b=u(e,te),p=function(){var e=a.useContext(le);if(!e)throw new Error("You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl");return e}(),f=p.name,v=p.selectedValue,h=p.onChange,g=p.multiple,E=p.size,y=g?v[d]:v===d;return a.createElement("label",{className:l("eds-segmented-choice",r),style:i},a.createElement("input",s({type:g?"checkbox":"radio",name:o||f,checked:y,value:d,onChange:function(e){var a;m(e),g?h(s({},v,((a={})[d]=e.target.checked,a))):e.target.checked&&h(d)},ref:n},b)),a.createElement("div",{className:l("eds-base-segmented",{"eds-base-segmented--large":"large"===E})},t))})),ie=["children","label","name","onChange","selectedValue","size","className"],de=["children","label","name","onChange","selectedValue"];e.warnAboutMissingStyles("form","icons","typography"),exports.BaseFormControl=x,exports.Checkbox=N,exports.CheckboxPanel=j,exports.FeedbackText=p,exports.Fieldset=I,exports.InputGroupContextProvider=v,exports.InputGroupLabel=E,exports.MultipleSegmentedControl=function(e){var l=e.children,n=e.label,t=e.name,r=e.onChange,d=e.selectedValue,o=u(e,de);return a.createElement(ne,{name:t,selectedValue:d,onChange:r,multiple:!0,size:"medium"},a.createElement(i.Label,{as:"div"},n),a.createElement("div",s({className:"eds-segmented-control"},o),l))},exports.Radio=A,exports.RadioGroup=function(e){var l=e.name,n=e.value,t=e.children,r=e.onChange,i=e.label,d=u(e,B),o=a.useMemo((function(){return{name:l,value:n,onChange:r}}),[l,n,r]);return a.createElement(R,{value:o},i?a.createElement(I,s({label:i},d),t):t)},exports.RadioPanel=q,exports.SegmentedChoice=re,exports.SegmentedControl=function(e){var n=e.children,t=e.label,r=e.name,i=e.onChange,d=e.selectedValue,o=e.size,c=void 0===o?"medium":o,m=e.className,b=u(e,ie);return a.createElement(ne,{name:r,selectedValue:d,onChange:i,multiple:!1,size:c},a.createElement(I,{label:t},a.createElement("div",s({className:l("eds-segmented-control",m)},b),n)))},exports.Switch=G,exports.TextArea=Q,exports.TextField=Z,exports.VariantProvider=function(e){var l=e.variant;return a.createElement(y.Provider,{value:void 0===l?null:l},e.children)},exports.hasValue=H,exports.isFilled=K,exports.useInputGroupContext=h,exports.useVariant=C;
 //# sourceMappingURL=form.cjs.production.min.js.map

dist/form.esm.js

 import { mergeRefs, useRandomId, useForceUpdate, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import classNames from 'classnames';
 import * as React from 'react';
 import React__default, { useRef } from 'react';
+import classNames from 'classnames';
 import { ValidationErrorFilledIcon, ValidationExclamationFilledIcon, ValidationSuccessFilledIcon, QuestionIcon, CheckIcon, CloseSmallIcon } from '@entur/icons';
+import { Tooltip } from '@entur/tooltip';
+import { IconButton } from '@entur/button';
 import { SubLabel, Paragraph, Heading5, Label } from '@entur/typography';
-import { Tooltip } from '@entur/tooltip';
 import { colors } from '@entur/tokens';
@@ -151,3 +152,3 @@
 
-var _excluded$e = ["children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
+var _excluded$e = ["children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
 /** @deprecated use variant="negative" instead */
@@ -171,2 +172,4 @@ var error = 'error';
     labelTooltip = _ref.labelTooltip,
+    _ref$labelTooltipButt = _ref.labelTooltipButtonAriaLabel,
+    labelTooltipButtonAriaLabel = _ref$labelTooltipButt === void 0 ? 'Klikk for tilleggsinfo om feltet' : _ref$labelTooltipButt,
     feedback = _ref.feedback,
@@ -183,4 +186,9 @@ labelId = _ref.labelId,
   var currentVariant = variant || contextVariant;
-  return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div", null, React__default.createElement("div", _extends({
-    className: classNames('eds-form-control-wrapper', className, "eds-form-control-wrapper--size-" + size, {
+  return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div", {
+    className: classNames('eds-form-control__field-and-feedback-text', className, {
+      'eds-form-control__field-and-feedback-text--has-tooltip': labelTooltip !== undefined
+    }),
+    style: style
+  }, React__default.createElement("div", _extends({
+    className: classNames('eds-form-control-wrapper', "eds-form-control-wrapper--size-" + size, {
       'eds-form-control-wrapper--success': currentVariant === 'success',
@@ -192,4 +200,3 @@ 'eds-form-control-wrapper--negative': currentVariant === 'negative' || currentVariant === error,
     }),
-    ref: ref,
-    style: style
+    ref: ref
   }, rest), prepend && React__default.createElement("div", {
@@ -202,12 +209,22 @@ className: "eds-form-control__prepend"
     staticAnimation: disableLabelAnimation
-  }, labelProps)), children, append && React__default.createElement("div", {
+  }, labelProps)), labelTooltip && React__default.createElement(Tooltip, {
+    content: labelTooltip,
+    placement: "right",
+    showCloseButton: false,
+    disableFocusListener: true,
+    disableHoverListener: true,
+    disableClickListner: false,
+    disableKeyboardListener: false
+  }, React__default.createElement(IconButton, {
+    as: "span",
+    tabIndex: 0,
+    role: "button",
+    className: "eds-form-control__append eds-form-control__append--tooltip",
+    "aria-label": labelTooltipButtonAriaLabel
+  }, React__default.createElement(QuestionIcon, {
+    className: "eds-input-group__label-tooltip-icon",
+    "aria-hidden": "true"
+  }))), children, append && React__default.createElement("div", {
     className: "eds-form-control__append"
-  }, append), labelTooltip && React__default.createElement("div", {
-    className: "eds-form-control__append eds-form-control__append--tooltip"
-  }, React__default.createElement(Tooltip, {
-    content: labelTooltip,
-    placement: "right"
-  }, React__default.createElement("span", {
-    className: "eds-input-group__label-tooltip-icon"
-  }, React__default.createElement(QuestionIcon, null))))), feedback && currentVariant && React__default.createElement(FeedbackText, {
+  }, append)), feedback && currentVariant && React__default.createElement(FeedbackText, {
     variant: currentVariant,
@@ -600,4 +617,5 @@ role: ariaAlertOnFeedback ? 'alert' : undefined
   var textAreaId = useRandomId('eds-textarea');
+  var textareaRef = React__default.useRef(null);
   return React__default.createElement(BaseFormControl, {
-    className: className,
+    className: classNames(className, 'eds-textarea__wrapper'),
     disabled: disabled,
@@ -614,7 +632,11 @@ readOnly: readOnly,
     },
-    disableLabelAnimation: disableLabelAnimation
+    disableLabelAnimation: disableLabelAnimation,
+    onClick: function onClick(e) {
+      var _textareaRef$current;
+      if (e.target === e.currentTarget) textareaRef == null ? void 0 : (_textareaRef$current = textareaRef.current) == null ? void 0 : _textareaRef$current.focus();
+    }
   }, React__default.createElement(TextAreaBase, _extends({
     readOnly: readOnly,
     disabled: disabled,
-    ref: ref,
+    ref: mergeRefs(ref, textareaRef),
     "aria-labelledby": textAreaId,
@@ -699,2 +721,3 @@ onChange: onChange,
   var textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
+  var textFieldRef = React__default.useRef(null);
   return React__default.createElement(BaseFormControl, {
@@ -708,3 +731,3 @@ disabled: disabled,
     }) : append,
-    className: className,
+    className: classNames(className, 'eds-textfield__wrapper'),
     style: style,
@@ -719,7 +742,11 @@ size: size,
     labelProps: labelProps,
-    ariaAlertOnFeedback: ariaAlertOnFeedback
+    ariaAlertOnFeedback: ariaAlertOnFeedback,
+    onClick: function onClick(e) {
+      var _textFieldRef$current;
+      if (e.target === e.currentTarget) textFieldRef == null ? void 0 : (_textFieldRef$current = textFieldRef.current) == null ? void 0 : _textFieldRef$current.focus();
+    }
   }, React__default.createElement(TextFieldBase, _extends({
     disabled: disabled,
     readOnly: readOnly,
-    ref: ref,
+    ref: mergeRefs(ref, textFieldRef),
     "aria-labelledby": textFieldId,
@@ -726,0 +753,0 @@ onChange: onChange,

dist/TextArea.d.ts

 import React from 'react';
+import { VariantType } from '@entur/utils';
 import './TextArea.scss';
-import { VariantType } from '@entur/utils';
 /** @deprecated use variant="information" instead */
@@ -5,0 +5,0 @@ declare const info = "info";

package.json

 {
   "name": "@entur/form",
-  "version": "7.2.0",
+  "version": "8.0.0-beta.0",
   "license": "EUPL-1.2",
@@ -30,10 +30,10 @@ "main": "dist/index.js",
   "dependencies": {
-    "@entur/icons": "^6.18.0",
+    "@entur/icons": "^7.0.0-beta.0",
     "@entur/tokens": "^3.15.1",
-    "@entur/tooltip": "^2.7.10",
-    "@entur/typography": "^1.8.39",
+    "@entur/tooltip": "^3.0.0-beta.0",
+    "@entur/typography": "^1.8.40-beta.0",
     "@entur/utils": "^0.11.1",
     "classnames": "^2.3.1"
   },
-  "gitHead": "750c39e0b36eff3beaa9f6a38ae2dea6e29d2085"
+  "gitHead": "c8e99ab901c06e9faf622f1a1f88e1b0e7e34419"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

428103

increased by2.84%

Lines of code

4140

increased by1.57%

Worsened metrics

Number of low quality alerts

3

increased by50%

Dependency changes

• + Added@entur/tooltip@3.0.2(transitive)

• - Removed@entur/icons@6.18.1(transitive)

• - Removed@entur/tooltip@2.7.11(transitive)

• Updated@entur/icons@^7.0.0-beta.0

• Updated@entur/tooltip@^3.0.0-beta.0

• Updated@entur/typography@^1.8.40-beta.0