@danske/sapphire-react-lab 0.105.1 → 0.106.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (214) hide show
  1. package/build/cjs/index.js +1528 -2227
  2. package/build/cjs/index.js.map +1 -1
  3. package/build/esm/Accordion/index.js.map +1 -1
  4. package/build/esm/Accordion/src/Accordion.js +41 -73
  5. package/build/esm/Accordion/src/Accordion.js.map +1 -1
  6. package/build/esm/Accordion/src/AccordionContext.js +3 -1
  7. package/build/esm/Accordion/src/AccordionContext.js.map +1 -1
  8. package/build/esm/Accordion/src/AccordionHeading.js +22 -54
  9. package/build/esm/Accordion/src/AccordionHeading.js.map +1 -1
  10. package/build/esm/Accordion/src/AccordionItem.js +15 -42
  11. package/build/esm/Accordion/src/AccordionItem.js.map +1 -1
  12. package/build/esm/Accordion/src/AccordionPanel.js +27 -44
  13. package/build/esm/Accordion/src/AccordionPanel.js.map +1 -1
  14. package/build/esm/Accordion/src/utils.js.map +1 -1
  15. package/build/esm/Alert/src/Alert.js +26 -64
  16. package/build/esm/Alert/src/Alert.js.map +1 -1
  17. package/build/esm/Amount/src/Amount.js +40 -62
  18. package/build/esm/Amount/src/Amount.js.map +1 -1
  19. package/build/esm/Amount/src/useGroupAmount.js +4 -1
  20. package/build/esm/Amount/src/useGroupAmount.js.map +1 -1
  21. package/build/esm/Autocomplete/i18n/da-DK.json.js +6 -0
  22. package/build/esm/Autocomplete/i18n/da-DK.json.js.map +1 -0
  23. package/build/esm/Autocomplete/i18n/de-DE.json.js +6 -0
  24. package/build/esm/Autocomplete/i18n/de-DE.json.js.map +1 -0
  25. package/build/esm/Autocomplete/i18n/en-US.json.js +6 -0
  26. package/build/esm/Autocomplete/i18n/en-US.json.js.map +1 -0
  27. package/build/esm/Autocomplete/i18n/fi-FI.json.js +6 -0
  28. package/build/esm/Autocomplete/i18n/fi-FI.json.js.map +1 -0
  29. package/build/esm/Autocomplete/i18n/index.js +9 -9
  30. package/build/esm/Autocomplete/i18n/index.js.map +1 -1
  31. package/build/esm/Autocomplete/i18n/nb-NO.json.js +6 -0
  32. package/build/esm/Autocomplete/i18n/nb-NO.json.js.map +1 -0
  33. package/build/esm/Autocomplete/i18n/pl-PL.json.js +6 -0
  34. package/build/esm/Autocomplete/i18n/pl-PL.json.js.map +1 -0
  35. package/build/esm/Autocomplete/i18n/sv-SE.json.js +6 -0
  36. package/build/esm/Autocomplete/i18n/sv-SE.json.js.map +1 -0
  37. package/build/esm/Autocomplete/src/Autocomplete.js +49 -74
  38. package/build/esm/Autocomplete/src/Autocomplete.js.map +1 -1
  39. package/build/esm/Breadcrumbs/src/BreadcrumbItem.js +44 -51
  40. package/build/esm/Breadcrumbs/src/BreadcrumbItem.js.map +1 -1
  41. package/build/esm/Breadcrumbs/src/BreadcrumbItemLink.js +18 -46
  42. package/build/esm/Breadcrumbs/src/BreadcrumbItemLink.js.map +1 -1
  43. package/build/esm/Breadcrumbs/src/BreadcrumbItemStatic.js +24 -45
  44. package/build/esm/Breadcrumbs/src/BreadcrumbItemStatic.js.map +1 -1
  45. package/build/esm/Breadcrumbs/src/BreadcrumbOverflowMenu.js +18 -11
  46. package/build/esm/Breadcrumbs/src/BreadcrumbOverflowMenu.js.map +1 -1
  47. package/build/esm/Breadcrumbs/src/Breadcrumbs.js +42 -61
  48. package/build/esm/Breadcrumbs/src/Breadcrumbs.js.map +1 -1
  49. package/build/esm/Breadcrumbs/src/BreadcrumbsSeparator.js +8 -6
  50. package/build/esm/Breadcrumbs/src/BreadcrumbsSeparator.js.map +1 -1
  51. package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js +5 -5
  52. package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js.map +1 -1
  53. package/build/esm/FileDropzone/i18n/{da-DK.js → da-DK.json.js} +3 -3
  54. package/build/esm/FileDropzone/i18n/da-DK.json.js.map +1 -0
  55. package/build/esm/FileDropzone/i18n/{de-DE.js → de-DE.json.js} +3 -3
  56. package/build/esm/FileDropzone/i18n/de-DE.json.js.map +1 -0
  57. package/build/esm/FileDropzone/i18n/{en-US.js → en-US.json.js} +3 -3
  58. package/build/esm/FileDropzone/i18n/en-US.json.js.map +1 -0
  59. package/build/esm/FileDropzone/i18n/{fi-FI.js → fi-FI.json.js} +3 -3
  60. package/build/esm/FileDropzone/i18n/fi-FI.json.js.map +1 -0
  61. package/build/esm/FileDropzone/i18n/index.js +9 -9
  62. package/build/esm/FileDropzone/i18n/index.js.map +1 -1
  63. package/build/esm/FileDropzone/i18n/{nb-NO.js → nb-NO.json.js} +3 -3
  64. package/build/esm/FileDropzone/i18n/nb-NO.json.js.map +1 -0
  65. package/build/esm/FileDropzone/i18n/{pl-PL.js → pl-PL.json.js} +3 -3
  66. package/build/esm/FileDropzone/i18n/pl-PL.json.js.map +1 -0
  67. package/build/esm/FileDropzone/i18n/{sv-SE.js → sv-SE.json.js} +3 -3
  68. package/build/esm/FileDropzone/i18n/sv-SE.json.js.map +1 -0
  69. package/build/esm/FileDropzone/src/FileDropzone.js +59 -84
  70. package/build/esm/FileDropzone/src/FileDropzone.js.map +1 -1
  71. package/build/esm/FileDropzone/src/FileTrigger.js +26 -59
  72. package/build/esm/FileDropzone/src/FileTrigger.js.map +1 -1
  73. package/build/esm/FileDropzone/src/utils.js.map +1 -1
  74. package/build/esm/Filtering/src/FilterDropdown.js +88 -110
  75. package/build/esm/Filtering/src/FilterDropdown.js.map +1 -1
  76. package/build/esm/Filtering/src/SearchableSelectFilter.js +38 -58
  77. package/build/esm/Filtering/src/SearchableSelectFilter.js.map +1 -1
  78. package/build/esm/Flag/src/Flag.js +5 -37
  79. package/build/esm/Flag/src/Flag.js.map +1 -1
  80. package/build/esm/LabeledValue/src/LabeledValue.js +19 -53
  81. package/build/esm/LabeledValue/src/LabeledValue.js.map +1 -1
  82. package/build/esm/NumberField/i18n/da-DK.json.js +9 -0
  83. package/build/esm/NumberField/i18n/da-DK.json.js.map +1 -0
  84. package/build/esm/NumberField/i18n/de-DE.json.js +9 -0
  85. package/build/esm/NumberField/i18n/de-DE.json.js.map +1 -0
  86. package/build/esm/NumberField/i18n/en-US.json.js +9 -0
  87. package/build/esm/NumberField/i18n/en-US.json.js.map +1 -0
  88. package/build/esm/NumberField/i18n/fi-FI.json.js +9 -0
  89. package/build/esm/NumberField/i18n/fi-FI.json.js.map +1 -0
  90. package/build/esm/NumberField/i18n/index.js +9 -9
  91. package/build/esm/NumberField/i18n/index.js.map +1 -1
  92. package/build/esm/NumberField/i18n/nb-NO.json.js +9 -0
  93. package/build/esm/NumberField/i18n/nb-NO.json.js.map +1 -0
  94. package/build/esm/NumberField/i18n/pl-PL.json.js +9 -0
  95. package/build/esm/NumberField/i18n/pl-PL.json.js.map +1 -0
  96. package/build/esm/NumberField/i18n/sv-SE.json.js +9 -0
  97. package/build/esm/NumberField/i18n/sv-SE.json.js.map +1 -0
  98. package/build/esm/NumberField/src/NumberField.js +125 -108
  99. package/build/esm/NumberField/src/NumberField.js.map +1 -1
  100. package/build/esm/NumberField/src/StepperButton.js +28 -50
  101. package/build/esm/NumberField/src/StepperButton.js.map +1 -1
  102. package/build/esm/NumberField/src/cursorHelpers.js +13 -8
  103. package/build/esm/NumberField/src/cursorHelpers.js.map +1 -1
  104. package/build/esm/NumberField/src/formatHelpers.js +15 -18
  105. package/build/esm/NumberField/src/formatHelpers.js.map +1 -1
  106. package/build/esm/NumberField/src/keyboardHelpers.js +13 -8
  107. package/build/esm/NumberField/src/keyboardHelpers.js.map +1 -1
  108. package/build/esm/NumberField/src/useAutofillStyle.js.map +1 -1
  109. package/build/esm/NumberField/src/useNumberFieldFormatting.js +79 -45
  110. package/build/esm/NumberField/src/useNumberFieldFormatting.js.map +1 -1
  111. package/build/esm/NumberField/src/useSapphireNumberField.js +13 -39
  112. package/build/esm/NumberField/src/useSapphireNumberField.js.map +1 -1
  113. package/build/esm/ProgressIndicator/src/ProgressIndicator.js +21 -33
  114. package/build/esm/ProgressIndicator/src/ProgressIndicator.js.map +1 -1
  115. package/build/esm/Sidebar/index.js.map +1 -1
  116. package/build/esm/Sidebar/src/Body.js +18 -43
  117. package/build/esm/Sidebar/src/Body.js.map +1 -1
  118. package/build/esm/Sidebar/src/ExpandableItem.js +86 -95
  119. package/build/esm/Sidebar/src/ExpandableItem.js.map +1 -1
  120. package/build/esm/Sidebar/src/Header.js +13 -43
  121. package/build/esm/Sidebar/src/Header.js.map +1 -1
  122. package/build/esm/Sidebar/src/Item.js +16 -43
  123. package/build/esm/Sidebar/src/Item.js.map +1 -1
  124. package/build/esm/Sidebar/src/List.js +13 -42
  125. package/build/esm/Sidebar/src/List.js.map +1 -1
  126. package/build/esm/Sidebar/src/Panel.js +56 -69
  127. package/build/esm/Sidebar/src/Panel.js.map +1 -1
  128. package/build/esm/Sidebar/src/ResponsiveSidebarContext.js +16 -8
  129. package/build/esm/Sidebar/src/ResponsiveSidebarContext.js.map +1 -1
  130. package/build/esm/Sidebar/src/SecondarySidebarContext.js +14 -11
  131. package/build/esm/Sidebar/src/SecondarySidebarContext.js.map +1 -1
  132. package/build/esm/Sidebar/src/Section.js +36 -49
  133. package/build/esm/Sidebar/src/Section.js.map +1 -1
  134. package/build/esm/Sidebar/src/Sidebar.js +62 -91
  135. package/build/esm/Sidebar/src/Sidebar.js.map +1 -1
  136. package/build/esm/Sidebar/src/useSidebar.js.map +1 -1
  137. package/build/esm/Slider/index.js.map +1 -1
  138. package/build/esm/Slider/src/Slider.js +46 -71
  139. package/build/esm/Slider/src/Slider.js.map +1 -1
  140. package/build/esm/TagGroup/src/Tag.js +66 -82
  141. package/build/esm/TagGroup/src/Tag.js.map +1 -1
  142. package/build/esm/TagGroup/src/TagGroup.js +44 -65
  143. package/build/esm/TagGroup/src/TagGroup.js.map +1 -1
  144. package/build/esm/TagGroup/src/TagItem.js.map +1 -1
  145. package/build/esm/TimeField/i18n/da-DK.json.js +7 -0
  146. package/build/esm/TimeField/i18n/da-DK.json.js.map +1 -0
  147. package/build/esm/TimeField/i18n/de-DE.json.js +7 -0
  148. package/build/esm/TimeField/i18n/de-DE.json.js.map +1 -0
  149. package/build/esm/TimeField/i18n/en-US.json.js +7 -0
  150. package/build/esm/TimeField/i18n/en-US.json.js.map +1 -0
  151. package/build/esm/TimeField/i18n/fi-FI.json.js +7 -0
  152. package/build/esm/TimeField/i18n/fi-FI.json.js.map +1 -0
  153. package/build/esm/TimeField/i18n/index.js +7 -7
  154. package/build/esm/TimeField/i18n/index.js.map +1 -1
  155. package/build/esm/TimeField/i18n/nb-NO.json.js +7 -0
  156. package/build/esm/TimeField/i18n/nb-NO.json.js.map +1 -0
  157. package/build/esm/TimeField/i18n/pl-PL.json.js +7 -0
  158. package/build/esm/TimeField/i18n/pl-PL.json.js.map +1 -0
  159. package/build/esm/TimeField/i18n/{sv-SE.js → sv-SE.json.js} +1 -1
  160. package/build/esm/TimeField/i18n/sv-SE.json.js.map +1 -0
  161. package/build/esm/TimeField/src/TimeField.js +62 -80
  162. package/build/esm/TimeField/src/TimeField.js.map +1 -1
  163. package/build/esm/TimeField/src/TimeFieldSegment.js +24 -36
  164. package/build/esm/TimeField/src/TimeFieldSegment.js.map +1 -1
  165. package/build/index.d.ts +13 -12
  166. package/package.json +6 -6
  167. package/build/esm/Autocomplete/i18n/da-DK.js +0 -6
  168. package/build/esm/Autocomplete/i18n/da-DK.js.map +0 -1
  169. package/build/esm/Autocomplete/i18n/de-DE.js +0 -6
  170. package/build/esm/Autocomplete/i18n/de-DE.js.map +0 -1
  171. package/build/esm/Autocomplete/i18n/en-US.js +0 -6
  172. package/build/esm/Autocomplete/i18n/en-US.js.map +0 -1
  173. package/build/esm/Autocomplete/i18n/fi-FI.js +0 -6
  174. package/build/esm/Autocomplete/i18n/fi-FI.js.map +0 -1
  175. package/build/esm/Autocomplete/i18n/nb-NO.js +0 -6
  176. package/build/esm/Autocomplete/i18n/nb-NO.js.map +0 -1
  177. package/build/esm/Autocomplete/i18n/pl-PL.js +0 -6
  178. package/build/esm/Autocomplete/i18n/pl-PL.js.map +0 -1
  179. package/build/esm/Autocomplete/i18n/sv-SE.js +0 -6
  180. package/build/esm/Autocomplete/i18n/sv-SE.js.map +0 -1
  181. package/build/esm/FileDropzone/i18n/da-DK.js.map +0 -1
  182. package/build/esm/FileDropzone/i18n/de-DE.js.map +0 -1
  183. package/build/esm/FileDropzone/i18n/en-US.js.map +0 -1
  184. package/build/esm/FileDropzone/i18n/fi-FI.js.map +0 -1
  185. package/build/esm/FileDropzone/i18n/nb-NO.js.map +0 -1
  186. package/build/esm/FileDropzone/i18n/pl-PL.js.map +0 -1
  187. package/build/esm/FileDropzone/i18n/sv-SE.js.map +0 -1
  188. package/build/esm/NumberField/i18n/da-DK.js +0 -9
  189. package/build/esm/NumberField/i18n/da-DK.js.map +0 -1
  190. package/build/esm/NumberField/i18n/de-DE.js +0 -9
  191. package/build/esm/NumberField/i18n/de-DE.js.map +0 -1
  192. package/build/esm/NumberField/i18n/en-US.js +0 -9
  193. package/build/esm/NumberField/i18n/en-US.js.map +0 -1
  194. package/build/esm/NumberField/i18n/fi-FI.js +0 -9
  195. package/build/esm/NumberField/i18n/fi-FI.js.map +0 -1
  196. package/build/esm/NumberField/i18n/nb-NO.js +0 -9
  197. package/build/esm/NumberField/i18n/nb-NO.js.map +0 -1
  198. package/build/esm/NumberField/i18n/pl-PL.js +0 -9
  199. package/build/esm/NumberField/i18n/pl-PL.js.map +0 -1
  200. package/build/esm/NumberField/i18n/sv-SE.js +0 -9
  201. package/build/esm/NumberField/i18n/sv-SE.js.map +0 -1
  202. package/build/esm/TimeField/i18n/da-DK.js +0 -7
  203. package/build/esm/TimeField/i18n/da-DK.js.map +0 -1
  204. package/build/esm/TimeField/i18n/de-DE.js +0 -7
  205. package/build/esm/TimeField/i18n/de-DE.js.map +0 -1
  206. package/build/esm/TimeField/i18n/en-US.js +0 -7
  207. package/build/esm/TimeField/i18n/en-US.js.map +0 -1
  208. package/build/esm/TimeField/i18n/fi-FI.js +0 -7
  209. package/build/esm/TimeField/i18n/fi-FI.js.map +0 -1
  210. package/build/esm/TimeField/i18n/nb-NO.js +0 -7
  211. package/build/esm/TimeField/i18n/nb-NO.js.map +0 -1
  212. package/build/esm/TimeField/i18n/pl-PL.js +0 -7
  213. package/build/esm/TimeField/i18n/pl-PL.js.map +0 -1
  214. package/build/esm/TimeField/i18n/sv-SE.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","sources":["../../../../src/Alert/src/Alert.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n SapphireStyleProps,\n useThemeCheck,\n useSapphireStyleProps,\n Typography,\n Icon,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n CheckmarkOutline,\n Information,\n Warning,\n Error,\n} from '@danske/sapphire-icons/react';\nimport alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';\nimport { clsx } from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport interface SapphireAlertProps\n extends GlobalDomAttributes,\n SapphireStyleProps {\n /**\n * The content of the alert.\n */\n children?: ReactNode;\n\n /**\n * The title of the alert.\n */\n title?: ReactNode;\n\n /**\n * @default 'info'\n */\n variant?: 'info' | 'positive' | 'negative' | 'warning';\n}\n\nexport function Alert({\n children,\n title,\n variant = 'info',\n ...props\n}: SapphireAlertProps): React.JSX.Element {\n useThemeCheck();\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(props);\n\n const getIcon = (variant: string) => {\n switch (variant) {\n case 'warning':\n return <Warning />;\n case 'positive':\n return <CheckmarkOutline />;\n case 'negative':\n return <Error />;\n default:\n return <Information />;\n }\n };\n\n return (\n <div\n {...filterDOMProps(props, { global: true })}\n className={clsx(\n alertStyles['sapphire-alert'],\n {\n [alertStyles['sapphire-alert--positive']]: variant === 'positive',\n [alertStyles['sapphire-alert--negative']]: variant === 'negative',\n [alertStyles['sapphire-alert--warning']]: variant === 'warning',\n },\n className\n )}\n style={style}\n role=\"alert\"\n >\n <span className={alertStyles['sapphire-alert__icon']}>\n <Icon size=\"sm\">{getIcon(variant)}</Icon>\n </span>\n <div className={alertStyles['sapphire-alert__title']}>\n <Typography.Body size=\"sm\" isSemibold>\n {title}\n </Typography.Body>\n </div>\n <div className={alertStyles['sapphire-alert__content']}>\n <Typography.Body elementType=\"section\" size=\"md\">\n {children}\n </Typography.Body>\n </div>\n </div>\n );\n}\n"],"names":["Error2"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,SAAA,KAAA,CAAe,EAKoB,EAAA;AALpB,EACpB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,GAHU,GAAA,EAAA,EAIjB,kBAJiB,EAIjB,EAAA;AAAA,IAHH,UAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE1B,EAAM,MAAA,OAAA,GAAU,CAAC,QAAoB,KAAA;AACnC,IAAQ,QAAA,QAAA;AAAA,MACD,KAAA,SAAA;AACH,QAAA,2CAAQ,OAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MACJ,KAAA,UAAA;AACH,QAAA,2CAAQ,gBAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MACJ,KAAA,UAAA;AACH,QAAA,2CAAQA,KAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MAAA;AAEP,QAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAIb,EAAA,2CACG,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eAAe,KAAO,EAAA,EAAE,QAAQ,IADtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,IACT,CAAA,WAAA,CAAY,gBACZ,CAAA,EAAA;AAAA,MACG,CAAA,WAAA,CAAY,8BAA8B,OAAY,KAAA,UAAA;AAAA,MACtD,CAAA,WAAA,CAAY,8BAA8B,OAAY,KAAA,UAAA;AAAA,MACtD,CAAA,WAAA,CAAY,6BAA6B,OAAY,KAAA,SAAA;AAAA,KAExD,EAAA,SAAA,CAAA;AAAA,IAEF,KAAA;AAAA,IACA,IAAK,EAAA,OAAA;AAAA,GAAA,CAAA,sCAEJ,MAAD,EAAA;AAAA,IAAM,WAAW,WAAY,CAAA,sBAAA,CAAA;AAAA,GAAA,sCAC1B,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GAAM,EAAA,OAAA,CAAQ,OAE3B,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,WAAY,CAAA,uBAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IAAiB,IAAK,EAAA,IAAA;AAAA,IAAK,UAAU,EAAA,IAAA;AAAA,GAClC,EAAA,KAAA,CAAA,CAAA,sCAGJ,KAAD,EAAA;AAAA,IAAK,WAAW,WAAY,CAAA,yBAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IAAiB,WAAY,EAAA,SAAA;AAAA,IAAU,IAAK,EAAA,IAAA;AAAA,GACzC,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"Alert.js","sources":["../../../../src/Alert/src/Alert.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n SapphireStyleProps,\n useThemeCheck,\n useSapphireStyleProps,\n Typography,\n Icon,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n CheckmarkOutline,\n Information,\n Warning,\n Error,\n} from '@danske/sapphire-icons/react';\nimport alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';\nimport { clsx } from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport interface SapphireAlertProps\n extends GlobalDomAttributes,\n SapphireStyleProps {\n /**\n * The content of the alert.\n */\n children?: ReactNode;\n\n /**\n * The title of the alert.\n */\n title?: ReactNode;\n\n /**\n * @default 'info'\n */\n variant?: 'info' | 'positive' | 'negative' | 'warning';\n}\n\nexport function Alert({\n children,\n title,\n variant = 'info',\n ...props\n}: SapphireAlertProps): React.JSX.Element {\n useThemeCheck();\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(props);\n\n const getIcon = (variant: string) => {\n switch (variant) {\n case 'warning':\n return <Warning />;\n case 'positive':\n return <CheckmarkOutline />;\n case 'negative':\n return <Error />;\n default:\n return <Information />;\n }\n };\n\n return (\n <div\n {...filterDOMProps(props, { global: true })}\n className={clsx(\n alertStyles['sapphire-alert'],\n {\n [alertStyles['sapphire-alert--positive']]: variant === 'positive',\n [alertStyles['sapphire-alert--negative']]: variant === 'negative',\n [alertStyles['sapphire-alert--warning']]: variant === 'warning',\n },\n className\n )}\n style={style}\n role=\"alert\"\n >\n <span className={alertStyles['sapphire-alert__icon']}>\n <Icon size=\"sm\">{getIcon(variant)}</Icon>\n </span>\n <div className={alertStyles['sapphire-alert__title']}>\n <Typography.Body size=\"sm\" isSemibold>\n {title}\n </Typography.Body>\n </div>\n <div className={alertStyles['sapphire-alert__content']}>\n <Typography.Body elementType=\"section\" size=\"md\">\n {children}\n </Typography.Body>\n </div>\n </div>\n );\n}\n"],"names":["variant"],"mappings":";;;;;;;AAsCO,SAAS,KAAA,CAAM;AAAA,EACpB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,GAAG;AACL,CAAA,EAA0C;AACxC,EAAA,aAAA,EAAc;AACd,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,KAAA,EAAO,SAAA;AAAU,GACjC,GAAI,sBAAsB,KAAK,CAAA;AAE/B,EAAA,MAAM,OAAA,GAAU,CAACA,QAAAA,KAAoB;AACnC,IAAA,QAAQA,QAAAA;AAAS,MACf,KAAK,SAAA;AACH,QAAA,2CAAQ,OAAA,EAAA,IAAQ,CAAA;AAAA,MAClB,KAAK,UAAA;AACH,QAAA,2CAAQ,gBAAA,EAAA,IAAiB,CAAA;AAAA,MAC3B,KAAK,UAAA;AACH,QAAA,2CAAQ,KAAA,EAAA,IAAM,CAAA;AAAA,MAChB;AACE,QAAA,2CAAQ,WAAA,EAAA,IAAY,CAAA;AAAA;AACxB,EACF,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA;AAAA,QACT,YAAY,gBAAgB,CAAA;AAAA,QAC5B;AAAA,UACE,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,yBAAyB,CAAC,GAAG,OAAA,KAAY;AAAA,SACxD;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,IAAA,EAAK;AAAA,KAAA;AAAA,oBAEL,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,CAAY,sBAAsB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAA,EAAM,OAAA,CAAQ,OAAO,CAAE,CACpC,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,uBAAuB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAA,EAClC,KACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,yBAAyB,CAAA,EAAA,kBACnD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,WAAA,EAAY,SAAA,EAAU,IAAA,EAAK,IAAA,EAAA,EACzC,QACH,CACF;AAAA,GACF;AAEJ;;;;"}
