@danske/sapphire-react-lab 0.105.2 → 0.106.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 (216) hide show
  1. package/build/cjs/index.js +1607 -2284
  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 +44 -75
  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 +23 -55
  9. package/build/esm/Accordion/src/AccordionHeading.js.map +1 -1
  10. package/build/esm/Accordion/src/AccordionItem.js +18 -44
  11. package/build/esm/Accordion/src/AccordionItem.js.map +1 -1
  12. package/build/esm/Accordion/src/AccordionPanel.js +28 -45
  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 +27 -65
  16. package/build/esm/Alert/src/Alert.js.map +1 -1
  17. package/build/esm/Amount/src/Amount.js +41 -63
  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 +57 -76
  38. package/build/esm/Autocomplete/src/Autocomplete.js.map +1 -1
  39. package/build/esm/Breadcrumbs/src/BreadcrumbItem.js +46 -52
  40. package/build/esm/Breadcrumbs/src/BreadcrumbItem.js.map +1 -1
  41. package/build/esm/Breadcrumbs/src/BreadcrumbItemLink.js +17 -45
  42. package/build/esm/Breadcrumbs/src/BreadcrumbItemLink.js.map +1 -1
  43. package/build/esm/Breadcrumbs/src/BreadcrumbItemStatic.js +25 -46
  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 +47 -64
  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 +6 -6
  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 +68 -88
  70. package/build/esm/FileDropzone/src/FileDropzone.js.map +1 -1
  71. package/build/esm/FileDropzone/src/FileTrigger.js +29 -61
  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 +91 -113
  75. package/build/esm/Filtering/src/FilterDropdown.js.map +1 -1
  76. package/build/esm/Filtering/src/SearchableSelectFilter.js +53 -70
  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 +21 -55
  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 +130 -111
  99. package/build/esm/NumberField/src/NumberField.js.map +1 -1
  100. package/build/esm/NumberField/src/StepperButton.js +32 -53
  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 +16 -42
  112. package/build/esm/NumberField/src/useSapphireNumberField.js.map +1 -1
  113. package/build/esm/ProgressIndicator/src/ProgressIndicator.js +23 -35
  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 +19 -44
  117. package/build/esm/Sidebar/src/Body.js.map +1 -1
  118. package/build/esm/Sidebar/src/ExpandableItem.js +89 -97
  119. package/build/esm/Sidebar/src/ExpandableItem.js.map +1 -1
  120. package/build/esm/Sidebar/src/Header.js +14 -44
  121. package/build/esm/Sidebar/src/Header.js.map +1 -1
  122. package/build/esm/Sidebar/src/Item.js +17 -44
  123. package/build/esm/Sidebar/src/Item.js.map +1 -1
  124. package/build/esm/Sidebar/src/List.js +14 -43
  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 +17 -9
  129. package/build/esm/Sidebar/src/ResponsiveSidebarContext.js.map +1 -1
  130. package/build/esm/Sidebar/src/SecondarySidebarContext.js +15 -12
  131. package/build/esm/Sidebar/src/SecondarySidebarContext.js.map +1 -1
  132. package/build/esm/Sidebar/src/Section.js +38 -51
  133. package/build/esm/Sidebar/src/Section.js.map +1 -1
  134. package/build/esm/Sidebar/src/Sidebar.js +65 -93
  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 +71 -86
  141. package/build/esm/TagGroup/src/Tag.js.map +1 -1
  142. package/build/esm/TagGroup/src/TagGroup.js +46 -67
  143. package/build/esm/TagGroup/src/TagGroup.js.map +1 -1
  144. package/build/esm/TagGroup/src/TagItem.js +1 -1
  145. package/build/esm/TagGroup/src/TagItem.js.map +1 -1
  146. package/build/esm/TimeField/i18n/da-DK.json.js +7 -0
  147. package/build/esm/TimeField/i18n/da-DK.json.js.map +1 -0
  148. package/build/esm/TimeField/i18n/de-DE.json.js +7 -0
  149. package/build/esm/TimeField/i18n/de-DE.json.js.map +1 -0
  150. package/build/esm/TimeField/i18n/en-US.json.js +7 -0
  151. package/build/esm/TimeField/i18n/en-US.json.js.map +1 -0
  152. package/build/esm/TimeField/i18n/fi-FI.json.js +7 -0
  153. package/build/esm/TimeField/i18n/fi-FI.json.js.map +1 -0
  154. package/build/esm/TimeField/i18n/index.js +7 -7
  155. package/build/esm/TimeField/i18n/index.js.map +1 -1
  156. package/build/esm/TimeField/i18n/nb-NO.json.js +7 -0
  157. package/build/esm/TimeField/i18n/nb-NO.json.js.map +1 -0
  158. package/build/esm/TimeField/i18n/pl-PL.json.js +7 -0
  159. package/build/esm/TimeField/i18n/pl-PL.json.js.map +1 -0
  160. package/build/esm/TimeField/i18n/{sv-SE.js → sv-SE.json.js} +1 -1
  161. package/build/esm/TimeField/i18n/sv-SE.json.js.map +1 -0
  162. package/build/esm/TimeField/src/TimeField.js +67 -84
  163. package/build/esm/TimeField/src/TimeField.js.map +1 -1
  164. package/build/esm/TimeField/src/TimeFieldSegment.js +25 -37
  165. package/build/esm/TimeField/src/TimeFieldSegment.js.map +1 -1
  166. package/build/esm/index.js +1 -1
  167. package/build/index.d.ts +19 -17
  168. package/package.json +16 -39
  169. package/build/esm/Autocomplete/i18n/da-DK.js +0 -6
  170. package/build/esm/Autocomplete/i18n/da-DK.js.map +0 -1
  171. package/build/esm/Autocomplete/i18n/de-DE.js +0 -6
  172. package/build/esm/Autocomplete/i18n/de-DE.js.map +0 -1
  173. package/build/esm/Autocomplete/i18n/en-US.js +0 -6
  174. package/build/esm/Autocomplete/i18n/en-US.js.map +0 -1
  175. package/build/esm/Autocomplete/i18n/fi-FI.js +0 -6
  176. package/build/esm/Autocomplete/i18n/fi-FI.js.map +0 -1
  177. package/build/esm/Autocomplete/i18n/nb-NO.js +0 -6
  178. package/build/esm/Autocomplete/i18n/nb-NO.js.map +0 -1
  179. package/build/esm/Autocomplete/i18n/pl-PL.js +0 -6
  180. package/build/esm/Autocomplete/i18n/pl-PL.js.map +0 -1
  181. package/build/esm/Autocomplete/i18n/sv-SE.js +0 -6
  182. package/build/esm/Autocomplete/i18n/sv-SE.js.map +0 -1
  183. package/build/esm/FileDropzone/i18n/da-DK.js.map +0 -1
  184. package/build/esm/FileDropzone/i18n/de-DE.js.map +0 -1
  185. package/build/esm/FileDropzone/i18n/en-US.js.map +0 -1
  186. package/build/esm/FileDropzone/i18n/fi-FI.js.map +0 -1
  187. package/build/esm/FileDropzone/i18n/nb-NO.js.map +0 -1
  188. package/build/esm/FileDropzone/i18n/pl-PL.js.map +0 -1
  189. package/build/esm/FileDropzone/i18n/sv-SE.js.map +0 -1
  190. package/build/esm/NumberField/i18n/da-DK.js +0 -9
  191. package/build/esm/NumberField/i18n/da-DK.js.map +0 -1
  192. package/build/esm/NumberField/i18n/de-DE.js +0 -9
  193. package/build/esm/NumberField/i18n/de-DE.js.map +0 -1
  194. package/build/esm/NumberField/i18n/en-US.js +0 -9
  195. package/build/esm/NumberField/i18n/en-US.js.map +0 -1
  196. package/build/esm/NumberField/i18n/fi-FI.js +0 -9
  197. package/build/esm/NumberField/i18n/fi-FI.js.map +0 -1
  198. package/build/esm/NumberField/i18n/nb-NO.js +0 -9
  199. package/build/esm/NumberField/i18n/nb-NO.js.map +0 -1
  200. package/build/esm/NumberField/i18n/pl-PL.js +0 -9
  201. package/build/esm/NumberField/i18n/pl-PL.js.map +0 -1
  202. package/build/esm/NumberField/i18n/sv-SE.js +0 -9
  203. package/build/esm/NumberField/i18n/sv-SE.js.map +0 -1
  204. package/build/esm/TimeField/i18n/da-DK.js +0 -7
  205. package/build/esm/TimeField/i18n/da-DK.js.map +0 -1
  206. package/build/esm/TimeField/i18n/de-DE.js +0 -7
  207. package/build/esm/TimeField/i18n/de-DE.js.map +0 -1
  208. package/build/esm/TimeField/i18n/en-US.js +0 -7
  209. package/build/esm/TimeField/i18n/en-US.js.map +0 -1
  210. package/build/esm/TimeField/i18n/fi-FI.js +0 -7
  211. package/build/esm/TimeField/i18n/fi-FI.js.map +0 -1
  212. package/build/esm/TimeField/i18n/nb-NO.js +0 -7
  213. package/build/esm/TimeField/i18n/nb-NO.js.map +0 -1
  214. package/build/esm/TimeField/i18n/pl-PL.js +0 -7
  215. package/build/esm/TimeField/i18n/pl-PL.js.map +0 -1
  216. package/build/esm/TimeField/i18n/sv-SE.js.map +0 -1
