@fremtind/jokul 5.0.0 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/checkbox-panel/CheckboxPanel.cjs +1 -1
  3. package/build/cjs/components/checkbox-panel/CheckboxPanel.cjs.map +1 -1
  4. package/build/cjs/components/checkbox-panel/CheckboxPanel.d.cts +1 -1
  5. package/build/cjs/components/expander/index.cjs +1 -1
  6. package/build/cjs/components/expander/index.d.cts +1 -0
  7. package/build/cjs/components/input-panel/InputPanel.cjs +1 -1
  8. package/build/cjs/components/input-panel/InputPanel.cjs.map +1 -1
  9. package/build/cjs/components/input-panel/InputPanel.d.cts +1 -1
  10. package/build/cjs/components/input-panel/types.d.cts +2 -1
  11. package/build/cjs/components/message/Message.cjs +1 -1
  12. package/build/cjs/components/message/Message.cjs.map +1 -1
  13. package/build/cjs/components/radio-panel/RadioPanel.cjs +1 -1
  14. package/build/cjs/components/radio-panel/RadioPanel.cjs.map +1 -1
  15. package/build/cjs/components/select/Select.cjs +1 -1
  16. package/build/cjs/components/select/Select.cjs.map +1 -1
  17. package/build/cjs/components/toast/Toast.cjs +1 -1
  18. package/build/cjs/components/toast/Toast.cjs.map +1 -1
  19. package/build/cjs/components/typography/Title.cjs +1 -1
  20. package/build/cjs/components/typography/Title.cjs.map +1 -1
  21. package/build/cjs/utilities/types.cjs.map +1 -1
  22. package/build/cjs/utilities/types.d.cts +12 -2
  23. package/build/es/components/checkbox-panel/CheckboxPanel.d.ts +1 -1
  24. package/build/es/components/checkbox-panel/CheckboxPanel.js +1 -1
  25. package/build/es/components/checkbox-panel/CheckboxPanel.js.map +1 -1
  26. package/build/es/components/expander/index.d.ts +1 -0
  27. package/build/es/components/expander/index.js +1 -1
  28. package/build/es/components/input-panel/InputPanel.d.ts +1 -1
  29. package/build/es/components/input-panel/InputPanel.js +1 -1
  30. package/build/es/components/input-panel/InputPanel.js.map +1 -1
  31. package/build/es/components/input-panel/types.d.ts +2 -1
  32. package/build/es/components/message/Message.js +1 -1
  33. package/build/es/components/message/Message.js.map +1 -1
  34. package/build/es/components/radio-panel/RadioPanel.js +1 -1
  35. package/build/es/components/radio-panel/RadioPanel.js.map +1 -1
  36. package/build/es/components/select/Select.js +1 -1
  37. package/build/es/components/select/Select.js.map +1 -1
  38. package/build/es/components/toast/Toast.js +1 -1
  39. package/build/es/components/toast/Toast.js.map +1 -1
  40. package/build/es/components/typography/Title.js +1 -1
  41. package/build/es/components/typography/Title.js.map +1 -1
  42. package/build/es/utilities/types.d.ts +12 -2
  43. package/build/es/utilities/types.js.map +1 -1
  44. package/package.json +1 -1
  45. package/styles/base.css +3 -0
  46. package/styles/base.min.css +1 -1
  47. package/styles/components/breadcrumb/breadcrumb.css +0 -1
  48. package/styles/components/breadcrumb/breadcrumb.min.css +1 -1
  49. package/styles/components/breadcrumb/breadcrumb.scss +0 -1
  50. package/styles/components/button/button.css +0 -1
  51. package/styles/components/button/button.min.css +1 -1
  52. package/styles/components/button/button.scss +1 -2
  53. package/styles/components/chip/chip.css +0 -1
  54. package/styles/components/chip/chip.min.css +1 -1
  55. package/styles/components/chip/chip.scss +0 -1
  56. package/styles/components/combobox/combobox.css +0 -1
  57. package/styles/components/combobox/combobox.min.css +1 -1
  58. package/styles/components/combobox/combobox.scss +0 -1
  59. package/styles/components/countdown/countdown.css +2 -2
  60. package/styles/components/countdown/countdown.min.css +1 -1
  61. package/styles/components/datepicker/_calendar-date-button.scss +0 -2
  62. package/styles/components/datepicker/datepicker.css +0 -2
  63. package/styles/components/datepicker/datepicker.min.css +1 -1
  64. package/styles/components/feedback/feedback.css +2 -2
  65. package/styles/components/feedback/feedback.min.css +1 -1
  66. package/styles/components/file/file.css +3 -0
  67. package/styles/components/file/file.min.css +1 -1
  68. package/styles/components/file/file.scss +4 -0
  69. package/styles/components/file-input/file-input.css +26 -17
  70. package/styles/components/file-input/file-input.min.css +1 -1
  71. package/styles/components/icon-button/icon-button.css +0 -1
  72. package/styles/components/icon-button/icon-button.min.css +1 -1
  73. package/styles/components/icon-button/icon-button.scss +0 -1
  74. package/styles/components/input-group/input-group.css +2 -2
  75. package/styles/components/input-group/input-group.min.css +1 -1
  76. package/styles/components/link/link.css +14 -7
  77. package/styles/components/link/link.min.css +1 -1
  78. package/styles/components/link/link.scss +18 -10
  79. package/styles/components/loader/loader.css +6 -6
  80. package/styles/components/loader/loader.min.css +1 -1
  81. package/styles/components/loader/skeleton-loader.css +3 -3
  82. package/styles/components/loader/skeleton-loader.min.css +1 -1
  83. package/styles/components/menu/_menu-item.scss +0 -1
  84. package/styles/components/menu/menu.css +0 -1
  85. package/styles/components/menu/menu.min.css +1 -1
  86. package/styles/components/message/message.css +2 -3
  87. package/styles/components/message/message.min.css +1 -1
  88. package/styles/components/message/message.scss +0 -1
  89. package/styles/components/pagination/pagination.css +1 -1
  90. package/styles/components/pagination/pagination.scss +1 -1
  91. package/styles/components/progress-bar/progress-bar.css +1 -1
  92. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  93. package/styles/components/search/search.css +0 -1
  94. package/styles/components/search/search.min.css +1 -1
  95. package/styles/components/search/search.scss +0 -1
  96. package/styles/components/segmented-control/segmented-control.css +2 -2
  97. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  98. package/styles/components/system-message/system-message.css +2 -3
  99. package/styles/components/system-message/system-message.min.css +1 -1
  100. package/styles/components/system-message/system-message.scss +1 -2
  101. package/styles/components/table/_table-pagination.scss +0 -1
  102. package/styles/components/table/table.css +0 -1
  103. package/styles/components/table/table.min.css +1 -1
  104. package/styles/components/tabs/tabs.css +0 -1
  105. package/styles/components/tabs/tabs.min.css +1 -1
  106. package/styles/components/tabs/tabs.scss +0 -1
  107. package/styles/components/toast/toast.css +34 -9
  108. package/styles/components/toast/toast.min.css +1 -1
  109. package/styles/components/toast/toast.scss +44 -9
  110. package/styles/components/toggle-switch/toggle-switch.css +0 -1
  111. package/styles/components/toggle-switch/toggle-switch.min.css +1 -1
  112. package/styles/components/toggle-switch/toggle-switch.scss +0 -1
  113. package/styles/components/typography/text.css +2 -2
  114. package/styles/components/typography/text.min.css +1 -1
  115. package/styles/components/typography/text.scss +2 -2
  116. package/styles/components/typography/title.css +8 -30
  117. package/styles/components/typography/title.min.css +1 -1
  118. package/styles/components/typography/title.scss +7 -30
  119. package/styles/components.css +82 -83
  120. package/styles/components.min.css +1 -1
  121. package/styles/global/_base-class.scss +4 -0
