@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.2

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 (258) hide show
  1. package/README.md +29 -6
  2. package/bin/jokul.mjs +10 -0
  3. package/bin/run-jokul-cli.mjs +63 -0
  4. package/build/build-stats.html +1 -1
  5. package/build/cjs/components/card/Card.cjs +1 -1
  6. package/build/cjs/components/card/Card.cjs.map +1 -1
  7. package/build/cjs/components/card/types.cjs +1 -1
  8. package/build/cjs/components/card/types.cjs.map +1 -1
  9. package/build/cjs/components/card/types.d.cts +2 -2
  10. package/build/cjs/components/checkbox/Checkbox.cjs +1 -1
  11. package/build/cjs/components/checkbox/Checkbox.cjs.map +1 -1
  12. package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
  13. package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
  14. package/build/cjs/components/cookie-consent/CookieConsent.d.cts +1 -1
  15. package/build/cjs/components/cookie-consent/types.d.cts +4 -0
  16. package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
  17. package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
  18. package/build/cjs/components/expander/ExpandablePanel.cjs +1 -1
  19. package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
  20. package/build/cjs/components/link/Link.cjs +1 -1
  21. package/build/cjs/components/link/Link.cjs.map +1 -1
  22. package/build/cjs/components/link/Link.d.cts +2 -2
  23. package/build/cjs/components/link/types.d.cts +1 -4
  24. package/build/cjs/components/modal/Modal.cjs +1 -1
  25. package/build/cjs/components/modal/Modal.cjs.map +1 -1
  26. package/build/cjs/components/modal/Modal.d.cts +2 -9
  27. package/build/cjs/components/modal/index.d.cts +1 -1
  28. package/build/cjs/components/modal/types.d.cts +18 -0
  29. package/build/cjs/components/popover/Popover.cjs +1 -1
  30. package/build/cjs/components/popover/Popover.cjs.map +1 -1
  31. package/build/cjs/components/radio-button/BaseRadioButton.cjs +1 -1
  32. package/build/cjs/components/radio-button/BaseRadioButton.cjs.map +1 -1
  33. package/build/cjs/core/tokens.cjs +2 -0
  34. package/build/cjs/core/tokens.cjs.map +1 -0
  35. package/build/cjs/core/tokens.d.cts +593 -0
  36. package/build/cjs/tailwind/colors.cjs +2 -0
  37. package/build/cjs/tailwind/colors.cjs.map +1 -0
  38. package/build/cjs/tailwind/colors.d.cts +39 -0
  39. package/build/cjs/tokens.cjs +1 -1
  40. package/build/cjs/tokens.cjs.map +1 -1
  41. package/build/cjs/tokens.d.cts +98 -39
  42. package/build/es/components/card/Card.js +1 -1
  43. package/build/es/components/card/Card.js.map +1 -1
  44. package/build/es/components/card/types.d.ts +2 -2
  45. package/build/es/components/card/types.js +1 -1
  46. package/build/es/components/card/types.js.map +1 -1
  47. package/build/es/components/checkbox/Checkbox.js +1 -1
  48. package/build/es/components/checkbox/Checkbox.js.map +1 -1
  49. package/build/es/components/cookie-consent/CookieConsent.d.ts +1 -1
  50. package/build/es/components/cookie-consent/CookieConsent.js +1 -1
  51. package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
  52. package/build/es/components/cookie-consent/types.d.ts +4 -0
  53. package/build/es/components/datepicker/DatePicker.js +1 -1
  54. package/build/es/components/datepicker/DatePicker.js.map +1 -1
  55. package/build/es/components/expander/ExpandablePanel.js +1 -1
  56. package/build/es/components/expander/ExpandablePanel.js.map +1 -1
  57. package/build/es/components/link/Link.d.ts +2 -2
  58. package/build/es/components/link/Link.js +1 -1
  59. package/build/es/components/link/Link.js.map +1 -1
  60. package/build/es/components/link/types.d.ts +1 -4
  61. package/build/es/components/modal/Modal.d.ts +2 -9
  62. package/build/es/components/modal/Modal.js +1 -1
  63. package/build/es/components/modal/Modal.js.map +1 -1
  64. package/build/es/components/modal/index.d.ts +1 -1
  65. package/build/es/components/modal/types.d.ts +18 -0
  66. package/build/es/components/popover/Popover.js +1 -1
  67. package/build/es/components/popover/Popover.js.map +1 -1
  68. package/build/es/components/radio-button/BaseRadioButton.js +1 -1
  69. package/build/es/components/radio-button/BaseRadioButton.js.map +1 -1
  70. package/build/es/core/tokens.d.ts +593 -0
  71. package/build/es/core/tokens.js +2 -0
  72. package/build/es/core/tokens.js.map +1 -0
  73. package/build/es/tailwind/colors.d.ts +39 -0
  74. package/build/es/tailwind/colors.js +2 -0
  75. package/build/es/tailwind/colors.js.map +1 -0
  76. package/build/es/tokens.d.ts +98 -39
  77. package/build/es/tokens.js +1 -1
  78. package/build/es/tokens.js.map +1 -1
  79. package/codemods/__tests__/import-paths.test.mjs +84 -0
  80. package/codemods/import-paths.mjs +393 -0
  81. package/package.json +6 -1
  82. package/styles/base.css +483 -66
  83. package/styles/base.min.css +1 -1
  84. package/styles/components/autosuggest/autosuggest.css +2 -2
  85. package/styles/components/autosuggest/autosuggest.min.css +1 -1
  86. package/styles/components/autosuggest/autosuggest.scss +2 -2
  87. package/styles/components/beta/description-list/description-list.css +1 -1
  88. package/styles/components/beta/description-list/description-list.min.css +1 -1
  89. package/styles/components/beta/description-list/description-list.scss +1 -1
  90. package/styles/components/beta/nav-link/navlink.css +2 -2
  91. package/styles/components/beta/nav-link/navlink.min.css +1 -1
  92. package/styles/components/beta/nav-link/navlink.scss +2 -2
  93. package/styles/components/beta/select/select.css +9 -9
  94. package/styles/components/beta/select/select.min.css +1 -1
  95. package/styles/components/beta/select/select.scss +8 -7
  96. package/styles/components/breadcrumb/breadcrumb.css +1 -1
  97. package/styles/components/breadcrumb/breadcrumb.min.css +1 -1
  98. package/styles/components/button/button.css +6 -2
  99. package/styles/components/button/button.min.css +1 -1
  100. package/styles/components/button/button.scss +12 -12
  101. package/styles/components/card/card.css +6 -9
  102. package/styles/components/card/card.min.css +1 -1
  103. package/styles/components/card/card.scss +6 -10
  104. package/styles/components/checkbox/checkbox.css +43 -9
  105. package/styles/components/checkbox/checkbox.min.css +1 -1
  106. package/styles/components/checkbox/checkbox.scss +38 -21
  107. package/styles/components/checkbox-panel/checkbox-panel.css +65 -26
  108. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  109. package/styles/components/checkbox-panel/checkbox-panel.scss +4 -0
  110. package/styles/components/chip/chip.css +2 -2
  111. package/styles/components/chip/chip.min.css +1 -1
  112. package/styles/components/chip/chip.scss +1 -1
  113. package/styles/components/combobox/combobox.css +18 -15
  114. package/styles/components/combobox/combobox.min.css +1 -1
  115. package/styles/components/combobox/combobox.scss +9 -6
  116. package/styles/components/countdown/countdown.css +4 -4
  117. package/styles/components/countdown/countdown.min.css +1 -1
  118. package/styles/components/datepicker/_calendar-date-button.scss +7 -7
  119. package/styles/components/datepicker/_calendar-navigation-dropdown.scss +1 -1
  120. package/styles/components/datepicker/_calendar.scss +6 -7
  121. package/styles/components/datepicker/datepicker.css +19 -11
  122. package/styles/components/datepicker/datepicker.min.css +1 -1
  123. package/styles/components/description-list/description-list.css +1 -1
  124. package/styles/components/description-list/description-list.min.css +1 -1
  125. package/styles/components/description-list/description-list.scss +1 -1
  126. package/styles/components/expander/expandable.css +17 -17
  127. package/styles/components/expander/expandable.min.css +1 -1
  128. package/styles/components/expander/expandable.scss +15 -19
  129. package/styles/components/feedback/feedback.css +6 -8
  130. package/styles/components/feedback/feedback.min.css +1 -1
  131. package/styles/components/feedback/feedback.scss +4 -9
  132. package/styles/components/file/file.css +5 -5
  133. package/styles/components/file/file.min.css +1 -1
  134. package/styles/components/file/file.scss +5 -5
  135. package/styles/components/file-input/file-input.css +26 -22
  136. package/styles/components/file-input/file-input.min.css +1 -1
  137. package/styles/components/file-input/file-input.scss +3 -3
  138. package/styles/components/help/help.css +2 -2
  139. package/styles/components/help/help.min.css +1 -1
  140. package/styles/components/help/help.scss +2 -2
  141. package/styles/components/icon/icon.css +4 -4
  142. package/styles/components/icon/icon.min.css +1 -1
  143. package/styles/components/icon/icon.scss +4 -4
  144. package/styles/components/icon-button/icon-button.css +1 -1
  145. package/styles/components/icon-button/icon-button.min.css +1 -1
  146. package/styles/components/input-group/input-group.css +2 -2
  147. package/styles/components/input-group/input-group.min.css +1 -1
  148. package/styles/components/input-panel/input-panel.css +19 -17
  149. package/styles/components/input-panel/input-panel.min.css +1 -1
  150. package/styles/components/input-panel/input-panel.scss +20 -18
  151. package/styles/components/link/link.css +1 -1
  152. package/styles/components/link/link.min.css +1 -1
  153. package/styles/components/link-list/link-list.css +6 -2
  154. package/styles/components/link-list/link-list.min.css +1 -1
  155. package/styles/components/link-list/link-list.scss +6 -2
  156. package/styles/components/loader/loader.css +6 -6
  157. package/styles/components/loader/loader.min.css +1 -1
  158. package/styles/components/loader/skeleton-loader.css +4 -4
  159. package/styles/components/loader/skeleton-loader.min.css +1 -1
  160. package/styles/components/loader/skeleton-loader.scss +1 -1
  161. package/styles/components/menu/_menu-divider.scss +1 -1
  162. package/styles/components/menu/menu.css +3 -3
  163. package/styles/components/menu/menu.min.css +1 -1
  164. package/styles/components/menu/menu.scss +2 -2
  165. package/styles/components/message/message.css +19 -9
  166. package/styles/components/message/message.min.css +1 -1
  167. package/styles/components/message/message.scss +16 -6
  168. package/styles/components/modal/_layout.scss +22 -0
  169. package/styles/components/modal/_modal-base.scss +32 -0
  170. package/styles/components/modal/_motion.scss +45 -0
  171. package/styles/components/modal/_overlay.scss +20 -0
  172. package/styles/components/modal/_parts.scss +33 -0
  173. package/styles/components/modal/_placement.scss +59 -0
  174. package/styles/components/modal/modal.css +118 -34
  175. package/styles/components/modal/modal.min.css +1 -1
  176. package/styles/components/modal/modal.scss +6 -95
  177. package/styles/components/nav-link/nav-link.css +1 -1
  178. package/styles/components/nav-link/nav-link.min.css +1 -1
  179. package/styles/components/pagination/pagination.css +1 -1
  180. package/styles/components/pagination/pagination.min.css +1 -1
  181. package/styles/components/popover/popover.css +12 -1
  182. package/styles/components/popover/popover.min.css +1 -1
  183. package/styles/components/popover/popover.scss +15 -1
  184. package/styles/components/progress-bar/progress-bar.css +27 -3
  185. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  186. package/styles/components/progress-bar/progress-bar.scss +5 -0
  187. package/styles/components/radio-button/radio-button.css +41 -6
  188. package/styles/components/radio-button/radio-button.min.css +1 -1
  189. package/styles/components/radio-button/radio-button.scss +35 -16
  190. package/styles/components/radio-panel/radio-panel.css +22 -17
  191. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  192. package/styles/components/radio-panel/radio-panel.scss +4 -0
  193. package/styles/components/search/search-with-submit-button.css +1 -1
  194. package/styles/components/search/search-with-submit-button.min.css +1 -1
  195. package/styles/components/search/search-with-submit-button.scss +1 -1
  196. package/styles/components/search/search.css +2 -2
  197. package/styles/components/search/search.min.css +1 -1
  198. package/styles/components/search/search.scss +1 -1
  199. package/styles/components/segmented-control/segmented-control.css +54 -19
  200. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  201. package/styles/components/segmented-control/segmented-control.scss +4 -4
  202. package/styles/components/select/select.css +15 -15
  203. package/styles/components/select/select.min.css +1 -1
  204. package/styles/components/select/select.scss +12 -12
  205. package/styles/components/summary-table/summary-table.css +2 -2
  206. package/styles/components/summary-table/summary-table.min.css +1 -1
  207. package/styles/components/summary-table/summary-table.scss +2 -2
  208. package/styles/components/system-message/system-message.css +20 -10
  209. package/styles/components/system-message/system-message.min.css +1 -1
  210. package/styles/components/system-message/system-message.scss +17 -7
  211. package/styles/components/table/_table-head.scss +1 -1
  212. package/styles/components/table/_table-row.scss +2 -2
  213. package/styles/components/table/table.css +3 -3
  214. package/styles/components/table/table.min.css +1 -1
  215. package/styles/components/table-of-contents/table-of-contents.css +1 -1
  216. package/styles/components/table-of-contents/table-of-contents.min.css +1 -1
  217. package/styles/components/table-of-contents/table-of-contents.scss +1 -1
  218. package/styles/components/tabs/tabs.css +3 -3
  219. package/styles/components/tabs/tabs.min.css +1 -1
  220. package/styles/components/tabs/tabs.scss +2 -2
  221. package/styles/components/tag/tag.css +16 -6
  222. package/styles/components/tag/tag.min.css +1 -1
  223. package/styles/components/tag/tag.scss +16 -6
  224. package/styles/components/text-area/text-area.css +8 -8
  225. package/styles/components/text-area/text-area.min.css +1 -1
  226. package/styles/components/text-input/text-input.css +8 -8
  227. package/styles/components/text-input/text-input.min.css +1 -1
  228. package/styles/components/toast/toast.css +19 -12
  229. package/styles/components/toast/toast.min.css +1 -1
  230. package/styles/components/toast/toast.scss +15 -12
  231. package/styles/components/toggle-switch/_toggle-slider.scss +4 -4
  232. package/styles/components/toggle-switch/toggle-switch.css +14 -19
  233. package/styles/components/toggle-switch/toggle-switch.min.css +2 -2
  234. package/styles/components/toggle-switch/toggle-switch.scss +9 -16
  235. package/styles/components/tooltip/tooltip.css +3 -3
  236. package/styles/components/tooltip/tooltip.min.css +1 -1
  237. package/styles/components/tooltip/tooltip.scss +3 -3
  238. package/styles/components.css +536 -294
  239. package/styles/components.min.css +2 -2
  240. package/styles/core/jkl/_tokens.scss +59 -0
  241. package/styles/core/jkl/legacy/_dynamic-colors.scss +40 -0
  242. package/styles/core/jkl/legacy/_tokens.scss +742 -0
  243. package/styles/core/theme/_color-tokens.scss +73 -0
  244. package/styles/core/theme/_legacy-color-tokens.scss +81 -0
  245. package/styles/core/theme/_legacy-tokens.scss +279 -0
  246. package/styles/core/theme/_spacing-tokens.scss +33 -0
  247. package/styles/core/theme/_tokens.scss +33 -0
  248. package/styles/hooks/stories/styles.scss +2 -2
  249. package/styles/jkl/_ornaments.scss +1 -1
  250. package/styles/jkl/_tokens.scss +151 -71
  251. package/styles/shared/input/shared-input-styles.scss +6 -6
  252. package/styles/shared/track/track.scss +2 -2
  253. package/styles/tailwind.css +108 -66
  254. package/styles/theme/_color-scheme.scss +135 -66
  255. package/styles/theme/_index.scss +3 -0
  256. package/styles/theme/brands/dnb/_color-scheme.scss +119 -0
  257. package/styles/theme/brands/eika/_color-scheme.scss +119 -0
  258. package/styles/theme/brands/sparebank1/_color-scheme.scss +119 -0
