@fremtind/jokul 5.0.0 → 5.0.2

package/build/cjs/components/checkbox-panel/CheckboxPanel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const t=require("../input-panel/InputPanel.cjs");exports.CheckboxPanel=r=>e.jsx(t.InputPanel,{...r,type:"checkbox"});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../input-panel/InputPanel.cjs"),n=r.forwardRef(function(r,n){return e.jsx(t.InputPanel,{...r,ref:n,type:"checkbox"})});exports.CheckboxPanel=n;
 //# sourceMappingURL=CheckboxPanel.cjs.map

package/build/cjs/components/checkbox-panel/CheckboxPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxPanel.cjs","sources":["../../../../src/components/checkbox-panel/CheckboxPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { CheckboxPanelProps } from \"./types.js\";\n\nexport const CheckboxPanel = (props: CheckboxPanelProps) => (\n    <InputPanel {...props} type=\"checkbox\" />\n);\n"],"names":["props","jsx","InputPanel","type"],"mappings":"6MAI8BA,GAC1BC,MAACC,EAAAA,eAAeF,EAAOG,KAAK"}
+{"version":3,"file":"CheckboxPanel.cjs","sources":["../../../../src/components/checkbox-panel/CheckboxPanel.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { CheckboxPanelProps } from \"./types.js\";\n\nexport const CheckboxPanel = forwardRef<HTMLInputElement, CheckboxPanelProps>(\n    function CheckboxPanel(props, ref) {\n        return <InputPanel {...props} ref={ref} type=\"checkbox\" />;\n    },\n);\n"],"names":["CheckboxPanel","forwardRef","props","ref","InputPanel","type"],"mappings":"mLAIaA,EAAgBC,EAAAA,WACzB,SAAuBC,EAAOC,GAC1B,aAAQC,EAAAA,WAAA,IAAeF,EAAOC,IAAAA,EAAUE,KAAK,YACjD"}

package/build/cjs/components/checkbox-panel/CheckboxPanel.d.cts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { CheckboxPanelProps } from './types.cjs';
-export declare const CheckboxPanel: (props: CheckboxPanelProps) => React.JSX.Element;
+export declare const CheckboxPanel: React.ForwardRefExoticComponent<CheckboxPanelProps & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/expander/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ExpandablePanel.cjs"),a=require("./Expander.cjs");exports.ExpandablePanel=e.ExpandablePanel,exports.Expander=a.Expander;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ExpandablePanel.cjs"),r=require("./Expander.cjs"),n=require("./Accordion.cjs");exports.ExpandablePanel=e.ExpandablePanel,exports.Expander=r.Expander,exports.Accordion=n.Accordion;
 //# sourceMappingURL=index.cjs.map

package/build/cjs/components/expander/index.d.cts

@@ -1,3 +1,4 @@
 export { ExpandablePanel } from './ExpandablePanel.cjs';
 export { Expander } from './Expander.cjs';
+export { Accordion } from './Accordion.cjs';
 export type { ExpandablePanelProps, ExpanderProps, AccordionProps, } from './types.cjs';

package/build/cjs/components/input-panel/InputPanel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),a=require("../checkbox/Checkbox.cjs"),i=require("../radio-button/RadioButton.cjs");require("../../hooks/useId/useId.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../radio-button/radioGroupContext.cjs"),require("../radio-button/BaseRadioButton.cjs");const s=n.forwardRef(function({className:n,description:s,type:c,label:o,amount:t,value:l=o,name:u="Panelvalg",children:d,extraLabel:j,alwaysOpen:p=!1,...x},h){return e.jsxs("div",{className:r.clsx("jkl-input-panel",`jkl-${c}-panel`,n),ref:h,"data-always-open":p,children:[e.jsxs("div",{className:"jkl-input-panel__header",children:["checkbox"===c&&e.jsx(a.Checkbox,{value:l?.toString(),name:u,...x,children:o}),"radio"===c&&e.jsx(i.RadioButton,{value:l?.toString(),name:u,...x,children:o}),(t||j)&&e.jsx("span",{className:"jkl-input-panel__header__amount",children:t||j})]}),(s||d)&&e.jsx("div",{className:"jkl-input-panel__description",children:s||d})]})});exports.InputPanel=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),n=require("../checkbox/Checkbox.cjs"),i=require("../radio-button/RadioButton.cjs");require("../../hooks/useId/useId.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../radio-button/radioGroupContext.cjs"),require("../radio-button/BaseRadioButton.cjs");const s=r.forwardRef(function({className:r,description:s,type:t,label:c,amount:o,value:l=c,name:u="Panelvalg",children:d,extraLabel:j,alwaysOpen:p=!1,"data-size":x,"data-theme":h,...m},b){return e.jsxs("div",{className:a.clsx("jkl-input-panel",`jkl-${t}-panel`,r),"data-always-open":p,"data-size":x,"data-theme":h,children:[e.jsxs("div",{className:"jkl-input-panel__header",children:["checkbox"===t&&e.jsx(n.Checkbox,{value:l?.toString(),name:u,ref:b,...m,children:c}),"radio"===t&&e.jsx(i.RadioButton,{value:l?.toString(),name:u,ref:b,...m,children:c}),(o||j)&&e.jsx("span",{className:"jkl-input-panel__header__amount",children:o||j})]}),(s||d)&&e.jsx("div",{className:"jkl-input-panel__description",children:s||d})]})});exports.InputPanel=s;
 //# sourceMappingURL=InputPanel.cjs.map