@@ -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":"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"}
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/useComboBox';\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/filterDOMProps';\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 const collectionRef = useRef<\n ReturnType<typeof useComboBoxState>['collection'] | null\n >(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 // When both value and inputValue are controlled, react-stately skips\n // updating inputValue\n const itemText = collectionRef.current?.getItem(key)?.textValue ?? '';\n if (itemText) {\n props.onInputChange?.(itemText);\n }\n }\n },\n });\n\n collectionRef.current = state.collection;\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":"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"}
@@ -1,5 +1,6 @@
1
1
  import React, { useContext } from 'react';
2
- import { createLeafComponent, CollectionNode } from '@react-aria/collections';
2
+ import { CollectionNode } from 'react-aria/private/collections/BaseCollection';
3
+ import { createLeafComponent } from 'react-aria/CollectionBuilder';
3
4
  import { useThemeCheck, useSapphireStyleProps, Typography } from '@danske/sapphire-react';
4
5
  import { BreadcrumbsSeparator } from './BreadcrumbsSeparator.js';
5
6
  import clsx from 'clsx';
@@ -8,60 +9,53 @@ import { BreadcrumbsContext } from './Breadcrumbs.js';
8
9
  import { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu.js';
9
10
  import { BreadcrumbItemLink } from './BreadcrumbItemLink.js';
10
11
 
11
- var __defProp = Object.defineProperty;
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
12
  class BreadcrumbItemCollectionNode extends CollectionNode {
13
+ static type = "item";
28
14
  }
29
- BreadcrumbItemCollectionNode.type = "item";
30
- const BreadcrumbItem = createLeafComponent(BreadcrumbItemCollectionNode, function BreadcrumbItem2(props, ref, node) {
31
- var _a;
32
- useThemeCheck();
33
- const { styleProps } = useSapphireStyleProps(props);
34
- const {
35
- size,
36
- overflowNodes,
37
- isDisabled: breadcrumbsDisabled
38
- } = useContext(BreadcrumbsContext);
39
- const { isDisabled: individualDisabled = false } = props;
40
- const isCurrent = node.nextKey == null;
41
- const isDisabled = individualDisabled || breadcrumbsDisabled;
42
- const shouldRender = !overflowNodes.some((item) => (item == null ? void 0 : item.key) === node.key);
43
- const showOverflowMenu = ((_a = overflowNodes[0]) == null ? void 0 : _a.key) === node.key;
44
- if (!shouldRender && !showOverflowMenu) {
45
- return /* @__PURE__ */ React.createElement(React.Fragment, null);
46
- }
47
- if (!shouldRender && showOverflowMenu) {
48
- return /* @__PURE__ */ React.createElement(BreadcrumbOverflowMenu, null);
15
+ const BreadcrumbItem = createLeafComponent(
16
+ BreadcrumbItemCollectionNode,
17
+ function BreadcrumbItem2(props, ref, node) {
18
+ useThemeCheck();
19
+ const { styleProps } = useSapphireStyleProps(props);
20
+ const {
21
+ size,
22
+ overflowNodes,
23
+ isDisabled: breadcrumbsDisabled
24
+ } = useContext(BreadcrumbsContext);
25
+ const { isDisabled: individualDisabled = false } = props;
26
+ const isCurrent = node.nextKey == null;
27
+ const isDisabled = individualDisabled || breadcrumbsDisabled;
28
+ const shouldRender = !overflowNodes.some((item) => item?.key === node.key);
29
+ const showOverflowMenu = overflowNodes[0]?.key === node.key;
30
+ if (!shouldRender && !showOverflowMenu) {
31
+ return /* @__PURE__ */ React.createElement(React.Fragment, null);
32
+ }
33
+ if (!shouldRender && showOverflowMenu) {
34
+ return /* @__PURE__ */ React.createElement(BreadcrumbOverflowMenu, null);
35
+ }
36
+ node.href = props.href;
37
+ return /* @__PURE__ */ React.createElement(
38
+ "li",
39
+ {
40
+ ref,
41
+ className: clsx(styles["sapphire-breadcrumbs__item"]),
42
+ style: { ...styleProps.style },
43
+ "data-disabled": isDisabled || void 0,
44
+ "data-current": isCurrent || void 0
45
+ },
46
+ isCurrent ? /* @__PURE__ */ React.createElement(
47
+ Typography.Body,
48
+ {
49
+ elementType: "span",
50
+ isSemibold: true,
51
+ size: size === "lg" ? "md" : size === "md" ? "sm" : "xs"
52
+ },
53
+ node.rendered
54
+ ) : /* @__PURE__ */ React.createElement(BreadcrumbItemLink, { isDisabled, ...props }, node.rendered),
55
+ !isCurrent && /* @__PURE__ */ React.createElement(BreadcrumbsSeparator, null)
56
+ );
49
57
  }
50
- node.href = props.href;
51
- return /* @__PURE__ */ React.createElement("li", {
52
- ref,
53
- className: clsx(styles["sapphire-breadcrumbs__item"]),
54
- style: __spreadValues({}, styleProps.style),
55
- "data-disabled": isDisabled || void 0,
56
- "data-current": isCurrent || void 0
57
- }, isCurrent ? /* @__PURE__ */ React.createElement(Typography.Body, {
58
- elementType: "span",
59
- isSemibold: true,
60
- size: size === "lg" ? "md" : size === "md" ? "sm" : "xs"
61
- }, node.rendered) : /* @__PURE__ */ React.createElement(BreadcrumbItemLink, __spreadValues({
62
- isDisabled
63
- }, props), node.rendered), !isCurrent && /* @__PURE__ */ React.createElement(BreadcrumbsSeparator, null));
64
- });
58
+ );
65
59
 
66
60
  export { BreadcrumbItem };
67
61
  //# sourceMappingURL=BreadcrumbItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbItem.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItem.tsx"],"sourcesContent":["import React, { useContext, ForwardedRef } from 'react';\nimport type { BreadcrumbProps as RACBreadcrumbProps } from 'react-aria-components';\nimport { CollectionNode, createLeafComponent } from '@react-aria/collections';\nimport {\n useSapphireStyleProps,\n useThemeCheck,\n SapphireStyleProps,\n Typography,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu';\nimport { BreadcrumbItemNode } from './types';\nimport {\n BreadcrumbItemLink,\n BreadcrumbItemLinkProps,\n} from './BreadcrumbItemLink';\n\nexport type BreadcrumbItemProps = {\n isDisabled?: boolean;\n} & SapphireStyleProps &\n GlobalDomAttributes &\n Pick<RACBreadcrumbProps, 'children'> &\n BreadcrumbItemLinkProps;\n\nclass BreadcrumbItemCollectionNode extends CollectionNode<unknown> {\n static readonly type = 'item';\n}\n\n/**\n * The implementation is based on React Aria's BreadcrumbItem, with added support for\n * overflow menu data handling.\n */\nexport const BreadcrumbItem = createLeafComponent(\n BreadcrumbItemCollectionNode,\n function BreadcrumbItem(\n props: BreadcrumbItemProps,\n ref: ForwardedRef<HTMLLIElement>,\n node: BreadcrumbItemNode\n ): JSX.Element {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n const {\n size,\n overflowNodes,\n isDisabled: breadcrumbsDisabled,\n } = useContext(BreadcrumbsContext);\n const { isDisabled: individualDisabled = false } = props;\n\n const isCurrent = node.nextKey == null;\n const isDisabled = individualDisabled || breadcrumbsDisabled;\n\n /**\n * The item should not be rendered if it's in the overflow indexes.\n * The only exception is the first overflow menu item, which will be rendered\n * as the overflow menu trigger.\n */\n const shouldRender = !overflowNodes.some((item) => item?.key === node.key);\n const showOverflowMenu = overflowNodes[0]?.key === node.key;\n\n if (!shouldRender && !showOverflowMenu) {\n return <></>;\n }\n\n if (!shouldRender && showOverflowMenu) {\n return <BreadcrumbOverflowMenu />;\n }\n\n node.href = props.href;\n\n return (\n <li\n ref={ref}\n className={clsx(styles['sapphire-breadcrumbs__item'])}\n style={{ ...styleProps.style }}\n data-disabled={isDisabled || undefined}\n data-current={isCurrent || undefined}\n >\n {isCurrent ? (\n <Typography.Body\n elementType=\"span\"\n isSemibold\n size={size === 'lg' ? 'md' : size === 'md' ? 'sm' : 'xs'}\n >\n {node.rendered}\n </Typography.Body>\n ) : (\n <BreadcrumbItemLink isDisabled={isDisabled} {...props}>\n {node.rendered}\n </BreadcrumbItemLink>\n )}\n {!isCurrent && <BreadcrumbsSeparator />}\n </li>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAA,4BAAA,SAA2C,cAAwB,CAAA;AAAA,CAAA;AAAnE,6BACkB,IAAO,GAAA,MAAA,CAAA;AAOlB,MAAM,iBAAiB,mBAC5B,CAAA,4BAAA,EACA,SACE,eAAA,CAAA,KAAA,EACA,KACA,IACa,EAAA;AA1CjB,EAAA,IAAA,EAAA,CAAA;AA2CI,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,GAAA,GACV,UAAW,CAAA,kBAAA,CAAA,CAAA;AACf,EAAM,MAAA,EAAE,UAAY,EAAA,kBAAA,GAAqB,KAAU,EAAA,GAAA,KAAA,CAAA;AAEnD,EAAM,MAAA,SAAA,GAAY,KAAK,OAAW,IAAA,IAAA,CAAA;AAClC,EAAA,MAAM,aAAa,kBAAsB,IAAA,mBAAA,CAAA;AAOzC,EAAM,MAAA,YAAA,GAAe,CAAC,aAAc,CAAA,IAAA,CAAK,CAAC,IAAS,KAAA,CAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,SAAQ,IAAK,CAAA,GAAA,CAAA,CAAA;AACtE,EAAA,MAAM,gBAAmB,GAAA,CAAA,CAAA,EAAA,GAAA,aAAA,CAAc,CAAd,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAkB,SAAQ,IAAK,CAAA,GAAA,CAAA;AAExD,EAAI,IAAA,CAAC,YAAgB,IAAA,CAAC,gBAAkB,EAAA;AACtC,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAAA,GAAA;AAGT,EAAI,IAAA,CAAC,gBAAgB,gBAAkB,EAAA;AACrC,IAAA,2CAAQ,sBAAD,EAAA,IAAA,CAAA,CAAA;AAAA,GAAA;AAGT,EAAA,IAAA,CAAK,OAAO,KAAM,CAAA,IAAA,CAAA;AAElB,EAAA,2CACG,IAAD,EAAA;AAAA,IACE,GAAA;AAAA,IACA,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,IACvB,KAAA,EAAO,mBAAK,UAAW,CAAA,KAAA,CAAA;AAAA,IACvB,iBAAe,UAAc,IAAA,KAAA,CAAA;AAAA,IAC7B,gBAAc,SAAa,IAAA,KAAA,CAAA;AAAA,GAE1B,EAAA,SAAA,mBACE,KAAA,CAAA,aAAA,CAAA,UAAA,CAAW,IAAZ,EAAA;AAAA,IACE,WAAY,EAAA,MAAA;AAAA,IACZ,UAAU,EAAA,IAAA;AAAA,IACV,MAAM,IAAS,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA,KAAS,OAAO,IAAO,GAAA,IAAA;AAAA,GAEnD,EAAA,IAAA,CAAK,QAGR,CAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAA,cAAA,CAAA;AAAA,IAAoB,UAAA;AAAA,GAAA,EAA4B,QAC7C,IAAK,CAAA,QAAA,CAAA,EAGT,CAAC,SAAA,wCAAc,oBAAD,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
1
+ {"version":3,"file":"BreadcrumbItem.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItem.tsx"],"sourcesContent":["import React, { useContext, ForwardedRef } from 'react';\nimport type { BreadcrumbProps as RACBreadcrumbProps } from 'react-aria-components';\nimport { CollectionNode } from 'react-aria/private/collections/BaseCollection';\nimport { createLeafComponent } from 'react-aria/CollectionBuilder';\nimport {\n useSapphireStyleProps,\n useThemeCheck,\n SapphireStyleProps,\n Typography,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu';\nimport { BreadcrumbItemNode } from './types';\nimport {\n BreadcrumbItemLink,\n BreadcrumbItemLinkProps,\n} from './BreadcrumbItemLink';\n\nexport type BreadcrumbItemProps = {\n isDisabled?: boolean;\n} & SapphireStyleProps &\n GlobalDomAttributes &\n Pick<RACBreadcrumbProps, 'children'> &\n BreadcrumbItemLinkProps;\n\nclass BreadcrumbItemCollectionNode extends CollectionNode<unknown> {\n static readonly type = 'item';\n}\n\n/**\n * The implementation is based on React Aria's BreadcrumbItem, with added support for\n * overflow menu data handling.\n */\nexport const BreadcrumbItem = createLeafComponent(\n BreadcrumbItemCollectionNode,\n function BreadcrumbItem(\n props: BreadcrumbItemProps,\n ref: ForwardedRef<HTMLLIElement>,\n node: BreadcrumbItemNode\n ): JSX.Element {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n const {\n size,\n overflowNodes,\n isDisabled: breadcrumbsDisabled,\n } = useContext(BreadcrumbsContext);\n const { isDisabled: individualDisabled = false } = props;\n\n const isCurrent = node.nextKey == null;\n const isDisabled = individualDisabled || breadcrumbsDisabled;\n\n /**\n * The item should not be rendered if it's in the overflow indexes.\n * The only exception is the first overflow menu item, which will be rendered\n * as the overflow menu trigger.\n */\n const shouldRender = !overflowNodes.some((item) => item?.key === node.key);\n const showOverflowMenu = overflowNodes[0]?.key === node.key;\n\n if (!shouldRender && !showOverflowMenu) {\n return <></>;\n }\n\n if (!shouldRender && showOverflowMenu) {\n return <BreadcrumbOverflowMenu />;\n }\n\n node.href = props.href;\n\n return (\n <li\n ref={ref}\n className={clsx(styles['sapphire-breadcrumbs__item'])}\n style={{ ...styleProps.style }}\n data-disabled={isDisabled || undefined}\n data-current={isCurrent || undefined}\n >\n {isCurrent ? (\n <Typography.Body\n elementType=\"span\"\n isSemibold\n size={size === 'lg' ? 'md' : size === 'md' ? 'sm' : 'xs'}\n >\n {node.rendered}\n </Typography.Body>\n ) : (\n <BreadcrumbItemLink isDisabled={isDisabled} {...props}>\n {node.rendered}\n </BreadcrumbItemLink>\n )}\n {!isCurrent && <BreadcrumbsSeparator />}\n </li>\n );\n }\n);\n"],"names":["BreadcrumbItem"],"mappings":";;;;;;;;;;;AA6BA,MAAM,qCAAqC,cAAA,CAAwB;AAAA,EACjE,OAAgB,IAAA,GAAO,MAAA;AACzB;AAMO,MAAM,cAAA,GAAiB,mBAAA;AAAA,EAC5B,4BAAA;AAAA,EACA,SAASA,eAAAA,CACP,KAAA,EACA,GAAA,EACA,IAAA,EACa;AACb,IAAA,aAAA,EAAc;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,IAAA,MAAM;AAAA,MACJ,IAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA,EAAY;AAAA,KACd,GAAI,WAAW,kBAAkB,CAAA;AACjC,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,GAAqB,KAAA,EAAM,GAAI,KAAA;AAEnD,IAAA,MAAM,SAAA,GAAY,KAAK,OAAA,IAAW,IAAA;AAClC,IAAA,MAAM,aAAa,kBAAA,IAAsB,mBAAA;AAOzC,IAAA,MAAM,YAAA,GAAe,CAAC,aAAA,CAAc,IAAA,CAAK,CAAC,IAAA,KAAS,IAAA,EAAM,GAAA,KAAQ,IAAA,CAAK,GAAG,CAAA;AACzE,IAAA,MAAM,gBAAA,GAAmB,aAAA,CAAc,CAAC,CAAA,EAAG,QAAQ,IAAA,CAAK,GAAA;AAExD,IAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,gBAAA,EAAkB;AACtC,MAAA,uBAAO,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAE,CAAA;AAAA,IACX;AAEA,IAAA,IAAI,CAAC,gBAAgB,gBAAA,EAAkB;AACrC,MAAA,2CAAQ,sBAAA,EAAA,IAAuB,CAAA;AAAA,IACjC;AAEA,IAAA,IAAA,CAAK,OAAO,KAAA,CAAM,IAAA;AAElB,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,4BAA4B,CAAC,CAAA;AAAA,QACpD,KAAA,EAAO,EAAE,GAAG,UAAA,CAAW,KAAA,EAAM;AAAA,QAC7B,iBAAe,UAAA,IAAc,MAAA;AAAA,QAC7B,gBAAc,SAAA,IAAa;AAAA,OAAA;AAAA,MAE1B,SAAA,mBACC,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA,CAAW,IAAA;AAAA,QAAX;AAAA,UACC,WAAA,EAAY,MAAA;AAAA,UACZ,UAAA,EAAU,IAAA;AAAA,UACV,MAAM,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA,KAAS,OAAO,IAAA,GAAO;AAAA,SAAA;AAAA,QAEnD,IAAA,CAAK;AAAA,0BAGR,KAAA,CAAA,aAAA,CAAC,kBAAA,EAAA,EAAmB,YAAyB,GAAG,KAAA,EAAA,EAC7C,KAAK,QACR,CAAA;AAAA,MAED,CAAC,SAAA,oBAAa,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,IAAqB;AAAA,KACvC;AAAA,EAEJ;AACF;;;;"}
@@ -3,56 +3,28 @@ import { useThemeCheck, useSapphireStyleProps, Button } from '@danske/sapphire-r
3
3
  import { BreadcrumbsContext } from './Breadcrumbs.js';
4
4
  import { BreadcrumbItemStatic } from './BreadcrumbItemStatic.js';
5
5
 
6
- var __defProp = Object.defineProperty;
7
- var __defProps = Object.defineProperties;
8
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
9
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
10
- var __hasOwnProp = Object.prototype.hasOwnProperty;
11
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
- var __spreadValues = (a, b) => {
14
- for (var prop in b || (b = {}))
15
- if (__hasOwnProp.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- if (__getOwnPropSymbols)
18
- for (var prop of __getOwnPropSymbols(b)) {
19
- if (__propIsEnum.call(b, prop))
20
- __defNormalProp(a, prop, b[prop]);
21
- }
22
- return a;
23
- };
24
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
- var __objRest = (source, exclude) => {
26
- var target = {};
27
- for (var prop in source)
28
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
- target[prop] = source[prop];
30
- if (source != null && __getOwnPropSymbols)
31
- for (var prop of __getOwnPropSymbols(source)) {
32
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
- target[prop] = source[prop];
34
- }
35
- return target;
36
- };
37
- const BreadcrumbItemLink = forwardRef(function BreadcrumbItemLink2(_a, ref) {
38
- var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
6
+ const BreadcrumbItemLink = forwardRef(function BreadcrumbItemLink2({ children, ...props }, ref) {
39
7
  useThemeCheck();
40
8
  const { styleProps: sapphireStyleProps } = useSapphireStyleProps(props);
41
- const _a2 = sapphireStyleProps, { style, className } = _a2, styleProps = __objRest(_a2, ["style", "className"]);
9
+ const { style, className, ...styleProps } = sapphireStyleProps;
42
10
  const { size } = useContext(BreadcrumbsContext);
43
11
  if (!props.href && !props.UNSAFE_onClick) {
44
- return /* @__PURE__ */ React.createElement(BreadcrumbItemStatic, __spreadProps(__spreadValues({}, props), {
45
- size
46
- }), children);
12
+ return /* @__PURE__ */ React.createElement(BreadcrumbItemStatic, { ...props, size }, children);
47
13
  }
48
- return /* @__PURE__ */ React.createElement(Button, __spreadProps(__spreadValues(__spreadValues({}, props), styleProps), {
49
- UNSAFE_className: className,
50
- UNSAFE_style: __spreadValues({}, style),
51
- ref,
52
- size,
53
- variant: "tertiary",
54
- isDisabled: props.isDisabled
55
- }), children);
14
+ return /* @__PURE__ */ React.createElement(
15
+ Button,
16
+ {
17
+ ...props,
18
+ ...styleProps,
19
+ UNSAFE_className: className,
20
+ UNSAFE_style: { ...style },
21
+ ref,
22
+ size,
23
+ variant: "tertiary",
24
+ isDisabled: props.isDisabled
25
+ },
26
+ children
27
+ );
56
28
  });
57
29
  BreadcrumbItemLink.displayName = "BreadcrumbItemLink";
58
30
 
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbItemLink.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItemLink.tsx"],"sourcesContent":["import React, { useContext, forwardRef } from 'react';\nimport {\n Button,\n ButtonProps,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FocusableRef } from '@react-types/shared';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbItemStatic } from './BreadcrumbItemStatic';\n\nexport type BreadcrumbItemLinkProps = Pick<\n ButtonProps<'a'>,\n | 'children'\n | 'href'\n | 'hrefLang'\n | 'target'\n | 'rel'\n | 'isDisabled'\n | 'icon'\n // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'aria-details'\n | 'UNSAFE_onClick'\n> &\n SapphireStyleProps &\n GlobalDomAttributes;\n\nexport const BreadcrumbItemLink = forwardRef(function BreadcrumbItemLink(\n { children, ...props }: BreadcrumbItemLinkProps,\n ref: FocusableRef<HTMLAnchorElement>\n): JSX.Element {\n useThemeCheck();\n const { styleProps: sapphireStyleProps } = useSapphireStyleProps(props);\n const { style, className, ...styleProps } = sapphireStyleProps;\n const { size } = useContext(BreadcrumbsContext);\n\n if (!props.href && !props.UNSAFE_onClick) {\n return (\n <BreadcrumbItemStatic {...props} size={size}>\n {children}\n </BreadcrumbItemStatic>\n );\n }\n\n return (\n <Button\n {...props}\n {...styleProps}\n UNSAFE_className={className}\n UNSAFE_style={{ ...style }}\n ref={ref}\n size={size}\n variant=\"tertiary\"\n isDisabled={props.isDisabled}\n >\n {children}\n </Button>\n );\n});\n\nBreadcrumbItemLink.displayName = 'BreadcrumbItemLink';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,kBAAqB,GAAA,UAAA,CAAW,SAC3C,mBAAA,CAAA,EAAA,EACA,GACa,EAAA;AAFb,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,QAAA,EAAA,GAAA,EAAA,EAAe,KAAf,GAAA,SAAA,CAAA,EAAA,EAAe,CAAb,UAAA,CAAA,CAAA,CAAA;AAGF,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAY,EAAA,kBAAA,EAAA,GAAuB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AACjE,EAAA,MAA4C,0BAApC,EAAO,KAAA,EAAA,SAAA,EAAA,GAA6B,KAAf,UAAe,GAAA,SAAA,CAAA,GAAA,EAAf,CAArB,OAAO,EAAA,WAAA,CAAA,CAAA,CAAA;AACf,EAAM,MAAA,EAAE,SAAS,UAAW,CAAA,kBAAA,CAAA,CAAA;AAE5B,EAAA,IAAI,CAAC,KAAA,CAAM,IAAQ,IAAA,CAAC,MAAM,cAAgB,EAAA;AACxC,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAA0B,KAA1B,CAAA,EAAA;AAAA,MAAiC,IAAA;AAAA,KAC9B,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,GAAA;AAKP,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAD,aACM,CAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EACA,UAFN,CAAA,EAAA;AAAA,IAGE,gBAAkB,EAAA,SAAA;AAAA,IAClB,cAAc,cAAK,CAAA,EAAA,EAAA,KAAA,CAAA;AAAA,IACnB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAQ,EAAA,UAAA;AAAA,IACR,YAAY,KAAM,CAAA,UAAA;AAAA,GAEjB,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,CAAA,EAAA;AAKP,kBAAA,CAAmB,WAAc,GAAA,oBAAA;;;;"}
1
+ {"version":3,"file":"BreadcrumbItemLink.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItemLink.tsx"],"sourcesContent":["import React, { useContext, forwardRef } from 'react';\nimport {\n Button,\n ButtonProps,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FocusableRef } from '@react-types/shared';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbItemStatic } from './BreadcrumbItemStatic';\n\nexport type BreadcrumbItemLinkProps = Pick<\n ButtonProps<'a'>,\n | 'children'\n | 'href'\n | 'hrefLang'\n | 'target'\n | 'rel'\n | 'isDisabled'\n | 'icon'\n // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'aria-details'\n | 'UNSAFE_onClick'\n> &\n SapphireStyleProps &\n GlobalDomAttributes;\n\nexport const BreadcrumbItemLink = forwardRef(function BreadcrumbItemLink(\n { children, ...props }: BreadcrumbItemLinkProps,\n ref: FocusableRef<HTMLAnchorElement>\n): JSX.Element {\n useThemeCheck();\n const { styleProps: sapphireStyleProps } = useSapphireStyleProps(props);\n const { style, className, ...styleProps } = sapphireStyleProps;\n const { size } = useContext(BreadcrumbsContext);\n\n if (!props.href && !props.UNSAFE_onClick) {\n return (\n <BreadcrumbItemStatic {...props} size={size}>\n {children}\n </BreadcrumbItemStatic>\n );\n }\n\n return (\n <Button\n {...props}\n {...styleProps}\n UNSAFE_className={className}\n UNSAFE_style={{ ...style }}\n ref={ref}\n size={size}\n variant=\"tertiary\"\n isDisabled={props.isDisabled}\n >\n {children}\n </Button>\n );\n});\n\nBreadcrumbItemLink.displayName = 'BreadcrumbItemLink';\n"],"names":["BreadcrumbItemLink"],"mappings":";;;;;AAgCO,MAAM,kBAAA,GAAqB,WAAW,SAASA,mBAAAA,CACpD,EAAE,QAAA,EAAU,GAAG,KAAA,EAAM,EACrB,GAAA,EACa;AACb,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,EAAmB,GAAI,sBAAsB,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,KAAA,EAAO,SAAA,EAAW,GAAG,YAAW,GAAI,kBAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,UAAA,CAAW,kBAAkB,CAAA;AAE9C,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,IAAQ,CAAC,MAAM,cAAA,EAAgB;AACxC,IAAA,uBACE,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,EAAsB,GAAG,KAAA,EAAO,QAC9B,QACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,gBAAA,EAAkB,SAAA;AAAA,MAClB,YAAA,EAAc,EAAE,GAAG,KAAA,EAAM;AAAA,MACzB,GAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,YAAY,KAAA,CAAM;AAAA,KAAA;AAAA,IAEjB;AAAA,GACH;AAEJ,CAAC;AAED,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;"}
@@ -2,55 +2,34 @@ import React, { forwardRef } from 'react';
2
2
  import { useThemeCheck, useSapphireStyleProps, TooltipIfNeeded } from '@danske/sapphire-react';
3
3
  import clsx from 'clsx';
4
4
  import styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';
5
- import { mergeRefs } from '@react-aria/utils';
5
+ import { mergeRefs } from 'react-aria/mergeRefs';
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 BreadcrumbItemStatic = forwardRef(function BreadcrumbItemStatic2(_a, ref) {
39
- var _b = _a, { size } = _b, props = __objRest(_b, ["size"]);
7
+ const BreadcrumbItemStatic = forwardRef(function BreadcrumbItemStatic2({ size, ...props }, ref) {
40
8
  useThemeCheck();
41
9
  const { styleProps } = useSapphireStyleProps(props);
42
- return /* @__PURE__ */ React.createElement(TooltipIfNeeded, {
43
- title: props.children
44
- }, (tooltipContentRef, tooltipProps) => {
45
- const positioningRef = tooltipProps == null ? void 0 : tooltipProps.ref;
46
- return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, tooltipProps), {
47
- ref: mergeRefs(ref, tooltipContentRef, positioningRef),
48
- className: clsx(styles["sapphire-breadcrumbs__item--static"], {
49
- [styles["sapphire-breadcrumbs__item--static--sm"]]: size === "sm",
50
- [styles["sapphire-breadcrumbs__item--static--lg"]]: size === "lg"
51
- }, styleProps.className),
52
- style: styleProps.style
53
- }), props.children);
10
+ return /* @__PURE__ */ React.createElement(TooltipIfNeeded, { title: props.children }, (tooltipContentRef, tooltipProps) => {
11
+ const positioningRef = tooltipProps?.ref;
12
+ return /* @__PURE__ */ React.createElement(
13
+ "span",
14
+ {
15
+ ...tooltipProps,
16
+ ref: mergeRefs(
17
+ ref,
18
+ tooltipContentRef,
19
+ positioningRef
20
+ ),
21
+ className: clsx(
22
+ styles["sapphire-breadcrumbs__item--static"],
23
+ {
24
+ [styles["sapphire-breadcrumbs__item--static--sm"]]: size === "sm",
25
+ [styles["sapphire-breadcrumbs__item--static--lg"]]: size === "lg"
26
+ },
27
+ styleProps.className
28
+ ),
29
+ style: styleProps.style
30
+ },
31
+ props.children
32
+ );
54
33
  });
55
34
  });
56
35
 
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbItemStatic.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItemStatic.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n GlobalDomAttributes,\n TooltipIfNeeded,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { mergeRefs } from '@react-aria/utils';\n\nexport type BreadcrumbItemStaticProps = Pick<\n React.HTMLAttributes<HTMLSpanElement>,\n 'children'\n> &\n SapphireStyleProps &\n GlobalDomAttributes & { size: 'sm' | 'md' | 'lg' };\n\nexport const BreadcrumbItemStatic = forwardRef<\n HTMLSpanElement,\n BreadcrumbItemStaticProps\n>(function BreadcrumbItemStatic({ size, ...props }, ref): JSX.Element {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n return (\n <TooltipIfNeeded<HTMLSpanElement> title={props.children}>\n {(tooltipContentRef, tooltipProps) => {\n const positioningRef = tooltipProps?.ref;\n return (\n <span\n {...tooltipProps}\n ref={\n mergeRefs(\n ref,\n tooltipContentRef,\n positioningRef\n ) as React.LegacyRef<HTMLSpanElement>\n }\n className={clsx(\n styles['sapphire-breadcrumbs__item--static'],\n {\n [styles['sapphire-breadcrumbs__item--static--sm']]:\n size === 'sm',\n [styles['sapphire-breadcrumbs__item--static--lg']]:\n size === 'lg',\n },\n styleProps.className\n )}\n style={styleProps.style}\n >\n {props.children}\n </span>\n );\n }}\n </TooltipIfNeeded>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,oBAAuB,GAAA,UAAA,CAGlC,SAA8B,qBAAA,CAAA,EAAA,EAAoB,GAAkB,EAAA;AAAtC,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,IAAA,EAAA,GAAA,EAAA,EAAW,KAAX,GAAA,SAAA,CAAA,EAAA,EAAW,CAAT,MAAA,CAAA,CAAA,CAAA;AAChC,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,2CACG,eAAD,EAAA;AAAA,IAAkC,OAAO,KAAM,CAAA,QAAA;AAAA,GAC5C,EAAA,CAAC,mBAAmB,YAAiB,KAAA;AACpC,IAAA,MAAM,iBAAiB,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,GAAA,CAAA;AACrC,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,YADN,CAAA,EAAA;AAAA,MAEE,GAAA,EACE,SACE,CAAA,GAAA,EACA,iBACA,EAAA,cAAA,CAAA;AAAA,MAGJ,SAAA,EAAW,IACT,CAAA,MAAA,CAAO,oCACP,CAAA,EAAA;AAAA,QACG,CAAA,MAAA,CAAO,4CACN,IAAS,KAAA,IAAA;AAAA,QACV,CAAA,MAAA,CAAO,4CACN,IAAS,KAAA,IAAA;AAAA,OAAA,EAEb,UAAW,CAAA,SAAA,CAAA;AAAA,MAEb,OAAO,UAAW,CAAA,KAAA;AAAA,KAAA,CAAA,EAEjB,KAAM,CAAA,QAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
1
+ {"version":3,"file":"BreadcrumbItemStatic.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbItemStatic.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n GlobalDomAttributes,\n TooltipIfNeeded,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { mergeRefs } from 'react-aria/mergeRefs';\n\nexport type BreadcrumbItemStaticProps = Pick<\n React.HTMLAttributes<HTMLSpanElement>,\n 'children'\n> &\n SapphireStyleProps &\n GlobalDomAttributes & { size: 'sm' | 'md' | 'lg' };\n\nexport const BreadcrumbItemStatic = forwardRef<\n HTMLSpanElement,\n BreadcrumbItemStaticProps\n>(function BreadcrumbItemStatic({ size, ...props }, ref): JSX.Element {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n return (\n <TooltipIfNeeded<HTMLSpanElement> title={props.children}>\n {(tooltipContentRef, tooltipProps) => {\n const positioningRef = tooltipProps?.ref;\n return (\n <span\n {...tooltipProps}\n ref={\n mergeRefs(\n ref,\n tooltipContentRef,\n positioningRef\n ) as React.LegacyRef<HTMLSpanElement>\n }\n className={clsx(\n styles['sapphire-breadcrumbs__item--static'],\n {\n [styles['sapphire-breadcrumbs__item--static--sm']]:\n size === 'sm',\n [styles['sapphire-breadcrumbs__item--static--lg']]:\n size === 'lg',\n },\n styleProps.className\n )}\n style={styleProps.style}\n >\n {props.children}\n </span>\n );\n }}\n </TooltipIfNeeded>\n );\n});\n"],"names":["BreadcrumbItemStatic"],"mappings":";;;;;;AAmBO,MAAM,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CAAqB,EAAE,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,EAAkB;AACpE,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,2CACG,eAAA,EAAA,EAAiC,KAAA,EAAO,MAAM,QAAA,EAAA,EAC5C,CAAC,mBAAmB,YAAA,KAAiB;AACpC,IAAA,MAAM,iBAAiB,YAAA,EAAc,GAAA;AACrC,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,GAAA,EACE,SAAA;AAAA,UACE,GAAA;AAAA,UACA,iBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEF,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,oCAAoC,CAAA;AAAA,UAC3C;AAAA,YACE,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS,IAAA;AAAA,YACX,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS;AAAA,WACb;AAAA,UACA,UAAA,CAAW;AAAA,SACb;AAAA,QACA,OAAO,UAAA,CAAW;AAAA,OAAA;AAAA,MAEjB,KAAA,CAAM;AAAA,KACT;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}
@@ -6,17 +6,24 @@ import { BreadcrumbsSeparator } from './BreadcrumbsSeparator.js';
6
6
 
7
7
  const BreadcrumbOverflowMenu = () => {
8
8
  const { size, overflowNodes } = useContext(BreadcrumbsContext);
9
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Menu, {
10
- triggerElement: /* @__PURE__ */ React.createElement(IconButton, {
11
- "aria-label": "Show more breadcrumbs",
12
- size
13
- }, /* @__PURE__ */ React.createElement(OverflowMenuHorizontal, null))
14
- }, overflowNodes.map((item) => !item ? null : /* @__PURE__ */ React.createElement(MenuItem, {
15
- key: item.key,
16
- id: item.key,
17
- href: item.href,
18
- isDisabled: !item.href
19
- }, item.rendered))), /* @__PURE__ */ React.createElement(BreadcrumbsSeparator, null));
9
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
10
+ Menu,
11
+ {
12
+ triggerElement: /* @__PURE__ */ React.createElement(IconButton, { "aria-label": "Show more breadcrumbs", size }, /* @__PURE__ */ React.createElement(OverflowMenuHorizontal, null))
13
+ },
14
+ overflowNodes.map(
15
+ (item) => !item ? null : /* @__PURE__ */ React.createElement(
16
+ MenuItem,
17
+ {
18
+ key: item.key,
19
+ id: item.key,
20
+ href: item.href,
21
+ isDisabled: !item.href
22
+ },
23
+ item.rendered
24
+ )
25
+ )
26
+ ), /* @__PURE__ */ React.createElement(BreadcrumbsSeparator, null));
20
27
  };
21
28
 
22
29
  export { BreadcrumbOverflowMenu };
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbOverflowMenu.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbOverflowMenu.tsx"],"sourcesContent":["import { Menu, MenuItem, IconButton } from '@danske/sapphire-react';\nimport { OverflowMenuHorizontal } from '@danske/sapphire-icons/react';\nimport React from 'react';\nimport { useContext } from 'react';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\n\n/**\n * Component that is being rendered in the case of overflowed breadcrumbs.\n * It is an internal component, so it's automatically rendered when the Breadcrumb\n * component detects overflow.\n */\nexport const BreadcrumbOverflowMenu = (): JSX.Element => {\n const { size, overflowNodes } = useContext(BreadcrumbsContext);\n\n return (\n <>\n <Menu\n triggerElement={\n <IconButton aria-label=\"Show more breadcrumbs\" size={size}>\n <OverflowMenuHorizontal />\n </IconButton>\n }\n >\n {overflowNodes.map((item) =>\n !item ? null : (\n <MenuItem\n key={item.key}\n id={item.key}\n href={item.href}\n isDisabled={!item.href}\n >\n {item.rendered}\n </MenuItem>\n )\n )}\n </Menu>\n <BreadcrumbsSeparator />\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,yBAAyB,MAAmB;AACvD,EAAM,MAAA,EAAE,IAAM,EAAA,aAAA,EAAA,GAAkB,UAAW,CAAA,kBAAA,CAAA,CAAA;AAE3C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAD,EAAA;AAAA,IACE,cAAA,sCACG,UAAD,EAAA;AAAA,MAAY,YAAW,EAAA,uBAAA;AAAA,MAAwB,IAAA;AAAA,KAAA,sCAC5C,sBAAD,EAAA,IAAA,CAAA,CAAA;AAAA,GAIH,EAAA,aAAA,CAAc,IAAI,CAAC,IAAA,KAClB,CAAC,IAAO,GAAA,IAAA,uCACL,QAAD,EAAA;AAAA,IACE,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAI,IAAK,CAAA,GAAA;AAAA,IACT,MAAM,IAAK,CAAA,IAAA;AAAA,IACX,UAAA,EAAY,CAAC,IAAK,CAAA,IAAA;AAAA,GAEjB,EAAA,IAAA,CAAK,QAKd,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"BreadcrumbOverflowMenu.js","sources":["../../../../src/Breadcrumbs/src/BreadcrumbOverflowMenu.tsx"],"sourcesContent":["import { Menu, MenuItem, IconButton } from '@danske/sapphire-react';\nimport { OverflowMenuHorizontal } from '@danske/sapphire-icons/react';\nimport React from 'react';\nimport { useContext } from 'react';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\n\n/**\n * Component that is being rendered in the case of overflowed breadcrumbs.\n * It is an internal component, so it's automatically rendered when the Breadcrumb\n * component detects overflow.\n */\nexport const BreadcrumbOverflowMenu = (): JSX.Element => {\n const { size, overflowNodes } = useContext(BreadcrumbsContext);\n\n return (\n <>\n <Menu\n triggerElement={\n <IconButton aria-label=\"Show more breadcrumbs\" size={size}>\n <OverflowMenuHorizontal />\n </IconButton>\n }\n >\n {overflowNodes.map((item) =>\n !item ? null : (\n <MenuItem\n key={item.key}\n id={item.key}\n href={item.href}\n isDisabled={!item.href}\n >\n {item.rendered}\n </MenuItem>\n )\n )}\n </Menu>\n <BreadcrumbsSeparator />\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,yBAAyB,MAAmB;AACvD,EAAA,MAAM,EAAE,IAAA,EAAM,aAAA,EAAc,GAAI,WAAW,kBAAkB,CAAA;AAE7D,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAA,sCACG,UAAA,EAAA,EAAW,YAAA,EAAW,yBAAwB,IAAA,EAAA,kBAC7C,KAAA,CAAA,aAAA,CAAC,4BAAuB,CAC1B;AAAA,KAAA;AAAA,IAGD,aAAA,CAAc,GAAA;AAAA,MAAI,CAAC,IAAA,KAClB,CAAC,IAAA,GAAO,IAAA,mBACN,KAAA,CAAA,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAK,IAAA,CAAK,GAAA;AAAA,UACV,IAAI,IAAA,CAAK,GAAA;AAAA,UACT,MAAM,IAAA,CAAK,IAAA;AAAA,UACX,UAAA,EAAY,CAAC,IAAA,CAAK;AAAA,SAAA;AAAA,QAEjB,IAAA,CAAK;AAAA;AACR;AAEJ,GACF,kBACA,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,IAAqB,CACxB,CAAA;AAEJ;;;;"}
@@ -1,82 +1,65 @@
1
1
  import React, { createContext, forwardRef, useRef, useContext } from 'react';
2
- import { useBreadcrumbs } from '@react-aria/breadcrumbs';
3
- import { CollectionBuilder, Collection } from '@react-aria/collections';
4
- import { filterDOMProps, mergeProps } from '@react-aria/utils';
2
+ import { useBreadcrumbs } from 'react-aria/useBreadcrumbs';
3
+ import { Collection } from 'react-aria/Collection';
4
+ import { CollectionBuilder } from 'react-aria/CollectionBuilder';
5
+ import { filterDOMProps } from 'react-aria/filterDOMProps';
6
+ import { mergeProps } from 'react-aria/mergeProps';
5
7
  import { useContextProps, BreadcrumbsContext as BreadcrumbsContext$1, CollectionRendererContext } from 'react-aria-components';
6
8
  import { useBreadcrumbThreshold } from './useBreadcrumbThreshold.js';
7
9
  import { useSapphireStyleProps } from '@danske/sapphire-react';
8
10
  import styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';
9
11
  import clsx from 'clsx';
10
12
 
11
- var __defProp = Object.defineProperty;
12
- var __defProps = Object.defineProperties;
13
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
14
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
15
- var __hasOwnProp = Object.prototype.hasOwnProperty;
16
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
17
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
18
- var __spreadValues = (a, b) => {
19
- for (var prop in b || (b = {}))
20
- if (__hasOwnProp.call(b, prop))
21
- __defNormalProp(a, prop, b[prop]);
22
- if (__getOwnPropSymbols)
23
- for (var prop of __getOwnPropSymbols(b)) {
24
- if (__propIsEnum.call(b, prop))
25
- __defNormalProp(a, prop, b[prop]);
26
- }
27
- return a;
28
- };
29
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
30
- var __objRest = (source, exclude) => {
31
- var target = {};
32
- for (var prop in source)
33
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
34
- target[prop] = source[prop];
35
- if (source != null && __getOwnPropSymbols)
36
- for (var prop of __getOwnPropSymbols(source)) {
37
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
38
- target[prop] = source[prop];
39
- }
40
- return target;
41
- };
42
13
  const BreadcrumbsContext = createContext({ size: "md", overflowNodes: [] });
43
- const Breadcrumbs = forwardRef(function Breadcrumbs2(_a, fwdRef) {
44
- var _b = _a, { maxWidth, size = "md" } = _b, props = __objRest(_b, ["maxWidth", "size"]);
14
+ const Breadcrumbs = forwardRef(function Breadcrumbs2({ maxWidth, size = "md", ...props }, fwdRef) {
45
15
  const [RACprops, ref] = useContextProps(props, fwdRef, BreadcrumbsContext$1);
46
16
  const { styleProps } = useSapphireStyleProps(RACprops);
47
17
  const containerRef = useRef(null);
48
18
  const { CollectionRoot } = useContext(CollectionRendererContext);
49
19
  const { navProps } = useBreadcrumbs(RACprops);
50
20
  const DOMProps = filterDOMProps(RACprops, { global: true });
51
- return /* @__PURE__ */ React.createElement(CollectionBuilder, {
52
- content: /* @__PURE__ */ React.createElement(Collection, __spreadValues({}, RACprops))
53
- }, (collection) => {
54
- const { overflowNodes } = useBreadcrumbThreshold(collection.size, containerRef, ref);
55
- const keys = Array.from(collection.getKeys());
56
- return /* @__PURE__ */ React.createElement("div", {
57
- ref: containerRef,
58
- style: __spreadProps(__spreadValues({}, styleProps.style), {
59
- maxWidth,
60
- display: "flex"
61
- })
62
- }, /* @__PURE__ */ React.createElement("ol", __spreadProps(__spreadValues({
21
+ return /* @__PURE__ */ React.createElement(CollectionBuilder, { content: /* @__PURE__ */ React.createElement(Collection, { ...RACprops }) }, (collection) => {
22
+ const { overflowNodes } = useBreadcrumbThreshold(
23
+ collection.size,
24
+ containerRef,
63
25
  ref
64
- }, mergeProps(DOMProps, navProps)), {
65
- className: clsx(styles["sapphire-breadcrumbs"], {
66
- [styles["sapphire-breadcrumbs--sm"]]: size === "sm",
67
- [styles["sapphire-breadcrumbs--lg"]]: size === "lg"
68
- })
69
- }), /* @__PURE__ */ React.createElement(BreadcrumbsContext.Provider, {
70
- value: {
71
- size,
72
- overflowNodes: overflowNodes.map((index) => collection.getItem(keys[index])),
73
- isDisabled: RACprops.isDisabled
74
- }
75
- }, /* @__PURE__ */ React.createElement(BreadcrumbsContext$1.Provider, {
76
- value: RACprops
77
- }, /* @__PURE__ */ React.createElement(CollectionRoot, {
78
- collection
79
- })))));
26
+ );
27
+ const keys = Array.from(collection.getKeys());
28
+ return /* @__PURE__ */ React.createElement(
29
+ "div",
30
+ {
31
+ ref: containerRef,
32
+ style: {
33
+ ...styleProps.style,
34
+ maxWidth,
35
+ display: "flex"
36
+ }
37
+ },
38
+ /* @__PURE__ */ React.createElement(
39
+ "ol",
40
+ {
41
+ ref,
42
+ ...mergeProps(DOMProps, navProps),
43
+ className: clsx(styles["sapphire-breadcrumbs"], {
44
+ [styles["sapphire-breadcrumbs--sm"]]: size === "sm",
45
+ [styles["sapphire-breadcrumbs--lg"]]: size === "lg"
46
+ })
47
+ },
48
+ /* @__PURE__ */ React.createElement(
49
+ BreadcrumbsContext.Provider,
50
+ {
51
+ value: {
52
+ size,
53
+ overflowNodes: overflowNodes.map(
54
+ (index) => collection.getItem(keys[index])
55
+ ),
56
+ isDisabled: RACprops.isDisabled
57
+ }
58
+ },
59
+ /* @__PURE__ */ React.createElement(BreadcrumbsContext$1.Provider, { value: RACprops }, /* @__PURE__ */ React.createElement(CollectionRoot, { collection }))
60
+ )
61
+ )
62
+ );
80
63
  });
81
64
  });
82
65
 
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumbs.js","sources":["../../../../src/Breadcrumbs/src/Breadcrumbs.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { useBreadcrumbs } from '@react-aria/breadcrumbs';\nimport { Collection, CollectionBuilder } from '@react-aria/collections';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport { forwardRefType } from '@react-types/shared';\nimport { ForwardedRef, forwardRef, useContext, useRef } from 'react';\nimport {\n BreadcrumbsContext as RACBreadcrumbsContext,\n BreadcrumbsProps as RACBreadcrumbsProps,\n CollectionRendererContext,\n useContextProps,\n} from 'react-aria-components';\nimport { useBreadcrumbThreshold } from './useBreadcrumbThreshold';\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport clsx from 'clsx';\nimport { BreadcrumbItemNode } from './types';\n\nexport type BreadcrumbsProps<T extends object> = Pick<\n RACBreadcrumbsProps<T>,\n 'aria-label' | 'isDisabled' | 'children'\n> & {\n /**\n * The size of the breadcrumbs component.\n *\n * @default 'md'\n */\n size?: 'sm' | 'md' | 'lg';\n /**\n * Maximum width for the breadcrumbs container. When content overflows,\n * it will show an overflow menu with the first and last items.\n */\n maxWidth?: React.CSSProperties['maxWidth'];\n} & SapphireStyleProps &\n GlobalDomAttributes;\n\nexport const BreadcrumbsContext = createContext<{\n size: 'sm' | 'md' | 'lg';\n overflowNodes: (BreadcrumbItemNode | null)[];\n isDisabled?: boolean;\n}>({ size: 'md', overflowNodes: [] });\n\n/**\n * Implementation is based on React Aria's Breadcrumbs component.\n * It was necessary to own the implementation to add support for\n * handling the collection directly, as we need it for the overflow calculation logic.\n */\nexport const Breadcrumbs = (forwardRef as forwardRefType)(function Breadcrumbs<\n T extends object\n>(\n { maxWidth, size = 'md', ...props }: BreadcrumbsProps<T>,\n fwdRef: ForwardedRef<HTMLOListElement>\n) {\n const [RACprops, ref] = useContextProps(props, fwdRef, RACBreadcrumbsContext);\n const { styleProps } = useSapphireStyleProps(RACprops);\n const containerRef = useRef<HTMLDivElement>(null);\n const { CollectionRoot } = useContext(CollectionRendererContext);\n const { navProps } = useBreadcrumbs(RACprops);\n const DOMProps = filterDOMProps(RACprops, { global: true });\n\n return (\n <CollectionBuilder content={<Collection {...RACprops} />}>\n {(collection) => {\n const { overflowNodes } = useBreadcrumbThreshold(\n collection.size,\n containerRef,\n ref\n );\n const keys = Array.from(collection.getKeys());\n return (\n <div\n ref={containerRef}\n style={{\n ...styleProps.style,\n maxWidth,\n display: 'flex',\n }}\n >\n <ol\n ref={ref}\n {...mergeProps(DOMProps, navProps)}\n className={clsx(styles['sapphire-breadcrumbs'], {\n [styles['sapphire-breadcrumbs--sm']]: size === 'sm',\n [styles['sapphire-breadcrumbs--lg']]: size === 'lg',\n })}\n >\n <BreadcrumbsContext.Provider\n value={{\n size,\n overflowNodes: overflowNodes.map((index) =>\n collection.getItem(keys[index])\n ),\n isDisabled: RACprops.isDisabled,\n }}\n >\n <RACBreadcrumbsContext.Provider value={RACprops}>\n <CollectionRoot collection={collection} />\n </RACBreadcrumbsContext.Provider>\n </BreadcrumbsContext.Provider>\n </ol>\n </div>\n );\n }}\n </CollectionBuilder>\n );\n});\n"],"names":["RACBreadcrumbsContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAM,kBAAqB,GAAA,aAAA,CAI/B,EAAE,IAAA,EAAM,MAAM,aAAe,EAAA,EAAA,EAAA,EAAA;AAOzB,MAAM,WAAe,GAAA,UAAA,CAA8B,SAGxD,YAAA,CAAA,EAAA,EACA,MACA,EAAA;AAFA,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,YAAU,IAAO,GAAA,IAAA,EAAA,GAAnB,IAA4B,KAA5B,GAAA,SAAA,CAAA,EAAA,EAA4B,CAA1B,UAAU,EAAA,MAAA,CAAA,CAAA,CAAA;AAGZ,EAAA,MAAM,CAAC,QAAA,EAAU,GAAO,CAAA,GAAA,eAAA,CAAgB,OAAO,MAAQ,EAAAA,oBAAA,CAAA,CAAA;AACvD,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,QAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,eAAe,MAAuB,CAAA,IAAA,CAAA,CAAA;AAC5C,EAAM,MAAA,EAAE,mBAAmB,UAAW,CAAA,yBAAA,CAAA,CAAA;AACtC,EAAM,MAAA,EAAE,aAAa,cAAe,CAAA,QAAA,CAAA,CAAA;AACpC,EAAA,MAAM,QAAW,GAAA,cAAA,CAAe,QAAU,EAAA,EAAE,MAAQ,EAAA,IAAA,EAAA,CAAA,CAAA;AAEpD,EAAA,2CACG,iBAAD,EAAA;AAAA,IAAmB,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,UAAA,EAAD,cAAgB,CAAA,EAAA,EAAA,QAAA,CAAA,CAAA;AAAA,GAAA,EACzC,CAAC,UAAe,KAAA;AACf,IAAA,MAAM,EAAE,aAAA,EAAA,GAAkB,sBACxB,CAAA,UAAA,CAAW,MACX,YACA,EAAA,GAAA,CAAA,CAAA;AAEF,IAAM,MAAA,IAAA,GAAO,KAAM,CAAA,IAAA,CAAK,UAAW,CAAA,OAAA,EAAA,CAAA,CAAA;AACnC,IAAA,2CACG,KAAD,EAAA;AAAA,MACE,GAAK,EAAA,YAAA;AAAA,MACL,KAAA,EAAO,aACF,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,KADT,CAAA,EAAA;AAAA,QAEL,QAAA;AAAA,QACA,OAAS,EAAA,MAAA;AAAA,OAAA,CAAA;AAAA,KAAA,sCAGV,IAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACE,GAAA;AAAA,KACI,EAAA,UAAA,CAAW,UAAU,QAF3B,CAAA,CAAA,EAAA;AAAA,MAGE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,sBAAyB,CAAA,EAAA;AAAA,QAC7C,CAAA,MAAA,CAAO,8BAA8B,IAAS,KAAA,IAAA;AAAA,QAC9C,CAAA,MAAA,CAAO,8BAA8B,IAAS,KAAA,IAAA;AAAA,OAAA,CAAA;AAAA,KAGjD,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,mBAAmB,QAApB,EAAA;AAAA,MACE,KAAO,EAAA;AAAA,QACL,IAAA;AAAA,QACA,eAAe,aAAc,CAAA,GAAA,CAAI,CAAC,KAChC,KAAA,UAAA,CAAW,QAAQ,IAAK,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,QAE1B,YAAY,QAAS,CAAA,UAAA;AAAA,OAAA;AAAA,KAGvB,kBAAA,KAAA,CAAA,aAAA,CAACA,qBAAsB,QAAvB,EAAA;AAAA,MAAgC,KAAO,EAAA,QAAA;AAAA,KAAA,sCACpC,cAAD,EAAA;AAAA,MAAgB,UAAA;AAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
1
+ {"version":3,"file":"Breadcrumbs.js","sources":["../../../../src/Breadcrumbs/src/Breadcrumbs.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { useBreadcrumbs } from 'react-aria/useBreadcrumbs';\nimport { Collection } from 'react-aria/Collection';\nimport { CollectionBuilder } from 'react-aria/CollectionBuilder';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { forwardRefType } from '@react-types/shared';\nimport { ForwardedRef, forwardRef, useContext, useRef } from 'react';\nimport {\n BreadcrumbsContext as RACBreadcrumbsContext,\n BreadcrumbsProps as RACBreadcrumbsProps,\n CollectionRendererContext,\n useContextProps,\n} from 'react-aria-components';\nimport { useBreadcrumbThreshold } from './useBreadcrumbThreshold';\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport clsx from 'clsx';\nimport { BreadcrumbItemNode } from './types';\n\nexport type BreadcrumbsProps<T extends object> = Pick<\n RACBreadcrumbsProps<T>,\n 'aria-label' | 'isDisabled' | 'children'\n> & {\n /**\n * The size of the breadcrumbs component.\n *\n * @default 'md'\n */\n size?: 'sm' | 'md' | 'lg';\n /**\n * Maximum width for the breadcrumbs container. When content overflows,\n * it will show an overflow menu with the first and last items.\n */\n maxWidth?: React.CSSProperties['maxWidth'];\n} & SapphireStyleProps &\n GlobalDomAttributes;\n\nexport const BreadcrumbsContext = createContext<{\n size: 'sm' | 'md' | 'lg';\n overflowNodes: (BreadcrumbItemNode | null)[];\n isDisabled?: boolean;\n}>({ size: 'md', overflowNodes: [] });\n\n/**\n * Implementation is based on React Aria's Breadcrumbs component.\n * It was necessary to own the implementation to add support for\n * handling the collection directly, as we need it for the overflow calculation logic.\n */\nexport const Breadcrumbs = (forwardRef as forwardRefType)(function Breadcrumbs<\n T extends object\n>(\n { maxWidth, size = 'md', ...props }: BreadcrumbsProps<T>,\n fwdRef: ForwardedRef<HTMLOListElement>\n) {\n const [RACprops, ref] = useContextProps(props, fwdRef, RACBreadcrumbsContext);\n const { styleProps } = useSapphireStyleProps(RACprops);\n const containerRef = useRef<HTMLDivElement>(null);\n const { CollectionRoot } = useContext(CollectionRendererContext);\n const { navProps } = useBreadcrumbs(RACprops);\n const DOMProps = filterDOMProps(RACprops, { global: true });\n\n return (\n <CollectionBuilder content={<Collection {...RACprops} />}>\n {(collection) => {\n const { overflowNodes } = useBreadcrumbThreshold(\n collection.size,\n containerRef,\n ref\n );\n const keys = Array.from(collection.getKeys());\n return (\n <div\n ref={containerRef}\n style={{\n ...styleProps.style,\n maxWidth,\n display: 'flex',\n }}\n >\n <ol\n ref={ref}\n {...mergeProps(DOMProps, navProps)}\n className={clsx(styles['sapphire-breadcrumbs'], {\n [styles['sapphire-breadcrumbs--sm']]: size === 'sm',\n [styles['sapphire-breadcrumbs--lg']]: size === 'lg',\n })}\n >\n <BreadcrumbsContext.Provider\n value={{\n size,\n overflowNodes: overflowNodes.map((index) =>\n collection.getItem(keys[index])\n ),\n isDisabled: RACprops.isDisabled,\n }}\n >\n <RACBreadcrumbsContext.Provider value={RACprops}>\n <CollectionRoot collection={collection} />\n </RACBreadcrumbsContext.Provider>\n </BreadcrumbsContext.Provider>\n </ol>\n </div>\n );\n }}\n </CollectionBuilder>\n );\n});\n"],"names":["Breadcrumbs","RACBreadcrumbsContext"],"mappings":";;;;;;;;;;;;AA0CO,MAAM,kBAAA,GAAqB,cAI/B,EAAE,IAAA,EAAM,MAAM,aAAA,EAAe,IAAI;AAO7B,MAAM,WAAA,GAAe,UAAA,CAA8B,SAASA,YAAAA,CAGjE,EAAE,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAClC,MAAA,EACA;AACA,EAAA,MAAM,CAAC,QAAA,EAAU,GAAG,IAAI,eAAA,CAAgB,KAAA,EAAO,QAAQC,oBAAqB,CAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,QAAQ,CAAA;AACrD,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,EAAE,cAAA,EAAe,GAAI,UAAA,CAAW,yBAAyB,CAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,CAAe,QAAQ,CAAA;AAC5C,EAAA,MAAM,WAAW,cAAA,CAAe,QAAA,EAAU,EAAE,MAAA,EAAQ,MAAM,CAAA;AAE1D,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,qBAAkB,OAAA,kBAAS,KAAA,CAAA,aAAA,CAAC,cAAY,GAAG,QAAA,EAAU,CAAA,EAAA,EACnD,CAAC,UAAA,KAAe;AACf,IAAA,MAAM,EAAE,eAAc,GAAI,sBAAA;AAAA,MACxB,UAAA,CAAW,IAAA;AAAA,MACX,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,UAAA,CAAW,SAAS,CAAA;AAC5C,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,YAAA;AAAA,QACL,KAAA,EAAO;AAAA,UACL,GAAG,UAAA,CAAW,KAAA;AAAA,UACd,QAAA;AAAA,UACA,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACC,GAAG,UAAA,CAAW,QAAA,EAAU,QAAQ,CAAA;AAAA,UACjC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,sBAAsB,CAAA,EAAG;AAAA,YAC9C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,YAC/C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS;AAAA,WAChD;AAAA,SAAA;AAAA,wBAED,KAAA,CAAA,aAAA;AAAA,UAAC,kBAAA,CAAmB,QAAA;AAAA,UAAnB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,IAAA;AAAA,cACA,eAAe,aAAA,CAAc,GAAA;AAAA,gBAAI,CAAC,KAAA,KAChC,UAAA,CAAW,OAAA,CAAQ,IAAA,CAAK,KAAK,CAAC;AAAA,eAChC;AAAA,cACA,YAAY,QAAA,CAAS;AAAA;AACvB,WAAA;AAAA,0BAEA,KAAA,CAAA,aAAA,CAACA,qBAAsB,QAAA,EAAtB,EAA+B,OAAO,QAAA,EAAA,kBACrC,KAAA,CAAA,aAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAwB,CAC1C;AAAA;AACF;AACF,KACF;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}