@@ -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"),a=require("react"),t=require("../../utilities/polymorphism/SlotComponent.cjs"),i=a.forwardRef(function(a,i){const{className:s,clickable:c=!1,padding:l="s",variant:o="high",asChild:d,as:n="div",...u}=a,p=d?t.SlotComponent:n;return e.jsx(p,{"data-testid":"jkl-card","data-clickable":c,"data-padding":l,className:r.clsx("jkl-card",`jkl-card--${o}`,s),...u,ref:i})});exports.Card=i;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),t=require("../../utilities/polymorphism/SlotComponent.cjs"),i=a.forwardRef(function(a,i){const{className:s,clickable:l=!1,padding:c="s",variant:d="filled",asChild:o,as:n="div",...u}=a,p=o?t.SlotComponent:n;return e.jsx(p,{"data-testid":"jkl-card","data-clickable":l,"data-padding":c,className:r.clsx("jkl-card",`jkl-card--${d}`,s),...u,ref:i})});exports.Card=i;
2
2
  //# sourceMappingURL=Card.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Card.cjs","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\nimport type { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { CardProps } from \"./types.js\";\n\ntype CardComponent = <ElementType extends React.ElementType = \"div\">(\n props: CardProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n\n/**\n * En allsidig kortkomponent som brukes for å gruppere innhold på en side.\n * Komponenten rendres til vanlig som en `<div>`, men du kan velge å rendre\n * den som andre elementer eller komponenter der du trenger annen semantikk\n * eller funksjonalitet.\n */\nexport const Card = React.forwardRef(function Card<\n ElementType extends React.ElementType = \"div\",\n>(props: CardProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n className,\n clickable = false,\n padding = \"s\",\n variant = \"high\",\n asChild,\n as = \"div\",\n ...componentProps\n } = props;\n\n const Component = asChild ? SlotComponent : as;\n\n return (\n <Component\n data-testid=\"jkl-card\"\n data-clickable={clickable}\n data-padding={padding}\n className={clsx(\"jkl-card\", `jkl-card--${variant}`, className)}\n {...componentProps}\n ref={ref}\n />\n );\n}) as CardComponent;\n"],"names":["Card","React","forwardRef","props","ref","className","clickable","padding","variant","asChild","as","componentProps","Component","SlotComponent","jsx","clsx"],"mappings":"4OAiBaA,EAAOC,EAAMC,WAAW,SAEnCC,EAA+BC,GAC7B,MACIC,UAAAA,EACAC,UAAAA,GAAY,EACZC,QAAAA,EAAU,IACVC,QAAAA,EAAU,OACVC,QAAAA,EACAC,GAAAA,EAAK,SACFC,GACHR,EAEES,EAAYH,EAAUI,EAAAA,cAAgBH,EAE5C,OACII,EAAAA,IAACF,EAAA,CACG,cAAY,WACZ,iBAAgBN,EAChB,eAAcC,EACdF,UAAWU,EAAAA,KAAK,WAAY,aAAaP,IAAWH,MAChDM,EACJP,IAAAA,GAGZ"}
1
+ {"version":3,"file":"Card.cjs","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\nimport type { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { CardProps } from \"./types.js\";\n\ntype CardComponent = <ElementType extends React.ElementType = \"div\">(\n props: CardProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n\n/**\n * En allsidig kortkomponent som brukes for å gruppere innhold på en side.\n * Komponenten rendres til vanlig som en `<div>`, men du kan velge å rendre\n * den som andre elementer eller komponenter der du trenger annen semantikk\n * eller funksjonalitet.\n */\nexport const Card = React.forwardRef(function Card<\n ElementType extends React.ElementType = \"div\",\n>(props: CardProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n className,\n clickable = false,\n padding = \"s\",\n variant = \"filled\",\n asChild,\n as = \"div\",\n ...componentProps\n } = props;\n\n const Component = asChild ? SlotComponent : as;\n\n return (\n <Component\n data-testid=\"jkl-card\"\n data-clickable={clickable}\n data-padding={padding}\n className={clsx(\"jkl-card\", `jkl-card--${variant}`, className)}\n {...componentProps}\n ref={ref}\n />\n );\n}) as CardComponent;\n"],"names":["Card","React","forwardRef","props","ref","className","clickable","padding","variant","asChild","as","componentProps","Component","SlotComponent","jsx","clsx"],"mappings":"4OAiBaA,EAAOC,EAAMC,WAAW,SAEnCC,EAA+BC,GAC7B,MACIC,UAAAA,EACAC,UAAAA,GAAY,EACZC,QAAAA,EAAU,IACVC,QAAAA,EAAU,SACVC,QAAAA,EACAC,GAAAA,EAAK,SACFC,GACHR,EAEES,EAAYH,EAAUI,EAAAA,cAAgBH,EAE5C,OACII,EAAAA,IAACF,EAAA,CACG,cAAY,WACZ,iBAAgBN,EAChB,eAAcC,EACdF,UAAWU,EAAAA,KAAK,WAAY,aAAaP,IAAWH,MAChDM,EACJP,IAAAA,GAGZ"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.CARD_PADDINGS=["s","m","l","xl"],exports.CARD_VARIANTS=["outlined","high","low"];
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.CARD_PADDINGS=["s","m","l","xl"],exports.CARD_VARIANTS=["outlined","filled"];
2
2
  //# sourceMappingURL=types.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.cjs","sources":["../../../../src/components/card/types.ts"],"sourcesContent":["import type { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport const CARD_PADDINGS = [\"s\", \"m\", \"l\", \"xl\"] as const;\nexport type CardPadding = (typeof CARD_PADDINGS)[number];\nexport const CARD_VARIANTS = [\"outlined\", \"high\", \"low\"] as const;\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\n\ntype Props = {\n className?: string;\n /**\n * Setter padding på kortet. Tilsvarer samme property i Figma.\n * @default \"s\"\n */\n padding?: CardPadding;\n /**\n * Angir hvilken kortvariant du vil bruke. Velg en variant som gir god kontrast\n * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.\n * @default \"high\"\n */\n variant?: CardVariant;\n /**\n * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre\n * kortet som et klikkbart element (f.eks. `<a>` eller en `<Link>` fra\n * et ruting-bibliotek) og gi det en `href` eller `onClick`-handler.\n * HUSK: Sett aria-label for at støtteverktøy, som skjermlesere, ikke\n * skal lese alt innholdet i kortet.\n */\n clickable?: boolean;\n};\n\nexport type CardProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<ElementType, Props> & Props;\n"],"names":[],"mappings":"sGAE6B,CAAC,IAAK,IAAK,IAAK,4BAEhB,CAAC,WAAY,OAAQ"}
1
+ {"version":3,"file":"types.cjs","sources":["../../../../src/components/card/types.ts"],"sourcesContent":["import type { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport const CARD_PADDINGS = [\"s\", \"m\", \"l\", \"xl\"] as const;\nexport type CardPadding = (typeof CARD_PADDINGS)[number];\nexport const CARD_VARIANTS = [\"outlined\", \"filled\"] as const;\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\n\ntype Props = {\n className?: string;\n /**\n * Setter padding på kortet. Tilsvarer samme property i Figma.\n * @default \"s\"\n */\n padding?: CardPadding;\n /**\n * Angir hvilken kortvariant du vil bruke. Velg en variant som gir god kontrast\n * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.\n * @default \"filled\"\n */\n variant?: CardVariant;\n /**\n * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre\n * kortet som et klikkbart element (f.eks. `<a>` eller en `<Link>` fra\n * et ruting-bibliotek) og gi det en `href` eller `onClick`-handler.\n * HUSK: Sett aria-label for at støtteverktøy, som skjermlesere, ikke\n * skal lese alt innholdet i kortet.\n */\n clickable?: boolean;\n};\n\nexport type CardProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<ElementType, Props> & Props;\n"],"names":[],"mappings":"sGAE6B,CAAC,IAAK,IAAK,IAAK,4BAEhB,CAAC,WAAY"}
@@ -1,7 +1,7 @@
1
1
  import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs';
2
2
  export declare const CARD_PADDINGS: readonly ["s", "m", "l", "xl"];
3
3
  export type CardPadding = (typeof CARD_PADDINGS)[number];
4
- export declare const CARD_VARIANTS: readonly ["outlined", "high", "low"];
4
+ export declare const CARD_VARIANTS: readonly ["outlined", "filled"];
5
5
  export type CardVariant = (typeof CARD_VARIANTS)[number];
