@salt-ds/lab 1.0.0-alpha.25 → 1.0.0-alpha.27
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 +452 -522
- 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 -170
- 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 +12 -10
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/layer-layout/LayerLayout.js +0 -1
- 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/navigation-item/ConditionalWrapper.js +2 -4
- package/dist-cjs/navigation-item/ConditionalWrapper.js.map +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +2 -4
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +4 -7
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- 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/pagination/CompactInput.css.js +6 -0
- package/dist-cjs/pagination/CompactInput.css.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +31 -35
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.css.js +6 -0
- package/dist-cjs/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.js +76 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.css.js +6 -0
- package/dist-cjs/pagination/GoToInput.css.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.js +37 -59
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.css.js +6 -0
- package/dist-cjs/pagination/PageButton.css.js.map +1 -0
- package/dist-cjs/pagination/PageButton.js +34 -33
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.css.js +6 -0
- package/dist-cjs/pagination/PageRanges.css.js.map +1 -0
- package/dist-cjs/pagination/PageRanges.js +73 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -0
- package/dist-cjs/pagination/Pagination.css.js +1 -1
- package/dist-cjs/pagination/Pagination.js +21 -38
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/PaginationContext.js +1 -6
- package/dist-cjs/pagination/PaginationContext.js.map +1 -1
- package/dist-cjs/pagination/Paginator.css.js +6 -0
- package/dist-cjs/pagination/Paginator.css.js.map +1 -0
- package/dist-cjs/pagination/Paginator.js +33 -43
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/pagination/usePaginationContext.js +1 -1
- package/dist-cjs/pagination/usePaginationContext.js.map +1 -1
- package/dist-cjs/scrim/Scrim.css.js +1 -1
- package/dist-cjs/scrim/Scrim.js +10 -140
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- 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 -169
- 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 +6 -5
- package/dist-es/index.js.map +1 -1
- package/dist-es/layer-layout/LayerLayout.js +0 -1
- 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/navigation-item/ConditionalWrapper.js +2 -4
- package/dist-es/navigation-item/ConditionalWrapper.js.map +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js +2 -4
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.css.js +1 -1
- package/dist-es/navigation-item/NavigationItem.js +4 -7
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- 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/pagination/CompactInput.css.js +4 -0
- package/dist-es/pagination/CompactInput.css.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +32 -36
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.css.js +4 -0
- package/dist-es/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.js +72 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -0
- package/dist-es/pagination/GoToInput.css.js +4 -0
- package/dist-es/pagination/GoToInput.css.js.map +1 -0
- package/dist-es/pagination/GoToInput.js +40 -62
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.css.js +4 -0
- package/dist-es/pagination/PageButton.css.js.map +1 -0
- package/dist-es/pagination/PageButton.js +34 -33
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.css.js +4 -0
- package/dist-es/pagination/PageRanges.css.js.map +1 -0
- package/dist-es/pagination/PageRanges.js +69 -0
- package/dist-es/pagination/PageRanges.js.map +1 -0
- package/dist-es/pagination/Pagination.css.js +1 -1
- package/dist-es/pagination/Pagination.js +20 -37
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/PaginationContext.js +1 -6
- package/dist-es/pagination/PaginationContext.js.map +1 -1
- package/dist-es/pagination/Paginator.css.js +4 -0
- package/dist-es/pagination/Paginator.css.js.map +1 -0
- package/dist-es/pagination/Paginator.js +32 -42
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/pagination/usePaginationContext.js +1 -1
- package/dist-es/pagination/usePaginationContext.js.map +1 -1
- package/dist-es/scrim/Scrim.css.js +1 -1
- package/dist-es/scrim/Scrim.js +12 -138
- package/dist-es/scrim/Scrim.js.map +1 -1
- 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/dialog/useDialog.d.ts +6 -7
- package/dist-types/drawer/useDrawer.d.ts +6 -7
- package/dist-types/dropdown-next/DropdownNext.d.ts +25 -27
- package/dist-types/index.d.ts +2 -2
- package/dist-types/list-control/ListControlContext.d.ts +20 -0
- package/dist-types/list-control/ListControlState.d.ts +68 -0
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +1 -1
- package/dist-types/navigation-item/ExpansionIcon.d.ts +1 -1
- 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/pagination/CompactInput.d.ts +2 -8
- package/dist-types/pagination/CompactPaginator.d.ts +1 -0
- package/dist-types/pagination/GoToInput.d.ts +13 -4
- package/dist-types/pagination/PageButton.d.ts +2 -3
- package/dist-types/pagination/PageRanges.d.ts +5 -0
- package/dist-types/pagination/Pagination.d.ts +15 -4
- package/dist-types/pagination/PaginationContext.d.ts +2 -4
- package/dist-types/pagination/Paginator.d.ts +6 -3
- package/dist-types/pagination/index.d.ts +2 -0
- package/dist-types/scrim/Scrim.d.ts +6 -61
- package/dist-types/scrim/index.d.ts +0 -1
- package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
- 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 +3 -3
- 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/pagination/ArrowButton.js +0 -64
- package/dist-cjs/pagination/ArrowButton.js.map +0 -1
- package/dist-cjs/pagination/CompactControls.js +0 -38
- package/dist-cjs/pagination/CompactControls.js.map +0 -1
- package/dist-cjs/pagination/RegularControls.js +0 -58
- package/dist-cjs/pagination/RegularControls.js.map +0 -1
- package/dist-cjs/pagination/utils.js +0 -10
- package/dist-cjs/pagination/utils.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 -65
- package/dist-cjs/pill-next/PillNext.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/pagination/ArrowButton.js +0 -60
- package/dist-es/pagination/ArrowButton.js.map +0 -1
- package/dist-es/pagination/CompactControls.js +0 -34
- package/dist-es/pagination/CompactControls.js.map +0 -1
- package/dist-es/pagination/RegularControls.js +0 -54
- package/dist-es/pagination/RegularControls.js.map +0 -1
- package/dist-es/pagination/utils.js +0 -6
- package/dist-es/pagination/utils.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 -57
- package/dist-es/pill-next/PillNext.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 -42
- package/dist-types/pagination/ArrowButton.d.ts +0 -7
- package/dist-types/pagination/CompactControls.d.ts +0 -8
- package/dist-types/pagination/RegularControls.d.ts +0 -8
- package/dist-types/pagination/utils.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 -7
- package/dist-types/pill-next/index.d.ts +0 -1
- package/dist-types/scrim/ScrimContext.d.ts +0 -1
|
@@ -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({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n ForwardedRef,\n forwardRef,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { ToolbarField, ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n useCollectionItems,\n useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../../dropdown\";\n\nimport overflowPanelCss from \"./OverflowPanel.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n /**\n * Trigger button icon\n */\n triggerButtonIcon?: JSX.Element;\n /**\n * Trigger button text\n */\n triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n {\n children,\n className,\n defaultIsOpen,\n isOpen: isOpenProp,\n onOpenChange,\n triggerButtonIcon,\n triggerButtonLabel,\n ...props\n }: DropdownPanelProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overflow-panel\",\n css: overflowPanelCss,\n window: targetWindow,\n });\n\n const id = useId();\n const collectionHook = useCollectionItems<ReactElement>({\n id,\n children,\n });\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen
|
|
1
|
+
{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n ForwardedRef,\n forwardRef,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { ToolbarField, ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n useCollectionItems,\n useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../../dropdown\";\n\nimport overflowPanelCss from \"./OverflowPanel.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n /**\n * Trigger button icon\n */\n triggerButtonIcon?: JSX.Element;\n /**\n * Trigger button text\n */\n triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n {\n children,\n className,\n defaultIsOpen,\n isOpen: isOpenProp,\n onOpenChange,\n triggerButtonIcon,\n triggerButtonLabel,\n ...props\n }: DropdownPanelProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overflow-panel\",\n css: overflowPanelCss,\n window: targetWindow,\n });\n\n const id = useId();\n const collectionHook = useCollectionItems<ReactElement>({\n id,\n children,\n });\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen || false,\n name: \"DropdownPanel\",\n });\n\n const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n useKeyboardNavigationPanel({\n cycleFocus: true,\n defaultHighlightedIndex: 0,\n focusOnHighlight: true,\n indexPositions: collectionHook.data,\n });\n\n const focusTrigger = useCallback(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, []);\n\n const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n const handleItemClick = (evt: MouseEvent) => {\n // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n setIsOpen(false);\n focusTrigger();\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange?.(open);\n };\n\n const getTriggerButtonIcon = () =>\n triggerButtonIcon ?? triggerButtonLabel === undefined ? (\n <OverflowMenuIcon />\n ) : undefined;\n\n return (\n <DropdownBase\n {...props}\n className={clsx(withBaseName(), className)}\n isOpen={isOpen}\n onOpenChange={handleOpenChange}\n placement=\"bottom-end\"\n ref={forwardedRef}\n >\n <Button variant=\"secondary\" ref={triggerRef}>\n {getTriggerButtonIcon()}\n {triggerButtonLabel}\n </Button>\n <div\n className={withBaseName(\"content\")}\n ref={setPanelRef}\n tabIndex={-1}\n {...keyboardHook.listProps}\n >\n {collectionHook.data.map((item) => {\n const { type } = item.value as ReactElement;\n if (type === OverflowSeparator) {\n return item.value;\n } else {\n const formFieldProps = {\n id: item.id,\n inOverflowPanel: true,\n key: item.id,\n onClick: handleItemClick,\n } as ToolbarFieldProps;\n\n if (type === ToolbarField) {\n return React.cloneElement(\n item.value as ReactElement,\n formFieldProps\n );\n } else {\n return (\n <ToolbarField {...formFieldProps}>{item.value}</ToolbarField>\n );\n }\n }\n })}\n </div>\n </DropdownBase>\n );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}
|
package/dist-es/tree/Tree.js
CHANGED
|
@@ -37,7 +37,6 @@ const Tree = forwardRef(function Tree2({
|
|
|
37
37
|
width,
|
|
38
38
|
...htmlAttributes
|
|
39
39
|
}, forwardedRef) {
|
|
40
|
-
var _a;
|
|
41
40
|
const targetWindow = useWindow();
|
|
42
41
|
useComponentCssInjection({
|
|
43
42
|
testId: "salt-tree",
|
|
@@ -52,7 +51,7 @@ const Tree = forwardRef(function Tree2({
|
|
|
52
51
|
source,
|
|
53
52
|
options: {
|
|
54
53
|
noChildrenLabel: "No children available",
|
|
55
|
-
revealSelected: revealSelected ? (
|
|
54
|
+
revealSelected: revealSelected ? Boolean(selectedProp) || Boolean(defaultSelected) || false : void 0
|
|
56
55
|
}
|
|
57
56
|
});
|
|
58
57
|
const preferredHeight = height != null ? height : calcPreferredHeight({
|
package/dist-es/tree/Tree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n ForwardedRef,\n forwardRef,\n isValidElement,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\n\nimport {\n calcPreferredHeight,\n closestListItemIndex,\n CollectionIndexer,\n CollectionItem,\n GROUP_SELECTION_NONE,\n isSelected,\n SelectHandler,\n SelectionChangeHandler,\n SelectionStrategy,\n SingleSelectionStrategy,\n useAutoSizer,\n useCollectionItems,\n} from \"../common-hooks\";\nimport { TreeProps } from \"./treeTypes\";\n\nimport { useTree } from \"./useTree\";\nimport { TreeNode } from \"./TreeNode\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport treeCss from \"./Tree.css\";\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nconst getSelectedItemsFromSource = (\n source: any[],\n selectionStrategy: SelectionStrategy,\n result: any[] = []\n) => {\n const isSingleSelection =\n selectionStrategy === \"default\" || selectionStrategy === \"deselectable\";\n for (let item of source) {\n if (item.selected === true) {\n result.push(item);\n if (isSingleSelection) {\n break;\n }\n }\n if (item.childNodes) {\n getSelectedItemsFromSource(item.childNodes, selectionStrategy, result);\n if (isSingleSelection && result.length === 1) {\n break;\n }\n }\n }\n\n return isSingleSelection ? result[0] : result.length > 0 ? result : undefined;\n};\n\nexport const Tree = forwardRef(function Tree<\n Item,\n Selection extends SelectionStrategy = \"deselectable\"\n>(\n {\n className,\n defaultSelected,\n disabled,\n groupSelection = GROUP_SELECTION_NONE,\n height,\n id: idProp,\n onHighlight,\n onToggle,\n onSelect,\n onSelectionChange,\n revealSelected,\n selected: selectedProp,\n selectionStrategy,\n source,\n style: styleProp,\n width,\n ...htmlAttributes\n }: TreeProps<Item, Selection>,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tree\",\n css: treeCss,\n window: targetWindow,\n });\n\n const id = useIdMemo(idProp);\n const rootRef = useRef(null);\n const contentRef = useRef(null);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n source,\n options: {\n noChildrenLabel: \"No children available\",\n revealSelected: revealSelected\n ? selectedProp ?? defaultSelected ?? false\n : undefined,\n },\n });\n\n //------------- from original List\n const preferredHeight =\n height ??\n calcPreferredHeight({\n displayedItemCount: 10,\n itemCount: collectionHook.data.length,\n itemHeight: 36,\n // getItemHeight,\n // itemGapSize,\n });\n\n const autoSize = useAutoSizer<HTMLDivElement>({\n containerRef: rootRef,\n responsive: width === undefined || height === undefined,\n height: preferredHeight,\n width,\n });\n //---------------\n\n const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n (evt, selectedItem) => {\n if (onSelect) {\n if (isValidElement(selectedItem.value)) {\n onSelect(evt, selectedItem.label as any);\n } else if (selectedItem.value !== null) {\n onSelect(evt, selectedItem.value);\n }\n }\n },\n [onSelect]\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<CollectionItem<Item>, Selection>\n >(\n (evt, selected) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[];\n if (onSelectionChange) {\n onSelectionChange(\n evt,\n Array.isArray(selected)\n ? (selected.map((s) => s.value) as returnType)\n : selected && (selected.value as returnType)\n );\n }\n },\n [onSelectionChange]\n );\n\n // const getSelected = (\n // sel: Item | null | Item[]\n // ):\n // | undefined\n // | (Selection extends SingleSelectionStrategy\n // ? CollectionItem<Item> | null\n // : CollectionItem<Item>[]) => {\n // if (sel !== undefined) {\n // return collectionHook.itemToCollectionItem<Selection, typeof sel>(sel);\n // } else if (Array.isArray(source)) {\n // const selected = getSelectedItemsFromSource(\n // source,\n // selectionStrategy ?? \"default\"\n // );\n // return Array.isArray(selected)\n // ? collectionHook.itemToCollectionItem(selected)\n // : selected\n // ? collectionHook.toCollectionItem(selected)\n // : undefined;\n // }\n // };\n\n const {\n focusVisible,\n highlightedIdx,\n highlightItemAtIndex,\n listHandlers,\n listProps,\n listItemHandlers,\n selected,\n } = useTree<Item, Selection>({\n collectionHook,\n containerRef: rootRef,\n contentRef,\n // Note this isn't enough for a Tree, because of nested structure\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n disabled,\n groupSelection,\n onHighlight,\n onSelect: handleSelect,\n onSelectionChange: handleSelectionChange,\n onToggle,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof selectedProp\n >(selectedProp),\n selectionStrategy,\n });\n\n // TODO move into useTree (see useList)\n const defaultItemHandlers = {\n onMouseEnter: (evt: MouseEvent) => {\n // if (!isScrolling.current) {\n const idx = closestListItemIndex(evt.target as HTMLElement);\n highlightItemAtIndex(idx!);\n // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n // }\n },\n };\n\n const propsCommonToAllListItems = {\n ...defaultItemHandlers,\n ...listItemHandlers,\n isLeaf: true,\n role: \"treeitem\",\n };\n // const allowGroupSelect = groupSelectionEnabled(groupSelection);\n const allowGroupSelect = false;\n\n /**\n * Add a ListItem from source item\n */\n function addLeafNode(\n list: ReactElement[],\n item: CollectionItem<Item>,\n idx: CollectionIndexer\n ) {\n const itemProps = {\n \"aria-disabled\": disabled || item.disabled,\n \"aria-level\": item.level,\n \"data-idx\": idx.value,\n description: item.description,\n id: item.id,\n key: item.id,\n highlighted: idx.value === highlightedIdx || undefined,\n selected: isSelected<Item>(selected, item),\n className: clsx({\n focusVisible: focusVisible === idx.value,\n }),\n };\n\n list.push(\n <TreeNode\n {...propsCommonToAllListItems}\n {...itemProps}\n label={item.label}\n >\n {/* {item.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n </TreeNode>\n );\n idx.value += 1;\n }\n\n function addGroupNode(\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: CollectionIndexer,\n id: string,\n title: string\n ) {\n const { value: i } = idx;\n const item = items[i];\n idx.value += 1;\n list.push(\n <TreeNode\n {...defaultItemHandlers}\n {...listItemHandlers}\n aria-disabled={disabled || item.disabled}\n aria-expanded={item.expanded}\n aria-level={item.level}\n className={clsx({\n focusVisible: focusVisible === i,\n [withBaseName(\"toggle\")]: !allowGroupSelect,\n })}\n // data-icon={child.icon}\n data-idx={i}\n data-selectable\n description={item.description}\n highlighted={i === highlightedIdx}\n id={id}\n key={`header-${i}`}\n label={title}\n selected={isSelected<Item>(selected, item)}\n >\n {item.expanded ? (\n <ul className={withBaseName(\"child-nodes\")} role=\"group\">\n {renderItems(items, idx, item.level! + 1)}\n </ul>\n ) : null}\n </TreeNode>\n );\n }\n\n const renderItems = (\n items: CollectionItem<Item>[],\n idx: CollectionIndexer = { value: 0 },\n level = 1\n ): ReactElement[] => {\n const listItems: ReactElement[] = [];\n while (idx.value < items.length) {\n const item = items[idx.value];\n if (item.level! < level) {\n break;\n }\n if (item.childNodes) {\n addGroupNode(listItems, items, idx, item.id!, item.label!);\n } else {\n addLeafNode(listItems, item, idx);\n }\n }\n\n return listItems;\n };\n\n function renderEmpty() {\n // if (emptyMessage || showEmptyMessage) {\n // return (\n // <span className={withBaseName(\"empty-message\")}>\n // {emptyMessage ?? defaultEmptyMessage}\n // </span>\n // );\n // } else {\n return null;\n // }\n }\n\n const renderContent = () => {\n if (collectionHook.data.length) {\n return renderItems(collectionHook.data);\n } else {\n renderEmpty();\n }\n };\n\n return (\n <div\n {...htmlAttributes}\n {...listHandlers}\n {...listProps}\n className={clsx(withBaseName(), className)}\n id={`Tree-${id}`}\n ref={useForkRef(rootRef, forwardedRef)}\n style={{ ...styleProp, ...autoSize }}\n tabIndex={0}\n >\n <ul\n className={withBaseName(\"scrollingContentContainer\")}\n ref={contentRef}\n role=\"tree\"\n // style={{ height: contentHeight }}\n >\n {renderContent()}\n </ul>\n </div>\n );\n});\n"],"names":["Tree","treeCss","selected","id"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n ForwardedRef,\n forwardRef,\n isValidElement,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\n\nimport {\n calcPreferredHeight,\n closestListItemIndex,\n CollectionIndexer,\n CollectionItem,\n GROUP_SELECTION_NONE,\n isSelected,\n SelectHandler,\n SelectionChangeHandler,\n SelectionStrategy,\n SingleSelectionStrategy,\n useAutoSizer,\n useCollectionItems,\n} from \"../common-hooks\";\nimport { TreeProps } from \"./treeTypes\";\n\nimport { useTree } from \"./useTree\";\nimport { TreeNode } from \"./TreeNode\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport treeCss from \"./Tree.css\";\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nconst getSelectedItemsFromSource = (\n source: any[],\n selectionStrategy: SelectionStrategy,\n result: any[] = []\n) => {\n const isSingleSelection =\n selectionStrategy === \"default\" || selectionStrategy === \"deselectable\";\n for (let item of source) {\n if (item.selected === true) {\n result.push(item);\n if (isSingleSelection) {\n break;\n }\n }\n if (item.childNodes) {\n getSelectedItemsFromSource(item.childNodes, selectionStrategy, result);\n if (isSingleSelection && result.length === 1) {\n break;\n }\n }\n }\n\n return isSingleSelection ? result[0] : result.length > 0 ? result : undefined;\n};\n\nexport const Tree = forwardRef(function Tree<\n Item,\n Selection extends SelectionStrategy = \"deselectable\"\n>(\n {\n className,\n defaultSelected,\n disabled,\n groupSelection = GROUP_SELECTION_NONE,\n height,\n id: idProp,\n onHighlight,\n onToggle,\n onSelect,\n onSelectionChange,\n revealSelected,\n selected: selectedProp,\n selectionStrategy,\n source,\n style: styleProp,\n width,\n ...htmlAttributes\n }: TreeProps<Item, Selection>,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tree\",\n css: treeCss,\n window: targetWindow,\n });\n\n const id = useIdMemo(idProp);\n const rootRef = useRef(null);\n const contentRef = useRef(null);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n source,\n options: {\n noChildrenLabel: \"No children available\",\n revealSelected: revealSelected\n ? Boolean(selectedProp) || Boolean(defaultSelected) || false\n : undefined,\n },\n });\n\n //------------- from original List\n const preferredHeight =\n height ??\n calcPreferredHeight({\n displayedItemCount: 10,\n itemCount: collectionHook.data.length,\n itemHeight: 36,\n // getItemHeight,\n // itemGapSize,\n });\n\n const autoSize = useAutoSizer<HTMLDivElement>({\n containerRef: rootRef,\n responsive: width === undefined || height === undefined,\n height: preferredHeight,\n width,\n });\n //---------------\n\n const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n (evt, selectedItem) => {\n if (onSelect) {\n if (isValidElement(selectedItem.value)) {\n onSelect(evt, selectedItem.label as any);\n } else if (selectedItem.value !== null) {\n onSelect(evt, selectedItem.value);\n }\n }\n },\n [onSelect]\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<CollectionItem<Item>, Selection>\n >(\n (evt, selected) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[];\n if (onSelectionChange) {\n onSelectionChange(\n evt,\n Array.isArray(selected)\n ? (selected.map((s) => s.value) as returnType)\n : selected && (selected.value as returnType)\n );\n }\n },\n [onSelectionChange]\n );\n\n // const getSelected = (\n // sel: Item | null | Item[]\n // ):\n // | undefined\n // | (Selection extends SingleSelectionStrategy\n // ? CollectionItem<Item> | null\n // : CollectionItem<Item>[]) => {\n // if (sel !== undefined) {\n // return collectionHook.itemToCollectionItem<Selection, typeof sel>(sel);\n // } else if (Array.isArray(source)) {\n // const selected = getSelectedItemsFromSource(\n // source,\n // selectionStrategy ?? \"default\"\n // );\n // return Array.isArray(selected)\n // ? collectionHook.itemToCollectionItem(selected)\n // : selected\n // ? collectionHook.toCollectionItem(selected)\n // : undefined;\n // }\n // };\n\n const {\n focusVisible,\n highlightedIdx,\n highlightItemAtIndex,\n listHandlers,\n listProps,\n listItemHandlers,\n selected,\n } = useTree<Item, Selection>({\n collectionHook,\n containerRef: rootRef,\n contentRef,\n // Note this isn't enough for a Tree, because of nested structure\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n disabled,\n groupSelection,\n onHighlight,\n onSelect: handleSelect,\n onSelectionChange: handleSelectionChange,\n onToggle,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof selectedProp\n >(selectedProp),\n selectionStrategy,\n });\n\n // TODO move into useTree (see useList)\n const defaultItemHandlers = {\n onMouseEnter: (evt: MouseEvent) => {\n // if (!isScrolling.current) {\n const idx = closestListItemIndex(evt.target as HTMLElement);\n highlightItemAtIndex(idx!);\n // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n // }\n },\n };\n\n const propsCommonToAllListItems = {\n ...defaultItemHandlers,\n ...listItemHandlers,\n isLeaf: true,\n role: \"treeitem\",\n };\n // const allowGroupSelect = groupSelectionEnabled(groupSelection);\n const allowGroupSelect = false;\n\n /**\n * Add a ListItem from source item\n */\n function addLeafNode(\n list: ReactElement[],\n item: CollectionItem<Item>,\n idx: CollectionIndexer\n ) {\n const itemProps = {\n \"aria-disabled\": disabled || item.disabled,\n \"aria-level\": item.level,\n \"data-idx\": idx.value,\n description: item.description,\n id: item.id,\n key: item.id,\n highlighted: idx.value === highlightedIdx || undefined,\n selected: isSelected<Item>(selected, item),\n className: clsx({\n focusVisible: focusVisible === idx.value,\n }),\n };\n\n list.push(\n <TreeNode\n {...propsCommonToAllListItems}\n {...itemProps}\n label={item.label}\n >\n {/* {item.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n </TreeNode>\n );\n idx.value += 1;\n }\n\n function addGroupNode(\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: CollectionIndexer,\n id: string,\n title: string\n ) {\n const { value: i } = idx;\n const item = items[i];\n idx.value += 1;\n list.push(\n <TreeNode\n {...defaultItemHandlers}\n {...listItemHandlers}\n aria-disabled={disabled || item.disabled}\n aria-expanded={item.expanded}\n aria-level={item.level}\n className={clsx({\n focusVisible: focusVisible === i,\n [withBaseName(\"toggle\")]: !allowGroupSelect,\n })}\n // data-icon={child.icon}\n data-idx={i}\n data-selectable\n description={item.description}\n highlighted={i === highlightedIdx}\n id={id}\n key={`header-${i}`}\n label={title}\n selected={isSelected<Item>(selected, item)}\n >\n {item.expanded ? (\n <ul className={withBaseName(\"child-nodes\")} role=\"group\">\n {renderItems(items, idx, item.level! + 1)}\n </ul>\n ) : null}\n </TreeNode>\n );\n }\n\n const renderItems = (\n items: CollectionItem<Item>[],\n idx: CollectionIndexer = { value: 0 },\n level = 1\n ): ReactElement[] => {\n const listItems: ReactElement[] = [];\n while (idx.value < items.length) {\n const item = items[idx.value];\n if (item.level! < level) {\n break;\n }\n if (item.childNodes) {\n addGroupNode(listItems, items, idx, item.id!, item.label!);\n } else {\n addLeafNode(listItems, item, idx);\n }\n }\n\n return listItems;\n };\n\n function renderEmpty() {\n // if (emptyMessage || showEmptyMessage) {\n // return (\n // <span className={withBaseName(\"empty-message\")}>\n // {emptyMessage ?? defaultEmptyMessage}\n // </span>\n // );\n // } else {\n return null;\n // }\n }\n\n const renderContent = () => {\n if (collectionHook.data.length) {\n return renderItems(collectionHook.data);\n } else {\n renderEmpty();\n }\n };\n\n return (\n <div\n {...htmlAttributes}\n {...listHandlers}\n {...listProps}\n className={clsx(withBaseName(), className)}\n id={`Tree-${id}`}\n ref={useForkRef(rootRef, forwardedRef)}\n style={{ ...styleProp, ...autoSize }}\n tabIndex={0}\n >\n <ul\n className={withBaseName(\"scrollingContentContainer\")}\n ref={contentRef}\n role=\"tree\"\n // style={{ height: contentHeight }}\n >\n {renderContent()}\n </ul>\n </div>\n );\n});\n"],"names":["Tree","treeCss","selected","id"],"mappings":"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"}
|
|
@@ -1,83 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
export interface ComboBoxNextProps<T> extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "onSelect"> {
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { InputProps } from "@salt-ds/core";
|
|
3
|
+
import { ListControlProps } from "../list-control/ListControlState";
|
|
4
|
+
export interface ComboBoxNextProps extends InputProps, Omit<ListControlProps, "value" | "defaultValue"> {
|
|
6
5
|
/**
|
|
7
|
-
*
|
|
6
|
+
* The options to display in the combo box.
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Additional props for the portal.
|
|
12
|
-
*/
|
|
13
|
-
PortalProps?: UseComboBoxPortalProps;
|
|
14
|
-
/**
|
|
15
|
-
* Controlled prop. Controls the Input value in the Combo Box Input.
|
|
16
|
-
*/
|
|
17
|
-
inputValue?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Controlled prop. Controls the Highlighted item in the Combo Box list.
|
|
20
|
-
*/
|
|
21
|
-
highlightedItem?: string;
|
|
22
|
-
/**
|
|
23
|
-
* Controlled prop. Controls the Selected value in the Combo Box list.
|
|
24
|
-
*/
|
|
25
|
-
selected?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Initial input value for when the list is uncontrolled.
|
|
28
|
-
*/
|
|
29
|
-
defaultInputValue?: string;
|
|
30
|
-
/**
|
|
31
|
-
* Initial selected value for when the list is uncontrolled.
|
|
32
|
-
*/
|
|
33
|
-
defaultSelected?: string;
|
|
34
|
-
/**
|
|
35
|
-
* If `true`, the component will be disabled.
|
|
36
|
-
*/
|
|
37
|
-
disabled?: boolean;
|
|
38
|
-
/**
|
|
39
|
-
* Styling variant. Defaults to "primary".
|
|
40
|
-
*/
|
|
41
|
-
variant?: "primary" | "secondary";
|
|
42
|
-
/**
|
|
43
|
-
/**
|
|
44
|
-
* The source of combobox items.
|
|
45
|
-
*/
|
|
46
|
-
source: T[];
|
|
47
|
-
/**
|
|
48
|
-
* Optional ref for the list component
|
|
49
|
-
*/
|
|
50
|
-
listRef?: Ref<HTMLUListElement>;
|
|
51
|
-
/**
|
|
52
|
-
* The component used for item instead of the default.
|
|
53
|
-
*/
|
|
54
|
-
ListItem?: (props: ComboBoxItemProps<T>) => ReactElement<ComboBoxItemProps<T>>;
|
|
55
|
-
/**
|
|
56
|
-
* Function to be used as filter.
|
|
57
|
-
*/
|
|
58
|
-
itemFilter?: (source: T[], filterValue?: string) => T[];
|
|
59
|
-
/**
|
|
60
|
-
* Callback for mouse over event
|
|
61
|
-
*/
|
|
62
|
-
onMouseOver?: (event: SyntheticEvent) => void;
|
|
63
|
-
/**
|
|
64
|
-
* Callback for list selection event
|
|
65
|
-
*/
|
|
66
|
-
onSelect?: (event: SyntheticEvent, data: {
|
|
67
|
-
value: string;
|
|
68
|
-
}) => void;
|
|
69
|
-
/**
|
|
70
|
-
/**
|
|
71
|
-
* Callback for list change event
|
|
72
|
-
*/
|
|
73
|
-
onListChange?: (event: SyntheticEvent, data: {
|
|
74
|
-
value: string | undefined;
|
|
75
|
-
}) => void;
|
|
76
|
-
/**
|
|
77
|
-
* Callback for input change event
|
|
78
|
-
*/
|
|
79
|
-
onChange?: (event: SyntheticEvent, data: {
|
|
80
|
-
value: string;
|
|
81
|
-
}) => void;
|
|
8
|
+
children?: ReactNode;
|
|
82
9
|
}
|
|
83
|
-
export declare const ComboBoxNext: import("react").ForwardRefExoticComponent<ComboBoxNextProps
|
|
10
|
+
export declare const ComboBoxNext: import("react").ForwardRefExoticComponent<ComboBoxNextProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ListControlProps } from "../list-control/ListControlState";
|
|
2
|
+
import { SyntheticEvent } from "react";
|
|
3
|
+
import { OptionValue } from "../list-control/ListControlContext";
|
|
4
|
+
export declare function useComboBoxNext(props: ListControlProps): {
|
|
5
|
+
select: (event: SyntheticEvent, option: OptionValue) => void;
|
|
6
|
+
multiselect: boolean;
|
|
7
|
+
openState: boolean;
|
|
8
|
+
setOpen: (event: SyntheticEvent<Element, Event>, newOpen: boolean) => void;
|
|
9
|
+
openKey: import("react").MutableRefObject<{
|
|
10
|
+
key: string;
|
|
11
|
+
altKey: boolean;
|
|
12
|
+
}>;
|
|
13
|
+
activeState: OptionValue | undefined;
|
|
14
|
+
setActive: (option?: OptionValue | undefined) => void;
|
|
15
|
+
selectedState: string[];
|
|
16
|
+
setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
|
|
17
|
+
clear: (event: SyntheticEvent<Element, Event>) => void;
|
|
18
|
+
valueState: string | number | readonly string[] | undefined;
|
|
19
|
+
setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
|
|
20
|
+
focusVisibleState: boolean;
|
|
21
|
+
setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
22
|
+
focusedState: boolean;
|
|
23
|
+
setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
24
|
+
listRef: import("react").RefObject<HTMLDivElement>;
|
|
25
|
+
options: HTMLElement[];
|
|
26
|
+
register: (optionValue: OptionValue, element: HTMLElement) => () => void;
|
|
27
|
+
getOptionAtIndex: (index: number) => OptionValue;
|
|
28
|
+
getIndexOfOption: (option: OptionValue) => number;
|
|
29
|
+
getOptionsMatching: (predicate: (option: OptionValue) => boolean) => OptionValue[];
|
|
30
|
+
getOptionFromSearch: (search: string, startFrom?: OptionValue | undefined) => OptionValue | undefined;
|
|
31
|
+
};
|
|
@@ -3,19 +3,18 @@ export declare type UseDialogProps = Partial<Pick<UseFloatingUIProps, "onOpenCha
|
|
|
3
3
|
export declare function useDialog(props: UseDialogProps): {
|
|
4
4
|
getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
|
|
5
5
|
getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
|
|
6
|
-
floating: (node: HTMLElement | null) => void;
|
|
6
|
+
floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
|
|
7
7
|
context: {
|
|
8
|
-
x: number
|
|
9
|
-
y: number
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
10
|
placement: import("@floating-ui/utils").Placement;
|
|
11
11
|
strategy: import("@floating-ui/utils").Strategy;
|
|
12
12
|
middlewareData: import("@floating-ui/core").MiddlewareData;
|
|
13
|
-
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
14
|
-
floating: (node: HTMLElement | null) => void;
|
|
15
|
-
update: () => void;
|
|
16
13
|
isPositioned: boolean;
|
|
14
|
+
update: () => void;
|
|
15
|
+
floatingStyles: import("react").CSSProperties;
|
|
17
16
|
open: boolean;
|
|
18
|
-
onOpenChange: (open: boolean) => void;
|
|
17
|
+
onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
|
|
19
18
|
events: import("@floating-ui/react").FloatingEvents;
|
|
20
19
|
dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
|
|
21
20
|
nodeId: string | undefined;
|
|
@@ -3,19 +3,18 @@ export declare type UseDrawerProps = Partial<Pick<UseFloatingUIProps, "onOpenCha
|
|
|
3
3
|
export declare function useDrawer(props: UseDrawerProps): {
|
|
4
4
|
getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
|
|
5
5
|
getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
|
|
6
|
-
floating: (node: HTMLElement | null) => void;
|
|
6
|
+
floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
|
|
7
7
|
context: {
|
|
8
|
-
x: number
|
|
9
|
-
y: number
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
10
|
placement: import("@floating-ui/utils").Placement;
|
|
11
11
|
strategy: import("@floating-ui/utils").Strategy;
|
|
12
12
|
middlewareData: import("@floating-ui/core").MiddlewareData;
|
|
13
|
-
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
14
|
-
floating: (node: HTMLElement | null) => void;
|
|
15
|
-
update: () => void;
|
|
16
13
|
isPositioned: boolean;
|
|
14
|
+
update: () => void;
|
|
15
|
+
floatingStyles: import("react").CSSProperties;
|
|
17
16
|
open: boolean;
|
|
18
|
-
onOpenChange: (open: boolean) => void;
|
|
17
|
+
onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
|
|
19
18
|
events: import("@floating-ui/react").FloatingEvents;
|
|
20
19
|
dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
|
|
21
20
|
nodeId: string | undefined;
|
|
@@ -1,49 +1,47 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
export interface DropdownNextProps extends Omit<ComponentPropsWithoutRef<"button">, "
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
|
+
import { ListControlProps } from "../list-control/ListControlState";
|
|
3
|
+
import { ValidationStatus } from "@salt-ds/core";
|
|
4
|
+
export interface DropdownNextProps extends Omit<ComponentPropsWithoutRef<"button">, "value" | "defaultValue">, ListControlProps {
|
|
5
5
|
/**
|
|
6
|
-
* If `true`, dropdown will be disabled.
|
|
6
|
+
* If `true`, the dropdown will be disabled.
|
|
7
7
|
*/
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* If `true`, the dropdown will be read-only.
|
|
11
11
|
*/
|
|
12
|
-
|
|
12
|
+
readOnly?: boolean;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* The options to display in the dropdown.
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
children?: ReactNode;
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* The marker to use in an empty read only dropdown.
|
|
19
|
+
* Use `''` to disable this feature. Defaults to '—'.
|
|
19
20
|
*/
|
|
20
|
-
|
|
21
|
+
emptyReadOnlyMarker?: string;
|
|
21
22
|
/**
|
|
22
|
-
*
|
|
23
|
+
* If `true`, the dropdown will be multiselect.
|
|
23
24
|
*/
|
|
24
|
-
|
|
25
|
+
multiselect?: boolean;
|
|
25
26
|
/**
|
|
26
|
-
*
|
|
27
|
+
* The text shown when the dropdown has no value.
|
|
27
28
|
*/
|
|
28
|
-
|
|
29
|
+
placeholder?: string;
|
|
29
30
|
/**
|
|
30
|
-
*
|
|
31
|
+
* If `true`, the dropdown will be required.
|
|
31
32
|
*/
|
|
32
|
-
|
|
33
|
+
required?: boolean;
|
|
33
34
|
/**
|
|
34
|
-
*
|
|
35
|
+
* Start adornment component
|
|
35
36
|
*/
|
|
36
|
-
|
|
37
|
-
open?: boolean;
|
|
37
|
+
startAdornment?: ReactNode;
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* Styling variant. Defaults to "primary".
|
|
40
40
|
*/
|
|
41
|
-
|
|
42
|
-
value: string;
|
|
43
|
-
}) => void;
|
|
41
|
+
variant?: "primary" | "secondary";
|
|
44
42
|
/**
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
* Validation status, one of "error" | "warning" | "success".
|
|
44
|
+
*/
|
|
45
|
+
validationStatus?: Exclude<ValidationStatus, "info">;
|
|
48
46
|
}
|
|
49
47
|
export declare const DropdownNext: import("react").ForwardRefExoticComponent<DropdownNextProps & import("react").RefAttributes<HTMLButtonElement>>;
|
package/dist-types/index.d.ts
CHANGED
|
@@ -33,12 +33,11 @@ export * from "./logo";
|
|
|
33
33
|
export * from "./menu-button";
|
|
34
34
|
export * from "./metric";
|
|
35
35
|
export * from "./navigation-item";
|
|
36
|
+
export * from "./option";
|
|
36
37
|
export * from "./overlay";
|
|
37
38
|
export * from "./pagination";
|
|
38
39
|
export * from "./parent-child-item";
|
|
39
40
|
export * from "./parent-child-layout";
|
|
40
|
-
export * from "./pill";
|
|
41
|
-
export * from "./pill-next";
|
|
42
41
|
export * from "./portal";
|
|
43
42
|
export * from "./progress";
|
|
44
43
|
export * from "./query-input";
|
|
@@ -53,6 +52,7 @@ export * from "./tabs";
|
|
|
53
52
|
export * from "./tabs-next";
|
|
54
53
|
export * from "./toast-group";
|
|
55
54
|
export * from "./tokenized-input";
|
|
55
|
+
export * from "./tokenized-input-next";
|
|
56
56
|
export * from "./toolbar";
|
|
57
57
|
export * from "./tree";
|
|
58
58
|
export * from "./utils";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SyntheticEvent } from "react";
|
|
2
|
+
export interface OptionValue {
|
|
3
|
+
id: string;
|
|
4
|
+
disabled: boolean;
|
|
5
|
+
value: string;
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
export interface ListControlContextValue {
|
|
9
|
+
openState: boolean;
|
|
10
|
+
setOpen: (event: SyntheticEvent, newOpen: boolean) => void;
|
|
11
|
+
register: (optionValue: OptionValue, element: HTMLElement) => () => void;
|
|
12
|
+
selectedState: string[];
|
|
13
|
+
select: (event: SyntheticEvent, option: OptionValue) => void;
|
|
14
|
+
activeState?: OptionValue;
|
|
15
|
+
setActive: (option: OptionValue) => void;
|
|
16
|
+
multiselect: boolean;
|
|
17
|
+
focusVisibleState: boolean;
|
|
18
|
+
}
|
|
19
|
+
export declare const ListControlContext: import("react").Context<ListControlContextValue>;
|
|
20
|
+
export declare function useListControlContext(): ListControlContextValue;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { SyntheticEvent } from "react";
|
|
2
|
+
import { OptionValue } from "./ListControlContext";
|
|
3
|
+
export interface ListControlProps {
|
|
4
|
+
/**
|
|
5
|
+
* If true, the list will be open by default.
|
|
6
|
+
*/
|
|
7
|
+
defaultOpen?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* If true, the list will be open. Useful for controlling the component.
|
|
10
|
+
*/
|
|
11
|
+
open?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Callback fired when the open state changes.
|
|
14
|
+
*/
|
|
15
|
+
onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;
|
|
16
|
+
/**
|
|
17
|
+
* The default selected options. If this is provided `defaultValue` should be provided as well.
|
|
18
|
+
*/
|
|
19
|
+
defaultSelected?: string[];
|
|
20
|
+
/**
|
|
21
|
+
* The selected options. The component will be controlled if this prop is provided.
|
|
22
|
+
*/
|
|
23
|
+
selected?: string[];
|
|
24
|
+
/**
|
|
25
|
+
* Callback fired when the selected options change.
|
|
26
|
+
*/
|
|
27
|
+
onSelectionChange?: (event: SyntheticEvent, newSelected: string[]) => void;
|
|
28
|
+
/**
|
|
29
|
+
* The default value.
|
|
30
|
+
*/
|
|
31
|
+
defaultValue?: string | readonly string[] | number | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* The value. The component will be controlled if this prop is provided.
|
|
34
|
+
*/
|
|
35
|
+
value?: string | readonly string[] | number | undefined;
|
|
36
|
+
/**
|
|
37
|
+
* If true, multiple options can be selected.
|
|
38
|
+
*/
|
|
39
|
+
multiselect?: boolean;
|
|
40
|
+
}
|
|
41
|
+
export declare function useListControl(props: ListControlProps): {
|
|
42
|
+
multiselect: boolean;
|
|
43
|
+
openState: boolean;
|
|
44
|
+
setOpen: (event: SyntheticEvent, newOpen: boolean) => void;
|
|
45
|
+
openKey: import("react").MutableRefObject<{
|
|
46
|
+
key: string;
|
|
47
|
+
altKey: boolean;
|
|
48
|
+
}>;
|
|
49
|
+
activeState: OptionValue | undefined;
|
|
50
|
+
setActive: (option?: OptionValue | undefined) => void;
|
|
51
|
+
selectedState: string[];
|
|
52
|
+
setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
|
|
53
|
+
select: (event: SyntheticEvent, option: OptionValue) => void;
|
|
54
|
+
clear: (event: SyntheticEvent) => void;
|
|
55
|
+
valueState: string | number | readonly string[] | undefined;
|
|
56
|
+
setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
|
|
57
|
+
focusVisibleState: boolean;
|
|
58
|
+
setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
59
|
+
focusedState: boolean;
|
|
60
|
+
setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
61
|
+
listRef: import("react").RefObject<HTMLDivElement>;
|
|
62
|
+
options: HTMLElement[];
|
|
63
|
+
register: (optionValue: OptionValue, element: HTMLElement) => () => void;
|
|
64
|
+
getOptionAtIndex: (index: number) => OptionValue;
|
|
65
|
+
getIndexOfOption: (option: OptionValue) => number;
|
|
66
|
+
getOptionsMatching: (predicate: (option: OptionValue) => boolean) => OptionValue[];
|
|
67
|
+
getOptionFromSearch: (search: string, startFrom?: OptionValue | undefined) => OptionValue | undefined;
|
|
68
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { NavigationItemProps } from "./NavigationItem";
|
|
3
|
-
interface ConditionalWrapperProps extends Pick<NavigationItemProps, "parent" | "expanded" | "onExpand" | "active" | "href"> {
|
|
3
|
+
interface ConditionalWrapperProps extends Pick<NavigationItemProps, "parent" | "expanded" | "onExpand" | "active" | "href" | "onClick"> {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
className: string;
|
|
6
6
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { NavigationItemProps } from "./NavigationItem";
|
|
2
|
-
export declare function ExpansionIcon({ expanded, orientation,
|
|
2
|
+
export declare function ExpansionIcon({ expanded, orientation, }: Pick<NavigationItemProps, "expanded" | "orientation" | "className">): JSX.Element;
|