@chayns-components/core 5.3.11-alpha.0 → 5.4.0
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/AGENTS.md +0 -12
- package/lib/cjs/components/accordion/Accordion.js +12 -107
- package/lib/cjs/components/accordion/Accordion.js.map +1 -1
- package/lib/cjs/components/accordion/Accordion.styles.js +3 -23
- package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +1 -3
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +19 -36
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +3 -6
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +0 -14
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.js +17 -31
- package/lib/cjs/components/amount-control/AmountControl.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.styles.js +2 -18
- package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/cjs/components/button/Button.js +1 -5
- package/lib/cjs/components/button/Button.js.map +1 -1
- package/lib/cjs/components/button/Button.styles.js +0 -17
- package/lib/cjs/components/button/Button.styles.js.map +1 -1
- package/lib/cjs/components/button/Button.types.js.map +1 -1
- package/lib/cjs/components/checkbox/Checkbox.js +1 -5
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/components/checkbox/Checkbox.styles.js +2 -29
- package/lib/cjs/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +2 -7
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js +2 -8
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.js +5 -52
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js +0 -11
- package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.types.js.map +1 -1
- package/lib/cjs/components/context-menu/ContextMenu.js +6 -100
- package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/cjs/components/context-menu/ContextMenu.styles.js +0 -38
- package/lib/cjs/components/context-menu/ContextMenu.styles.js.map +1 -1
- package/lib/cjs/components/context-menu/ContextMenu.types.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.js +2 -4
- package/lib/cjs/components/file-input/FileInput.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.js +2 -23
- package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js +1 -19
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map +1 -1
- package/lib/cjs/components/file-select/FileSelect.js +4 -27
- package/lib/cjs/components/file-select/FileSelect.js.map +1 -1
- package/lib/cjs/components/file-select/FileSelect.styles.js +0 -10
- package/lib/cjs/components/file-select/FileSelect.styles.js.map +1 -1
- package/lib/cjs/components/filter/Filter.js +16 -51
- package/lib/cjs/components/filter/Filter.js.map +1 -1
- package/lib/cjs/components/filter/Filter.styles.js +0 -9
- package/lib/cjs/components/filter/Filter.styles.js.map +1 -1
- package/lib/cjs/components/filter/filter-content/FilterContent.js +5 -14
- package/lib/cjs/components/filter/filter-content/FilterContent.js.map +1 -1
- package/lib/cjs/components/filter/filter-content/FilterContent.types.js.map +1 -1
- package/lib/cjs/components/filter-buttons/FilterButtons.js +4 -69
- package/lib/cjs/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js +2 -40
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +0 -11
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/cjs/components/grid-image/GridImage.js +2 -20
- package/lib/cjs/components/grid-image/GridImage.js.map +1 -1
- package/lib/cjs/components/grid-image/GridImage.styles.js +2 -11
- package/lib/cjs/components/grid-image/GridImage.styles.js.map +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.js +4 -23
- package/lib/cjs/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js +0 -9
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/cjs/components/highlight-slider/HighlightSlider.js +3 -10
- package/lib/cjs/components/highlight-slider/HighlightSlider.js.map +1 -1
- package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js +4 -21
- package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map +1 -1
- package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js +2 -11
- package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map +1 -1
- package/lib/cjs/components/icon/Icon.js +5 -24
- package/lib/cjs/components/icon/Icon.js.map +1 -1
- package/lib/cjs/components/icon/Icon.styles.js +0 -23
- package/lib/cjs/components/icon/Icon.styles.js.map +1 -1
- package/lib/cjs/components/input/Input.js +8 -29
- package/lib/cjs/components/input/Input.js.map +1 -1
- package/lib/cjs/components/input/Input.styles.js +3 -33
- package/lib/cjs/components/input/Input.styles.js.map +1 -1
- package/lib/cjs/components/list/List.js +37 -124
- package/lib/cjs/components/list/List.js.map +1 -1
- package/lib/cjs/components/list/List.utils.js +1 -107
- package/lib/cjs/components/list/List.utils.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.js +3 -82
- package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.styles.js +0 -9
- package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js +5 -40
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +1 -5
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js +1 -32
- package/lib/cjs/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js +1 -32
- package/lib/cjs/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js +1 -30
- package/lib/cjs/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.js +2 -31
- package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.js +3 -36
- package/lib/cjs/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.js +1 -7
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js +0 -12
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/lib/cjs/components/number-input/NumberInput.js +10 -13
- package/lib/cjs/components/number-input/NumberInput.js.map +1 -1
- package/lib/cjs/components/page-provider/PageProvider.js +2 -4
- package/lib/cjs/components/page-provider/PageProvider.js.map +1 -1
- package/lib/cjs/components/popup/Popup.js +1 -8
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.js +15 -29
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.styles.js +8 -19
- package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +4 -7
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.js +2 -5
- package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.js +41 -40
- package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.styles.js +2 -25
- package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/cjs/components/select-button/SelectButton.js +2 -4
- package/lib/cjs/components/select-button/SelectButton.js.map +1 -1
- package/lib/cjs/components/setup-wizard/SetupWizard.js +4 -7
- package/lib/cjs/components/setup-wizard/SetupWizard.js.map +1 -1
- package/lib/cjs/components/setup-wizard/setup-wizard-item/SetupWizardItem.js +3 -5
- package/lib/cjs/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map +1 -1
- package/lib/cjs/components/sharing-bar/SharingBar.js +7 -32
- package/lib/cjs/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/cjs/components/sharing-bar/SharingBar.styles.js +3 -7
- package/lib/cjs/components/sharing-bar/SharingBar.styles.js.map +1 -1
- package/lib/cjs/components/sharing-button/SharingButton.js +2 -4
- package/lib/cjs/components/sharing-button/SharingButton.js.map +1 -1
- package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js +1 -3
- package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js.map +1 -1
- package/lib/cjs/components/signature/Signature.js +3 -6
- package/lib/cjs/components/signature/Signature.js.map +1 -1
- package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js +2 -0
- package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js.map +1 -1
- package/lib/cjs/components/slider/Slider.js +7 -30
- package/lib/cjs/components/slider/Slider.js.map +1 -1
- package/lib/cjs/components/slider/Slider.styles.js +2 -9
- package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.js +6 -63
- package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.styles.js +2 -19
- package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/cjs/components/tag-input/TagInput.js +36 -91
- package/lib/cjs/components/tag-input/TagInput.js.map +1 -1
- package/lib/cjs/components/tag-input/TagInput.styles.js +3 -31
- package/lib/cjs/components/tag-input/TagInput.styles.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.js +8 -17
- package/lib/cjs/components/text-area/TextArea.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.styles.js +1 -15
- package/lib/cjs/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.js +3 -17
- package/lib/cjs/components/truncation/Truncation.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.styles.js +1 -19
- package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/cjs/index.js +6 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/utils/file.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.js +12 -105
- package/lib/esm/components/accordion/Accordion.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.styles.js +3 -23
- package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +1 -3
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +19 -33
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +3 -6
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +0 -14
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.js +16 -30
- package/lib/esm/components/amount-control/AmountControl.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js +2 -18
- package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/esm/components/button/Button.js +1 -5
- package/lib/esm/components/button/Button.js.map +1 -1
- package/lib/esm/components/button/Button.styles.js +0 -17
- package/lib/esm/components/button/Button.styles.js.map +1 -1
- package/lib/esm/components/button/Button.types.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.js +1 -5
- package/lib/esm/components/checkbox/Checkbox.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.styles.js +2 -29
- package/lib/esm/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +2 -7
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js +2 -8
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +5 -50
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js +0 -11
- package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.types.js.map +1 -1
- package/lib/esm/components/context-menu/ContextMenu.js +5 -99
- package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/esm/components/context-menu/ContextMenu.styles.js +0 -38
- package/lib/esm/components/context-menu/ContextMenu.styles.js.map +1 -1
- package/lib/esm/components/context-menu/ContextMenu.types.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.js +2 -4
- package/lib/esm/components/file-input/FileInput.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.js +3 -24
- package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.styles.js +0 -18
- package/lib/esm/components/file-list/file-item/FileItem.styles.js.map +1 -1
- package/lib/esm/components/file-select/FileSelect.js +4 -27
- package/lib/esm/components/file-select/FileSelect.js.map +1 -1
- package/lib/esm/components/file-select/FileSelect.styles.js +0 -10
- package/lib/esm/components/file-select/FileSelect.styles.js.map +1 -1
- package/lib/esm/components/filter/Filter.js +16 -52
- package/lib/esm/components/filter/Filter.js.map +1 -1
- package/lib/esm/components/filter/Filter.styles.js +0 -9
- package/lib/esm/components/filter/Filter.styles.js.map +1 -1
- package/lib/esm/components/filter/filter-content/FilterContent.js +5 -15
- package/lib/esm/components/filter/filter-content/FilterContent.js.map +1 -1
- package/lib/esm/components/filter/filter-content/FilterContent.types.js.map +1 -1
- package/lib/esm/components/filter-buttons/FilterButtons.js +5 -69
- package/lib/esm/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.js +2 -40
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +0 -11
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/esm/components/grid-image/GridImage.js +2 -20
- package/lib/esm/components/grid-image/GridImage.js.map +1 -1
- package/lib/esm/components/grid-image/GridImage.styles.js +1 -10
- package/lib/esm/components/grid-image/GridImage.styles.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.js +4 -22
- package/lib/esm/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.styles.js +0 -9
- package/lib/esm/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/esm/components/highlight-slider/HighlightSlider.js +3 -10
- package/lib/esm/components/highlight-slider/HighlightSlider.js.map +1 -1
- package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js +3 -20
- package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js.map +1 -1
- package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js +1 -10
- package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map +1 -1
- package/lib/esm/components/icon/Icon.js +7 -26
- package/lib/esm/components/icon/Icon.js.map +1 -1
- package/lib/esm/components/icon/Icon.styles.js +0 -23
- package/lib/esm/components/icon/Icon.styles.js.map +1 -1
- package/lib/esm/components/input/Input.js +4 -24
- package/lib/esm/components/input/Input.js.map +1 -1
- package/lib/esm/components/input/Input.styles.js +3 -33
- package/lib/esm/components/input/Input.styles.js.map +1 -1
- package/lib/esm/components/list/List.js +37 -123
- package/lib/esm/components/list/List.js.map +1 -1
- package/lib/esm/components/list/List.utils.js +0 -99
- package/lib/esm/components/list/List.utils.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.js +4 -83
- package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js +0 -9
- package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js +6 -41
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +0 -4
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js +2 -33
- package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js +2 -33
- package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js +1 -30
- package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js +2 -30
- package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.js +3 -36
- package/lib/esm/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js +1 -7
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js +0 -12
- package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/lib/esm/components/number-input/NumberInput.js +10 -13
- package/lib/esm/components/number-input/NumberInput.js.map +1 -1
- package/lib/esm/components/page-provider/PageProvider.js +2 -4
- package/lib/esm/components/page-provider/PageProvider.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +1 -8
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +15 -29
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js +8 -19
- package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +4 -7
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.js +2 -5
- package/lib/esm/components/search-box/SearchBox.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.js +42 -41
- package/lib/esm/components/search-input/SearchInput.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js +1 -24
- package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/esm/components/select-button/SelectButton.js +2 -4
- package/lib/esm/components/select-button/SelectButton.js.map +1 -1
- package/lib/esm/components/setup-wizard/SetupWizard.js +4 -7
- package/lib/esm/components/setup-wizard/SetupWizard.js.map +1 -1
- package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js +3 -5
- package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map +1 -1
- package/lib/esm/components/sharing-bar/SharingBar.js +6 -31
- package/lib/esm/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/esm/components/sharing-bar/SharingBar.styles.js +3 -7
- package/lib/esm/components/sharing-bar/SharingBar.styles.js.map +1 -1
- package/lib/esm/components/sharing-button/SharingButton.js +2 -4
- package/lib/esm/components/sharing-button/SharingButton.js.map +1 -1
- package/lib/esm/components/sharing-context-menu/SharingContextMenu.js +1 -3
- package/lib/esm/components/sharing-context-menu/SharingContextMenu.js.map +1 -1
- package/lib/esm/components/signature/Signature.js +3 -6
- package/lib/esm/components/signature/Signature.js.map +1 -1
- package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.styles.js +2 -0
- package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.styles.js.map +1 -1
- package/lib/esm/components/slider/Slider.js +7 -30
- package/lib/esm/components/slider/Slider.js.map +1 -1
- package/lib/esm/components/slider/Slider.styles.js +1 -8
- package/lib/esm/components/slider/Slider.styles.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.js +6 -62
- package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js +1 -18
- package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/esm/components/tag-input/TagInput.js +35 -85
- package/lib/esm/components/tag-input/TagInput.js.map +1 -1
- package/lib/esm/components/tag-input/TagInput.styles.js +1 -29
- package/lib/esm/components/tag-input/TagInput.styles.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.js +9 -18
- package/lib/esm/components/text-area/TextArea.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.styles.js +0 -14
- package/lib/esm/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.js +4 -18
- package/lib/esm/components/truncation/Truncation.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js +0 -18
- package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/esm/index.js +1 -1
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/utils/file.js.map +1 -1
- package/lib/types/components/accordion/Accordion.d.ts +0 -5
- package/lib/types/components/accordion/Accordion.styles.d.ts +4 -8
- package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +2 -2
- package/lib/types/components/accordion/accordion-group/AccordionGroup.d.ts +2 -7
- package/lib/types/components/accordion/accordion-head/AccordionHead.d.ts +0 -1
- package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +18 -18
- package/lib/types/components/amount-control/AmountControl.d.ts +0 -5
- package/lib/types/components/amount-control/AmountControl.styles.d.ts +4 -8
- package/lib/types/components/button/Button.styles.d.ts +6 -8
- package/lib/types/components/button/Button.types.d.ts +0 -8
- package/lib/types/components/checkbox/Checkbox.d.ts +0 -4
- package/lib/types/components/checkbox/Checkbox.styles.d.ts +1 -5
- package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts +0 -5
- package/lib/types/components/combobox/ComboBox.styles.d.ts +2 -4
- package/lib/types/components/combobox/ComboBox.types.d.ts +0 -5
- package/lib/types/components/context-menu/ContextMenu.styles.d.ts +2 -4
- package/lib/types/components/context-menu/ContextMenu.types.d.ts +0 -6
- package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +2 -2
- package/lib/types/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.d.ts +2 -2
- package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +2 -2
- package/lib/types/components/file-input/FileInput.d.ts +0 -4
- package/lib/types/components/file-input/FileInput.styles.d.ts +2 -2
- package/lib/types/components/file-list/file-item/FileItem.styles.d.ts +0 -3
- package/lib/types/components/file-select/FileSelect.d.ts +0 -4
- package/lib/types/components/file-select/FileSelect.styles.d.ts +4 -6
- package/lib/types/components/filter/Filter.d.ts +0 -1
- package/lib/types/components/filter/Filter.styles.d.ts +4 -6
- package/lib/types/components/filter/filter-content/FilterContent.types.d.ts +0 -4
- package/lib/types/components/filter-buttons/FilterButtons.d.ts +0 -4
- package/lib/types/components/filter-buttons/filter-button/FilterButton.d.ts +0 -5
- package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +8 -12
- package/lib/types/components/grid-image/GridImage.d.ts +0 -4
- package/lib/types/components/grid-image/GridImage.styles.d.ts +2 -4
- package/lib/types/components/grouped-image/GroupedImage.d.ts +0 -4
- package/lib/types/components/grouped-image/GroupedImage.styles.d.ts +6 -8
- package/lib/types/components/highlight-slider/HighlightSlider.d.ts +0 -4
- package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.d.ts +0 -3
- package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.d.ts +5 -9
- package/lib/types/components/icon/Icon.d.ts +0 -4
- package/lib/types/components/icon/Icon.styles.d.ts +0 -1
- package/lib/types/components/input/Input.d.ts +0 -4
- package/lib/types/components/input/Input.styles.d.ts +9 -17
- package/lib/types/components/list/List.d.ts +0 -11
- package/lib/types/components/list/List.utils.d.ts +1 -16
- package/lib/types/components/list/list-item/ListItem.styles.d.ts +64 -64
- package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +2 -2
- package/lib/types/components/list/list-item/list-item-head/ListItemHead.d.ts +0 -1
- package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +194 -195
- package/lib/types/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.d.ts +0 -1
- package/lib/types/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.d.ts +0 -1
- package/lib/types/components/list/list-item/list-item-head/list-item-title/ListItemTitle.d.ts +0 -1
- package/lib/types/components/masonry/masonry-item/MasonryItem.styles.d.ts +2 -2
- package/lib/types/components/mention-finder/MentionFinder.styles.d.ts +4 -4
- package/lib/types/components/multi-action-button/MultiActionButton.styles.d.ts +2 -2
- package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts +0 -7
- package/lib/types/components/multi-action-button/action-button/ActionButton.d.ts +1 -4
- package/lib/types/components/multi-action-button/action-button/ActionButton.styles.d.ts +2 -4
- package/lib/types/components/number-input/NumberInput.d.ts +0 -4
- package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts +2 -2
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +6 -6
- package/lib/types/components/radio-button/RadioButton.d.ts +0 -4
- package/lib/types/components/radio-button/RadioButton.styles.d.ts +9 -15
- package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +0 -5
- package/lib/types/components/search-box/SearchBox.d.ts +0 -4
- package/lib/types/components/search-box/SearchBox.styles.d.ts +2 -2
- package/lib/types/components/search-input/SearchInput.d.ts +0 -4
- package/lib/types/components/search-input/SearchInput.styles.d.ts +9 -17
- package/lib/types/components/select-button/SelectButton.d.ts +0 -4
- package/lib/types/components/setup-wizard/SetupWizard.d.ts +0 -5
- package/lib/types/components/sharing-bar/SharingBar.d.ts +0 -4
- package/lib/types/components/sharing-button/SharingButton.d.ts +1 -1
- package/lib/types/components/sharing-context-menu/SharingContextMenu.d.ts +2 -10
- package/lib/types/components/signature/Signature.d.ts +0 -4
- package/lib/types/components/skeleton/base-skeleton/BaseSkeleton.styles.d.ts +4 -4
- package/lib/types/components/slider/Slider.d.ts +0 -8
- package/lib/types/components/slider/Slider.styles.d.ts +14 -18
- package/lib/types/components/slider-button/SliderButton.d.ts +28 -1
- package/lib/types/components/slider-button/SliderButton.styles.d.ts +4 -6
- package/lib/types/components/tag-input/TagInput.d.ts +0 -4
- package/lib/types/components/tag-input/TagInput.styles.d.ts +2 -12
- package/lib/types/components/text-area/TextArea.d.ts +0 -4
- package/lib/types/components/text-area/TextArea.styles.d.ts +0 -1
- package/lib/types/components/truncation/Truncation.d.ts +0 -4
- package/lib/types/components/truncation/Truncation.styles.d.ts +2 -7
- package/lib/types/index.d.ts +1 -1
- package/lib/types/utils/file.d.ts +1 -1
- package/package.json +3 -3
- package/lib/cjs/components/list/list-item/useListItemFocus.js +0 -47
- package/lib/cjs/components/list/list-item/useListItemFocus.js.map +0 -1
- package/lib/cjs/components/slider-button/SliderButton.types.js +0 -6
- package/lib/cjs/components/slider-button/SliderButton.types.js.map +0 -1
- package/lib/cjs/components/slider-button/useSliderButtonPopupKeyboard.js +0 -66
- package/lib/cjs/components/slider-button/useSliderButtonPopupKeyboard.js.map +0 -1
- package/lib/cjs/components/slider-button/useSliderButtonThumbKeyboard.js +0 -47
- package/lib/cjs/components/slider-button/useSliderButtonThumbKeyboard.js.map +0 -1
- package/lib/cjs/hooks/useKeyboardFocusHighlighting.js +0 -68
- package/lib/cjs/hooks/useKeyboardFocusHighlighting.js.map +0 -1
- package/lib/cjs/utils/keyboardFocusHighlighting.styles.js +0 -30
- package/lib/cjs/utils/keyboardFocusHighlighting.styles.js.map +0 -1
- package/lib/esm/components/list/list-item/useListItemFocus.js +0 -40
- package/lib/esm/components/list/list-item/useListItemFocus.js.map +0 -1
- package/lib/esm/components/slider-button/SliderButton.types.js +0 -2
- package/lib/esm/components/slider-button/SliderButton.types.js.map +0 -1
- package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js +0 -56
- package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js.map +0 -1
- package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js +0 -38
- package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js.map +0 -1
- package/lib/esm/hooks/useKeyboardFocusHighlighting.js +0 -61
- package/lib/esm/hooks/useKeyboardFocusHighlighting.js.map +0 -1
- package/lib/esm/utils/keyboardFocusHighlighting.styles.js +0 -25
- package/lib/esm/utils/keyboardFocusHighlighting.styles.js.map +0 -1
- package/lib/types/components/list/list-item/useListItemFocus.d.ts +0 -13
- package/lib/types/components/slider-button/SliderButton.types.d.ts +0 -32
- package/lib/types/components/slider-button/useSliderButtonPopupKeyboard.d.ts +0 -17
- package/lib/types/components/slider-button/useSliderButtonThumbKeyboard.d.ts +0 -13
- package/lib/types/hooks/useKeyboardFocusHighlighting.d.ts +0 -5
- package/lib/types/utils/keyboardFocusHighlighting.styles.d.ts +0 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.utils.js","names":["Children","isValidElement","LIST_ITEM_MARKER","isDirectListItemElement","node","type","displayName","isMarkedListItemElement","$$listItem","shouldShowExpandIndicator","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable","LEFT_ELEMENT_FOCUSABLE_SELECTOR","RIGHT_ELEMENT_FOCUSABLE_SELECTOR","getFocusableElements","root","selector","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","getFocusedElementIndex","elements","targetElement","length","findIndex","contains","handleHorizontalArrowNavigation","event","currentListItemElement","isCurrentListItemTarget","key","focusableLeftElements","focusableRightElements","focusedLeftElementIndex","preventDefault","previousLeftElement","focus","nextLeftElement","focusedRightElementIndex","previousRightElement","handleVerticalListGroupNavigation","isInKeyboardNavigationGroup","listItemUuids","currentUuid","listGroupUuid","updateActiveListItemUuid","currentIndex","indexOf","nextIndex","nextListItemUuid","nextListItemElement","document","querySelector"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import {\n Children,\n isValidElement,\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n isExpandable?: boolean;\n shouldHideIndicator?: boolean;\n children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) &&\n typeof node.type !== 'string' &&\n (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n Children.toArray(node).some((child) => {\n if (isDirectListItemElement(child)) {\n return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n }\n\n if (isMarkedListItemElement(child)) {\n return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n }\n\n if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n return shouldShowExpandIndicator(child.props.children);\n }\n\n return false;\n });\n\nconst LEFT_ELEMENT_FOCUSABLE_SELECTOR =\n '[data-left-element=\"true\"] a[href], [data-left-element=\"true\"] button, [data-left-element=\"true\"] input, [data-left-element=\"true\"] select, [data-left-element=\"true\"] textarea, [data-left-element=\"true\"] [tabindex], [data-left-element=\"true\"] [contenteditable=\"true\"]';\n\nconst RIGHT_ELEMENT_FOCUSABLE_SELECTOR =\n '[data-right-element=\"true\"] a[href], [data-right-element=\"true\"] button, [data-right-element=\"true\"] input, [data-right-element=\"true\"] select, [data-right-element=\"true\"] textarea, [data-right-element=\"true\"] [tabindex], [data-right-element=\"true\"] [contenteditable=\"true\"]';\n\nconst getFocusableElements = (root: HTMLElement, selector: string) =>\n Array.from(root.querySelectorAll<HTMLElement>(selector)).filter(\n (element) => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1',\n );\n\nconst getFocusedElementIndex = (elements: HTMLElement[], targetElement: HTMLElement | null) => {\n if (!targetElement || elements.length === 0) {\n return -1;\n }\n\n return elements.findIndex(\n (element) => element === targetElement || element.contains(targetElement),\n );\n};\n\nexport const handleHorizontalArrowNavigation = ({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n}: {\n event: KeyboardEvent<HTMLDivElement>;\n currentListItemElement: HTMLDivElement;\n targetElement: HTMLElement | null;\n isCurrentListItemTarget: boolean;\n}) => {\n if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {\n return false;\n }\n\n const focusableLeftElements = getFocusableElements(\n currentListItemElement,\n LEFT_ELEMENT_FOCUSABLE_SELECTOR,\n );\n\n const focusableRightElements = getFocusableElements(\n currentListItemElement,\n RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n );\n\n const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);\n\n if (focusedLeftElementIndex !== -1) {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];\n\n if (previousLeftElement) {\n previousLeftElement.focus();\n } else {\n currentListItemElement.focus();\n }\n\n return true;\n }\n\n const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];\n\n if (nextLeftElement) {\n nextLeftElement.focus();\n } else if (focusableRightElements.length > 0) {\n focusableRightElements[0]?.focus();\n }\n\n return true;\n }\n\n const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n if (focusedRightElementIndex !== -1) {\n event.preventDefault();\n\n if (event.key === 'ArrowRight') {\n focusableRightElements[focusedRightElementIndex + 1]?.focus();\n return true;\n }\n\n const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];\n\n if (previousRightElement) {\n previousRightElement.focus();\n } else if (focusableLeftElements.length > 0) {\n focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n } else {\n currentListItemElement.focus();\n }\n\n return true;\n }\n\n if (isCurrentListItemTarget) {\n if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {\n event.preventDefault();\n focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n return true;\n }\n\n if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {\n event.preventDefault();\n focusableRightElements[0]?.focus();\n return true;\n }\n }\n\n return false;\n};\n\nexport const handleVerticalListGroupNavigation = ({\n event,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid,\n listGroupUuid,\n updateActiveListItemUuid,\n}: {\n event: KeyboardEvent<HTMLDivElement>;\n isCurrentListItemTarget: boolean;\n isInKeyboardNavigationGroup: boolean;\n listItemUuids?: string[];\n currentUuid: string;\n listGroupUuid?: string;\n updateActiveListItemUuid?: (uuid?: string) => void;\n}) => {\n if (\n !isCurrentListItemTarget ||\n !isInKeyboardNavigationGroup ||\n !listItemUuids?.length ||\n (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')\n ) {\n return false;\n }\n\n event.preventDefault();\n\n const currentIndex = listItemUuids.indexOf(currentUuid);\n\n if (currentIndex === -1) {\n return true;\n }\n\n const nextIndex =\n event.key === 'ArrowDown'\n ? (currentIndex + 1) % listItemUuids.length\n : (currentIndex - 1 + listItemUuids.length) % listItemUuids.length;\n\n const nextListItemUuid = listItemUuids[nextIndex];\n\n if (\n nextListItemUuid &&\n nextListItemUuid !== currentUuid &&\n typeof listGroupUuid === 'string' &&\n typeof updateActiveListItemUuid === 'function'\n ) {\n const nextListItemElement = document.querySelector<HTMLDivElement>(\n `[data-uuid=\"${listGroupUuid}---${nextListItemUuid}\"]`,\n );\n\n if (nextListItemElement) {\n updateActiveListItemUuid(nextListItemUuid);\n nextListItemElement.focus();\n }\n }\n\n return true;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"List.utils.js","names":["Children","isValidElement","LIST_ITEM_MARKER","isDirectListItemElement","node","type","displayName","isMarkedListItemElement","$$listItem","shouldShowExpandIndicator","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import { Children, isValidElement, type ReactElement, type ReactNode } from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n isExpandable?: boolean;\n shouldHideIndicator?: boolean;\n children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) &&\n typeof node.type !== 'string' &&\n (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n Children.toArray(node).some((child) => {\n if (isDirectListItemElement(child)) {\n return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n }\n\n if (isMarkedListItemElement(child)) {\n return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n }\n\n if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n return shouldShowExpandIndicator(child.props.children);\n }\n\n return false;\n });\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,QAA2C,OAAO;AACnF,SAASC,gBAAgB,QAAQ,4BAA4B;AAY7D,OAAO,MAAMC,uBAAuB,GAAIC,IAAe,IACnD,aAAAH,cAAc,CAACG,IAAI,CAAC,IAAKA,IAAI,CAACC,IAAI,CAA8BC,WAAW,KAAK,UAAU;AAE9F,OAAO,MAAMC,uBAAuB,GAAIH,IAAe,IACnD,aAAAH,cAAc,CAACG,IAAI,CAAC,IACpB,OAAOA,IAAI,CAACC,IAAI,KAAK,QAAQ,IAC5BD,IAAI,CAACC,IAAI,CAAwBG,UAAU,KAAKN,gBAAgB;AAErE,OAAO,MAAMO,yBAAyB,GAAIL,IAAe,IACrDJ,QAAQ,CAACU,OAAO,CAACN,IAAI,CAAC,CAACO,IAAI,CAAEC,KAAK,IAAK;EACnC,IAAIT,uBAAuB,CAACS,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI,IAAIF,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS;EACzF;EAEA,IAAIT,uBAAuB,CAACK,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACI,YAAY,KAAK,IAAI,IAAIL,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI;EACxF;EAEA,IAAI,aAAAb,cAAc,CAA2BW,KAAK,CAAC,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS,EAAE;IACvF,OAAOP,yBAAyB,CAACG,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC;EAC1D;EAEA,OAAO,KAAK;AAChB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
import { AnimatePresence, motion } from 'motion/react';
|
|
2
|
-
import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle,
|
|
2
|
+
import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
3
3
|
import { useUuid } from '../../../hooks/uuid';
|
|
4
4
|
import { AccordionContext } from '../../accordion/Accordion';
|
|
5
5
|
import AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';
|
|
6
6
|
import { ListContext } from '../List';
|
|
7
|
-
import { handleHorizontalArrowNavigation, handleVerticalListGroupNavigation } from '../List.utils';
|
|
8
7
|
import ListItemBody from './list-item-body/ListItemBody';
|
|
9
8
|
import ListItemHead from './list-item-head/ListItemHead';
|
|
10
9
|
import { StyledListItem, StyledListItemTooltip } from './ListItem.styles';
|
|
11
10
|
import Tooltip from '../../tooltip/Tooltip';
|
|
12
11
|
import { useIsInsideDialog } from '../../../hooks/element';
|
|
13
|
-
import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
|
|
14
|
-
import { useListItemFocus } from './useListItemFocus';
|
|
15
12
|
const ListItem = /*#__PURE__*/forwardRef(({
|
|
16
13
|
backgroundColor,
|
|
17
14
|
careOfLocationId,
|
|
@@ -55,14 +52,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
|
|
|
55
52
|
isAnyItemExpandable,
|
|
56
53
|
isWrapped,
|
|
57
54
|
openItemUuid,
|
|
58
|
-
updateOpenItemUuid
|
|
59
|
-
shouldEnableKeyboardHighlighting,
|
|
60
|
-
listGroupUuid,
|
|
61
|
-
listItemUuids,
|
|
62
|
-
registerListItemUuid,
|
|
63
|
-
unregisterListItemUuid,
|
|
64
|
-
activeListItemUuid,
|
|
65
|
-
updateActiveListItemUuid
|
|
55
|
+
updateOpenItemUuid
|
|
66
56
|
} = useContext(ListContext);
|
|
67
57
|
const {
|
|
68
58
|
isWrapped: isParentAccordionWrapped
|
|
@@ -126,68 +116,6 @@ const ListItem = /*#__PURE__*/forwardRef(({
|
|
|
126
116
|
setTitleWidth(width);
|
|
127
117
|
setTitleMaxWidth(maxWidth);
|
|
128
118
|
}, []);
|
|
129
|
-
const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
|
|
130
|
-
const isInKeyboardNavigationGroup = shouldEnableKeyboardHighlighting && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function';
|
|
131
|
-
useEffect(() => {
|
|
132
|
-
if (shouldEnableKeyboardHighlighting && typeof registerListItemUuid === 'function' && typeof unregisterListItemUuid === 'function') {
|
|
133
|
-
registerListItemUuid(uuid);
|
|
134
|
-
return () => {
|
|
135
|
-
unregisterListItemUuid(uuid);
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
return undefined;
|
|
139
|
-
}, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);
|
|
140
|
-
const tabIndex = useMemo(() => {
|
|
141
|
-
if (isInKeyboardNavigationGroup) {
|
|
142
|
-
const isGroupTabStop = activeListItemUuid != null ? activeListItemUuid === uuid : listItemUuids?.[0] === uuid;
|
|
143
|
-
return isGroupTabStop ? 0 : -1;
|
|
144
|
-
}
|
|
145
|
-
return shouldEnableKeyboardHighlighting ? 0 : -1;
|
|
146
|
-
}, [activeListItemUuid, isInKeyboardNavigationGroup, listItemUuids, shouldEnableKeyboardHighlighting, uuid]);
|
|
147
|
-
const handleKeyDown = useCallback(event => {
|
|
148
|
-
const isCurrentListItemTarget = event.currentTarget === event.target;
|
|
149
|
-
const currentListItemElement = event.currentTarget;
|
|
150
|
-
const targetElement = event.target;
|
|
151
|
-
if (shouldEnableKeyboardHighlighting && handleHorizontalArrowNavigation({
|
|
152
|
-
event,
|
|
153
|
-
currentListItemElement,
|
|
154
|
-
targetElement,
|
|
155
|
-
isCurrentListItemTarget
|
|
156
|
-
})) {
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
if (handleVerticalListGroupNavigation({
|
|
160
|
-
event,
|
|
161
|
-
isCurrentListItemTarget,
|
|
162
|
-
isInKeyboardNavigationGroup,
|
|
163
|
-
listItemUuids,
|
|
164
|
-
currentUuid: uuid,
|
|
165
|
-
listGroupUuid,
|
|
166
|
-
updateActiveListItemUuid
|
|
167
|
-
})) {
|
|
168
|
-
return;
|
|
169
|
-
}
|
|
170
|
-
if (isCurrentListItemTarget && shouldEnableKeyboardHighlighting && (event.key === 'Enter' || event.key === ' ')) {
|
|
171
|
-
event.preventDefault();
|
|
172
|
-
handleHeadClick(event);
|
|
173
|
-
}
|
|
174
|
-
}, [handleHeadClick, isInKeyboardNavigationGroup, listGroupUuid, listItemUuids, shouldEnableKeyboardHighlighting, updateActiveListItemUuid, uuid]);
|
|
175
|
-
const {
|
|
176
|
-
isFocusWithinListItem,
|
|
177
|
-
handleFocus,
|
|
178
|
-
handleBlur
|
|
179
|
-
} = useListItemFocus({
|
|
180
|
-
uuid,
|
|
181
|
-
listGroupUuid,
|
|
182
|
-
isInKeyboardNavigationGroup,
|
|
183
|
-
updateActiveListItemUuid
|
|
184
|
-
});
|
|
185
|
-
useEffect(() => {
|
|
186
|
-
if (isInKeyboardNavigationGroup && activeListItemUuid == null && typeof updateActiveListItemUuid === 'function' && listItemUuids?.[0] === uuid) {
|
|
187
|
-
updateActiveListItemUuid(uuid);
|
|
188
|
-
}
|
|
189
|
-
}, [activeListItemUuid, isInKeyboardNavigationGroup, listItemUuids, updateActiveListItemUuid, uuid]);
|
|
190
|
-
const shouldAllowElementFocus = !shouldEnableKeyboardHighlighting || isFocusWithinListItem;
|
|
191
119
|
return /*#__PURE__*/React.createElement(StyledListItem, {
|
|
192
120
|
as: shouldDisableAnimation ? undefined : motion.div,
|
|
193
121
|
animate: shouldDisableAnimation ? undefined : {
|
|
@@ -205,7 +133,6 @@ const ListItem = /*#__PURE__*/forwardRef(({
|
|
|
205
133
|
},
|
|
206
134
|
key: `list-item-${uuid}`,
|
|
207
135
|
ref: listItemRef,
|
|
208
|
-
"data-uuid": `${listGroupUuid ?? ''}---${uuid}`,
|
|
209
136
|
layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
|
|
210
137
|
$backgroundColor: backgroundColor,
|
|
211
138
|
$isClickable: isClickable,
|
|
@@ -219,12 +146,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
|
|
|
219
146
|
$shouldForceBottomLine: shouldForceBottomLine,
|
|
220
147
|
$shouldHideBottomLine: shouldHideBottomLine,
|
|
221
148
|
$shouldHideIndicator: shouldHideIndicator,
|
|
222
|
-
$shouldShowSeparatorBelow: shouldShowSeparatorBelow
|
|
223
|
-
"data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting ? 'true' : undefined,
|
|
224
|
-
tabIndex: tabIndex,
|
|
225
|
-
onKeyDown: handleKeyDown,
|
|
226
|
-
onFocus: handleFocus,
|
|
227
|
-
onBlur: handleBlur
|
|
149
|
+
$shouldShowSeparatorBelow: shouldShowSeparatorBelow
|
|
228
150
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
229
151
|
shouldUseFullWidth: true,
|
|
230
152
|
isDisabled: !shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip,
|
|
@@ -261,8 +183,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
|
|
|
261
183
|
titleElement: titleElement,
|
|
262
184
|
setShouldEnableTooltip: setShouldEnableTooltip,
|
|
263
185
|
shouldDisableAnimation: shouldDisableAnimation,
|
|
264
|
-
onImageError: onImageError
|
|
265
|
-
shouldAllowElementFocus: shouldAllowElementFocus
|
|
186
|
+
onImageError: onImageError
|
|
266
187
|
})), /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
267
188
|
initial: false
|
|
268
189
|
}, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(ListItemBody, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","handleHorizontalArrowNavigation","handleVerticalListGroupNavigation","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","useKeyboardFocusHighlighting","useListItemFocus","ListItem","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","titleElement","shouldDisableAnimation","cornerElement","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlighting","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","isInDialog","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","current","handleHeadClick","event","shouldOnlyOpen","isClickable","handleTitleWidthChange","width","maxWidth","shouldShowKeyboardHighlighting","isInKeyboardNavigationGroup","tabIndex","isGroupTabStop","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","currentUuid","key","preventDefault","isFocusWithinListItem","handleFocus","handleBlur","shouldAllowElementFocus","createElement","as","div","animate","height","opacity","className","exit","initial","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","onKeyDown","onFocus","onBlur","shouldUseFullWidth","isDisabled","item","style","cursor","onTitleWidthChange","id","shouldHideBody","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n CSSProperties,\n forwardRef,\n KeyboardEvent,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport { handleHorizontalArrowNavigation, handleVerticalListGroupNavigation } from '../List.utils';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem, StyledListItemTooltip } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useIsInsideDialog } from '../../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\n\nexport type ListItemProps = {\n /**\n * The background color of the `ListItem`.\n */\n backgroundColor?: CSSProperties['backgroundColor'];\n /**\n * DEPRECATED: Use `cornerImage` instead.\n */\n careOfLocationId?: number;\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * The image that is displayed in the bottom right corner of the grouped image of list item.\n */\n cornerImage?: string;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * The background of the image. This is only used if images are passed.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Whether the ListItem locks disabled but has full functionality.\n */\n isTitleGreyed?: boolean;\n /**\n * Whether the item is selected.\n */\n isSelected?: boolean;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is opened.\n */\n onOpen?: VoidFunction;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * Whether the line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n */\n shouldForceBottomLine?: boolean;\n /**\n * Whether the hover item should be forced.\n */\n shouldForceHover?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image should be opened on click.\n */\n shouldOpenImageOnClick?: boolean;\n /**\n * Whether the layout animation should be prevented. This is useful when the\n * `ListItem` is used in a list with a lot of items and the layout animation\n * is not desired.\n */\n shouldPreventLayoutAnimation?: boolean;\n /**\n * This will render the ListItem closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should always be used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Whether a Tooltip should be displayed on hover if the title is cut.\n */\n shouldShowTooltipOnTitleOverflow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * Whether the ListItem Animation should be disabled.\n */\n shouldDisableAnimation?: boolean;\n /**\n * Optional Element to display in the right corner of the image\n */\n cornerElement?: ReactNode;\n /**\n * Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /**\n * Function to be executed if the size are changed.\n */\n onSizeChange?: (sizes: ListItemSize) => void;\n};\n\nexport type ListItemRef = ListItemSize;\n\nconst ListItem = forwardRef<ListItemRef, ListItemProps>(\n (\n {\n backgroundColor,\n careOfLocationId,\n children,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isDefaultOpen,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onClose,\n onLongPress,\n onOpen,\n rightElements,\n shouldShowTooltipOnTitleOverflow = false,\n shouldForceBackground = false,\n shouldForceBottomLine = false,\n shouldForceHover = false,\n shouldHideBottomLine = false,\n shouldOpenImageOnClick = false,\n shouldHideImageOrIconBackground,\n shouldHideIndicator = false,\n shouldPreventLayoutAnimation = false,\n shouldRenderClosed = false,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n subtitle,\n title,\n onImageError,\n onSizeChange,\n titleElement,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n },\n ref,\n ) => {\n const {\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n shouldEnableKeyboardHighlighting,\n listGroupUuid,\n listItemUuids,\n registerListItemUuid,\n unregisterListItemUuid,\n activeListItemUuid,\n updateActiveListItemUuid,\n } = useContext(ListContext);\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n const areaProvider = useContext(AreaContext);\n\n const isInitialRenderRef = useRef(true);\n\n const listItemRef = useRef<HTMLDivElement>(null);\n\n const isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n const [titleWidth, setTitleWidth] = useState(0);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isItemOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isItemOpen]);\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const isInKeyboardNavigationGroup =\n shouldEnableKeyboardHighlighting &&\n typeof listGroupUuid === 'string' &&\n typeof updateActiveListItemUuid === 'function';\n\n useEffect(() => {\n if (\n shouldEnableKeyboardHighlighting &&\n typeof registerListItemUuid === 'function' &&\n typeof unregisterListItemUuid === 'function'\n ) {\n registerListItemUuid(uuid);\n\n return () => {\n unregisterListItemUuid(uuid);\n };\n }\n\n return undefined;\n }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n const tabIndex = useMemo(() => {\n if (isInKeyboardNavigationGroup) {\n const isGroupTabStop =\n activeListItemUuid != null\n ? activeListItemUuid === uuid\n : listItemUuids?.[0] === uuid;\n\n return isGroupTabStop ? 0 : -1;\n }\n\n return shouldEnableKeyboardHighlighting ? 0 : -1;\n }, [\n activeListItemUuid,\n isInKeyboardNavigationGroup,\n listItemUuids,\n shouldEnableKeyboardHighlighting,\n uuid,\n ]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const isCurrentListItemTarget = event.currentTarget === event.target;\n const currentListItemElement = event.currentTarget as HTMLDivElement;\n const targetElement = event.target as HTMLElement | null;\n\n if (\n shouldEnableKeyboardHighlighting &&\n handleHorizontalArrowNavigation({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n })\n ) {\n return;\n }\n\n if (\n handleVerticalListGroupNavigation({\n event,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid: uuid,\n listGroupUuid,\n updateActiveListItemUuid,\n })\n ) {\n return;\n }\n\n if (\n isCurrentListItemTarget &&\n shouldEnableKeyboardHighlighting &&\n (event.key === 'Enter' || event.key === ' ')\n ) {\n event.preventDefault();\n handleHeadClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n }\n },\n [\n handleHeadClick,\n isInKeyboardNavigationGroup,\n listGroupUuid,\n listItemUuids,\n shouldEnableKeyboardHighlighting,\n updateActiveListItemUuid,\n uuid,\n ],\n );\n\n const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n uuid,\n listGroupUuid,\n isInKeyboardNavigationGroup,\n updateActiveListItemUuid,\n });\n\n useEffect(() => {\n if (\n isInKeyboardNavigationGroup &&\n activeListItemUuid == null &&\n typeof updateActiveListItemUuid === 'function' &&\n listItemUuids?.[0] === uuid\n ) {\n updateActiveListItemUuid(uuid);\n }\n }, [\n activeListItemUuid,\n isInKeyboardNavigationGroup,\n listItemUuids,\n updateActiveListItemUuid,\n uuid,\n ]);\n\n const shouldAllowElementFocus = !shouldEnableKeyboardHighlighting || isFocusWithinListItem;\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n initial={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n ref={listItemRef}\n data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\n layout={\n shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position'\n }\n $backgroundColor={backgroundColor}\n $isClickable={isClickable}\n $isInAccordion={\n typeof isParentAccordionWrapped === 'boolean' &&\n !areaProvider.shouldDisableListItemPadding\n }\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $isInDialog={isInDialog}\n $isSelected={isSelected}\n $shouldChangeColor={areaProvider.shouldChangeColor}\n $shouldForceBackground={shouldForceBackground}\n $shouldForceBottomLine={shouldForceBottomLine}\n $shouldHideBottomLine={shouldHideBottomLine}\n $shouldHideIndicator={shouldHideIndicator}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n data-should-show-keyboard-highlighting={\n shouldShowKeyboardHighlighting ? 'true' : undefined\n }\n tabIndex={tabIndex}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <Tooltip\n shouldUseFullWidth\n isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n item={\n <StyledListItemTooltip\n style={{ cursor: 'default' }}\n key={`list-item-tooltip-${uuid}`}\n >\n {title}\n </StyledListItemTooltip>\n }\n >\n <ListItemHead\n hoverItem={hoverItem}\n careOfLocationId={careOfLocationId}\n cornerElement={cornerElement}\n cornerImage={cornerImage}\n icons={icons}\n imageBackground={imageBackground}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n isTitleGreyed={isTitleGreyed}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n shouldForceHover={shouldForceHover}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n subtitle={subtitle}\n title={title}\n onTitleWidthChange={handleTitleWidthChange}\n titleElement={titleElement}\n setShouldEnableTooltip={setShouldEnableTooltip}\n shouldDisableAnimation={shouldDisableAnimation}\n onImageError={onImageError}\n shouldAllowElementFocus={shouldAllowElementFocus}\n />\n </Tooltip>\n <AnimatePresence initial={false}>\n {isExpandable && (isItemOpen || shouldRenderClosed) && (\n <ListItemBody\n id={uuid}\n key={`listItemBody-${uuid}`}\n shouldHideBody={shouldRenderClosed && !isItemOpen}\n >\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledListItem>\n );\n },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,MAAM,QAAQ,cAAc;AACtD,OAAOC,KAAK,IAERC,UAAU,EAMVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAOC,mBAAmB,IAAIC,WAAW,QAAQ,yCAAyC;AAC1F,SAASC,WAAW,QAAQ,SAAS;AACrC,SAASC,+BAA+B,EAAEC,iCAAiC,QAAQ,eAAe;AAClG,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,YAAY,MAAM,+BAA+B;AACxD,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,mBAAmB;AACzE,OAAOC,OAAO,MAAM,uBAAuB;AAC3C,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,4BAA4B,QAAQ,6CAA6C;AAC1F,SAASC,gBAAgB,QAAQ,oBAAoB;AAgLrD,MAAMC,QAAQ,gBAAGvB,UAAU,CACvB,CACI;EACIwB,eAAe;EACfC,gBAAgB;EAChBC,QAAQ;EACRC,WAAW;EACXC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,aAAa;EACbC,YAAY;EACZC,OAAO;EACPC,OAAO;EACPC,WAAW;EACXC,MAAM;EACNC,aAAa;EACbC,gCAAgC,GAAG,KAAK;EACxCC,qBAAqB,GAAG,KAAK;EAC7BC,qBAAqB,GAAG,KAAK;EAC7BC,gBAAgB,GAAG,KAAK;EACxBC,oBAAoB,GAAG,KAAK;EAC5BC,sBAAsB,GAAG,KAAK;EAC9BC,+BAA+B;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,4BAA4B,GAAG,KAAK;EACpCC,kBAAkB,GAAG,KAAK;EAC1BC,0BAA0B;EAC1BC,wBAAwB,GAAG,KAAK;EAChCC,QAAQ;EACRC,KAAK;EACLC,YAAY;EACZC,YAAY;EACZC,YAAY;EACZC,sBAAsB,GAAG,KAAK;EAC9BC,aAAa;EACbC,UAAU,GAAG;AACjB,CAAC,EACDC,GAAG,KACF;EACD,MAAM;IACFC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC,kBAAkB;IAClBC,gCAAgC;IAChCC,aAAa;IACbC,aAAa;IACbC,oBAAoB;IACpBC,sBAAsB;IACtBC,kBAAkB;IAClBC;EACJ,CAAC,GAAGtE,UAAU,CAACU,WAAW,CAAC;EAE3B,MAAM;IAAEmD,SAAS,EAAEU;EAAyB,CAAC,GAAGvE,UAAU,CAACO,gBAAgB,CAAC;EAE5E,MAAMiE,YAAY,GAAGxE,UAAU,CAACS,WAAW,CAAC;EAE5C,MAAMgE,kBAAkB,GAAGrE,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMsE,WAAW,GAAGtE,MAAM,CAAiB,IAAI,CAAC;EAEhD,MAAMuE,UAAU,GAAGzD,iBAAiB,CAAiBwD,WAAW,CAAC;EAEjE,MAAME,IAAI,GAAGtE,OAAO,CAAC,CAAC;EAEtB,MAAMuE,YAAY,GAAGrD,QAAQ,KAAKsD,SAAS;EAC3C,MAAMC,UAAU,GAAGhD,MAAM,IAAI+B,YAAY,KAAKc,IAAI;EAElD,MAAMI,UAAU,GAAG5E,MAAM,CAAC+B,OAAO,CAAC;EAClC,MAAM8C,SAAS,GAAG7E,MAAM,CAACiC,MAAM,CAAC;EAEhC,MAAM,CAAC6C,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG9E,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAM,CAAC+E,UAAU,EAAEC,aAAa,CAAC,GAAGhF,QAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACiF,aAAa,EAAEC,gBAAgB,CAAC,GAAGlF,QAAQ,CAAC,CAAC,CAAC;EAErDJ,SAAS,CAAC,MAAM;IACZ+E,UAAU,CAACQ,OAAO,GAAGrD,OAAO;IAC5B8C,SAAS,CAACO,OAAO,GAAGnD,MAAM;EAC9B,CAAC,EAAE,CAACN,MAAM,EAAEI,OAAO,EAAEE,MAAM,CAAC,CAAC;EAE7BpC,SAAS,CAAC,MAAM;IACZ,IAAIwE,kBAAkB,CAACe,OAAO,EAAE;MAC5Bf,kBAAkB,CAACe,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAIT,UAAU,EAAE;MACnB,IAAI,OAAOE,SAAS,CAACO,OAAO,KAAK,UAAU,EAAE;QACzCP,SAAS,CAACO,OAAO,CAAC,CAAC;MACvB;IACJ,CAAC,MAAM,IAAI,OAAOR,UAAU,CAACQ,OAAO,KAAK,UAAU,EAAE;MACjDR,UAAU,CAACQ,OAAO,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACT,UAAU,CAAC,CAAC;EAEhB,MAAMU,eAAe,GAAG1F,WAAW,CAC9B2F,KAAK,IAAK;IACP,IAAIb,YAAY,EAAE;MACdd,kBAAkB,CAACa,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAO1C,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACwD,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACb,YAAY,EAAE3C,OAAO,EAAE6B,kBAAkB,EAAEa,IAAI,CACpD,CAAC;EAED3E,SAAS,CAAC,MAAM;IACZ,IAAI6B,aAAa,EAAE;MACfiC,kBAAkB,CAACa,IAAI,EAAE;QAAEe,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAAC7D,aAAa,EAAEiC,kBAAkB,EAAEa,IAAI,CAAC,CAAC;EAE7C,MAAMgB,WAAW,GAAG,OAAO1D,OAAO,KAAK,UAAU,IAAI2C,YAAY;EAEjE5E,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOqD,YAAY,KAAK,UAAU,EAAE;MACpCA,YAAY,CAAC;QACT8B,UAAU;QACVE;MACJ,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAAChC,YAAY,EAAEgC,aAAa,EAAEF,UAAU,CAAC,CAAC;EAE7ClF,mBAAmB,CACfyD,GAAG,EACH,OAAO;IACHyB,UAAU;IACVE;EACJ,CAAC,CAAC,EACF,CAACA,aAAa,EAAEF,UAAU,CAC9B,CAAC;EAED,MAAMS,sBAAsB,GAAG9F,WAAW,CAAC,CAAC+F,KAAa,EAAEC,QAAgB,KAAK;IAC5EV,aAAa,CAACS,KAAK,CAAC;IACpBP,gBAAgB,CAACQ,QAAQ,CAAC;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,8BAA8B,GAAG7E,4BAA4B,CAC/D6C,gCACJ,CAAC;EAED,MAAMiC,2BAA2B,GAC7BjC,gCAAgC,IAChC,OAAOC,aAAa,KAAK,QAAQ,IACjC,OAAOK,wBAAwB,KAAK,UAAU;EAElDrE,SAAS,CAAC,MAAM;IACZ,IACI+D,gCAAgC,IAChC,OAAOG,oBAAoB,KAAK,UAAU,IAC1C,OAAOC,sBAAsB,KAAK,UAAU,EAC9C;MACED,oBAAoB,CAACS,IAAI,CAAC;MAE1B,OAAO,MAAM;QACTR,sBAAsB,CAACQ,IAAI,CAAC;MAChC,CAAC;IACL;IAEA,OAAOE,SAAS;EACpB,CAAC,EAAE,CAACd,gCAAgC,EAAEG,oBAAoB,EAAEC,sBAAsB,EAAEQ,IAAI,CAAC,CAAC;EAE1F,MAAMsB,QAAQ,GAAG/F,OAAO,CAAC,MAAM;IAC3B,IAAI8F,2BAA2B,EAAE;MAC7B,MAAME,cAAc,GAChB9B,kBAAkB,IAAI,IAAI,GACpBA,kBAAkB,KAAKO,IAAI,GAC3BV,aAAa,GAAG,CAAC,CAAC,KAAKU,IAAI;MAErC,OAAOuB,cAAc,GAAG,CAAC,GAAG,CAAC,CAAC;IAClC;IAEA,OAAOnC,gCAAgC,GAAG,CAAC,GAAG,CAAC,CAAC;EACpD,CAAC,EAAE,CACCK,kBAAkB,EAClB4B,2BAA2B,EAC3B/B,aAAa,EACbF,gCAAgC,EAChCY,IAAI,CACP,CAAC;EAEF,MAAMwB,aAAa,GAAGrG,WAAW,CAC5B2F,KAAoC,IAAK;IACtC,MAAMW,uBAAuB,GAAGX,KAAK,CAACY,aAAa,KAAKZ,KAAK,CAACa,MAAM;IACpE,MAAMC,sBAAsB,GAAGd,KAAK,CAACY,aAA+B;IACpE,MAAMG,aAAa,GAAGf,KAAK,CAACa,MAA4B;IAExD,IACIvC,gCAAgC,IAChCrD,+BAA+B,CAAC;MAC5B+E,KAAK;MACLc,sBAAsB;MACtBC,aAAa;MACbJ;IACJ,CAAC,CAAC,EACJ;MACE;IACJ;IAEA,IACIzF,iCAAiC,CAAC;MAC9B8E,KAAK;MACLW,uBAAuB;MACvBJ,2BAA2B;MAC3B/B,aAAa;MACbwC,WAAW,EAAE9B,IAAI;MACjBX,aAAa;MACbK;IACJ,CAAC,CAAC,EACJ;MACE;IACJ;IAEA,IACI+B,uBAAuB,IACvBrC,gCAAgC,KAC/B0B,KAAK,CAACiB,GAAG,KAAK,OAAO,IAAIjB,KAAK,CAACiB,GAAG,KAAK,GAAG,CAAC,EAC9C;MACEjB,KAAK,CAACkB,cAAc,CAAC,CAAC;MACtBnB,eAAe,CAACC,KAAoD,CAAC;IACzE;EACJ,CAAC,EACD,CACID,eAAe,EACfQ,2BAA2B,EAC3BhC,aAAa,EACbC,aAAa,EACbF,gCAAgC,EAChCM,wBAAwB,EACxBM,IAAI,CAEZ,CAAC;EAED,MAAM;IAAEiC,qBAAqB;IAAEC,WAAW;IAAEC;EAAW,CAAC,GAAG3F,gBAAgB,CAAC;IACxEwD,IAAI;IACJX,aAAa;IACbgC,2BAA2B;IAC3B3B;EACJ,CAAC,CAAC;EAEFrE,SAAS,CAAC,MAAM;IACZ,IACIgG,2BAA2B,IAC3B5B,kBAAkB,IAAI,IAAI,IAC1B,OAAOC,wBAAwB,KAAK,UAAU,IAC9CJ,aAAa,GAAG,CAAC,CAAC,KAAKU,IAAI,EAC7B;MACEN,wBAAwB,CAACM,IAAI,CAAC;IAClC;EACJ,CAAC,EAAE,CACCP,kBAAkB,EAClB4B,2BAA2B,EAC3B/B,aAAa,EACbI,wBAAwB,EACxBM,IAAI,CACP,CAAC;EAEF,MAAMoC,uBAAuB,GAAG,CAAChD,gCAAgC,IAAI6C,qBAAqB;EAE1F,oBACIhH,KAAA,CAAAoH,aAAA,CAAClG,cAAc;IACXmG,EAAE,EAAE1D,sBAAsB,GAAGsB,SAAS,GAAGlF,MAAM,CAACuH,GAAI;IACpDC,OAAO,EAAE5D,sBAAsB,GAAGsB,SAAS,GAAG;MAAEuC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC7EC,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAEhE,sBAAsB,GAAGsB,SAAS,GAAG;MAAEuC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACrEG,OAAO,EAAEjE,sBAAsB,GAAGsB,SAAS,GAAG;MAAEuC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxEX,GAAG,EAAE,aAAa/B,IAAI,EAAG;IACzBjB,GAAG,EAAEe,WAAY;IACjB,aAAW,GAAGT,aAAa,IAAI,EAAE,MAAMW,IAAI,EAAG;IAC9C8C,MAAM,EACF3E,4BAA4B,IAAIS,sBAAsB,GAAGsB,SAAS,GAAG,UACxE;IACD6C,gBAAgB,EAAErG,eAAgB;IAClCsG,YAAY,EAAEhC,WAAY;IAC1BiC,cAAc,EACV,OAAOtD,wBAAwB,KAAK,SAAS,IAC7C,CAACC,YAAY,CAACsD,4BACjB;IACDC,OAAO,EAAEhD,UAAW;IACpBiD,UAAU,EAAEnE,SAAU;IACtBoE,WAAW,EAAEtD,UAAW;IACxBuD,WAAW,EAAExE,UAAW;IACxByE,kBAAkB,EAAE3D,YAAY,CAAC4D,iBAAkB;IACnDC,sBAAsB,EAAE7F,qBAAsB;IAC9C8F,sBAAsB,EAAE7F,qBAAsB;IAC9C8F,qBAAqB,EAAE5F,oBAAqB;IAC5C6F,oBAAoB,EAAE1F,mBAAoB;IAC1C2F,yBAAyB,EAAEvF,wBAAyB;IACpD,0CACI8C,8BAA8B,GAAG,MAAM,GAAGlB,SAC7C;IACDoB,QAAQ,EAAEA,QAAS;IACnBwC,SAAS,EAAEtC,aAAc;IACzBuC,OAAO,EAAE7B,WAAY;IACrB8B,MAAM,EAAE7B;EAAW,gBAEnBlH,KAAA,CAAAoH,aAAA,CAAChG,OAAO;IACJ4H,kBAAkB;IAClBC,UAAU,EAAE,CAACvG,gCAAgC,IAAI,CAAC2C,mBAAoB;IACtE6D,IAAI,eACAlJ,KAAA,CAAAoH,aAAA,CAACjG,qBAAqB;MAClBgI,KAAK,EAAE;QAAEC,MAAM,EAAE;MAAU,CAAE;MAC7BtC,GAAG,EAAE,qBAAqB/B,IAAI;IAAG,GAEhCxB,KACkB;EAC1B,gBAEDvD,KAAA,CAAAoH,aAAA,CAACnG,YAAY;IACTY,SAAS,EAAEA,SAAU;IACrBH,gBAAgB,EAAEA,gBAAiB;IACnCkC,aAAa,EAAEA,aAAc;IAC7BhC,WAAW,EAAEA,WAAY;IACzBE,KAAK,EAAEA,KAAM;IACbC,eAAe,EAAEA,eAAgB;IACjCC,MAAM,EAAEA,MAAO;IACf+B,mBAAmB,EAAEA,mBAAoB;IACzCiB,YAAY,EAAEA,YAAa;IAC3B9C,MAAM,EAAEgD,UAAW;IACnB/C,aAAa,EAAEA,aAAc;IAC7BC,YAAY,EAAEA,YAAa;IAC3BC,OAAO,EAAE0D,WAAW,GAAGH,eAAe,GAAGX,SAAU;IACnD1C,WAAW,EAAEA,WAAY;IACzBM,gBAAgB,EAAEA,gBAAiB;IACnCJ,aAAa,EAAEA,aAAc;IAC7BO,+BAA+B,EAAEA,+BAAgC;IACjEC,mBAAmB,EAAEA,mBAAoB;IACzCF,sBAAsB,EAAEA,sBAAuB;IAC/CK,0BAA0B,EAAEA,0BAA2B;IACvDE,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACb8F,kBAAkB,EAAErD,sBAAuB;IAC3CtC,YAAY,EAAEA,YAAa;IAC3B4B,sBAAsB,EAAEA,sBAAuB;IAC/C3B,sBAAsB,EAAEA,sBAAuB;IAC/CH,YAAY,EAAEA,YAAa;IAC3B2D,uBAAuB,EAAEA;EAAwB,CACpD,CACI,CAAC,eACVnH,KAAA,CAAAoH,aAAA,CAACtH,eAAe;IAAC8H,OAAO,EAAE;EAAM,GAC3B5C,YAAY,KAAKE,UAAU,IAAI/B,kBAAkB,CAAC,iBAC/CnD,KAAA,CAAAoH,aAAA,CAACpG,YAAY;IACTsI,EAAE,EAAEvE,IAAK;IACT+B,GAAG,EAAE,gBAAgB/B,IAAI,EAAG;IAC5BwE,cAAc,EAAEpG,kBAAkB,IAAI,CAAC+B;EAAW,gBAElDlF,KAAA,CAAAoH,aAAA,CAACzG,mBAAmB,QAAEgB,QAA8B,CAC1C,CAEL,CACL,CAAC;AAEzB,CACJ,CAAC;AAEDH,QAAQ,CAACgI,WAAW,GAAG,UAAU;AAEjC,eAAehI,QAAQ","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","ListItem","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","titleElement","shouldDisableAnimation","cornerElement","isSelected","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","isInDialog","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","current","handleHeadClick","event","shouldOnlyOpen","isClickable","handleTitleWidthChange","width","maxWidth","createElement","as","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","shouldUseFullWidth","isDisabled","item","style","cursor","onTitleWidthChange","id","shouldHideBody","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n CSSProperties,\n forwardRef,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem, StyledListItemTooltip } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useIsInsideDialog } from '../../../hooks/element';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\n\nexport type ListItemProps = {\n /**\n * The background color of the `ListItem`.\n */\n backgroundColor?: CSSProperties['backgroundColor'];\n /**\n * DEPRECATED: Use `cornerImage` instead.\n */\n careOfLocationId?: number;\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * The image that is displayed in the bottom right corner of the grouped image of list item.\n */\n cornerImage?: string;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * The background of the image. This is only used if images are passed.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Whether the ListItem locks disabled but has full functionality.\n */\n isTitleGreyed?: boolean;\n /**\n * Whether the item is selected.\n */\n isSelected?: boolean;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is opened.\n */\n onOpen?: VoidFunction;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * Whether the line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n */\n shouldForceBottomLine?: boolean;\n /**\n * Whether the hover item should be forced.\n */\n shouldForceHover?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image should be opened on click.\n */\n shouldOpenImageOnClick?: boolean;\n /**\n * Whether the layout animation should be prevented. This is useful when the\n * `ListItem` is used in a list with a lot of items and the layout animation\n * is not desired.\n */\n shouldPreventLayoutAnimation?: boolean;\n /**\n * This will render the ListItem closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should always be used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Whether a Tooltip should be displayed on hover if the title is cut.\n */\n shouldShowTooltipOnTitleOverflow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * Whether the ListItem Animation should be disabled.\n */\n shouldDisableAnimation?: boolean;\n /**\n * Optional Element to display in the right corner of the image\n */\n cornerElement?: ReactNode;\n /**\n * Optional handler for image load errors.\n */\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /**\n * Function to be executed if the size are changed.\n */\n onSizeChange?: (sizes: ListItemSize) => void;\n};\n\nexport type ListItemRef = ListItemSize;\n\nconst ListItem = forwardRef<ListItemRef, ListItemProps>(\n (\n {\n backgroundColor,\n careOfLocationId,\n children,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isDefaultOpen,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onClose,\n onLongPress,\n onOpen,\n rightElements,\n shouldShowTooltipOnTitleOverflow = false,\n shouldForceBackground = false,\n shouldForceBottomLine = false,\n shouldForceHover = false,\n shouldHideBottomLine = false,\n shouldOpenImageOnClick = false,\n shouldHideImageOrIconBackground,\n shouldHideIndicator = false,\n shouldPreventLayoutAnimation = false,\n shouldRenderClosed = false,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n subtitle,\n title,\n onImageError,\n onSizeChange,\n titleElement,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n },\n ref,\n ) => {\n const { isAnyItemExpandable, isWrapped, openItemUuid, updateOpenItemUuid } =\n useContext(ListContext);\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n const areaProvider = useContext(AreaContext);\n\n const isInitialRenderRef = useRef(true);\n\n const listItemRef = useRef<HTMLDivElement>(null);\n\n const isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n const [titleWidth, setTitleWidth] = useState(0);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isItemOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isItemOpen]);\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n initial={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n ref={listItemRef}\n layout={\n shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position'\n }\n $backgroundColor={backgroundColor}\n $isClickable={isClickable}\n $isInAccordion={\n typeof isParentAccordionWrapped === 'boolean' &&\n !areaProvider.shouldDisableListItemPadding\n }\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $isInDialog={isInDialog}\n $isSelected={isSelected}\n $shouldChangeColor={areaProvider.shouldChangeColor}\n $shouldForceBackground={shouldForceBackground}\n $shouldForceBottomLine={shouldForceBottomLine}\n $shouldHideBottomLine={shouldHideBottomLine}\n $shouldHideIndicator={shouldHideIndicator}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <Tooltip\n shouldUseFullWidth\n isDisabled={!shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip}\n item={\n <StyledListItemTooltip\n style={{ cursor: 'default' }}\n key={`list-item-tooltip-${uuid}`}\n >\n {title}\n </StyledListItemTooltip>\n }\n >\n <ListItemHead\n hoverItem={hoverItem}\n careOfLocationId={careOfLocationId}\n cornerElement={cornerElement}\n cornerImage={cornerImage}\n icons={icons}\n imageBackground={imageBackground}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n isTitleGreyed={isTitleGreyed}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n shouldForceHover={shouldForceHover}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n subtitle={subtitle}\n title={title}\n onTitleWidthChange={handleTitleWidthChange}\n titleElement={titleElement}\n setShouldEnableTooltip={setShouldEnableTooltip}\n shouldDisableAnimation={shouldDisableAnimation}\n onImageError={onImageError}\n />\n </Tooltip>\n <AnimatePresence initial={false}>\n {isExpandable && (isItemOpen || shouldRenderClosed) && (\n <ListItemBody\n id={uuid}\n key={`listItemBody-${uuid}`}\n shouldHideBody={shouldRenderClosed && !isItemOpen}\n >\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledListItem>\n );\n },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
|
|
3
2
|
export const StyledListItem = styled.div`
|
|
4
3
|
overflow: hidden;
|
|
5
4
|
transition: background-color 0.3s ease;
|
|
@@ -81,14 +80,6 @@ export const StyledListItem = styled.div`
|
|
|
81
80
|
}) => $isWrapped && css`
|
|
82
81
|
padding-left: 26px;
|
|
83
82
|
`}
|
|
84
|
-
|
|
85
|
-
&[data-should-show-keyboard-highlighting='true']:focus-visible {
|
|
86
|
-
transition: none;
|
|
87
|
-
${keyboardFocusHighlightingRingCss}
|
|
88
|
-
color: var(--chayns-color--text);
|
|
89
|
-
outline: solid 2px color-mix(in srgb, white 70%, transparent);
|
|
90
|
-
overflow: visible;
|
|
91
|
-
}
|
|
92
83
|
`;
|
|
93
84
|
export const StyledListItemTooltip = styled.div`
|
|
94
85
|
padding: 6px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","names":["styled","css","
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","names":["styled","css","StyledListItem","div","$isInAccordion","$shouldHideIndicator","$isOpen","$shouldChangeColor","$shouldForceBackground","theme","$isInDialog","$isSelected","cardBackgroundOpacity","$backgroundColor","$isClickable","$isWrapped","$shouldHideBottomLine","$shouldForceBottomLine","$shouldShowSeparatorBelow","accordionLines","undefined","StyledListItemTooltip"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { CSSProperties } from 'react';\n\ntype StyledListItemProps = HTMLMotionProps<'div'> & {\n $backgroundColor?: CSSProperties['backgroundColor'];\n $isClickable: boolean;\n $isInAccordion: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n $shouldChangeColor?: boolean;\n $shouldForceBackground?: boolean;\n $shouldForceBottomLine?: boolean;\n $shouldHideBottomLine: boolean;\n $shouldHideIndicator: boolean;\n $shouldShowSeparatorBelow: boolean;\n $isInDialog: boolean;\n $isSelected: boolean;\n};\n\nexport const StyledListItem = styled.div<StyledListItemProps>`\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n $isInAccordion &&\n css`\n padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n `}\n\n ${({\n $isInAccordion,\n $isOpen,\n $shouldChangeColor,\n $shouldForceBackground,\n theme,\n $isInDialog,\n $isSelected,\n }: StyledListItemProps & {\n theme: Theme;\n }) =>\n ((!$isInAccordion && $isOpen) || $shouldForceBackground || $isSelected) &&\n css`\n background-color: rgba(\n ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n ${theme.cardBackgroundOpacity}\n );\n `}\n\n ${({ $backgroundColor, $isInAccordion, $isOpen, $shouldForceBackground }) =>\n $backgroundColor &&\n ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n css`\n background-color: ${$backgroundColor} !important;\n `}\n\n ${({\n $isClickable,\n $isInAccordion,\n $shouldChangeColor,\n $isInDialog,\n theme,\n }: StyledListItemProps & {\n theme: Theme;\n }) =>\n $isClickable &&\n !$isInAccordion &&\n css`\n &&:hover {\n background-color: rgba(\n ${$shouldChangeColor || $isInDialog ? theme['102-rgb'] : theme['100-rgb']},\n ${theme.cardBackgroundOpacity}\n );\n }\n `}\n\n ${({\n $isInAccordion,\n $isOpen,\n $isWrapped,\n $shouldHideBottomLine,\n $shouldForceBottomLine,\n $shouldShowSeparatorBelow,\n theme,\n }: StyledListItemProps & { theme: Theme }) => {\n if (\n $shouldShowSeparatorBelow ||\n ((!$isOpen || $isWrapped || $isInAccordion) &&\n theme.accordionLines &&\n !$shouldHideBottomLine)\n ) {\n if ($shouldForceBottomLine) {\n return css`\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 1);\n `;\n }\n\n return css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 1);\n }\n `;\n }\n\n return undefined;\n }}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n\nexport const StyledListItemTooltip = styled.div`\n padding: 6px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAoB/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,MAAM,CAAC;EAAEC,cAAc;EAAEC;AAA0C,CAAC,KAC5DD,cAAc,IACdH,GAAG;AACX,4BAA4BI,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AACT;AACA,MAAM,CAAC;EACCD,cAAc;EACdE,OAAO;EACPC,kBAAkB;EAClBC,sBAAsB;EACtBC,KAAK;EACLC,WAAW;EACXC;AAGJ,CAAC,KACG,CAAE,CAACP,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,IAAIG,WAAW,KACtEV,GAAG;AACX;AACA,kBAAkBM,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AACzF,kBAAkBA,KAAK,CAACG,qBAAqB;AAC7C;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC,gBAAgB;EAAET,cAAc;EAAEE,OAAO;EAAEE;AAAuB,CAAC,KACpEK,gBAAgB,KACd,CAACT,cAAc,IAAIE,OAAO,IAAKE,sBAAsB,CAAC,IACxDP,GAAG;AACX,gCAAgCY,gBAAgB;AAChD,SAAS;AACT;AACA,MAAM,CAAC;EACCC,YAAY;EACZV,cAAc;EACdG,kBAAkB;EAClBG,WAAW;EACXD;AAGJ,CAAC,KACGK,YAAY,IACZ,CAACV,cAAc,IACfH,GAAG;AACX;AACA;AACA,sBAAsBM,kBAAkB,IAAIG,WAAW,GAAGD,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AAC7F,sBAAsBA,KAAK,CAACG,qBAAqB;AACjD;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCR,cAAc;EACdE,OAAO;EACPS,UAAU;EACVC,qBAAqB;EACrBC,sBAAsB;EACtBC,yBAAyB;EACzBT;AACoC,CAAC,KAAK;EAC1C,IACIS,yBAAyB,IACxB,CAAC,CAACZ,OAAO,IAAIS,UAAU,IAAIX,cAAc,KACtCK,KAAK,CAACU,cAAc,IACpB,CAACH,qBAAsB,EAC7B;IACE,IAAIC,sBAAsB,EAAE;MACxB,OAAOhB,GAAG;AAC1B,qCAAqCiB,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD,iBAAiB;IACL;IAEA,OAAOR,GAAG;AACtB;AACA,qCAAqCiB,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC9E,+BAA+BT,KAAK,CAAC,cAAc,CAAC;AACpD;AACA,aAAa;EACL;EAEA,OAAOW,SAAS;AACpB,CAAC;AACL;AACA,MAAM,CAAC;EAAEL;AAAW,CAAC,KACbA,UAAU,IACVd,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMoB,qBAAqB,GAAGrB,MAAM,CAACG,GAAG;AAC/C;AACA,CAAC","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import { LayoutGroup, motion } from 'motion/react';
|
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import ListItemIcon from './list-item-icon/ListItemIcon';
|
|
4
4
|
import ListItemImage from './list-item-image/ListItemImage';
|
|
5
|
-
import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator,
|
|
5
|
+
import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadIndicator, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadTitle, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper } from './ListItemHead.styles';
|
|
6
6
|
import ListItemTitle from './list-item-title/ListItemTitle';
|
|
7
7
|
import ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';
|
|
8
8
|
import ListItemRightElement from './list-item-right-element/ListItemRightElement';
|
|
@@ -36,15 +36,13 @@ const ListItemHead = ({
|
|
|
36
36
|
shouldDisableAnimation = false,
|
|
37
37
|
cornerElement,
|
|
38
38
|
onTitleWidthChange,
|
|
39
|
-
onImageError
|
|
40
|
-
shouldAllowElementFocus = true
|
|
39
|
+
onImageError
|
|
41
40
|
}) => {
|
|
42
41
|
const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);
|
|
43
42
|
const [titleMaxWidth, setTitleMaxWidth] = useState(0);
|
|
44
43
|
const [titleWidth, setTitleWidth] = useState(0);
|
|
45
44
|
const longPressTimeoutRef = useRef();
|
|
46
45
|
const resizeSkipRef = useRef(true);
|
|
47
|
-
const leftElementRef = useRef(null);
|
|
48
46
|
const theme = useTheme();
|
|
49
47
|
const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string' || typeof rightElements === 'object' && rightElements && 'bottom' in rightElements;
|
|
50
48
|
const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
|
|
@@ -111,33 +109,6 @@ const ListItemHead = ({
|
|
|
111
109
|
className: internalIconStyle
|
|
112
110
|
});
|
|
113
111
|
}, [theme.accordionIcon, theme.iconStyle]);
|
|
114
|
-
useEffect(() => {
|
|
115
|
-
const leftElementWrapper = leftElementRef.current;
|
|
116
|
-
if (!leftElementWrapper) {
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
const focusableElements = Array.from(leftElementWrapper.querySelectorAll('a[href], button, input, select, textarea, [tabindex], [contenteditable="true"]'));
|
|
120
|
-
focusableElements.forEach(element => {
|
|
121
|
-
const currentElement = element;
|
|
122
|
-
const datasetKey = 'listItemLeftElementOriginalTabIndex';
|
|
123
|
-
if (shouldAllowElementFocus) {
|
|
124
|
-
const originalTabIndex = currentElement.dataset[datasetKey];
|
|
125
|
-
if (typeof originalTabIndex === 'string') {
|
|
126
|
-
if (originalTabIndex === '') {
|
|
127
|
-
currentElement.removeAttribute('tabindex');
|
|
128
|
-
} else {
|
|
129
|
-
currentElement.setAttribute('tabindex', originalTabIndex);
|
|
130
|
-
}
|
|
131
|
-
delete currentElement.dataset[datasetKey];
|
|
132
|
-
}
|
|
133
|
-
} else {
|
|
134
|
-
if (typeof currentElement.dataset[datasetKey] !== 'string') {
|
|
135
|
-
currentElement.dataset[datasetKey] = currentElement.getAttribute('tabindex') ?? '';
|
|
136
|
-
}
|
|
137
|
-
currentElement.setAttribute('tabindex', '-1');
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
|
-
}, [leftElements, shouldAllowElementFocus]);
|
|
141
112
|
return /*#__PURE__*/React.createElement(StyledListItemHead, {
|
|
142
113
|
as: shouldDisableAnimation ? undefined : motion.div,
|
|
143
114
|
animate: shouldDisableAnimation ? undefined : {
|
|
@@ -165,10 +136,7 @@ const ListItemHead = ({
|
|
|
165
136
|
transition: shouldDisableAnimation ? undefined : {
|
|
166
137
|
type: 'tween'
|
|
167
138
|
}
|
|
168
|
-
}, isExpandable && !shouldHideIndicator && expandIcon), leftElements
|
|
169
|
-
ref: leftElementRef,
|
|
170
|
-
"data-left-element": "true"
|
|
171
|
-
}, leftElements), iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
|
|
139
|
+
}, isExpandable && !shouldHideIndicator && expandIcon), leftElements, iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
|
|
172
140
|
$isIconOrImageGiven: iconOrImageElement !== undefined,
|
|
173
141
|
$isOpen: isOpen
|
|
174
142
|
}, /*#__PURE__*/React.createElement(LayoutGroup, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, {
|
|
@@ -181,16 +149,13 @@ const ListItemHead = ({
|
|
|
181
149
|
shouldShowMultilineTitle: shouldShowMultilineTitle,
|
|
182
150
|
rightElements: rightElements,
|
|
183
151
|
onTitleWidthChange: handleTitleWidthChange,
|
|
184
|
-
onResize: handleShowTooltipResize
|
|
185
|
-
shouldAllowRightElementFocus: shouldAllowElementFocus
|
|
152
|
+
onResize: handleShowTooltipResize
|
|
186
153
|
})), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, /*#__PURE__*/React.createElement(ListItemSubtitle, {
|
|
187
154
|
subtitle: subtitle,
|
|
188
155
|
isOpen: isOpen,
|
|
189
|
-
rightElements: rightElements
|
|
190
|
-
shouldAllowRightElementFocus: shouldAllowElementFocus
|
|
156
|
+
rightElements: rightElements
|
|
191
157
|
})))), /*#__PURE__*/React.createElement(ListItemRightElement, {
|
|
192
|
-
rightElements: rightElements
|
|
193
|
-
shouldAllowFocus: shouldAllowElementFocus
|
|
158
|
+
rightElements: rightElements
|
|
194
159
|
}), hoverItem && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItemWrapper, {
|
|
195
160
|
className: "beta-chayns-list-item-hover-item",
|
|
196
161
|
animate: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftElements","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadTitle","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","ListItemTitle","ListItemSubtitle","ListItemRightElement","useTheme","StyledUnicodeIcon","getIsExpandableIcon","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","shouldAllowElementFocus","shouldShowHoverItem","setShouldShowHoverItem","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","resizeSkipRef","leftElementRef","theme","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","accordionIcon","internalIconStyle","iconStyle","$icon","className","leftElementWrapper","focusableElements","Array","from","querySelectorAll","forEach","element","currentElement","datasetKey","originalTabIndex","dataset","removeAttribute","setAttribute","getAttribute","as","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","ref","$isIconOrImageGiven","$isOpen","layout","onResize","shouldAllowRightElementFocus","shouldAllowFocus","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadIndicator,\n StyledListItemHeadLeftElements,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadTitle,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n shouldDisableAnimation?: boolean;\n cornerElement?: ReactNode;\n onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n shouldAllowElementFocus?: boolean;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n shouldDisableAnimation = false,\n cornerElement,\n onTitleWidthChange,\n onImageError,\n shouldAllowElementFocus = true,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n const [titleWidth, setTitleWidth] = useState(0);\n\n const longPressTimeoutRef = useRef<number>();\n const resizeSkipRef = useRef(true);\n const leftElementRef = useRef<HTMLDivElement>(null);\n\n const theme = useTheme() as Theme;\n\n const shouldShowSubtitleRow =\n subtitle ||\n typeof subtitle === 'string' ||\n (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n useEffect(() => {\n window.setTimeout(() => {\n resizeSkipRef.current = false;\n }, 200);\n }, []);\n\n useEffect(() => {\n onTitleWidthChange(titleWidth, titleMaxWidth);\n }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n if (resizeSkipRef.current) {\n return;\n }\n\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const handleTitleWidthChange = useCallback((width: number) => {\n setTitleMaxWidth(width);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n cornerElement={cornerElement}\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n onImageError={onImageError}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerElement,\n cornerImage,\n icons,\n imageBackground,\n images,\n onImageError,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n const expandIcon = useMemo(() => {\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n }, [theme.accordionIcon, theme.iconStyle]);\n\n useEffect(() => {\n const leftElementWrapper = leftElementRef.current;\n\n if (!leftElementWrapper) {\n return;\n }\n\n const focusableElements = Array.from(\n leftElementWrapper.querySelectorAll<HTMLElement>(\n 'a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]',\n ),\n );\n\n focusableElements.forEach((element) => {\n const currentElement = element;\n const datasetKey = 'listItemLeftElementOriginalTabIndex';\n\n if (shouldAllowElementFocus) {\n const originalTabIndex = currentElement.dataset[datasetKey];\n\n if (typeof originalTabIndex === 'string') {\n if (originalTabIndex === '') {\n currentElement.removeAttribute('tabindex');\n } else {\n currentElement.setAttribute('tabindex', originalTabIndex);\n }\n\n delete currentElement.dataset[datasetKey];\n }\n } else {\n if (typeof currentElement.dataset[datasetKey] !== 'string') {\n currentElement.dataset[datasetKey] =\n currentElement.getAttribute('tabindex') ?? '';\n }\n\n currentElement.setAttribute('tabindex', '-1');\n }\n });\n }, [leftElements, shouldAllowElementFocus]);\n\n return (\n <StyledListItemHead\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={\n shouldDisableAnimation\n ? undefined\n : {\n opacity: isTitleGreyed ? 0.5 : 1,\n }\n }\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledListItemHeadIndicator\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && expandIcon}\n </StyledListItemHeadIndicator>\n )}\n {leftElements && (\n <StyledListItemHeadLeftElements ref={leftElementRef} data-left-element=\"true\">\n {leftElements}\n </StyledListItemHeadLeftElements>\n )}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <LayoutGroup>\n <StyledListItemHeadTitle\n as={shouldDisableAnimation ? undefined : motion.div}\n layout=\"position\"\n >\n <ListItemTitle\n title={title}\n titleElement={titleElement}\n isOpen={isOpen}\n shouldShowMultilineTitle={shouldShowMultilineTitle}\n rightElements={rightElements}\n onTitleWidthChange={handleTitleWidthChange}\n onResize={handleShowTooltipResize}\n shouldAllowRightElementFocus={shouldAllowElementFocus}\n />\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <ListItemSubtitle\n subtitle={subtitle}\n isOpen={isOpen}\n rightElements={rightElements}\n shouldAllowRightElementFocus={shouldAllowElementFocus}\n />\n </StyledListItemHeadSubtitle>\n )}\n </LayoutGroup>\n </StyledListItemHeadContent>\n <ListItemRightElement\n rightElements={rightElements}\n shouldAllowFocus={shouldAllowElementFocus}\n />\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItemHead.js","names":["LayoutGroup","motion","React","useCallback","useEffect","useMemo","useRef","useState","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadIndicator","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadTitle","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","ListItemTitle","ListItemSubtitle","ListItemRightElement","useTheme","StyledUnicodeIcon","getIsExpandableIcon","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldDisableAnimation","cornerElement","onTitleWidthChange","onImageError","shouldShowHoverItem","setShouldShowHoverItem","titleMaxWidth","setTitleMaxWidth","titleWidth","setTitleWidth","longPressTimeoutRef","resizeSkipRef","theme","shouldShowSubtitleRow","shouldShowMultilineTitle","window","setTimeout","current","handleShowTooltipResize","entries","target","clientWidth","el","scrollWidth","handleMouseEnter","handleMouseLeave","handleTouchStart","event","handleTouchEnd","clearTimeout","handleTitleWidthChange","width","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","expandIcon","internalIcon","accordionIcon","internalIconStyle","iconStyle","$icon","className","as","div","animate","opacity","initial","transition","duration","type","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","layout","onResize","marginLeft","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import { LayoutGroup, motion } from 'motion/react';\nimport React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadIndicator,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadTitle,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n} from './ListItemHead.styles';\nimport ListItemTitle from './list-item-title/ListItemTitle';\nimport ListItemSubtitle from './list-item-subtitle/ListItemSubtitle';\nimport ListItemRightElement from './list-item-right-element/ListItemRightElement';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\nimport { StyledUnicodeIcon } from '../../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../../utils/icon';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n shouldDisableAnimation?: boolean;\n cornerElement?: ReactNode;\n onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n shouldDisableAnimation = false,\n cornerElement,\n onTitleWidthChange,\n onImageError,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n const [titleWidth, setTitleWidth] = useState(0);\n\n const longPressTimeoutRef = useRef<number>();\n const resizeSkipRef = useRef(true);\n\n const theme = useTheme() as Theme;\n\n const shouldShowSubtitleRow =\n subtitle ||\n typeof subtitle === 'string' ||\n (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements);\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n useEffect(() => {\n window.setTimeout(() => {\n resizeSkipRef.current = false;\n }, 200);\n }, []);\n\n useEffect(() => {\n onTitleWidthChange(titleWidth, titleMaxWidth);\n }, [onTitleWidthChange, titleMaxWidth, titleWidth]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n setTitleWidth(entries[0]?.target.clientWidth ?? 0);\n\n if (resizeSkipRef.current) {\n return;\n }\n\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const handleTitleWidthChange = useCallback((width: number) => {\n setTitleMaxWidth(width);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n cornerElement={cornerElement}\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n onImageError={onImageError}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerElement,\n cornerImage,\n icons,\n imageBackground,\n images,\n onImageError,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n const expandIcon = useMemo(() => {\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n return <StyledUnicodeIcon $icon={internalIcon} className={internalIconStyle} />;\n }, [theme.accordionIcon, theme.iconStyle]);\n\n return (\n <StyledListItemHead\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={\n shouldDisableAnimation\n ? undefined\n : {\n opacity: isTitleGreyed ? 0.5 : 1,\n }\n }\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledListItemHeadIndicator\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { rotate: isOpen ? 90 : 0 }}\n initial={shouldDisableAnimation ? undefined : false}\n transition={shouldDisableAnimation ? undefined : { type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && expandIcon}\n </StyledListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <LayoutGroup>\n <StyledListItemHeadTitle\n as={shouldDisableAnimation ? undefined : motion.div}\n layout=\"position\"\n >\n <ListItemTitle\n title={title}\n titleElement={titleElement}\n isOpen={isOpen}\n shouldShowMultilineTitle={shouldShowMultilineTitle}\n rightElements={rightElements}\n onTitleWidthChange={handleTitleWidthChange}\n onResize={handleShowTooltipResize}\n />\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <ListItemSubtitle\n subtitle={subtitle}\n isOpen={isOpen}\n rightElements={rightElements}\n />\n </StyledListItemHeadSubtitle>\n )}\n </LayoutGroup>\n </StyledListItemHeadContent>\n <ListItemRightElement rightElements={rightElements} />\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -27,10 +27,6 @@ export const StyledListItemHeadLeftWrapper = styled.div`
|
|
|
27
27
|
align-items: center;
|
|
28
28
|
margin: auto 0;
|
|
29
29
|
`;
|
|
30
|
-
export const StyledListItemHeadLeftElements = styled.div`
|
|
31
|
-
display: flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
`;
|
|
34
30
|
export const StyledListItemHeadIndicator = styled.div`
|
|
35
31
|
align-items: center;
|
|
36
32
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","theme","text","$isClickable","$isAnyItemExpandable","StyledListItemHeadLeftWrapper","
|
|
1
|
+
{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","theme","text","$isClickable","$isAnyItemExpandable","StyledListItemHeadLeftWrapper","StyledListItemHeadIndicator","StyledListItemHeadContent","$isOpen","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadSubtitle","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import type { HTMLMotionProps } from 'motion/react';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = HTMLMotionProps<'div'> & {\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n};\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps & { theme: Theme }) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n position: relative;\n width: 100%;\n justify-content: center;\n cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\ntype StyledListItemHeadIndicatorProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadIndicator = styled.div<StyledListItemHeadIndicatorProps>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\ntype StyledListItemHeadTitleProps = HTMLMotionProps<'div'>;\n\nexport const StyledListItemHeadTitle = styled.div<StyledListItemHeadTitleProps>`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledMotionListItemHeadHoverItemWrapperProps = {\n theme: Theme;\n};\n\nexport const StyledMotionListItemHeadHoverItemWrapper = styled(\n motion.div,\n)<StyledMotionListItemHeadHoverItemWrapperProps>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n position: absolute;\n right: 0;\n\n background: ${({ theme }: StyledMotionListItemHeadHoverItemWrapperProps) =>\n `linear-gradient(to right, transparent 0px, rgb(${theme['000-rgb'] ?? ''}) 40px)`};\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled.div`\n padding-left: 40px;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA;AACA,aAAa,CAAC;EAAEC;AAAkD,CAAC,KAAKA,KAAK,CAACC,IAAI;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAa,CAAC,KAAMA,YAAY,GAAG,SAAS,GAAG,SAAU;AAC1E;AACA,MAAM,CAAC;EAAEC;AAAqB,CAAC,KACvB,CAACA,oBAAoB,IACrBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGR,MAAM,CAACG,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMM,2BAA2B,GAAGT,MAAM,CAACG,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,yBAAyB,GAAGV,MAAM,CAACG,GAAmC;AACnF;AACA;AACA;AACA,mBAAmB,CAAC;EAAEQ;AAAQ,CAAC,KAAMA,OAAO,GAAG,MAAM,GAAG,QAAS;AACjE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAGC,SAAU;AAC1F;AACA,CAAC;AAID,OAAO,MAAMC,uBAAuB,GAAGd,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMY,8BAA8B,GAAGf,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,0BAA0B,GAAGhB,MAAM,CAACG,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMc,wCAAwC,GAAGjB,MAAM,CAC1DD,MAAM,CAACI,GACX,CAAgD;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqD,CAAC,KACnE,kDAAkDA,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS;AACzF,CAAC;AAED,OAAO,MAAMc,iCAAiC,GAAGlB,MAAM,CAACG,GAAG;AAC3D;AACA,CAAC","ignoreList":[]}
|