6
6
  type Props = {
7
7
  className?: string;
@@ -13,7 +13,7 @@ type Props = {
13
13
  /**
14
14
  * Angir hvilken kortvariant du vil bruke. Velg en variant som gir god kontrast
15
15
  * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.
16
- * @default "high"
16
+ * @default "filled"
17
17
  */
18
18
  variant?: CardVariant;
19
19
  /**
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),r=require("../../hooks/useId/useId.cjs"),a=t.forwardRef((a,i)=>{const{id:n,children:s,invalid:l,className:o,inline:d=!1,"data-testautoid":u,checked:k,indeterminate:h,...x}=a,b=t.useRef(null);t.useImperativeHandle(i,()=>b.current,[]);const j=r.useId(n||"jkl-checkbox",{generateSuffix:!n});return t.useEffect(()=>{!0===k&&!0===h&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),b.current&&(b.current.indeterminate=!k&&!!h)},[k,h]),e.jsxs("div",{className:c.clsx("jkl-checkbox",o,{"jkl-checkbox--inline":d,"jkl-checkbox--error":l}),children:[e.jsx("label",{htmlFor:j,className:"jkl-checkbox__label",children:s}),e.jsx("input",{id:j,ref:b,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":l,type:"checkbox","data-testautoid":u,checked:k,...x})]})});a.displayName="Checkbox",exports.Checkbox=a;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),r=require("../../hooks/useId/useId.cjs"),a=t.forwardRef((a,i)=>{const{id:n,children:s,invalid:l,className:o,inline:d=!1,"data-testautoid":u,checked:k,indeterminate:h,...x}=a,b=t.useRef(null);t.useImperativeHandle(i,()=>b.current,[]);const j=r.useId(n||"jkl-checkbox",{generateSuffix:!n});return t.useEffect(()=>{!0===k&&!0===h&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),b.current&&(b.current.indeterminate=!k&&!!h)},[k,h]),e.jsxs("div",{className:c.clsx("jkl-checkbox",o,{"jkl-checkbox--inline":d,"jkl-checkbox--error":l}),children:[e.jsx("input",{id:j,ref:b,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":l,type:"checkbox","data-testautoid":u,checked:k,...x}),e.jsx("label",{htmlFor:j,className:"jkl-checkbox__label",children:s})]})});a.displayName="Checkbox",exports.Checkbox=a;
2
2
  //# sourceMappingURL=Checkbox.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { CheckboxProps } from \"./types.js\";\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n id,\n children,\n invalid,\n className,\n inline = false,\n \"data-testautoid\": testAutoId,\n checked,\n indeterminate,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n [],\n );\n\n const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n useEffect(() => {\n if (\n checked === true &&\n indeterminate === true &&\n process.env.NODE_ENV !== \"production\"\n ) {\n console.warn(\n \"A Checkbox can not be both checked and indeterminate, and will be treated as checked\",\n );\n }\n if (inputRef.current) {\n inputRef.current.indeterminate = !checked && !!indeterminate;\n }\n }, [checked, indeterminate]);\n\n return (\n <div\n className={clsx(\"jkl-checkbox\", className, {\n \"jkl-checkbox--inline\": inline,\n \"jkl-checkbox--error\": invalid,\n })}\n >\n <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n {children}\n </label>\n <input\n id={inputId}\n ref={inputRef}\n className=\"jkl-checkbox__input\"\n data-testid=\"jkl-checkbox-input\"\n aria-invalid={invalid}\n type=\"checkbox\"\n data-testautoid={testAutoId}\n checked={checked}\n {...rest}\n />\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","htmlFor","type","displayName"],"mappings":"yNAKaA,EAAWC,EAAAA,WACpB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACT,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAAA,OAAyB,MAC1CC,EAAAA,oBACIZ,EACA,IAAMU,EAASG,QACf,IAGJ,MAAMC,EAAUC,EAAAA,MAAMd,GAAM,eAAgB,CAAEe,gBAAiBf,IAE/DgB,OAAAA,EAAAA,UAAU,MAEU,IAAZV,IACkB,IAAlBC,GACyB,eAAzBU,QAAQC,IAAIC,UAEZC,QAAQC,KACJ,wFAGJZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,IAEpD,CAACD,EAASC,IAGTe,EAAAA,KAAC,MAAA,CACGnB,UAAWoB,EAAAA,KAAK,eAAgBpB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAG3BD,SAAA,CAAAuB,EAAAA,IAAC,QAAA,CAAMC,QAASZ,EAASV,UAAU,sBAC9BF,SAAAA,IAELuB,EAAAA,IAAC,QAAA,CACGxB,GAAIa,EACJd,IAAKU,EACLN,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACdwB,KAAK,WACL,kBAAiBrB,EACjBC,QAAAA,KACIE,SAOxBZ,EAAS+B,YAAc"}
1
+ {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { CheckboxProps } from \"./types.js\";\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n id,\n children,\n invalid,\n className,\n inline = false,\n \"data-testautoid\": testAutoId,\n checked,\n indeterminate,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n [],\n );\n\n const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n useEffect(() => {\n if (\n checked === true &&\n indeterminate === true &&\n process.env.NODE_ENV !== \"production\"\n ) {\n console.warn(\n \"A Checkbox can not be both checked and indeterminate, and will be treated as checked\",\n );\n }\n if (inputRef.current) {\n inputRef.current.indeterminate = !checked && !!indeterminate;\n }\n }, [checked, indeterminate]);\n\n return (\n <div\n className={clsx(\"jkl-checkbox\", className, {\n \"jkl-checkbox--inline\": inline,\n \"jkl-checkbox--error\": invalid,\n })}\n >\n <input\n id={inputId}\n ref={inputRef}\n className=\"jkl-checkbox__input\"\n data-testid=\"jkl-checkbox-input\"\n aria-invalid={invalid}\n type=\"checkbox\"\n data-testautoid={testAutoId}\n checked={checked}\n {...rest}\n />\n <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n {children}\n </label>\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"yNAKaA,EAAWC,EAAAA,WACpB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACT,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAAA,OAAyB,MAC1CC,EAAAA,oBACIZ,EACA,IAAMU,EAASG,QACf,IAGJ,MAAMC,EAAUC,EAAAA,MAAMd,GAAM,eAAgB,CAAEe,gBAAiBf,IAE/DgB,OAAAA,EAAAA,UAAU,MAEU,IAAZV,IACkB,IAAlBC,GACyB,eAAzBU,QAAQC,IAAIC,UAEZC,QAAQC,KACJ,wFAGJZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,IAEpD,CAACD,EAASC,IAGTe,EAAAA,KAAC,MAAA,CACGnB,UAAWoB,EAAAA,KAAK,eAAgBpB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAG3BD,SAAA,CAAAuB,EAAAA,IAAC,QAAA,CACGxB,GAAIa,EACJd,IAAKU,EACLN,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACduB,KAAK,WACL,kBAAiBpB,EACjBC,QAAAA,KACIE,UAEP,QAAA,CAAMkB,QAASb,EAASV,UAAU,sBAC9BF,SAAAA,SAOrBL,EAAS+B,YAAc"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),o=require("react-dom"),t=require("../button/Button.cjs"),r=require("../flex/Flex.cjs"),i=require("../link/Link.cjs"),s=require("../modal/Modal.cjs"),a=require("../modal/useModal.cjs"),l=require("./CookieConsentContext.cjs"),d=require("./cookieConsentUtils.cjs");exports.CookieConsent=({blocking:c,onAccept:u,aboutPage:k="https://www.fremtind.no/informasjonskapsler",...j})=>{const{currentConsent:m,cookieName:h,cookieDomain:f,cookiePath:p,isOpen:g,setIsOpen:x,updateCurrentConsents:b}=l.useInternalState(),[v,C]=a.useModal({id:`jkl-cookie-modal-${n.useId()}`,role:c?"alertdialog":"dialog",title:"Informasjonskapsler"});if(n.useEffect(()=>{g?v?.show():v?.hide()},[v,g]),n.useEffect(()=>{const e=()=>x(!1);return v?.on("hide",e),()=>{v?.off("hide",e)}},[v,x]),typeof document>"u")return null;if(typeof navigator<"u"&&!navigator.cookieEnabled)return u?.({functional:"denied",statistics:"denied",marketing:"denied"}),null;const y=e=>{const n={...m,functional:e,statistics:e,marketing:"denied"};d.setConsentCookie({consent:n,name:h,domain:f,path:p}),u?.(n),b(),v?.hide()};return o.createPortal(e.jsxs(s.ModalContainer,{...C.container,...j,"data-cookie-consent-open":g,children:[e.jsx(s.ModalOverlay,{...C.overlay}),e.jsxs(s.Modal,{...C.modal,children:[e.jsx(s.ModalHeader,{children:e.jsx(s.ModalTitle,{...C.title,children:"Får vi bruke valgfrie informasjonskapsler?"})}),e.jsx(s.ModalBody,{children:e.jsxs(r.Flex,{direction:"column",gap:"m",children:[e.jsx("p",{children:"Vi ønsker å samle anonym statistikk for å forstå hvordan nettsidene våre brukes. Det hjelper oss til å gjøre innhold og løsninger bedre og mer brukervennlige."}),e.jsxs("p",{children:[e.jsx(i.Link,{href:k,target:"_blank",children:"Les mer om hvilke informasjonskapsler vi lagrer her"}),"."]})]})}),e.jsxs(s.ModalActions,{children:[e.jsx(t.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-godta",type:"button",onClick:()=>y("accepted"),children:"Ja, det er greit"}),e.jsx(t.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-nekt",type:"button",onClick:()=>y("denied"),children:"Nei takk"})]})]})]}),document.body)};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("react-dom"),o=require("../button/Button.cjs"),r=require("../flex/Flex.cjs"),i=require("../link/Link.cjs"),s=require("../modal/Modal.cjs"),a=require("../modal/useModal.cjs"),l=require("./CookieConsentContext.cjs"),d=require("./cookieConsentUtils.cjs");exports.CookieConsent=({blocking:c,onAccept:u,aboutPage:k="https://www.fremtind.no/informasjonskapsler",aboutPageLinkText:j="Les mer om hvilke informasjons­kapsler vi lagrer her",...m})=>{const{currentConsent:h,cookieName:f,cookieDomain:p,cookiePath:g,isOpen:x,setIsOpen:b,updateCurrentConsents:v}=l.useInternalState(),[C,y]=a.useModal({id:`jkl-cookie-modal-${n.useId()}`,role:c?"alertdialog":"dialog",title:"Informasjonskapsler"});if(n.useEffect(()=>{x?C?.show():C?.hide()},[C,x]),n.useEffect(()=>{const e=()=>b(!1);return C?.on("hide",e),()=>{C?.off("hide",e)}},[C,b]),typeof document>"u")return null;if(typeof navigator<"u"&&!navigator.cookieEnabled)return u?.({functional:"denied",statistics:"denied",marketing:"denied"}),null;const M=e=>{const n={...h,functional:e,statistics:e,marketing:"denied"};d.setConsentCookie({consent:n,name:f,domain:p,path:g}),u?.(n),v(),C?.hide()};return t.createPortal(e.jsxs(s.ModalContainer,{...y.container,...m,"data-cookie-consent-open":x,children:[e.jsx(s.ModalOverlay,{...y.overlay}),e.jsxs(s.Modal,{...y.modal,children:[e.jsx(s.ModalHeader,{children:e.jsx(s.ModalTitle,{...y.title,children:"Får vi bruke valgfrie informasjons­kapsler?"})}),e.jsx(s.ModalBody,{children:e.jsxs(r.Flex,{direction:"column",gap:"m",children:[e.jsx("p",{children:"Fremtind ønsker å samle anonym statistikk for å forstå hvordan nettsidene våre brukes. Det hjelper oss til å gjøre innhold og løsninger bedre og mer brukervennlige."}),e.jsxs("p",{children:[e.jsx(i.Link,{href:k,target:"_blank",children:j}),"."]})]})}),e.jsxs(s.ModalActions,{children:[e.jsx(o.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-godta",type:"button",onClick:()=>M("accepted"),children:"Ja, det er greit"}),e.jsx(o.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-nekt",type:"button",onClick:()=>M("denied"),children:"Nei takk"})]})]})]}),document.body)};
2
2
  //# sourceMappingURL=CookieConsent.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"CookieConsent.cjs","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport { setConsentCookie } from \"./cookieConsentUtils.js\";\nimport type { Consent, ConsentState, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n onAccept?.({\n functional: \"denied\",\n statistics: \"denied\",\n marketing: \"denied\",\n });\n\n return null;\n }\n\n const updateCookies = (state: ConsentState) => {\n const updatedConsent: Consent = {\n ...currentConsent,\n functional: state,\n statistics: state,\n marketing: \"denied\",\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n onAccept?.(updatedConsent);\n\n updateCurrentConsents();\n\n instance?.hide();\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal {...modalConfig.modal}>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjonskapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap=\"m\">\n <p>\n Vi ønsker å samle anonym statistikk for å forstå\n hvordan nettsidene våre brukes. Det hjelper oss til\n å gjøre innhold og løsninger bedre og mer\n brukervennlige.\n </p>\n <p>\n <Link href={aboutPage} target=\"_blank\">\n Les mer om hvilke informasjonskapsler vi lagrer\n her\n </Link>\n .\n </p>\n </Flex>\n </ModalBody>\n <ModalActions>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta\"\n type=\"button\"\n onClick={() => updateCookies(\"accepted\")}\n >\n Ja, det er greit\n </Button>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-nekt\"\n type=\"button\"\n onClick={() => updateCookies(\"denied\")}\n >\n Nei takk\n </Button>\n </ModalActions>\n </Modal>\n </ModalContainer>,\n document.body,\n );\n};\n"],"names":["blocking","onAccept","aboutPage","rest","currentConsent","cookieName","cookieDomain","cookiePath","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","marketing","updateCookies","state","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","modal","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"oaAmB6B,EACzBA,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,iDACTC,MAEH,MACIC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,sBAEGC,EAAUC,GAAeC,WAAS,CACrCC,GAAI,oBAAoBC,EAAAA,UAIxBC,KAAMjB,EAAW,cAAgB,SAGjCkB,MAAO,wBAkBX,GAhBAC,EAAAA,UAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,QAEf,CAACT,EAAUJ,IAEdW,EAAAA,UAAU,KACN,MAAMG,EAAS,IAAMb,GAAU,GAC/B,OAAAG,GAAUW,GAAG,OAAQD,GACd,KACHV,GAAUY,IAAI,OAAQF,KAE3B,CAACV,EAAUH,WAEHgB,SAAa,IACpB,OAAO,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAA1B,IAAW,CACP2B,WAAY,SACZC,WAAY,SACZC,UAAW,WAGR,KAGX,MAAMC,EAAiBC,IACnB,MAAMC,EAA0B,IACzB7B,EACHwB,WAAYI,EACZH,WAAYG,EACZF,UAAW,UAGfI,mBAAiB,CACbC,QAASF,EACTG,KAAM/B,EACNgC,OAAQ/B,EACRgC,KAAM/B,IAGVN,IAAWgC,GAEXvB,IAEAE,GAAUS,QAGd,OAAOkB,EAASC,aACZC,EAAAA,KAACC,EAAAA,eAAA,IACO7B,EAAY8B,aACZxC,EACJ,2BAA0BK,EAE1BoC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,IAAiBjC,EAAYkC,UAC9BN,EAAAA,KAACO,EAAAA,MAAA,IAAUnC,EAAYoC,MACnBL,SAAA,CAAAC,EAAAA,IAACK,EAAAA,aACGN,SAAAC,EAAAA,IAACM,EAAAA,WAAA,IAAetC,EAAYK,MAAO0B,gEAItCQ,EAAAA,UAAA,CACGR,SAAAH,OAACY,EAAAA,MAAKC,UAAU,SAASC,IAAI,IACzBX,SAAA,CAAAC,EAAAA,IAAC,KAAED,SAAA,0KAMF,IAAA,CACGA,SAAA,CAAAC,MAACW,EAAAA,KAAA,CAAKC,KAAMvD,EAAWwD,OAAO,SAASd,SAAA,wDAGhC,mBAKlBe,EAAAA,aAAA,CACGf,SAAA,CAAAC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,YAChCa,SAAA,qBAGDC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,0BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,UAChCa,SAAA,sBAMbnB,SAASuC"}
1
+ {"version":3,"file":"CookieConsent.cjs","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport { setConsentCookie } from \"./cookieConsentUtils.js\";\nimport type { Consent, ConsentState, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n aboutPageLinkText = \"Les mer om hvilke informasjons­kapsler vi lagrer her\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n onAccept?.({\n functional: \"denied\",\n statistics: \"denied\",\n marketing: \"denied\",\n });\n\n return null;\n }\n\n const updateCookies = (state: ConsentState) => {\n const updatedConsent: Consent = {\n ...currentConsent,\n functional: state,\n statistics: state,\n marketing: \"denied\",\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n onAccept?.(updatedConsent);\n\n updateCurrentConsents();\n\n instance?.hide();\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal {...modalConfig.modal}>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjons&shy;kapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap=\"m\">\n <p>\n Fremtind ønsker å samle anonym statistikk for å\n forstå hvordan nettsidene våre brukes. Det hjelper\n oss til å gjøre innhold og løsninger bedre og mer\n brukervennlige.\n </p>\n <p>\n <Link href={aboutPage} target=\"_blank\">\n {aboutPageLinkText}\n </Link>\n .\n </p>\n </Flex>\n </ModalBody>\n <ModalActions>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta\"\n type=\"button\"\n onClick={() => updateCookies(\"accepted\")}\n >\n Ja, det er greit\n </Button>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-nekt\"\n type=\"button\"\n onClick={() => updateCookies(\"denied\")}\n >\n Nei takk\n </Button>\n </ModalActions>\n </Modal>\n </ModalContainer>,\n document.body,\n );\n};\n"],"names":["blocking","onAccept","aboutPage","aboutPageLinkText","rest","currentConsent","cookieName","cookieDomain","cookiePath","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","marketing","updateCookies","state","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","modal","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"oaAmB6B,EACzBA,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,8CACZC,kBAAAA,EAAoB,0DACjBC,MAEH,MACIC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,sBAEGC,EAAUC,GAAeC,WAAS,CACrCC,GAAI,oBAAoBC,EAAAA,UAIxBC,KAAMlB,EAAW,cAAgB,SAGjCmB,MAAO,wBAkBX,GAhBAC,EAAAA,UAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,QAEf,CAACT,EAAUJ,IAEdW,EAAAA,UAAU,KACN,MAAMG,EAAS,IAAMb,GAAU,GAC/B,OAAAG,GAAUW,GAAG,OAAQD,GACd,KACHV,GAAUY,IAAI,OAAQF,KAE3B,CAACV,EAAUH,WAEHgB,SAAa,IACpB,OAAO,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAA3B,IAAW,CACP4B,WAAY,SACZC,WAAY,SACZC,UAAW,WAGR,KAGX,MAAMC,EAAiBC,IACnB,MAAMC,EAA0B,IACzB7B,EACHwB,WAAYI,EACZH,WAAYG,EACZF,UAAW,UAGfI,mBAAiB,CACbC,QAASF,EACTG,KAAM/B,EACNgC,OAAQ/B,EACRgC,KAAM/B,IAGVP,IAAWiC,GAEXvB,IAEAE,GAAUS,QAGd,OAAOkB,EAASC,aACZC,EAAAA,KAACC,EAAAA,eAAA,IACO7B,EAAY8B,aACZxC,EACJ,2BAA0BK,EAE1BoC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,IAAiBjC,EAAYkC,UAC9BN,EAAAA,KAACO,EAAAA,MAAA,IAAUnC,EAAYoC,MACnBL,SAAA,CAAAC,EAAAA,IAACK,EAAAA,aACGN,SAAAC,EAAAA,IAACM,EAAAA,WAAA,IAAetC,EAAYK,MAAO0B,iEAItCQ,EAAAA,UAAA,CACGR,SAAAH,OAACY,EAAAA,MAAKC,UAAU,SAASC,IAAI,IACzBX,SAAA,CAAAC,EAAAA,IAAC,KAAED,SAAA,gLAMF,IAAA,CACGA,SAAA,CAAAC,MAACW,EAAAA,KAAA,CAAKC,KAAMxD,EAAWyD,OAAO,SACzBd,SAAA1C,IACE,mBAKlByD,EAAAA,aAAA,CACGf,SAAA,CAAAC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,YAChCa,SAAA,qBAGDC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,0BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,UAChCa,SAAA,sBAMbnB,SAASuC"}
@@ -1,2 +1,2 @@
1
1
  import { CookieConsentProps } from './types.cjs';
2
- export declare const CookieConsent: ({ blocking, onAccept, aboutPage, ...rest }: CookieConsentProps) => JSX.Element | null;
2
+ export declare const CookieConsent: ({ blocking, onAccept, aboutPage, aboutPageLinkText, ...rest }: CookieConsentProps) => JSX.Element | null;
@@ -13,6 +13,10 @@ export interface CookieConsentProps {
13
13
  * Lenke til informasjonssiden til cookiene i løsningen din.
14
14
  */
15
15
  aboutPage: string;
16
+ /**
17
+ * Tekst for lenken til informasjonssiden.
18
+ */
19
+ aboutPageLinkText?: string;
16
20
  }
17
21
  export type AcceptConsentCallback = (consent: Consent) => void;
18
22
  export type ConsentComponentBaseProps = {
@@ -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"),a=require("../../../utils-DxmZDrR9.cjs"),r=require("react"),n=require("react-dom"),l=require("../icon-button/IconButton.cjs"),o=require("../icon/icons/CalendarIcon.cjs"),u=require("../input-group/InputGroup.cjs"),s=require("../popover/Popover.cjs"),i=require("../text-input/BaseTextInput.cjs"),c=require("./internal/Calendar.cjs"),d=require("./utils.cjs"),p=require("./validation.cjs"),v=r.forwardRef((v,b)=>{const{"data-testautoid":f,id:k,className:h="",label:j="Velg dato",labelProps:m,defaultValue:g,defaultShow:D=!1,value:y,disableBeforeDate:C,disableAfterDate:x,yearsToShow:L,name:P,helpLabel:S,errorLabel:q,invalid:w,days:I,months:O,monthLabel:B,yearLabel:T,placeholder:_="dd.mm.åååå",width:E="11.25rem",onChange:N,onBlur:R,onFocus:U,onKeyDown:V,action:F,showCalendarLabel:K="Åpne kalender",hideCalendarLabel:W="Lukk kalender",supportLabelProps:A,tooltip:G,textInputProps:M,description:H,...z}=v;"production"!==process.env.NODE_ENV&&y&&g&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const J=d.parseDateString(C),Q=J?a.dayjs(J).startOf("day").toDate():void 0,X=d.parseDateString(x),Y=X?a.dayjs(X).startOf("day").toDate():void 0,[Z,$]=r.useState(a.getInitialDate(y,g,Q,Y)),[ee,te]=r.useState(null),[ae,re]=r.useState(D),ne=r.useRef(null),le=r.useRef(null),oe=r.useRef(null),ue=r.useRef(null),se=r.useCallback(e=>{ue.current=e,b&&("function"==typeof b?b(e):b.current=e)},[b]),ie=r.useCallback(e=>{U&&le.current&&(le.current.contains(e.relatedTarget)||U(e,Z,{error:ee,value:e.target.value}))},[U,Z,ee]),ce=r.useCallback(e=>{R&&R(e,Z,{error:ee,value:e.target.value})},[R,Z,ee]),de=r.useCallback(e=>{"Escape"===e.key&&(re(!1),e.preventDefault(),e.stopPropagation()),F?.onKeyDown&&F.onKeyDown(e)},[F]),pe=r.useCallback(e=>{let t=null,a=null;if(e.target.value){const r=d.parseDateString(e.target.value);r?Q&&!p.isWithinLowerBound(r,Q)?a="OUTSIDE_LOWER_BOUND":Y&&!p.isWithinUpperBound(r,Y)?a="OUTSIDE_UPPER_BOUND":re(!1):a="WRONG_FORMAT",t=r||null}te(a),$(t),N&&N(e,t,{error:a,value:e.target.value})},[N,Q,Y]),ve=r.useCallback(e=>{n.flushSync(()=>{re(!ae)});const t=ne.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame(()=>a?.focus()),F?.onClick&&F.onClick(e)},[ae,F]),be=r.useCallback(({date:e})=>{if(re(!1),$(e),ue.current){const t=ue.current;t.value=d.formatInput(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),N&&N(a,e,{error:null,value:t.value})}},[N]),fe=r.useCallback(e=>{e.preventDefault(),re(!1),oe.current?.focus()},[]);return e.jsx(u.InputGroup,{id:k,className:t.clsx("jkl-datepicker",h),...z,ref:le,label:j,labelProps:m,helpLabel:S,errorLabel:q,supportLabelProps:A,tooltip:G,description:H,render:t=>e.jsx(i.BaseTextInput,{"data-focused":ae?"true":void 0,ref:se,"data-testid":"jkl-datepicker__input","data-testautoid":f,className:"jkl-datepicker__input",name:P,defaultValue:g,value:y,type:"text",placeholder:_,width:E,onFocus:ie,onBlur:ce,onChange:pe,actionButton:e.jsxs(s.Popover,{positionReference:ue,open:ae,onOpenChange:()=>re(!ae),offset:8,children:[e.jsx(s.Popover.Trigger,{...F,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ae?W:K,tabIndex:0,onClick:ve,onKeyDown:de,asChild:!0,children:e.jsx(l.IconButton,{children:e.jsx(o.CalendarIcon,{})})}),e.jsx(s.Popover.Content,{initialFocus:-1,padding:24,children:e.jsx(c.Calendar,{ref:ne,date:Z,minDate:Q,maxDate:Y,days:I,months:O,monthLabel:B,yearLabel:T,yearsToShow:L,onDateSelected:be,onTabOutside:fe})})]}),...M,...t,"aria-invalid":w||!!q})})});v.displayName="DatePicker",exports.DatePicker=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("../../../utils-DxmZDrR9.cjs"),a=require("react"),n=require("react-dom"),o=require("../../utilities/formatters/date/formatDate.cjs"),l=require("../icon-button/IconButton.cjs"),u=require("../icon/icons/CalendarIcon.cjs"),s=require("../input-group/InputGroup.cjs"),i=require("../popover/Popover.cjs"),c=require("../text-input/BaseTextInput.cjs"),d=require("./internal/Calendar.cjs"),p=require("./utils.cjs"),f=require("./validation.cjs"),v=a.forwardRef((v,D)=>{const{"data-testautoid":m,id:b,className:g="",label:j="Velg dato",labelProps:k,defaultValue:h,defaultShow:y=!1,value:x,disableBeforeDate:C,disableAfterDate:S,yearsToShow:L,name:P,helpLabel:q,errorLabel:w,invalid:I,days:O,months:T,monthLabel:B,yearLabel:E,placeholder:_="dd.mm.åååå",width:R="11.25rem",onChange:N,onBlur:U,onFocus:V,onKeyDown:F,action:K,showCalendarLabel:M="Åpne kalender",hideCalendarLabel:W="Lukk kalender",supportLabelProps:A,tooltip:G,textInputProps:H,description:$,...z}=v;"production"!==process.env.NODE_ENV&&x&&h&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const J=p.parseDateString(C),Q=J?r.dayjs(J).startOf("day").toDate():void 0,X=p.parseDateString(S),Y=X?r.dayjs(X).startOf("day").toDate():void 0,[Z,ee]=a.useState(r.getInitialDate(x,h,Q,Y)),[te,re]=a.useState(null),[ae,ne]=a.useState(y),oe=a.useRef(null),le=a.useRef(null),ue=a.useRef(null),se=a.useRef(null),ie=a.useRef(!1),ce=a.useCallback(e=>{se.current=e,D&&("function"==typeof D?D(e):D.current=e)},[D]),de=a.useCallback(e=>{V&&le.current&&(le.current.contains(e.relatedTarget)||V(e,Z,{error:te,value:e.target.value}))},[V,Z,te]),pe=a.useCallback(e=>{U&&U(e,Z,{error:te,value:e.target.value})},[U,Z,te]),fe=a.useCallback(e=>{"Escape"===e.key&&(ne(!1),e.preventDefault(),e.stopPropagation()),K?.onKeyDown&&K.onKeyDown(e)},[K]),ve=a.useCallback(e=>{const t=e.currentTarget.value,r=((e,t)=>{const r=e.replace(/\D/g,""),a=o.formatDateString(r,{partial:!0}),n=e.replace(/\D+$/,""),l=8===r.length?o.formatDateString(r):e,u=p.parseDateString(l)?l:null,s=t&&e!==r&&n===a&&void 0===p.parseDateString(e)&&null===u;return u??(s?r:e)})(t,ie.current);r!==t&&((e,t)=>{const r=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value")?.set;r?r.call(e,t):e.value=t})(e.currentTarget,r);const a=t.replace(/\D/g,"");ie.current=t===a&&r===o.formatDateString(a)&&r!==t&&void 0!==p.parseDateString(r);const{date:n,error:l}=(({value:e,minDate:t,maxDate:r})=>{if(!e)return{date:null,error:null};const a=p.parseDateString(e);return a?t&&!f.isWithinLowerBound(a,t)?{date:a,error:"OUTSIDE_LOWER_BOUND"}:r&&!f.isWithinUpperBound(a,r)?{date:a,error:"OUTSIDE_UPPER_BOUND"}:{date:a,error:null}:{date:null,error:"WRONG_FORMAT"}})({value:r,minDate:Q,maxDate:Y});n&&!l&&ne(!1),re(l),ee(n),N&&N(e,n,{error:l,value:r})},[N,Q,Y]),De=a.useCallback(e=>{n.flushSync(()=>{ne(!ae)});const t=oe.current,r=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame(()=>r?.focus()),K?.onClick&&K.onClick(e)},[ae,K]),me=a.useCallback(({date:e})=>{if(ne(!1),ee(e),se.current){const t=se.current;ie.current=!1,t.value=p.formatInput(e);const r=document.createEvent("HTMLEvents");r.initEvent("input",!0,!1),t.dispatchEvent(r),t.focus(),N&&N(r,e,{error:null,value:t.value})}},[N]),be=a.useCallback(e=>{e.preventDefault(),ne(!1),ue.current?.focus()},[]);return e.jsx(s.InputGroup,{id:b,className:t.clsx("jkl-datepicker",g),...z,ref:le,label:j,labelProps:k,helpLabel:q,errorLabel:w,supportLabelProps:A,tooltip:G,description:$,render:t=>e.jsx(c.BaseTextInput,{"data-focused":ae?"true":void 0,ref:ce,"data-testid":"jkl-datepicker__input","data-testautoid":m,className:"jkl-datepicker__input",name:P,defaultValue:h,value:x,type:"text",placeholder:_,width:R,onFocus:de,onBlur:pe,onChange:ve,actionButton:e.jsxs(i.Popover,{positionReference:se,open:ae,onOpenChange:()=>ne(!ae),offset:8,children:[e.jsx(i.Popover.Trigger,{...K,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ae?W:M,tabIndex:0,onClick:De,onKeyDown:fe,asChild:!0,children:e.jsx(l.IconButton,{children:e.jsx(u.CalendarIcon,{})})}),e.jsx(i.Popover.Content,{initialFocus:-1,padding:24,children:e.jsx(d.Calendar,{ref:oe,date:Z,minDate:Q,maxDate:Y,days:O,months:T,monthLabel:B,yearLabel:E,yearsToShow:L,onDateSelected:me,onTabOutside:be})})]}),...H,...t,"aria-invalid":I||!!w})})});v.displayName="DatePicker",exports.DatePicker=v;
2
2
  //# sourceMappingURL=DatePicker.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport React, {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n textInputProps,\n description,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? dayjs(disableBeforeDate).startOf(\"day\").toDate()\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? dayjs(disableAfterDate).startOf(\"day\").toDate()\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError | null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement | null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus || !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n let nextDate: Date | null = null;\n let nextError: DateValidationError | null = null;\n\n if (e.target.value) {\n const val = parseDateString(e.target.value);\n if (!val) {\n nextError = \"WRONG_FORMAT\";\n } else if (minDate && !isWithinLowerBound(val, minDate)) {\n nextError = \"OUTSIDE_LOWER_BOUND\";\n } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n nextError = \"OUTSIDE_UPPER_BOUND\";\n } else {\n setShowCalendar(false);\n }\n nextDate = val || null;\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: e.target.value,\n });\n }\n },\n [onChange, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button?.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [showCalendar, action],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [onChange],\n );\n\n const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current?.focus();\n }, []);\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className)}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n description={description}\n render={(inputProps) => (\n <BaseTextInput\n data-focused={showCalendar ? \"true\" : undefined}\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...textInputProps}\n {...inputProps}\n aria-invalid={invalid || !!errorLabel}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","description","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","dayjs","startOf","toDate","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"+hBAwBaA,EAAaC,EAAAA,WACtB,CAACC,EAAOC,KACJ,MACI,kBAAmBC,EACnBC,GAAAA,EACAC,UAAAA,EAAY,GACZC,MAAAA,EAAQ,YACRC,WAAAA,EACAC,aAAAA,EACAC,YAAAA,GAAc,EACdC,MAAAA,EACAC,kBAAmBC,EACnBC,iBAAkBC,EAClBC,YAAAA,EACAC,KAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,YAAAA,EAAc,aACdC,MAAAA,EAAQ,WACRC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,kBAAAA,EAAoB,gBACpBC,kBAAAA,EAAoB,gBACpBC,kBAAAA,EACAC,QAAAA,EACAC,eAAAA,EACAC,YAAAA,KACGC,GACHpC,EAEyB,eAAzBqC,QAAQC,IAAIC,UAA6B9B,GAASF,GAClDiC,QAAQC,KACJ,sIAKR,MAAM/B,EAAoBgC,EAAAA,gBAAgB/B,GACpCgC,EAAUjC,EACVkC,EAAAA,MAAMlC,GAAmBmC,QAAQ,OAAOC,cACxC,EACAlC,EAAmB8B,EAAAA,gBAAgB7B,GACnCkC,EAAUnC,EACVgC,EAAAA,MAAMhC,GAAkBiC,QAAQ,OAAOC,cACvC,GAECE,EAAMC,GAAWC,EAAAA,SACpBC,EAAAA,eAAe1C,EAAOF,EAAcoC,EAASI,KAE1CK,GAAOC,IAAYH,EAAAA,SAAqC,OAIxDI,GAAcC,IAAmBL,EAAAA,SAAS1C,GAE3CgD,GAAcC,EAAAA,OAAuB,MACrCC,GAAgBD,EAAAA,OAAuB,MAIvCE,GAAgBF,EAAAA,OAAiC,MACjDG,GAAWH,EAAAA,OAAgC,MAG3CI,GAAkBC,EAAAA,YACnBC,IACGH,GAASI,QAAUD,EACf9D,IACiC,mBAAtBA,EACPA,EAAkB8D,GAElB9D,EAAkB+D,QAAUD,IAIxC,CAAC9D,IAGCgE,GAAcH,EAAAA,YACfI,IACQvC,GAAY+B,GAAcM,UAILN,GAAcM,QAAQG,SAC5CD,EAAEE,gBAGFzC,EAAQuC,EAAGlB,EAAM,CAAEI,MAAAA,GAAO3C,MAAOyD,EAAEG,OAAO5D,UAGlD,CAACkB,EAASqB,EAAMI,KAGdkB,GAAaR,EAAAA,YACdI,IACOxC,GACAA,EAAOwC,EAAGlB,EAAM,CAAEI,MAAAA,GAAO3C,MAAOyD,EAAEG,OAAO5D,SAGjD,CAACiB,EAAQsB,EAAMI,KAGbmB,GAAsBT,EAAAA,YACvBI,IACiB,WAAVA,EAAEM,MACFjB,IAAgB,GAChBW,EAAEO,iBACFP,EAAEQ,mBAGF7C,GAAQD,WACRC,EAAOD,UAAUsC,IAGzB,CAACrC,IAGC8C,GAAeb,EAAAA,YAChBI,IACG,IAAIU,EAAwB,KACxBC,EAAwC,KAE5C,GAAIX,EAAEG,OAAO5D,MAAO,CAChB,MAAMqE,EAAMpC,EAAAA,gBAAgBwB,EAAEG,OAAO5D,OAChCqE,EAEMnC,IAAYoC,EAAAA,mBAAmBD,EAAKnC,GAC3CkC,EAAY,sBACL9B,IAAYiC,EAAAA,mBAAmBF,EAAK/B,GAC3C8B,EAAY,sBAEZtB,IAAgB,GANhBsB,EAAY,eAQhBD,EAAWE,GAAO,IACtB,CAEAzB,GAASwB,GACT5B,EAAQ2B,GAEJnD,GACAA,EAASyC,EAAGU,EAAU,CAClBxB,MAAOyB,EACPpE,MAAOyD,EAAEG,OAAO5D,SAI5B,CAACgB,EAAUkB,EAASI,IAKlBkC,GAAgBnB,EAAAA,YACjBI,IACGgB,EAAAA,UAAU,KACN3B,IAAiBD,MAGrB,MAAM6B,EAAa3B,GAAYQ,QACzBoB,EACFD,GACCA,EAAWE,cACR,yBAIRC,OAAOC,sBAAsB,IAAMH,GAAQI,SAEvC3D,GAAQ4D,SACR5D,EAAO4D,QAAQvB,IAGvB,CAACZ,GAAczB,IAGb6D,GAAyB5B,EAAAA,YAC3B,EAAGd,KAAAA,MAIC,GAHAO,IAAgB,GAChBN,EAAQD,GAEJY,GAASI,QAAS,CAClB,MAAM2B,EAAO/B,GAASI,QAEtB2B,EAAKlF,MAAQmF,EAAAA,YAAY5C,GAGzB,MAAM6C,EAAQC,SAASC,YAAY,cACnCF,EAAMG,UAAU,SAAS,GAAM,GAC/BL,EAAKM,cAAcJ,GAEnBF,EAAKH,QAED/D,GAIAA,EACIoE,EACA7C,EACA,CACII,MAAO,KACP3C,MAAOkF,EAAKlF,OAI5B,GAEJ,CAACgB,IAGCyE,GAA2BpC,cAAaI,IAC1CA,EAAEO,iBACFlB,IAAgB,GAChBI,GAAcK,SAASwB,SACxB,IAEH,OACIW,EAAAA,IAACC,EAAAA,WAAA,CACGjG,GAAAA,EACAC,UAAWiG,EAAAA,KAAK,iBAAkBjG,MAC9BgC,EACJkE,IAAK5C,GACLrD,MAAAA,EACAC,WAAAA,EACAU,UAAAA,EACAC,WAAAA,EACAe,kBAAAA,EACAC,QAAAA,EACAE,YAAAA,EACAoE,OAASC,GACLL,EAAAA,IAACM,EAAAA,cAAA,CACG,eAAcnD,GAAe,YAAS,EACtCgD,IAAKzC,GACL,cAAY,wBACZ,kBAAiB3D,EACjBE,UAAU,wBACVW,KAAAA,EACAR,aAAAA,EACAE,MAAAA,EACAiG,KAAK,OACLnF,YAAAA,EACAC,MAAAA,EACAG,QAASsC,GACTvC,OAAQ4C,GACR7C,SAAUkD,GACVgC,aACIC,EAAAA,KAACC,EAAAA,QAAA,CACGC,kBAAmBlD,GACnBmD,KAAMzD,GACN0D,aAAc,IACVzD,IAAiBD,IAErB2D,OAAQ,EAERC,SAAA,CAAAf,EAAAA,IAACU,EAAAA,QAAQM,QAAR,IACOtF,EACJ,cAAY,0BACZzB,UAAU,+BACVgH,MACI9D,GACMvB,EACAD,EAEVuF,SAAU,EACV5B,QAASR,GACTrD,UAAW2C,GACX+C,SAAO,EAEPJ,SAAAf,EAAAA,IAACoB,aAAA,CACGL,SAAAf,MAACqB,EAAAA,aAAA,CAAA,aAGRX,EAAAA,QAAQY,QAAR,CAAgBC,cAAc,EAAIC,QAAS,GACxCT,SAAAf,EAAAA,IAACyB,EAAAA,SAAA,CACGtB,IAAK9C,GACLR,KAAAA,EACAL,QAAAA,EACAI,QAAAA,EACA5B,KAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAR,YAAAA,EACA+G,eAAgBnC,GAChBoC,aAAc5B,aAK1BhE,KACAsE,EACJ,eAActF,KAAaD,QAQnDnB,EAAWiI,YAAc"}
