@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.28
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/css/salt-lab.css +327 -561
- package/dist-cjs/combo-box-next/ComboBoxNext.js +303 -166
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-cjs/combo-box-next/useComboBoxNext.js +55 -0
- package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -0
- package/dist-cjs/dropdown/DropdownBase.js +1 -1
- package/dist-cjs/dropdown/DropdownBase.js.map +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.css.js +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.js +333 -169
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-cjs/editable-label/EditableLabel.js +1 -1
- package/dist-cjs/editable-label/EditableLabel.js.map +1 -1
- package/dist-cjs/index.js +8 -24
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/layer-layout/LayerLayout.js +1 -3
- package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +36 -0
- package/dist-cjs/list-control/ListControlContext.js.map +1 -0
- package/dist-cjs/list-control/ListControlState.js +193 -0
- package/dist-cjs/list-control/ListControlState.js.map +1 -0
- package/dist-cjs/option/Option.css.js +6 -0
- package/dist-cjs/option/Option.css.js.map +1 -0
- package/dist-cjs/option/Option.js +113 -0
- package/dist-cjs/option/Option.js.map +1 -0
- package/dist-cjs/option/OptionGroup.css.js +6 -0
- package/dist-cjs/option/OptionGroup.css.js.map +1 -0
- package/dist-cjs/option/OptionGroup.js +44 -0
- package/dist-cjs/option/OptionGroup.js.map +1 -0
- package/dist-cjs/option/OptionList.css.js +6 -0
- package/dist-cjs/option/OptionList.css.js.map +1 -0
- package/dist-cjs/option/OptionList.js +40 -0
- package/dist-cjs/option/OptionList.js.map +1 -0
- package/dist-cjs/tokenized-input/internal/InputPill.js +13 -9
- package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +6 -0
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js.map +1 -0
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +244 -0
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -0
- package/dist-cjs/tokenized-input-next/internal/InputPill.css.js +6 -0
- package/dist-cjs/tokenized-input-next/internal/InputPill.css.js.map +1 -0
- package/dist-cjs/tokenized-input-next/internal/InputPill.js +83 -0
- package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -0
- package/dist-cjs/tokenized-input-next/internal/calcFirstHiddenIndex.js +22 -0
- package/dist-cjs/tokenized-input-next/internal/calcFirstHiddenIndex.js.map +1 -0
- package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js +37 -0
- package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js.map +1 -0
- package/dist-cjs/tokenized-input-next/internal/useWidth.js +48 -0
- package/dist-cjs/tokenized-input-next/internal/useWidth.js.map +1 -0
- package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js +479 -0
- package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js.map +1 -0
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-cjs/tree/Tree.js +1 -2
- package/dist-cjs/tree/Tree.js.map +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.js +306 -169
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-es/combo-box-next/useComboBoxNext.js +51 -0
- package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -0
- package/dist-es/dropdown/DropdownBase.js +1 -1
- package/dist-es/dropdown/DropdownBase.js.map +1 -1
- package/dist-es/dropdown-next/DropdownNext.css.js +1 -1
- package/dist-es/dropdown-next/DropdownNext.js +332 -168
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-es/editable-label/EditableLabel.js +1 -1
- package/dist-es/editable-label/EditableLabel.js.map +1 -1
- package/dist-es/index.js +4 -12
- package/dist-es/index.js.map +1 -1
- package/dist-es/layer-layout/LayerLayout.js +1 -3
- package/dist-es/layer-layout/LayerLayout.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +31 -0
- package/dist-es/list-control/ListControlContext.js.map +1 -0
- package/dist-es/list-control/ListControlState.js +189 -0
- package/dist-es/list-control/ListControlState.js.map +1 -0
- package/dist-es/option/Option.css.js +4 -0
- package/dist-es/option/Option.css.js.map +1 -0
- package/dist-es/option/Option.js +109 -0
- package/dist-es/option/Option.js.map +1 -0
- package/dist-es/option/OptionGroup.css.js +4 -0
- package/dist-es/option/OptionGroup.css.js.map +1 -0
- package/dist-es/option/OptionGroup.js +40 -0
- package/dist-es/option/OptionGroup.js.map +1 -0
- package/dist-es/option/OptionList.css.js +4 -0
- package/dist-es/option/OptionList.css.js.map +1 -0
- package/dist-es/option/OptionList.js +36 -0
- package/dist-es/option/OptionList.js.map +1 -0
- package/dist-es/tokenized-input/internal/InputPill.js +15 -11
- package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +4 -0
- package/dist-es/tokenized-input-next/TokenizedInputNext.css.js.map +1 -0
- package/dist-es/tokenized-input-next/TokenizedInputNext.js +240 -0
- package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -0
- package/dist-es/tokenized-input-next/internal/InputPill.css.js +4 -0
- package/dist-es/tokenized-input-next/internal/InputPill.css.js.map +1 -0
- package/dist-es/tokenized-input-next/internal/InputPill.js +79 -0
- package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -0
- package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js +18 -0
- package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js.map +1 -0
- package/dist-es/tokenized-input-next/internal/useResizeObserver.js +33 -0
- package/dist-es/tokenized-input-next/internal/useResizeObserver.js.map +1 -0
- package/dist-es/tokenized-input-next/internal/useWidth.js +42 -0
- package/dist-es/tokenized-input-next/internal/useWidth.js.map +1 -0
- package/dist-es/tokenized-input-next/useTokenizedInputNext.js +471 -0
- package/dist-es/tokenized-input-next/useTokenizedInputNext.js.map +1 -0
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-es/tree/Tree.js +1 -2
- package/dist-es/tree/Tree.js.map +1 -1
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -80
- package/dist-types/combo-box-next/useComboBoxNext.d.ts +31 -0
- package/dist-types/dropdown-next/DropdownNext.d.ts +25 -27
- package/dist-types/index.d.ts +2 -5
- package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
- package/dist-types/list-control/ListControlContext.d.ts +20 -0
- package/dist-types/list-control/ListControlState.d.ts +68 -0
- package/dist-types/option/Option.d.ts +20 -0
- package/dist-types/option/OptionGroup.d.ts +12 -0
- package/dist-types/option/OptionList.d.ts +5 -0
- package/dist-types/option/index.d.ts +2 -0
- package/dist-types/tokenized-input/internal/InputPill.d.ts +7 -5
- package/dist-types/tokenized-input-next/TokenizedInputNext.d.ts +51 -0
- package/dist-types/tokenized-input-next/index.d.ts +2 -0
- package/dist-types/tokenized-input-next/internal/InputPill.d.ts +29 -0
- package/dist-types/tokenized-input-next/internal/calcFirstHiddenIndex.d.ts +4 -0
- package/dist-types/tokenized-input-next/internal/useResizeObserver.d.ts +6 -0
- package/dist-types/tokenized-input-next/internal/useWidth.d.ts +7 -0
- package/dist-types/tokenized-input-next/useTokenizedInputNext.d.ts +47 -0
- package/package.json +2 -2
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js +0 -6
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +0 -1
- package/dist-cjs/combo-box-next/useComboBox.js +0 -147
- package/dist-cjs/combo-box-next/useComboBox.js.map +0 -1
- package/dist-cjs/combo-box-next/useComboboxPortal.js +0 -75
- package/dist-cjs/combo-box-next/useComboboxPortal.js.map +0 -1
- package/dist-cjs/combo-box-next/utils.js +0 -36
- package/dist-cjs/combo-box-next/utils.js.map +0 -1
- package/dist-cjs/dropdown-next/useDropdownNext.js +0 -188
- package/dist-cjs/dropdown-next/useDropdownNext.js.map +0 -1
- package/dist-cjs/focus-manager/FocusManager.js +0 -158
- package/dist-cjs/focus-manager/FocusManager.js.map +0 -1
- package/dist-cjs/focus-manager/internal/findAllTabbableElements.js +0 -45
- package/dist-cjs/focus-manager/internal/findAllTabbableElements.js.map +0 -1
- package/dist-cjs/focus-manager/internal/useReturnFocus.js +0 -59
- package/dist-cjs/focus-manager/internal/useReturnFocus.js.map +0 -1
- package/dist-cjs/navigation-item/ConditionalWrapper.js +0 -37
- package/dist-cjs/navigation-item/ConditionalWrapper.js.map +0 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +0 -31
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +0 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +0 -6
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +0 -1
- package/dist-cjs/navigation-item/NavigationItem.js +0 -81
- package/dist-cjs/navigation-item/NavigationItem.js.map +0 -1
- package/dist-cjs/pagination/CompactInput.css.js +0 -6
- package/dist-cjs/pagination/CompactInput.css.js.map +0 -1
- package/dist-cjs/pagination/CompactInput.js +0 -62
- package/dist-cjs/pagination/CompactInput.js.map +0 -1
- package/dist-cjs/pagination/CompactPaginator.css.js +0 -6
- package/dist-cjs/pagination/CompactPaginator.css.js.map +0 -1
- package/dist-cjs/pagination/CompactPaginator.js +0 -76
- package/dist-cjs/pagination/CompactPaginator.js.map +0 -1
- package/dist-cjs/pagination/GoToInput.css.js +0 -6
- package/dist-cjs/pagination/GoToInput.css.js.map +0 -1
- package/dist-cjs/pagination/GoToInput.js +0 -77
- package/dist-cjs/pagination/GoToInput.js.map +0 -1
- package/dist-cjs/pagination/PageButton.css.js +0 -6
- package/dist-cjs/pagination/PageButton.css.js.map +0 -1
- package/dist-cjs/pagination/PageButton.js +0 -44
- package/dist-cjs/pagination/PageButton.js.map +0 -1
- package/dist-cjs/pagination/PageRanges.css.js +0 -6
- package/dist-cjs/pagination/PageRanges.css.js.map +0 -1
- package/dist-cjs/pagination/PageRanges.js +0 -73
- package/dist-cjs/pagination/PageRanges.js.map +0 -1
- package/dist-cjs/pagination/Pagination.css.js +0 -6
- package/dist-cjs/pagination/Pagination.css.js.map +0 -1
- package/dist-cjs/pagination/Pagination.js +0 -78
- package/dist-cjs/pagination/Pagination.js.map +0 -1
- package/dist-cjs/pagination/PaginationContext.js +0 -17
- package/dist-cjs/pagination/PaginationContext.js.map +0 -1
- package/dist-cjs/pagination/Paginator.css.js +0 -6
- package/dist-cjs/pagination/Paginator.css.js.map +0 -1
- package/dist-cjs/pagination/Paginator.js +0 -69
- package/dist-cjs/pagination/Paginator.js.map +0 -1
- package/dist-cjs/pagination/usePagination.js +0 -27
- package/dist-cjs/pagination/usePagination.js.map +0 -1
- package/dist-cjs/pagination/usePaginationContext.js +0 -19
- package/dist-cjs/pagination/usePaginationContext.js.map +0 -1
- package/dist-cjs/pill/ClosablePill.js +0 -61
- package/dist-cjs/pill/ClosablePill.js.map +0 -1
- package/dist-cjs/pill/Pill.css.js +0 -6
- package/dist-cjs/pill/Pill.css.js.map +0 -1
- package/dist-cjs/pill/Pill.js +0 -49
- package/dist-cjs/pill/Pill.js.map +0 -1
- package/dist-cjs/pill/PillBase.js +0 -133
- package/dist-cjs/pill/PillBase.js.map +0 -1
- package/dist-cjs/pill/SelectablePill.js +0 -55
- package/dist-cjs/pill/SelectablePill.js.map +0 -1
- package/dist-cjs/pill/constants.js +0 -8
- package/dist-cjs/pill/constants.js.map +0 -1
- package/dist-cjs/pill/internal/DeleteButton.js +0 -37
- package/dist-cjs/pill/internal/DeleteButton.js.map +0 -1
- package/dist-cjs/pill/internal/DivButton.js +0 -68
- package/dist-cjs/pill/internal/DivButton.js.map +0 -1
- package/dist-cjs/pill/internal/PillCheckbox.css.js +0 -6
- package/dist-cjs/pill/internal/PillCheckbox.css.js.map +0 -1
- package/dist-cjs/pill/internal/PillCheckbox.js +0 -27
- package/dist-cjs/pill/internal/PillCheckbox.js.map +0 -1
- package/dist-cjs/pill-next/PillNext.css.js +0 -6
- package/dist-cjs/pill-next/PillNext.css.js.map +0 -1
- package/dist-cjs/pill-next/PillNext.js +0 -60
- package/dist-cjs/pill-next/PillNext.js.map +0 -1
- package/dist-cjs/scrim/Scrim.css.js +0 -6
- package/dist-cjs/scrim/Scrim.css.js.map +0 -1
- package/dist-cjs/scrim/Scrim.js +0 -170
- package/dist-cjs/scrim/Scrim.js.map +0 -1
- package/dist-cjs/scrim/ScrimContext.js +0 -13
- package/dist-cjs/scrim/ScrimContext.js.map +0 -1
- package/dist-cjs/scrim/internal/PreventFocus.js +0 -39
- package/dist-cjs/scrim/internal/PreventFocus.js.map +0 -1
- package/dist-es/combo-box-next/ComboBoxNext.css.js +0 -4
- package/dist-es/combo-box-next/ComboBoxNext.css.js.map +0 -1
- package/dist-es/combo-box-next/useComboBox.js +0 -143
- package/dist-es/combo-box-next/useComboBox.js.map +0 -1
- package/dist-es/combo-box-next/useComboboxPortal.js +0 -71
- package/dist-es/combo-box-next/useComboboxPortal.js.map +0 -1
- package/dist-es/combo-box-next/utils.js +0 -31
- package/dist-es/combo-box-next/utils.js.map +0 -1
- package/dist-es/dropdown-next/useDropdownNext.js +0 -184
- package/dist-es/dropdown-next/useDropdownNext.js.map +0 -1
- package/dist-es/focus-manager/FocusManager.js +0 -154
- package/dist-es/focus-manager/FocusManager.js.map +0 -1
- package/dist-es/focus-manager/internal/findAllTabbableElements.js +0 -41
- package/dist-es/focus-manager/internal/findAllTabbableElements.js.map +0 -1
- package/dist-es/focus-manager/internal/useReturnFocus.js +0 -55
- package/dist-es/focus-manager/internal/useReturnFocus.js.map +0 -1
- package/dist-es/navigation-item/ConditionalWrapper.js +0 -33
- package/dist-es/navigation-item/ConditionalWrapper.js.map +0 -1
- package/dist-es/navigation-item/ExpansionIcon.js +0 -27
- package/dist-es/navigation-item/ExpansionIcon.js.map +0 -1
- package/dist-es/navigation-item/NavigationItem.css.js +0 -4
- package/dist-es/navigation-item/NavigationItem.css.js.map +0 -1
- package/dist-es/navigation-item/NavigationItem.js +0 -77
- package/dist-es/navigation-item/NavigationItem.js.map +0 -1
- package/dist-es/pagination/CompactInput.css.js +0 -4
- package/dist-es/pagination/CompactInput.css.js.map +0 -1
- package/dist-es/pagination/CompactInput.js +0 -58
- package/dist-es/pagination/CompactInput.js.map +0 -1
- package/dist-es/pagination/CompactPaginator.css.js +0 -4
- package/dist-es/pagination/CompactPaginator.css.js.map +0 -1
- package/dist-es/pagination/CompactPaginator.js +0 -72
- package/dist-es/pagination/CompactPaginator.js.map +0 -1
- package/dist-es/pagination/GoToInput.css.js +0 -4
- package/dist-es/pagination/GoToInput.css.js.map +0 -1
- package/dist-es/pagination/GoToInput.js +0 -73
- package/dist-es/pagination/GoToInput.js.map +0 -1
- package/dist-es/pagination/PageButton.css.js +0 -4
- package/dist-es/pagination/PageButton.css.js.map +0 -1
- package/dist-es/pagination/PageButton.js +0 -40
- package/dist-es/pagination/PageButton.js.map +0 -1
- package/dist-es/pagination/PageRanges.css.js +0 -4
- package/dist-es/pagination/PageRanges.css.js.map +0 -1
- package/dist-es/pagination/PageRanges.js +0 -69
- package/dist-es/pagination/PageRanges.js.map +0 -1
- package/dist-es/pagination/Pagination.css.js +0 -4
- package/dist-es/pagination/Pagination.css.js.map +0 -1
- package/dist-es/pagination/Pagination.js +0 -74
- package/dist-es/pagination/Pagination.js.map +0 -1
- package/dist-es/pagination/PaginationContext.js +0 -13
- package/dist-es/pagination/PaginationContext.js.map +0 -1
- package/dist-es/pagination/Paginator.css.js +0 -4
- package/dist-es/pagination/Paginator.css.js.map +0 -1
- package/dist-es/pagination/Paginator.js +0 -65
- package/dist-es/pagination/Paginator.js.map +0 -1
- package/dist-es/pagination/usePagination.js +0 -23
- package/dist-es/pagination/usePagination.js.map +0 -1
- package/dist-es/pagination/usePaginationContext.js +0 -15
- package/dist-es/pagination/usePaginationContext.js.map +0 -1
- package/dist-es/pill/ClosablePill.js +0 -57
- package/dist-es/pill/ClosablePill.js.map +0 -1
- package/dist-es/pill/Pill.css.js +0 -4
- package/dist-es/pill/Pill.css.js.map +0 -1
- package/dist-es/pill/Pill.js +0 -45
- package/dist-es/pill/Pill.js.map +0 -1
- package/dist-es/pill/PillBase.js +0 -129
- package/dist-es/pill/PillBase.js.map +0 -1
- package/dist-es/pill/SelectablePill.js +0 -51
- package/dist-es/pill/SelectablePill.js.map +0 -1
- package/dist-es/pill/constants.js +0 -4
- package/dist-es/pill/constants.js.map +0 -1
- package/dist-es/pill/internal/DeleteButton.js +0 -33
- package/dist-es/pill/internal/DeleteButton.js.map +0 -1
- package/dist-es/pill/internal/DivButton.js +0 -64
- package/dist-es/pill/internal/DivButton.js.map +0 -1
- package/dist-es/pill/internal/PillCheckbox.css.js +0 -4
- package/dist-es/pill/internal/PillCheckbox.css.js.map +0 -1
- package/dist-es/pill/internal/PillCheckbox.js +0 -23
- package/dist-es/pill/internal/PillCheckbox.js.map +0 -1
- package/dist-es/pill-next/PillNext.css.js +0 -4
- package/dist-es/pill-next/PillNext.css.js.map +0 -1
- package/dist-es/pill-next/PillNext.js +0 -52
- package/dist-es/pill-next/PillNext.js.map +0 -1
- package/dist-es/scrim/Scrim.css.js +0 -4
- package/dist-es/scrim/Scrim.css.js.map +0 -1
- package/dist-es/scrim/Scrim.js +0 -162
- package/dist-es/scrim/Scrim.js.map +0 -1
- package/dist-es/scrim/ScrimContext.js +0 -9
- package/dist-es/scrim/ScrimContext.js.map +0 -1
- package/dist-es/scrim/internal/PreventFocus.js +0 -35
- package/dist-es/scrim/internal/PreventFocus.js.map +0 -1
- package/dist-types/combo-box-next/useComboBox.d.ts +0 -44
- package/dist-types/combo-box-next/useComboboxPortal.d.ts +0 -22
- package/dist-types/combo-box-next/utils.d.ts +0 -7
- package/dist-types/dropdown-next/useDropdownNext.d.ts +0 -50
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +0 -8
- package/dist-types/navigation-item/ExpansionIcon.d.ts +0 -2
- package/dist-types/navigation-item/NavigationItem.d.ts +0 -36
- package/dist-types/navigation-item/index.d.ts +0 -1
- package/dist-types/pagination/CompactInput.d.ts +0 -2
- package/dist-types/pagination/CompactPaginator.d.ts +0 -1
- package/dist-types/pagination/GoToInput.d.ts +0 -16
- package/dist-types/pagination/PageButton.d.ts +0 -6
- package/dist-types/pagination/PageRanges.d.ts +0 -5
- package/dist-types/pagination/Pagination.d.ts +0 -20
- package/dist-types/pagination/PaginationContext.d.ts +0 -7
- package/dist-types/pagination/Paginator.d.ts +0 -12
- package/dist-types/pagination/index.d.ts +0 -5
- package/dist-types/pagination/usePagination.d.ts +0 -2
- package/dist-types/pagination/usePaginationContext.d.ts +0 -1
- package/dist-types/pill/ClosablePill.d.ts +0 -8
- package/dist-types/pill/Pill.d.ts +0 -15
- package/dist-types/pill/PillBase.d.ts +0 -52
- package/dist-types/pill/SelectablePill.d.ts +0 -17
- package/dist-types/pill/constants.d.ts +0 -1
- package/dist-types/pill/index.d.ts +0 -3
- package/dist-types/pill/internal/DeleteButton.d.ts +0 -8
- package/dist-types/pill/internal/DivButton.d.ts +0 -12
- package/dist-types/pill/internal/PillCheckbox.d.ts +0 -3
- package/dist-types/pill-next/PillNext.d.ts +0 -4
- package/dist-types/pill-next/index.d.ts +0 -1
- package/dist-types/scrim/Scrim.d.ts +0 -68
- package/dist-types/scrim/ScrimContext.d.ts +0 -1
- package/dist-types/scrim/index.d.ts +0 -2
- package/dist-types/scrim/internal/PreventFocus.d.ts +0 -1
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
2
|
+
import { useRef, useEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
function useResizeObserver(onSizeChange) {
|
|
5
|
+
const ref = useRef(null);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (!ref.current) {
|
|
8
|
+
return void 0;
|
|
9
|
+
}
|
|
10
|
+
const observer = new ResizeObserver(onSizeChange);
|
|
11
|
+
observer.observe(ref.current);
|
|
12
|
+
return () => {
|
|
13
|
+
observer.disconnect();
|
|
14
|
+
};
|
|
15
|
+
}, [onSizeChange]);
|
|
16
|
+
useIsomorphicLayoutEffect(() => {
|
|
17
|
+
if (ref.current) {
|
|
18
|
+
onSizeChange([
|
|
19
|
+
{
|
|
20
|
+
target: ref.current,
|
|
21
|
+
contentRect: ref.current.getBoundingClientRect(),
|
|
22
|
+
borderBoxSize: [],
|
|
23
|
+
contentBoxSize: [],
|
|
24
|
+
devicePixelContentBoxSize: []
|
|
25
|
+
}
|
|
26
|
+
]);
|
|
27
|
+
}
|
|
28
|
+
}, [onSizeChange]);
|
|
29
|
+
return ref;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { useResizeObserver };
|
|
33
|
+
//# sourceMappingURL=useResizeObserver.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useResizeObserver.js","sources":["../src/tokenized-input-next/internal/useResizeObserver.ts"],"sourcesContent":["// TODO: Use resize observer from Tabstrip / Toolbar\n\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useRef, useEffect, Ref } from \"react\";\n\n/**\n * This monitors the size of a component and calls `onSizeChange` callback\n * every time when size changes.\n */\nexport function useResizeObserver<Element extends HTMLElement>(\n onSizeChange: (\n entries: ResizeObserverEntry[],\n observer?: ResizeObserver\n ) => void\n): Ref<Element> {\n const ref = useRef<Element>(null);\n\n useEffect(() => {\n if (!ref.current) {\n return undefined;\n }\n\n const observer = new ResizeObserver(onSizeChange);\n observer.observe(ref.current);\n\n return () => {\n observer.disconnect();\n };\n }, [onSizeChange]);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n onSizeChange([\n {\n target: ref.current,\n contentRect: ref.current.getBoundingClientRect(),\n borderBoxSize: [],\n contentBoxSize: [],\n devicePixelContentBoxSize: [],\n },\n ]);\n }\n }, [onSizeChange]);\n\n return ref;\n}\n"],"names":[],"mappings":";;;AASO,SAAS,kBACd,YAIc,EAAA;AACd,EAAM,MAAA,GAAA,GAAM,OAAgB,IAAI,CAAA,CAAA;AAEhC,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,YAAY,CAAA,CAAA;AAChD,IAAS,QAAA,CAAA,OAAA,CAAQ,IAAI,OAAO,CAAA,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,KACtB,CAAA;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAa,YAAA,CAAA;AAAA,QACX;AAAA,UACE,QAAQ,GAAI,CAAA,OAAA;AAAA,UACZ,WAAA,EAAa,GAAI,CAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,UAC/C,eAAe,EAAC;AAAA,UAChB,gBAAgB,EAAC;AAAA,UACjB,2BAA2B,EAAC;AAAA,SAC9B;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAO,OAAA,GAAA,CAAA;AACT;;;;"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
3
|
+
|
|
4
|
+
const safeParseFloat = (target) => parseFloat(target != null ? target : "0");
|
|
5
|
+
const getPadding = (node) => {
|
|
6
|
+
if (node == null) {
|
|
7
|
+
return 0;
|
|
8
|
+
}
|
|
9
|
+
const style = window.getComputedStyle(node);
|
|
10
|
+
const padding = safeParseFloat(style.paddingLeft) + safeParseFloat(style.paddingRight);
|
|
11
|
+
return padding;
|
|
12
|
+
};
|
|
13
|
+
const getWidth = (node) => {
|
|
14
|
+
if (node == null) {
|
|
15
|
+
return 0;
|
|
16
|
+
}
|
|
17
|
+
const style = window.getComputedStyle(node);
|
|
18
|
+
const margin = safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);
|
|
19
|
+
let dimension;
|
|
20
|
+
if (style.display === "none") {
|
|
21
|
+
const nodeDisplay = node.style.display;
|
|
22
|
+
node.style.display = "inline-block";
|
|
23
|
+
dimension = node.getBoundingClientRect();
|
|
24
|
+
node.style.display = nodeDisplay;
|
|
25
|
+
} else {
|
|
26
|
+
dimension = node.getBoundingClientRect();
|
|
27
|
+
}
|
|
28
|
+
return dimension.width + margin;
|
|
29
|
+
};
|
|
30
|
+
const useWidth = (density) => {
|
|
31
|
+
const [node, setNode] = useState(null);
|
|
32
|
+
const [width, setWidth] = useState(0);
|
|
33
|
+
useIsomorphicLayoutEffect(() => {
|
|
34
|
+
if (node !== null) {
|
|
35
|
+
setWidth(getWidth(node));
|
|
36
|
+
}
|
|
37
|
+
}, [node, density]);
|
|
38
|
+
return [setNode, width];
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { getPadding, getWidth, useWidth };
|
|
42
|
+
//# sourceMappingURL=useWidth.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWidth.js","sources":["../src/tokenized-input-next/internal/useWidth.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Density, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nconst safeParseFloat = (target?: string) => parseFloat(target ?? \"0\");\n\nexport const getPadding = (node: HTMLElement | null) => {\n if (node == null) {\n return 0;\n }\n const style = window.getComputedStyle(node);\n const padding =\n safeParseFloat(style.paddingLeft) + safeParseFloat(style.paddingRight);\n return padding;\n};\n\nexport const getWidth = (node: HTMLElement | null) => {\n if (node == null) {\n return 0;\n }\n\n const style = window.getComputedStyle(node);\n const margin =\n safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);\n\n let dimension;\n\n if (style.display === \"none\") {\n const nodeDisplay = node.style.display;\n\n node.style.display = \"inline-block\";\n dimension = node.getBoundingClientRect();\n node.style.display = nodeDisplay;\n } else {\n dimension = node.getBoundingClientRect();\n }\n\n return dimension.width + margin;\n};\n\n/**\n * This records the width of a component when it's rendered\n */\nexport const useWidth = (\n density: Density\n): [(newNode: any) => void, number] => {\n const [node, setNode] = useState<HTMLElement | null>(null);\n const [width, setWidth] = useState<number>(0);\n\n useIsomorphicLayoutEffect(() => {\n if (node !== null) {\n setWidth(getWidth(node));\n }\n }, [node, density]);\n\n return [setNode, width];\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAiB,GAAA,CAAC,MAAoB,KAAA,UAAA,CAAW,0BAAU,GAAG,CAAA,CAAA;AAEvD,MAAA,UAAA,GAAa,CAAC,IAA6B,KAAA;AACtD,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACA,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAC1C,EAAA,MAAM,UACJ,cAAe,CAAA,KAAA,CAAM,WAAW,CAAI,GAAA,cAAA,CAAe,MAAM,YAAY,CAAA,CAAA;AACvE,EAAO,OAAA,OAAA,CAAA;AACT,EAAA;AAEa,MAAA,QAAA,GAAW,CAAC,IAA6B,KAAA;AACpD,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAC1C,EAAA,MAAM,SACJ,cAAe,CAAA,KAAA,CAAM,UAAU,CAAI,GAAA,cAAA,CAAe,MAAM,WAAW,CAAA,CAAA;AAErE,EAAI,IAAA,SAAA,CAAA;AAEJ,EAAI,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC5B,IAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,OAAA,CAAA;AAE/B,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,cAAA,CAAA;AACrB,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA,CAAA;AACvC,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,WAAA,CAAA;AAAA,GAChB,MAAA;AACL,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA,CAAA;AAAA,GACzC;AAEA,EAAA,OAAO,UAAU,KAAQ,GAAA,MAAA,CAAA;AAC3B,EAAA;AAKa,MAAA,QAAA,GAAW,CACtB,OACqC,KAAA;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,IAAI,CAAA,CAAA;AACzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAiB,CAAC,CAAA,CAAA;AAE5C,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,SAAS,IAAM,EAAA;AACjB,MAAS,QAAA,CAAA,QAAA,CAAS,IAAI,CAAC,CAAA,CAAA;AAAA,KACzB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,OAAO,CAAC,CAAA,CAAA;AAElB,EAAO,OAAA,CAAC,SAAS,KAAK,CAAA,CAAA;AACxB;;;;"}
|
|
@@ -0,0 +1,471 @@
|
|
|
1
|
+
import { useFormFieldProps, useDensity, useId, useForkRef, useControlled, useIsomorphicLayoutEffect, ownerWindow } from '@salt-ds/core';
|
|
2
|
+
import copy from 'clipboard-copy';
|
|
3
|
+
import { useState, useRef, useMemo, useCallback } from 'react';
|
|
4
|
+
import { escapeRegExp } from '../utils/escapeRegExp.js';
|
|
5
|
+
import { useWidth, getPadding } from './internal/useWidth.js';
|
|
6
|
+
import { useResizeObserver } from './internal/useResizeObserver.js';
|
|
7
|
+
import { calcFirstHiddenIndex } from './internal/calcFirstHiddenIndex.js';
|
|
8
|
+
|
|
9
|
+
const getCursorPosition = (inputRef) => {
|
|
10
|
+
if (inputRef.current) {
|
|
11
|
+
const { selectionStart, selectionEnd } = inputRef.current;
|
|
12
|
+
if (selectionStart != null && selectionStart === selectionEnd) {
|
|
13
|
+
return selectionStart;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
return -1;
|
|
17
|
+
};
|
|
18
|
+
const isCtrlModifier = (event) => {
|
|
19
|
+
return event.ctrlKey || event.metaKey || ["CONTROL", "META"].indexOf(event.key.toUpperCase()) !== -1;
|
|
20
|
+
};
|
|
21
|
+
function isValidItem(data) {
|
|
22
|
+
return typeof data === "string" && Boolean(data.length) || typeof data !== "string" && data != null;
|
|
23
|
+
}
|
|
24
|
+
function useTokenizedInputNext(props) {
|
|
25
|
+
const {
|
|
26
|
+
disabled: formFieldDisabled,
|
|
27
|
+
readOnly,
|
|
28
|
+
necessity,
|
|
29
|
+
validationStatus,
|
|
30
|
+
a11yProps: {
|
|
31
|
+
"aria-describedby": ariaDescribedBy,
|
|
32
|
+
"aria-labelledby": ariaLabelledBy
|
|
33
|
+
} = {}
|
|
34
|
+
} = useFormFieldProps();
|
|
35
|
+
const {
|
|
36
|
+
delimiters = [","],
|
|
37
|
+
defaultSelected = [],
|
|
38
|
+
disabled = formFieldDisabled,
|
|
39
|
+
readOnly: readOnlyProp,
|
|
40
|
+
validationStatus: validationStatusProp,
|
|
41
|
+
disableAddOnBlur,
|
|
42
|
+
onBlur,
|
|
43
|
+
onClick,
|
|
44
|
+
onExpand,
|
|
45
|
+
onCollapse,
|
|
46
|
+
onKeyDown,
|
|
47
|
+
onInputChange,
|
|
48
|
+
onInputFocus,
|
|
49
|
+
onInputBlur,
|
|
50
|
+
onClear,
|
|
51
|
+
onChange,
|
|
52
|
+
id: idProp,
|
|
53
|
+
value: valueProp,
|
|
54
|
+
expanded: expandedProp,
|
|
55
|
+
selectedItems: selectedItemsProp,
|
|
56
|
+
"aria-label": ariaLabel,
|
|
57
|
+
"aria-describedby": ariaDescribedByProp,
|
|
58
|
+
expandButtonRef: expandButtonRefProp,
|
|
59
|
+
...restProps
|
|
60
|
+
} = props;
|
|
61
|
+
const density = useDensity();
|
|
62
|
+
const id = useId(idProp);
|
|
63
|
+
const [focused, setFocused] = useState(false);
|
|
64
|
+
const [pillGroupWidth, setPillGroupWidth] = useState(null);
|
|
65
|
+
const [firstHiddenIndex, setFirstHiddenIndex] = useState(null);
|
|
66
|
+
const [activeIndices, setActiveIndices] = useState([]);
|
|
67
|
+
const [highlightedIndex, setHighlightedIndex] = useState(
|
|
68
|
+
void 0
|
|
69
|
+
);
|
|
70
|
+
const [expandButtonHookRef, expandButtonWidth] = useWidth(density);
|
|
71
|
+
const [clearButtonRef, clearButtonWidth] = useWidth(density);
|
|
72
|
+
const [statusAdornmentRef, statusAdornmentWidth] = useWidth(density);
|
|
73
|
+
const [inputRef, inputWidth] = useWidth(density);
|
|
74
|
+
const containerRef = useRef(null);
|
|
75
|
+
const pillsRef = useRef({});
|
|
76
|
+
const textAreaRef = useRef(null);
|
|
77
|
+
const preventBlurOnCopy = useRef(false);
|
|
78
|
+
const expandButtonRef = useForkRef(expandButtonHookRef, expandButtonRefProp);
|
|
79
|
+
const hasActiveItems = Boolean(activeIndices.length);
|
|
80
|
+
const primaryDelimiter = delimiters[0];
|
|
81
|
+
const delimiterRegex = useMemo(
|
|
82
|
+
() => new RegExp(delimiters.map(escapeRegExp).join("|"), "gi"),
|
|
83
|
+
[delimiters]
|
|
84
|
+
);
|
|
85
|
+
const [value, setValue, isInputControlled] = useControlled({
|
|
86
|
+
controlled: valueProp,
|
|
87
|
+
default: "",
|
|
88
|
+
name: "TokenizedInputNext",
|
|
89
|
+
state: "value"
|
|
90
|
+
});
|
|
91
|
+
const [selectedItems = [], setSelectedItems, isSelectionControlled] = useControlled({
|
|
92
|
+
controlled: selectedItemsProp,
|
|
93
|
+
default: defaultSelected,
|
|
94
|
+
name: "TokenizedInputNext",
|
|
95
|
+
state: "selectedItems"
|
|
96
|
+
});
|
|
97
|
+
const [expanded, setExpanded, isExpandedControlled] = useControlled({
|
|
98
|
+
controlled: expandedProp,
|
|
99
|
+
default: false,
|
|
100
|
+
name: "TokenizedInputNext",
|
|
101
|
+
state: "expanded"
|
|
102
|
+
});
|
|
103
|
+
const widthOffset = inputWidth + statusAdornmentWidth + (expanded ? clearButtonWidth : expandButtonWidth);
|
|
104
|
+
const containerObserverRef = useResizeObserver(
|
|
105
|
+
useCallback(
|
|
106
|
+
([{ contentRect }]) => {
|
|
107
|
+
const padding = getPadding(containerRef.current);
|
|
108
|
+
setPillGroupWidth(contentRect.width - padding - widthOffset);
|
|
109
|
+
},
|
|
110
|
+
[widthOffset]
|
|
111
|
+
)
|
|
112
|
+
);
|
|
113
|
+
useIsomorphicLayoutEffect(
|
|
114
|
+
() => () => {
|
|
115
|
+
setFirstHiddenIndex(null);
|
|
116
|
+
},
|
|
117
|
+
[density]
|
|
118
|
+
);
|
|
119
|
+
useIsomorphicLayoutEffect(
|
|
120
|
+
() => {
|
|
121
|
+
if (expanded) {
|
|
122
|
+
setFirstHiddenIndex(null);
|
|
123
|
+
} else if (pillGroupWidth != null) {
|
|
124
|
+
setFirstHiddenIndex(
|
|
125
|
+
calcFirstHiddenIndex({
|
|
126
|
+
containerWidth: pillGroupWidth,
|
|
127
|
+
pillWidths: Object.values(pillsRef.current).filter(
|
|
128
|
+
Boolean
|
|
129
|
+
)
|
|
130
|
+
})
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
[expanded, pillGroupWidth, selectedItems]
|
|
135
|
+
);
|
|
136
|
+
const focusInput = useCallback(() => {
|
|
137
|
+
if (textAreaRef.current) {
|
|
138
|
+
textAreaRef.current.focus();
|
|
139
|
+
}
|
|
140
|
+
}, []);
|
|
141
|
+
const updateInputValue = (newValue) => {
|
|
142
|
+
if (!isInputControlled) {
|
|
143
|
+
setValue(newValue);
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
const updateSelectedItems = useCallback(
|
|
147
|
+
(event, action) => {
|
|
148
|
+
if (!isSelectionControlled) {
|
|
149
|
+
setSelectedItems((prevSelectedItems) => {
|
|
150
|
+
const newItems = typeof action === "function" ? action(prevSelectedItems) : action;
|
|
151
|
+
if (newItems !== prevSelectedItems) {
|
|
152
|
+
onChange == null ? void 0 : onChange(event, newItems);
|
|
153
|
+
}
|
|
154
|
+
return newItems;
|
|
155
|
+
});
|
|
156
|
+
} else {
|
|
157
|
+
onChange == null ? void 0 : onChange(
|
|
158
|
+
event,
|
|
159
|
+
typeof action === "function" ? action(selectedItems) : action
|
|
160
|
+
);
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
[isSelectionControlled, setSelectedItems, onChange, selectedItems]
|
|
164
|
+
);
|
|
165
|
+
const updateExpanded = (event, newExpanded) => {
|
|
166
|
+
if (!isExpandedControlled) {
|
|
167
|
+
setExpanded(newExpanded);
|
|
168
|
+
}
|
|
169
|
+
if (newExpanded) {
|
|
170
|
+
focusInput();
|
|
171
|
+
onExpand == null ? void 0 : onExpand(event);
|
|
172
|
+
} else {
|
|
173
|
+
onCollapse == null ? void 0 : onCollapse(event);
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
const resetInput = () => {
|
|
177
|
+
updateInputValue("");
|
|
178
|
+
setHighlightedIndex(void 0);
|
|
179
|
+
setActiveIndices([]);
|
|
180
|
+
};
|
|
181
|
+
const removeItems = useCallback(
|
|
182
|
+
(event, itemIndices) => {
|
|
183
|
+
updateSelectedItems(
|
|
184
|
+
event,
|
|
185
|
+
(prevSelectedItems) => prevSelectedItems && (prevSelectedItems.length === 0 ? prevSelectedItems : prevSelectedItems.filter(
|
|
186
|
+
(_, index) => itemIndices.indexOf(index) === -1
|
|
187
|
+
))
|
|
188
|
+
);
|
|
189
|
+
},
|
|
190
|
+
[updateSelectedItems]
|
|
191
|
+
);
|
|
192
|
+
const handleInputFocus = (event) => {
|
|
193
|
+
event.stopPropagation();
|
|
194
|
+
if (preventBlurOnCopy.current) {
|
|
195
|
+
preventBlurOnCopy.current = false;
|
|
196
|
+
setActiveIndices(
|
|
197
|
+
Array.from(
|
|
198
|
+
{ length: selectedItems ? selectedItems.length : 0 },
|
|
199
|
+
(_, index) => index
|
|
200
|
+
)
|
|
201
|
+
);
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
onInputFocus == null ? void 0 : onInputFocus(event);
|
|
205
|
+
updateExpanded(event, true);
|
|
206
|
+
setFocused(true);
|
|
207
|
+
};
|
|
208
|
+
const handleBlur = (event) => {
|
|
209
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
210
|
+
setFocused(false);
|
|
211
|
+
updateExpanded(event, false);
|
|
212
|
+
};
|
|
213
|
+
const handleInputBlur = (event) => {
|
|
214
|
+
const container = containerRef == null ? void 0 : containerRef.current;
|
|
215
|
+
const eventTarget = event.relatedTarget;
|
|
216
|
+
event.preventDefault();
|
|
217
|
+
event.stopPropagation();
|
|
218
|
+
setHighlightedIndex(void 0);
|
|
219
|
+
setActiveIndices([]);
|
|
220
|
+
if (!disableAddOnBlur) {
|
|
221
|
+
handleAddItems(event, value);
|
|
222
|
+
}
|
|
223
|
+
onInputBlur == null ? void 0 : onInputBlur(event);
|
|
224
|
+
if (eventTarget !== container && !(container == null ? void 0 : container.contains(eventTarget))) {
|
|
225
|
+
handleBlur(event);
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
const handleClick = (event) => {
|
|
229
|
+
updateExpanded(event, true);
|
|
230
|
+
setActiveIndices([]);
|
|
231
|
+
onClick == null ? void 0 : onClick(event);
|
|
232
|
+
};
|
|
233
|
+
const handleInputChange = (event) => {
|
|
234
|
+
setHighlightedIndex(void 0);
|
|
235
|
+
onInputChange == null ? void 0 : onInputChange(event);
|
|
236
|
+
const newValue = event.target.value;
|
|
237
|
+
if (delimiterRegex.test(newValue)) {
|
|
238
|
+
handleAddItems(event, newValue);
|
|
239
|
+
} else {
|
|
240
|
+
updateInputValue(newValue);
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
const handleAddItems = (event, newValue, appendOnly) => {
|
|
244
|
+
if (!newValue || newValue.length === 0) {
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
resetInput();
|
|
248
|
+
const newItems = newValue.split(delimiterRegex).reduce((values, item) => {
|
|
249
|
+
const newItem = item.trim();
|
|
250
|
+
return isValidItem(newItem) ? values.concat(newItem) : values;
|
|
251
|
+
}, []);
|
|
252
|
+
if (newItems.length) {
|
|
253
|
+
updateSelectedItems(
|
|
254
|
+
event,
|
|
255
|
+
(prevSelectedItems = []) => hasActiveItems && !appendOnly ? newItems : prevSelectedItems.concat(newItems)
|
|
256
|
+
);
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
const handleRemoveItem = useCallback(
|
|
260
|
+
(event, itemIndex) => {
|
|
261
|
+
focusInput();
|
|
262
|
+
if (itemIndex != void 0 && !readOnly && !readOnlyProp) {
|
|
263
|
+
removeItems(event, [itemIndex]);
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
[focusInput, removeItems]
|
|
267
|
+
);
|
|
268
|
+
const handleClear = (event) => {
|
|
269
|
+
updateSelectedItems(event, []);
|
|
270
|
+
resetInput();
|
|
271
|
+
focusInput();
|
|
272
|
+
onClear == null ? void 0 : onClear(event);
|
|
273
|
+
};
|
|
274
|
+
const cursorAtInputStart = () => getCursorPosition(textAreaRef) === 0 && Boolean(selectedItems.length);
|
|
275
|
+
const highlightAtPillGroupEnd = () => highlightedIndex === selectedItems.length - 1;
|
|
276
|
+
const pillGroupKeyDownHandlers = {
|
|
277
|
+
ArrowLeft: (event) => {
|
|
278
|
+
event.preventDefault();
|
|
279
|
+
setHighlightedIndex(
|
|
280
|
+
(prevHighlightedIndex) => prevHighlightedIndex == null ? selectedItems.length - 1 : Math.max(0, prevHighlightedIndex - 1)
|
|
281
|
+
);
|
|
282
|
+
},
|
|
283
|
+
ArrowRight: (event) => {
|
|
284
|
+
if (highlightAtPillGroupEnd()) {
|
|
285
|
+
return setHighlightedIndex(void 0);
|
|
286
|
+
}
|
|
287
|
+
event.preventDefault();
|
|
288
|
+
setHighlightedIndex(
|
|
289
|
+
(prevHighlightedIndex) => prevHighlightedIndex == null ? prevHighlightedIndex : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1)
|
|
290
|
+
);
|
|
291
|
+
},
|
|
292
|
+
Backspace: (event) => {
|
|
293
|
+
event.preventDefault();
|
|
294
|
+
handleRemoveItem(event, highlightedIndex);
|
|
295
|
+
setHighlightedIndex(
|
|
296
|
+
(prevHighlightedIndex) => prevHighlightedIndex == null ? prevHighlightedIndex : Math.max(0, prevHighlightedIndex - 1)
|
|
297
|
+
);
|
|
298
|
+
},
|
|
299
|
+
Home: (event) => {
|
|
300
|
+
event.preventDefault();
|
|
301
|
+
setHighlightedIndex(0);
|
|
302
|
+
},
|
|
303
|
+
End: (event) => {
|
|
304
|
+
event.preventDefault();
|
|
305
|
+
setHighlightedIndex(selectedItems.length - 1);
|
|
306
|
+
},
|
|
307
|
+
Enter: (event) => {
|
|
308
|
+
event.preventDefault();
|
|
309
|
+
handleRemoveItem(event, highlightedIndex);
|
|
310
|
+
},
|
|
311
|
+
Delete: (event) => {
|
|
312
|
+
event.preventDefault();
|
|
313
|
+
handleRemoveItem(event, highlightedIndex);
|
|
314
|
+
},
|
|
315
|
+
" ": (event) => {
|
|
316
|
+
event.preventDefault();
|
|
317
|
+
handleRemoveItem(event, highlightedIndex);
|
|
318
|
+
}
|
|
319
|
+
};
|
|
320
|
+
const inputKeyDownHandlers = {
|
|
321
|
+
ArrowLeft: (event) => {
|
|
322
|
+
if (cursorAtInputStart()) {
|
|
323
|
+
event.preventDefault();
|
|
324
|
+
setHighlightedIndex(selectedItems.length - 1);
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
Backspace: (event) => {
|
|
328
|
+
if (hasActiveItems) {
|
|
329
|
+
removeItems(event, activeIndices);
|
|
330
|
+
} else if (cursorAtInputStart()) {
|
|
331
|
+
setHighlightedIndex(selectedItems.length - 1);
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
Delete: (event) => {
|
|
335
|
+
if (hasActiveItems) {
|
|
336
|
+
removeItems(event, activeIndices);
|
|
337
|
+
}
|
|
338
|
+
},
|
|
339
|
+
Enter: (event) => {
|
|
340
|
+
event.preventDefault();
|
|
341
|
+
if (hasActiveItems) {
|
|
342
|
+
removeItems(event, activeIndices);
|
|
343
|
+
} else {
|
|
344
|
+
handleAddItems(event, value);
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
};
|
|
348
|
+
const handleCtrlModifierKeyDown = (event) => {
|
|
349
|
+
var _a;
|
|
350
|
+
const win = ownerWindow(event.target);
|
|
351
|
+
const supportClipboard = (_a = win.navigator) == null ? void 0 : _a.clipboard;
|
|
352
|
+
switch (event.key.toUpperCase()) {
|
|
353
|
+
case "A":
|
|
354
|
+
setHighlightedIndex(void 0);
|
|
355
|
+
setActiveIndices(
|
|
356
|
+
Array.from({ length: selectedItems.length }, (_, index) => index)
|
|
357
|
+
);
|
|
358
|
+
break;
|
|
359
|
+
case "C":
|
|
360
|
+
const textToCopy = activeIndices.length > 0 ? activeIndices.map((index) => String(selectedItems[index])).concat(value != null ? String(value).trim() : "").filter(Boolean).join(primaryDelimiter) : highlightedIndex !== void 0 ? String(selectedItems[highlightedIndex] + ",") : "";
|
|
361
|
+
copy(textToCopy).then((result) => {
|
|
362
|
+
preventBlurOnCopy.current = !supportClipboard;
|
|
363
|
+
return result;
|
|
364
|
+
}).catch((error) => {
|
|
365
|
+
console.error(error);
|
|
366
|
+
});
|
|
367
|
+
break;
|
|
368
|
+
case "V":
|
|
369
|
+
break;
|
|
370
|
+
case "ARROWLEFT":
|
|
371
|
+
pillGroupKeyDownHandlers.ArrowLeft(event);
|
|
372
|
+
break;
|
|
373
|
+
case "ARROWRIGHT":
|
|
374
|
+
pillGroupKeyDownHandlers.ArrowRight(event);
|
|
375
|
+
break;
|
|
376
|
+
case "BACKSPACE":
|
|
377
|
+
if (cursorAtInputStart()) {
|
|
378
|
+
handleRemoveItem(event, selectedItems.length - 1);
|
|
379
|
+
}
|
|
380
|
+
break;
|
|
381
|
+
case "CONTROL":
|
|
382
|
+
case "META":
|
|
383
|
+
break;
|
|
384
|
+
default:
|
|
385
|
+
setActiveIndices([]);
|
|
386
|
+
}
|
|
387
|
+
};
|
|
388
|
+
const handleCommonKeyDown = (event) => {
|
|
389
|
+
const eventKey = event.key.toUpperCase();
|
|
390
|
+
if (eventKey === "ESCAPE") {
|
|
391
|
+
event.preventDefault();
|
|
392
|
+
resetInput();
|
|
393
|
+
} else if (eventKey === "TAB" && !disableAddOnBlur) {
|
|
394
|
+
handleAddItems(event, value);
|
|
395
|
+
}
|
|
396
|
+
};
|
|
397
|
+
const handleKeyDown = (event) => {
|
|
398
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
399
|
+
if (event.defaultPrevented) {
|
|
400
|
+
return;
|
|
401
|
+
}
|
|
402
|
+
if (isCtrlModifier(event)) {
|
|
403
|
+
handleCtrlModifierKeyDown(event);
|
|
404
|
+
} else {
|
|
405
|
+
let handler;
|
|
406
|
+
if (highlightedIndex == null) {
|
|
407
|
+
handler = inputKeyDownHandlers[event.key];
|
|
408
|
+
setActiveIndices([]);
|
|
409
|
+
} else {
|
|
410
|
+
handler = pillGroupKeyDownHandlers[event.key];
|
|
411
|
+
}
|
|
412
|
+
if (handler != null) {
|
|
413
|
+
handler(event);
|
|
414
|
+
} else {
|
|
415
|
+
handleCommonKeyDown(event);
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
};
|
|
419
|
+
const state = {
|
|
420
|
+
value,
|
|
421
|
+
selectedItems,
|
|
422
|
+
activeIndices,
|
|
423
|
+
highlightedIndex,
|
|
424
|
+
expanded
|
|
425
|
+
};
|
|
426
|
+
const eventHandlers = {
|
|
427
|
+
onBlur: expanded ? handleBlur : onBlur,
|
|
428
|
+
onClick: handleClick,
|
|
429
|
+
onInputChange: handleInputChange,
|
|
430
|
+
onInputFocus: handleInputFocus,
|
|
431
|
+
onInputBlur: handleInputBlur,
|
|
432
|
+
onKeyDown: handleKeyDown,
|
|
433
|
+
onRemoveItem: handleRemoveItem,
|
|
434
|
+
onClear: handleClear
|
|
435
|
+
};
|
|
436
|
+
return {
|
|
437
|
+
state,
|
|
438
|
+
firstHiddenIndex,
|
|
439
|
+
refs: {
|
|
440
|
+
textAreaRef: useForkRef(textAreaRef, inputRef),
|
|
441
|
+
pillsRef,
|
|
442
|
+
clearButtonRef,
|
|
443
|
+
expandButtonRef,
|
|
444
|
+
statusAdornmentRef,
|
|
445
|
+
containerRef: useForkRef(containerRef, containerObserverRef)
|
|
446
|
+
},
|
|
447
|
+
helpers: {
|
|
448
|
+
setValue,
|
|
449
|
+
setSelectedItems,
|
|
450
|
+
setHighlightedIndex,
|
|
451
|
+
updateExpanded
|
|
452
|
+
},
|
|
453
|
+
inputProps: {
|
|
454
|
+
id,
|
|
455
|
+
disabled,
|
|
456
|
+
validationStatus: validationStatus != null ? validationStatus : validationStatusProp,
|
|
457
|
+
readOnly: readOnly != null ? readOnly : readOnlyProp,
|
|
458
|
+
necessity,
|
|
459
|
+
focused,
|
|
460
|
+
"aria-labelledby": ariaLabelledBy,
|
|
461
|
+
"aria-label": ariaLabel,
|
|
462
|
+
"aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : ariaDescribedByProp,
|
|
463
|
+
...state,
|
|
464
|
+
...restProps,
|
|
465
|
+
...disabled ? {} : eventHandlers
|
|
466
|
+
}
|
|
467
|
+
};
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
export { useTokenizedInputNext };
|
|
471
|
+
//# sourceMappingURL=useTokenizedInputNext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTokenizedInputNext.js","sources":["../src/tokenized-input-next/useTokenizedInputNext.tsx"],"sourcesContent":["import {\n ownerWindow,\n useControlled,\n useDensity,\n useForkRef,\n useFormFieldProps,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport copy from \"clipboard-copy\";\nimport {\n ChangeEvent,\n FocusEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n Ref,\n SetStateAction,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n MutableRefObject,\n} from \"react\";\nimport { escapeRegExp } from \"../utils\";\nimport { TokenizedInputNextProps } from \"./TokenizedInputNext\";\nimport { getPadding, useWidth } from \"./internal/useWidth\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\n\nexport interface TokenizedInputNextState<Item> {\n activeIndices: number[];\n expanded: boolean | undefined;\n highlightedIndex: number | undefined;\n selectedItems: Item[];\n value: string | undefined;\n}\n\nexport interface TokenizedInputNextHelpers<Item> {\n setHighlightedIndex: (value?: number) => void;\n setValue: (value: string) => void;\n setSelectedItems: (selectedItems: Item[]) => void;\n updateExpanded: (event: SyntheticEvent, expanded: boolean) => void;\n}\n\nexport interface TokenizedInputNextRefs {\n textAreaRef: Ref<HTMLTextAreaElement>;\n pillsRef: MutableRefObject<Record<number, number | undefined>>;\n clearButtonRef: (newNode: HTMLButtonElement) => void;\n expandButtonRef: Ref<HTMLButtonElement>;\n statusAdornmentRef: Ref<SVGSVGElement>;\n containerRef: Ref<HTMLDivElement>;\n}\n\nconst getCursorPosition = (\n inputRef: MutableRefObject<HTMLTextAreaElement | null>\n) => {\n if (inputRef.current) {\n const { selectionStart, selectionEnd } = inputRef.current;\n\n // if there is no selection range\n if (selectionStart != null && selectionStart === selectionEnd) {\n return selectionStart;\n }\n }\n\n return -1;\n};\n\nconst isCtrlModifier = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n return (\n event.ctrlKey ||\n event.metaKey ||\n [\"CONTROL\", \"META\"].indexOf(event.key.toUpperCase()) !== -1\n );\n};\n\nfunction isValidItem<Item>(data: unknown): data is Item {\n return (\n (typeof data === \"string\" && Boolean(data.length)) ||\n (typeof data !== \"string\" && data != null)\n );\n}\n\ninterface useTokenizedInputNextResult<Item> {\n /**\n * The tokenized input state\n */\n state: TokenizedInputNextState<Item>;\n /**\n * First hidden element when collapsed\n */\n firstHiddenIndex: number | null;\n /**\n * Utility functions for modifying tokenized input state\n */\n helpers: TokenizedInputNextHelpers<Item>;\n /**\n * Refs for tokenized input items.\n */\n refs: TokenizedInputNextRefs;\n /**\n * Properties applied to a basic tokenized input component\n */\n inputProps: Omit<TokenizedInputNextProps<Item>, \"helpers\" | \"onChange\">;\n}\n\nexport function useTokenizedInputNext<Item>(\n props: TokenizedInputNextProps<Item>\n): useTokenizedInputNextResult<Item> {\n const {\n disabled: formFieldDisabled,\n readOnly,\n necessity,\n validationStatus,\n a11yProps: {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n } = {},\n } = useFormFieldProps();\n\n const {\n delimiters = [\",\"],\n defaultSelected = [],\n disabled = formFieldDisabled,\n readOnly: readOnlyProp,\n validationStatus: validationStatusProp,\n disableAddOnBlur,\n onBlur,\n onClick,\n onExpand,\n onCollapse,\n onKeyDown,\n onInputChange,\n onInputFocus,\n onInputBlur,\n onClear,\n onChange,\n id: idProp,\n value: valueProp,\n expanded: expandedProp,\n selectedItems: selectedItemsProp,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedByProp,\n expandButtonRef: expandButtonRefProp,\n ...restProps\n } = props;\n\n const density = useDensity();\n const id = useId(idProp);\n\n const [focused, setFocused] = useState(false);\n const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n const [activeIndices, setActiveIndices] = useState<number[]>([]);\n const [highlightedIndex, setHighlightedIndex] = useState<number | undefined>(\n undefined\n );\n\n const [expandButtonHookRef, expandButtonWidth] = useWidth(density);\n const [clearButtonRef, clearButtonWidth] = useWidth(density);\n const [statusAdornmentRef, statusAdornmentWidth] = useWidth(density);\n const [inputRef, inputWidth] = useWidth(density);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const pillsRef = useRef<Record<number, number | undefined>>({});\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const preventBlurOnCopy = useRef(false);\n const expandButtonRef = useForkRef(expandButtonHookRef, expandButtonRefProp);\n\n const hasActiveItems = Boolean(activeIndices.length);\n const primaryDelimiter = delimiters[0];\n const delimiterRegex = useMemo(\n () => new RegExp(delimiters.map(escapeRegExp).join(\"|\"), \"gi\"),\n [delimiters]\n );\n\n const [value, setValue, isInputControlled] = useControlled<\n string | undefined\n >({\n controlled: valueProp,\n default: \"\",\n name: \"TokenizedInputNext\",\n state: \"value\",\n });\n\n const [selectedItems = [], setSelectedItems, isSelectionControlled] =\n useControlled<Item[] | undefined>({\n controlled: selectedItemsProp,\n default: defaultSelected,\n name: \"TokenizedInputNext\",\n state: \"selectedItems\",\n });\n\n const [expanded, setExpanded, isExpandedControlled] = useControlled<boolean>({\n controlled: expandedProp,\n default: false,\n name: \"TokenizedInputNext\",\n state: \"expanded\",\n });\n\n const widthOffset =\n inputWidth +\n statusAdornmentWidth +\n (expanded ? clearButtonWidth : expandButtonWidth);\n\n const containerObserverRef = useResizeObserver<HTMLDivElement>(\n useCallback(\n ([{ contentRect }]) => {\n const padding = getPadding(containerRef.current);\n setPillGroupWidth(contentRect.width - padding - widthOffset);\n },\n [widthOffset]\n )\n );\n\n useIsomorphicLayoutEffect(\n () => () => {\n // When density changes, set hidden index to null so that pills are in their\n // readonly state before they are measured.\n setFirstHiddenIndex(null);\n },\n [density]\n );\n\n // useIsomorphicLayoutEffect because of potential layout change\n // We want to do that before paint to avoid layout jumps\n useIsomorphicLayoutEffect(\n () => {\n if (expanded) {\n setFirstHiddenIndex(null);\n } else if (pillGroupWidth != null) {\n setFirstHiddenIndex(\n calcFirstHiddenIndex({\n containerWidth: pillGroupWidth,\n pillWidths: Object.values(pillsRef.current).filter(\n Boolean\n ) as number[],\n })\n );\n }\n },\n // Additional dependency on selectedItems is for the controlled version\n [expanded, pillGroupWidth, selectedItems]\n );\n\n const focusInput = useCallback(() => {\n if (textAreaRef.current) {\n textAreaRef.current.focus();\n }\n }, []);\n\n const updateInputValue = (newValue: string | undefined) => {\n if (!isInputControlled) {\n setValue(newValue);\n }\n };\n\n const updateSelectedItems = useCallback(\n (event: SyntheticEvent, action: SetStateAction<Item[] | undefined>) => {\n if (!isSelectionControlled) {\n setSelectedItems((prevSelectedItems?: Item[]) => {\n const newItems =\n typeof action === \"function\" ? action(prevSelectedItems) : action;\n\n if (newItems !== prevSelectedItems) {\n onChange?.(event, newItems);\n }\n return newItems;\n });\n } else {\n onChange?.(\n event,\n typeof action === \"function\" ? action(selectedItems) : action\n );\n }\n },\n [isSelectionControlled, setSelectedItems, onChange, selectedItems]\n );\n\n const updateExpanded = (event: SyntheticEvent, newExpanded: boolean) => {\n if (!isExpandedControlled) {\n setExpanded(newExpanded);\n }\n\n if (newExpanded) {\n focusInput();\n onExpand?.(event);\n } else {\n onCollapse?.(event);\n }\n };\n\n const resetInput = () => {\n updateInputValue(\"\");\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n };\n\n const removeItems = useCallback(\n (event: SyntheticEvent, itemIndices: number[]) => {\n updateSelectedItems(\n event,\n (prevSelectedItems) =>\n prevSelectedItems &&\n (prevSelectedItems.length === 0\n ? prevSelectedItems\n : prevSelectedItems.filter(\n (_, index) => itemIndices.indexOf(index) === -1\n ))\n );\n },\n [updateSelectedItems]\n );\n\n const handleInputFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n event.stopPropagation();\n\n // The input will lose focus when building the text to copy in a temporary\n // DOM node. This is particularly visible in a slower browser, i.e. IE 11.\n // This is to prevent a blur in that scenario.\n if (preventBlurOnCopy.current) {\n preventBlurOnCopy.current = false;\n setActiveIndices(\n Array.from(\n { length: selectedItems ? selectedItems.length : 0 },\n (_, index) => index\n )\n );\n return;\n }\n\n onInputFocus?.(event);\n updateExpanded(event, true);\n setFocused(true);\n };\n\n const handleBlur = (\n event: FocusEvent<HTMLTextAreaElement | HTMLButtonElement>\n ) => {\n onBlur?.(event);\n setFocused(false);\n updateExpanded(event, false);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n // Check if the related target inside TokenizedInput\n const container = containerRef?.current;\n const eventTarget = event.relatedTarget;\n event.preventDefault();\n event.stopPropagation();\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n if (!disableAddOnBlur) {\n handleAddItems(event, value);\n }\n onInputBlur?.(event);\n if (\n eventTarget !== container &&\n !container?.contains(eventTarget as Node)\n ) {\n handleBlur(event);\n }\n };\n\n const handleClick = (event: SyntheticEvent<HTMLElement>) => {\n updateExpanded(event, true);\n setActiveIndices([]);\n onClick?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n setHighlightedIndex(undefined);\n\n onInputChange?.(event);\n\n const newValue = event.target.value;\n\n if (delimiterRegex.test(newValue)) {\n // Process value with delimiters\n handleAddItems(event, newValue);\n } else {\n // Just update input value if there is no delimiter\n updateInputValue(newValue);\n }\n };\n\n const handleAddItems = (\n event: SyntheticEvent,\n newValue: string | undefined,\n appendOnly?: boolean\n ) => {\n if (!newValue || newValue.length === 0) {\n return;\n }\n\n resetInput();\n\n const newItems = newValue\n .split(delimiterRegex)\n .reduce<Item[]>((values, item) => {\n const newItem = item.trim();\n return isValidItem<Item>(newItem) ? values.concat(newItem) : values;\n }, []);\n\n if (newItems.length) {\n updateSelectedItems(event, (prevSelectedItems = []) =>\n hasActiveItems && !appendOnly\n ? newItems\n : prevSelectedItems.concat(newItems)\n );\n }\n };\n\n const handleRemoveItem = useCallback(\n (event: SyntheticEvent, itemIndex?: number) => {\n focusInput();\n if (itemIndex != undefined && !readOnly && !readOnlyProp) {\n removeItems(event, [itemIndex]);\n }\n },\n [focusInput, removeItems]\n );\n\n const handleClear = (event: ChangeEvent<HTMLTextAreaElement>) => {\n updateSelectedItems(event, []);\n resetInput();\n focusInput();\n onClear?.(event);\n };\n\n const cursorAtInputStart = () =>\n getCursorPosition(textAreaRef) === 0 && Boolean(selectedItems.length);\n\n const highlightAtPillGroupEnd = () =>\n highlightedIndex === selectedItems.length - 1;\n\n const pillGroupKeyDownHandlers: Record<\n string,\n KeyboardEventHandler<HTMLTextAreaElement>\n > = {\n ArrowLeft: (event) => {\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? selectedItems.length - 1\n : Math.max(0, prevHighlightedIndex - 1)\n );\n },\n ArrowRight: (event) => {\n if (highlightAtPillGroupEnd()) {\n return setHighlightedIndex(undefined);\n }\n\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1)\n );\n },\n Backspace: (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.max(0, prevHighlightedIndex - 1)\n );\n },\n Home: (event) => {\n event.preventDefault();\n setHighlightedIndex(0);\n },\n End: (event) => {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n },\n Enter: (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n },\n Delete: (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n },\n \" \": (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n },\n };\n\n const inputKeyDownHandlers: Record<\n string,\n KeyboardEventHandler<HTMLTextAreaElement>\n > = {\n ArrowLeft: (event) => {\n if (cursorAtInputStart()) {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Backspace: (event) => {\n if (hasActiveItems) {\n removeItems(event, activeIndices);\n } else if (cursorAtInputStart()) {\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Delete: (event) => {\n if (hasActiveItems) {\n removeItems(event, activeIndices);\n }\n },\n Enter: (event) => {\n event.preventDefault();\n\n if (hasActiveItems) {\n removeItems(event, activeIndices);\n } else {\n handleAddItems(event, value);\n }\n },\n };\n\n const handleCtrlModifierKeyDown: InputHTMLAttributes<HTMLTextAreaElement>[\"onKeyDown\"] =\n (event) => {\n const win = ownerWindow(event.target as HTMLElement);\n const supportClipboard = win.navigator?.clipboard;\n\n switch (event.key.toUpperCase()) {\n case \"A\":\n // Select all\n setHighlightedIndex(undefined);\n setActiveIndices(\n Array.from({ length: selectedItems.length }, (_, index) => index)\n );\n break;\n case \"C\":\n // Copy\n const textToCopy =\n activeIndices.length > 0\n ? activeIndices\n .map((index) => String(selectedItems[index]))\n .concat(value != null ? String(value).trim() : \"\")\n .filter(Boolean)\n .join(primaryDelimiter)\n : highlightedIndex !== undefined\n ? String(selectedItems[highlightedIndex] + \",\")\n : \"\";\n copy(textToCopy)\n .then((result) => {\n preventBlurOnCopy.current = !supportClipboard;\n return result;\n })\n .catch((error) => {\n console.error(error);\n });\n break;\n case \"V\":\n // Paste - do nothing and let handleChange deal with it\n break;\n case \"ARROWLEFT\":\n pillGroupKeyDownHandlers.ArrowLeft(event);\n break;\n case \"ARROWRIGHT\":\n pillGroupKeyDownHandlers.ArrowRight(event);\n break;\n case \"BACKSPACE\":\n if (cursorAtInputStart()) {\n handleRemoveItem(event, selectedItems.length - 1);\n }\n break;\n case \"CONTROL\":\n case \"META\":\n // Do nothing\n break;\n default:\n // Otherwise, reset active items\n setActiveIndices([]);\n }\n };\n\n const handleCommonKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n const eventKey = event.key.toUpperCase();\n if (eventKey === \"ESCAPE\") {\n event.preventDefault();\n resetInput();\n } else if (eventKey === \"TAB\" && !disableAddOnBlur) {\n // Pressing Tab adds a new value\n handleAddItems(event, value);\n }\n };\n\n const handleKeyDown: InputHTMLAttributes<HTMLTextAreaElement>[\"onKeyDown\"] = (\n event\n ) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) {\n return;\n }\n if (isCtrlModifier(event)) {\n handleCtrlModifierKeyDown(event);\n } else {\n let handler;\n if (highlightedIndex == null) {\n handler = inputKeyDownHandlers[event.key];\n setActiveIndices([]);\n } else {\n handler = pillGroupKeyDownHandlers[event.key];\n }\n\n if (handler != null) {\n handler(event);\n } else {\n handleCommonKeyDown(event);\n }\n }\n };\n\n const state: TokenizedInputNextState<Item> = {\n value,\n selectedItems,\n activeIndices,\n highlightedIndex,\n expanded,\n };\n\n const eventHandlers = {\n // onFocus is a focus on the expand button\n // It can also be triggered by a focus on the input\n // onBlur is a blur from the expand button when it's collapsed\n // It can also be triggered by the clear button\n onBlur: expanded ? handleBlur : onBlur,\n onClick: handleClick,\n onInputChange: handleInputChange,\n onInputFocus: handleInputFocus,\n onInputBlur: handleInputBlur,\n onKeyDown: handleKeyDown,\n onRemoveItem: handleRemoveItem,\n onClear: handleClear,\n };\n\n return {\n state,\n firstHiddenIndex,\n refs: {\n textAreaRef: useForkRef(textAreaRef, inputRef),\n pillsRef,\n clearButtonRef,\n expandButtonRef,\n statusAdornmentRef,\n containerRef: useForkRef(containerRef, containerObserverRef),\n },\n helpers: {\n setValue,\n setSelectedItems,\n setHighlightedIndex,\n updateExpanded,\n },\n inputProps: {\n id,\n disabled,\n validationStatus: validationStatus ?? validationStatusProp,\n readOnly: readOnly ?? readOnlyProp,\n necessity: necessity,\n focused,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy ?? ariaDescribedByProp,\n ...state,\n ...restProps,\n ...(disabled ? {} : eventHandlers),\n },\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -43,7 +43,7 @@ const OverflowPanel = forwardRef(function DropdownPanel({
|
|
|
43
43
|
const triggerRef = useRef(null);
|
|
44
44
|
const [isOpen, setIsOpen] = useControlled({
|
|
45
45
|
controlled: isOpenProp,
|
|
46
|
-
default: defaultIsOpen
|
|
46
|
+
default: defaultIsOpen || false,
|
|
47
47
|
name: "DropdownPanel"
|
|
48
48
|
});
|
|
49
49
|
const { highlightedIndex: highlightedIdx, ...keyboardHook } = useKeyboardNavigationPanel({
|