@@ -4,72 +4,50 @@ import { useLocale } from '@react-aria/i18n';
4
4
  import { useGroupAmount } from './useGroupAmount.js';
5
5
  import styles from '@danske/sapphire-css/components/amount/amount.module.css';
6
6
 
7
- var __defProp = Object.defineProperty;
8
- var __defProps = Object.defineProperties;
9
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
10
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
11
- var __hasOwnProp = Object.prototype.hasOwnProperty;
12
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
13
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
14
- var __spreadValues = (a, b) => {
15
- for (var prop in b || (b = {}))
16
- if (__hasOwnProp.call(b, prop))
17
- __defNormalProp(a, prop, b[prop]);
18
- if (__getOwnPropSymbols)
19
- for (var prop of __getOwnPropSymbols(b)) {
20
- if (__propIsEnum.call(b, prop))
21
- __defNormalProp(a, prop, b[prop]);
22
- }
23
- return a;
24
- };
25
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
26
- var __objRest = (source, exclude) => {
27
- var target = {};
28
- for (var prop in source)
29
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
30
- target[prop] = source[prop];
31
- if (source != null && __getOwnPropSymbols)
32
- for (var prop of __getOwnPropSymbols(source)) {
33
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
34
- target[prop] = source[prop];
35
- }
36
- return target;
37
- };
38
- const Amount = (_a) => {
39
- var _b = _a, {
40
- emphasis = "regular",
41
- variant,
42
- formatOptions,
43
- value,
44
- size
45
- } = _b, props = __objRest(_b, [
46
- "emphasis",
47
- "variant",
48
- "formatOptions",
49
- "value",
50
- "size"
51
- ]);
7
+ const Amount = ({
8
+ emphasis = "regular",
9
+ variant,
10
+ formatOptions,
11
+ value,
12
+ size,
13
+ ...props
14
+ }) => {
52
15
  useThemeCheck();
53
16
  const { styleProps, filteredProps } = useSapphireStyleProps(props);
54
17
  const { locale } = useLocale();
55
- const formatter = useMemo(() => new Intl.NumberFormat(locale, __spreadValues({
56
- style: (formatOptions == null ? void 0 : formatOptions.currency) ? "currency" : void 0,
57
- signDisplay: (formatOptions == null ? void 0 : formatOptions.signDisplay) || String(value).startsWith("+") ? "always" : "auto",
58
- minimumFractionDigits: 2
59
- }, formatOptions)), [locale, formatOptions, value]);
18
+ const formatter = useMemo(
19
+ () => new Intl.NumberFormat(locale, {
20
+ style: formatOptions?.currency ? "currency" : void 0,
21
+ /**
22
+ * Always show the sign if the value starts with '+' or '-'.
23
+ */
24
+ signDisplay: formatOptions?.signDisplay || String(value).startsWith("+") ? "always" : "auto",
25
+ minimumFractionDigits: 2,
26
+ ...formatOptions
27
+ }),
28
+ [locale, formatOptions, value]
29
+ );
60
30
  const { formattedValue, groupedParts } = useGroupAmount(value, formatter);
61
- return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({
62
- style: styleProps.style,
63
- className: styles["sapphire-amount"]
64
- }, filteredProps), {
65
- "aria-label": formattedValue
66
- }), groupedParts.map((part, index) => /* @__PURE__ */ React.createElement(Typography.Body, {
67
- elementType: "span",
68
- key: index,
69
- color: variant === "positive" ? "positive" : "primary",
70
- isSemibold: emphasis === "primary" ? true : false,
71
- size
72
- }, part.value)));
31
+ return /* @__PURE__ */ React.createElement(
32
+ "span",
33
+ {
34
+ style: styleProps.style,
35
+ className: styles["sapphire-amount"],
36
+ ...filteredProps,
37
+ "aria-label": formattedValue
38
+ },
39
+ groupedParts.map((part, index) => /* @__PURE__ */ React.createElement(
40
+ Typography.Body,
41
+ {
42
+ elementType: "span",
43
+ key: index,
44
+ color: variant === "positive" ? "positive" : "primary",
45
+ isSemibold: emphasis === "primary" ? true : false,
46
+ size
47
+ },
48
+ part.value
49
+ ))
50
+ );
73
51
  };