1
+ {"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport React, {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { formatDateString } from \"../../utilities/formatters/date/formatDate.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nconst setInputValue = (input: HTMLInputElement, value: string) => {\n const nativeSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n \"value\",\n )?.set;\n\n if (nativeSetter) {\n nativeSetter.call(input, value);\n } else {\n input.value = value;\n }\n};\n\nconst normalizeInputValue = (\n rawValue: string,\n shouldStripAutoFormatting: boolean,\n) => {\n const digits = rawValue.replace(/\\D/g, \"\");\n const partialCompactDate = formatDateString(digits, {\n partial: true,\n });\n const rawValueWithoutTrailingPunctuation = rawValue.replace(/\\D+$/, \"\");\n const compactDateCandidate =\n digits.length === 8 ? formatDateString(digits) : rawValue;\n const validCompactDate = parseDateString(compactDateCandidate)\n ? compactDateCandidate\n : null;\n const shouldRemoveFormatting =\n shouldStripAutoFormatting &&\n rawValue !== digits &&\n rawValueWithoutTrailingPunctuation === partialCompactDate &&\n parseDateString(rawValue) === undefined &&\n validCompactDate === null;\n\n return validCompactDate ?? (shouldRemoveFormatting ? digits : rawValue);\n};\n\nconst getInputValidationState = ({\n value,\n minDate,\n maxDate,\n}: {\n value: string;\n minDate?: Date;\n maxDate?: Date;\n}): { date: Date | null; error: DateValidationError | null } => {\n if (!value) {\n return { date: null, error: null };\n }\n\n const parsedDate = parseDateString(value);\n\n if (!parsedDate) {\n return { date: null, error: \"WRONG_FORMAT\" };\n }\n\n if (minDate && !isWithinLowerBound(parsedDate, minDate)) {\n return { date: parsedDate, error: \"OUTSIDE_LOWER_BOUND\" };\n }\n\n if (maxDate && !isWithinUpperBound(parsedDate, maxDate)) {\n return { date: parsedDate, error: \"OUTSIDE_UPPER_BOUND\" };\n }\n\n return { date: parsedDate, error: null };\n};\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n textInputProps,\n description,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? dayjs(disableBeforeDate).startOf(\"day\").toDate()\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? dayjs(disableAfterDate).startOf(\"day\").toDate()\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError | null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const didAutoFormatCompactInputRef = useRef(false);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement | null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus || !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const rawValue = e.currentTarget.value;\n const formattedValue = normalizeInputValue(\n rawValue,\n didAutoFormatCompactInputRef.current,\n );\n\n if (formattedValue !== rawValue) {\n setInputValue(e.currentTarget, formattedValue);\n }\n\n const digits = rawValue.replace(/\\D/g, \"\");\n didAutoFormatCompactInputRef.current =\n rawValue === digits &&\n formattedValue === formatDateString(digits) &&\n formattedValue !== rawValue &&\n parseDateString(formattedValue) !== undefined;\n\n const { date: nextDate, error: nextError } =\n getInputValidationState({\n value: formattedValue,\n minDate,\n maxDate,\n });\n\n if (nextDate && !nextError) {\n setShowCalendar(false);\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: formattedValue,\n });\n }\n },\n [onChange, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button?.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [showCalendar, action],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n didAutoFormatCompactInputRef.current = false;\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [onChange],\n );\n\n const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current?.focus();\n }, []);\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className)}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n description={description}\n render={(inputProps) => (\n <BaseTextInput\n data-focused={showCalendar ? \"true\" : undefined}\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...textInputProps}\n {...inputProps}\n aria-invalid={invalid || !!errorLabel}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","description","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","dayjs","startOf","toDate","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","didAutoFormatCompactInputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","rawValue","currentTarget","formattedValue","shouldStripAutoFormatting","digits","replace","partialCompactDate","formatDateString","partial","rawValueWithoutTrailingPunctuation","compactDateCandidate","length","validCompactDate","shouldRemoveFormatting","normalizeInputValue","input","nativeSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","setInputValue","nextDate","nextError","parsedDate","isWithinLowerBound","isWithinUpperBound","getInputValidationState","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"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"),t=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),a=require("./ExpandablePanelContent.cjs"),r=require("./context.cjs"),s=require("./Expander.cjs"),i=Object.assign(n.forwardRef(function(a,s){const{children:i,as:l="details",variant:o="fill",open:d,defaultOpen:c,onOpenChange:u,className:p,...x}=a,[j,f]=n.useState(c||!1),[b,g]=n.useState(!1),[v,E]=n.useState(0),h=n.useRef();n.useImperativeHandle(s,()=>h.current,[]);const m=l,S=typeof d<"u",q=S?d:j;return n.useEffect(()=>{const e=e=>{f("open"===e.newState)},t=h.current;return t?.addEventListener("toggle",e),()=>t?.removeEventListener("toggle",e)},[]),e.jsxs("div",{className:"jkl-expandable__wrapper",children:[e.jsx("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable__focus-container",style:{height:v}}),e.jsx(m,{ref:h,"data-testid":"jkl-expand-section",className:t.clsx("jkl-expandable",`jkl-expandable--${o}`,p),open:"details"===l?q||b:void 0,"data-visible-content":q||b,...x,children:e.jsx(r.ExpanderContext.Provider,{value:{open:q,onToggle:()=>{S||f(e=>(u?.(!e),!e))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)},setExpanderHeight:E},children:i})})]})}),{Content:a.ExpandablePanelContent,Header:s.Expander});exports.ExpandablePanel=i;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),a=require("./ExpandablePanelContent.cjs"),r=require("./Expander.cjs"),s=require("./context.cjs"),i=Object.assign(n.forwardRef(function(a,r){const{children:i,as:l="details",variant:o="fill",open:d,defaultOpen:c,onOpenChange:u,className:p,...x}=a,[j,f]=n.useState(c||!1),[b,g]=n.useState(!1),[v,E]=n.useState(0),h=n.useRef();n.useImperativeHandle(r,()=>h.current,[]);const m=l,S=typeof d<"u",q=S?d:j;return n.useEffect(()=>{const e=e=>{f("open"===e.newState)},t=h.current;return t?.addEventListener("toggle",e),()=>t?.removeEventListener("toggle",e)},[]),e.jsxs("div",{className:"jkl-expandable__wrapper",children:[e.jsx("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable__focus-container",style:{height:v}}),e.jsx(m,{ref:h,"data-testid":"jkl-expand-section",className:t.clsx("jkl-expandable",`jkl-expandable--${o}`,p),open:"details"===l?q||b:void 0,"data-visible-content":q||b,...x,children:e.jsx(s.ExpanderContext.Provider,{value:{open:q,onToggle:()=>{S?u?.(!q):f(e=>(u?.(!e),!e))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)},setExpanderHeight:E},children:i})})]})}),{Content:a.ExpandablePanelContent,Header:r.Expander});exports.ExpandablePanel=i;
2
2
  //# sourceMappingURL=ExpandablePanel.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\nimport { Expander } from \"./Expander.jsx\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n variant = \"fill\",\n open: controlledOpen,\n defaultOpen,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(\n defaultOpen || false,\n );\n const [contentIsVisible, setContentIsVisible] = useState(false);\n const [expanderHeight, setExpanderHeight] = useState(0);\n\n const internalRef = useRef<HTMLDetailsElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const El = as;\n const isControlled = typeof controlledOpen !== \"undefined\";\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const setVisibleIfOpening = (isOpening: boolean) => {\n if (isOpening) {\n setContentIsVisible(true);\n }\n };\n\n const syncUncontrolledState = () => {\n if (isControlled) {\n return;\n }\n setUncontrolledOpen((previousValue) => {\n onOpenChange?.(!previousValue);\n return !previousValue;\n });\n };\n\n useEffect(() => {\n const callback = (e: ToggleEvent & { newState: string }) => {\n setUncontrolledOpen(e.newState === \"open\");\n };\n\n const element = internalRef.current;\n\n element?.addEventListener(\"toggle\", callback as EventListener);\n\n return () =>\n element?.removeEventListener(\n \"toggle\",\n callback as EventListener,\n );\n }, []);\n\n return (\n <div className=\"jkl-expandable__wrapper\">\n <div\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n className=\"jkl-expandable__focus-container\"\n style={{ height: expanderHeight }}\n />\n <El\n ref={internalRef}\n data-testid={\"jkl-expand-section\"}\n className={clsx(\n \"jkl-expandable\",\n `jkl-expandable--${variant}`,\n className,\n )}\n open={\n /* for the animation to work in Safari we must ensure that\n * the element is open *before* the transition starts */\n as === \"details\"\n ? isOpen || contentIsVisible\n : undefined\n }\n /* this attribute is used for styling purposes */\n data-visible-content={isOpen || contentIsVisible}\n {...rest}\n >\n <ExpanderContext.Provider\n value={{\n open: isOpen,\n onToggle: syncUncontrolledState,\n onTransitionEnd: setContentIsVisible,\n onTransitionStart: setVisibleIfOpening,\n setExpanderHeight,\n }}\n >\n {children}\n </ExpanderContext.Provider>\n </El>\n </div>\n );\n }),\n { Content: ExpandablePanelContent, Header: Expander },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent","Header","Expander"],"mappings":"iRAWaA,EAAkBC,OAAOC,OAClCC,EAAMC,WAAW,SAGbC,EACAC,GAEA,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAAAA,SAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,EAAAA,UAAS,IAClDG,EAAgBC,GAAqBJ,EAAAA,SAAS,GAE/CK,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBnB,EAAK,IAAMiB,EAAYG,QAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/Cc,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAYC,IACdf,EAAmC,SAAfe,EAAEC,WAGpBC,EAAUX,EAAYG,QAE5B,OAAAQ,GAASC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,IAET,IAGCM,EAAAA,KAAC,MAAA,CAAIvB,UAAU,0BACXP,SAAA,CAAA+B,EAAAA,IAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAAAA,IAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EAAAA,KACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAAAA,IAACM,EAAAA,gBAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA7DU,KACtBnB,GAGJX,EAAqB+B,IACjBnC,KAAgBmC,IACRA,KAwDIC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,IAoERE,kBAAAA,GAGHf,SAAAA,QAKrB,GACA,CAAE6C,QAASC,yBAAwBC,OAAQC,EAAAA"}
1
+ {"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { Expander } from \"./Expander.jsx\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n variant = \"fill\",\n open: controlledOpen,\n defaultOpen,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(\n defaultOpen || false,\n );\n const [contentIsVisible, setContentIsVisible] = useState(false);\n const [expanderHeight, setExpanderHeight] = useState(0);\n\n const internalRef = useRef<HTMLDetailsElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const El = as;\n const isControlled = typeof controlledOpen !== \"undefined\";\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const setVisibleIfOpening = (isOpening: boolean) => {\n if (isOpening) {\n setContentIsVisible(true);\n }\n };\n\n const syncUncontrolledState = () => {\n if (isControlled) {\n onOpenChange?.(!isOpen);\n return;\n }\n setUncontrolledOpen((previousValue) => {\n onOpenChange?.(!previousValue);\n return !previousValue;\n });\n };\n\n useEffect(() => {\n const callback = (e: ToggleEvent & { newState: string }) => {\n setUncontrolledOpen(e.newState === \"open\");\n };\n\n const element = internalRef.current;\n\n element?.addEventListener(\"toggle\", callback as EventListener);\n\n return () =>\n element?.removeEventListener(\n \"toggle\",\n callback as EventListener,\n );\n }, []);\n\n return (\n <div className=\"jkl-expandable__wrapper\">\n <div\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n className=\"jkl-expandable__focus-container\"\n style={{ height: expanderHeight }}\n />\n <El\n ref={internalRef}\n data-testid={\"jkl-expand-section\"}\n className={clsx(\n \"jkl-expandable\",\n `jkl-expandable--${variant}`,\n className,\n )}\n open={\n /* for the animation to work in Safari we must ensure that\n * the element is open *before* the transition starts */\n as === \"details\"\n ? isOpen || contentIsVisible\n : undefined\n }\n /* this attribute is used for styling purposes */\n data-visible-content={isOpen || contentIsVisible}\n {...rest}\n >\n <ExpanderContext.Provider\n value={{\n open: isOpen,\n onToggle: syncUncontrolledState,\n onTransitionEnd: setContentIsVisible,\n onTransitionStart: setVisibleIfOpening,\n setExpanderHeight,\n }}\n >\n {children}\n </ExpanderContext.Provider>\n </El>\n </div>\n );\n }),\n { Content: ExpandablePanelContent, Header: Expander },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent","Header","Expander"],"mappings":"iRAWaA,EAAkBC,OAAOC,OAClCC,EAAMC,WAAW,SAGbC,EACAC,GAEA,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAAAA,SAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,EAAAA,UAAS,IAClDG,EAAgBC,GAAqBJ,EAAAA,SAAS,GAE/CK,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBnB,EAAK,IAAMiB,EAAYG,QAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAmB/Cc,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAYC,IACdf,EAAmC,SAAfe,EAAEC,WAGpBC,EAAUX,EAAYG,QAE5B,OAAAQ,GAASC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,IAET,IAGCM,EAAAA,KAAC,MAAA,CAAIvB,UAAU,0BACXP,SAAA,CAAA+B,EAAAA,IAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAAAA,IAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EAAAA,KACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAAAA,IAACM,EAAAA,gBAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA9DU,KACtBnB,EACAf,KAAgBgB,GAGpBZ,EAAqB+B,IACjBnC,KAAgBmC,IACRA,KAwDIC,gBAAiB7B,EACjB8B,kBAtESC,IACrBA,GACA/B,GAAoB,IAqERE,kBAAAA,GAGHf,SAAAA,QAKrB,GACA,CAAE6C,QAASC,yBAAwBC,OAAQC,EAAAA"}
@@ -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"),s=n.forwardRef(function(s,t){const{external:a=!1,className:i="",children:l,as:c="a",...d}=s,o="string"==typeof c&&"a"!==c?"a":c,k=n.useId();return e.jsxs(o,{ref:t,className:r.clsx("jkl-link",i,{"jkl-link--external":a}),"aria-describedby":a?k:void 0,...d,children:[e.jsx("span",{className:"jkl-link__content",children:l}),(a||"_blank"===d.target)&&e.jsx("span",{hidden:!0,id:k,children:"Ekstern lenke"})]})});exports.Link=s;
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"),s=n.forwardRef(function(s,l){const{external:t=!1,className:a="",children:i,as:c="a",...d}=s,o=c,k=n.useId();return e.jsxs(o,{ref:l,className:r.clsx("jkl-link",a,{"jkl-link--external":t}),"aria-describedby":t?k:void 0,...d,children:[e.jsx("span",{className:"jkl-link__content",children:i}),(t||"_blank"===d.target)&&e.jsx("span",{hidden:!0,id:k,children:"Ekstern lenke"})]})});exports.Link=s;
2
2
  //# sourceMappingURL=Link.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Link.cjs","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { LinkElementType, LinkProps } from \"./types.js\";\n\ntype LinkComponent = <ElementType extends LinkElementType = \"a\">(\n props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n ElementType extends LinkElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n external = false,\n className = \"\",\n children,\n as = \"a\",\n ...rest\n } = props;\n const Component = typeof as === \"string\" && as !== \"a\" ? \"a\" : as;\n\n const srId = useId();\n\n return (\n <Component\n ref={ref}\n className={clsx(\"jkl-link\", className, {\n \"jkl-link--external\": external,\n })}\n aria-describedby={external ? srId : undefined}\n {...rest}\n >\n <span className=\"jkl-link__content\">{children}</span>\n {(external || rest.target === \"_blank\") && (\n <span hidden={true} id={srId}>\n Ekstern lenke\n </span>\n )}\n </Component>\n );\n}) as LinkComponent;\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","target","hidden","id"],"mappings":"gLASaA,EAAOC,EAAMC,WAAW,SAEnCC,EAA+BC,GAC7B,MACIC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAA0B,iBAAPF,GAA0B,MAAPA,EAAa,IAAMA,EAEzDG,EAAOC,EAAAA,QAEb,OACIC,EAAAA,KAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAAA,KAAK,WAAYR,EAAW,CACnC,qBAAsBD,IAE1B,mBAAkBA,EAAWM,OAAO,KAChCF,EAEJF,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CAAKT,UAAU,oBAAqBC,SAAAA,KACnCF,GAA4B,WAAhBI,EAAKO,SACfD,EAAAA,IAAC,QAAKE,QAAQ,EAAMC,GAAIP,EAAMJ,SAAA,oBAM9C"}
