@chayns-components/core 5.4.13 → 5.4.14-alpha.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 +12 -0
- package/lib/cjs/components/accordion/Accordion.js +107 -12
- package/lib/cjs/components/accordion/Accordion.js.map +1 -1
- package/lib/cjs/components/accordion/Accordion.styles.js +23 -3
- package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +3 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +36 -19
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +6 -3
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +14 -0
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.js +31 -17
- package/lib/cjs/components/amount-control/AmountControl.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.styles.js +18 -2
- package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/cjs/components/button/Button.js +5 -1
- package/lib/cjs/components/button/Button.js.map +1 -1
- package/lib/cjs/components/button/Button.styles.js +10 -0
- 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 +5 -1
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/components/checkbox/Checkbox.styles.js +29 -2
- package/lib/cjs/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +7 -2
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js +8 -2
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.js +68 -11
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js +11 -0
- 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 +146 -42
- package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/cjs/components/context-menu/ContextMenu.styles.js +38 -0
- 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/context-menu/ContextMenu.utils.js +27 -1
- package/lib/cjs/components/context-menu/ContextMenu.utils.js.map +1 -1
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js +3 -8
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.js +4 -2
- package/lib/cjs/components/file-input/FileInput.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.js +48 -25
- package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js +25 -1
- package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map +1 -1
- package/lib/cjs/components/file-select/FileSelect.js +27 -4
- package/lib/cjs/components/file-select/FileSelect.js.map +1 -1
- package/lib/cjs/components/file-select/FileSelect.styles.js +10 -0
- package/lib/cjs/components/file-select/FileSelect.styles.js.map +1 -1
- package/lib/cjs/components/filter/Filter.js +51 -16
- package/lib/cjs/components/filter/Filter.js.map +1 -1
- package/lib/cjs/components/filter/Filter.styles.js +9 -0
- package/lib/cjs/components/filter/Filter.styles.js.map +1 -1
- package/lib/cjs/components/filter/filter-content/FilterContent.js +14 -5
- 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 +69 -4
- package/lib/cjs/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js +40 -2
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +11 -0
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/cjs/components/grid-image/GridImage.js +20 -2
- package/lib/cjs/components/grid-image/GridImage.js.map +1 -1
- package/lib/cjs/components/grid-image/GridImage.styles.js +11 -2
- package/lib/cjs/components/grid-image/GridImage.styles.js.map +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.js +23 -4
- package/lib/cjs/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js +9 -0
- package/lib/cjs/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/cjs/components/highlight-slider/HighlightSlider.js +13 -3
- package/lib/cjs/components/highlight-slider/HighlightSlider.js.map +1 -1
- package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js +21 -4
- 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 +11 -2
- package/lib/cjs/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map +1 -1
- package/lib/cjs/components/icon/Icon.js +24 -5
- package/lib/cjs/components/icon/Icon.js.map +1 -1
- package/lib/cjs/components/icon/Icon.styles.js +23 -0
- package/lib/cjs/components/icon/Icon.styles.js.map +1 -1
- package/lib/cjs/components/input/Input.js +29 -8
- package/lib/cjs/components/input/Input.js.map +1 -1
- package/lib/cjs/components/input/Input.styles.js +38 -3
- package/lib/cjs/components/input/Input.styles.js.map +1 -1
- package/lib/cjs/components/list/List.js +124 -37
- package/lib/cjs/components/list/List.js.map +1 -1
- package/lib/cjs/components/list/List.utils.js +213 -1
- package/lib/cjs/components/list/List.utils.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.js +84 -3
- package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.styles.js +7 -0
- 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 -1
- 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 +5 -1
- 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 -0
- 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 +3 -0
- 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 -0
- package/lib/cjs/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
- package/lib/cjs/components/list/list-item/useListItemFocus.js +47 -0
- package/lib/cjs/components/list/list-item/useListItemFocus.js.map +1 -0
- package/lib/cjs/components/mention-finder/MentionFinder.js +43 -5
- 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 +36 -3
- package/lib/cjs/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js +6 -0
- package/lib/cjs/components/multi-action-button/MultiActionButton.styles.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 +7 -1
- 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 +12 -0
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/lib/cjs/components/number-input/NumberInput.js +13 -10
- package/lib/cjs/components/number-input/NumberInput.js.map +1 -1
- package/lib/cjs/components/page-provider/PageProvider.js +4 -2
- package/lib/cjs/components/page-provider/PageProvider.js.map +1 -1
- package/lib/cjs/components/popup/Popup.js +8 -1
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.js +29 -15
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.styles.js +19 -8
- package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +7 -4
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.js +21 -6
- package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.js +56 -43
- package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.styles.js +26 -2
- package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/cjs/components/select-button/SelectButton.js +4 -2
- package/lib/cjs/components/select-button/SelectButton.js.map +1 -1
- package/lib/cjs/components/setup-wizard/SetupWizard.js +10 -4
- package/lib/cjs/components/setup-wizard/SetupWizard.js.map +1 -1
- package/lib/cjs/components/setup-wizard/setup-wizard-item/SetupWizardItem.js +5 -3
- package/lib/cjs/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map +1 -1
- package/lib/cjs/components/sharing-bar/SharingBar.js +31 -6
- package/lib/cjs/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/cjs/components/sharing-bar/SharingBar.styles.js +5 -0
- package/lib/cjs/components/sharing-bar/SharingBar.styles.js.map +1 -1
- package/lib/cjs/components/sharing-button/SharingButton.js +4 -2
- package/lib/cjs/components/sharing-button/SharingButton.js.map +1 -1
- package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js +3 -1
- package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js.map +1 -1
- package/lib/cjs/components/signature/Signature.js +6 -3
- package/lib/cjs/components/signature/Signature.js.map +1 -1
- package/lib/cjs/components/slider/Slider.js +30 -7
- package/lib/cjs/components/slider/Slider.js.map +1 -1
- package/lib/cjs/components/slider/Slider.styles.js +9 -2
- package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.js +63 -6
- package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.styles.js +15 -2
- package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.types.js +6 -0
- package/lib/cjs/components/slider-button/SliderButton.types.js.map +1 -0
- package/lib/cjs/components/slider-button/useSliderButtonPopupKeyboard.js +66 -0
- package/lib/cjs/components/slider-button/useSliderButtonPopupKeyboard.js.map +1 -0
- package/lib/cjs/components/slider-button/useSliderButtonThumbKeyboard.js +47 -0
- package/lib/cjs/components/slider-button/useSliderButtonThumbKeyboard.js.map +1 -0
- package/lib/cjs/components/tag-input/TagInput.js +92 -36
- package/lib/cjs/components/tag-input/TagInput.js.map +1 -1
- package/lib/cjs/components/tag-input/TagInput.styles.js +29 -3
- package/lib/cjs/components/tag-input/TagInput.styles.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.js +17 -8
- package/lib/cjs/components/text-area/TextArea.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.styles.js +15 -1
- package/lib/cjs/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.js +17 -3
- package/lib/cjs/components/truncation/Truncation.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.styles.js +18 -1
- package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/cjs/hooks/useKeyboardFocusHighlighting.js +57 -0
- package/lib/cjs/hooks/useKeyboardFocusHighlighting.js.map +1 -0
- package/lib/cjs/utils/file.js.map +1 -1
- package/lib/cjs/utils/keyboardFocusHighlighting.styles.js +29 -0
- package/lib/cjs/utils/keyboardFocusHighlighting.styles.js.map +1 -0
- package/lib/esm/components/accordion/Accordion.js +105 -12
- package/lib/esm/components/accordion/Accordion.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.styles.js +23 -3
- package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +3 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +33 -19
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +6 -3
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +14 -0
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.js +30 -16
- package/lib/esm/components/amount-control/AmountControl.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js +18 -2
- package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/esm/components/button/Button.js +5 -1
- package/lib/esm/components/button/Button.js.map +1 -1
- package/lib/esm/components/button/Button.styles.js +10 -0
- 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 +5 -1
- package/lib/esm/components/checkbox/Checkbox.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.styles.js +29 -2
- package/lib/esm/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +7 -2
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js +8 -2
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +61 -7
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js +11 -0
- 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 +145 -42
- package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/esm/components/context-menu/ContextMenu.styles.js +38 -0
- 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/context-menu/ContextMenu.utils.js +24 -0
- package/lib/esm/components/context-menu/ContextMenu.utils.js.map +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js +3 -8
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.js +4 -2
- package/lib/esm/components/file-input/FileInput.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.js +49 -26
- package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.styles.js +24 -0
- package/lib/esm/components/file-list/file-item/FileItem.styles.js.map +1 -1
- package/lib/esm/components/file-select/FileSelect.js +27 -4
- package/lib/esm/components/file-select/FileSelect.js.map +1 -1
- package/lib/esm/components/file-select/FileSelect.styles.js +10 -0
- package/lib/esm/components/file-select/FileSelect.styles.js.map +1 -1
- package/lib/esm/components/filter/Filter.js +52 -16
- package/lib/esm/components/filter/Filter.js.map +1 -1
- package/lib/esm/components/filter/Filter.styles.js +9 -0
- package/lib/esm/components/filter/Filter.styles.js.map +1 -1
- package/lib/esm/components/filter/filter-content/FilterContent.js +15 -5
- 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 +69 -5
- package/lib/esm/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.js +40 -2
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +11 -0
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/esm/components/grid-image/GridImage.js +20 -2
- package/lib/esm/components/grid-image/GridImage.js.map +1 -1
- package/lib/esm/components/grid-image/GridImage.styles.js +10 -1
- package/lib/esm/components/grid-image/GridImage.styles.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.js +22 -4
- package/lib/esm/components/grouped-image/GroupedImage.js.map +1 -1
- package/lib/esm/components/grouped-image/GroupedImage.styles.js +9 -0
- package/lib/esm/components/grouped-image/GroupedImage.styles.js.map +1 -1
- package/lib/esm/components/highlight-slider/HighlightSlider.js +13 -3
- package/lib/esm/components/highlight-slider/HighlightSlider.js.map +1 -1
- package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.js +20 -3
- 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 +10 -1
- package/lib/esm/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.js.map +1 -1
- package/lib/esm/components/icon/Icon.js +26 -7
- package/lib/esm/components/icon/Icon.js.map +1 -1
- package/lib/esm/components/icon/Icon.styles.js +23 -0
- package/lib/esm/components/icon/Icon.styles.js.map +1 -1
- package/lib/esm/components/input/Input.js +24 -4
- package/lib/esm/components/input/Input.js.map +1 -1
- package/lib/esm/components/input/Input.styles.js +38 -3
- package/lib/esm/components/input/Input.styles.js.map +1 -1
- package/lib/esm/components/list/List.js +123 -37
- package/lib/esm/components/list/List.js.map +1 -1
- package/lib/esm/components/list/List.utils.js +202 -0
- package/lib/esm/components/list/List.utils.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.js +85 -4
- package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js +7 -0
- 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 -2
- 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 +4 -0
- 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 +1 -0
- 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 +4 -1
- 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 -0
- package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
- package/lib/esm/components/list/list-item/useListItemFocus.js +40 -0
- package/lib/esm/components/list/list-item/useListItemFocus.js.map +1 -0
- package/lib/esm/components/mention-finder/MentionFinder.js +39 -3
- 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 +36 -3
- package/lib/esm/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.styles.js +6 -0
- package/lib/esm/components/multi-action-button/MultiActionButton.styles.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 +7 -1
- 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 +12 -0
- package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map +1 -1
- package/lib/esm/components/number-input/NumberInput.js +13 -10
- package/lib/esm/components/number-input/NumberInput.js.map +1 -1
- package/lib/esm/components/page-provider/PageProvider.js +4 -2
- package/lib/esm/components/page-provider/PageProvider.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +8 -1
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +29 -15
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js +19 -8
- package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +7 -4
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.js +18 -4
- package/lib/esm/components/search-box/SearchBox.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.js +56 -44
- package/lib/esm/components/search-input/SearchInput.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js +25 -1
- package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/esm/components/select-button/SelectButton.js +4 -2
- package/lib/esm/components/select-button/SelectButton.js.map +1 -1
- package/lib/esm/components/setup-wizard/SetupWizard.js +10 -4
- package/lib/esm/components/setup-wizard/SetupWizard.js.map +1 -1
- package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js +5 -3
- package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map +1 -1
- package/lib/esm/components/sharing-bar/SharingBar.js +30 -5
- package/lib/esm/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/esm/components/sharing-bar/SharingBar.styles.js +5 -0
- package/lib/esm/components/sharing-bar/SharingBar.styles.js.map +1 -1
- package/lib/esm/components/sharing-button/SharingButton.js +4 -2
- package/lib/esm/components/sharing-button/SharingButton.js.map +1 -1
- package/lib/esm/components/sharing-context-menu/SharingContextMenu.js +3 -1
- package/lib/esm/components/sharing-context-menu/SharingContextMenu.js.map +1 -1
- package/lib/esm/components/signature/Signature.js +6 -3
- package/lib/esm/components/signature/Signature.js.map +1 -1
- package/lib/esm/components/slider/Slider.js +30 -7
- package/lib/esm/components/slider/Slider.js.map +1 -1
- package/lib/esm/components/slider/Slider.styles.js +8 -1
- package/lib/esm/components/slider/Slider.styles.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.js +62 -6
- package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js +14 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.types.js +2 -0
- package/lib/esm/components/slider-button/SliderButton.types.js.map +1 -0
- package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js +56 -0
- package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js.map +1 -0
- package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js +38 -0
- package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js.map +1 -0
- package/lib/esm/components/tag-input/TagInput.js +86 -35
- package/lib/esm/components/tag-input/TagInput.js.map +1 -1
- package/lib/esm/components/tag-input/TagInput.styles.js +27 -1
- package/lib/esm/components/tag-input/TagInput.styles.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.js +18 -9
- package/lib/esm/components/text-area/TextArea.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.styles.js +14 -0
- package/lib/esm/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.js +18 -4
- package/lib/esm/components/truncation/Truncation.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js +17 -0
- package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/esm/hooks/useKeyboardFocusHighlighting.js +49 -0
- package/lib/esm/hooks/useKeyboardFocusHighlighting.js.map +1 -0
- package/lib/esm/utils/file.js.map +1 -1
- package/lib/esm/utils/keyboardFocusHighlighting.styles.js +24 -0
- package/lib/esm/utils/keyboardFocusHighlighting.styles.js.map +1 -0
- package/lib/types/components/accordion/Accordion.d.ts +5 -0
- package/lib/types/components/accordion/Accordion.styles.d.ts +8 -4
- package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +2 -2
- package/lib/types/components/accordion/accordion-group/AccordionGroup.d.ts +7 -2
- package/lib/types/components/accordion/accordion-head/AccordionHead.d.ts +1 -0
- package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +18 -18
- package/lib/types/components/amount-control/AmountControl.d.ts +5 -0
- package/lib/types/components/amount-control/AmountControl.styles.d.ts +8 -4
- package/lib/types/components/button/Button.styles.d.ts +8 -6
- package/lib/types/components/button/Button.types.d.ts +8 -0
- package/lib/types/components/checkbox/Checkbox.d.ts +4 -0
- package/lib/types/components/checkbox/Checkbox.styles.d.ts +5 -1
- package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts +5 -0
- package/lib/types/components/combobox/ComboBox.styles.d.ts +4 -2
- package/lib/types/components/combobox/ComboBox.types.d.ts +5 -0
- package/lib/types/components/context-menu/ContextMenu.styles.d.ts +4 -2
- package/lib/types/components/context-menu/ContextMenu.types.d.ts +6 -0
- package/lib/types/components/context-menu/ContextMenu.utils.d.ts +10 -0
- package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.d.ts +1 -1
- 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 +4 -0
- package/lib/types/components/file-input/FileInput.styles.d.ts +2 -2
- package/lib/types/components/file-list/file-item/FileItem.styles.d.ts +3 -0
- package/lib/types/components/file-select/FileSelect.d.ts +4 -0
- package/lib/types/components/file-select/FileSelect.styles.d.ts +6 -4
- package/lib/types/components/filter/Filter.d.ts +1 -0
- package/lib/types/components/filter/Filter.styles.d.ts +6 -4
- package/lib/types/components/filter/filter-content/FilterContent.types.d.ts +4 -0
- package/lib/types/components/filter-buttons/FilterButtons.d.ts +4 -0
- package/lib/types/components/filter-buttons/filter-button/FilterButton.d.ts +5 -0
- package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +12 -8
- package/lib/types/components/grid-image/GridImage.d.ts +4 -0
- package/lib/types/components/grid-image/GridImage.styles.d.ts +4 -2
- package/lib/types/components/grouped-image/GroupedImage.d.ts +4 -0
- package/lib/types/components/grouped-image/GroupedImage.styles.d.ts +8 -6
- package/lib/types/components/highlight-slider/HighlightSlider.d.ts +4 -0
- package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.d.ts +3 -0
- package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.d.ts +9 -5
- package/lib/types/components/icon/Icon.d.ts +4 -0
- package/lib/types/components/icon/Icon.styles.d.ts +1 -0
- package/lib/types/components/input/Input.d.ts +4 -0
- package/lib/types/components/input/Input.styles.d.ts +17 -9
- package/lib/types/components/list/List.d.ts +11 -0
- package/lib/types/components/list/List.utils.d.ts +32 -1
- package/lib/types/components/list/list-item/ListItem.d.ts +4 -0
- 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.styles.d.ts +195 -194
- package/lib/types/components/list/list-item/useListItemFocus.d.ts +13 -0
- 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 +7 -0
- package/lib/types/components/multi-action-button/action-button/ActionButton.d.ts +4 -1
- package/lib/types/components/multi-action-button/action-button/ActionButton.styles.d.ts +4 -2
- package/lib/types/components/number-input/NumberInput.d.ts +4 -0
- 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 +4 -0
- package/lib/types/components/radio-button/RadioButton.styles.d.ts +15 -9
- package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +5 -0
- package/lib/types/components/search-box/SearchBox.d.ts +4 -0
- package/lib/types/components/search-box/SearchBox.styles.d.ts +2 -2
- package/lib/types/components/search-input/SearchInput.d.ts +4 -0
- package/lib/types/components/search-input/SearchInput.styles.d.ts +17 -9
- package/lib/types/components/select-button/SelectButton.d.ts +4 -0
- package/lib/types/components/setup-wizard/SetupWizard.d.ts +5 -0
- package/lib/types/components/sharing-bar/SharingBar.d.ts +4 -0
- package/lib/types/components/sharing-button/SharingButton.d.ts +1 -1
- package/lib/types/components/sharing-context-menu/SharingContextMenu.d.ts +10 -2
- package/lib/types/components/signature/Signature.d.ts +4 -0
- package/lib/types/components/skeleton/base-skeleton/BaseSkeleton.styles.d.ts +4 -4
- package/lib/types/components/slider/Slider.d.ts +8 -0
- package/lib/types/components/slider/Slider.styles.d.ts +18 -14
- package/lib/types/components/slider-button/SliderButton.d.ts +1 -28
- package/lib/types/components/slider-button/SliderButton.styles.d.ts +6 -4
- package/lib/types/components/slider-button/SliderButton.types.d.ts +32 -0
- package/lib/types/components/slider-button/useSliderButtonPopupKeyboard.d.ts +17 -0
- package/lib/types/components/slider-button/useSliderButtonThumbKeyboard.d.ts +13 -0
- package/lib/types/components/tag-input/TagInput.d.ts +4 -0
- package/lib/types/components/tag-input/TagInput.styles.d.ts +12 -2
- package/lib/types/components/text-area/TextArea.d.ts +4 -0
- package/lib/types/components/text-area/TextArea.styles.d.ts +1 -0
- package/lib/types/components/truncation/Truncation.d.ts +4 -0
- package/lib/types/components/truncation/Truncation.styles.d.ts +7 -2
- package/lib/types/hooks/useKeyboardFocusHighlighting.d.ts +5 -0
- package/lib/types/utils/file.d.ts +1 -1
- package/lib/types/utils/keyboardFocusHighlighting.styles.d.ts +9 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","_AreaContextProvider","_resize","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TagInput","forwardRef","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldPreventEnter","tags","ref","currentValue","setCurrentValue","useState","selectedId","setSelectedId","areaProvider","useContext","AreaContext","inputRef","useRef","useCursorRepaint","theme","useTheme","handleResetValue","shouldChangeColor","useMemo","useImperativeHandle","blur","_inputRef$current","current","getUnsavedTagText","undefined","resetValue","handleKeyDown","useCallback","event","key","prevValue","length","newTag","id","uuidv4","text","onAddResult","Promise","then","shouldAddTag","_tags2","_tags","newSelectedId","removedId","handleChange","target","value","handleIconClick","content","items","slice","forEach","rightElement","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","preventDefault","stopPropagation","shouldShowInput","StyledTagInput","$shouldChangeColor","StyledTagInputIconWrapper","StyledTagInputTagInput","onKeyDown","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n useImperativeHandle,\n useContext,\n ChangeEventHandler,\n ReactNode,\n FocusEventHandler,\n useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputIconWrapper,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport type TagInputProps = {\n /**\n * An element that should be displayed on the left side of the input.\n */\n leftElement?: ReactNode;\n /**\n * Function to be executed when a tag is added.\n */\n onAdd?: (tag: Tag) => Promise<boolean> | boolean | void;\n /**\n * Function to be executed when the input is blurred.\n */\n onBlur?: FocusEventHandler;\n /**\n * Function to be executed when the value of the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is focused.\n */\n onFocus?: FocusEventHandler;\n /**\n * Function to be executed when a tag is removed.\n */\n onRemove?: (id: string) => void;\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Whether multiple tags should be allowed.\n */\n shouldAllowMultiple?: boolean;\n /**\n * Whether the enter key should be prevented.\n */\n shouldPreventEnter?: boolean;\n /**\n * The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\nexport interface TagInputRef {\n blur: () => void;\n getUnsavedTagText: Tag['text'] | undefined;\n resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n (\n {\n leftElement,\n onAdd,\n onBlur,\n onChange,\n onFocus,\n onRemove,\n placeholder,\n shouldAllowMultiple = true,\n shouldPreventEnter,\n tags,\n },\n ref,\n ) => {\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const areaProvider = useContext(AreaContext);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n useCursorRepaint(inputRef);\n\n const theme = useTheme() as Theme;\n\n const handleResetValue = () => {\n setCurrentValue('');\n };\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n blur: () => inputRef.current?.blur(),\n getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n resetValue: handleResetValue,\n }),\n [currentValue],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter' && !shouldPreventEnter) {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n const onAddResult = onAdd(newTag);\n\n if (typeof onAddResult === 'boolean' && !onAddResult) {\n return prevValue;\n }\n\n if (onAddResult instanceof Promise) {\n void onAddResult.then((shouldAddTag) => {\n if (!shouldAddTag) {\n return prevValue;\n }\n\n return '';\n });\n }\n }\n\n return '';\n });\n }\n\n if (event.key === 'Backspace' && currentValue === '') {\n if (!selectedId) {\n if (!tags) {\n return;\n }\n\n const newSelectedId = tags[tags.length - 1]?.id;\n\n setSelectedId(newSelectedId);\n\n return;\n }\n\n if (!tags) {\n return;\n }\n\n const removedId = tags[tags.length - 1]?.id;\n\n if (!removedId) {\n return;\n }\n\n if (typeof onRemove === 'function') {\n onRemove(removedId);\n }\n\n setSelectedId(undefined);\n }\n },\n [\n currentValue,\n onAdd,\n onRemove,\n selectedId,\n shouldAllowMultiple,\n shouldPreventEnter,\n tags,\n ],\n );\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n },\n [onChange],\n );\n\n const handleIconClick = useCallback(\n (id: string) => {\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n },\n [onRemove],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!tags) {\n return items;\n }\n\n (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n ({ text, id, rightElement }) => {\n items.push(\n <Badge\n key={`tag-input-${id}`}\n backgroundColor={\n id === selectedId\n ? ((theme['206'] as string) ?? undefined)\n : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n {rightElement}\n <Icon\n icons={['ts-wrong']}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleIconClick(id);\n }}\n />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n },\n );\n\n return items;\n }, [tags, shouldAllowMultiple, selectedId, theme, handleIconClick]);\n\n const shouldShowInput = useMemo(\n () => shouldAllowMultiple || (tags?.length ?? 0) < 1,\n [tags?.length, shouldAllowMultiple],\n );\n\n return useMemo(\n () => (\n <StyledTagInput $shouldChangeColor={shouldChangeColor}>\n {leftElement && (\n <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n )}\n {content}\n {shouldShowInput && (\n <StyledTagInputTagInput\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n ref={inputRef}\n value={currentValue}\n />\n )}\n </StyledTagInput>\n ),\n [\n content,\n currentValue,\n handleChange,\n handleKeyDown,\n leftElement,\n onBlur,\n onFocus,\n placeholder,\n shouldChangeColor,\n shouldShowInput,\n tags,\n ],\n );\n },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","_AreaContextProvider","_resize","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TagInput","forwardRef","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","tags","ref","currentValue","setCurrentValue","useState","selectedId","setSelectedId","areaProvider","useContext","AreaContext","inputRef","useRef","useCursorRepaint","theme","useTheme","handleResetValue","shouldChangeColor","useMemo","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","shouldShowTagHighlighting","useImperativeHandle","blur","_inputRef$current","current","getUnsavedTagText","undefined","resetValue","handleRemoveTag","useCallback","id","currentTags","_currentTags","_currentTags2","removedTagIndex","findIndex","tag","handleKeyDown","event","visibleTags","slice","selectedTagIndex","selectedTag","isSpaceKey","key","isEnterKey","isDeleteKey","length","_visibleTags2","preventDefault","_visibleTags","_visibleTags3","_visibleTags$","_visibleTags4","_visibleTags5","prevValue","newTag","uuidv4","text","onAddResult","Promise","then","shouldAddTag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","isSelected","push","createElement","StyledTagInputTagFocusWrapper","$isSelected","$shouldShowKeyboardHighlighting","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","stopPropagation","shouldShowInput","StyledTagInput","$shouldChangeColor","$shouldShowTagHighlighting","StyledTagInputIconWrapper","StyledTagInputTagInput","onKeyDown","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n useImperativeHandle,\n useContext,\n ChangeEventHandler,\n ReactNode,\n FocusEventHandler,\n useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagFocusWrapper,\n StyledTagInputIconWrapper,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TagInputProps = {\n /**\n * An element that should be displayed on the left side of the input.\n */\n leftElement?: ReactNode;\n /**\n * Function to be executed when a tag is added.\n */\n onAdd?: (tag: Tag) => Promise<boolean> | boolean | void;\n /**\n * Function to be executed when the input is blurred.\n */\n onBlur?: FocusEventHandler;\n /**\n * Function to be executed when the value of the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is focused.\n */\n onFocus?: FocusEventHandler;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n /**\n * Function to be executed when a tag is removed.\n */\n onRemove?: (id: string) => void;\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Whether multiple tags should be allowed.\n */\n shouldAllowMultiple?: boolean;\n /**\n * Whether the enter key should be prevented.\n */\n shouldPreventEnter?: boolean;\n /**\n * The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\nexport interface TagInputRef {\n blur: () => void;\n getUnsavedTagText: Tag['text'] | undefined;\n resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n (\n {\n leftElement,\n onAdd,\n onBlur,\n onChange,\n onFocus,\n onRemove,\n placeholder,\n shouldAllowMultiple = true,\n shouldEnableKeyboardHighlighting,\n shouldPreventEnter,\n tags,\n },\n ref,\n ) => {\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const areaProvider = useContext(AreaContext);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n useCursorRepaint(inputRef);\n\n const theme = useTheme() as Theme;\n\n const handleResetValue = () => {\n setCurrentValue('');\n };\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const shouldShowTagHighlighting =\n shouldShowKeyboardHighlighting && typeof selectedId === 'string';\n\n useImperativeHandle(\n ref,\n () => ({\n blur: () => inputRef.current?.blur(),\n getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n resetValue: handleResetValue,\n }),\n [currentValue],\n );\n\n const handleRemoveTag = useCallback(\n (id: string, currentTags: Tag[]) => {\n const removedTagIndex = currentTags.findIndex((tag) => tag.id === id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n if (removedTagIndex < 0) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(\n currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id,\n );\n },\n [onRemove],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n const visibleTags = shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1);\n const selectedTagIndex = visibleTags.findIndex((tag) => tag.id === selectedId);\n const selectedTag =\n selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;\n const isSpaceKey = event.key === ' ';\n const isEnterKey = event.key === 'Enter';\n const isDeleteKey = event.key === 'Delete';\n\n if (currentValue === '' && visibleTags.length > 0) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n\n if (!selectedId) {\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n if (selectedTagIndex <= 0) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(visibleTags[selectedTagIndex - 1]?.id);\n return;\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n\n if (!selectedId || selectedTagIndex < 0) {\n return;\n }\n\n if (selectedTagIndex >= visibleTags.length - 1) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(visibleTags[selectedTagIndex + 1]?.id);\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n setSelectedId(visibleTags[0]?.id);\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n if (isEnterKey || isSpaceKey || event.key === 'Backspace' || isDeleteKey) {\n event.preventDefault();\n\n if (!selectedTag) {\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n handleRemoveTag(selectedTag.id, visibleTags);\n return;\n }\n }\n\n if (isEnterKey && !shouldPreventEnter) {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n const onAddResult = onAdd(newTag);\n\n if (typeof onAddResult === 'boolean' && !onAddResult) {\n return prevValue;\n }\n\n if (onAddResult instanceof Promise) {\n void onAddResult.then((shouldAddTag) => {\n if (!shouldAddTag) {\n return prevValue;\n }\n\n return '';\n });\n }\n }\n\n return '';\n });\n }\n },\n [\n currentValue,\n onAdd,\n handleRemoveTag,\n selectedId,\n shouldAllowMultiple,\n shouldPreventEnter,\n tags,\n ],\n );\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n },\n [onChange],\n );\n\n const handleIconClick = useCallback(\n (id: string) => {\n handleRemoveTag(id, shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1));\n },\n [handleRemoveTag, shouldAllowMultiple, tags],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!tags) {\n return items;\n }\n\n (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n ({ text, id, rightElement }) => {\n const isSelected = id === selectedId;\n\n items.push(\n <StyledTagInputTagFocusWrapper\n $isSelected={isSelected}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n key={`tag-input-${id}`}\n >\n <Badge\n backgroundColor={\n isSelected ? ((theme['206'] as string) ?? undefined) : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>\n {text}\n </StyledTagInputTagWrapperText>\n {rightElement}\n <Icon\n icons={['ts-wrong']}\n shouldEnableKeyboardHighlighting={false}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleIconClick(id);\n }}\n />\n </StyledTagInputTagWrapper>\n </Badge>\n </StyledTagInputTagFocusWrapper>,\n );\n },\n );\n\n return items;\n }, [\n tags,\n shouldAllowMultiple,\n selectedId,\n shouldShowKeyboardHighlighting,\n theme,\n handleIconClick,\n ]);\n\n const shouldShowInput = useMemo(\n () => shouldAllowMultiple || (tags?.length ?? 0) < 1,\n [tags?.length, shouldAllowMultiple],\n );\n\n return useMemo(\n () => (\n <StyledTagInput\n $shouldChangeColor={shouldChangeColor}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $shouldShowTagHighlighting={shouldShowTagHighlighting}\n >\n {leftElement && (\n <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n )}\n {content}\n {shouldShowInput && (\n <StyledTagInputTagInput\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n ref={inputRef}\n value={currentValue}\n />\n )}\n </StyledTagInput>\n ),\n [\n content,\n currentValue,\n handleChange,\n handleKeyDown,\n leftElement,\n onBlur,\n onFocus,\n placeholder,\n shouldChangeColor,\n shouldShowInput,\n shouldShowKeyboardHighlighting,\n shouldShowTagHighlighting,\n tags,\n ],\n );\n },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapper = exports.StyledTagInputTagInput = exports.StyledTagInputIconWrapper = exports.StyledTagInput = void 0;
|
|
7
|
-
var _styledComponents =
|
|
8
|
-
|
|
6
|
+
exports.StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapper = exports.StyledTagInputTagInput = exports.StyledTagInputTagFocusWrapper = exports.StyledTagInputIconWrapper = exports.StyledTagInput = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
+
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
|
|
9
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
9
10
|
const StyledTagInput = exports.StyledTagInput = _styledComponents.default.div`
|
|
10
11
|
display: flex;
|
|
11
12
|
flex-wrap: wrap;
|
|
@@ -18,12 +19,37 @@ const StyledTagInput = exports.StyledTagInput = _styledComponents.default.div`
|
|
|
18
19
|
$shouldChangeColor
|
|
19
20
|
}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
|
|
20
21
|
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
22
|
+
|
|
23
|
+
${({
|
|
24
|
+
$shouldShowKeyboardHighlighting,
|
|
25
|
+
$shouldShowTagHighlighting
|
|
26
|
+
}) => $shouldShowKeyboardHighlighting && !$shouldShowTagHighlighting && (0, _styledComponents.css)`
|
|
27
|
+
&:focus-within {
|
|
28
|
+
transition: none;
|
|
29
|
+
${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
|
|
30
|
+
}
|
|
31
|
+
`}
|
|
21
32
|
`;
|
|
22
33
|
const StyledTagInputTagWrapper = exports.StyledTagInputTagWrapper = _styledComponents.default.div`
|
|
23
34
|
display: flex;
|
|
24
35
|
align-items: center;
|
|
25
36
|
gap: 4px;
|
|
26
37
|
`;
|
|
38
|
+
const StyledTagInputTagFocusWrapper = exports.StyledTagInputTagFocusWrapper = _styledComponents.default.div`
|
|
39
|
+
display: inline-flex;
|
|
40
|
+
|
|
41
|
+
${({
|
|
42
|
+
$isSelected,
|
|
43
|
+
$shouldShowKeyboardHighlighting
|
|
44
|
+
}) => $isSelected && $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
|
|
45
|
+
${StyledTagInput}:focus-within & > .beta-chayns-badge {
|
|
46
|
+
transition: none;
|
|
47
|
+
${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
|
|
48
|
+
border-radius: 999px;
|
|
49
|
+
outline-offset: 0;
|
|
50
|
+
}
|
|
51
|
+
`}
|
|
52
|
+
`;
|
|
27
53
|
const StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapperText = _styledComponents.default.p`
|
|
28
54
|
margin: 0;
|
|
29
55
|
flex-grow: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInput.styles.js","names":["_styledComponents","
|
|
1
|
+
{"version":3,"file":"TagInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTagInput","exports","styled","div","theme","$shouldChangeColor","colorMode","$shouldShowKeyboardHighlighting","$shouldShowTagHighlighting","css","keyboardFocusHighlightingRingCss","StyledTagInputTagWrapper","StyledTagInputTagFocusWrapper","$isSelected","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledTagInputProps = WithTheme<{\n $shouldChangeColor: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n $shouldShowTagHighlighting: boolean;\n}>;\n\ntype StyledTagInputTagFocusWrapperProps = {\n $isSelected: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n display: flex;\n flex-wrap: wrap;\n min-height: 42px;\n padding: 5px;\n align-items: center;\n gap: 6px;\n background-color: ${({ theme, $shouldChangeColor }: StyledTagInputProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n\n ${({ $shouldShowKeyboardHighlighting, $shouldShowTagHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n !$shouldShowTagHighlighting &&\n css`\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const StyledTagInputTagFocusWrapper = styled.div<StyledTagInputTagFocusWrapperProps>`\n display: inline-flex;\n\n ${({ $isSelected, $shouldShowKeyboardHighlighting }) =>\n $isSelected &&\n $shouldShowKeyboardHighlighting &&\n css`\n ${StyledTagInput}:focus-within & > .beta-chayns-badge {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n border-radius: 999px;\n outline-offset: 0;\n }\n `}\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n margin: 0;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n border: none;\n height: 24px;\n flex-grow: 1;\n background-color: transparent;\n color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n\nexport const StyledTagInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,0BAAA,GAAAD,OAAA;AAAgG,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAazF,MAAMkB,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KACnED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,MAAM,CAAC;EAAEG,+BAA+B;EAAEC;AAA2B,CAAC,KAC9DD,+BAA+B,IAC/B,CAACC,0BAA0B,IAC3B,IAAAC,qBAAG;AACX;AACA;AACA,kBAAkBC,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,wBAAwB,GAAAV,OAAA,CAAAU,wBAAA,GAAGT,yBAAM,CAACC,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAEM,MAAMS,6BAA6B,GAAAX,OAAA,CAAAW,6BAAA,GAAGV,yBAAM,CAACC,GAAuC;AAC3F;AACA;AACA,MAAM,CAAC;EAAEU,WAAW;EAAEN;AAAgC,CAAC,KAC/CM,WAAW,IACXN,+BAA+B,IAC/B,IAAAE,qBAAG;AACX,cAAcT,cAAc;AAC5B;AACA,kBAAkBU,2DAAgC;AAClD;AACA;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAMI,4BAA4B,GAAAb,OAAA,CAAAa,4BAAA,GAAGZ,yBAAM,CAACa,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAf,OAAA,CAAAe,sBAAA,GAAGd,yBAAM,CAACe,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEb;AAAmC,CAAC,KAAKA,KAAK,CAACc,IAAI;AACnE,CAAC;AAEM,MAAMC,yBAAyB,GAAAlB,OAAA,CAAAkB,yBAAA,GAAGjB,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -10,12 +10,13 @@ var _AreaContextProvider = require("../area-provider/AreaContextProvider");
|
|
|
10
10
|
var _Input = require("../input/Input.styles");
|
|
11
11
|
var _TextArea = require("./TextArea.styles");
|
|
12
12
|
var _resize = require("../../hooks/resize");
|
|
13
|
+
var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
|
|
13
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
15
|
const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
|
|
15
16
|
"use memo";
|
|
16
17
|
|
|
17
18
|
var _rightElement$props;
|
|
18
|
-
const $ = (0, _reactCompilerRuntime.c)(
|
|
19
|
+
const $ = (0, _reactCompilerRuntime.c)(29);
|
|
19
20
|
const {
|
|
20
21
|
isDisabled,
|
|
21
22
|
isInvalid,
|
|
@@ -28,7 +29,8 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
|
|
|
28
29
|
onBlur,
|
|
29
30
|
maxHeight: t1,
|
|
30
31
|
minHeight: t2,
|
|
31
|
-
colors
|
|
32
|
+
colors,
|
|
33
|
+
shouldEnableKeyboardHighlighting
|
|
32
34
|
} = t0;
|
|
33
35
|
const maxHeight = t1 === undefined ? "120px" : t1;
|
|
34
36
|
const minHeight = t2 === undefined ? "41px" : t2;
|
|
@@ -38,6 +40,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
|
|
|
38
40
|
(0, _resize.useCursorRepaint)(textareaRef);
|
|
39
41
|
const shouldShowBorder = (rightElement === null || rightElement === void 0 || (_rightElement$props = rightElement.props) === null || _rightElement$props === void 0 || (_rightElement$props = _rightElement$props.style) === null || _rightElement$props === void 0 ? void 0 : _rightElement$props.backgroundColor) === undefined;
|
|
40
42
|
const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
|
|
43
|
+
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
|
|
41
44
|
let t3;
|
|
42
45
|
if ($[0] !== maxHeight) {
|
|
43
46
|
t3 = () => {
|
|
@@ -96,7 +99,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
|
|
|
96
99
|
}
|
|
97
100
|
const labelPosition = t7;
|
|
98
101
|
let t8;
|
|
99
|
-
if ($[9] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== value) {
|
|
102
|
+
if ($[9] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== shouldShowKeyboardHighlighting || $[27] !== value) {
|
|
100
103
|
colors === null || colors === void 0 || colors.backgroundColor;
|
|
101
104
|
colors === null || colors === void 0 || colors.borderColor;
|
|
102
105
|
t8 = (() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
|
|
@@ -105,7 +108,8 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
|
|
|
105
108
|
$isInvalid: isInvalid,
|
|
106
109
|
$shouldChangeColor: shouldChangeColor,
|
|
107
110
|
$backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundColor,
|
|
108
|
-
$borderColor: colors === null || colors === void 0 ? void 0 : colors.borderColor
|
|
111
|
+
$borderColor: colors === null || colors === void 0 ? void 0 : colors.borderColor,
|
|
112
|
+
"data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting
|
|
109
113
|
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContent, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
|
|
110
114
|
className: "chayns-scrollbar",
|
|
111
115
|
disabled: isDisabled,
|
|
@@ -132,7 +136,11 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
|
|
|
132
136
|
}
|
|
133
137
|
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
|
|
134
138
|
$isInvalid: isInvalid
|
|
135
|
-
}, placeholder))), rightElement && shouldShowBorder &&
|
|
139
|
+
}, placeholder))), rightElement && shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, {
|
|
140
|
+
$isInline: true
|
|
141
|
+
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledRightElementWrapper, null, rightElement))), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, {
|
|
142
|
+
$isInline: true
|
|
143
|
+
}, /*#__PURE__*/_react.default.createElement(_TextArea.StyledRightElementWrapper, null, rightElement))))();
|
|
136
144
|
$[9] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
|
|
137
145
|
$[10] = colors === null || colors === void 0 ? void 0 : colors.borderColor;
|
|
138
146
|
$[11] = hasValue;
|
|
@@ -150,10 +158,11 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
|
|
|
150
158
|
$[23] = rightElement;
|
|
151
159
|
$[24] = shouldChangeColor;
|
|
152
160
|
$[25] = shouldShowBorder;
|
|
153
|
-
$[26] =
|
|
154
|
-
$[27] =
|
|
161
|
+
$[26] = shouldShowKeyboardHighlighting;
|
|
162
|
+
$[27] = value;
|
|
163
|
+
$[28] = t8;
|
|
155
164
|
} else {
|
|
156
|
-
t8 = $[
|
|
165
|
+
t8 = $[28];
|
|
157
166
|
}
|
|
158
167
|
return t8;
|
|
159
168
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_AreaContextProvider","_Input","_TextArea","_resize","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextArea","forwardRef","t0","ref","_rightElement$props","$","_reactCompilerRuntime","c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","useCursorRepaint","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","useImperativeHandle","t5","t6","length","useEffect","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","StyledTextArea","StyledTextAreaContentWrapper","$backgroundColor","$borderColor","StyledTextAreaContent","StyledTextAreaInput","className","rows","StyledTextAreaLabelWrapper","animate","fontSize","initial","transition","type","duration","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n /**\n * Disables the text area so that it cannot be changed.\n */\n isDisabled?: boolean;\n /**\n * If true, the text area is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n /**\n * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n colors,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n useCursorRepaint(textareaRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n const hasValue = value !== undefined && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n <StyledTextAreaLabelWrapper\n animate={{ fontSize: hasValue ? '9px' : undefined }}\n initial={false}\n style={labelPosition}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && rightElement}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_AreaContextProvider","_Input","_TextArea","_resize","_useKeyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextArea","forwardRef","t0","ref","_rightElement$props","$","_reactCompilerRuntime","c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","shouldEnableKeyboardHighlighting","undefined","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","useCursorRepaint","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","useImperativeHandle","t5","t6","length","useEffect","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","StyledTextArea","StyledTextAreaContentWrapper","$backgroundColor","$borderColor","StyledTextAreaContent","StyledTextAreaInput","className","rows","StyledTextAreaLabelWrapper","animate","fontSize","initial","transition","type","duration","StyledTextAreaLabel","StyledInputRightElement","$isInline","StyledRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledRightElementWrapper,\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ntype TextAreaColors = {\n backgroundColor: CSSProperties['backgroundColor'];\n borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n /**\n * Disables the text area so that it cannot be changed.\n */\n isDisabled?: boolean;\n /**\n * If true, the text area is marked as invalid\n */\n isInvalid?: boolean;\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n /**\n * Provide custom colors to the TextArea Component\n */\n colors?: TextAreaColors;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n colors,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n 'use memo';\n\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n useCursorRepaint(textareaRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n const hasValue = value !== undefined && value.length > 0;\n\n const labelPosition = useMemo(\n () =>\n hasValue\n ? {\n bottom: '2px',\n right: '2px',\n }\n : {\n top: '12px',\n left: '10px',\n },\n [hasValue],\n );\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n $backgroundColor={colors?.backgroundColor}\n $borderColor={colors?.borderColor}\n data-should-show-keyboard-highlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n className=\"chayns-scrollbar\"\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n <StyledTextAreaLabelWrapper\n animate={{ fontSize: hasValue ? '9px' : undefined }}\n initial={false}\n style={labelPosition}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>\n {rightElement}\n </StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement $isInline>\n <StyledRightElementWrapper>{rightElement}</StyledRightElementWrapper>\n </StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n isDisabled,\n isInvalid,\n shouldChangeColor,\n shouldShowKeyboardHighlighting,\n colors?.backgroundColor,\n colors?.borderColor,\n value,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n maxHeight,\n minHeight,\n isOverflowing,\n hasValue,\n labelPosition,\n placeholder,\n rightElement,\n shouldShowBorder,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledTextAreaLabelWrapper = exports.StyledTextAreaLabel = exports.StyledTextAreaInput = exports.StyledTextAreaContentWrapper = exports.StyledTextAreaContent = exports.StyledTextArea = void 0;
|
|
6
|
+
exports.StyledTextAreaLabelWrapper = exports.StyledTextAreaLabel = exports.StyledTextAreaInput = exports.StyledTextAreaContentWrapper = exports.StyledTextAreaContent = exports.StyledTextArea = exports.StyledRightElementWrapper = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
var _react = require("motion/react");
|
|
9
|
+
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
11
|
const StyledTextArea = exports.StyledTextArea = _styledComponents.default.div`
|
|
11
12
|
display: flex;
|
|
@@ -31,6 +32,13 @@ const StyledTextAreaContentWrapper = exports.StyledTextAreaContentWrapper = _sty
|
|
|
31
32
|
}) => $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};
|
|
32
33
|
width: 100%;
|
|
33
34
|
display: flex;
|
|
35
|
+
|
|
36
|
+
&[data-should-show-keyboard-highlighting='true'] {
|
|
37
|
+
&:focus-within {
|
|
38
|
+
transition: none;
|
|
39
|
+
${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
34
42
|
`;
|
|
35
43
|
const StyledTextAreaContent = exports.StyledTextAreaContent = _styledComponents.default.div`
|
|
36
44
|
position: relative;
|
|
@@ -82,4 +90,10 @@ const StyledTextAreaLabel = exports.StyledTextAreaLabel = _styledComponents.defa
|
|
|
82
90
|
cursor: text;
|
|
83
91
|
text-overflow: ellipsis;
|
|
84
92
|
`;
|
|
93
|
+
const StyledRightElementWrapper = exports.StyledRightElementWrapper = _styledComponents.default.div`
|
|
94
|
+
display: flex;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
align-items: center;
|
|
97
|
+
height: 100%;
|
|
98
|
+
`;
|
|
85
99
|
//# sourceMappingURL=TextArea.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","_react","e","__esModule","default","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","motion","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\nimport { motion } from 'motion/react';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $borderColor?: CSSProperties['borderColor'];\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor, $backgroundColor }) =>\n $backgroundColor ??\n (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid, $borderColor }) =>\n $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n`;\n\nexport const StyledTextAreaLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","_react","_keyboardFocusHighlighting","e","__esModule","default","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","keyboardFocusHighlightingRingCss","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","motion","label","StyledTextAreaLabel","StyledRightElementWrapper"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\nimport { motion } from 'motion/react';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $borderColor?: CSSProperties['borderColor'];\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor, $backgroundColor }) =>\n $backgroundColor ??\n (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid, $borderColor }) =>\n $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};\n width: 100%;\n display: flex;\n\n &[data-should-show-keyboard-highlighting='true'] {\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n }\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n`;\n\nexport const StyledTextAreaLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n`;\n\nexport const StyledRightElementWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AAAgG,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIzF,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAQM,MAAMC,4BAA4B,GAAAJ,OAAA,CAAAI,4BAAA,GAAGH,yBAAM,CAACC,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC,kBAAkB;EAAEC;AAAiB,CAAC,KAChEA,gBAAgB,KACfF,KAAK,CAACG,SAAS,KAAK,SAAS,IAAIF,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC,CAAC;AAC3F;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEI,UAAU;EAAEC;AAAa,CAAC,KAClCA,YAAY,KAAKD,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,0BAA0B,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,2DAAgC;AAC9C;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAb,OAAA,CAAAa,qBAAA,GAAGZ,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASM,MAAMY,mBAAmB,GAAAd,OAAA,CAAAc,mBAAA,GAAGb,yBAAM,CAACc,QAAkC;AAC5E,aAAa,CAAC;EAAEV,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACW,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAApB,OAAA,CAAAoB,0BAAA,GAAG,IAAAnB,yBAAM,EAACoB,aAAM,CAACC,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAvB,OAAA,CAAAuB,mBAAA,GAAGtB,yBAAM,CAACqB,KAA+B;AACzE,aAAa,CAAC;EAAEjB,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,QAAQN,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMmB,yBAAyB,GAAAxB,OAAA,CAAAwB,yBAAA,GAAGvB,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ var _truncation2 = require("../../utils/truncation");
|
|
|
11
11
|
var _Truncation = require("./Truncation.styles");
|
|
12
12
|
var _textstring = require("@chayns-components/textstring");
|
|
13
13
|
var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
|
|
14
|
+
var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
|
|
14
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
16
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
17
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
|
|
@@ -21,8 +22,10 @@ const Truncation = ({
|
|
|
21
22
|
moreLabel,
|
|
22
23
|
lessLabel,
|
|
23
24
|
onChange,
|
|
24
|
-
children
|
|
25
|
+
children,
|
|
26
|
+
shouldEnableKeyboardHighlighting
|
|
25
27
|
}) => {
|
|
28
|
+
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
|
|
26
29
|
const [internalIsOpen, setInternalIsOpen] = (0, _react.useState)(false);
|
|
27
30
|
const [showClamp, setShowClamp] = (0, _react.useState)(true);
|
|
28
31
|
const [newCollapsedHeight, setNewCollapsedHeight] = (0, _react.useState)(collapsedHeight);
|
|
@@ -60,6 +63,12 @@ const Truncation = ({
|
|
|
60
63
|
return !current;
|
|
61
64
|
});
|
|
62
65
|
}, [onChange]);
|
|
66
|
+
const handleClampKeyDown = (0, _react.useCallback)(event => {
|
|
67
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
event.currentTarget.click();
|
|
70
|
+
}
|
|
71
|
+
}, []);
|
|
63
72
|
(0, _react.useEffect)(() => {
|
|
64
73
|
if (children) {
|
|
65
74
|
setShouldSkipChangeCheck(true);
|
|
@@ -187,9 +196,14 @@ const Truncation = ({
|
|
|
187
196
|
$position: clampPosition
|
|
188
197
|
}, /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
|
|
189
198
|
libraryName: "@chayns-components-core"
|
|
199
|
+
}, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClampFocusWrapper, {
|
|
200
|
+
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
|
|
190
201
|
}, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClamp, {
|
|
191
|
-
onClick: handleClampClick
|
|
192
|
-
|
|
202
|
+
onClick: handleClampClick,
|
|
203
|
+
onKeyDown: handleClampKeyDown,
|
|
204
|
+
role: "button",
|
|
205
|
+
tabIndex: 0
|
|
206
|
+
}, internalIsOpen ? internalLessLabel : internalMoreLabel))))), [children, clampPosition, handleAnimationEnd, handleClampClick, handleClampKeyDown, hasSizeChanged, internalIsOpen, lessLabel, moreLabel, newCollapsedHeight, originalHeight, shouldShowKeyboardHighlighting, showClamp]);
|
|
193
207
|
};
|
|
194
208
|
var _default = exports.default = Truncation;
|
|
195
209
|
//# sourceMappingURL=Truncation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_debounce","_truncation2","_Truncation","_textstring","_textStrings","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","shouldSkipChangeCheck","setShouldSkipChangeCheck","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","useRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","useCallback","event","current","setTimeout","handleAnimationEnd","offsetHeight","truncateElement","_parentRef$current","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","debounce","observe","disconnect","ts","textStrings","components","truncation","internalMoreLabel","createElement","Textstring","textstring","ttsToITextString","more","internalLessLabel","less","useMemo","StyledTruncation","className","ref","StyledTruncationPseudoContent","StyledMotionTruncationContent","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","StyledTruncationClampWrapper","$position","TextstringProvider","libraryName","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\n\nexport type TruncationProps = {\n /**\n * The elements that should be expanding or collapsing.\n */\n children: ReactElement;\n /**\n * The position of the clamp.\n */\n clampPosition?: ClampPosition;\n /**\n * The height of the children Element in it`s collapsed state.\n */\n collapsedHeight?: number;\n /**\n * If set to true, the content is exposed.\n */\n isOpen?: boolean;\n /**\n * A text that should be displayed if the content is expanded.\n */\n lessLabel?: string;\n /**\n * A text that should be displayed if the content is collapsed.\n */\n moreLabel?: string;\n /**\n * Function to be executed when the component is expanding or collapsing.\n */\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n moreLabel,\n lessLabel,\n onChange,\n children,\n}) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = useState(false);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const parentRef = useRef<HTMLDivElement>(null);\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n const hasCollapsed = useRef(false);\n const isAnimating = useRef(false);\n const hasSizeRecentlyChanged = useRef(false);\n const canResetSizeChanged = useRef(true);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\n return !current;\n });\n },\n [onChange],\n );\n\n useEffect(() => {\n if (children) {\n setShouldSkipChangeCheck(true);\n\n window.setTimeout(() => {\n setShouldSkipChangeCheck(false);\n }, 200);\n }\n }, [children]);\n\n const handleAnimationEnd = useCallback(() => {\n hasCollapsed.current = true;\n isAnimating.current = false;\n\n if (canResetSizeChanged.current) {\n setHasSizeChanged(false);\n canResetSizeChanged.current = false;\n }\n\n window.setTimeout(() => {\n hasSizeRecentlyChanged.current = false;\n }, 10);\n\n setShouldShowCollapsedElement(!internalIsOpen);\n\n window.setTimeout(() => {\n hasCollapsed.current = false;\n }, 30);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef, children]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (\n pseudoChildrenRef.current &&\n (!hasSizeChanged || shouldSkipChangeCheck) &&\n !initialRender\n ) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [\n shouldSkipChangeCheck,\n collapsedHeight,\n hasSizeChanged,\n initialRender,\n newCollapsedHeight,\n originalHeight,\n children,\n ]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n parentRef.current?.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? originalChildrenRef.current\n : pseudoChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useIsomorphicLayoutEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight, children]);\n\n useIsomorphicLayoutEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight, children]);\n\n const ts = textStrings.components.truncation;\n\n const internalMoreLabel = moreLabel ?? <Textstring textstring={ttsToITextString(ts.more)} />;\n const internalLessLabel = lessLabel ?? <Textstring textstring={ttsToITextString(ts.less)} />;\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n onAnimationStart={() => {\n isAnimating.current = true;\n }}\n ref={childrenRef}\n />\n {showClamp && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClamp onClick={handleClampClick}>\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n ),\n [\n children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_debounce","_truncation2","_Truncation","_textstring","_textStrings","_interopRequireDefault","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","internalIsOpen","setInternalIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","shouldSkipChangeCheck","setShouldSkipChangeCheck","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","useRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","useCallback","event","current","handleClampKeyDown","key","preventDefault","currentTarget","click","setTimeout","handleAnimationEnd","offsetHeight","truncateElement","_parentRef$current","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","debounce","observe","disconnect","ts","textStrings","components","truncation","internalMoreLabel","createElement","Textstring","textstring","ttsToITextString","more","internalLessLabel","less","useMemo","StyledTruncation","className","ref","StyledTruncationPseudoContent","StyledMotionTruncationContent","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","StyledTruncationClampWrapper","$position","TextstringProvider","libraryName","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","StyledTruncationClamp","onClick","onKeyDown","role","tabIndex","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TruncationProps = {\n /**\n * The elements that should be expanding or collapsing.\n */\n children: ReactElement;\n /**\n * The position of the clamp.\n */\n clampPosition?: ClampPosition;\n /**\n * The height of the children Element in it`s collapsed state.\n */\n collapsedHeight?: number;\n /**\n * If set to true, the content is exposed.\n */\n isOpen?: boolean;\n /**\n * A text that should be displayed if the content is expanded.\n */\n lessLabel?: string;\n /**\n * A text that should be displayed if the content is collapsed.\n */\n moreLabel?: string;\n /**\n * Function to be executed when the component is expanding or collapsing.\n */\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n moreLabel,\n lessLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = useState(false);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const parentRef = useRef<HTMLDivElement>(null);\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n const hasCollapsed = useRef(false);\n const isAnimating = useRef(false);\n const hasSizeRecentlyChanged = useRef(false);\n const canResetSizeChanged = useRef(true);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n useEffect(() => {\n if (children) {\n setShouldSkipChangeCheck(true);\n\n window.setTimeout(() => {\n setShouldSkipChangeCheck(false);\n }, 200);\n }\n }, [children]);\n\n const handleAnimationEnd = useCallback(() => {\n hasCollapsed.current = true;\n isAnimating.current = false;\n\n if (canResetSizeChanged.current) {\n setHasSizeChanged(false);\n canResetSizeChanged.current = false;\n }\n\n window.setTimeout(() => {\n hasSizeRecentlyChanged.current = false;\n }, 10);\n\n setShouldShowCollapsedElement(!internalIsOpen);\n\n window.setTimeout(() => {\n hasCollapsed.current = false;\n }, 30);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef, children]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (\n pseudoChildrenRef.current &&\n (!hasSizeChanged || shouldSkipChangeCheck) &&\n !initialRender\n ) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [\n shouldSkipChangeCheck,\n collapsedHeight,\n hasSizeChanged,\n initialRender,\n newCollapsedHeight,\n originalHeight,\n children,\n ]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n parentRef.current?.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? originalChildrenRef.current\n : pseudoChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useIsomorphicLayoutEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight, children]);\n\n useIsomorphicLayoutEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight, children]);\n\n const ts = textStrings.components.truncation;\n\n const internalMoreLabel = moreLabel ?? <Textstring textstring={ttsToITextString(ts.more)} />;\n const internalLessLabel = lessLabel ?? <Textstring textstring={ttsToITextString(ts.less)} />;\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n onAnimationStart={() => {\n isAnimating.current = true;\n }}\n ref={childrenRef}\n />\n {showClamp && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClampFocusWrapper\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTruncationClamp\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n ),\n [\n children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n handleClampKeyDown,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n shouldShowKeyboardHighlighting,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
|