74
52
 
75
53
  export { Amount };
@@ -1 +1 @@
1
- {"version":3,"file":"Amount.js","sources":["../../../../src/Amount/src/Amount.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n useThemeCheck,\n SapphireStyleProps,\n GlobalDomAttributes,\n Typography,\n TypographyBodyProps,\n useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { useLocale } from '@react-aria/i18n';\nimport { useGroupAmount } from './useGroupAmount';\nimport styles from '@danske/sapphire-css/components/amount/amount.module.css';\n\n/**\n * Format options for currency amounts.\n * The style is always 'currency', so only currency-related options are exposed.\n */\nexport type CurrencyFormatOptions = Pick<\n Intl.NumberFormatOptions,\n | 'currency'\n | 'currencyDisplay'\n | 'currencySign'\n | 'signDisplay'\n | 'minimumFractionDigits'\n | 'maximumFractionDigits'\n | 'minimumSignificantDigits'\n | 'maximumSignificantDigits'\n | 'useGrouping'\n | 'notation'\n>;\n\nexport type AmountProps = {\n /**\n * When displaying amounts, readability and visual hierarchy are key. Use medium weight for primary emphasis to highlight amounts or regular weight for secondary emphasis.\n *\n * @default 'regular'\n */\n emphasis?: 'primary' | 'regular';\n /**\n * The variant of the Amount component. `positive` shows a green color, and should be used for amounts greater than zero.\n *\n * @default 'neutal'\n */\n variant?: 'neutal' | 'positive';\n /**\n * The amount value to be formatted and displayed.\n *\n * If displaying the sign is a requirement, ensure the value is a string that starts with '+' or '-'.\n * Alternatively, you can use the `signDisplay` option in `formatOptions` to control the display of the sign for numeric values.\n */\n value: string | number;\n /** Currency formatting options */\n formatOptions?: CurrencyFormatOptions;\n} & Pick<TypographyBodyProps, 'size'> &\n SapphireStyleProps &\n GlobalDomAttributes;\n\nexport const Amount = ({\n emphasis = 'regular',\n variant,\n formatOptions,\n value,\n size,\n ...props\n}: AmountProps): JSX.Element => {\n useThemeCheck();\n const { styleProps, filteredProps } = useSapphireStyleProps(props);\n const { locale } = useLocale();\n\n const formatter = useMemo(\n () =>\n new Intl.NumberFormat(locale, {\n style: formatOptions?.currency ? 'currency' : undefined,\n /**\n * Always show the sign if the value starts with '+' or '-'.\n */\n signDisplay:\n formatOptions?.signDisplay || String(value).startsWith('+')\n ? 'always'\n : 'auto',\n minimumFractionDigits: 2,\n ...formatOptions,\n }),\n [locale, formatOptions, value]\n );\n\n const { formattedValue, groupedParts } = useGroupAmount(value, formatter);\n\n return (\n <span\n style={styleProps.style}\n className={styles['sapphire-amount']}\n {...filteredProps}\n aria-label={formattedValue}\n >\n {groupedParts.map((part, index) => (\n <Typography.Body\n elementType=\"span\"\n key={index}\n color={variant === 'positive' ? 'positive' : 'primary'}\n isSemibold={emphasis === 'primary' ? true : false}\n size={size}\n >\n {part.value}\n </Typography.Body>\n ))}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Da,MAAA,MAAA,GAAS,CAAC,EAOS,KAAA;AAPT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAW,QAAA,GAAA,SAAA;AAAA,IACX,OAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,GALqB,GAAA,EAAA,EAMlB,kBANkB,EAMlB,EAAA;AAAA,IALH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAY,EAAA,aAAA,EAAA,GAAkB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AAEnB,EAAA,MAAM,YAAY,OAChB,CAAA,MACE,IAAI,IAAA,CAAK,aAAa,MAAQ,EAAA,cAAA,CAAA;AAAA,IAC5B,KAAA,EAAO,CAAe,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,IAAW,UAAa,GAAA,KAAA,CAAA;AAAA,IAI9C,aACE,CAAe,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,WAAA,KAAe,OAAO,KAAO,CAAA,CAAA,UAAA,CAAW,OACnD,QACA,GAAA,MAAA;AAAA,IACN,qBAAuB,EAAA,CAAA;AAAA,GACpB,EAAA,aAAA,CAAA,CAAA,EAEP,CAAC,MAAA,EAAQ,aAAe,EAAA,KAAA,CAAA,CAAA,CAAA;AAG1B,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAiB,EAAA,GAAA,cAAA,CAAe,KAAO,EAAA,SAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,MAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,OAAO,UAAW,CAAA,KAAA;AAAA,IAClB,WAAW,MAAO,CAAA,iBAAA,CAAA;AAAA,GAAA,EACd,aAHN,CAAA,EAAA;AAAA,IAIE,YAAY,EAAA,cAAA;AAAA,GAAA,CAAA,EAEX,aAAa,GAAI,CAAA,CAAC,MAAM,KACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IACE,WAAY,EAAA,MAAA;AAAA,IACZ,GAAK,EAAA,KAAA;AAAA,IACL,KAAA,EAAO,OAAY,KAAA,UAAA,GAAa,UAAa,GAAA,SAAA;AAAA,IAC7C,UAAA,EAAY,QAAa,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA;AAAA,IAC5C,IAAA;AAAA,GAAA,EAEC,IAAK,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"Amount.js","sources":["../../../../src/Amount/src/Amount.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n useThemeCheck,\n SapphireStyleProps,\n GlobalDomAttributes,\n Typography,\n TypographyBodyProps,\n useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { useLocale } from '@react-aria/i18n';\nimport { useGroupAmount } from './useGroupAmount';\nimport styles from '@danske/sapphire-css/components/amount/amount.module.css';\n\n/**\n * Format options for currency amounts.\n * The style is always 'currency', so only currency-related options are exposed.\n */\nexport type CurrencyFormatOptions = Pick<\n Intl.NumberFormatOptions,\n | 'currency'\n | 'currencyDisplay'\n | 'currencySign'\n | 'signDisplay'\n | 'minimumFractionDigits'\n | 'maximumFractionDigits'\n | 'minimumSignificantDigits'\n | 'maximumSignificantDigits'\n | 'useGrouping'\n | 'notation'\n>;\n\nexport type AmountProps = {\n /**\n * When displaying amounts, readability and visual hierarchy are key. Use medium weight for primary emphasis to highlight amounts or regular weight for secondary emphasis.\n *\n * @default 'regular'\n */\n emphasis?: 'primary' | 'regular';\n /**\n * The variant of the Amount component. `positive` shows a green color, and should be used for amounts greater than zero.\n *\n * @default 'neutal'\n */\n variant?: 'neutal' | 'positive';\n /**\n * The amount value to be formatted and displayed.\n *\n * If displaying the sign is a requirement, ensure the value is a string that starts with '+' or '-'.\n * Alternatively, you can use the `signDisplay` option in `formatOptions` to control the display of the sign for numeric values.\n */\n value: string | number;\n /** Currency formatting options */\n formatOptions?: CurrencyFormatOptions;\n} & Pick<TypographyBodyProps, 'size'> &\n SapphireStyleProps &\n GlobalDomAttributes;\n\nexport const Amount = ({\n emphasis = 'regular',\n variant,\n formatOptions,\n value,\n size,\n ...props\n}: AmountProps): JSX.Element => {\n useThemeCheck();\n const { styleProps, filteredProps } = useSapphireStyleProps(props);\n const { locale } = useLocale();\n\n const formatter = useMemo(\n () =>\n new Intl.NumberFormat(locale, {\n style: formatOptions?.currency ? 'currency' : undefined,\n /**\n * Always show the sign if the value starts with '+' or '-'.\n */\n signDisplay:\n formatOptions?.signDisplay || String(value).startsWith('+')\n ? 'always'\n : 'auto',\n minimumFractionDigits: 2,\n ...formatOptions,\n }),\n [locale, formatOptions, value]\n );\n\n const { formattedValue, groupedParts } = useGroupAmount(value, formatter);\n\n return (\n <span\n style={styleProps.style}\n className={styles['sapphire-amount']}\n {...filteredProps}\n aria-label={formattedValue}\n >\n {groupedParts.map((part, index) => (\n <Typography.Body\n elementType=\"span\"\n key={index}\n color={variant === 'positive' ? 'positive' : 'primary'}\n isSemibold={emphasis === 'primary' ? true : false}\n size={size}\n >\n {part.value}\n </Typography.Body>\n ))}\n </span>\n );\n};\n"],"names":[],"mappings":";;;;;;AA0DO,MAAM,SAAS,CAAC;AAAA,EACrB,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,sBAAsB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,IAAI,IAAA,CAAK,YAAA,CAAa,MAAA,EAAQ;AAAA,MAC5B,KAAA,EAAO,aAAA,EAAe,QAAA,GAAW,UAAA,GAAa,MAAA;AAAA;AAAA;AAAA;AAAA,MAI9C,WAAA,EACE,eAAe,WAAA,IAAe,MAAA,CAAO,KAAK,CAAA,CAAE,UAAA,CAAW,GAAG,CAAA,GACtD,QAAA,GACA,MAAA;AAAA,MACN,qBAAA,EAAuB,CAAA;AAAA,MACvB,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,MAAA,EAAQ,aAAA,EAAe,KAAK;AAAA,GAC/B;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAa,GAAI,cAAA,CAAe,OAAO,SAAS,CAAA;AAExE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,SAAA,EAAW,OAAO,iBAAiB,CAAA;AAAA,MAClC,GAAG,aAAA;AAAA,MACJ,YAAA,EAAY;AAAA,KAAA;AAAA,IAEX,YAAA,CAAa,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBACvB,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA,CAAW,IAAA;AAAA,MAAX;AAAA,QACC,WAAA,EAAY,MAAA;AAAA,QACZ,GAAA,EAAK,KAAA;AAAA,QACL,KAAA,EAAO,OAAA,KAAY,UAAA,GAAa,UAAA,GAAa,SAAA;AAAA,QAC7C,UAAA,EAAY,QAAA,KAAa,SAAA,GAAY,IAAA,GAAO,KAAA;AAAA,QAC5C;AAAA,OAAA;AAAA,MAEC,IAAA,CAAK;AAAA,KAET;AAAA,GACH;AAEJ;;;;"}
@@ -27,7 +27,10 @@ const useGroupAmount = (value, formatter) => {
27
27
  }
28
28
  return result;
29
29
  }, [numberValue, formatter]);
30
- const formattedValue = useMemo(() => groupedParts.map((part) => part.value).join(""), [groupedParts]);
30
+ const formattedValue = useMemo(
31
+ () => groupedParts.map((part) => part.value).join(""),
32
+ [groupedParts]
33
+ );
31
34
  return { formattedValue, groupedParts };
32
35
  };
33
36
 
@@ -1 +1 @@
1
- {"version":3,"file":"useGroupAmount.js","sources":["../../../../src/Amount/src/useGroupAmount.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport interface GroupedPart {\n type: 'sign' | 'number' | 'currency';\n value: string;\n}\n\n/**\n * Process the value that is being provided and format it using the provided formatter.\n * It returns both the formatted value as a string and the grouped parts for further processing.\n * It's useful for keeping track of diffrent parts of the formatted amount and where currency symbols are located.\n *\n * Example: value = \"+30000\", formatter for DKK currency\n * formattedValue = \"+DKK 30,000.00\"\n * groupedParts = [\n * { type: 'sign', value: '+' },\n * { type: 'currency', value: 'DKK' },\n * { type: 'number', value: '30,000.00' }\n * ]\n */\nexport const useGroupAmount = (\n value: string | number,\n formatter: Intl.NumberFormat\n) => {\n const numberValue = useMemo(() => {\n const parsed = Number(value);\n return isNaN(parsed) ? 0 : parsed;\n }, [value]);\n\n const groupedParts = useMemo(() => {\n const parts = formatter.formatToParts(numberValue);\n const result: GroupedPart[] = [];\n let currentNumber = '';\n\n parts.forEach((part) => {\n if (part.type === 'plusSign' || part.type === 'minusSign') {\n result.push({ type: 'sign', value: part.value });\n } else if (part.type === 'currency') {\n if (currentNumber) {\n result.push({ type: 'number', value: currentNumber });\n currentNumber = '';\n }\n result.push({ type: 'currency', value: part.value });\n } else if (part.type !== 'literal') {\n currentNumber += part.value;\n }\n });\n\n if (currentNumber) {\n result.push({ type: 'number', value: currentNumber });\n }\n\n return result;\n }, [numberValue, formatter]);\n\n const formattedValue = useMemo(\n () => groupedParts.map((part) => part.value).join(''),\n [groupedParts]\n );\n\n return { formattedValue, groupedParts };\n};\n"],"names":[],"mappings":";;AAoBa,MAAA,cAAA,GAAiB,CAC5B,KAAA,EACA,SACG,KAAA;AACH,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,MAAM,SAAS,MAAO,CAAA,KAAA,CAAA,CAAA;AACtB,IAAO,OAAA,KAAA,CAAM,UAAU,CAAI,GAAA,MAAA,CAAA;AAAA,GAAA,EAC1B,CAAC,KAAA,CAAA,CAAA,CAAA;AAEJ,EAAM,MAAA,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAM,MAAA,KAAA,GAAQ,UAAU,aAAc,CAAA,WAAA,CAAA,CAAA;AACtC,IAAA,MAAM,MAAwB,GAAA,EAAA,CAAA;AAC9B,IAAA,IAAI,aAAgB,GAAA,EAAA,CAAA;AAEpB,IAAM,KAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACtB,MAAA,IAAI,IAAK,CAAA,IAAA,KAAS,UAAc,IAAA,IAAA,CAAK,SAAS,WAAa,EAAA;AACzD,QAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,OAAO,IAAK,CAAA,KAAA,EAAA,CAAA,CAAA;AAAA,OAC/B,MAAA,IAAA,IAAA,CAAK,SAAS,UAAY,EAAA;AACnC,QAAA,IAAI,aAAe,EAAA;AACjB,UAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,QAAA,EAAU,KAAO,EAAA,aAAA,EAAA,CAAA,CAAA;AACrC,UAAgB,aAAA,GAAA,EAAA,CAAA;AAAA,SAAA;AAElB,QAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,UAAA,EAAY,OAAO,IAAK,CAAA,KAAA,EAAA,CAAA,CAAA;AAAA,OACnC,MAAA,IAAA,IAAA,CAAK,SAAS,SAAW,EAAA;AAClC,QAAA,aAAA,IAAiB,IAAK,CAAA,KAAA,CAAA;AAAA,OAAA;AAAA,KAAA,CAAA,CAAA;AAI1B,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,QAAA,EAAU,KAAO,EAAA,aAAA,EAAA,CAAA,CAAA;AAAA,KAAA;AAGvC,IAAO,OAAA,MAAA,CAAA;AAAA,GAAA,EACN,CAAC,WAAa,EAAA,SAAA,CAAA,CAAA,CAAA;AAEjB,EAAM,MAAA,cAAA,GAAiB,OACrB,CAAA,MAAM,YAAa,CAAA,GAAA,CAAI,CAAC,IAAA,KAAS,IAAK,CAAA,KAAA,CAAA,CAAO,IAAK,CAAA,EAAA,CAAA,EAClD,CAAC,YAAA,CAAA,CAAA,CAAA;AAGH,EAAA,OAAO,EAAE,cAAgB,EAAA,YAAA,EAAA,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"useGroupAmount.js","sources":["../../../../src/Amount/src/useGroupAmount.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport interface GroupedPart {\n type: 'sign' | 'number' | 'currency';\n value: string;\n}\n\n/**\n * Process the value that is being provided and format it using the provided formatter.\n * It returns both the formatted value as a string and the grouped parts for further processing.\n * It's useful for keeping track of diffrent parts of the formatted amount and where currency symbols are located.\n *\n * Example: value = \"+30000\", formatter for DKK currency\n * formattedValue = \"+DKK 30,000.00\"\n * groupedParts = [\n * { type: 'sign', value: '+' },\n * { type: 'currency', value: 'DKK' },\n * { type: 'number', value: '30,000.00' }\n * ]\n */\nexport const useGroupAmount = (\n value: string | number,\n formatter: Intl.NumberFormat\n) => {\n const numberValue = useMemo(() => {\n const parsed = Number(value);\n return isNaN(parsed) ? 0 : parsed;\n }, [value]);\n\n const groupedParts = useMemo(() => {\n const parts = formatter.formatToParts(numberValue);\n const result: GroupedPart[] = [];\n let currentNumber = '';\n\n parts.forEach((part) => {\n if (part.type === 'plusSign' || part.type === 'minusSign') {\n result.push({ type: 'sign', value: part.value });\n } else if (part.type === 'currency') {\n if (currentNumber) {\n result.push({ type: 'number', value: currentNumber });\n currentNumber = '';\n }\n result.push({ type: 'currency', value: part.value });\n } else if (part.type !== 'literal') {\n currentNumber += part.value;\n }\n });\n\n if (currentNumber) {\n result.push({ type: 'number', value: currentNumber });\n }\n\n return result;\n }, [numberValue, formatter]);\n\n const formattedValue = useMemo(\n () => groupedParts.map((part) => part.value).join(''),\n [groupedParts]\n );\n\n return { formattedValue, groupedParts };\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,cAAA,GAAiB,CAC5B,KAAA,EACA,SAAA,KACG;AACH,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,MAAM,MAAA,GAAS,OAAO,KAAK,CAAA;AAC3B,IAAA,OAAO,KAAA,CAAM,MAAM,CAAA,GAAI,CAAA,GAAI,MAAA;AAAA,EAC7B,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,aAAA,CAAc,WAAW,CAAA;AACjD,IAAA,MAAM,SAAwB,EAAC;AAC/B,IAAA,IAAI,aAAA,GAAgB,EAAA;AAEpB,IAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACtB,MAAA,IAAI,IAAA,CAAK,IAAA,KAAS,UAAA,IAAc,IAAA,CAAK,SAAS,WAAA,EAAa;AACzD,QAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,QAAQ,KAAA,EAAO,IAAA,CAAK,OAAO,CAAA;AAAA,MACjD,CAAA,MAAA,IAAW,IAAA,CAAK,IAAA,KAAS,UAAA,EAAY;AACnC,QAAA,IAAI,aAAA,EAAe;AACjB,UAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,eAAe,CAAA;AACpD,UAAA,aAAA,GAAgB,EAAA;AAAA,QAClB;AACA,QAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,YAAY,KAAA,EAAO,IAAA,CAAK,OAAO,CAAA;AAAA,MACrD,CAAA,MAAA,IAAW,IAAA,CAAK,IAAA,KAAS,SAAA,EAAW;AAClC,QAAA,aAAA,IAAiB,IAAA,CAAK,KAAA;AAAA,MACxB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,eAAe,CAAA;AAAA,IACtD;AAEA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA,EAAG,CAAC,WAAA,EAAa,SAAS,CAAC,CAAA;AAE3B,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAM,aAAa,GAAA,CAAI,CAAC,SAAS,IAAA,CAAK,KAAK,CAAA,CAAE,IAAA,CAAK,EAAE,CAAA;AAAA,IACpD,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,OAAO,EAAE,gBAAgB,YAAA,EAAa;AACxC;;;;"}
@@ -0,0 +1,6 @@
1
+ var da$3 = {
2
+ "listbox-suggestions": "Forslag"
3
+ };
4
+
5
+ export { da$3 as default };
6
+ //# sourceMappingURL=da-DK.json.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"da-DK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,6 @@
1
+ var de$3 = {
2
+ "listbox-suggestions": "Vorschläge"
3
+ };
4
+
5
+ export { de$3 as default };
6
+ //# sourceMappingURL=de-DE.json.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"de-DE.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,6 @@
1
+ var en$3 = {
2
+ "listbox-suggestions": "Suggestions"
3
+ };
4
+
5
+ export { en$3 as default };
6
+ //# sourceMappingURL=en-US.json.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"en-US.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,6 @@
1
+ var fi$3 = {
2
+ "listbox-suggestions": "Ehdotukset"
3
+ };
4
+
5
+ export { fi$3 as default };
6
+ //# sourceMappingURL=fi-FI.json.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fi-FI.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,12 +1,12 @@
1
- import da from './da-DK.js';
2
- import en from './en-US.js';
3
- import de from './de-DE.js';
4
- import fi from './fi-FI.js';
5
- import no from './nb-NO.js';
6
- import pl from './pl-PL.js';
7
- import se from './sv-SE.js';
1
+ import da from './da-DK.json.js';
2
+ import en from './en-US.json.js';
3
+ import de from './de-DE.json.js';
4
+ import fi from './fi-FI.json.js';
5
+ import no from './nb-NO.json.js';
6
+ import pl from './pl-PL.json.js';
7
+ import se from './sv-SE.json.js';
8
8
 
9
- var intlMessages = {
9
+ var intlMessages$3 = {
10
10
  "da-DK": da,
11
11
  "en-US": en,
12
12
  "de-DE": de,
@@ -16,5 +16,5 @@ var intlMessages = {
16
16
  "sv-SE": se
17
17
  };
18
18
 
19
- export { intlMessages as default };
19
+ export { intlMessages$3 as default };
20
20
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/Autocomplete/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n 'da-DK': da,\n 'en-US': en,\n 'de-DE': de,\n 'fi-FI': fi,\n 'nb-NO': no,\n 'pl-PL': pl,\n 'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,CAAA;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/Autocomplete/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n 'da-DK': da,\n 'en-US': en,\n 'de-DE': de,\n 'fi-FI': fi,\n 'nb-NO': no,\n 'pl-PL': pl,\n 'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,qBAAe;AAAA,EACb,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;;;;"}
@@ -0,0 +1,6 @@
1
+ var no$3 = {
2
+ "listbox-suggestions": "Forslag"
3
+ };
4
+
5
+ export { no$3 as default };
6
+ //# sourceMappingURL=nb-NO.json.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nb-NO.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,6 @@
1
+ var pl$3 = {
2
+ "listbox-suggestions": "Sugestie"
3
+ };
4
+
5
+ export { pl$3 as default };
6
+ //# sourceMappingURL=pl-PL.json.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pl-PL.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,6 @@
1
+ var se$3 = {
2
+ "listbox-suggestions": "Förslag"
3
+ };
4
+
5
+ export { se$3 as default };
6
+ //# sourceMappingURL=sv-SE.json.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sv-SE.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -6,58 +6,19 @@ import intlMessages from '../i18n/index.js';
6
6
  import { useFocusableRef } from '@react-spectrum/utils';
7
7
  import { filterDOMProps } from '@react-aria/utils';
8
8
 
9
- var __defProp = Object.defineProperty;
10
- var __defProps = Object.defineProperties;
11
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
12
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
13
- var __hasOwnProp = Object.prototype.hasOwnProperty;
14
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
15
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
16
- var __spreadValues = (a, b) => {
17
- for (var prop in b || (b = {}))
18
- if (__hasOwnProp.call(b, prop))
19
- __defNormalProp(a, prop, b[prop]);
20
- if (__getOwnPropSymbols)
21
- for (var prop of __getOwnPropSymbols(b)) {
22
- if (__propIsEnum.call(b, prop))
23
- __defNormalProp(a, prop, b[prop]);
24
- }
25
- return a;
26
- };
27
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
28
- var __objRest = (source, exclude) => {
29
- var target = {};
30
- for (var prop in source)
31
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
32
- target[prop] = source[prop];
33
- if (source != null && __getOwnPropSymbols)
34
- for (var prop of __getOwnPropSymbols(source)) {
35
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
36
- target[prop] = source[prop];
37
- }
38
- return target;
39
- };
40
9
  function Autocomplete(props) {
41
- var _b;
42
10
  useThemeCheck();
43
11
  const formatMessage = useMessageFormatter(intlMessages);
44
- const _a = props, {
12
+ const {
45
13
  inputValue,
46
14
  renderInput,
47
15
  loadingState,
48
16
  loadingSkeletonRowsCount,
49
17
  listboxAriaLabel,
50
18
  onSuggestionSelected,
51
- onSelectionChange
52
- } = _a, otherProps = __objRest(_a, [
53
- "inputValue",
54
- "renderInput",
55
- "loadingState",
56
- "loadingSkeletonRowsCount",
57
- "listboxAriaLabel",
58
- "onSuggestionSelected",
59
- "onSelectionChange"
60
- ]);
19
+ onSelectionChange,
20
+ ...otherProps
21
+ } = props;
61
22
  const {
62
23
  styleProps: { style, className }
63
24
  } = useSapphireStyleProps(props);
@@ -65,54 +26,68 @@ function Autocomplete(props) {
65
26
  const listBoxRef = useFocusableRef(null);
66
27
  const popoverRef = useRef(null);
67
28
  const triggerRef = useFocusableRef(null);
68
- const state = useComboBoxState(__spreadProps(__spreadValues({}, props), {
29
+ const state = useComboBoxState({
30
+ ...props,
69
31
  inputValue,
70
32
  allowsEmptyCollection: loadingState === "loading",
71
33
  allowsCustomValue: true,
72
34
  shouldCloseOnBlur: true,
73
35
  onSelectionChange: (key) => {
74
36
  if (key !== null) {
75
- onSelectionChange == null ? void 0 : onSelectionChange(key);
76
- onSuggestionSelected == null ? void 0 : onSuggestionSelected(key);
37
+ onSelectionChange?.(key);
38
+ onSuggestionSelected?.(key);
77
39
  }
78
40
  }
79
- }));
80
- const { inputProps, listBoxProps } = useComboBox(__spreadProps(__spreadValues({}, props), {
81
- "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
82
- inputRef,
83
- listBoxRef,
84
- popoverRef
85
- }), state);
86
- const inputElement = renderInput(__spreadProps(__spreadValues({}, inputProps), {
41
+ });
42
+ const { inputProps, listBoxProps } = useComboBox(
43
+ {
44
+ ...props,
45
+ "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
46
+ inputRef,
47
+ listBoxRef,
48
+ popoverRef
49
+ },
50
+ state
51
+ );
52
+ const inputElement = renderInput({
53
+ ...inputProps,
87
54
  isDisabled: props.isDisabled,
88
55
  inputRef,
89
56
  "aria-haspopup": "listbox",
90
57
  "aria-expanded": state.isOpen,
91
58
  onChange: (value) => {
92
- var _a2;
93
- (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, {
59
+ inputProps.onChange?.({
94
60
  target: { value },
95
61
  currentTarget: { value }
96
62
  });
97
63
  }
98
- }));
99
- return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
100
- ref: triggerRef
101
- }, filterDOMProps(otherProps, { global: true })), {
102
- style: __spreadValues({ display: "inline-flex" }, style),
103
- className
104
- }), inputElement, state.isOpen && /* @__PURE__ */ React.createElement(ListBoxPopover, {
105
- state,
106
- triggerRef,
107
- popoverRef,
108
- listBoxRef,
109
- listBoxProps,
110
- loadingState,
111
- loadingSkeletonRowsCount,
112
- selectWidth: (_b = triggerRef.current) == null ? void 0 : _b.offsetWidth,
113
- disableSelectedStyles: true,
114
- isNonModal: true
115
- }, props.children || []));
64
+ });
65
+ return /* @__PURE__ */ React.createElement(
66
+ "div",
67
+ {
68
+ ref: triggerRef,
69
+ ...filterDOMProps(otherProps, { global: true }),
70
+ style: { display: "inline-flex", ...style },
71
+ className
72
+ },
73
+ inputElement,
74
+ state.isOpen && /* @__PURE__ */ React.createElement(
75
+ ListBoxPopover,
76
+ {
77
+ state,
78
+ triggerRef,
79
+ popoverRef,
80
+ listBoxRef,
81
+ listBoxProps,
82
+ loadingState,
83
+ loadingSkeletonRowsCount,
84
+ selectWidth: triggerRef.current?.offsetWidth,
85
+ disableSelectedStyles: true,
86
+ isNonModal: true
87
+ },
88
+ props.children || []
89
+ )
90
+ );
116
91
  }
117
92
 
118
93
  export { Autocomplete };
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.js","sources":["../../../../src/Autocomplete/src/Autocomplete.tsx"],"sourcesContent":["import React, { Key, ReactElement, useRef } from 'react';\nimport {\n ListBoxProps,\n useThemeCheck,\n useSapphireStyleProps,\n SapphireStyleProps,\n ListBoxPopover,\n useComboBoxState,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useComboBox } from '@react-aria/combobox';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport type { ComboBoxProps } from '@react-types/combobox';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport type AutocompleteProps<T extends object> = GlobalDomAttributes &\n SapphireStyleProps &\n Pick<\n ComboBoxProps<T>,\n | 'items'\n | 'children'\n | 'inputValue'\n | 'defaultInputValue'\n | 'onInputChange'\n | 'isDisabled'\n > &\n Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {\n /**\n * This prop is badly named. It is NOT related to a selection state being\n * changed since there is no selection state in this component.\n *\n * This callback simply notifies you when the user filled in the text field\n * by selecting an option from the autocomplete dropdown. Similar to an\n * onClick.\n *\n * @deprecated\n * Use `onSuggestionSelected` instead.\n */\n onSelectionChange?: Pick<\n ComboBoxProps<T>,\n 'onSelectionChange'\n >['onSelectionChange'];\n\n /*\n * This callback simply notifies you when the user filled in the text field\n * by selecting an option from the autocomplete dropdown. Similar to an\n * onClick.\n */\n onSuggestionSelected?: (key: Key) => void;\n /**\n * Render function for the input element.\n * Receives props that should be spread onto the input component.\n */\n renderInput: (inputProps: any) => ReactElement;\n\n /**\n * Accessible label for the suggestions listbox.\n */\n listboxAriaLabel?: string;\n\n /**\n * Controlled selected value.\n */\n value?: React.Key | null;\n\n /**\n * Decide what items to display in the dropdown menu.\n * @default 'String.includes'\n */\n defaultFilter?: (textValue: string, inputValue: string) => boolean;\n };\n\nexport function Autocomplete<T extends object>(\n props: AutocompleteProps<T>\n): ReactElement {\n useThemeCheck();\n const formatMessage = useMessageFormatter(intlMessages);\n\n const {\n inputValue,\n renderInput,\n loadingState,\n loadingSkeletonRowsCount,\n listboxAriaLabel,\n onSuggestionSelected,\n onSelectionChange,\n ...otherProps\n } = props;\n\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(props);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const triggerRef = useFocusableRef<HTMLDivElement>(null);\n\n const state = useComboBoxState({\n ...props,\n inputValue,\n allowsEmptyCollection: loadingState === 'loading',\n allowsCustomValue: true,\n shouldCloseOnBlur: true,\n onSelectionChange: (key) => {\n if (key !== null) {\n onSelectionChange?.(key);\n onSuggestionSelected?.(key);\n }\n },\n });\n\n const { inputProps, listBoxProps } = useComboBox(\n {\n ...props,\n 'aria-label': listboxAriaLabel || formatMessage('listbox-suggestions'),\n inputRef,\n listBoxRef,\n popoverRef,\n },\n state\n );\n\n const inputElement = renderInput({\n ...inputProps,\n isDisabled: props.isDisabled,\n inputRef,\n 'aria-haspopup': 'listbox',\n 'aria-expanded': state.isOpen,\n onChange: (value: string) => {\n inputProps.onChange?.({\n target: { value },\n currentTarget: { value },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n return (\n <div\n ref={triggerRef}\n {...filterDOMProps(otherProps, { global: true })}\n style={{ display: 'inline-flex', ...style }}\n className={className}\n >\n {inputElement}\n {state.isOpen && (\n <ListBoxPopover<T>\n state={state}\n triggerRef={triggerRef}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n listBoxProps={listBoxProps}\n loadingState={loadingState}\n loadingSkeletonRowsCount={loadingSkeletonRowsCount}\n selectWidth={triggerRef.current?.offsetWidth}\n disableSelectedStyles\n isNonModal\n >\n {props.children || []}\n </ListBoxPopover>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EO,SAAA,YAAA,CACL,KACc,EAAA;AA5EhB,EAAA,IAAA,EAAA,CAAA;AA6EE,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAAM,gBAAgB,mBAAoB,CAAA,YAAA,CAAA,CAAA;AAE1C,EAAA,MASI,EARF,GAAA,KAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,wBAAA;AAAA,IACA,gBAAA;AAAA,IACA,oBAAA;AAAA,IACA,iBAAA;AAAA,GAEE,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IAPH,YAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,0BAAA;AAAA,IACA,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,mBAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE1B,EAAA,MAAM,WAAW,MAAyB,CAAA,IAAA,CAAA,CAAA;AAC1C,EAAA,MAAM,aAAa,eAAkC,CAAA,IAAA,CAAA,CAAA;AACrD,EAAA,MAAM,aAAa,MAAuB,CAAA,IAAA,CAAA,CAAA;AAC1C,EAAA,MAAM,aAAa,eAAgC,CAAA,IAAA,CAAA,CAAA;AAEnD,EAAM,MAAA,KAAA,GAAQ,gBAAiB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAC1B,KAD0B,CAAA,EAAA;AAAA,IAE7B,UAAA;AAAA,IACA,uBAAuB,YAAiB,KAAA,SAAA;AAAA,IACxC,iBAAmB,EAAA,IAAA;AAAA,IACnB,iBAAmB,EAAA,IAAA;AAAA,IACnB,iBAAA,EAAmB,CAAC,GAAQ,KAAA;AAC1B,MAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,QAAoB,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;AACpB,QAAuB,oBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,oBAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAK7B,EAAA,MAAM,EAAE,UAAA,EAAY,YAAiB,EAAA,GAAA,WAAA,CACnC,iCACK,KADL,CAAA,EAAA;AAAA,IAEE,YAAA,EAAc,oBAAoB,aAAc,CAAA,qBAAA,CAAA;AAAA,IAChD,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,GAEF,CAAA,EAAA,KAAA,CAAA,CAAA;AAGF,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAC5B,UAD4B,CAAA,EAAA;AAAA,IAE/B,YAAY,KAAM,CAAA,UAAA;AAAA,IAClB,QAAA;AAAA,IACA,eAAiB,EAAA,SAAA;AAAA,IACjB,iBAAiB,KAAM,CAAA,MAAA;AAAA,IACvB,QAAA,EAAU,CAAC,KAAkB,KAAA;AAnIjC,MAAA,IAAA,GAAA,CAAA;AAoIM,MAAA,CAAA,GAAA,GAAA,UAAA,CAAW,aAAX,IAAsB,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,IAAA,CAAA,UAAA,EAAA;AAAA,QACpB,QAAQ,EAAE,KAAA,EAAA;AAAA,QACV,eAAe,EAAE,KAAA,EAAA;AAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKvB,EAAA,2CACG,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAK,EAAA,UAAA;AAAA,GAAA,EACD,cAAe,CAAA,UAAA,EAAY,EAAE,MAAA,EAAQ,IAF3C,EAAA,CAAA,CAAA,EAAA;AAAA,IAGE,KAAA,EAAO,cAAE,CAAA,EAAA,OAAA,EAAS,aAAkB,EAAA,EAAA,KAAA,CAAA;AAAA,IACpC,SAAA;AAAA,GAAA,CAAA,EAEC,YACA,EAAA,KAAA,CAAM,MACL,oBAAA,KAAA,CAAA,aAAA,CAAC,cAAD,EAAA;AAAA,IACE,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,wBAAA;AAAA,IACA,WAAA,EAAa,CAAW,EAAA,GAAA,UAAA,CAAA,OAAA,KAAX,IAAoB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,IACjC,qBAAqB,EAAA,IAAA;AAAA,IACrB,UAAU,EAAA,IAAA;AAAA,GAAA,EAET,MAAM,QAAY,IAAA,EAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"Autocomplete.js","sources":["../../../../src/Autocomplete/src/Autocomplete.tsx"],"sourcesContent":["import React, { Key, ReactElement, useRef } from 'react';\nimport {\n ListBoxProps,\n useThemeCheck,\n useSapphireStyleProps,\n SapphireStyleProps,\n ListBoxPopover,\n useComboBoxState,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useComboBox } from '@react-aria/combobox';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport type { ComboBoxProps } from '@react-types/combobox';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport type AutocompleteProps<T extends object> = GlobalDomAttributes &\n SapphireStyleProps &\n Pick<\n ComboBoxProps<T>,\n | 'items'\n | 'children'\n | 'inputValue'\n | 'defaultInputValue'\n | 'onInputChange'\n | 'isDisabled'\n > &\n Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {\n /**\n * This prop is badly named. It is NOT related to a selection state being\n * changed since there is no selection state in this component.\n *\n * This callback simply notifies you when the user filled in the text field\n * by selecting an option from the autocomplete dropdown. Similar to an\n * onClick.\n *\n * @deprecated\n * Use `onSuggestionSelected` instead.\n */\n onSelectionChange?: Pick<\n ComboBoxProps<T>,\n 'onSelectionChange'\n >['onSelectionChange'];\n\n /*\n * This callback simply notifies you when the user filled in the text field\n * by selecting an option from the autocomplete dropdown. Similar to an\n * onClick.\n */\n onSuggestionSelected?: (key: Key) => void;\n /**\n * Render function for the input element.\n * Receives props that should be spread onto the input component.\n */\n renderInput: (inputProps: any) => ReactElement;\n\n /**\n * Accessible label for the suggestions listbox.\n */\n listboxAriaLabel?: string;\n\n /**\n * Controlled selected value.\n */\n value?: React.Key | null;\n\n /**\n * Decide what items to display in the dropdown menu.\n * @default 'String.includes'\n */\n defaultFilter?: (textValue: string, inputValue: string) => boolean;\n };\n\nexport function Autocomplete<T extends object>(\n props: AutocompleteProps<T>\n): ReactElement {\n useThemeCheck();\n const formatMessage = useMessageFormatter(intlMessages);\n\n const {\n inputValue,\n renderInput,\n loadingState,\n loadingSkeletonRowsCount,\n listboxAriaLabel,\n onSuggestionSelected,\n onSelectionChange,\n ...otherProps\n } = props;\n\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(props);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const triggerRef = useFocusableRef<HTMLDivElement>(null);\n\n const state = useComboBoxState({\n ...props,\n inputValue,\n allowsEmptyCollection: loadingState === 'loading',\n allowsCustomValue: true,\n shouldCloseOnBlur: true,\n onSelectionChange: (key) => {\n if (key !== null) {\n onSelectionChange?.(key);\n onSuggestionSelected?.(key);\n }\n },\n });\n\n const { inputProps, listBoxProps } = useComboBox(\n {\n ...props,\n 'aria-label': listboxAriaLabel || formatMessage('listbox-suggestions'),\n inputRef,\n listBoxRef,\n popoverRef,\n },\n state\n );\n\n const inputElement = renderInput({\n ...inputProps,\n isDisabled: props.isDisabled,\n inputRef,\n 'aria-haspopup': 'listbox',\n 'aria-expanded': state.isOpen,\n onChange: (value: string) => {\n inputProps.onChange?.({\n target: { value },\n currentTarget: { value },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n return (\n <div\n ref={triggerRef}\n {...filterDOMProps(otherProps, { global: true })}\n style={{ display: 'inline-flex', ...style }}\n className={className}\n >\n {inputElement}\n {state.isOpen && (\n <ListBoxPopover<T>\n state={state}\n triggerRef={triggerRef}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n listBoxProps={listBoxProps}\n loadingState={loadingState}\n loadingSkeletonRowsCount={loadingSkeletonRowsCount}\n selectWidth={triggerRef.current?.offsetWidth}\n disableSelectedStyles\n isNonModal\n >\n {props.children || []}\n </ListBoxPopover>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AA0EO,SAAS,aACd,KAAA,EACc;AACd,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,aAAA,GAAgB,oBAAoB,YAAY,CAAA;AAEtD,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,wBAAA;AAAA,IACA,gBAAA;AAAA,IACA,oBAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,KAAA,EAAO,SAAA;AAAU,GACjC,GAAI,sBAAsB,KAAK,CAAA;AAE/B,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,gBAAkC,IAAI,CAAA;AACzD,EAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,UAAA,GAAa,gBAAgC,IAAI,CAAA;AAEvD,EAAA,MAAM,QAAQ,gBAAA,CAAiB;AAAA,IAC7B,GAAG,KAAA;AAAA,IACH,UAAA;AAAA,IACA,uBAAuB,YAAA,KAAiB,SAAA;AAAA,IACxC,iBAAA,EAAmB,IAAA;AAAA,IACnB,iBAAA,EAAmB,IAAA;AAAA,IACnB,iBAAA,EAAmB,CAAC,GAAA,KAAQ;AAC1B,MAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,QAAA,iBAAA,GAAoB,GAAG,CAAA;AACvB,QAAA,oBAAA,GAAuB,GAAG,CAAA;AAAA,MAC5B;AAAA,IACF;AAAA,GACD,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,WAAA;AAAA,IACnC;AAAA,MACE,GAAG,KAAA;AAAA,MACH,YAAA,EAAc,gBAAA,IAAoB,aAAA,CAAc,qBAAqB,CAAA;AAAA,MACrE,QAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,eAAe,WAAA,CAAY;AAAA,IAC/B,GAAG,UAAA;AAAA,IACH,YAAY,KAAA,CAAM,UAAA;AAAA,IAClB,QAAA;AAAA,IACA,eAAA,EAAiB,SAAA;AAAA,IACjB,iBAAiB,KAAA,CAAM,MAAA;AAAA,IACvB,QAAA,EAAU,CAAC,KAAA,KAAkB;AAC3B,MAAA,UAAA,CAAW,QAAA,GAAW;AAAA,QACpB,MAAA,EAAQ,EAAE,KAAA,EAAM;AAAA,QAChB,aAAA,EAAe,EAAE,KAAA;AAAM,OACe,CAAA;AAAA,IAC1C;AAAA,GACD,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACJ,GAAG,cAAA,CAAe,UAAA,EAAY,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC/C,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAe,GAAG,KAAA,EAAM;AAAA,MAC1C;AAAA,KAAA;AAAA,IAEC,YAAA;AAAA,IACA,MAAM,MAAA,oBACL,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,YAAA;AAAA,QACA,YAAA;AAAA,QACA,wBAAA;AAAA,QACA,WAAA,EAAa,WAAW,OAAA,EAAS,WAAA;AAAA,QACjC,qBAAA,EAAqB,IAAA;AAAA,QACrB,UAAA,EAAU;AAAA,OAAA;AAAA,MAET,KAAA,CAAM,YAAY;AAAC;AACtB,GAEJ;AAEJ;;;;"}