1
+ {"version":3,"file":"Link.cjs","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { LinkProps } from \"./types.js\";\n\ntype LinkComponent = <ElementType extends React.ElementType = \"a\">(\n props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n external = false,\n className = \"\",\n children,\n as = \"a\",\n ...rest\n } = props;\n const Component = as;\n\n const srId = useId();\n\n return (\n <Component\n ref={ref}\n className={clsx(\"jkl-link\", className, {\n \"jkl-link--external\": external,\n })}\n aria-describedby={external ? srId : undefined}\n {...rest}\n >\n <span className=\"jkl-link__content\">{children}</span>\n {(external || rest.target === \"_blank\") && (\n <span hidden={true} id={srId}>\n Ekstern lenke\n </span>\n )}\n </Component>\n );\n}) as LinkComponent;\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","target","hidden","id"],"mappings":"gLASaA,EAAOC,EAAMC,WAAW,SAEnCC,EAA+BC,GAC7B,MACIC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAEZG,EAAOC,EAAAA,QAEb,OACIC,EAAAA,KAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAAA,KAAK,WAAYR,EAAW,CACnC,qBAAsBD,IAE1B,mBAAkBA,EAAWM,OAAO,KAChCF,EAEJF,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CAAKT,UAAU,oBAAqBC,SAAAA,KACnCF,GAA4B,WAAhBI,EAAKO,SACfD,EAAAA,IAAC,QAAKE,QAAQ,EAAMC,GAAIP,EAAMJ,SAAA,oBAM9C"}
@@ -1,5 +1,5 @@
1
1
  import { default as React } from 'react';