package/build/cjs/components/input-panel/InputPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPanel.cjs","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen = false,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            ref={ref}\n            data-always-open={alwaysOpen}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox value={value?.toString()} name={name} {...rest}>\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"mgBAMO,MAAMA,EAAaC,EAAAA,WAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAAA,GAAa,KACVC,GAEPC,GAEA,OACIC,EAAAA,KAAC,MAAA,CACGZ,UAAWa,EAAAA,KAAK,kBAAmB,OAAOX,UAAcF,GACxDW,IAAAA,EACA,mBAAkBF,EAElBF,SAAA,CAAAK,EAAAA,KAAC,MAAA,CAAIZ,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGY,EAAAA,IAACC,EAAAA,SAAA,CAASV,MAAOA,GAAOW,WAAYV,KAAAA,KAAgBI,EAC/CH,SAAAJ,IAGC,UAATD,GACGY,EAAAA,IAACG,EAAAA,YAAA,CACGZ,MAAOA,GAAOW,WACdV,KAAAA,KACII,EAEHH,SAAAJ,KAGPC,GAAUI,IACRM,EAAAA,IAAC,QAAKd,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbO,EAAAA,IAAC,OAAId,UAAU,+BACVO,YAAeA,MAKpC"}
+{"version":3,"file":"InputPanel.cjs","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n    {\n        className,\n        description,\n        type,\n        label,\n        amount,\n        value = label,\n        name = \"Panelvalg\",\n        children,\n        extraLabel,\n        alwaysOpen = false,\n        \"data-size\": dataSize,\n        \"data-theme\": dataTheme,\n        ...rest\n    }: InputPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return (\n        <div\n            className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n            data-always-open={alwaysOpen}\n            data-size={dataSize}\n            data-theme={dataTheme}\n        >\n            <div className=\"jkl-input-panel__header\">\n                {type === \"checkbox\" && (\n                    <Checkbox\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </Checkbox>\n                )}\n                {type === \"radio\" && (\n                    <RadioButton\n                        value={value?.toString()}\n                        name={name}\n                        ref={ref}\n                        {...rest}\n                    >\n                        {label}\n                    </RadioButton>\n                )}\n                {(amount || extraLabel) && (\n                    <span className=\"jkl-input-panel__header__amount\">\n                        {amount || extraLabel}\n                    </span>\n                )}\n            </div>\n            {(description || children) && (\n                <div className=\"jkl-input-panel__description\">\n                    {description || children}\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","dataSize","dataTheme","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"mgBAMO,MAAMA,EAAaC,EAAAA,WAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAAA,GAAa,EACb,YAAaC,EACb,aAAcC,KACXC,GAEPC,GAEA,OACIC,EAAAA,KAAC,MAAA,CACGd,UAAWe,EAAAA,KAAK,kBAAmB,OAAOb,UAAcF,GACxD,mBAAkBS,EAClB,YAAWC,EACX,aAAYC,EAEZJ,SAAA,CAAAO,EAAAA,KAAC,MAAA,CAAId,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGc,EAAAA,IAACC,EAAAA,SAAA,CACGZ,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,IAGC,UAATD,GACGc,EAAAA,IAACG,EAAAA,YAAA,CACGd,MAAOA,GAAOa,WACdZ,KAAAA,EACAO,IAAAA,KACID,EAEHL,SAAAJ,KAGPC,GAAUI,IACRQ,EAAAA,IAAC,QAAKhB,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbS,EAAAA,IAAC,OAAIhB,UAAU,+BACVO,YAAeA,MAKpC"}

package/build/cjs/components/input-panel/InputPanel.d.cts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & {
+export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & import('../../utilities/types.js').JokulModes & {
     label: string;
     type: "radio" | "checkbox";
     amount?: string;

package/build/cjs/components/input-panel/types.d.cts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & {
+import { JokulModes } from '../../utilities/types.cjs';
+export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & JokulModes & {
     label: string;
     type: "radio" | "checkbox";
     /**

package/build/cjs/components/message/Message.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useId/useId.cjs"),r=require("../icon/icons/ErrorIcon.cjs"),n=require("../icon/icons/InfoIcon.cjs"),l=require("../icon/icons/SuccessIcon.cjs"),c=require("../icon/icons/WarningIcon.cjs"),t=require("./DismissButton.cjs"),o=e=>{switch(e){case"error":return s.jsx(r.ErrorIcon,{className:"jkl-message__icon"});case"info":return s.jsx(n.InfoIcon,{className:"jkl-message__icon"});case"success":return s.jsx(l.SuccessIcon,{className:"jkl-message__icon"});case"warning":return s.jsx(c.WarningIcon,{className:"jkl-message__icon"});default:return null}};function m(r){const n=i.forwardRef((n,l)=>{const{id:c,title:m,fullWidth:d,className:g="",dismissed:u,dismissAction:j,children:h,role:k,...x}=n,f=a.useId(c||"jkl-message",{generateSuffix:!c}),_=i.Children.map(h,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:h}):h;return s.jsxs("div",{...x,id:c,ref:l,className:e.clsx("jkl-message",`jkl-message--${r}`,g,{"jkl-message--full":d,"jkl-message--dismissed":u}),role:k,children:[o(r),s.jsxs("div",{className:"jkl-message__content","data-theme":"light",children:[m&&s.jsx("p",{className:"jkl-message__title",children:m}),s.jsx("div",{className:"jkl-message__message",children:_})]}),j?.handleDismiss&&s.jsx(t.DismissButton,{"data-theme":"light","aria-controls":f,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})});return n.displayName="Message",n}const d=i.forwardRef((r,n)=>{const{id:l,title:c,fullWidth:m,className:d="",dismissed:g,dismissAction:u,children:j,variant:h="info",role:k,...x}=r,f=a.useId(l||"jkl-message",{generateSuffix:!l}),_=i.Children.map(j,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:j}):j;return s.jsxs("div",{...x,id:l,ref:n,className:e.clsx("jkl-message",`jkl-message--${h}`,d,{"jkl-message--full":m,"jkl-message--dismissed":g}),role:k,children:[o(h),s.jsxs("div",{className:"jkl-message__content","data-theme":"light",children:[c&&s.jsx("p",{className:"jkl-message__title",children:c}),s.jsx("div",{className:"jkl-message__message",children:_})]}),u?.handleDismiss&&s.jsx(t.DismissButton,{"data-theme":"light","aria-controls":f,className:"jkl-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})}),g=m("info");g.displayName="InfoMessage";const u=m("error");u.displayName="ErrorMessage";const j=m("warning");j.displayName="WarningMessage";const h=m("success");h.displayName="SuccessMessage",exports.ErrorMessage=u,exports.InfoMessage=g,exports.Message=d,exports.SuccessMessage=h,exports.WarningMessage=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useId/useId.cjs"),r=require("../icon/icons/ErrorIcon.cjs"),n=require("../icon/icons/InfoIcon.cjs"),l=require("../icon/icons/SuccessIcon.cjs"),c=require("../icon/icons/WarningIcon.cjs"),t=require("./DismissButton.cjs"),o=e=>{switch(e){case"error":return s.jsx(r.ErrorIcon,{className:"jkl-message__icon"});case"info":return s.jsx(n.InfoIcon,{className:"jkl-message__icon"});case"success":return s.jsx(l.SuccessIcon,{className:"jkl-message__icon"});case"warning":return s.jsx(c.WarningIcon,{className:"jkl-message__icon"});default:return null}};function m(r){const n=i.forwardRef((n,l)=>{const{id:c,title:m,fullWidth:d,className:u="",dismissed:g,dismissAction:j,children:k,role:x,...f}=n,h=a.useId(c||"jkl-message",{generateSuffix:!c}),_=i.Children.map(k,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:k}):k;return s.jsxs("div",{...f,id:c,ref:l,className:e.clsx("jkl-message",`jkl-message--${r}`,u,{"jkl-message--full":d,"jkl-message--dismissed":g}),role:x,children:[o(r),s.jsxs("div",{className:"jkl-message__content","data-theme":"light",children:[m&&s.jsx("p",{className:"jkl-message__title",children:m}),s.jsx("div",{className:"jkl-message__message",children:_})]}),j?.handleDismiss&&s.jsx(t.DismissButton,{"aria-controls":h,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})});return n.displayName="Message",n}const d=i.forwardRef((r,n)=>{const{id:l,title:c,fullWidth:m,className:d="",dismissed:u,dismissAction:g,children:j,variant:k="info",role:x,...f}=r,h=a.useId(l||"jkl-message",{generateSuffix:!l}),_=i.Children.map(j,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:j}):j;return s.jsxs("div",{...f,id:l,ref:n,className:e.clsx("jkl-message",`jkl-message--${k}`,d,{"jkl-message--full":m,"jkl-message--dismissed":u}),role:x,children:[o(k),s.jsxs("div",{className:"jkl-message__content","data-theme":"light",children:[c&&s.jsx("p",{className:"jkl-message__title",children:c}),s.jsx("div",{className:"jkl-message__message",children:_})]}),g?.handleDismiss&&s.jsx(t.DismissButton,{"aria-controls":h,className:"jkl-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})}),u=m("info");u.displayName="InfoMessage";const g=m("error");g.displayName="ErrorMessage";const j=m("warning");j.displayName="WarningMessage";const k=m("success");k.displayName="SuccessMessage",exports.ErrorMessage=g,exports.InfoMessage=u,exports.Message=d,exports.SuccessMessage=k,exports.WarningMessage=j;
 //# sourceMappingURL=Message.cjs.map

package/build/cjs/components/message/Message.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Message.cjs","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${messageType}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        data-theme=\"light\"\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        data-theme=\"light\"\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"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"}
+{"version":3,"file":"Message.cjs","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${messageType}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\" data-theme=\"light\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"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"}

package/build/cjs/components/radio-panel/RadioPanel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../input-panel/InputPanel.cjs"),n=r.forwardRef(function({...r},n){return e.jsx(t.InputPanel,{...r,type:"radio",ref:n})});exports.RadioPanel=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../input-panel/InputPanel.cjs"),n=r.forwardRef(function(r,n){return e.jsx(t.InputPanel,{...r,type:"radio",ref:n})});exports.RadioPanel=n;
 //# sourceMappingURL=RadioPanel.cjs.map

package/build/cjs/components/radio-panel/RadioPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioPanel.cjs","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, { type ForwardedRef, forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n    { ...rest }: RadioPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return <InputPanel {...rest} type=\"radio\" ref={ref} />;\n});\n"],"names":["RadioPanel","forwardRef","rest","ref","InputPanel","type"],"mappings":"mLAIaA,EAAaC,EAAAA,WAAW,aAC5BC,GACLC,GAEA,aAAQC,EAAAA,WAAA,IAAeF,EAAMG,KAAK,QAAQF,IAAAA,GAC9C"}
+{"version":3,"file":"RadioPanel.cjs","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef<HTMLInputElement, RadioPanelProps>(\n    function RadioPanel(props, ref) {\n        return <InputPanel {...props} type=\"radio\" ref={ref} />;\n    },\n);\n"],"names":["RadioPanel","forwardRef","props","ref","InputPanel","type"],"mappings":"mLAIaA,EAAaC,EAAAA,WACtB,SAAoBC,EAAOC,GACvB,aAAQC,EAAAA,WAAA,IAAeF,EAAOG,KAAK,QAAQF,IAAAA,GAC/C"}

package/build/cjs/components/select/Select.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),n=require("../../hooks/useId/useId.cjs"),a=require("../../hooks/useListNavigation/useListNavigation.cjs"),o=require("../../hooks/usePreviousValue/usePreviousValue.cjs"),s=require("../../utilities/valuePair.cjs"),l=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),u=require("../input-group/InputGroup.cjs"),c=require("../popover/Popover.cjs"),i=require("./select-utils.cjs"),p=()=>{},d=r.forwardRef((d,v)=>{const{id:f,name:b,items:m,value:k,label:h,labelProps:j,onChange:g,onBlur:y,onFocus:w,className:_,helpLabel:x,errorLabel:P,invalid:C,searchable:E=!1,inline:S=!1,defaultPrompt:D="Velg",width:L,maxShownOptions:$=5,style:N,tooltip:q,...F}=d,V=n.useId(f||"jkl-select",{generateSuffix:!f}),A=`${V}_label`,R=`${V}_button`,T=`${V}_search-input`,I=`--${V.replace(/[^a-zA-Z0-9-]/g,"-")}-anchor`,[O,M]=r.useState(!1),K=r.useCallback(()=>{M(e=>!e)},[]),[B,z]=r.useState("bottom"),G=r.useCallback(e=>{z(e.startsWith("top")?"top":"bottom")},[]),U=!!E,W=U&&O,[Z,H]=r.useState(""),J=r.useCallback(e=>!!e.label.toLowerCase().includes(Z.toLowerCase())||"function"==typeof E&&E(Z,e),[E,Z]),Q=r.useMemo(()=>m.map(s.getValuePair).map(e=>{const t=!U||""===Z||J(e);return{...e,visible:t}}),[m,U,Z,J]),X=r.useMemo(()=>!(typeof k>"u")&&m.some(e=>"string"==typeof e?e===k:e.value===k),[k,m]),[Y,ee]=r.useState(X&&void 0!==k?k:""),te=""!==Y,re=r.useMemo(()=>Q.find(e=>e.value===Y)?.label||D,[Q,Y,D]),ne=r.useRef(null),ae=r.useCallback(e=>{ne.current=e,v&&("function"==typeof v?v(e):v.current=e),e&&ee(e.value)},[v]),oe=o.usePreviousValue(k);r.useEffect(()=>{k!==oe&&ee(typeof k>"u"||!X?"":k)},[k,oe,X]);const se=r.useCallback(e=>{const t=e.value;H(""),ee(t),K(),pe.current?.focus()},[K]),le=o.usePreviousValue(Y);r.useEffect(()=>{typeof le>"u"||le===Y||Y===k||(g&&g({type:"change",target:{name:b,value:Y}}),ne.current&&ne.current.dispatchEvent(new Event("change",{bubbles:!0})))},[g,b,k,Y,le]);const ue=r.useRef(null),ce=r.useRef(!1),ie=r.useRef(null),pe=r.useRef(null),de=r.useRef(null),[ve,fe]=r.useState(null),be=r.useRef(U),me=r.useRef(Y);r.useEffect(()=>{be.current=U,me.current=Y});const ke=r.useCallback(e=>{de.current=e,fe(e),e&&!be.current&&requestAnimationFrame(()=>{de.current===e&&i.focusSelected(e,me.current)})},[]),he=o.usePreviousValue(O);r.useEffect(()=>{O!==he&&(O&&U?ie.current?.focus():!O&&ce.current&&pe.current&&pe.current.focus())},[O,he,U]),a.useListNavigation({element:ve});const je=r.useCallback(()=>{U&&H(""),y&&(y({type:"blur",target:{name:b,value:Y}}),ne.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),ce.current=!1,M(!1)},[y,U,b,Y]),ge=r.useCallback(e=>{const t=ue.current,r=de.current;t?.contains(e.relatedTarget)||r?.contains(e.relatedTarget)||je()},[je]),ye=r.useCallback(()=>{ce.current||(w&&w({type:"change",target:{name:b,value:Y}}),ce.current=!0)},[w,Y,b]),we=r.useCallback(e=>{e.target.focus({preventScroll:!0})},[]);r.useEffect(()=>{const e=ne.current;if(!e)return;const t=()=>{W?ie.current?.focus():pe.current?.focus()},r=e=>{const t=e.relatedTarget,r=ue.current?.contains(t),n=de.current?.contains(t);(r||n)&&e.preventDefault()};return e.addEventListener("focus",t),e.addEventListener("blur",r),()=>{e.removeEventListener("focus",t),e.removeEventListener("blur",r)}},[W]);const _e=r.useCallback(e=>{"ArrowDown"!==e.key&&" "!==e.key||O?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),M(!1)):(e.preventDefault(),e.stopPropagation(),M(!0))},[O]),xe=r.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=de.current;t&&(U?i.focusSelected(t,void 0):i.focusSelected(t,Y))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),M(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&O&&(e.preventDefault(),e.stopPropagation());else{const t=de.current;t&&(e.preventDefault(),e.stopPropagation(),i.focusSelected(t,Y))}},[Y,U,O]),Pe=r.useCallback(e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&ie.current?ie.current.focus():pe.current&&(ee(e.currentTarget.value),M(!1),pe.current.focus());else if("ArrowUp"===e.key&&de.current&&ie.current){const t=de.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===t?.id&&ie.current&&ie.current.focus()}},[]);return r.useEffect(()=>{const e=e=>{"Escape"===e.key&&O&&M(!1)};return typeof window<"u"&&O&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}},[O]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:b,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ae,value:Y,onChange:p,children:[e.jsx("option",{value:""})," ",Q.map(t=>e.jsx("option",{hidden:!t.visible,value:t.value,children:t.label},`${V}-opt-${t.value}`))]}),e.jsx(u.InputGroup,{ref:ue,"data-testid":"jkl-select",className:t.clsx("jkl-select",_,{"jkl-select--inline":S,"jkl-select--open":O&&Q.some(e=>e.visible),"jkl-select--no-value":!te,"jkl-select--invalid":!!P||C}),tooltip:q&&r.isValidElement(q)?r.cloneElement(q,{triggerProps:{...q.props.triggerProps,onFocus:e=>{q.props.triggerProps?.onFocus?.(e),je()}}}):null,...F,id:U?T:R,style:N,label:h,labelProps:{id:A,srOnly:S,...j,htmlFor:U?T:R},helpLabel:x,errorLabel:P,render:({"aria-invalid":r,...n})=>{const a=O&&Q.some(e=>e.visible);return e.jsxs(c.Popover,{open:a,placement:"bottom-start",offset:0,modal:!1,onPlacementChange:G,clickOptions:{enabled:!1},dismissOptions:{enabled:!1},roleOptions:{enabled:!1},children:[e.jsx(c.Popover.Trigger,{asChild:!0,children:e.jsxs("div",{className:"jkl-select__outer-wrapper","data-popover-placement":B,style:{width:L,anchorName:I},children:[U&&e.jsx("input",{...n,"aria-invalid":r,id:T,hidden:!W,ref:ie,placeholder:"Søk",value:Z,onChange:e=>H(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":a&&te?`${V}__${i.toLower(Y)}`:void 0,"aria-controls":a?V:void 0,"aria-expanded":a,role:"combobox",onKeyDown:xe,onBlur:ge,onFocus:ye,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{"aria-invalid":r,...n,id:R,ref:pe,hidden:W,type:"button",name:`${b}-btn`,className:t.clsx("jkl-select__button",{"jkl-select__button--active-value":!!Y}),"data-testid":"jkl-select__button","aria-label":`${re||"Velg"},${h}`,"aria-expanded":a,"aria-controls":a?V:void 0,onBlur:ge,onFocus:ye,onKeyDown:_e,onClick:K,onMouseDown:e=>{e.preventDefault(),pe.current?.focus()},children:re}),e.jsx(l.ArrowVerticalAnimated,{variant:"medium",pointingDown:!a,className:"jkl-select__arrow"})]})}),e.jsx(c.Popover.Content,{initialFocus:-1,returnFocus:!1,className:"jkl-select__popover",style:{width:`anchor-size(${I} width)`},children:e.jsx("div",{id:V,ref:ke,role:"listbox",className:"jkl-select__options-menu","data-popover-placement":B,"aria-labelledby":A,tabIndex:-1,"data-focus":"controlled",style:{"--jkl-select-max-shown-options":$},children:Q.map((t,r)=>t.visible?e.jsxs("button",{hidden:!t.visible,type:"button",id:`${V}__${i.toLower(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===Y,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:ge,onFocus:ye,onKeyDown:Pe,onClick:e=>{e.preventDefault(),se(t)},onMouseOver:we,children:[t.label,t.description?e.jsx("span",{className:"jkl-select__option-description",children:t.description}):null]},`${V}-${t.value}`):null)})})]})}})]})});d.displayName="Select",exports.Select=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),a=require("../../hooks/useId/useId.cjs"),s=require("../../hooks/useListNavigation/useListNavigation.cjs"),o=require("../../hooks/usePreviousValue/usePreviousValue.cjs"),n=require("../../utilities/valuePair.cjs"),l=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),u=require("../input-group/InputGroup.cjs"),i=require("../popover/Popover.cjs"),c=require("./select-utils.cjs"),d=()=>{},p=r.forwardRef((p,v)=>{const{id:f,name:b,items:m,value:k,label:j,labelProps:h,onChange:g,onBlur:y,onFocus:_,className:w,helpLabel:x,errorLabel:P,invalid:C,searchable:E=!1,inline:S=!1,defaultPrompt:$="Velg",width:D,maxShownOptions:L=5,style:N,tooltip:q,"data-testautoid":F,...V}=p,A=a.useId(f||"jkl-select",{generateSuffix:!f}),R=`${A}_label`,T=`${A}_button`,I=`${A}_search-input`,O=`--${A.replace(/[^a-zA-Z0-9-]/g,"-")}-anchor`,[M,K]=r.useState(!1),B=r.useCallback(()=>{K(e=>!e)},[]),[z,G]=r.useState("bottom"),U=r.useCallback(e=>{G(e.startsWith("top")?"top":"bottom")},[]),W=!!E,Z=W&&M,[H,J]=r.useState(""),Q=r.useCallback(e=>!!e.label.toLowerCase().includes(H.toLowerCase())||"function"==typeof E&&E(H,e),[E,H]),X=r.useMemo(()=>m.map(n.getValuePair).map(e=>{const t=!W||""===H||Q(e);return{...e,visible:t}}),[m,W,H,Q]),Y=r.useMemo(()=>!(typeof k>"u")&&m.some(e=>"string"==typeof e?e===k:e.value===k),[k,m]),[ee,te]=r.useState(Y&&void 0!==k?k:""),re=""!==ee,ae=r.useMemo(()=>X.find(e=>e.value===ee)?.label||$,[X,ee,$]),se=r.useRef(null),oe=r.useCallback(e=>{se.current=e,v&&("function"==typeof v?v(e):v.current=e),e&&te(e.value)},[v]),ne=o.usePreviousValue(k);r.useEffect(()=>{k!==ne&&te(typeof k>"u"||!Y?"":k)},[k,ne,Y]);const le=r.useCallback(e=>{const t=e.value;J(""),te(t),B(),pe.current?.focus()},[B]),ue=o.usePreviousValue(ee);r.useEffect(()=>{typeof ue>"u"||ue===ee||ee===k||(g&&g({type:"change",target:{name:b,value:ee}}),se.current&&se.current.dispatchEvent(new Event("change",{bubbles:!0})))},[g,b,k,ee,ue]);const ie=r.useRef(null),ce=r.useRef(!1),de=r.useRef(null),pe=r.useRef(null),ve=r.useRef(null),[fe,be]=r.useState(null),me=r.useRef(W),ke=r.useRef(ee);r.useEffect(()=>{me.current=W,ke.current=ee});const je=r.useCallback(e=>{ve.current=e,be(e),e&&!me.current&&requestAnimationFrame(()=>{ve.current===e&&c.focusSelected(e,ke.current)})},[]),he=o.usePreviousValue(M);r.useEffect(()=>{M!==he&&(M&&W?de.current?.focus():!M&&ce.current&&pe.current&&pe.current.focus())},[M,he,W]),s.useListNavigation({element:fe});const ge=r.useCallback(()=>{W&&J(""),y&&(y({type:"blur",target:{name:b,value:ee}}),se.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),ce.current=!1,K(!1)},[y,W,b,ee]),ye=r.useCallback(e=>{const t=ie.current,r=ve.current;t?.contains(e.relatedTarget)||r?.contains(e.relatedTarget)||ge()},[ge]),_e=r.useCallback(()=>{ce.current||(_&&_({type:"change",target:{name:b,value:ee}}),ce.current=!0)},[_,ee,b]),we=r.useCallback(e=>{e.target.focus({preventScroll:!0})},[]);r.useEffect(()=>{const e=se.current;if(!e)return;const t=()=>{Z?de.current?.focus():pe.current?.focus()},r=e=>{const t=e.relatedTarget,r=ie.current?.contains(t),a=ve.current?.contains(t);(r||a)&&e.preventDefault()};return e.addEventListener("focus",t),e.addEventListener("blur",r),()=>{e.removeEventListener("focus",t),e.removeEventListener("blur",r)}},[Z]);const xe=r.useCallback(e=>{"ArrowDown"!==e.key&&" "!==e.key||M?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),K(!1)):(e.preventDefault(),e.stopPropagation(),K(!0))},[M]),Pe=r.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=ve.current;t&&(W?c.focusSelected(t,void 0):c.focusSelected(t,ee))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),K(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&M&&(e.preventDefault(),e.stopPropagation());else{const t=ve.current;t&&(e.preventDefault(),e.stopPropagation(),c.focusSelected(t,ee))}},[ee,W,M]),Ce=r.useCallback(e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&de.current?de.current.focus():pe.current&&(te(e.currentTarget.value),K(!1),pe.current.focus());else if("ArrowUp"===e.key&&ve.current&&de.current){const t=ve.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===t?.id&&de.current&&de.current.focus()}},[]);return r.useEffect(()=>{const e=e=>{"Escape"===e.key&&M&&K(!1)};return typeof window<"u"&&M&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}},[M]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:b,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:oe,value:ee,onChange:d,children:[e.jsx("option",{value:""})," ",X.map(t=>e.jsx("option",{hidden:!t.visible,value:t.value,children:t.label},`${A}-opt-${t.value}`))]}),e.jsx(u.InputGroup,{ref:ie,"data-testid":"jkl-select",className:t.clsx("jkl-select",w,{"jkl-select--inline":S,"jkl-select--open":M&&X.some(e=>e.visible),"jkl-select--no-value":!re,"jkl-select--invalid":!!P||C}),"data-testautoid":F,tooltip:q&&r.isValidElement(q)?r.cloneElement(q,{triggerProps:{...q.props.triggerProps,onFocus:e=>{q.props.triggerProps?.onFocus?.(e),ge()}}}):null,...V,id:W?I:T,style:N,label:j,labelProps:{id:R,srOnly:S,...h,htmlFor:W?I:T},helpLabel:x,errorLabel:P,render:({"aria-invalid":r,...a})=>{const s=M&&X.some(e=>e.visible);return e.jsxs(i.Popover,{open:s,placement:"bottom-start",offset:0,modal:!1,onPlacementChange:U,clickOptions:{enabled:!1},dismissOptions:{enabled:!1},roleOptions:{enabled:!1},children:[e.jsx(i.Popover.Trigger,{asChild:!0,children:e.jsxs("div",{className:"jkl-select__outer-wrapper","data-popover-placement":z,style:{width:D,anchorName:O},children:[W&&e.jsx("input",{...a,"aria-invalid":r,id:I,hidden:!Z,ref:de,placeholder:"Søk",value:H,onChange:e=>J(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":s&&re?`${A}__${c.toLower(ee)}`:void 0,"aria-controls":s?A:void 0,"aria-expanded":s,role:"combobox",onKeyDown:Pe,onBlur:ye,onFocus:_e,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{"aria-invalid":r,...a,id:T,ref:pe,hidden:Z,type:"button",name:`${b}-btn`,className:t.clsx("jkl-select__button",{"jkl-select__button--active-value":!!ee}),"data-testid":"jkl-select__button","aria-label":`${ae||"Velg"},${j}`,"aria-expanded":s,"aria-controls":s?A:void 0,onBlur:ye,onFocus:_e,onKeyDown:xe,onClick:B,onMouseDown:e=>{e.preventDefault(),pe.current?.focus()},children:ae}),e.jsx(l.ArrowVerticalAnimated,{variant:"medium",pointingDown:!s,className:"jkl-select__arrow"})]})}),e.jsx(i.Popover.Content,{initialFocus:-1,returnFocus:!1,className:"jkl-select__popover",style:{width:`anchor-size(${O} width)`},children:e.jsx("div",{id:A,ref:je,role:"listbox",className:"jkl-select__options-menu","data-popover-placement":z,"aria-labelledby":R,tabIndex:-1,"data-testid":"jkl-select__listbox","data-testautoid":F?`${F}__listbox`:"jkl-select__listbox","data-focus":"controlled",style:{"--jkl-select-max-shown-options":L},children:X.map((t,r)=>t.visible?e.jsxs("button",{hidden:!t.visible,type:"button",id:`${A}__${c.toLower(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===ee,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:ye,onFocus:_e,onKeyDown:Ce,onClick:e=>{e.preventDefault(),le(t)},onMouseOver:we,children:[t.label,t.description?e.jsx("span",{className:"jkl-select__option-description",children:t.description}):null]},`${A}-${t.value}`):null)})})]})}})]})});p.displayName="Select",exports.Select=p;
 //# sourceMappingURL=Select.cjs.map

package/build/cjs/components/select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    type FocusEvent,\n    forwardRef,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n    return;\n};\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n        // Unik anchor-name som CSS anchor positioning bruker for å la\n        // dropdown-listen matche bredden til triggeren.\n        const anchorName = `--${listId.replace(/[^a-zA-Z0-9-]/g, \"-\")}-anchor`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n        // slik at vi kan bytte hvilken side av lista og knappen som er\n        // flat når lista snus over triggeren.\n        const [popoverPlacement, setPopoverPlacement] = useState<\n            \"top\" | \"bottom\"\n        >(\"bottom\");\n        const handlePlacementChange = useCallback((p: string) => {\n            setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n                buttonRef.current?.focus();\n            },\n            [toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const dropdownRef = useRef<HTMLDivElement | null>(null);\n        // Lagrer listbox-elementet i state slik at downstream-hooks\n        // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n        // `FloatingPortal` mounter listen.\n        const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n        // Listen rendres i en `FloatingPortal` som monteres via en\n        // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n        // ikke tilgjengelig før i en senere render. Vi bruker en\n        // callback-ref for å plassere fokus på valgt option idet listen\n        // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n        // slik at en endring i `selectedValue`/`isSearchable` ikke får\n        // React til å avmontere/remontere refen og dermed flytte fokus\n        // mens menyen er åpen — vi leser siste verdier via refs.\n        const isSearchableRef = useRef(isSearchable);\n        const selectedValueRef = useRef(selectedValue);\n        useEffect(() => {\n            isSearchableRef.current = isSearchable;\n            selectedValueRef.current = selectedValue;\n        });\n\n        const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n            dropdownRef.current = node;\n            setListboxEl(node);\n            if (node && !isSearchableRef.current) {\n                // Popover skjules med `visibility: hidden` til\n                // floating-ui har regnet ut første posisjon. Defer\n                // fokus til etter neste paint, slik at vi ikke flytter\n                // fokus til et usynlig element (kan gi manglende\n                // fokusindikator i enkelte nettlesere).\n                requestAnimationFrame(() => {\n                    if (dropdownRef.current === node) {\n                        focusSelected(node, selectedValueRef.current);\n                    }\n                });\n            }\n        }, []);\n\n        // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n        // DOM-en, så for de tilfellene holder en useEffect.\n        const wasShown = usePreviousValue(dropdownIsShown);\n        useEffect(() => {\n            if (dropdownIsShown === wasShown) return;\n            if (dropdownIsShown && isSearchable) {\n                searchFieldRef.current?.focus();\n            } else if (\n                !dropdownIsShown &&\n                focusInsideRef.current &&\n                buttonRef.current\n            ) {\n                buttonRef.current.focus();\n            }\n        }, [dropdownIsShown, wasShown, isSearchable]);\n\n        useListNavigation({ element: listboxEl });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [onBlur, isSearchable, name, selectedValue]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                const dropdownElement = dropdownRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                // Dropdown rendres i en portal, så vi må sjekke begge trærne\n                // for å avgjøre om fokus blir værende inne i komponenten.\n                const nextFocusIsInsideComponent =\n                    componentRootElement?.contains(e.relatedTarget as Node) ||\n                    dropdownElement?.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            if (!select) return;\n\n            const onSelectFocus = () => {\n                if (showSearchInputField) {\n                    searchFieldRef.current?.focus();\n                } else {\n                    buttonRef.current?.focus();\n                }\n            };\n            const onSelectBlur = (ev: globalThis.FocusEvent) => {\n                // Les refs ved hvert kall slik at vi alltid sjekker mot\n                // siste listbox-element — den portalerte listen kan ha\n                // mountet etter at denne effekten ble satt opp.\n                const target = ev.relatedTarget as Node | null;\n                const insideComponent =\n                    componentRootElementRef.current?.contains(target);\n                const insideDropdown = dropdownRef.current?.contains(target);\n                if (insideComponent || insideDropdown) {\n                    ev.preventDefault();\n                }\n            };\n\n            select.addEventListener(\"focus\", onSelectFocus);\n            select.addEventListener(\"blur\", onSelectBlur);\n            return () => {\n                select.removeEventListener(\"focus\", onSelectFocus);\n                select.removeEventListener(\"blur\", onSelectBlur);\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [selectedValue, isSearchable, dropdownIsShown],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\" />{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={style}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => {\n                        // Lista vises kun når dropdown er åpnet *og* det\n                        // finnes minst ett synlig valg. `aria-expanded` på\n                        // trigger og combobox må følge samme boolean for\n                        // ikke å lyve om popoverens tilstand.\n                        const isPopoverOpen =\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible);\n                        return (\n                            <Popover\n                                open={isPopoverOpen}\n                                placement=\"bottom-start\"\n                                offset={0}\n                                modal={false}\n                                onPlacementChange={handlePlacementChange}\n                                clickOptions={{ enabled: false }}\n                                dismissOptions={{ enabled: false }}\n                                roleOptions={{ enabled: false }}\n                            >\n                                <Popover.Trigger asChild>\n                                    <div\n                                        className=\"jkl-select__outer-wrapper\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        style={\n                                            {\n                                                width,\n                                                anchorName,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {isSearchable && (\n                                            <input\n                                                {...inputProps}\n                                                aria-invalid={ariaInvalid}\n                                                id={searchInputId}\n                                                hidden={!showSearchInputField}\n                                                ref={searchFieldRef}\n                                                placeholder=\"Søk\"\n                                                value={searchValue}\n                                                onChange={(e) =>\n                                                    setSearchValue(\n                                                        e.target.value,\n                                                    )\n                                                }\n                                                data-testid=\"jkl-select__search-input\"\n                                                className=\"jkl-select__search-input\"\n                                                aria-autocomplete=\"list\"\n                                                aria-activedescendant={\n                                                    isPopoverOpen &&\n                                                    hasSelectedValue\n                                                        ? `${listId}__${toLower(\n                                                              selectedValue,\n                                                          )}`\n                                                        : undefined\n                                                }\n                                                aria-controls={\n                                                    isPopoverOpen\n                                                        ? listId\n                                                        : undefined\n                                                }\n                                                aria-expanded={isPopoverOpen}\n                                                role=\"combobox\"\n                                                onKeyDown={\n                                                    handleSearchOnKeyDown\n                                                }\n                                                onBlur={handleBlur}\n                                                onFocus={handleFocus}\n                                                onClick={(e) => {\n                                                    e.stopPropagation();\n                                                }}\n                                            />\n                                        )}\n                                        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                                        <button\n                                            // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                            aria-invalid={ariaInvalid}\n                                            {...inputProps}\n                                            id={buttonId}\n                                            ref={buttonRef}\n                                            hidden={showSearchInputField}\n                                            type=\"button\"\n                                            name={`${name}-btn`}\n                                            className={clsx(\n                                                \"jkl-select__button\",\n                                                {\n                                                    \"jkl-select__button--active-value\":\n                                                        !!selectedValue,\n                                                },\n                                            )}\n                                            data-testid=\"jkl-select__button\"\n                                            aria-label={`${\n                                                selectedValueLabel || \"Velg\"\n                                            },${label}`}\n                                            aria-expanded={isPopoverOpen}\n                                            aria-controls={\n                                                isPopoverOpen\n                                                    ? listId\n                                                    : undefined\n                                            }\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOnKeyDown}\n                                            onClick={toggleListVisibility}\n                                            onMouseDown={(e) => {\n                                                // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                                // https://twitter.com/MilesSorce/status/1278762360669265925\n                                                e.preventDefault();\n                                                buttonRef.current?.focus();\n                                            }}\n                                        >\n                                            {selectedValueLabel}\n                                        </button>\n                                        <ArrowVerticalAnimated\n                                            variant=\"medium\"\n                                            pointingDown={!isPopoverOpen}\n                                            className=\"jkl-select__arrow\"\n                                        />\n                                    </div>\n                                </Popover.Trigger>\n                                <Popover.Content\n                                    initialFocus={-1}\n                                    returnFocus={false}\n                                    className=\"jkl-select__popover\"\n                                    style={{\n                                        width: `anchor-size(${anchorName} width)`,\n                                    }}\n                                >\n                                    <div\n                                        id={listId}\n                                        ref={setDropdownRef}\n                                        // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                        role=\"listbox\"\n                                        className=\"jkl-select__options-menu\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        aria-labelledby={labelId}\n                                        tabIndex={-1}\n                                        data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                                        style={\n                                            {\n                                                \"--jkl-select-max-shown-options\":\n                                                    maxShownOptions,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {visibleItems.map((item, i) =>\n                                            // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                            // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                            // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                            // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                            // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                            item.visible ? (\n                                                <button\n                                                    key={`${listId}-${item.value}`}\n                                                    hidden={!item.visible}\n                                                    type=\"button\"\n                                                    id={`${listId}__${toLower(\n                                                        item.value,\n                                                    )}`}\n                                                    className=\"jkl-select__option\"\n                                                    data-testid=\"jkl-select__option\"\n                                                    aria-selected={\n                                                        item.value ===\n                                                        selectedValue\n                                                    }\n                                                    // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                                    role=\"option\"\n                                                    value={item.value}\n                                                    data-testautoid={`jkl-select__option-${i}`}\n                                                    onBlur={handleBlur}\n                                                    onFocus={handleFocus}\n                                                    onKeyDown={\n                                                        handleOptionOnKeyDown\n                                                    }\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        selectOption(item);\n                                                    }}\n                                                    onMouseOver={\n                                                        handleMouseOver\n                                                    }\n                                                >\n                                                    {item.label}\n                                                    {item.description ? (\n                                                        <span className=\"jkl-select__option-description\">\n                                                            {item.description}\n                                                        </span>\n                                                    ) : null}\n                                                </button>\n                                            ) : null,\n                                        )}\n                                    </div>\n                                </Popover.Content>\n                            </Popover>\n                        );\n                    }}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","anchorName","replace","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    type FocusEvent,\n    forwardRef,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n    return;\n};\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            \"data-testautoid\": dataTestAutoId,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n        // Unik anchor-name som CSS anchor positioning bruker for å la\n        // dropdown-listen matche bredden til triggeren.\n        const anchorName = `--${listId.replace(/[^a-zA-Z0-9-]/g, \"-\")}-anchor`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n        // slik at vi kan bytte hvilken side av lista og knappen som er\n        // flat når lista snus over triggeren.\n        const [popoverPlacement, setPopoverPlacement] = useState<\n            \"top\" | \"bottom\"\n        >(\"bottom\");\n        const handlePlacementChange = useCallback((p: string) => {\n            setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n                buttonRef.current?.focus();\n            },\n            [toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const dropdownRef = useRef<HTMLDivElement | null>(null);\n        // Lagrer listbox-elementet i state slik at downstream-hooks\n        // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n        // `FloatingPortal` mounter listen.\n        const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n        // Listen rendres i en `FloatingPortal` som monteres via en\n        // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n        // ikke tilgjengelig før i en senere render. Vi bruker en\n        // callback-ref for å plassere fokus på valgt option idet listen\n        // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n        // slik at en endring i `selectedValue`/`isSearchable` ikke får\n        // React til å avmontere/remontere refen og dermed flytte fokus\n        // mens menyen er åpen — vi leser siste verdier via refs.\n        const isSearchableRef = useRef(isSearchable);\n        const selectedValueRef = useRef(selectedValue);\n        useEffect(() => {\n            isSearchableRef.current = isSearchable;\n            selectedValueRef.current = selectedValue;\n        });\n\n        const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n            dropdownRef.current = node;\n            setListboxEl(node);\n            if (node && !isSearchableRef.current) {\n                // Popover skjules med `visibility: hidden` til\n                // floating-ui har regnet ut første posisjon. Defer\n                // fokus til etter neste paint, slik at vi ikke flytter\n                // fokus til et usynlig element (kan gi manglende\n                // fokusindikator i enkelte nettlesere).\n                requestAnimationFrame(() => {\n                    if (dropdownRef.current === node) {\n                        focusSelected(node, selectedValueRef.current);\n                    }\n                });\n            }\n        }, []);\n\n        // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n        // DOM-en, så for de tilfellene holder en useEffect.\n        const wasShown = usePreviousValue(dropdownIsShown);\n        useEffect(() => {\n            if (dropdownIsShown === wasShown) return;\n            if (dropdownIsShown && isSearchable) {\n                searchFieldRef.current?.focus();\n            } else if (\n                !dropdownIsShown &&\n                focusInsideRef.current &&\n                buttonRef.current\n            ) {\n                buttonRef.current.focus();\n            }\n        }, [dropdownIsShown, wasShown, isSearchable]);\n\n        useListNavigation({ element: listboxEl });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [onBlur, isSearchable, name, selectedValue]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                const dropdownElement = dropdownRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                // Dropdown rendres i en portal, så vi må sjekke begge trærne\n                // for å avgjøre om fokus blir værende inne i komponenten.\n                const nextFocusIsInsideComponent =\n                    componentRootElement?.contains(e.relatedTarget as Node) ||\n                    dropdownElement?.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            if (!select) return;\n\n            const onSelectFocus = () => {\n                if (showSearchInputField) {\n                    searchFieldRef.current?.focus();\n                } else {\n                    buttonRef.current?.focus();\n                }\n            };\n            const onSelectBlur = (ev: globalThis.FocusEvent) => {\n                // Les refs ved hvert kall slik at vi alltid sjekker mot\n                // siste listbox-element — den portalerte listen kan ha\n                // mountet etter at denne effekten ble satt opp.\n                const target = ev.relatedTarget as Node | null;\n                const insideComponent =\n                    componentRootElementRef.current?.contains(target);\n                const insideDropdown = dropdownRef.current?.contains(target);\n                if (insideComponent || insideDropdown) {\n                    ev.preventDefault();\n                }\n            };\n\n            select.addEventListener(\"focus\", onSelectFocus);\n            select.addEventListener(\"blur\", onSelectBlur);\n            return () => {\n                select.removeEventListener(\"focus\", onSelectFocus);\n                select.removeEventListener(\"blur\", onSelectBlur);\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [selectedValue, isSearchable, dropdownIsShown],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\" />{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    data-testautoid={dataTestAutoId}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={style}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => {\n                        // Lista vises kun når dropdown er åpnet *og* det\n                        // finnes minst ett synlig valg. `aria-expanded` på\n                        // trigger og combobox må følge samme boolean for\n                        // ikke å lyve om popoverens tilstand.\n                        const isPopoverOpen =\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible);\n                        return (\n                            <Popover\n                                open={isPopoverOpen}\n                                placement=\"bottom-start\"\n                                offset={0}\n                                modal={false}\n                                onPlacementChange={handlePlacementChange}\n                                clickOptions={{ enabled: false }}\n                                dismissOptions={{ enabled: false }}\n                                roleOptions={{ enabled: false }}\n                            >\n                                <Popover.Trigger asChild>\n                                    <div\n                                        className=\"jkl-select__outer-wrapper\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        style={\n                                            {\n                                                width,\n                                                anchorName,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {isSearchable && (\n                                            <input\n                                                {...inputProps}\n                                                aria-invalid={ariaInvalid}\n                                                id={searchInputId}\n                                                hidden={!showSearchInputField}\n                                                ref={searchFieldRef}\n                                                placeholder=\"Søk\"\n                                                value={searchValue}\n                                                onChange={(e) =>\n                                                    setSearchValue(\n                                                        e.target.value,\n                                                    )\n                                                }\n                                                data-testid=\"jkl-select__search-input\"\n                                                className=\"jkl-select__search-input\"\n                                                aria-autocomplete=\"list\"\n                                                aria-activedescendant={\n                                                    isPopoverOpen &&\n                                                    hasSelectedValue\n                                                        ? `${listId}__${toLower(\n                                                              selectedValue,\n                                                          )}`\n                                                        : undefined\n                                                }\n                                                aria-controls={\n                                                    isPopoverOpen\n                                                        ? listId\n                                                        : undefined\n                                                }\n                                                aria-expanded={isPopoverOpen}\n                                                role=\"combobox\"\n                                                onKeyDown={\n                                                    handleSearchOnKeyDown\n                                                }\n                                                onBlur={handleBlur}\n                                                onFocus={handleFocus}\n                                                onClick={(e) => {\n                                                    e.stopPropagation();\n                                                }}\n                                            />\n                                        )}\n                                        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                                        <button\n                                            // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                            aria-invalid={ariaInvalid}\n                                            {...inputProps}\n                                            id={buttonId}\n                                            ref={buttonRef}\n                                            hidden={showSearchInputField}\n                                            type=\"button\"\n                                            name={`${name}-btn`}\n                                            className={clsx(\n                                                \"jkl-select__button\",\n                                                {\n                                                    \"jkl-select__button--active-value\":\n                                                        !!selectedValue,\n                                                },\n                                            )}\n                                            data-testid=\"jkl-select__button\"\n                                            aria-label={`${\n                                                selectedValueLabel || \"Velg\"\n                                            },${label}`}\n                                            aria-expanded={isPopoverOpen}\n                                            aria-controls={\n                                                isPopoverOpen\n                                                    ? listId\n                                                    : undefined\n                                            }\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOnKeyDown}\n                                            onClick={toggleListVisibility}\n                                            onMouseDown={(e) => {\n                                                // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                                // https://twitter.com/MilesSorce/status/1278762360669265925\n                                                e.preventDefault();\n                                                buttonRef.current?.focus();\n                                            }}\n                                        >\n                                            {selectedValueLabel}\n                                        </button>\n                                        <ArrowVerticalAnimated\n                                            variant=\"medium\"\n                                            pointingDown={!isPopoverOpen}\n                                            className=\"jkl-select__arrow\"\n                                        />\n                                    </div>\n                                </Popover.Trigger>\n                                <Popover.Content\n                                    initialFocus={-1}\n                                    returnFocus={false}\n                                    className=\"jkl-select__popover\"\n                                    style={{\n                                        width: `anchor-size(${anchorName} width)`,\n                                    }}\n                                >\n                                    <div\n                                        id={listId}\n                                        ref={setDropdownRef}\n                                        // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                        role=\"listbox\"\n                                        className=\"jkl-select__options-menu\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        aria-labelledby={labelId}\n                                        tabIndex={-1}\n                                        data-testid=\"jkl-select__listbox\"\n                                        data-testautoid={\n                                            dataTestAutoId\n                                                ? `${dataTestAutoId}__listbox`\n                                                : \"jkl-select__listbox\"\n                                        }\n                                        data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                                        style={\n                                            {\n                                                \"--jkl-select-max-shown-options\":\n                                                    maxShownOptions,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {visibleItems.map((item, i) =>\n                                            // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                            // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                            // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                            // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                            // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                            item.visible ? (\n                                                <button\n                                                    key={`${listId}-${item.value}`}\n                                                    hidden={!item.visible}\n                                                    type=\"button\"\n                                                    id={`${listId}__${toLower(\n                                                        item.value,\n                                                    )}`}\n                                                    className=\"jkl-select__option\"\n                                                    data-testid=\"jkl-select__option\"\n                                                    aria-selected={\n                                                        item.value ===\n                                                        selectedValue\n                                                    }\n                                                    // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                                    role=\"option\"\n                                                    value={item.value}\n                                                    data-testautoid={`jkl-select__option-${i}`}\n                                                    onBlur={handleBlur}\n                                                    onFocus={handleFocus}\n                                                    onKeyDown={\n                                                        handleOptionOnKeyDown\n                                                    }\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        selectOption(item);\n                                                    }}\n                                                    onMouseOver={\n                                                        handleMouseOver\n                                                    }\n                                                >\n                                                    {item.label}\n                                                    {item.description ? (\n                                                        <span className=\"jkl-select__option-description\">\n                                                            {item.description}\n                                                        </span>\n                                                    ) : null}\n                                                </button>\n                                            ) : null,\n                                        )}\n                                    </div>\n                                </Popover.Content>\n                            </Popover>\n                        );\n                    }}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","width","maxShownOptions","style","tooltip","dataTestAutoId","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","anchorName","replace","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"ijBAwBMA,EAAO,OAQAC,EAASC,EAAAA,WAClB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,WAAAA,GAAa,EACbC,OAAAA,GAAS,EACTC,cAAAA,EAAgB,OAChBC,MAAAA,EACAC,gBAAAA,EAAkB,EAClBC,MAAAA,EACAC,QAAAA,EACA,kBAAmBC,KAChBC,GACHvB,EAEEwB,EAASC,EAAAA,MAAMvB,GAAM,aAAc,CAAEwB,gBAAiBxB,IACtDyB,EAAU,GAAGH,UACbI,EAAW,GAAGJ,WACdK,EAAgB,GAAGL,iBAGnBM,EAAa,KAAKN,EAAOO,QAAQ,iBAAkB,eAElDC,EAAiBC,GAAYC,EAAAA,UAAS,GACvCC,EAAuBC,EAAAA,YAAY,KACrCH,EAAUI,IAAmBA,IAC9B,KAKIC,EAAkBC,GAAuBL,EAAAA,SAE9C,UACIM,EAAwBJ,cAAaK,IACvCF,EAAoBE,EAAEC,WAAW,OAAS,MAAQ,WACnD,IAIGC,IAAuB5B,EACvB6B,EAAuBD,GAAgBX,GACtCa,EAAaC,GAAkBZ,EAAAA,SAAS,IACzCa,EAAWX,EAAAA,YACZY,KAEOA,EAAK1C,MAAM2C,cAAcC,SAASL,EAAYI,gBAKxB,mBAAflC,GACAA,EAAW8B,EAAaG,GAKvC,CAACjC,EAAY8B,IAEXM,EAAyBC,EAAAA,QAC3B,IACIhD,EAAMiD,IAAIC,EAAAA,cAAcD,IAAKL,IACzB,MAAMO,GACDZ,GAAgC,KAAhBE,GAAsBE,EAASC,GACpD,MAAO,IAAKA,EAAMO,QAAAA,KAE1B,CAACnD,EAAOuC,EAAcE,EAAaE,IAEjCS,EAA0BJ,EAAAA,QAAQ,aACzB/C,EAAU,MAGdD,EAAMqD,KAAMT,GACC,iBAATA,EACDA,IAAS3C,EACT2C,EAAK3C,QAAUA,GAE1B,CAACA,EAAOD,KAIJsD,GAAeC,IAAoBzB,EAAAA,SACtCsB,QAA4B,IAAVnD,EAAsBA,EAAQ,IAE9CuD,GAAqC,KAAlBF,GACnBG,GAAqBT,EAAAA,QACvB,IACID,EAAaW,KAAMd,GAASA,EAAK3C,QAAUqD,KACrCpD,OAASW,EACnB,CAACkC,EAAcO,GAAezC,IAG5B8C,GAAYC,EAAAA,OAAiC,MAE7CC,GAAmB7B,EAAAA,YACpB8B,IACGH,GAAUI,QAAUD,EAChBjE,IACkC,mBAAvBA,EACPA,EAAmBiE,GAEnBjE,EAAmBkE,QAAUD,GAGjCA,GACAP,GAAiBO,EAAS7D,QAGlC,CAACJ,IAGCoC,GAAgB+B,EAAAA,iBAAiB/D,GACvCgE,EAAAA,UAAU,KACFhE,IAAUgC,IAIVsB,UADOtD,EAAU,MAAgBmD,EAChB,GAEAnD,IAEtB,CAACA,EAAOgC,GAAemB,IAE1B,MAAMc,GAAelC,EAAAA,YAChBY,IACG,MAAMuB,EAAYvB,EAAK3C,MACvByC,EAAe,IACfa,GAAiBY,GACjBpC,IACAqC,GAAUL,SAASM,SAEvB,CAACtC,IAKCuC,GAAwBN,EAAAA,iBAAiBV,IAC/CW,EAAAA,UAAU,YAGKK,GAA0B,KACjCA,KAA0BhB,IAC1BA,KAAkBrD,IAIlBG,GACAA,EAAS,CACLmE,KAAM,SACNC,OAAQ,CAAEzE,KAAAA,EAAME,MAAOqD,MAG3BK,GAAUI,SACVJ,GAAUI,QAAQU,cACd,IAAIC,MAAM,SAAU,CAAEC,SAAS,OAGxC,CAACvE,EAAUL,EAAME,EAAOqD,GAAegB,KAI1C,MAAMM,GAA0BhB,EAAAA,OAAuB,MACjDiB,GAAiBjB,EAAAA,QAAO,GACxBkB,GAAiBlB,EAAAA,OAAyB,MAC1CQ,GAAYR,EAAAA,OAA0B,MAEtCmB,GAAcnB,EAAAA,OAA8B,OAI3CoB,GAAWC,IAAgBnD,EAAAA,SAAgC,MAU5DoD,GAAkBtB,EAAAA,OAAOrB,GACzB4C,GAAmBvB,EAAAA,OAAON,IAChCW,EAAAA,UAAU,KACNiB,GAAgBnB,QAAUxB,EAC1B4C,GAAiBpB,QAAUT,KAG/B,MAAM8B,GAAiBpD,cAAaqD,IAChCN,GAAYhB,QAAUsB,EACtBJ,GAAaI,GACTA,IAASH,GAAgBnB,SAMzBuB,sBAAsB,KACdP,GAAYhB,UAAYsB,GACxBE,gBAAcF,EAAMF,GAAiBpB,YAIlD,IAIGyB,GAAWxB,EAAAA,iBAAiBpC,GAClCqC,EAAAA,UAAU,KACFrC,IAAoB4D,KACpB5D,GAAmBW,EACnBuC,GAAef,SAASM,SAEvBzC,GACDiD,GAAed,SACfK,GAAUL,SAEVK,GAAUL,QAAQM,UAEvB,CAACzC,EAAiB4D,GAAUjD,IAE/BkD,oBAAkB,CAAEC,QAASV,KAE7B,MAAMW,GAAQ3D,EAAAA,YAAY,KAClBO,GACAG,EAAe,IAEfrC,IACAA,EAAO,CACHkE,KAAM,OACNC,OAAQ,CAAEzE,KAAAA,EAAME,MAAOqD,MAE3BK,GAAUI,SAASU,cACf,IAAIC,MAAM,WAAY,CAAEC,SAAS,MAGzCE,GAAed,SAAU,EACzBlC,GAAS,IACV,CAACxB,EAAQkC,EAAcxC,EAAMuD,KAE1BsC,GAAa5D,EAAAA,YACd6D,IACG,MAAMC,EAAuBlB,GAAwBb,QAC/CgC,EAAkBhB,GAAYhB,QAOhC+B,GAAsBE,SAASH,EAAEI,gBACjCF,GAAiBC,SAASH,EAAEI,gBAE5BN,MAGR,CAACA,KAGCO,GAAclE,EAAAA,YAAY,KACvB6C,GAAed,UACZzD,GACAA,EAAQ,CACJiE,KAAM,SACNC,OAAQ,CAAEzE,KAAAA,EAAME,MAAOqD,MAG/BuB,GAAed,SAAU,IAE9B,CAACzD,EAASgD,GAAevD,IAEtBoG,GAAkBnE,EAAAA,YACnB6D,IAGIA,EAAErB,OAA6BH,MAAM,CAAE+B,eAAe,KAE3D,IAIJnC,EAAAA,UAAU,KACN,MAAMoC,EAAS1C,GAAUI,QACzB,IAAKsC,EAAQ,OAEb,MAAMC,EAAgB,KACd9D,EACAsC,GAAef,SAASM,QAExBD,GAAUL,SAASM,SAGrBkC,EAAgBC,IAIlB,MAAMhC,EAASgC,EAAGP,cACZQ,EACF7B,GAAwBb,SAASiC,SAASxB,GACxCkC,EAAiB3B,GAAYhB,SAASiC,SAASxB,IACjDiC,GAAmBC,IACnBF,EAAGG,kBAIX,OAAAN,EAAOO,iBAAiB,QAASN,GACjCD,EAAOO,iBAAiB,OAAQL,GACzB,KACHF,EAAOQ,oBAAoB,QAASP,GACpCD,EAAOQ,oBAAoB,OAAQN,KAExC,CAAC/D,IAMJ,MAAMsE,GAAkB9E,EAAAA,YACnB6D,IAEkB,cAAVA,EAAEkB,KAAiC,MAAVlB,EAAEkB,KAC3BnF,EAKgB,WAAViE,EAAEkB,MACTlB,EAAEc,iBACFd,EAAEmB,kBACFnF,GAAS,KANTgE,EAAEc,iBACFd,EAAEmB,kBACFnF,GAAS,KAOjB,CAACD,IAICqF,GAAwBjF,EAAAA,YACzB6D,IACG,GAAc,cAAVA,EAAEkB,IAAqB,CACvBlB,EAAEc,iBACFd,EAAEmB,kBAEF,MAAME,EAAcnC,GAAYhB,QAC5BmD,IACI3E,EAIAgD,EAAAA,cAAc2B,OAAa,GAE3B3B,EAAAA,cAAc2B,EAAa5D,IAGvC,MAAA,GAAqB,WAAVuC,EAAEkB,IACTlB,EAAEc,iBACFd,EAAEmB,kBACFnF,GAAS,QAAK,GACG,QAAVgE,EAAEkB,KAAkBlB,EAAEsB,SAOZ,UAAVtB,EAAEkB,KAAmBnF,IAE5BiE,EAAEc,iBACFd,EAAEmB,uBAVqC,CACvC,MAAME,EAAcnC,GAAYhB,QAC5BmD,IACArB,EAAEc,iBACFd,EAAEmB,kBACFzB,EAAAA,cAAc2B,EAAa5D,IAEnC,GAMJ,CAACA,GAAef,EAAcX,IAI5BwF,GAAwBpF,EAAAA,YACzB6D,IACG,GAAc,QAAVA,EAAEkB,IACFlB,EAAEc,iBACFd,EAAEmB,kBAEEnB,EAAEsB,UAAYrC,GAAef,QAC7Be,GAAef,QAAQM,QAChBD,GAAUL,UAEjBR,GAAiBsC,EAAEwB,cAAcpH,OACjC4B,GAAS,GACTuC,GAAUL,QAAQM,cAAA,GAEL,YAAVwB,EAAEkB,KACLhC,GAAYhB,SAAWe,GAAef,QAAS,CAE/C,MAAMuD,EAAevC,GAAYhB,QAAQwD,cACrC,iCAGA1B,EAAEwB,cAAcvH,KAAOwH,GAAcxH,IACrCgF,GAAef,SAEfe,GAAef,QAAQM,OAE/B,GAGR,IAIJJ,OAAAA,EAAAA,UAAU,KACN,MAAMuD,EAAgB3B,IACJ,WAAVA,EAAEkB,KAAoBnF,GACtBC,GAAS,IAGjB,cAAW4F,OAAW,KAAe7F,GACjC6F,OAAOb,iBAAiB,UAAWY,GAEhC,YACQC,OAAW,KAClBA,OAAOZ,oBAAoB,UAAWW,KAG/C,CAAC5F,IAGA8F,EAAAA,KAAAC,WAAA,CACIC,SAAA,CAAAF,EAAAA,KAAC,SAAA,CACG3H,KAAAA,EACA8H,UAAU,EACV,cAAY,oBACZtH,UAAU,cACV,eAAW,EACXuH,IAAKjE,GACL5D,MAAOqD,GACPlD,SAAUX,EAEVmI,SAAA,CAAAG,EAAAA,IAAC,SAAA,CAAO9H,MAAM,KAAM,IAEnB8C,EAAaE,IAAKL,GACfmF,EAAAA,IAAC,SAAA,CAEGC,QAASpF,EAAKO,QACdlD,MAAO2C,EAAK3C,MAEX2H,SAAAhF,EAAK1C,OAJD,GAAGkB,SAAcwB,EAAK3C,aAQvC8H,EAAAA,IAACE,EAAAA,WAAA,CACGH,IAAKlD,GACL,cAAY,aACZrE,UAAW2H,EAAAA,KAAK,aAAc3H,EAAW,CACrC,qBAAsBK,EACtB,mBACIgB,GACAmB,EAAaM,KAAMT,GAASA,EAAKO,SACrC,wBAAyBK,GACzB,wBAAyB/C,GAAcC,IAE3C,kBAAiBQ,EACjBD,QACIA,GAAWkH,EAAMC,eAA8BnH,GACzCkH,EAAME,aAAapH,EAAS,CACxBqH,aAAc,IACPrH,EAAQrB,MAAM0I,aACjBhI,QACIuF,IAEA5E,EAAQrB,MAAM0I,cAAchI,UACxBuF,GAEJF,SAIZ,QAENxE,EACJrB,GAAIyC,EAAed,EAAgBD,EACnCR,MAAAA,EACAd,MAAAA,EACAC,WAAY,CACRL,GAAIyB,EACJgH,OAAQ3H,KACLT,EACHqI,QAASjG,EAAed,EAAgBD,GAE5ChB,UAAAA,EACAC,WAAAA,EACAgI,OAAQ,EACJ,eAAgBC,KACbC,MAMH,MAAMC,EACFhH,GACAmB,EAAaM,KAAMT,GAASA,EAAKO,SACrC,OACIuE,EAAAA,KAACmB,EAAAA,QAAA,CACGC,KAAMF,EACNG,UAAU,eACVC,OAAQ,EACRC,OAAO,EACPC,kBAAmB9G,EACnB+G,aAAc,CAAEC,SAAS,GACzBC,eAAgB,CAAED,SAAS,GAC3BE,YAAa,CAAEF,SAAS,GAExBxB,SAAA,CAAAG,EAAAA,IAACc,EAAAA,QAAQU,QAAR,CAAgBC,SAAO,EACpB5B,SAAAF,EAAAA,KAAC,MAAA,CACGnH,UAAU,4BACV,yBACI2B,EAEJlB,MACI,CACIF,MAAAA,EACAY,WAAAA,GAIPkG,SAAA,CAAArF,GACGwF,EAAAA,IAAC,QAAA,IACOY,EACJ,eAAcD,EACd5I,GAAI2B,EACJuG,QAASxF,EACTsF,IAAKhD,GACL2E,YAAY,MACZxJ,MAAOwC,EACPrC,SAAWyF,GACPnD,EACImD,EAAErB,OAAOvE,OAGjB,cAAY,2BACZM,UAAU,2BACV,oBAAkB,OAClB,wBACIqI,GACApF,GACM,GAAGpC,MAAWsI,EAAAA,QACVpG,WAEJ,EAEV,gBACIsF,EACMxH,OACA,EAEV,gBAAewH,EACfe,KAAK,WACLC,UACI3C,GAEJ5G,OAAQuF,GACRtF,QAAS4F,GACT2D,QAAUhE,IACNA,EAAEmB,qBAKde,EAAAA,IAAC,SAAA,CAEG,eAAcW,KACVC,EACJ7I,GAAI0B,EACJsG,IAAK1D,GACL4D,OAAQxF,EACR+B,KAAK,SACLxE,KAAM,GAAGA,QACTQ,UAAW2H,EAAAA,KACP,qBACA,CACI,qCACM5E,KAGd,cAAY,qBACZ,aAAY,GACRG,IAAsB,UACtBvD,IACJ,gBAAe0I,EACf,gBACIA,EACMxH,OACA,EAEVf,OAAQuF,GACRtF,QAAS4F,GACT0D,UAAW9C,GACX+C,QAAS9H,EACT+H,YAAcjE,IAGVA,EAAEc,iBACFvC,GAAUL,SAASM,SAGtBuD,SAAAnE,KAELsE,EAAAA,IAACgC,EAAAA,sBAAA,CACGC,QAAQ,SACRC,cAAerB,EACfrI,UAAU,2BAItBwH,EAAAA,IAACc,EAAAA,QAAQqB,QAAR,CACGC,gBACAC,aAAa,EACb7J,UAAU,sBACVS,MAAO,CACHF,MAAO,eAAeY,YAG1BkG,SAAAG,EAAAA,IAAC,MAAA,CACGjI,GAAIsB,EACJ0G,IAAK1C,GAELuE,KAAK,UACLpJ,UAAU,2BACV,yBACI2B,EAEJ,kBAAiBX,EACjBsG,UAAU,EACV,cAAY,sBACZ,kBACI3G,EACM,GAAGA,aACH,sBAEV,aAAW,aACXF,MACI,CACI,iCACID,GAIX6G,SAAA7E,EAAaE,IAAI,CAACL,EAAMyH,IAMrBzH,EAAKO,QACDuE,EAAAA,KAAC,SAAA,CAEGM,QAASpF,EAAKO,QACdoB,KAAK,SACLzE,GAAI,GAAGsB,MAAWsI,EAAAA,QACd9G,EAAK3C,SAETM,UAAU,qBACV,cAAY,qBACZ,gBACIqC,EAAK3C,QACLqD,GAGJqG,KAAK,SACL1J,MAAO2C,EAAK3C,MACZ,kBAAiB,sBAAsBoK,IACvChK,OAAQuF,GACRtF,QAAS4F,GACT0D,UACIxC,GAEJyC,QAAUhE,IACNA,EAAEc,iBACFzC,GAAatB,IAEjB0H,YACInE,GAGHyB,SAAA,CAAAhF,EAAK1C,MACL0C,EAAK2H,YACFxC,MAAC,OAAA,CAAKxH,UAAU,iCACXqH,SAAAhF,EAAK2H,cAEV,OAlCC,GAAGnJ,KAAUwB,EAAK3C,SAoC3B,qBAahDP,EAAO8K,YAAc"}

package/build/cjs/components/text-area/BaseTextArea.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("./counter.cjs"),r=t.forwardRef((r,s)=>{const{autoExpand:l,counter:n,defaultValue:o,onBlur:u,onFocus:i,rows:c=7,placeholder:d=" ",startOpen:h,style:x,value:f,"aria-invalid":g,onChange:v,...j}=r,p=n?.strategy??"characters",y=typeof f<"u",[_,m]=t.useState(o),[k,w]=t.useState(!1),N=t.useRef(null),B=s||N,S=y?f:_,q=y?{value:f}:{defaultValue:o},C=a.getCounterValue(S,p),T=n?.maxLength||0,V=T-C,b=!(!g&&!!!(n&&C>T));t.useEffect(()=>{const e=B.current;if(e){if(!l)return void(e.style.height="");k||S?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[l,B,S,k,C]);const A={overflowX:l?"hidden":void 0};return e.jsxs("div",{className:"jkl-text-area-wrapper","data-invalid":b,"data-has-content":C>0,children:[e.jsx("textarea",{"aria-invalid":b,className:`jkl-text-area__text-area jkl-text-area__text-area--${c}-rows`,onBlur:function(e){w(!1),u&&u(e)},onFocus:function(e){w(!0),i&&i(e)},onChange:function(e){y||m(e.target.value),v&&v(e)},ref:B,style:{...x,...A},placeholder:d,...q,...j}),n&&e.jsxs("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e.jsxs("div",{className:"jkl-text-area__counter-count",children:[C," / ",T]}),!n.hideProgress&&e.jsx("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(E=V,F=T,E<=0||0===F?0:100*E/F)+"%"}})]})]});var E,F});r.displayName="BaseTextArea",exports.BaseTextArea=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("../../utilities/mergeRefs.cjs"),r=require("./counter.cjs"),s=t.forwardRef((s,l)=>{const{autoExpand:n,counter:u,defaultValue:o,onBlur:i,onFocus:c,rows:d=7,placeholder:h=" ",startOpen:x,style:f,value:g,"aria-invalid":v,onChange:j,...p}=s,m=u?.strategy??"characters",y=typeof g<"u",[_,k]=t.useState(o??""),[w,N]=t.useState(!1),q=t.useRef(null),B=t.useMemo(()=>a.mergeRefs(q,l),[l]),R=y?g:_,S=y?{value:g}:{defaultValue:o},C=r.getCounterValue(R,m),E=u?.maxLength||0,T=E-C,V=!(!v&&!!!(u&&C>E));t.useEffect(()=>{if(!y&&q.current){const e=q.current.value;k(t=>t===e?t:e)}},[y]),t.useEffect(()=>{const e=q.current;if(e){if(!n)return void(e.style.height="");w||R?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[n,R,w,C]);const b={overflowX:n?"hidden":void 0};return e.jsxs("div",{className:"jkl-text-area-wrapper","data-invalid":V,"data-has-content":C>0,children:[e.jsx("textarea",{"aria-invalid":V,className:`jkl-text-area__text-area jkl-text-area__text-area--${d}-rows`,onBlur:function(e){N(!1),i&&i(e)},onFocus:function(e){N(!0),c&&c(e)},onChange:function(e){y||k(e.target.value),j&&j(e)},ref:B,style:{...f,...b},placeholder:h,...S,...p}),u&&e.jsxs("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e.jsxs("div",{className:"jkl-text-area__counter-count",children:[C," / ",E]}),!u.hideProgress&&e.jsx("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(A=T,F=E,A<=0||0===F?0:100*A/F)+"%"}})]})]});var A,F});s.displayName="BaseTextArea",exports.BaseTextArea=s;
 //# sourceMappingURL=BaseTextArea.cjs.map

package/build/cjs/components/text-area/BaseTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState(defaultValue);\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [\n            autoExpand,\n            textAreaRef,\n            textAreaValue,\n            textAreaFocused,\n            counterCurrent,\n        ]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","textAreaElement","current","height","scrollHeight","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"mKAYaA,EAAeC,EAAAA,WACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GACtBC,EAAAA,SAASf,IACNgB,EAAiBC,GAAsBF,EAAAA,UAAS,GACjDG,EAAcC,EAAAA,OAA4B,MAC1CC,EACDvB,GAA0CqB,EAGzCG,EAAgBT,EAAeL,EAAQM,EACvCS,EAAqBV,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDuB,EAAiBC,EAAAA,gBAAgBH,EAAeV,GAChDc,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBpB,OADIT,GAAWwB,EAAiBE,IAIxDI,EAAAA,UAAU,KACN,MAAMC,EAAkBV,EAAYW,QACpC,GAAID,EAAiB,CACjB,IAAKhC,EAED,YADAgC,EAAgBxB,MAAM0B,OAAS,IAI/BhB,GAAmBK,GACnBS,EAAgBxB,MAAM0B,OAAS,OAC/BF,EAAgBxB,MAAM0B,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBxB,MAAM0B,OAAS,EAEvC,GACD,CACClC,EACAsB,EACAC,EACAL,EACAO,IAiCJ,MAAMW,EAAgB,CAClBC,UAAWrC,EAAa,cAAW,GAGvC,OACIsC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcT,EACd,mBAAkBL,EAAiB,EAEnCe,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcX,EACdS,UAAW,sDAAsDlC,SACjEF,OApCZ,SAAsBuC,GAClBvB,GAAmB,GACfhB,GACAA,EAAOuC,EAEf,EAgCYtC,QA5CZ,SAAuBsC,GACnBvB,GAAmB,GACff,GACAA,EAAQsC,EAEhB,EAwCY/B,SA/BZ,SAAwB+B,GACf5B,GACDE,EAAqB0B,EAAEC,OAAOlC,OAG9BE,GACAA,EAAS+B,EAEjB,EAwBY3C,IAAKuB,EACLd,MAAO,IAAKA,KAAU4B,GACtB9B,YAAAA,KACIkB,KACAZ,IAEPX,GACGqC,EAAAA,KAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAAA,KAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAf,EAAe,MAAcE,MAEhC1B,EAAQ2C,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV/B,MAAO,CACF,oBAtCAyB,EAuCGJ,EAvCcgB,EAwCdlB,EAvCxBM,GAAW,GAGE,IAAVY,EAFI,EAEyB,IAAVZ,EAAiBY,GAkCa,aAtC5D,IAA6BZ,EAAiBY,IAmDtDjD,EAAakD,YAAc"}
+{"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] = useState(\n            defaultValue ?? \"\",\n        );\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef = useMemo(() => mergeRefs(internalRef, ref), [ref]);\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        useEffect(() => {\n            if (!isControlled && internalRef.current) {\n                const value = internalRef.current.value;\n                setUncontrolledValue((currentValue) =>\n                    currentValue === value ? currentValue : value,\n                );\n            }\n        }, [isControlled]);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = internalRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [autoExpand, textAreaValue, textAreaFocused, counterCurrent]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useMemo","mergeRefs","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","current","currentValue","textAreaElement","height","scrollHeight","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"8MAaaA,EAAeC,EAAAA,WACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GAAwBC,EAAAA,SAC9Cf,GAAgB,KAEbgB,EAAiBC,GAAsBF,EAAAA,UAAS,GACjDG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAcC,EAAAA,QAAQ,IAAMC,EAAAA,UAAUJ,EAAarB,GAAM,CAACA,IAG1D0B,EAAgBX,EAAeL,EAAQM,EACvCW,EAAqBZ,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDyB,EAAiBC,EAAAA,gBAAgBH,EAAeZ,GAChDgB,EAAuB5B,GAAS6B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBtB,OADIT,GAAW0B,EAAiBE,IAGxDI,EAAAA,UAAU,KACN,IAAKnB,GAAgBM,EAAYc,QAAS,CACtC,MAAMzB,EAAQW,EAAYc,QAAQzB,MAClCO,EAAsBmB,GAClBA,IAAiB1B,EAAQ0B,EAAe1B,EAEhD,GACD,CAACK,IAGJmB,EAAAA,UAAU,KACN,MAAMG,EAAkBhB,EAAYc,QACpC,GAAIE,EAAiB,CACjB,IAAKpC,EAED,YADAoC,EAAgB5B,MAAM6B,OAAS,IAI/BnB,GAAmBO,GACnBW,EAAgB5B,MAAM6B,OAAS,OAC/BD,EAAgB5B,MAAM6B,OAAS,GAAGD,EAAgBE,kBAElDF,EAAgB5B,MAAM6B,OAAS,EAEvC,GACD,CAACrC,EAAYyB,EAAeP,EAAiBS,IAgChD,MAAMY,EAAgB,CAClBC,UAAWxC,EAAa,cAAW,GAGvC,OACIyC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcV,EACd,mBAAkBL,EAAiB,EAEnCgB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcZ,EACdU,UAAW,sDAAsDrC,SACjEF,OApCZ,SAAsB0C,GAClB1B,GAAmB,GACfhB,GACAA,EAAO0C,EAEf,EAgCYzC,QA5CZ,SAAuByC,GACnB1B,GAAmB,GACff,GACAA,EAAQyC,EAEhB,EAwCYlC,SA/BZ,SAAwBkC,GACf/B,GACDE,EAAqB6B,EAAEC,OAAOrC,OAG9BE,GACAA,EAASkC,EAEjB,EAwBY9C,IAAKuB,EACLd,MAAO,IAAKA,KAAU+B,GACtBjC,YAAAA,KACIoB,KACAd,IAEPX,GACGwC,EAAAA,KAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAAA,KAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAhB,EAAe,MAAcE,MAEhC5B,EAAQ8C,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACVlC,MAAO,CACF,oBAtCA0B,EAuCGH,EAvCciB,EAwCdnB,EAvCxBK,GAAW,GAGE,IAAVc,EAFI,EAEyB,IAAVd,EAAiBc,GAkCa,aAtC5D,IAA6Bd,EAAiBc,IAmDtDpD,EAAaqD,YAAc"}

package/build/cjs/components/toast/Toast.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),a=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),n=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),i=require("../flex/Flex.cjs"),c=require("../icon-button/IconButton.cjs"),l=require("../icon/icons/CloseIcon.cjs"),u=require("../icon/icons/ErrorIcon.cjs"),j=require("../icon/icons/InfoIcon.cjs"),m=require("../icon/icons/SuccessIcon.cjs"),d=require("../icon/icons/WarningIcon.cjs"),x=s=>{switch(s){case"error":return t.jsx(u.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(j.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(m.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(d.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:u,state:j,...m}){const d=o.useRef(null),{toastProps:k,titleProps:f}=s.useToast(m,j,d),[g,_]=o.useState(!1),v="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,h="string"==typeof m.toast.content?void 0:m.toast.content.title,I=null==m.toast.timer?.timerId,{prefersReducedMotion:p}=a.useBrowserPreferences();return o.useEffect(()=>{const t=setTimeout(()=>{_(!0)},0);return()=>clearTimeout(t)},[]),o.useEffect(()=>{p&&"exiting"===m.toast.animation&&j.remove(m.toast.key)},[p,m.toast.animation,m.toast.key,j]),t.jsxs("div",{...k,ref:d,className:e.clsx("jkl-toast",{"jkl-toast--info":"info"===m.toast.variant,"jkl-toast--error":"error"===m.toast.variant,"jkl-toast--warning":"warning"===m.toast.variant,"jkl-toast--success":"success"===m.toast.variant},u),"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&j.remove(m.toast.key)},children:[m.toast.timeout?t.jsx(r.Countdown,{className:"jkl-toast__progress",from:m.toast.timeout,isPaused:I,"data-theme":"light",onAnimationEnd:t=>{t.stopPropagation()}}):null,t.jsxs(i.Flex,{alignItems:"start",gap:"xs",children:[x(m.toast.variant),t.jsxs(i.Flex,{...f,direction:"column",gap:"xs",className:"jkl-toast__content","aria-live":"assertive",children:[h&&t.jsx("p",{className:"jkl-toast__title",children:g&&h}),t.jsx("p",{className:"jkl-toast__message",children:g&&v}),m.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(n.Button,{variant:"secondary","data-theme":"light",onClick:m.toast.action.onClick,children:m.toast.action.label})})]}),t.jsx(c.IconButton,{"data-theme":m.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{j.close(m.toast.key)},children:t.jsx(l.CloseIcon,{})})]})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),c=require("../flex/Flex.cjs"),i=require("../icon-button/IconButton.cjs"),l=require("../icon/icons/CloseIcon.cjs"),u=require("../icon/icons/ErrorIcon.cjs"),j=require("../icon/icons/InfoIcon.cjs"),m=require("../icon/icons/SuccessIcon.cjs"),d=require("../icon/icons/WarningIcon.cjs"),x=s=>{switch(s){case"error":return t.jsx(u.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(j.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(m.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(d.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:u,state:j,...m}){const d=o.useRef(null),{toastProps:k,titleProps:f}=s.useToast(m,j,d),[_,g]=o.useState(!1),I="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,p="string"==typeof m.toast.content?void 0:m.toast.content.title,v=null==m.toast.timer?.timerId,{prefersReducedMotion:q}=n.useBrowserPreferences();return o.useEffect(()=>{const t=setTimeout(()=>{g(!0)},0);return()=>clearTimeout(t)},[]),o.useEffect(()=>{q&&"exiting"===m.toast.animation&&j.remove(m.toast.key)},[q,m.toast.animation,m.toast.key,j]),t.jsxs("div",{...k,ref:d,className:e.clsx("jkl-toast",{"jkl-toast--info":"info"===m.toast.variant,"jkl-toast--error":"error"===m.toast.variant,"jkl-toast--warning":"warning"===m.toast.variant,"jkl-toast--success":"success"===m.toast.variant},u),"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&j.remove(m.toast.key)},children:[m.toast.timeout?t.jsx(r.Countdown,{className:"jkl-toast__progress",from:m.toast.timeout,isPaused:v,onAnimationEnd:t=>{t.stopPropagation()}}):null,t.jsxs(c.Flex,{alignItems:"start",gap:"xs",children:[x(m.toast.variant),t.jsxs(c.Flex,{...f,direction:"column",gap:"xs",className:"jkl-toast__content","aria-live":"assertive",children:[p&&t.jsx("p",{className:"jkl-toast__title",children:_&&p}),t.jsx("p",{className:"jkl-toast__message",children:_&&I}),m.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",onClick:m.toast.action.onClick,children:m.toast.action.label})})]}),t.jsx(i.IconButton,{"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{j.close(m.toast.key)},children:t.jsx(l.CloseIcon,{})})]})]})};
 //# sourceMappingURL=Toast.cjs.map