@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.
- package/build/cjs/index.js +1607 -2284
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/index.js.map +1 -1
- package/build/esm/Accordion/src/Accordion.js +44 -75
- package/build/esm/Accordion/src/Accordion.js.map +1 -1
- package/build/esm/Accordion/src/AccordionContext.js +3 -1
- package/build/esm/Accordion/src/AccordionContext.js.map +1 -1
- package/build/esm/Accordion/src/AccordionHeading.js +23 -55
- package/build/esm/Accordion/src/AccordionHeading.js.map +1 -1
- package/build/esm/Accordion/src/AccordionItem.js +18 -44
- package/build/esm/Accordion/src/AccordionItem.js.map +1 -1
- package/build/esm/Accordion/src/AccordionPanel.js +28 -45
- package/build/esm/Accordion/src/AccordionPanel.js.map +1 -1
- package/build/esm/Accordion/src/utils.js.map +1 -1
- package/build/esm/Alert/src/Alert.js +27 -65
- package/build/esm/Alert/src/Alert.js.map +1 -1
- package/build/esm/Amount/src/Amount.js +41 -63
- package/build/esm/Amount/src/Amount.js.map +1 -1
- package/build/esm/Amount/src/useGroupAmount.js +4 -1
- package/build/esm/Amount/src/useGroupAmount.js.map +1 -1
- package/build/esm/Autocomplete/i18n/da-DK.json.js +6 -0
- package/build/esm/Autocomplete/i18n/da-DK.json.js.map +1 -0
- package/build/esm/Autocomplete/i18n/de-DE.json.js +6 -0
- package/build/esm/Autocomplete/i18n/de-DE.json.js.map +1 -0
- package/build/esm/Autocomplete/i18n/en-US.json.js +6 -0
- package/build/esm/Autocomplete/i18n/en-US.json.js.map +1 -0
- package/build/esm/Autocomplete/i18n/fi-FI.json.js +6 -0
- package/build/esm/Autocomplete/i18n/fi-FI.json.js.map +1 -0
- package/build/esm/Autocomplete/i18n/index.js +9 -9
- package/build/esm/Autocomplete/i18n/index.js.map +1 -1
- package/build/esm/Autocomplete/i18n/nb-NO.json.js +6 -0
- package/build/esm/Autocomplete/i18n/nb-NO.json.js.map +1 -0
- package/build/esm/Autocomplete/i18n/pl-PL.json.js +6 -0
- package/build/esm/Autocomplete/i18n/pl-PL.json.js.map +1 -0
- package/build/esm/Autocomplete/i18n/sv-SE.json.js +6 -0
- package/build/esm/Autocomplete/i18n/sv-SE.json.js.map +1 -0
- package/build/esm/Autocomplete/src/Autocomplete.js +57 -76
- package/build/esm/Autocomplete/src/Autocomplete.js.map +1 -1
- package/build/esm/Breadcrumbs/src/BreadcrumbItem.js +46 -52
- package/build/esm/Breadcrumbs/src/BreadcrumbItem.js.map +1 -1
- package/build/esm/Breadcrumbs/src/BreadcrumbItemLink.js +17 -45
- package/build/esm/Breadcrumbs/src/BreadcrumbItemLink.js.map +1 -1
- package/build/esm/Breadcrumbs/src/BreadcrumbItemStatic.js +25 -46
- package/build/esm/Breadcrumbs/src/BreadcrumbItemStatic.js.map +1 -1
- package/build/esm/Breadcrumbs/src/BreadcrumbOverflowMenu.js +18 -11
- package/build/esm/Breadcrumbs/src/BreadcrumbOverflowMenu.js.map +1 -1
- package/build/esm/Breadcrumbs/src/Breadcrumbs.js +47 -64
- package/build/esm/Breadcrumbs/src/Breadcrumbs.js.map +1 -1
- package/build/esm/Breadcrumbs/src/BreadcrumbsSeparator.js +8 -6
- package/build/esm/Breadcrumbs/src/BreadcrumbsSeparator.js.map +1 -1
- package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js +6 -6
- package/build/esm/Breadcrumbs/src/useBreadcrumbThreshold.js.map +1 -1
- package/build/esm/FileDropzone/i18n/{da-DK.js → da-DK.json.js} +3 -3
- package/build/esm/FileDropzone/i18n/da-DK.json.js.map +1 -0
- package/build/esm/FileDropzone/i18n/{de-DE.js → de-DE.json.js} +3 -3
- package/build/esm/FileDropzone/i18n/de-DE.json.js.map +1 -0
- package/build/esm/FileDropzone/i18n/{en-US.js → en-US.json.js} +3 -3
- package/build/esm/FileDropzone/i18n/en-US.json.js.map +1 -0
- package/build/esm/FileDropzone/i18n/{fi-FI.js → fi-FI.json.js} +3 -3
- package/build/esm/FileDropzone/i18n/fi-FI.json.js.map +1 -0
- package/build/esm/FileDropzone/i18n/index.js +9 -9
- package/build/esm/FileDropzone/i18n/index.js.map +1 -1
- package/build/esm/FileDropzone/i18n/{nb-NO.js → nb-NO.json.js} +3 -3
- package/build/esm/FileDropzone/i18n/nb-NO.json.js.map +1 -0
- package/build/esm/FileDropzone/i18n/{pl-PL.js → pl-PL.json.js} +3 -3
- package/build/esm/FileDropzone/i18n/pl-PL.json.js.map +1 -0
- package/build/esm/FileDropzone/i18n/{sv-SE.js → sv-SE.json.js} +3 -3
- package/build/esm/FileDropzone/i18n/sv-SE.json.js.map +1 -0
- package/build/esm/FileDropzone/src/FileDropzone.js +68 -88
- package/build/esm/FileDropzone/src/FileDropzone.js.map +1 -1
- package/build/esm/FileDropzone/src/FileTrigger.js +29 -61
- package/build/esm/FileDropzone/src/FileTrigger.js.map +1 -1
- package/build/esm/FileDropzone/src/utils.js.map +1 -1
- package/build/esm/Filtering/src/FilterDropdown.js +91 -113
- package/build/esm/Filtering/src/FilterDropdown.js.map +1 -1
- package/build/esm/Filtering/src/SearchableSelectFilter.js +53 -70
- package/build/esm/Filtering/src/SearchableSelectFilter.js.map +1 -1
- package/build/esm/Flag/src/Flag.js +5 -37
- package/build/esm/Flag/src/Flag.js.map +1 -1
- package/build/esm/LabeledValue/src/LabeledValue.js +21 -55
- package/build/esm/LabeledValue/src/LabeledValue.js.map +1 -1
- package/build/esm/NumberField/i18n/da-DK.json.js +9 -0
- package/build/esm/NumberField/i18n/da-DK.json.js.map +1 -0
- package/build/esm/NumberField/i18n/de-DE.json.js +9 -0
- package/build/esm/NumberField/i18n/de-DE.json.js.map +1 -0
- package/build/esm/NumberField/i18n/en-US.json.js +9 -0
- package/build/esm/NumberField/i18n/en-US.json.js.map +1 -0
- package/build/esm/NumberField/i18n/fi-FI.json.js +9 -0
- package/build/esm/NumberField/i18n/fi-FI.json.js.map +1 -0
- package/build/esm/NumberField/i18n/index.js +9 -9
- package/build/esm/NumberField/i18n/index.js.map +1 -1
- package/build/esm/NumberField/i18n/nb-NO.json.js +9 -0
- package/build/esm/NumberField/i18n/nb-NO.json.js.map +1 -0
- package/build/esm/NumberField/i18n/pl-PL.json.js +9 -0
- package/build/esm/NumberField/i18n/pl-PL.json.js.map +1 -0
- package/build/esm/NumberField/i18n/sv-SE.json.js +9 -0
- package/build/esm/NumberField/i18n/sv-SE.json.js.map +1 -0
- package/build/esm/NumberField/src/NumberField.js +130 -111
- package/build/esm/NumberField/src/NumberField.js.map +1 -1
- package/build/esm/NumberField/src/StepperButton.js +32 -53
- package/build/esm/NumberField/src/StepperButton.js.map +1 -1
- package/build/esm/NumberField/src/cursorHelpers.js +13 -8
- package/build/esm/NumberField/src/cursorHelpers.js.map +1 -1
- package/build/esm/NumberField/src/formatHelpers.js +15 -18
- package/build/esm/NumberField/src/formatHelpers.js.map +1 -1
- package/build/esm/NumberField/src/keyboardHelpers.js +13 -8
- package/build/esm/NumberField/src/keyboardHelpers.js.map +1 -1
- package/build/esm/NumberField/src/useAutofillStyle.js.map +1 -1
- package/build/esm/NumberField/src/useNumberFieldFormatting.js +79 -45
- package/build/esm/NumberField/src/useNumberFieldFormatting.js.map +1 -1
- package/build/esm/NumberField/src/useSapphireNumberField.js +16 -42
- package/build/esm/NumberField/src/useSapphireNumberField.js.map +1 -1
- package/build/esm/ProgressIndicator/src/ProgressIndicator.js +23 -35
- package/build/esm/ProgressIndicator/src/ProgressIndicator.js.map +1 -1
- package/build/esm/Sidebar/index.js.map +1 -1
- package/build/esm/Sidebar/src/Body.js +19 -44
- package/build/esm/Sidebar/src/Body.js.map +1 -1
- package/build/esm/Sidebar/src/ExpandableItem.js +89 -97
- package/build/esm/Sidebar/src/ExpandableItem.js.map +1 -1
- package/build/esm/Sidebar/src/Header.js +14 -44
- package/build/esm/Sidebar/src/Header.js.map +1 -1
- package/build/esm/Sidebar/src/Item.js +17 -44
- package/build/esm/Sidebar/src/Item.js.map +1 -1
- package/build/esm/Sidebar/src/List.js +14 -43
- package/build/esm/Sidebar/src/List.js.map +1 -1
- package/build/esm/Sidebar/src/Panel.js +56 -69
- package/build/esm/Sidebar/src/Panel.js.map +1 -1
- package/build/esm/Sidebar/src/ResponsiveSidebarContext.js +17 -9
- package/build/esm/Sidebar/src/ResponsiveSidebarContext.js.map +1 -1
- package/build/esm/Sidebar/src/SecondarySidebarContext.js +15 -12
- package/build/esm/Sidebar/src/SecondarySidebarContext.js.map +1 -1
- package/build/esm/Sidebar/src/Section.js +38 -51
- package/build/esm/Sidebar/src/Section.js.map +1 -1
- package/build/esm/Sidebar/src/Sidebar.js +65 -93
- package/build/esm/Sidebar/src/Sidebar.js.map +1 -1
- package/build/esm/Sidebar/src/useSidebar.js.map +1 -1
- package/build/esm/Slider/index.js.map +1 -1
- package/build/esm/Slider/src/Slider.js +46 -71
- package/build/esm/Slider/src/Slider.js.map +1 -1
- package/build/esm/TagGroup/src/Tag.js +71 -86
- package/build/esm/TagGroup/src/Tag.js.map +1 -1
- package/build/esm/TagGroup/src/TagGroup.js +46 -67
- package/build/esm/TagGroup/src/TagGroup.js.map +1 -1
- package/build/esm/TagGroup/src/TagItem.js +1 -1
- package/build/esm/TagGroup/src/TagItem.js.map +1 -1
- package/build/esm/TimeField/i18n/da-DK.json.js +7 -0
- package/build/esm/TimeField/i18n/da-DK.json.js.map +1 -0
- package/build/esm/TimeField/i18n/de-DE.json.js +7 -0
- package/build/esm/TimeField/i18n/de-DE.json.js.map +1 -0
- package/build/esm/TimeField/i18n/en-US.json.js +7 -0
- package/build/esm/TimeField/i18n/en-US.json.js.map +1 -0
- package/build/esm/TimeField/i18n/fi-FI.json.js +7 -0
- package/build/esm/TimeField/i18n/fi-FI.json.js.map +1 -0
- package/build/esm/TimeField/i18n/index.js +7 -7
- package/build/esm/TimeField/i18n/index.js.map +1 -1
- package/build/esm/TimeField/i18n/nb-NO.json.js +7 -0
- package/build/esm/TimeField/i18n/nb-NO.json.js.map +1 -0
- package/build/esm/TimeField/i18n/pl-PL.json.js +7 -0
- package/build/esm/TimeField/i18n/pl-PL.json.js.map +1 -0
- package/build/esm/TimeField/i18n/{sv-SE.js → sv-SE.json.js} +1 -1
- package/build/esm/TimeField/i18n/sv-SE.json.js.map +1 -0
- package/build/esm/TimeField/src/TimeField.js +67 -84
- package/build/esm/TimeField/src/TimeField.js.map +1 -1
- package/build/esm/TimeField/src/TimeFieldSegment.js +25 -37
- package/build/esm/TimeField/src/TimeFieldSegment.js.map +1 -1
- package/build/esm/index.js +1 -1
- package/build/index.d.ts +19 -17
- package/package.json +16 -39
- package/build/esm/Autocomplete/i18n/da-DK.js +0 -6
- package/build/esm/Autocomplete/i18n/da-DK.js.map +0 -1
- package/build/esm/Autocomplete/i18n/de-DE.js +0 -6
- package/build/esm/Autocomplete/i18n/de-DE.js.map +0 -1
- package/build/esm/Autocomplete/i18n/en-US.js +0 -6
- package/build/esm/Autocomplete/i18n/en-US.js.map +0 -1
- package/build/esm/Autocomplete/i18n/fi-FI.js +0 -6
- package/build/esm/Autocomplete/i18n/fi-FI.js.map +0 -1
- package/build/esm/Autocomplete/i18n/nb-NO.js +0 -6
- package/build/esm/Autocomplete/i18n/nb-NO.js.map +0 -1
- package/build/esm/Autocomplete/i18n/pl-PL.js +0 -6
- package/build/esm/Autocomplete/i18n/pl-PL.js.map +0 -1
- package/build/esm/Autocomplete/i18n/sv-SE.js +0 -6
- package/build/esm/Autocomplete/i18n/sv-SE.js.map +0 -1
- package/build/esm/FileDropzone/i18n/da-DK.js.map +0 -1
- package/build/esm/FileDropzone/i18n/de-DE.js.map +0 -1
- package/build/esm/FileDropzone/i18n/en-US.js.map +0 -1
- package/build/esm/FileDropzone/i18n/fi-FI.js.map +0 -1
- package/build/esm/FileDropzone/i18n/nb-NO.js.map +0 -1
- package/build/esm/FileDropzone/i18n/pl-PL.js.map +0 -1
- package/build/esm/FileDropzone/i18n/sv-SE.js.map +0 -1
- package/build/esm/NumberField/i18n/da-DK.js +0 -9
- package/build/esm/NumberField/i18n/da-DK.js.map +0 -1
- package/build/esm/NumberField/i18n/de-DE.js +0 -9
- package/build/esm/NumberField/i18n/de-DE.js.map +0 -1
- package/build/esm/NumberField/i18n/en-US.js +0 -9
- package/build/esm/NumberField/i18n/en-US.js.map +0 -1
- package/build/esm/NumberField/i18n/fi-FI.js +0 -9
- package/build/esm/NumberField/i18n/fi-FI.js.map +0 -1
- package/build/esm/NumberField/i18n/nb-NO.js +0 -9
- package/build/esm/NumberField/i18n/nb-NO.js.map +0 -1
- package/build/esm/NumberField/i18n/pl-PL.js +0 -9
- package/build/esm/NumberField/i18n/pl-PL.js.map +0 -1
- package/build/esm/NumberField/i18n/sv-SE.js +0 -9
- package/build/esm/NumberField/i18n/sv-SE.js.map +0 -1
- package/build/esm/TimeField/i18n/da-DK.js +0 -7
- package/build/esm/TimeField/i18n/da-DK.js.map +0 -1
- package/build/esm/TimeField/i18n/de-DE.js +0 -7
- package/build/esm/TimeField/i18n/de-DE.js.map +0 -1
- package/build/esm/TimeField/i18n/en-US.js +0 -7
- package/build/esm/TimeField/i18n/en-US.js.map +0 -1
- package/build/esm/TimeField/i18n/fi-FI.js +0 -7
- package/build/esm/TimeField/i18n/fi-FI.js.map +0 -1
- package/build/esm/TimeField/i18n/nb-NO.js +0 -7
- package/build/esm/TimeField/i18n/nb-NO.js.map +0 -1
- package/build/esm/TimeField/i18n/pl-PL.js +0 -7
- package/build/esm/TimeField/i18n/pl-PL.js.map +0 -1
- 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 '
|
|
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":";;;;;;;;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;AACvD,EAAA,MAAM,aAAA,GAAgB,OAEpB,IAAI,CAAA;AAEN,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;AAG1B,QAAA,MAAM,WAAW,aAAA,CAAc,OAAA,EAAS,OAAA,CAAQ,GAAG,GAAG,SAAA,IAAa,EAAA;AACnE,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,KAAA,CAAM,gBAAgB,QAAQ,CAAA;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,GACD,CAAA;AAED,EAAA,aAAA,CAAc,UAAU,KAAA,CAAM,UAAA;AAE9B,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;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
-
import {
|
|
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
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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,
|
|
45
|
-
size
|
|
46
|
-
}), children);
|
|
12
|
+
return /* @__PURE__ */ React.createElement(BreadcrumbItemStatic, { ...props, size }, children);
|
|
47
13
|
}
|
|
48
|
-
return /* @__PURE__ */ React.createElement(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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":"
|
|
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 '
|
|
5
|
+
import { mergeRefs } from 'react-aria/mergeRefs';
|
|
6
6
|
|
|
7
|
-
|
|
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
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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 '
|
|
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(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
size
|
|
13
|
-
},
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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,
|
|
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 '
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
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(
|
|
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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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 '
|
|
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;;;;"}
|