2
- import { LinkElementType, LinkProps } from './types.cjs';
3
- type LinkComponent = <ElementType extends LinkElementType = "a">(props: LinkProps<ElementType>) => React.ReactElement | null;
2
+ import { LinkProps } from './types.cjs';
3
+ type LinkComponent = <ElementType extends React.ElementType = "a">(props: LinkProps<ElementType>) => React.ReactElement | null;
4
4
  export declare const Link: LinkComponent;
5
5
  export {};
@@ -1,7 +1,4 @@
1
1
  import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs';
2
- type LinkComponentElementType = Exclude<React.ElementType, keyof React.JSX.IntrinsicElements>;
3
- export type LinkElementType = "a" | LinkComponentElementType;
4
- export type LinkProps<ElementType extends LinkElementType = "a"> = PolymorphicPropsWithRef<ElementType, {
2
+ export type LinkProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
5
3
  external?: boolean;
6
4
  }>;
7
- export {};
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),l=require("../icon-button/IconButton.cjs"),o=require("../icon/icons/CloseIcon.cjs"),r=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-container",s),...l,ref:o,"data-portal":!0}));r.displayName="ModalContainer";const d=s.forwardRef(({className:s,transparent:l,...o},r)=>a.jsx("div",{className:e.clsx("jkl-modal-overlay",s,{"jkl-modal-overlay--transparent":l}),...o,ref:r}));d.displayName="ModalOverlay";const t=s.forwardRef(({className:s,component:l,padding:o,style:r,...d},t)=>{const c=l||"div";return a.jsx(c,{className:e.clsx("jkl jkl-modal",s),style:{"--jkl-modal-padding":o?`var(--jkl-spacing-${o})`:void 0,...r},...d,ref:t})});t.displayName="Modal";const c=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-header",s),...l,ref:o}));c.displayName="ModalHeader";const n=s.forwardRef(({className:s,...l},o)=>a.jsx("p",{className:e.clsx("jkl-modal-title",s),...l,ref:o}));n.displayName="ModalTitle";const i=s.forwardRef(({className:s,...r},d)=>a.jsx(l.IconButton,{className:e.clsx("jkl-modal-close",s),"data-testautoid":"jkl-modal-close",...r,ref:d,children:a.jsx(o.CloseIcon,{variant:"medium"})}));i.displayName="ModalCloseButton";const m=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-body",s),...l,ref:o}));m.displayName="ModalBody";const x=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-actions",s),...l,ref:o}));x.displayName="ModalActions",exports.Modal=t,exports.ModalActions=x,exports.ModalBody=m,exports.ModalCloseButton=i,exports.ModalContainer=r,exports.ModalHeader=c,exports.ModalOverlay=d,exports.ModalTitle=n;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),s=require("../icon-button/IconButton.cjs"),o=require("../icon/icons/CloseIcon.cjs"),r=l.forwardRef(({className:l,placement:s="center",slideIn:o,...r},d)=>a.jsx("div",{className:e.clsx("jkl-modal-container",`jkl-modal-container--placement-${s}`,{"jkl-modal-container--slide-in":o},l),...r,ref:d,"data-portal":!0}));r.displayName="ModalContainer";const d=l.forwardRef(({className:l,transparent:s,...o},r)=>a.jsx("div",{className:e.clsx("jkl-modal-overlay",l,{"jkl-modal-overlay--transparent":s}),...o,ref:r}));d.displayName="ModalOverlay";const t=l.forwardRef(({className:l,component:s,padding:o,style:r,...d},t)=>{const c=s||"div";return a.jsx(c,{className:e.clsx("jkl jkl-modal",l),style:{"--modal-padding":o?`var(--jkl-spacing-${o})`:void 0,...r},...d,ref:t})});t.displayName="Modal";const c=l.forwardRef(({className:l,...s},o)=>a.jsx("div",{className:e.clsx("jkl-modal-header",l),...s,ref:o}));c.displayName="ModalHeader";const n=l.forwardRef(({className:l,...s},o)=>a.jsx("p",{className:e.clsx("jkl-modal-title",l),...s,ref:o}));n.displayName="ModalTitle";const i=l.forwardRef(({className:l,...r},d)=>a.jsx(s.IconButton,{className:e.clsx("jkl-modal-close",l),"data-testautoid":"jkl-modal-close",...r,ref:d,children:a.jsx(o.CloseIcon,{variant:"medium"})}));i.displayName="ModalCloseButton";const m=l.forwardRef(({className:l,...s},o)=>a.jsx("div",{className:e.clsx("jkl-modal-body",l),...s,ref:o}));m.displayName="ModalBody";const j=l.forwardRef(({className:l,...s},o)=>a.jsx("div",{className:e.clsx("jkl-modal-actions",l),...s,ref:o}));j.displayName="ModalActions",exports.Modal=t,exports.ModalActions=j,exports.ModalBody=m,exports.ModalCloseButton=i,exports.ModalContainer=r,exports.ModalHeader=c,exports.ModalOverlay=d,exports.ModalTitle=n;
2
2
  //# sourceMappingURL=Modal.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n BaseModalProps,\n ModalConfig,\n ModalOverlayProps,\n ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n HTMLDivElement,\n ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n return (\n <div\n className={clsx(\"jkl-modal-container\", className)}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n});\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component || \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--jkl-modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"oQAeaA,EAAiBC,EAAAA,WAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,KAIvBJ,EAAeO,YAAc,iBAKtB,MAAMC,EAAeP,EAAAA,WACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EAAAA,WACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MACvB,OACIN,EAAAA,IAACS,EAAA,CACGZ,UAAWI,EAAAA,KAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAcd,EAAAA,WACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,KAIZW,EAAYR,YAAc,cAKnB,MAAMS,EAAaf,EAAAA,WAGxB,EAAGC,UAAAA,KAAcC,GAAQC,UACtB,IAAA,CAAEF,UAAWI,EAAAA,KAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,KAEhEY,EAAWT,YAAc,aAKlB,MAAMU,EAAmBhB,EAAAA,WAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAAAA,IAACa,EAAAA,WAAA,CACGhB,UAAWI,EAAAA,KAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAe,SAAAd,EAAAA,IAACe,EAAAA,UAAA,CAAUC,QAAQ,cAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYrB,EAAAA,WACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,KAIZkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAetB,EAAAA,WACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,KAIZmB,EAAahB,YAAc"}
