@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
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var findAllTabbableElements = require('./internal/findAllTabbableElements.js');
|
|
9
|
-
var useReturnFocus = require('./internal/useReturnFocus.js');
|
|
10
|
-
|
|
11
|
-
const defaultSelector = `
|
|
12
|
-
[tabindex="0"],
|
|
13
|
-
a:not([tabindex="-1"]),
|
|
14
|
-
area:not([tabindex="-1"]),
|
|
15
|
-
details:not([tabindex="-1"]),
|
|
16
|
-
iframe:not([tabindex="-1"]),
|
|
17
|
-
select:not([tabindex="-1"]),
|
|
18
|
-
textarea:not([tabindex="-1"]),
|
|
19
|
-
button:not([tabindex="-1"]),
|
|
20
|
-
input:not([tabindex="-1"])
|
|
21
|
-
`;
|
|
22
|
-
function tryFocus(node) {
|
|
23
|
-
if (!node)
|
|
24
|
-
return;
|
|
25
|
-
const initialTabIndex = node.getAttribute("tabindex");
|
|
26
|
-
node.setAttribute("tabindex", "-1");
|
|
27
|
-
const removeTabIndex = () => {
|
|
28
|
-
if (initialTabIndex === null) {
|
|
29
|
-
node.removeAttribute("tabindex");
|
|
30
|
-
} else {
|
|
31
|
-
node.setAttribute("tabindex", initialTabIndex);
|
|
32
|
-
}
|
|
33
|
-
node.removeEventListener("blur", removeTabIndex);
|
|
34
|
-
};
|
|
35
|
-
node.addEventListener("blur", removeTabIndex);
|
|
36
|
-
node.focus();
|
|
37
|
-
}
|
|
38
|
-
function FocusManager(props) {
|
|
39
|
-
const {
|
|
40
|
-
active,
|
|
41
|
-
autoFocusRef,
|
|
42
|
-
children,
|
|
43
|
-
className,
|
|
44
|
-
disableAutoFocus,
|
|
45
|
-
disableFocusTrap,
|
|
46
|
-
disableReturnFocus,
|
|
47
|
-
fallbackFocusRef,
|
|
48
|
-
tabEnabledSelectors = defaultSelector,
|
|
49
|
-
returnFocusOptions
|
|
50
|
-
} = props;
|
|
51
|
-
const containerRef = React.useRef(null);
|
|
52
|
-
const trapStartRef = React.useRef(null);
|
|
53
|
-
const trapEndRef = React.useRef(null);
|
|
54
|
-
const staticElementRef = React.useRef(null);
|
|
55
|
-
const [hasFocus, setHasFocus] = React.useState(false);
|
|
56
|
-
useReturnFocus.useReturnFocus({
|
|
57
|
-
focusOptions: returnFocusOptions,
|
|
58
|
-
disabled: disableReturnFocus || disableAutoFocus,
|
|
59
|
-
active,
|
|
60
|
-
document: core.ownerDocument(containerRef.current)
|
|
61
|
-
});
|
|
62
|
-
const resolveElementAtIndex = React.useCallback(
|
|
63
|
-
(tabbableElements, index) => {
|
|
64
|
-
if (tabbableElements.length >= 1) {
|
|
65
|
-
const element = tabbableElements[index];
|
|
66
|
-
if (element == null ? void 0 : element.shadowRoot) {
|
|
67
|
-
return element.shadowRoot.querySelector(
|
|
68
|
-
tabEnabledSelectors
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
return element;
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
[tabEnabledSelectors]
|
|
75
|
-
);
|
|
76
|
-
const getFirstElement = React.useCallback(() => {
|
|
77
|
-
const tabbableElements = findAllTabbableElements.findAllTabbableElements(
|
|
78
|
-
containerRef.current,
|
|
79
|
-
tabEnabledSelectors,
|
|
80
|
-
[trapEndRef.current, trapStartRef.current]
|
|
81
|
-
);
|
|
82
|
-
return resolveElementAtIndex(tabbableElements, 0);
|
|
83
|
-
}, [resolveElementAtIndex, tabEnabledSelectors]);
|
|
84
|
-
const getLastElement = () => {
|
|
85
|
-
const tabbableElements = findAllTabbableElements.findAllTabbableElements(
|
|
86
|
-
containerRef.current,
|
|
87
|
-
tabEnabledSelectors,
|
|
88
|
-
[trapEndRef.current, trapStartRef.current]
|
|
89
|
-
);
|
|
90
|
-
return resolveElementAtIndex(tabbableElements, tabbableElements.length - 1);
|
|
91
|
-
};
|
|
92
|
-
const handleTrapStartFocus = (event) => {
|
|
93
|
-
const isEnteringFocusTrap = !hasFocus && core.ownerDocument(containerRef.current).activeElement === trapStartRef.current;
|
|
94
|
-
const nextElement = isEnteringFocusTrap ? getFirstElement() : getLastElement();
|
|
95
|
-
if (nextElement) {
|
|
96
|
-
nextElement.focus();
|
|
97
|
-
}
|
|
98
|
-
event.preventDefault();
|
|
99
|
-
};
|
|
100
|
-
const handleTrapEndFocus = (event) => {
|
|
101
|
-
const nextElement = getFirstElement();
|
|
102
|
-
if (nextElement) {
|
|
103
|
-
nextElement.focus();
|
|
104
|
-
}
|
|
105
|
-
event.preventDefault();
|
|
106
|
-
};
|
|
107
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
108
|
-
if (active && !disableAutoFocus) {
|
|
109
|
-
let nodeToFocus;
|
|
110
|
-
if (autoFocusRef == null ? void 0 : autoFocusRef.current) {
|
|
111
|
-
nodeToFocus = autoFocusRef.current;
|
|
112
|
-
} else {
|
|
113
|
-
nodeToFocus = getFirstElement() || (fallbackFocusRef == null ? void 0 : fallbackFocusRef.current);
|
|
114
|
-
}
|
|
115
|
-
if (!nodeToFocus) {
|
|
116
|
-
console.error(
|
|
117
|
-
"Your focus trap needs to contain at least once focused node."
|
|
118
|
-
);
|
|
119
|
-
} else if (nodeToFocus !== core.ownerDocument(nodeToFocus).activeElement) {
|
|
120
|
-
tryFocus(nodeToFocus);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}, [
|
|
124
|
-
active,
|
|
125
|
-
disableAutoFocus,
|
|
126
|
-
getFirstElement,
|
|
127
|
-
autoFocusRef,
|
|
128
|
-
fallbackFocusRef
|
|
129
|
-
]);
|
|
130
|
-
const enforceFocus = active && !disableFocusTrap;
|
|
131
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
132
|
-
className,
|
|
133
|
-
onFocus: () => setHasFocus(true),
|
|
134
|
-
ref: containerRef,
|
|
135
|
-
children: [
|
|
136
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
137
|
-
"aria-hidden": "true",
|
|
138
|
-
onFocus: handleTrapStartFocus,
|
|
139
|
-
ref: trapStartRef,
|
|
140
|
-
tabIndex: enforceFocus ? 0 : -1
|
|
141
|
-
}),
|
|
142
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
143
|
-
ref: staticElementRef,
|
|
144
|
-
tabIndex: -1
|
|
145
|
-
}),
|
|
146
|
-
children,
|
|
147
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
148
|
-
"aria-hidden": "true",
|
|
149
|
-
onFocus: handleTrapEndFocus,
|
|
150
|
-
ref: trapEndRef,
|
|
151
|
-
tabIndex: enforceFocus ? 0 : -1
|
|
152
|
-
})
|
|
153
|
-
]
|
|
154
|
-
});
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
exports.FocusManager = FocusManager;
|
|
158
|
-
//# sourceMappingURL=FocusManager.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FocusManager.js","sources":["../src/focus-manager/FocusManager.tsx"],"sourcesContent":["import {\n FocusEvent,\n ReactNode,\n RefObject,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { ownerDocument, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { findAllTabbableElements } from \"./internal/findAllTabbableElements\";\nimport { useReturnFocus, UseReturnFocusProps } from \"./internal/useReturnFocus\";\n\nconst defaultSelector = `\n[tabindex=\"0\"],\na:not([tabindex=\"-1\"]),\narea:not([tabindex=\"-1\"]),\ndetails:not([tabindex=\"-1\"]),\niframe:not([tabindex=\"-1\"]),\nselect:not([tabindex=\"-1\"]),\ntextarea:not([tabindex=\"-1\"]),\nbutton:not([tabindex=\"-1\"]),\ninput:not([tabindex=\"-1\"])\n`;\n\nexport interface FocusManagerProps {\n active?: boolean;\n autoFocusRef?: RefObject<HTMLElement>;\n children?: ReactNode;\n className?: string;\n disableAutoFocus?: boolean;\n disableFocusTrap?: boolean;\n disableReturnFocus?: boolean;\n fallbackFocusRef?: RefObject<HTMLElement>;\n tabEnabledSelectors?: string;\n returnFocusOptions?: UseReturnFocusProps[\"focusOptions\"];\n}\n\nfunction tryFocus(node?: HTMLElement) {\n if (!node) return;\n\n const initialTabIndex = node.getAttribute(\"tabindex\");\n node.setAttribute(\"tabindex\", \"-1\");\n\n const removeTabIndex = () => {\n if (initialTabIndex === null) {\n node.removeAttribute(\"tabindex\");\n } else {\n node.setAttribute(\"tabindex\", initialTabIndex);\n }\n\n node.removeEventListener(\"blur\", removeTabIndex);\n };\n\n node.addEventListener(\"blur\", removeTabIndex);\n\n node.focus();\n}\n\nexport function FocusManager(props: FocusManagerProps): JSX.Element {\n const {\n active,\n autoFocusRef,\n children,\n className,\n disableAutoFocus,\n disableFocusTrap,\n disableReturnFocus,\n fallbackFocusRef,\n tabEnabledSelectors = defaultSelector,\n returnFocusOptions,\n } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trapStartRef = useRef<HTMLDivElement>(null);\n const trapEndRef = useRef<HTMLDivElement>(null);\n const staticElementRef = useRef<HTMLDivElement>(null);\n const [hasFocus, setHasFocus] = useState(false);\n\n useReturnFocus({\n focusOptions: returnFocusOptions,\n disabled: disableReturnFocus || disableAutoFocus,\n active,\n document: ownerDocument(containerRef.current),\n });\n\n /**\n * Given a list of elements and an index, the corresponding element is returned, if exists.\n * Alternatively, for a shadow root, the first tabbable element is returned.\n * @param {Node[]} tabbableElements A list of elements from which to select.\n * @param {number} index The list index.\n */\n const resolveElementAtIndex = useCallback(\n (tabbableElements: HTMLElement[], index: number) => {\n if (tabbableElements.length >= 1) {\n const element = tabbableElements[index];\n\n if (element?.shadowRoot) {\n return element.shadowRoot.querySelector<HTMLElement>(\n tabEnabledSelectors\n );\n }\n\n return element;\n }\n },\n [tabEnabledSelectors]\n );\n\n /**\n * Return the first tabbable element within the content area.\n */\n const getFirstElement = useCallback(() => {\n const tabbableElements = findAllTabbableElements(\n containerRef.current,\n tabEnabledSelectors,\n [trapEndRef.current, trapStartRef.current]\n );\n return resolveElementAtIndex(tabbableElements, 0);\n }, [resolveElementAtIndex, tabEnabledSelectors]);\n\n /**\n * Return the last tabbable element within the content area.\n */\n const getLastElement = () => {\n const tabbableElements = findAllTabbableElements(\n containerRef.current,\n tabEnabledSelectors,\n [trapEndRef.current, trapStartRef.current]\n );\n return resolveElementAtIndex(tabbableElements, tabbableElements.length - 1);\n };\n\n /**\n * When the trap-start sentinel node gains focus, pass focus to either\n * the first or last tabbable element, depending on the direction of travel\n * (i.e. Tab or Shift+Tab)\n * @param {React.FocusEvent} event The synthetic focus event.\n */\n const handleTrapStartFocus = (event: FocusEvent<HTMLDivElement>) => {\n const isEnteringFocusTrap =\n !hasFocus &&\n ownerDocument(containerRef.current).activeElement ===\n trapStartRef.current;\n\n const nextElement = isEnteringFocusTrap\n ? getFirstElement()\n : getLastElement();\n\n if (nextElement) {\n nextElement.focus();\n }\n\n event.preventDefault();\n };\n\n /**\n * When the trap-end sentinel node gains focus, pass focus to either\n * the first tabbable element.\n * @param {React.FocusEvent} event The synthetic focus event.\n */\n const handleTrapEndFocus = (event: FocusEvent<HTMLDivElement>) => {\n const nextElement = getFirstElement();\n\n if (nextElement) {\n nextElement.focus();\n }\n\n event.preventDefault();\n };\n\n useIsomorphicLayoutEffect(() => {\n if (active && !disableAutoFocus) {\n let nodeToFocus;\n\n if (autoFocusRef?.current) {\n nodeToFocus = autoFocusRef.current;\n } else {\n nodeToFocus = getFirstElement() || fallbackFocusRef?.current;\n }\n\n if (!nodeToFocus) {\n // This will always be the case when we're applying the shim in a desktop window. Need to consider how to fix.\n console.error(\n \"Your focus trap needs to contain at least once focused node.\"\n );\n } else if (nodeToFocus !== ownerDocument(nodeToFocus).activeElement) {\n tryFocus(nodeToFocus);\n }\n }\n }, [\n active,\n disableAutoFocus,\n getFirstElement,\n autoFocusRef,\n fallbackFocusRef,\n ]);\n\n const enforceFocus = active && !disableFocusTrap;\n\n return (\n <div\n className={className}\n onFocus={() => setHasFocus(true)}\n ref={containerRef}\n >\n <div\n aria-hidden=\"true\"\n onFocus={handleTrapStartFocus}\n ref={trapStartRef}\n tabIndex={enforceFocus ? 0 : -1}\n />\n <div ref={staticElementRef} tabIndex={-1} />\n {children}\n <div\n aria-hidden=\"true\"\n onFocus={handleTrapEndFocus}\n ref={trapEndRef}\n tabIndex={enforceFocus ? 0 : -1}\n />\n </div>\n );\n}\n"],"names":["useRef","useState","useReturnFocus","ownerDocument","useCallback","findAllTabbableElements","useIsomorphicLayoutEffect","jsxs","jsx"],"mappings":"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"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
|
|
7
|
-
const anyKeyboardFocusedElementSelector = '*:not(style):not(script):not(noscript):not(link):not([tabindex="-1"])';
|
|
8
|
-
function findAllTabbableElements(rootNode, selector, elementsToIgnore = []) {
|
|
9
|
-
if (!rootNode) {
|
|
10
|
-
return [];
|
|
11
|
-
}
|
|
12
|
-
const nodes = Array.from(
|
|
13
|
-
rootNode.querySelectorAll(anyKeyboardFocusedElementSelector)
|
|
14
|
-
).slice();
|
|
15
|
-
return nodes.reduce((foundNodes, node) => {
|
|
16
|
-
var _a;
|
|
17
|
-
if (elementsToIgnore.indexOf(node) !== -1) {
|
|
18
|
-
return foundNodes;
|
|
19
|
-
}
|
|
20
|
-
const win = core.ownerWindow(node);
|
|
21
|
-
if ((node.getBoundingClientRect().width === 0 || win.getComputedStyle(node).visibility !== "visible") && node instanceof HTMLSlotElement && typeof node.assignedElements !== "function") {
|
|
22
|
-
return foundNodes;
|
|
23
|
-
}
|
|
24
|
-
if (node instanceof HTMLSlotElement && typeof node.assignedElements === "function") {
|
|
25
|
-
return foundNodes.concat(
|
|
26
|
-
node.assignedElements().filter((n) => !n.shadowRoot)
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
if (!node.shadowRoot && node.matches(selector)) {
|
|
30
|
-
const rootNode2 = (_a = node.parentNode) == null ? void 0 : _a.getRootNode();
|
|
31
|
-
return foundNodes.concat(
|
|
32
|
-
rootNode2 instanceof ShadowRoot ? rootNode2.host : node
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
if (node.shadowRoot) {
|
|
36
|
-
return foundNodes.concat(
|
|
37
|
-
findAllTabbableElements(node.shadowRoot, selector, elementsToIgnore)
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
return foundNodes;
|
|
41
|
-
}, []);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
exports.findAllTabbableElements = findAllTabbableElements;
|
|
45
|
-
//# sourceMappingURL=findAllTabbableElements.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"findAllTabbableElements.js","sources":["../src/focus-manager/internal/findAllTabbableElements.ts"],"sourcesContent":["import { ownerWindow } from \"@salt-ds/core\";\n\n/**\n * Used to reduce the number of initial nodes that are checked to see if tabbable.\n *\n * Not possible to immediately check if a node is tabbable because the node may be a custom element\n * and therefore could potentially have a tabbable node within its shadow root.\n */\nconst anyKeyboardFocusedElementSelector =\n '*:not(style):not(script):not(noscript):not(link):not([tabindex=\"-1\"])';\n\ntype HTMLElementOrNull = HTMLElement | null;\n\n/**\n * Finds all the elements in the given root node that can be focused by a 'tab' keypress.\n * In addition, the trap-start and trap-end sentinel nodes are excluded, and all contained shadow roots are walked recursively\n * @param {Node} rootNode The containing node from which traversal begins.\n * @param {string} selector The CSS selector used to query for matching, tabbable elements.\n * @param {Node[]} elementsToIgnore Elements to ignore\n */\nexport function findAllTabbableElements(\n rootNode: HTMLElementOrNull | ShadowRoot,\n selector: string,\n elementsToIgnore: HTMLElementOrNull[] = []\n): HTMLElement[] {\n if (!rootNode) {\n return [];\n }\n\n const nodes = Array.from<HTMLElement | HTMLSlotElement>(\n rootNode.querySelectorAll(anyKeyboardFocusedElementSelector)\n ).slice();\n\n return nodes.reduce((foundNodes, node) => {\n if (elementsToIgnore.indexOf(node) !== -1) {\n return foundNodes;\n }\n\n const win = ownerWindow(node);\n // Skip hidden nodes. assignedElements needs to be checked here to make sure we don't ignore slots\n if (\n (node.getBoundingClientRect().width === 0 ||\n win.getComputedStyle(node).visibility !== \"visible\") &&\n node instanceof HTMLSlotElement &&\n typeof node.assignedElements !== \"function\"\n ) {\n return foundNodes;\n }\n\n // If node is a slot return assigned elements.\n if (\n node instanceof HTMLSlotElement &&\n typeof node.assignedElements === \"function\"\n ) {\n return foundNodes.concat(\n node.assignedElements().filter((n) => !n.shadowRoot) as HTMLElement[]\n );\n }\n\n if (!node.shadowRoot && node.matches(selector)) {\n // If this element is inside a shadowRoot then the host not the element itself is needed.\n const rootNode = node.parentNode?.getRootNode();\n return foundNodes.concat(\n rootNode instanceof ShadowRoot ? (rootNode.host as HTMLElement) : node\n );\n }\n if (node.shadowRoot) {\n return foundNodes.concat(\n findAllTabbableElements(node.shadowRoot, selector, elementsToIgnore)\n );\n }\n\n return foundNodes;\n }, [] as HTMLElement[]);\n}\n"],"names":["ownerWindow","rootNode"],"mappings":";;;;;;AAQA,MAAM,iCACJ,GAAA,uEAAA,CAAA;AAWK,SAAS,uBACd,CAAA,QAAA,EACA,QACA,EAAA,gBAAA,GAAwC,EACzB,EAAA;AACf,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAA,OAAO,EAAC,CAAA;AAAA,GACV;AAEA,EAAA,MAAM,QAAQ,KAAM,CAAA,IAAA;AAAA,IAClB,QAAA,CAAS,iBAAiB,iCAAiC,CAAA;AAAA,IAC3D,KAAM,EAAA,CAAA;AAER,EAAA,OAAO,KAAM,CAAA,MAAA,CAAO,CAAC,UAAA,EAAY,IAAS,KAAA;AAjC5C,IAAA,IAAA,EAAA,CAAA;AAkCI,IAAA,IAAI,gBAAiB,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CAAI,CAAA,EAAA;AACzC,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,GAAA,GAAMA,iBAAY,IAAI,CAAA,CAAA;AAE5B,IAAA,IAAA,CACG,KAAK,qBAAsB,EAAA,CAAE,KAAU,KAAA,CAAA,IACtC,IAAI,gBAAiB,CAAA,IAAI,CAAE,CAAA,UAAA,KAAe,cAC5C,IAAgB,YAAA,eAAA,IAChB,OAAO,IAAA,CAAK,qBAAqB,UACjC,EAAA;AACA,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAGA,IAAA,IACE,IAAgB,YAAA,eAAA,IAChB,OAAO,IAAA,CAAK,qBAAqB,UACjC,EAAA;AACA,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChB,IAAA,CAAK,kBAAmB,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAC,EAAE,UAAU,CAAA;AAAA,OACrD,CAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,IAAK,CAAA,UAAA,IAAc,IAAK,CAAA,OAAA,CAAQ,QAAQ,CAAG,EAAA;AAE9C,MAAMC,MAAAA,SAAAA,GAAAA,CAAW,EAAK,GAAA,IAAA,CAAA,UAAA,KAAL,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAClC,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChBA,SAAAA,YAAoB,UAAcA,GAAAA,SAAAA,CAAS,IAAuB,GAAA,IAAA;AAAA,OACpE,CAAA;AAAA,KACF;AACA,IAAA,IAAI,KAAK,UAAY,EAAA;AACnB,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChB,uBAAwB,CAAA,IAAA,CAAK,UAAY,EAAA,QAAA,EAAU,gBAAgB,CAAA;AAAA,OACrE,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,UAAA,CAAA;AAAA,GACT,EAAG,EAAmB,CAAA,CAAA;AACxB;;;;"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
|
|
8
|
-
function getActiveElement(doc) {
|
|
9
|
-
if (!doc) {
|
|
10
|
-
return null;
|
|
11
|
-
}
|
|
12
|
-
const activeElement = doc.activeElement;
|
|
13
|
-
if (activeElement == null ? void 0 : activeElement.shadowRoot) {
|
|
14
|
-
return getActiveElement(activeElement.shadowRoot);
|
|
15
|
-
}
|
|
16
|
-
return activeElement;
|
|
17
|
-
}
|
|
18
|
-
function useReturnFocus({
|
|
19
|
-
focusOptions: focusOptionsProp,
|
|
20
|
-
disabled,
|
|
21
|
-
active,
|
|
22
|
-
document
|
|
23
|
-
}) {
|
|
24
|
-
const previousFocusedElement = React.useRef();
|
|
25
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
26
|
-
if (active) {
|
|
27
|
-
previousFocusedElement.current = getActiveElement(document);
|
|
28
|
-
}
|
|
29
|
-
}, [document, active]);
|
|
30
|
-
const focusOptionsRef = React.useRef(focusOptionsProp);
|
|
31
|
-
React.useEffect(() => {
|
|
32
|
-
focusOptionsRef.current = focusOptionsProp;
|
|
33
|
-
}, [focusOptionsProp]);
|
|
34
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
35
|
-
const returnFocus = () => {
|
|
36
|
-
const focusOptions = typeof focusOptionsRef.current === "object" ? focusOptionsRef.current : void 0;
|
|
37
|
-
setTimeout(() => {
|
|
38
|
-
var _a;
|
|
39
|
-
if (previousFocusedElement.current) {
|
|
40
|
-
(_a = previousFocusedElement.current) == null ? void 0 : _a.focus(focusOptions);
|
|
41
|
-
}
|
|
42
|
-
}, 0);
|
|
43
|
-
};
|
|
44
|
-
if (!disabled) {
|
|
45
|
-
if (!active) {
|
|
46
|
-
returnFocus();
|
|
47
|
-
}
|
|
48
|
-
return () => {
|
|
49
|
-
if (active) {
|
|
50
|
-
returnFocus();
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
return void 0;
|
|
55
|
-
}, [disabled, active]);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
exports.useReturnFocus = useReturnFocus;
|
|
59
|
-
//# sourceMappingURL=useReturnFocus.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useReturnFocus.js","sources":["../src/focus-manager/internal/useReturnFocus.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nfunction getActiveElement(doc: DocumentOrShadowRoot): HTMLElement | null {\n if (!doc) {\n return null;\n }\n\n const activeElement = doc.activeElement;\n\n if (activeElement?.shadowRoot) {\n return getActiveElement(activeElement.shadowRoot);\n }\n\n return activeElement as HTMLElement;\n}\n\nexport interface UseReturnFocusProps {\n active?: boolean;\n disabled?: boolean;\n document: DocumentOrShadowRoot;\n focusOptions?: FocusOptions;\n}\n\nexport function useReturnFocus({\n focusOptions: focusOptionsProp,\n disabled,\n active,\n document,\n}: UseReturnFocusProps): void {\n const previousFocusedElement = useRef<HTMLElement | null>();\n\n useIsomorphicLayoutEffect(() => {\n if (active) {\n previousFocusedElement.current = getActiveElement(document);\n }\n }, [document, active]);\n\n const focusOptionsRef = useRef(focusOptionsProp);\n\n useEffect(() => {\n focusOptionsRef.current = focusOptionsProp;\n }, [focusOptionsProp]);\n\n useIsomorphicLayoutEffect(() => {\n const returnFocus = () => {\n const focusOptions =\n typeof focusOptionsRef.current === \"object\"\n ? focusOptionsRef.current\n : undefined;\n\n setTimeout(() => {\n if (previousFocusedElement.current) {\n previousFocusedElement.current?.focus(focusOptions);\n }\n }, 0);\n };\n\n if (!disabled) {\n if (!active) {\n returnFocus();\n }\n\n return () => {\n if (active) {\n returnFocus();\n }\n };\n }\n\n return undefined;\n }, [disabled, active]);\n}\n"],"names":["useRef","useIsomorphicLayoutEffect","useEffect"],"mappings":";;;;;;;AAGA,SAAS,iBAAiB,GAA+C,EAAA;AACvE,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,gBAAgB,GAAI,CAAA,aAAA,CAAA;AAE1B,EAAA,IAAI,+CAAe,UAAY,EAAA;AAC7B,IAAO,OAAA,gBAAA,CAAiB,cAAc,UAAU,CAAA,CAAA;AAAA,GAClD;AAEA,EAAO,OAAA,aAAA,CAAA;AACT,CAAA;AASO,SAAS,cAAe,CAAA;AAAA,EAC7B,YAAc,EAAA,gBAAA;AAAA,EACd,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AACF,CAA8B,EAAA;AAC5B,EAAA,MAAM,yBAAyBA,YAA2B,EAAA,CAAA;AAE1D,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAuB,sBAAA,CAAA,OAAA,GAAU,iBAAiB,QAAQ,CAAA,CAAA;AAAA,KAC5D;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,MAAM,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,eAAA,GAAkBD,aAAO,gBAAgB,CAAA,CAAA;AAE/C,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,OAAU,GAAA,gBAAA,CAAA;AAAA,GAC5B,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAAD,8BAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,cAAc,MAAM;AACxB,MAAA,MAAM,eACJ,OAAO,eAAA,CAAgB,OAAY,KAAA,QAAA,GAC/B,gBAAgB,OAChB,GAAA,KAAA,CAAA,CAAA;AAEN,MAAA,UAAA,CAAW,MAAM;AAnDvB,QAAA,IAAA,EAAA,CAAA;AAoDQ,QAAA,IAAI,uBAAuB,OAAS,EAAA;AAClC,UAAuB,CAAA,EAAA,GAAA,sBAAA,CAAA,OAAA,KAAvB,mBAAgC,KAAM,CAAA,YAAA,CAAA,CAAA;AAAA,SACxC;AAAA,SACC,CAAC,CAAA,CAAA;AAAA,KACN,CAAA;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,MAAQ,EAAA;AACV,UAAY,WAAA,EAAA,CAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACN,EAAA,CAAC,QAAU,EAAA,MAAM,CAAC,CAAA,CAAA;AACvB;;;;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
|
|
8
|
-
const ConditionalWrapper = ({
|
|
9
|
-
children,
|
|
10
|
-
className,
|
|
11
|
-
parent,
|
|
12
|
-
expanded,
|
|
13
|
-
onExpand,
|
|
14
|
-
active,
|
|
15
|
-
href
|
|
16
|
-
}) => {
|
|
17
|
-
const handleExpand = (event) => {
|
|
18
|
-
event.stopPropagation();
|
|
19
|
-
onExpand == null ? void 0 : onExpand(event);
|
|
20
|
-
};
|
|
21
|
-
return parent ? /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
22
|
-
"aria-label": "expand",
|
|
23
|
-
variant: "secondary",
|
|
24
|
-
"aria-expanded": expanded,
|
|
25
|
-
className,
|
|
26
|
-
onClick: handleExpand,
|
|
27
|
-
children
|
|
28
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
|
|
29
|
-
"aria-current": active ? "page" : void 0,
|
|
30
|
-
href,
|
|
31
|
-
className,
|
|
32
|
-
children
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
exports.ConditionalWrapper = ConditionalWrapper;
|
|
37
|
-
//# sourceMappingURL=ConditionalWrapper.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { Link, Button } from \"@salt-ds/core\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n extends Pick<\n NavigationItemProps,\n \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\"\n > {\n children: ReactNode;\n className: string;\n}\n\nexport const ConditionalWrapper = ({\n children,\n className,\n parent,\n expanded,\n onExpand,\n active,\n href,\n}: ConditionalWrapperProps) => {\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return parent ? (\n <Button\n aria-label=\"expand\"\n variant=\"secondary\"\n aria-expanded={expanded}\n className={className}\n onClick={handleExpand}\n >\n {children}\n </Button>\n ) : (\n <Link\n aria-current={active ? \"page\" : undefined}\n href={href}\n className={className}\n >\n {children}\n </Link>\n );\n};\n"],"names":["jsx","Button","Link"],"mappings":";;;;;;;AAaO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,OAAO,yBACJA,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,OAAQ,EAAA,WAAA;AAAA,IACR,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAECD,cAAA,CAAAE,SAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var icons = require('@salt-ds/icons');
|
|
7
|
-
|
|
8
|
-
const iconExpansionMap = {
|
|
9
|
-
vertical: {
|
|
10
|
-
expanded: icons.ChevronDownIcon,
|
|
11
|
-
collapsed: icons.ChevronRightIcon
|
|
12
|
-
},
|
|
13
|
-
horizontal: {
|
|
14
|
-
expanded: icons.ChevronDownIcon,
|
|
15
|
-
collapsed: icons.ChevronDownIcon
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
function ExpansionIcon({
|
|
19
|
-
expanded = false,
|
|
20
|
-
orientation = "horizontal",
|
|
21
|
-
className
|
|
22
|
-
}) {
|
|
23
|
-
const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
|
|
24
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Icon, {
|
|
25
|
-
"aria-hidden": "true",
|
|
26
|
-
className
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
exports.ExpansionIcon = ExpansionIcon;
|
|
31
|
-
//# sourceMappingURL=ExpansionIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n vertical: {\n expanded: ChevronDownIcon,\n collapsed: ChevronRightIcon,\n },\n horizontal: {\n expanded: ChevronDownIcon,\n collapsed: ChevronDownIcon,\n },\n};\n\nexport function ExpansionIcon({\n expanded = false,\n orientation = \"horizontal\",\n className,\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" className={className} />;\n}\n"],"names":["ChevronDownIcon","ChevronRightIcon","jsx"],"mappings":";;;;;;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAAA,qBAAA;AAAA,IACV,SAAW,EAAAC,sBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAAD,qBAAA;AAAA,IACV,SAAW,EAAAA,qBAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACd,SAAA;AACF,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQE,cAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,IAAO,SAAA;AAAA,GAAsB,CAAA,CAAA;AACxD;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n --navigationItem-color: var(--salt-content-primary-foreground);\n --navigationItem-fill: var(--salt-content-primary-foreground);\n --navigationItem-bar-inset: var(--salt-spacing-25);\n --navigationItem-bar-size: var(--salt-size-indicator);\n --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active */\n.saltNavigationItem-active,\n.saltNavigationItem-rootItem {\n --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);\n}\n\n/* Vars applied to NavigationItem component when blur active */\n.saltNavigationItem-blurActive,\n.saltNavigationItem-active.saltNavigationItem-nested {\n --navigationItem-fontWeight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n gap: var(--navigationItem-gap);\n font-weight: var(--navigationItem-fontWeight);\n text-decoration: none;\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n fill: var(--navigationItem-fill);\n top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base));\n padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n padding-right: var(--navigationItem-gap);\n margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n --link-color-visited: var(--navigationItem-color);\n --link-color-hover: var(--navigationItem-color);\n\n color: var(--navigationItem-color);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n --saltButton-background-hover: none;\n --saltButton-background-active: none;\n --saltButton-textTransform: none;\n --saltButton-width: 100%;\n --saltButton-letterSpacing: none;\n\n gap: var(--navigationItem-gap);\n /* Required to match link's outline offset */\n outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n --saltIcon-color: var(--navigationItem-fill);\n\n top: 0;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n border-right: var(--navigationItem-gap) solid transparent;\n border-left: var(--navigationItem-gap) solid transparent;\n margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--navigationItem-bar-size);\n top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--navigationItem-bar-size);\n left: var(--navigationItem-bar-inset);\n top: var(--navigationItem-bar-inset);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n background: var(--navigationItem-indicator-background);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=NavigationItem.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
var ExpansionIcon = require('./ExpansionIcon.js');
|
|
10
|
-
var ConditionalWrapper = require('./ConditionalWrapper.js');
|
|
11
|
-
var NavigationItem$1 = require('./NavigationItem.css.js');
|
|
12
|
-
var window = require('@salt-ds/window');
|
|
13
|
-
var styles = require('@salt-ds/styles');
|
|
14
|
-
|
|
15
|
-
const withBaseName = core.makePrefixer("saltNavigationItem");
|
|
16
|
-
const NavigationItem = React.forwardRef(
|
|
17
|
-
function NavigationItem2(props, ref) {
|
|
18
|
-
const {
|
|
19
|
-
active,
|
|
20
|
-
blurActive,
|
|
21
|
-
children,
|
|
22
|
-
className,
|
|
23
|
-
expanded = false,
|
|
24
|
-
orientation = "horizontal",
|
|
25
|
-
parent,
|
|
26
|
-
level = 0,
|
|
27
|
-
onExpand,
|
|
28
|
-
href,
|
|
29
|
-
style: styleProp,
|
|
30
|
-
...rest
|
|
31
|
-
} = props;
|
|
32
|
-
const targetWindow = window.useWindow();
|
|
33
|
-
styles.useComponentCssInjection({
|
|
34
|
-
testId: "salt-navigation-item",
|
|
35
|
-
css: NavigationItem$1,
|
|
36
|
-
window: targetWindow
|
|
37
|
-
});
|
|
38
|
-
const style = {
|
|
39
|
-
...styleProp,
|
|
40
|
-
"--saltNavigationItem-level": `${level}`
|
|
41
|
-
};
|
|
42
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
43
|
-
ref,
|
|
44
|
-
style,
|
|
45
|
-
className: clsx.clsx(withBaseName(), className),
|
|
46
|
-
...rest,
|
|
47
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(ConditionalWrapper.ConditionalWrapper, {
|
|
48
|
-
className: clsx.clsx(
|
|
49
|
-
withBaseName("wrapper"),
|
|
50
|
-
{
|
|
51
|
-
[withBaseName("active")]: active || blurActive,
|
|
52
|
-
[withBaseName("blurActive")]: blurActive && level !== 0,
|
|
53
|
-
[withBaseName("nested")]: level !== 0,
|
|
54
|
-
[withBaseName("rootItem")]: level === 0,
|
|
55
|
-
[withBaseName("expandButton")]: parent
|
|
56
|
-
},
|
|
57
|
-
withBaseName(orientation)
|
|
58
|
-
),
|
|
59
|
-
parent,
|
|
60
|
-
expanded,
|
|
61
|
-
onExpand,
|
|
62
|
-
active,
|
|
63
|
-
href,
|
|
64
|
-
children: [
|
|
65
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
66
|
-
className: withBaseName("label"),
|
|
67
|
-
children
|
|
68
|
-
}),
|
|
69
|
-
parent && /* @__PURE__ */ jsxRuntime.jsx(ExpansionIcon.ExpansionIcon, {
|
|
70
|
-
expanded,
|
|
71
|
-
orientation,
|
|
72
|
-
className: withBaseName("expandIcon")
|
|
73
|
-
})
|
|
74
|
-
]
|
|
75
|
-
})
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
);
|
|
79
|
-
|
|
80
|
-
exports.NavigationItem = NavigationItem;
|
|
81
|
-
//# sourceMappingURL=NavigationItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive && level !== 0,\n [withBaseName(\"nested\")]: level !== 0,\n [withBaseName(\"rootItem\")]: level === 0,\n [withBaseName(\"expandButton\")]: parent,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon\n expanded={expanded}\n orientation={orientation}\n className={withBaseName(\"expandIcon\")}\n />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","ConditionalWrapper","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAC,eAAA,CAAAC,qCAAA,EAAA;AAAA,QACC,SAAW,EAAAF,SAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAU,KAAA,CAAA;AAAA,YACtD,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACpC,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACtC,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,MAAA;AAAA,WAClC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAACD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACEA,cAAA,CAAAI,2BAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,WACtC,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltCompactInput {\n --saltInput-paddingLeft: 0;\n --saltInput-paddingRight: 0;\n}\n\n.saltCompactInput-defaultSize.saltInput {\n --saltInput-minWidth: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=CompactInput.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CompactInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var clsx = require('clsx');
|
|
7
|
-
var React = require('react');
|
|
8
|
-
var core = require('@salt-ds/core');
|
|
9
|
-
var usePaginationContext = require('./usePaginationContext.js');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var styles = require('@salt-ds/styles');
|
|
12
|
-
var CompactInput$1 = require('./CompactInput.css.js');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltCompactInput");
|
|
15
|
-
const CompactInput = React.forwardRef(function CompactInput2(props, ref) {
|
|
16
|
-
const targetWindow = window.useWindow();
|
|
17
|
-
styles.useComponentCssInjection({
|
|
18
|
-
testId: "salt-compact-input",
|
|
19
|
-
css: CompactInput$1,
|
|
20
|
-
window: targetWindow
|
|
21
|
-
});
|
|
22
|
-
const { count, page, onPageChange } = usePaginationContext.usePaginationContext();
|
|
23
|
-
const [inputValue, setInputValue] = React.useState(`${page}`);
|
|
24
|
-
React.useEffect(() => {
|
|
25
|
-
setInputValue(`${page}`);
|
|
26
|
-
}, [page]);
|
|
27
|
-
const handleChange = (event) => {
|
|
28
|
-
setInputValue(event.target.value);
|
|
29
|
-
};
|
|
30
|
-
const handleKeyDown = (event) => {
|
|
31
|
-
if (event.key === "Enter") {
|
|
32
|
-
const pageValue = Number(inputValue);
|
|
33
|
-
if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {
|
|
34
|
-
onPageChange(event, pageValue);
|
|
35
|
-
} else {
|
|
36
|
-
setInputValue(`${page}`);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
const handleBlur = () => {
|
|
41
|
-
setInputValue(`${page}`);
|
|
42
|
-
};
|
|
43
|
-
return /* @__PURE__ */ jsxRuntime.jsx(core.Input, {
|
|
44
|
-
className: clsx.clsx(withBaseName(), {
|
|
45
|
-
[withBaseName("defaultSize")]: count < 100
|
|
46
|
-
}),
|
|
47
|
-
inputProps: {
|
|
48
|
-
"aria-label": `Go to page, ${count} total`,
|
|
49
|
-
style: { width: `${`${count}`.length}ch` }
|
|
50
|
-
},
|
|
51
|
-
onBlur: handleBlur,
|
|
52
|
-
onChange: handleChange,
|
|
53
|
-
onKeyDown: handleKeyDown,
|
|
54
|
-
value: inputValue,
|
|
55
|
-
textAlign: "center",
|
|
56
|
-
ref,
|
|
57
|
-
...props
|
|
58
|
-
});
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
exports.CompactInput = CompactInput;
|
|
62
|
-
//# sourceMappingURL=CompactInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n KeyboardEventHandler,\n forwardRef,\n useEffect,\n useState,\n} from \"react\";\nimport { Input, InputProps, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactInputCss from \"./CompactInput.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactInput\");\n\nexport const CompactInput = forwardRef<\n HTMLInputElement,\n Pick<InputProps, \"inputRef\" | \"variant\">\n>(function CompactInput(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-input\",\n css: compactInputCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const [inputValue, setInputValue] = useState(`${page}`);\n\n useEffect(() => {\n setInputValue(`${page}`);\n }, [page]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n onPageChange(event, pageValue);\n } else {\n setInputValue(`${page}`);\n }\n }\n };\n\n const handleBlur = () => {\n setInputValue(`${page}`);\n };\n\n return (\n <Input\n className={clsx(withBaseName(), {\n [withBaseName(\"defaultSize\")]: count < 100,\n })}\n inputProps={{\n \"aria-label\": `Go to page, ${count} total`,\n style: { width: `${`${count}`.length}ch` },\n }}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n ref={ref}\n {...props}\n />\n );\n});\n"],"names":["makePrefixer","forwardRef","CompactInput","useWindow","useComponentCssInjection","compactInputCss","usePaginationContext","useState","useEffect","jsx","Input","clsx"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA,CAG1B,SAASC,aAAAA,CAAa,OAAO,GAAK,EAAA;AAClC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiBC,yCAAqB,EAAA,CAAA;AAE3D,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAC,cAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAA,IAAI,CAAC,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AAC5D,QAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,UAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,KACxC,CAAA;AAAA,IACD,UAAY,EAAA;AAAA,MACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,MAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,KAC3C;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,IACX,KAAO,EAAA,UAAA;AAAA,IACP,SAAW,EAAA,QAAA;AAAA,IACX,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltCompactPaginator {\n flex-wrap: nowrap;\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n}\n\n.saltCompactPaginator-arrowButton {\n --saltButton-width: var(--salt-size-base);\n --saltButton-height: var(--salt-size-base);\n --saltButton-padding: var(--salt-spacing-100);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=CompactPaginator.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CompactPaginator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|