@@ -1,2 +1,2 @@
1
- "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"});
1
+ "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;
2
2
  //# sourceMappingURL=CheckboxPanel.cjs.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,3 +1,3 @@
1
1
  import { default as React } from 'react';
2
2
  import { CheckboxPanelProps } from './types.cjs';
3
- export declare const CheckboxPanel: (props: CheckboxPanelProps) => React.JSX.Element;
3
+ export declare const CheckboxPanel: React.ForwardRefExoticComponent<CheckboxPanelProps & React.RefAttributes<HTMLInputElement>>;
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,3 +1,4 @@
1
1
  export { ExpandablePanel } from './ExpandablePanel.cjs';
2
2
  export { Expander } from './Expander.cjs';
3
+ export { Accordion } from './Accordion.cjs';
3
4
  export type { ExpandablePanelProps, ExpanderProps, AccordionProps, } from './types.cjs';
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=InputPanel.cjs.map
@@ -1 +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"}
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 \"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"}
@@ -1,5 +1,5 @@
1
1
  import { default as React } from 'react';
2
- export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & {
2
+ export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & import('../../utilities/types.js').JokulModes & {
3
3
  label: string;
4
4
  type: "radio" | "checkbox";
5
5
  amount?: string;
@@ -1,5 +1,6 @@
1
1
  import { InputHTMLAttributes, ReactNode } from 'react';
2
- export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & {
2
+ import { JokulModes } from '../../utilities/types.cjs';
3
+ export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & JokulModes & {
3
4
  label: string;
4
5
  type: "radio" | "checkbox";
5
6
  /**
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=Message.cjs.map
@@ -1 +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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"}
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 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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"}
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=RadioPanel.cjs.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=Select.cjs.map
@@ -1 +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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"}
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 \"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"}
@@ -1,2 +1,2 @@
1
- "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,{})})]})]})};
1
+ "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,{})})]})]})};
2
2
  //# sourceMappingURL=Toast.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.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 type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n const ref = useRef(null);\n const { toastProps, titleProps } = useToast(props, state, ref);\n const [announceReady, setAnnounceReady] = useState(false);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n const timeout = setTimeout(() => {\n setAnnounceReady(true);\n }, 0);\n\n return () => clearTimeout(timeout);\n }, []);\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n {props.toast.timeout ? (\n <Countdown\n className=\"jkl-toast__progress\"\n from={props.toast.timeout}\n isPaused={isPaused}\n data-theme=\"light\"\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n <Flex alignItems=\"start\" gap=\"xs\">\n {getIcon(props.toast.variant)}\n <Flex\n {...titleProps}\n direction=\"column\"\n gap=\"xs\"\n className=\"jkl-toast__content\"\n aria-live=\"assertive\"\n >\n {title && (\n <p className=\"jkl-toast__title\">\n {announceReady && title}\n </p>\n )}\n <p className=\"jkl-toast__message\">\n {announceReady && content}\n </p>\n {props.toast.action && (\n <div className=\"jkl-toast__action\">\n <Button\n variant=\"secondary\"\n data-theme=\"light\"\n onClick={props.toast.action.onClick}\n >\n {props.toast.action.label}\n </Button>\n </div>\n )}\n </Flex>\n <IconButton\n data-theme={!props.toast.variant ? undefined : \"light\"}\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </Flex>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","Flex","alignItems","gap","direction","action","Button","onClick","label","IconButton","close","CloseIcon"],"mappings":"2nBAsBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,qBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAAA,OAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAAAA,SAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,EAAAA,UAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,UAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAAA,UAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAAA,KAAC,MAAA,IACOrB,EACJF,IAAAA,EACAN,UAAW8B,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtC/B,GAEJ,iBAAgBK,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACTzB,EAAAA,IAACoC,EAAAA,UAAA,CACGlC,UAAU,sBACVmC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACA,aAAW,QACXe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAAAA,KAACS,EAAAA,KAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAArC,EAAQS,EAAMU,MAAMgB,SACrBF,EAAAA,KAACS,EAAAA,KAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJxC,UAAU,qBACV,YAAU,YAETiC,SAAA,CAAAjB,GACGlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,mBACRiC,YAAiBjB,IAG1BlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBACRiC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT5C,EAAAA,IAAC,MAAA,CAAIE,UAAU,oBACXiC,SAAAnC,EAAAA,IAAC6C,EAAAA,OAAA,CACGZ,QAAQ,YACR,aAAW,QACXa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpC/C,EAAAA,IAACgD,EAAAA,WAAA,CACG,aAAazC,EAAMU,MAAMgB,QAAsB,aAAZ,EACnC,aAAW,cACX/B,UAAU,4BACV4C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,eAACe,EAAAA,UAAA,CAAA,UAKrB"}
1
+ {"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.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 type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n const ref = useRef(null);\n const { toastProps, titleProps } = useToast(props, state, ref);\n const [announceReady, setAnnounceReady] = useState(false);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n const timeout = setTimeout(() => {\n setAnnounceReady(true);\n }, 0);\n\n return () => clearTimeout(timeout);\n }, []);\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n {props.toast.timeout ? (\n <Countdown\n className=\"jkl-toast__progress\"\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n <Flex alignItems=\"start\" gap=\"xs\">\n {getIcon(props.toast.variant)}\n <Flex\n {...titleProps}\n direction=\"column\"\n gap=\"xs\"\n className=\"jkl-toast__content\"\n aria-live=\"assertive\"\n >\n {title && (\n <p className=\"jkl-toast__title\">\n {announceReady && title}\n </p>\n )}\n <p className=\"jkl-toast__message\">\n {announceReady && content}\n </p>\n {props.toast.action && (\n <div className=\"jkl-toast__action\">\n <Button\n variant=\"secondary\"\n onClick={props.toast.action.onClick}\n >\n {props.toast.action.label}\n </Button>\n </div>\n )}\n </Flex>\n <IconButton\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </Flex>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","Flex","alignItems","gap","direction","action","Button","onClick","label","IconButton","close","CloseIcon"],"mappings":"2nBAsBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,qBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAAA,OAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAAAA,SAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,EAAAA,UAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,UAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAAA,UAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAAA,KAAC,MAAA,IACOrB,EACJF,IAAAA,EACAN,UAAW8B,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtC/B,GAEJ,iBAAgBK,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACTzB,EAAAA,IAACoC,EAAAA,UAAA,CACGlC,UAAU,sBACVmC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAAAA,KAACS,EAAAA,KAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAArC,EAAQS,EAAMU,MAAMgB,SACrBF,EAAAA,KAACS,EAAAA,KAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJxC,UAAU,qBACV,YAAU,YAETiC,SAAA,CAAAjB,GACGlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,mBACRiC,YAAiBjB,IAG1BlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBACRiC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT5C,EAAAA,IAAC,MAAA,CAAIE,UAAU,oBACXiC,SAAAnC,EAAAA,IAAC6C,EAAAA,OAAA,CACGZ,QAAQ,YACRa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpC/C,EAAAA,IAACgD,EAAAA,WAAA,CACG,aAAW,cACX9C,UAAU,4BACV4C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,eAACe,EAAAA,UAAA,CAAA,UAKrB"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react").forwardRef(function({className:t,size:s="l",as:l,srOnly:a,...c},i){const o=l||"h2";return e.jsx(o,{className:r.clsx("jkl-title",a&&"jkl-sr-only",t),"data-text-size":s,ref:i,...c})});exports.Title=t;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react").forwardRef(function({className:s,size:t="l",as:a,srOnly:c,...l},i){const o=a||"h2";return e.jsx(o,{className:r.clsx(c&&"jkl-sr-only",s),"data-text-size":t,ref:i,...l})});exports.Title=s;
2
2
  //# sourceMappingURL=Title.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Title.cjs","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n As extends TitleElement = \"h2\",\n>(\n { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n ref?: PolymorphicRef<As>,\n) {\n const Tag = (as || \"h2\") as React.ElementType;\n return (\n <Tag\n className={clsx(\"jkl-title\", srOnly && \"jkl-sr-only\", className)}\n data-text-size={size}\n ref={ref}\n {...rest}\n />\n );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","Tag","jsx","clsx"],"mappings":"6JASaA,mBAAwBC,WAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAEA,MAAMC,EAAOJ,GAAM,KACnB,OACIK,EAAAA,IAACD,EAAA,CACGN,UAAWQ,EAAAA,KAAK,YAAaL,GAAU,cAAeH,GACtD,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}
1
+ {"version":3,"file":"Title.cjs","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n As extends TitleElement = \"h2\",\n>(\n { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n ref?: PolymorphicRef<As>,\n) {\n const Tag = (as || \"h2\") as React.ElementType;\n return (\n <Tag\n className={clsx(srOnly && \"jkl-sr-only\", className)}\n data-text-size={size}\n ref={ref}\n {...rest}\n />\n );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","Tag","jsx","clsx"],"mappings":"6JASaA,mBAAwBC,WAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAEA,MAAMC,EAAOJ,GAAM,KACnB,OACIK,EAAAA,IAACD,EAAA,CACGN,UAAWQ,EAAAA,KAAKL,GAAU,cAAeH,GACzC,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.cjs","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport type ColorScheme = \"light\" | \"dark\";\n\nexport type Size = \"small\" | \"medium\" | \"large\";\n\nexport const BRANDS = [] as const;\n\nexport type Brand = (typeof BRANDS)[number];\n\nexport type Easing = keyof typeof tokens.motion.easing;\nexport type Timing = keyof typeof tokens.motion.timing;\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du\n * WithOptionalChildren.\n *\n * @see WithOptionalChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithChildren {\n children: ReactNode | ReactNode[];\n}\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n *\n * Om du alltid forventer å få children, bruk WithChildren.\n *\n * @see WithChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithOptionalChildren {\n children?: ReactNode | ReactNode[];\n}\n"],"names":[],"mappings":"+FAasB"}
1
+ {"version":3,"file":"types.cjs","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport const BRANDS = [] as const;\nexport type Brand = (typeof BRANDS)[number];\nexport type Size = \"small\" | \"medium\" | \"large\";\nexport type ColorScheme = \"light\" | \"dark\";\n\n/**\n * Eksplisitte typer for modusene som brukes i Jøkul, slik at de kan brukes aktivt i komponentene\n * @example type Props = { myProp: string } & JokulModes;\n * @example interface Props extends JokulModes { myProp: string };\n */\nexport interface JokulModes {\n \"data-brand\"?: Brand;\n \"data-size\"?: Size;\n \"data-theme\"?: ColorScheme;\n}\n\nexport type Easing = keyof typeof tokens.motion.easing;\nexport type Timing = keyof typeof tokens.motion.timing;\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du\n * WithOptionalChildren.\n *\n * @see WithOptionalChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithChildren {\n children: ReactNode | ReactNode[];\n}\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n *\n * Om du alltid forventer å få children, bruk WithChildren.\n *\n * @see WithChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithOptionalChildren {\n children?: ReactNode | ReactNode[];\n}\n"],"names":[],"mappings":"+FASsB"}