1
+ {"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n BaseModalProps,\n ModalConfig,\n ModalContainerProps,\n ModalOverlayProps,\n ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<HTMLDivElement, ModalContainerProps>(\n ({ className, placement = \"center\", slideIn, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n return (\n <div\n className={clsx(\n \"jkl-modal-container\",\n `jkl-modal-container--placement-${placement}`,\n { \"jkl-modal-container--slide-in\": slideIn },\n className,\n )}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n },\n);\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component || \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","placement","slideIn","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"oQAgBaA,EAAiBC,EAAAA,WAC1B,EAAGC,UAAAA,EAAWC,UAAAA,EAAY,SAAUC,QAAAA,KAAYC,GAAQC,IAGhDC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KACP,sBACA,kCAAkCL,IAClC,CAAE,gCAAiCC,GACnCF,MAEAG,EACJC,IAAAA,EACA,eAAW,KAK3BN,EAAeS,YAAc,iBAKtB,MAAMC,EAAeT,EAAAA,WACxB,EAAGC,UAAAA,EAAWS,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,oBAAqBN,EAAW,CAC5C,iCAAkCS,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQX,EAAAA,WACjB,EAAGC,UAAAA,EAAWW,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MACvB,OACIN,EAAAA,IAACS,EAAA,CACGd,UAAWM,EAAAA,KAAK,gBAAiBN,GACjCa,MACI,CACI,kBAAmBD,EACb,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAchB,EAAAA,WACvB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,mBAAoBN,MAChCG,EACJC,IAAAA,KAIZW,EAAYR,YAAc,cAKnB,MAAMS,EAAajB,EAAAA,WAGxB,EAAGC,UAAAA,KAAcG,GAAQC,UACtB,IAAA,CAAEJ,UAAWM,EAAAA,KAAK,kBAAmBN,MAAgBG,EAAMC,IAAAA,KAEhEY,EAAWT,YAAc,aAKlB,MAAMU,EAAmBlB,EAAAA,WAK9B,EAAGC,UAAAA,KAAcG,GAAQC,IACvBC,EAAAA,IAACa,EAAAA,WAAA,CACGlB,UAAWM,EAAAA,KAAK,kBAAmBN,GACnC,kBAAgB,qBACZG,EACJC,IAAAA,EAEAe,SAAAd,EAAAA,IAACe,EAAAA,UAAA,CAAUC,QAAQ,cAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYvB,EAAAA,WACrB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,iBAAkBN,MAC9BG,EACJC,IAAAA,KAIZkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAexB,EAAAA,WACxB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,oBAAqBN,MACjCG,EACJC,IAAAA,KAIZmB,EAAahB,YAAc"}
@@ -1,17 +1,10 @@
1
1
  import { default as React } from 'react';
2
2
  import { IconButtonProps } from '../icon-button/types.cjs';
3
- import { BaseModalProps, ModalProps } from './types.cjs';
3
+ import { BaseModalProps, ModalContainerProps, ModalProps } from './types.cjs';
4
4
  /**
5
5
  * Ment å brukes med `useModal`.
6
6
  */
7
- export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
8
- id: string;
9
- ref: (node: React.ReactNode | HTMLElement) => void;
10
- role: string;
11
- 'aria-modal': boolean;
12
- 'aria-hidden': boolean;
13
- 'aria-labelledby': string;
14
- } & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
+ export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<ModalContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
8
  /**
16
9
  * Ment å brukes med `useModal`.
17
10
  */
@@ -1,3 +1,3 @@
1
1
  export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal.cjs';
2
2
  export { useModal, type ModalInstance } from './useModal.cjs';
3
- export type { ModalProps, BaseModalProps, ModalOverlayProps, UseModalOptions, ModalConfig, } from './types.cjs';
3
+ export type { ModalProps, BaseModalProps, ModalContainerProps, ModalOverlayProps, UseModalOptions, ModalConfig, ModalPlacement, } from './types.cjs';
@@ -1,5 +1,6 @@
1
1
  import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
2
2
  import { WithOptionalChildren } from '../../utilities/types.cjs';
3
+ export type ModalPlacement = "center" | "left" | "bottom" | "right";
3
4
  export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
4
5
  id?: string;
5
6
  /**
@@ -34,9 +35,26 @@ export interface ModalProps extends WithOptionalChildren {
34
35
  padding?: 16 | 24 | 40;
35
36
  }
36
37
  export type BaseModalProps = Omit<ModalProps, "padding" | "component">;
38
+ export type ModalContainerProps = ModalConfig["container"] & BaseModalProps & {
39
+ /**
40
+ * Plassering og animasjon styres av containeren, siden det er den som
41
+ * håndterer viewport-layout og `aria-hidden`-tilstand.
42
+ *
43
+ * @default "center"
44
+ */
45
+ placement?: ModalPlacement;
46
+ /**
47
+ * Slå på enkel slide-in-animasjon når modalen vises.
48
+ *
49
+ * @default false
50
+ */
51
+ slideIn?: boolean;
52
+ };
37
53
  export type ModalOverlayProps = ModalConfig["overlay"] & BaseModalProps & {
38
54
  /**
39
55
  * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
56
+ *
57
+ * @default false
40
58
  */
41
59
  transparent?: boolean;
42
60
  };
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),i=s.createContext(null),l=()=>{const e=s.useContext(i);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:i=!0,offset:l=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,x=n??g,b=t.useFloating({open:h,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(l),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),j=b.context,v=t.useClick(j,{enabled:!1,...d}),O=t.useHover(j,{enabled:!1,...c}),P=t.useFocus(j,{enabled:!1,...u}),R=t.useDismiss(j,p),y=t.useRole(j,f),F=t.useInteractions([v,R,P,O,y]);return s.useLayoutEffect(()=>{a&&b.refs.setPositionReference(a?.current)},[a,b.refs]),s.useMemo(()=>({open:h,onOpenChange:x,modal:i,...F,...b}),[h,x,i,F,b])})({...o});return e.jsx(i.Provider,{value:r,children:n})},c=s.forwardRef(function({children:n,asChild:o=!1,...r},i){const{refs:a,getReferenceProps:c,open:u,onOpenChange:d}=l(),f=n.ref,p=t.useMergeRefs([a.setReference,i,f]);return o&&s.isValidElement(n)?s.cloneElement(n,c({ref:p,...r,...n.props})):e.jsx("button",{ref:p,onClick:()=>d?.(!u),"aria-expanded":u,...c(r),children:n})}),u=s.forwardRef(function({style:o,className:i,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:x,getFloatingProps:b}=l(),j=t.useMergeRefs([g.setFloating,f]),v=g.reference.current,{theme:O,size:P}=(y=v)&&"contextElement"in y?r.getThemeAndSize(v.contextElement):r.getThemeAndSize(v),R=s.useRef(null);var y;return s.useEffect(()=>{R.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:R.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":O,"data-size":P,className:n.clsx("jkl jkl-popover",i),ref:j,style:{...o,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...b(d),children:d.children})})}):null});a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),l=s.createContext(null),i=()=>{const e=s.useContext(l);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:l=!0,offset:i=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,x=n??g,b=t.useFloating({open:h,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(i),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),j=b.context,v=t.useClick(j,{enabled:!1,...d}),O=t.useHover(j,{enabled:!1,...c}),P=t.useFocus(j,{enabled:!1,...u}),R=t.useDismiss(j,p),k=t.useRole(j,f),y=t.useInteractions([v,R,P,O,k]);return s.useLayoutEffect(()=>{a&&b.refs.setPositionReference(a?.current)},[a,b.refs]),s.useMemo(()=>({open:h,onOpenChange:x,modal:l,...y,...b}),[h,x,l,y,b])})({...o});return e.jsx(l.Provider,{value:r,children:n})},c=s.forwardRef(function({children:o,asChild:r=!1,...l},a){const{refs:c,getReferenceProps:u,open:d,onOpenChange:f}=i(),p=o.ref,m=t.useMergeRefs([c.setReference,a,p]);return r&&s.isValidElement(o)?s.cloneElement(o,u({ref:m,...l,...o.props})):e.jsx("button",{ref:m,onClick:()=>f?.(!d),"aria-expanded":d,...u({...l,className:n.clsx("jkl-popover-trigger",l.className)}),children:o})}),u=s.forwardRef(function({style:o,className:l,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:x,getFloatingProps:b}=i(),j=t.useMergeRefs([g.setFloating,f]),v=g.reference.current,{theme:O,size:P}=(k=v)&&"contextElement"in k?r.getThemeAndSize(v.contextElement):r.getThemeAndSize(v),R=s.useRef(null);var k;return s.useEffect(()=>{R.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:R.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":O,"data-size":P,className:n.clsx("jkl jkl-popover",l),ref:j,style:{...o,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...b(d),children:d.children})})}):null});a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
2
2
  //# sourceMappingURL=Popover.cjs.map