@salt-ds/lab 1.0.0-alpha.49 → 1.0.0-alpha.50
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 +53 -1
- package/dist-cjs/app-header/AppHeader.js +2 -2
- package/dist-cjs/breadcrumbs/Breadcrumb.js +3 -3
- package/dist-cjs/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumbs.js +6 -10
- package/dist-cjs/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js +7 -7
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsContext.js +3 -3
- package/dist-cjs/breadcrumbs/internal/useFocusMenuRemount.js +4 -4
- package/dist-cjs/button-bar/ButtonBar.js +4 -4
- package/dist-cjs/button-bar/OrderedButton.js +3 -3
- package/dist-cjs/button-bar/internal/DescendantContext.js +4 -4
- package/dist-cjs/button-bar/internal/useDescendant.js +3 -3
- package/dist-cjs/button-bar/internal/useDescendants.js +2 -2
- package/dist-cjs/calendar/Calendar.js +4 -4
- package/dist-cjs/calendar/internal/CalendarCarousel.js +6 -6
- package/dist-cjs/calendar/internal/CalendarContext.js +3 -3
- package/dist-cjs/calendar/internal/CalendarDay.js +3 -3
- package/dist-cjs/calendar/internal/CalendarMonth.js +2 -2
- package/dist-cjs/calendar/internal/CalendarNavigation.js +2 -2
- package/dist-cjs/calendar/internal/CalendarWeekHeader.js +2 -2
- package/dist-cjs/calendar/useCalendar.js +9 -9
- package/dist-cjs/calendar/useCalendarDay.js +2 -2
- package/dist-cjs/carousel/Carousel.js +5 -5
- package/dist-cjs/carousel/CarouselSlide.js +3 -3
- package/dist-cjs/cascading-menu/CascadingMenu.js +18 -18
- package/dist-cjs/cascading-menu/CascadingMenuItem.js +5 -5
- package/dist-cjs/cascading-menu/CascadingMenuList.js +9 -9
- package/dist-cjs/cascading-menu/internal/useClickAway.js +2 -2
- package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js +3 -3
- package/dist-cjs/cascading-menu/internal/useMountedRef.js +3 -3
- package/dist-cjs/cascading-menu/internal/useMouseHandlers.js +7 -7
- package/dist-cjs/cascading-menu/internal/useRefsManager.js +7 -7
- package/dist-cjs/cascading-menu/internal/useStateReducer.js +2 -2
- package/dist-cjs/color-chooser/AlphaInputField.js +3 -3
- package/dist-cjs/color-chooser/AlphaInputField.js.map +1 -1
- package/dist-cjs/color-chooser/ColorChooser.js +3 -3
- package/dist-cjs/color-chooser/HexInput.js +3 -3
- package/dist-cjs/color-chooser/HexInput.js.map +1 -1
- package/dist-cjs/color-chooser/RGBAInputField.js +3 -3
- package/dist-cjs/color-chooser/RGBAInputField.js.map +1 -1
- package/dist-cjs/color-chooser/Swatches.js.map +1 -1
- package/dist-cjs/color-chooser/SwatchesPicker.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +3 -3
- package/dist-cjs/combo-box/useCombobox.js +25 -25
- package/dist-cjs/combo-box-deprecated/ComboBoxDeprecated.js +3 -3
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js +12 -12
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js +12 -12
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useComboBox.js +11 -11
- package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js +12 -12
- package/dist-cjs/combo-box-deprecated/internal/usePopperStatus.js +2 -2
- package/dist-cjs/common-hooks/collectionProvider.js +4 -4
- package/dist-cjs/common-hooks/keyUtils.js.map +1 -1
- package/dist-cjs/common-hooks/selectionTypes.js.map +1 -1
- package/dist-cjs/common-hooks/useAutoSizer.js +3 -3
- package/dist-cjs/common-hooks/useCollapsibleGroups.js +3 -3
- package/dist-cjs/common-hooks/useCollectionItems.js +24 -24
- package/dist-cjs/common-hooks/useImperativeScrollingAPI.js +3 -3
- package/dist-cjs/common-hooks/useKeyboardNavigation.js +13 -13
- package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js +10 -10
- package/dist-cjs/common-hooks/useSelection.js +13 -13
- package/dist-cjs/common-hooks/useTypeahead.js +6 -6
- package/dist-cjs/common-hooks/useTypeahead.js.map +1 -1
- package/dist-cjs/common-hooks/useViewportTracking.js +9 -9
- package/dist-cjs/common-hooks/utils/collection-item-utils.js +5 -5
- package/dist-cjs/contact-details/ContactAction.js +2 -2
- package/dist-cjs/contact-details/ContactActions.js +2 -2
- package/dist-cjs/contact-details/ContactAvatar.js +3 -3
- package/dist-cjs/contact-details/ContactDetails.js +9 -9
- package/dist-cjs/contact-details/ContactFavoriteToggle.js +2 -2
- package/dist-cjs/contact-details/ContactMetadata.js +3 -3
- package/dist-cjs/contact-details/ContactMetadataItem.js +2 -2
- package/dist-cjs/contact-details/ContactPrimaryInfo.js +3 -3
- package/dist-cjs/contact-details/ContactSecondaryInfo.js +3 -3
- package/dist-cjs/contact-details/ContactTertiaryInfo.js +3 -3
- package/dist-cjs/contact-details/internal/ContactDetailsContext.js +3 -3
- package/dist-cjs/contact-details/internal/FavoriteToggle.js +5 -5
- package/dist-cjs/contact-details/internal/FavoriteToggle.js.map +1 -1
- package/dist-cjs/contact-details/internal/FavoriteToggleWithTooltip.js +2 -2
- package/dist-cjs/contact-details/internal/StarIcon.js +2 -2
- package/dist-cjs/contact-details/internal/StarIconContainer.js +2 -2
- package/dist-cjs/contact-details/internal/useComponentSize.js +4 -4
- package/dist-cjs/content-status/ContentStatus.js +3 -3
- package/dist-cjs/date-input/DateInput.js +7 -7
- package/dist-cjs/date-picker/DatePicker.js +11 -11
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerContext.js +2 -2
- package/dist-cjs/date-picker/DatePickerPanel.js +4 -4
- package/dist-cjs/deck-item/DeckItem.js +4 -4
- package/dist-cjs/deck-layout/DeckLayout.js +5 -5
- package/dist-cjs/dropdown/Dropdown.js +5 -5
- package/dist-cjs/dropdown/DropdownBase.js +11 -11
- package/dist-cjs/dropdown/DropdownBase.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js +2 -2
- package/dist-cjs/dropdown/useClickAway.js +2 -2
- package/dist-cjs/dropdown/useDropdown.js +5 -5
- package/dist-cjs/dropdown/useDropdownBase.js +11 -11
- package/dist-cjs/editable-label/EditableLabel.js +5 -5
- package/dist-cjs/form-field-context-legacy/useFormFieldLegacyProps.js +2 -2
- package/dist-cjs/form-field-legacy/FormFieldLegacy.js +5 -5
- package/dist-cjs/form-field-legacy/FormHelperText.js.map +1 -1
- package/dist-cjs/form-group/FormGroup.js +2 -2
- package/dist-cjs/formatted-input/FormattedInput.js +2 -2
- package/dist-cjs/formatted-input/internal/InputWithMask.js +2 -2
- package/dist-cjs/index.js +6 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input-legacy/InputLegacy.js +4 -4
- package/dist-cjs/input-legacy/StaticInputAdornment.js +2 -2
- package/dist-cjs/input-legacy/useCursorOnFocus.js +9 -9
- package/dist-cjs/layer-layout/LayerLayout.js +5 -5
- package/dist-cjs/list/List.js +8 -8
- package/dist-cjs/list/ListItem.js +3 -3
- package/dist-cjs/list/VirtualizedList.js +4 -4
- package/dist-cjs/list/useList.js +9 -9
- package/dist-cjs/list/useListHeight.js +4 -4
- package/dist-cjs/list/useVirtualization.js +6 -6
- package/dist-cjs/list-deprecated/List.js +5 -5
- package/dist-cjs/list-deprecated/ListBase.js +13 -13
- package/dist-cjs/list-deprecated/ListItem.js +2 -2
- package/dist-cjs/list-deprecated/ListItemBase.js +4 -4
- package/dist-cjs/list-deprecated/ListItemContext.js +3 -3
- package/dist-cjs/list-deprecated/ListStateContext.js +3 -3
- package/dist-cjs/list-deprecated/internal/DescendantContext.js +6 -6
- package/dist-cjs/list-deprecated/internal/useListAutoSizer.js +4 -4
- package/dist-cjs/list-deprecated/internal/useWidth.js +4 -4
- package/dist-cjs/list-deprecated/useList.js +17 -17
- package/dist-cjs/list-deprecated/useListItem.js +5 -5
- package/dist-cjs/list-deprecated/useTypeSelect.js +3 -3
- package/dist-cjs/list-next/ListItemNext.js +2 -2
- package/dist-cjs/list-next/ListNext.js +3 -3
- package/dist-cjs/list-next/ListNextContext.js +2 -2
- package/dist-cjs/list-next/useList.js +14 -14
- package/dist-cjs/logo/Logo.js +2 -2
- package/dist-cjs/logo/LogoImage.js +2 -2
- package/dist-cjs/logo/LogoSeparator.js +2 -2
- package/dist-cjs/menu-button/MenuButton.js +5 -5
- package/dist-cjs/menu-button/MenuButtonTrigger.js +2 -2
- package/dist-cjs/metric/Metric.js +3 -3
- package/dist-cjs/metric/MetricContent.js +2 -2
- package/dist-cjs/metric/MetricHeader.js +3 -3
- package/dist-cjs/metric/internal/MetricContext.js +3 -3
- package/dist-cjs/portal/Portal.js +6 -6
- package/dist-cjs/query-input/QueryInput.js +2 -2
- package/dist-cjs/query-input/internal/CategoryList.js +5 -5
- package/dist-cjs/query-input/internal/CategoryListContext.js +3 -3
- package/dist-cjs/query-input/internal/CategoryListItem.js +3 -3
- package/dist-cjs/query-input/internal/QueryInputBody.js +3 -3
- package/dist-cjs/query-input/internal/SearchList.js +2 -2
- package/dist-cjs/query-input/internal/ValueSelector.js +2 -2
- package/dist-cjs/query-input/internal/usePopperStatus.js +2 -2
- package/dist-cjs/query-input/useQueryInput.js +13 -13
- package/dist-cjs/responsive/OverflowReducer.js +3 -7
- package/dist-cjs/responsive/OverflowReducer.js.map +1 -1
- package/dist-cjs/responsive/useDynamicCollapse.js +7 -7
- package/dist-cjs/responsive/useInstantCollapse.js +7 -7
- package/dist-cjs/responsive/useOverflow.js +11 -11
- package/dist-cjs/responsive/useOverflowCollectionItems.js +12 -12
- package/dist-cjs/responsive/useOverflowLayout.js +8 -8
- package/dist-cjs/responsive/useReclaimSpace.js +3 -3
- package/dist-cjs/responsive/useResizeObserver.js +3 -3
- package/dist-cjs/responsive/useWidth.js +4 -4
- package/dist-cjs/search-input/SearchInput.js +3 -3
- package/dist-cjs/skip-link/SkipLink.js +2 -2
- package/dist-cjs/skip-link/SkipLinks.js +2 -2
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +6 -6
- package/dist-cjs/slider/Slider.js +5 -5
- package/dist-cjs/slider/internal/SliderMarkLabels.js +3 -3
- package/dist-cjs/slider/internal/SliderRailMarks.js +3 -3
- package/dist-cjs/slider/internal/useSliderKeyDown.js.map +1 -1
- package/dist-cjs/slider/internal/useSliderMouseDown.js +6 -6
- package/dist-cjs/slider/internal/utils.js +2 -2
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js +2 -2
- package/dist-cjs/stepped-tracker/SteppedTracker.js +7 -7
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js +6 -6
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +3 -3
- package/dist-cjs/stepper-input/StepperInput.js +3 -3
- package/dist-cjs/stepper-input/internal/useInterval.js +4 -4
- package/dist-cjs/stepper-input/internal/useSpinner.js +4 -4
- package/dist-cjs/system-status/SystemStatus.css.js +6 -0
- package/dist-cjs/system-status/SystemStatus.css.js.map +1 -0
- package/dist-cjs/system-status/SystemStatus.js +39 -0
- package/dist-cjs/system-status/SystemStatus.js.map +1 -0
- package/dist-cjs/system-status/SystemStatusActions.css.js +6 -0
- package/dist-cjs/system-status/SystemStatusActions.css.js.map +1 -0
- package/dist-cjs/system-status/SystemStatusActions.js +30 -0
- package/dist-cjs/system-status/SystemStatusActions.js.map +1 -0
- package/dist-cjs/system-status/SystemStatusContent.css.js +6 -0
- package/dist-cjs/system-status/SystemStatusContent.css.js.map +1 -0
- package/dist-cjs/system-status/SystemStatusContent.js +30 -0
- package/dist-cjs/system-status/SystemStatusContent.js.map +1 -0
- package/dist-cjs/tabs/Tab.js +6 -6
- package/dist-cjs/tabs/TabActivationIndicator.js +2 -2
- package/dist-cjs/tabs/TabPanel.js +2 -2
- package/dist-cjs/tabs/Tabs.js +5 -5
- package/dist-cjs/tabs/Tabstrip.js +26 -30
- package/dist-cjs/tabs/Tabstrip.js.map +1 -1
- package/dist-cjs/tabs/drag-drop/Draggable.js +3 -3
- package/dist-cjs/tabs/drag-drop/useDragDropNaturalMovement.js +20 -20
- package/dist-cjs/tabs/drag-drop/useDragSpacers.js +9 -9
- package/dist-cjs/tabs/useActivationIndicator.js +7 -7
- package/dist-cjs/tabs/useEditableItem.js +3 -3
- package/dist-cjs/tabs/useItemsWithIds.js +6 -6
- package/dist-cjs/tabs/useKeyboardNavigation.js +12 -12
- package/dist-cjs/tabs/useKeyboardNavigation.js.map +1 -1
- package/dist-cjs/tabs/useSelection.js +5 -5
- package/dist-cjs/tabs/useTabs.js +2 -2
- package/dist-cjs/tabs/useTabstrip.js +12 -12
- package/dist-cjs/tabs-next/OverflowMenu.js +2 -2
- package/dist-cjs/tabs-next/TabNext.js +3 -3
- package/dist-cjs/tabs-next/TabNextContext.js +2 -2
- package/dist-cjs/tabs-next/TabstripNext.js +13 -13
- package/dist-cjs/toast-group/ToastGroup.js +2 -2
- package/dist-cjs/tokenized-input/TokenizedInput.js +2 -2
- package/dist-cjs/tokenized-input/TokenizedInputBase.js +9 -9
- package/dist-cjs/tokenized-input/internal/InputPill.js +3 -3
- package/dist-cjs/tokenized-input/internal/InputRuler.js +2 -2
- package/dist-cjs/tokenized-input/internal/useResizeObserver.js +3 -3
- package/dist-cjs/tokenized-input/internal/useWidth.js +3 -3
- package/dist-cjs/tokenized-input/useTokenizedInput.js +16 -16
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +3 -3
- package/dist-cjs/tokenized-input-next/internal/InputPill.js +4 -4
- package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js +3 -3
- package/dist-cjs/tokenized-input-next/internal/useWidth.js +3 -3
- package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js +15 -15
- package/dist-cjs/toolbar/Toolbar.js +6 -6
- package/dist-cjs/toolbar/ToolbarButton.js +2 -2
- package/dist-cjs/toolbar/Tooltray.js +2 -2
- package/dist-cjs/toolbar/internal/renderToolbarItems.js +5 -9
- package/dist-cjs/toolbar/internal/renderToolbarItems.js.map +1 -1
- package/dist-cjs/toolbar/internal/renderTrayTools.js +6 -10
- package/dist-cjs/toolbar/internal/renderTrayTools.js.map +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +7 -14
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-cjs/toolbar/toolbar-field/ToolbarField.js +2 -2
- package/dist-cjs/toolbar/toolbar-field/useToolbarField.js +5 -5
- package/dist-cjs/tree/Tree.js +8 -8
- package/dist-cjs/tree/use-tree-keyboard-navigation.js +2 -2
- package/dist-cjs/tree/useTree.js +5 -5
- package/dist-cjs/utils/useClickOutside.js +3 -3
- package/dist-cjs/utils/useEventCallback.js +3 -3
- package/dist-cjs/utils/useLayoutEffectOnce.js +2 -2
- package/dist-cjs/utils/useLayoutEffectSkipFirst.js +2 -2
- package/dist-cjs/utils/useOverflowDetection.js +4 -4
- package/dist-cjs/utils/useSlideSelection.js +3 -3
- package/dist-cjs/window/ElectronWindow.js +7 -7
- package/dist-cjs/window/WindowContext.js +4 -4
- package/dist-cjs/window/desktop-utils.js +3 -3
- package/dist-es/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-es/breadcrumbs/Breadcrumbs.js +4 -4
- package/dist-es/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist-es/color-chooser/AlphaInputField.js.map +1 -1
- package/dist-es/color-chooser/HexInput.js.map +1 -1
- package/dist-es/color-chooser/RGBAInputField.js.map +1 -1
- package/dist-es/color-chooser/Swatches.js.map +1 -1
- package/dist-es/color-chooser/SwatchesPicker.js.map +1 -1
- package/dist-es/common-hooks/keyUtils.js.map +1 -1
- package/dist-es/common-hooks/selectionTypes.js.map +1 -1
- package/dist-es/common-hooks/useTypeahead.js.map +1 -1
- package/dist-es/contact-details/internal/FavoriteToggle.js.map +1 -1
- package/dist-es/form-field-legacy/FormHelperText.js.map +1 -1
- package/dist-es/index.js +3 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/responsive/OverflowReducer.js +2 -2
- package/dist-es/responsive/OverflowReducer.js.map +1 -1
- package/dist-es/slider/internal/useSliderKeyDown.js.map +1 -1
- package/dist-es/system-status/SystemStatus.css.js +4 -0
- package/dist-es/system-status/SystemStatus.css.js.map +1 -0
- package/dist-es/system-status/SystemStatus.js +35 -0
- package/dist-es/system-status/SystemStatus.js.map +1 -0
- package/dist-es/system-status/SystemStatusActions.css.js +4 -0
- package/dist-es/system-status/SystemStatusActions.css.js.map +1 -0
- package/dist-es/system-status/SystemStatusActions.js +26 -0
- package/dist-es/system-status/SystemStatusActions.js.map +1 -0
- package/dist-es/system-status/SystemStatusContent.css.js +4 -0
- package/dist-es/system-status/SystemStatusContent.css.js.map +1 -0
- package/dist-es/system-status/SystemStatusContent.js +26 -0
- package/dist-es/system-status/SystemStatusContent.js.map +1 -0
- package/dist-es/tabs/Tabstrip.js +10 -10
- package/dist-es/tabs/Tabstrip.js.map +1 -1
- package/dist-es/tabs/useKeyboardNavigation.js.map +1 -1
- package/dist-es/toolbar/internal/renderToolbarItems.js +5 -5
- package/dist-es/toolbar/internal/renderToolbarItems.js.map +1 -1
- package/dist-es/toolbar/internal/renderTrayTools.js +4 -4
- package/dist-es/toolbar/internal/renderTrayTools.js.map +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js +2 -5
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-types/breadcrumbs/Breadcrumb.d.ts +2 -2
- package/dist-types/breadcrumbs/Breadcrumbs.d.ts +2 -2
- package/dist-types/color-chooser/HexInput.d.ts +2 -1
- package/dist-types/color-chooser/HexInputField.d.ts +2 -1
- package/dist-types/color-chooser/RGBAInputField.d.ts +2 -1
- package/dist-types/color-chooser/Swatches.d.ts +2 -1
- package/dist-types/color-chooser/SwatchesPicker.d.ts +2 -1
- package/dist-types/common-hooks/keyUtils.d.ts +3 -3
- package/dist-types/common-hooks/selectionTypes.d.ts +5 -5
- package/dist-types/common-hooks/useTypeahead.d.ts +2 -1
- package/dist-types/contact-details/internal/FavoriteToggle.d.ts +3 -4
- package/dist-types/form-field-legacy/FormHelperText.d.ts +3 -3
- package/dist-types/index.d.ts +1 -0
- package/dist-types/list/listTypes.d.ts +3 -4
- package/dist-types/slider/internal/useSliderKeyDown.d.ts +2 -1
- package/dist-types/system-status/SystemStatus.d.ts +9 -0
- package/dist-types/system-status/SystemStatusActions.d.ts +9 -0
- package/dist-types/system-status/SystemStatusContent.d.ts +9 -0
- package/dist-types/system-status/index.d.ts +3 -0
- package/dist-types/tabs/Tabstrip.d.ts +1 -2
- package/dist-types/toolbar/overflow-panel/OverflowPanel.d.ts +1 -2
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabstrip.js","sources":["../src/tabs/Tabstrip.tsx"],"sourcesContent":["import {\n Button,\n Tooltip,\n makePrefixer,\n useIdMemo,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { AddIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport type { SelectionChangeHandler } from \"../common-hooks\";\n\nimport { Dropdown } from \"../dropdown\";\nimport {\n type InjectedSourceItem,\n type OverflowItem,\n useOverflowLayout,\n} from \"../responsive\";\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { Tab } from \"./Tab\";\nimport { TabActivationIndicator } from \"./TabActivationIndicator\";\nimport type {\n FocusAPI,\n TabDescriptor,\n TabElement,\n TabProps,\n TabsSource,\n TabstripProps,\n responsiveDataAttributes,\n} from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabstripCss from \"./Tabstrip.css\";\nimport themeTabstripCss from \"./ThemeTabstrip.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstrip\");\n\nconst ADD_TAB_LABEL = \"Create Tab\";\n\n// Simple strings for tab labels are accepted as input, convert to TabDescriptors internally\nconst tabDescriptors = (\n tabs: TabsSource | undefined,\n): TabDescriptor[] | undefined =>\n tabs?.map((tab: string | TabDescriptor) =>\n typeof tab === \"string\" ? { label: tab } : tab,\n );\n\nexport const Tabstrip = forwardRef(function Tabstrip(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop = false,\n centered = false,\n children,\n className: classNameProp,\n defaultSource,\n defaultActiveTabIndex,\n editing,\n variant,\n enableAddTab = false,\n enableCloseTab,\n enableRenameTab,\n id: idProp,\n keyBoardActivation = \"manual\",\n onAddTab,\n onActiveChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMouseDown,\n onMoveTab,\n orientation = \"horizontal\",\n overflowMenu: overflowMenuProp = true,\n promptForNewTabName = true,\n showActivationIndicator = true,\n source,\n title,\n ...htmlAttributes\n }: TabstripProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-strip\",\n css: tabstripCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"salt-theme-tab-strip\",\n css: themeTabstripCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n // can't use forwardedRef here, can we ?\n // const setForkRef = useForkRef(root, forwardedRef);\n const activeRef = useRef<number | null>(\n activeTabIndexProp || defaultActiveTabIndex || 0,\n );\n\n const overflowItemsRef = useRef<OverflowItem[]>([]);\n const [showOverflowMenu, _setShowOverflowMenu] = useState(false);\n\n const setShowOverflowMenu = useCallback((value: boolean) => {\n _setShowOverflowMenu(value);\n }, []);\n\n const tabstripId = useIdMemo(idProp);\n\n const injectedItems = enableAddTab\n ? [\n {\n source: { label: \"Add Tab\", position: -1, priority: 1 },\n } as InjectedSourceItem,\n ]\n : undefined;\n\n const collectionHook = useOverflowCollectionItems({\n children,\n defaultSource: tabDescriptors(defaultSource),\n id: tabstripId,\n injectedItems,\n label: \"Tabstrip\",\n orientation,\n source: tabDescriptors(source),\n options: {\n closeable: enableCloseTab,\n editable: enableRenameTab,\n getPriority: (item, index) => {\n return index === activeRef.current ? 1 : undefined;\n },\n },\n });\n\n const childCount = useRef(React.Children.count(children));\n\n const getChildren = (): TabElement[] | undefined => {\n if (React.Children.count(children) === 0) {\n return undefined;\n }\n return React.Children.toArray(children) as TabElement[];\n };\n\n const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout({\n collectionHook,\n disableOverflow: overflowMenuProp === false,\n id: tabstripId,\n orientation,\n label: \"Tabstrip\",\n });\n overflowItemsRef.current = collectionHook.data;\n const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n const tabMovedHandler = useCallback(\n (fromIndex: number, toIndex: number) => {\n onMoveTab?.(fromIndex, toIndex);\n setTimeout(() => {\n collectionHook.dispatch({\n type: \"reset\",\n });\n }, 50);\n },\n [collectionHook, onMoveTab],\n );\n\n const handleTabSelectionChange = useCallback(\n (tabIndex: number) => {\n const selectedItem = collectionHook.data[tabIndex];\n const prevSelectedItem = collectionHook.data.find(\n (item) => item.priority === 1 && !item.isOverflowIndicator,\n );\n if (selectedItem && prevSelectedItem && overflowMenuProp) {\n switchOverflowPriorities(selectedItem, prevSelectedItem);\n }\n onActiveChange?.(tabIndex);\n setShowOverflowMenu(false);\n },\n [\n collectionHook.data,\n onActiveChange,\n overflowMenuProp,\n setShowOverflowMenu,\n switchOverflowPriorities,\n ],\n );\n\n const {\n activeTabIndex,\n activateTab,\n addTab,\n onMouseDown: tabstripHookMouseDown,\n ...tabstripHook\n } = useTabstrip({\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n collectionHook,\n defaultTabs: tabDescriptors(defaultSource),\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n idRoot: tabstripId,\n innerContainerRef,\n keyBoardActivation,\n onActiveChange: handleTabSelectionChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab: tabMovedHandler,\n orientation,\n promptForNewTabName,\n tabs: tabDescriptors(source) ?? getChildren(),\n });\n\n activeRef.current = activeTabIndex;\n\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => {\n const { current: tabstrip } = root;\n if (tabstrip) {\n const selectedTab = tabstrip.querySelector(\n '.saltTab[aria-selected=\"true\"]',\n ) as HTMLElement;\n if (selectedTab) {\n selectedTab.focus();\n }\n }\n },\n }) as FocusAPI,\n [],\n );\n\n const handleAddTabClick = useCallback(() => {\n if (!collectionHook.isControlled) {\n addTab();\n }\n onAddTab?.();\n }, [collectionHook.isControlled, onAddTab, addTab]);\n\n const selectedIndex = useRef(activeTabIndex);\n const focusedTabIndex = tabstripHook.highlightedIdx;\n const handleOverflowSelectionChange: SelectionChangeHandler<OverflowItem> =\n useCallback(\n (e, tab) => {\n if (tab !== null) {\n activateTab(tab.index);\n }\n },\n [activateTab],\n );\n\n const handleKeydownOverflowMenu = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n tabstripHook.navigationProps?.onKeyDown?.(e);\n },\n [tabstripHook.navigationProps],\n );\n\n const handleOverflowMenuOpen = useCallback(\n (open: boolean) => {\n setShowOverflowMenu(open);\n },\n [setShowOverflowMenu],\n );\n\n const handleMouseDown = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(evt);\n tabstripHookMouseDown?.(evt);\n },\n [onMouseDown, tabstripHookMouseDown],\n );\n\n // shouldn't we use ref for this ?\n useIsomorphicLayoutEffect(() => {\n // We don't care about changes to overflowedItems here, the overflowObserver\n // always does the right thing. We only care about changes to selected tab\n if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {\n // We might want to do this only if the selected tab is overflowed ?\n // TODO\n // resetOverflow();\n selectedIndex.current = activeTabIndex;\n }\n }, [overflowMenuProp, activeTabIndex]);\n\n useIsomorphicLayoutEffect(() => {\n if (React.Children.count(children) !== childCount.current) {\n childCount.current = React.Children.count(children);\n // TODO\n // resetOverflow();\n }\n }, [children]);\n\n /*\n * biome-ignore lint/correctness/useExhaustiveDependencies: We only want the effect to run when value changes, not every time focusedTabIndex changes.\n * It doesn't matter if focusedTabIndex is stale in between calls - it will be correct when value changes.\n */\n useIsomorphicLayoutEffect(() => {\n if (\n activeTabIndex !== null &&\n focusedTabIndex !== activeTabIndex &&\n focusedTabIndex !== -1\n ) {\n tabstripHook.focusTab(activeTabIndex);\n }\n }, [activeTabIndex]);\n\n const renderContent = () => {\n const content = collectionHook.data\n .filter((item) => !item.isOverflowIndicator && !item.isInjectedItem)\n .map((item: OverflowItem, index: number) => {\n // TODO sort out typoing\n const tab = item.source as unknown as TabDescriptor;\n const element = item.element as TabElement;\n\n const selected = index === activeTabIndex;\n const focusVisible = tabstripHook.focusVisible === index;\n const overflowed =\n overflowedItems.findIndex(\n (item: OverflowItem) => item.index === index,\n ) !== -1;\n\n const tabIsBeingEdited = tabstripHook.editing && selected;\n const tabIndex = tabIsBeingEdited\n ? undefined\n : selected && !tabstripHook.focusIsWithinComponent\n ? 0\n : -1;\n\n const baseProps: Partial<TabProps> &\n responsiveDataAttributes & {\n ref?: RefObject<HTMLDivElement>;\n key: string | number;\n } = {\n \"data-index\": index,\n \"data-priority\": item.priority,\n \"data-overflowed\": overflowed ? true : undefined,\n ...tabstripHook.navigationProps,\n id: item.id,\n key: index,\n onMouseDown: handleMouseDown,\n tabIndex,\n };\n\n const tabProps = {\n ...tabstripHook.tabProps,\n closeable: item.closeable,\n dragging: tabstripHook.draggedItemIndex === index,\n editable: item.editable,\n editing: tabIsBeingEdited,\n focusVisible,\n index,\n onClose: item.closeable ? tabstripHook.closeTab : undefined,\n orientation,\n selected,\n } as Partial<TabProps>;\n\n if (React.isValidElement(element)) {\n if (element.type === Tab) {\n return React.cloneElement(element, { ...baseProps, ...tabProps });\n }\n return React.cloneElement(element, baseProps);\n }\n //@ts-ignore tab can only be a TabDescriptor here, but TypeScript seems to think it can be a number\n return React.createElement(Tab, {\n ...baseProps,\n ...tabProps,\n label: tab.label,\n });\n });\n\n const overflowCount = overflowedItems.length;\n const draggingActiveTab = tabstripHook.draggedItemIndex === activeTabIndex;\n const showOverflow =\n (tabstripHook.revealOverflowedItems && !draggingActiveTab) ||\n showOverflowMenu;\n const showTooltip = tabstripHook.revealOverflowedItems && draggingActiveTab;\n const overflowIndicator = collectionHook.data.find(\n (i) => i.isOverflowIndicator,\n );\n const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);\n\n if (overflowIndicator) {\n content.push(\n <Tooltip\n content=\"Active Tab cannot be moved into overflow list\"\n open\n disabled={!showTooltip}\n status=\"warning\"\n key=\"tooltip\"\n hideArrow\n >\n <Dropdown<OverflowItem>\n className={clsx(withBaseName(\"overflowMenu\"), {\n [withBaseName(\"overflowMenu-open\")]: showOverflow,\n })}\n ListProps={{\n className: clsx({\n [withBaseName(\"overflowMenu-dropTarget\")]:\n tabstripHook.revealOverflowedItems,\n }),\n }}\n data-overflow-indicator\n data-priority={0}\n id={overflowIndicator.id}\n isOpen={showOverflow}\n key=\"overflow\"\n onOpenChange={handleOverflowMenuOpen}\n onKeyDown={handleKeydownOverflowMenu}\n onSelectionChange={handleOverflowSelectionChange}\n placement=\"bottom-end\"\n source={overflowedItems}\n selected={null}\n triggerComponent={\n <Button\n aria-label={`Tabs overflow menu ${overflowCount} item${\n overflowCount === 1 ? \"\" : \"s\"\n }`}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <OverflowMenuIcon />\n </Button>\n }\n width=\"auto\"\n />\n </Tooltip>,\n );\n }\n\n if (injectedItem) {\n content.push(\n <Button\n {...tabstripHook.navigationProps}\n aria-label={ADD_TAB_LABEL}\n data-priority={injectedItem.priority}\n data-overflowed={injectedItem.overflowed}\n id={injectedItem.id}\n key=\"addButton\"\n onClick={handleAddTabClick}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <AddIcon />\n </Button>,\n );\n }\n\n return content;\n };\n\n const selectedTabOverflowed = overflowedItems.some(\n (item: OverflowItem) => item.index === activeTabIndex,\n );\n const className = clsx(\n withBaseName(),\n withBaseName(orientation),\n classNameProp,\n {\n [withBaseName(\"centered\")]: centered,\n [withBaseName(\"draggingTab\")]: tabstripHook.isDragging,\n [withBaseName(\"tertiary\")]: variant === \"tertiary\",\n },\n );\n\n const selectedTabId =\n activeTabIndex !== null ? collectionHook.data[activeTabIndex].id : null;\n\n return (\n <div\n {...htmlAttributes}\n {...tabstripHook.containerProps}\n className={className}\n id={tabstripId}\n ref={root}\n role=\"tablist\"\n >\n <div className={withBaseName(\"inner\")} ref={innerContainerRef}>\n {renderContent()}\n </div>\n {showActivationIndicator ? (\n <TabActivationIndicator\n hideThumb={selectedTabOverflowed || tabstripHook.isDragging}\n orientation={orientation}\n tabId={selectedTabId}\n />\n ) : null}\n {tabstripHook.draggable}\n </div>\n );\n});\n\nTabstrip.displayName = \"Tabstrip\";\n"],"names":["makePrefixer","forwardRef","Tabstrip","useWindow","useComponentCssInjection","tabstripCss","themeTabstripCss","useRef","useState","useCallback","useIdMemo","useOverflowCollectionItems","React","useOverflowLayout","useTabstrip","useImperativeHandle","_a","useIsomorphicLayoutEffect","item","Tab","jsx","Tooltip","Dropdown","clsx","Button","OverflowMenuIcon","createElement","AddIcon","jsxs","TabActivationIndicator"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabstrip.js","sources":["../src/tabs/Tabstrip.tsx"],"sourcesContent":["import {\n Button,\n Tooltip,\n makePrefixer,\n useIdMemo,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { AddIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n cloneElement,\n createElement,\n forwardRef,\n isValidElement,\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport type { SelectionChangeHandler } from \"../common-hooks\";\n\nimport { Dropdown } from \"../dropdown\";\nimport {\n type InjectedSourceItem,\n type OverflowItem,\n useOverflowLayout,\n} from \"../responsive\";\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { Tab } from \"./Tab\";\nimport { TabActivationIndicator } from \"./TabActivationIndicator\";\nimport type {\n FocusAPI,\n TabDescriptor,\n TabElement,\n TabProps,\n TabsSource,\n TabstripProps,\n responsiveDataAttributes,\n} from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabstripCss from \"./Tabstrip.css\";\nimport themeTabstripCss from \"./ThemeTabstrip.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstrip\");\n\nconst ADD_TAB_LABEL = \"Create Tab\";\n\n// Simple strings for tab labels are accepted as input, convert to TabDescriptors internally\nconst tabDescriptors = (\n tabs: TabsSource | undefined,\n): TabDescriptor[] | undefined =>\n tabs?.map((tab: string | TabDescriptor) =>\n typeof tab === \"string\" ? { label: tab } : tab,\n );\n\nexport const Tabstrip = forwardRef(function Tabstrip(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop = false,\n centered = false,\n children,\n className: classNameProp,\n defaultSource,\n defaultActiveTabIndex,\n editing,\n variant,\n enableAddTab = false,\n enableCloseTab,\n enableRenameTab,\n id: idProp,\n keyBoardActivation = \"manual\",\n onAddTab,\n onActiveChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMouseDown,\n onMoveTab,\n orientation = \"horizontal\",\n overflowMenu: overflowMenuProp = true,\n promptForNewTabName = true,\n showActivationIndicator = true,\n source,\n title,\n ...htmlAttributes\n }: TabstripProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-strip\",\n css: tabstripCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"salt-theme-tab-strip\",\n css: themeTabstripCss,\n window: targetWindow,\n });\n\n const root = useRef<HTMLDivElement>(null);\n // can't use forwardedRef here, can we ?\n // const setForkRef = useForkRef(root, forwardedRef);\n const activeRef = useRef<number | null>(\n activeTabIndexProp || defaultActiveTabIndex || 0,\n );\n\n const overflowItemsRef = useRef<OverflowItem[]>([]);\n const [showOverflowMenu, _setShowOverflowMenu] = useState(false);\n\n const setShowOverflowMenu = useCallback((value: boolean) => {\n _setShowOverflowMenu(value);\n }, []);\n\n const tabstripId = useIdMemo(idProp);\n\n const injectedItems = enableAddTab\n ? [\n {\n source: { label: \"Add Tab\", position: -1, priority: 1 },\n } as InjectedSourceItem,\n ]\n : undefined;\n\n const collectionHook = useOverflowCollectionItems({\n children,\n defaultSource: tabDescriptors(defaultSource),\n id: tabstripId,\n injectedItems,\n label: \"Tabstrip\",\n orientation,\n source: tabDescriptors(source),\n options: {\n closeable: enableCloseTab,\n editable: enableRenameTab,\n getPriority: (item, index) => {\n return index === activeRef.current ? 1 : undefined;\n },\n },\n });\n\n const childCount = useRef(Children.count(children));\n\n const getChildren = (): TabElement[] | undefined => {\n if (Children.count(children) === 0) {\n return undefined;\n }\n return Children.toArray(children) as TabElement[];\n };\n\n const [innerContainerRef, switchOverflowPriorities] = useOverflowLayout({\n collectionHook,\n disableOverflow: overflowMenuProp === false,\n id: tabstripId,\n orientation,\n label: \"Tabstrip\",\n });\n overflowItemsRef.current = collectionHook.data;\n const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n const tabMovedHandler = useCallback(\n (fromIndex: number, toIndex: number) => {\n onMoveTab?.(fromIndex, toIndex);\n setTimeout(() => {\n collectionHook.dispatch({\n type: \"reset\",\n });\n }, 50);\n },\n [collectionHook, onMoveTab],\n );\n\n const handleTabSelectionChange = useCallback(\n (tabIndex: number) => {\n const selectedItem = collectionHook.data[tabIndex];\n const prevSelectedItem = collectionHook.data.find(\n (item) => item.priority === 1 && !item.isOverflowIndicator,\n );\n if (selectedItem && prevSelectedItem && overflowMenuProp) {\n switchOverflowPriorities(selectedItem, prevSelectedItem);\n }\n onActiveChange?.(tabIndex);\n setShowOverflowMenu(false);\n },\n [\n collectionHook.data,\n onActiveChange,\n overflowMenuProp,\n setShowOverflowMenu,\n switchOverflowPriorities,\n ],\n );\n\n const {\n activeTabIndex,\n activateTab,\n addTab,\n onMouseDown: tabstripHookMouseDown,\n ...tabstripHook\n } = useTabstrip({\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n collectionHook,\n defaultTabs: tabDescriptors(defaultSource),\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n idRoot: tabstripId,\n innerContainerRef,\n keyBoardActivation,\n onActiveChange: handleTabSelectionChange,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab: tabMovedHandler,\n orientation,\n promptForNewTabName,\n tabs: tabDescriptors(source) ?? getChildren(),\n });\n\n activeRef.current = activeTabIndex;\n\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => {\n const { current: tabstrip } = root;\n if (tabstrip) {\n const selectedTab = tabstrip.querySelector(\n '.saltTab[aria-selected=\"true\"]',\n ) as HTMLElement;\n if (selectedTab) {\n selectedTab.focus();\n }\n }\n },\n }) as FocusAPI,\n [],\n );\n\n const handleAddTabClick = useCallback(() => {\n if (!collectionHook.isControlled) {\n addTab();\n }\n onAddTab?.();\n }, [collectionHook.isControlled, onAddTab, addTab]);\n\n const selectedIndex = useRef(activeTabIndex);\n const focusedTabIndex = tabstripHook.highlightedIdx;\n const handleOverflowSelectionChange: SelectionChangeHandler<OverflowItem> =\n useCallback(\n (e, tab) => {\n if (tab !== null) {\n activateTab(tab.index);\n }\n },\n [activateTab],\n );\n\n const handleKeydownOverflowMenu = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n tabstripHook.navigationProps?.onKeyDown?.(e);\n },\n [tabstripHook.navigationProps],\n );\n\n const handleOverflowMenuOpen = useCallback(\n (open: boolean) => {\n setShowOverflowMenu(open);\n },\n [setShowOverflowMenu],\n );\n\n const handleMouseDown = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(evt);\n tabstripHookMouseDown?.(evt);\n },\n [onMouseDown, tabstripHookMouseDown],\n );\n\n // shouldn't we use ref for this ?\n useIsomorphicLayoutEffect(() => {\n // We don't care about changes to overflowedItems here, the overflowObserver\n // always does the right thing. We only care about changes to selected tab\n if (selectedIndex.current !== activeTabIndex && overflowMenuProp) {\n // We might want to do this only if the selected tab is overflowed ?\n // TODO\n // resetOverflow();\n selectedIndex.current = activeTabIndex;\n }\n }, [overflowMenuProp, activeTabIndex]);\n\n useIsomorphicLayoutEffect(() => {\n if (Children.count(children) !== childCount.current) {\n childCount.current = Children.count(children);\n // TODO\n // resetOverflow();\n }\n }, [children]);\n\n /*\n * biome-ignore lint/correctness/useExhaustiveDependencies: We only want the effect to run when value changes, not every time focusedTabIndex changes.\n * It doesn't matter if focusedTabIndex is stale in between calls - it will be correct when value changes.\n */\n useIsomorphicLayoutEffect(() => {\n if (\n activeTabIndex !== null &&\n focusedTabIndex !== activeTabIndex &&\n focusedTabIndex !== -1\n ) {\n tabstripHook.focusTab(activeTabIndex);\n }\n }, [activeTabIndex]);\n\n const renderContent = () => {\n const content = collectionHook.data\n .filter((item) => !item.isOverflowIndicator && !item.isInjectedItem)\n .map((item: OverflowItem, index: number) => {\n // TODO sort out typoing\n const tab = item.source as unknown as TabDescriptor;\n const element = item.element as TabElement;\n\n const selected = index === activeTabIndex;\n const focusVisible = tabstripHook.focusVisible === index;\n const overflowed =\n overflowedItems.findIndex(\n (item: OverflowItem) => item.index === index,\n ) !== -1;\n\n const tabIsBeingEdited = tabstripHook.editing && selected;\n const tabIndex = tabIsBeingEdited\n ? undefined\n : selected && !tabstripHook.focusIsWithinComponent\n ? 0\n : -1;\n\n const baseProps: Partial<TabProps> &\n responsiveDataAttributes & {\n ref?: RefObject<HTMLDivElement>;\n key: string | number;\n } = {\n \"data-index\": index,\n \"data-priority\": item.priority,\n \"data-overflowed\": overflowed ? true : undefined,\n ...tabstripHook.navigationProps,\n id: item.id,\n key: index,\n onMouseDown: handleMouseDown,\n tabIndex,\n };\n\n const tabProps = {\n ...tabstripHook.tabProps,\n closeable: item.closeable,\n dragging: tabstripHook.draggedItemIndex === index,\n editable: item.editable,\n editing: tabIsBeingEdited,\n focusVisible,\n index,\n onClose: item.closeable ? tabstripHook.closeTab : undefined,\n orientation,\n selected,\n } as Partial<TabProps>;\n\n if (isValidElement(element)) {\n if (element.type === Tab) {\n return cloneElement(element, { ...baseProps, ...tabProps });\n }\n return cloneElement(element, baseProps);\n }\n\n return createElement(Tab, {\n ...baseProps,\n ...tabProps,\n label: tab.label,\n });\n });\n\n const overflowCount = overflowedItems.length;\n const draggingActiveTab = tabstripHook.draggedItemIndex === activeTabIndex;\n const showOverflow =\n (tabstripHook.revealOverflowedItems && !draggingActiveTab) ||\n showOverflowMenu;\n const showTooltip = tabstripHook.revealOverflowedItems && draggingActiveTab;\n const overflowIndicator = collectionHook.data.find(\n (i) => i.isOverflowIndicator,\n );\n const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);\n\n if (overflowIndicator) {\n content.push(\n <Tooltip\n content=\"Active Tab cannot be moved into overflow list\"\n open\n disabled={!showTooltip}\n status=\"warning\"\n key=\"tooltip\"\n hideArrow\n >\n <Dropdown<OverflowItem>\n className={clsx(withBaseName(\"overflowMenu\"), {\n [withBaseName(\"overflowMenu-open\")]: showOverflow,\n })}\n ListProps={{\n className: clsx({\n [withBaseName(\"overflowMenu-dropTarget\")]:\n tabstripHook.revealOverflowedItems,\n }),\n }}\n data-overflow-indicator\n data-priority={0}\n id={overflowIndicator.id}\n isOpen={showOverflow}\n key=\"overflow\"\n onOpenChange={handleOverflowMenuOpen}\n onKeyDown={handleKeydownOverflowMenu}\n onSelectionChange={handleOverflowSelectionChange}\n placement=\"bottom-end\"\n source={overflowedItems}\n selected={null}\n triggerComponent={\n <Button\n aria-label={`Tabs overflow menu ${overflowCount} item${\n overflowCount === 1 ? \"\" : \"s\"\n }`}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <OverflowMenuIcon />\n </Button>\n }\n width=\"auto\"\n />\n </Tooltip>,\n );\n }\n\n if (injectedItem) {\n content.push(\n <Button\n {...tabstripHook.navigationProps}\n aria-label={ADD_TAB_LABEL}\n data-priority={injectedItem.priority}\n data-overflowed={injectedItem.overflowed}\n id={injectedItem.id}\n key=\"addButton\"\n onClick={handleAddTabClick}\n variant=\"secondary\"\n tabIndex={-1}\n >\n <AddIcon />\n </Button>,\n );\n }\n\n return content;\n };\n\n const selectedTabOverflowed = overflowedItems.some(\n (item: OverflowItem) => item.index === activeTabIndex,\n );\n const className = clsx(\n withBaseName(),\n withBaseName(orientation),\n classNameProp,\n {\n [withBaseName(\"centered\")]: centered,\n [withBaseName(\"draggingTab\")]: tabstripHook.isDragging,\n [withBaseName(\"tertiary\")]: variant === \"tertiary\",\n },\n );\n\n const selectedTabId =\n activeTabIndex !== null ? collectionHook.data[activeTabIndex].id : null;\n\n return (\n <div\n {...htmlAttributes}\n {...tabstripHook.containerProps}\n className={className}\n id={tabstripId}\n ref={root}\n role=\"tablist\"\n >\n <div className={withBaseName(\"inner\")} ref={innerContainerRef}>\n {renderContent()}\n </div>\n {showActivationIndicator ? (\n <TabActivationIndicator\n hideThumb={selectedTabOverflowed || tabstripHook.isDragging}\n orientation={orientation}\n tabId={selectedTabId}\n />\n ) : null}\n {tabstripHook.draggable}\n </div>\n );\n});\n\nTabstrip.displayName = \"Tabstrip\";\n"],"names":["makePrefixer","forwardRef","Tabstrip","useWindow","useComponentCssInjection","tabstripCss","themeTabstripCss","useRef","useState","useCallback","useIdMemo","useOverflowCollectionItems","Children","useOverflowLayout","useTabstrip","useImperativeHandle","_a","useIsomorphicLayoutEffect","item","isValidElement","Tab","cloneElement","createElement","jsx","Tooltip","Dropdown","clsx","Button","OverflowMenuIcon","AddIcon","jsxs","TabActivationIndicator"],"mappings":"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"}
|
|
@@ -5,21 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var core = require('@salt-ds/core');
|
|
7
7
|
var clsx = require('clsx');
|
|
8
|
-
var
|
|
8
|
+
var react = require('react');
|
|
9
9
|
var Portal = require('../../portal/Portal.js');
|
|
10
10
|
var styles = require('@salt-ds/styles');
|
|
11
11
|
var window = require('@salt-ds/window');
|
|
12
12
|
var Draggable$1 = require('./Draggable.css.js');
|
|
13
13
|
|
|
14
14
|
const makeClassNames = (classNames) => classNames.split(" ").map((className) => `saltDraggable-${className}`);
|
|
15
|
-
const Draggable =
|
|
15
|
+
const Draggable = react.forwardRef(function Draggable2({ wrapperClassName, element, rect, scale = 1 }, forwardedRef) {
|
|
16
16
|
const targetWindow = window.useWindow();
|
|
17
17
|
styles.useComponentCssInjection({
|
|
18
18
|
testId: "salt-draggable",
|
|
19
19
|
css: Draggable$1,
|
|
20
20
|
window: targetWindow
|
|
21
21
|
});
|
|
22
|
-
const callbackRef =
|
|
22
|
+
const callbackRef = react.useCallback(
|
|
23
23
|
(el) => {
|
|
24
24
|
if (el) {
|
|
25
25
|
el.innerHTML = "";
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
7
|
var useDragSpacers = require('./useDragSpacers.js');
|
|
8
8
|
var dragUtils = require('./drag-utils.js');
|
|
9
9
|
var Draggable = require('./Draggable.js');
|
|
@@ -15,21 +15,21 @@ const useDragDropNaturalMovement = ({
|
|
|
15
15
|
containerRef,
|
|
16
16
|
itemQuery = "*"
|
|
17
17
|
}) => {
|
|
18
|
-
const [showOverflow, setShowOverflow] =
|
|
19
|
-
const overflowMenuShowingRef =
|
|
20
|
-
const [isDragging, setIsDragging] =
|
|
21
|
-
const [dragPortal, setDragPortal] =
|
|
22
|
-
const draggableRef =
|
|
23
|
-
const startPos =
|
|
24
|
-
const previousPos =
|
|
25
|
-
const mouseOffset =
|
|
26
|
-
const mouseDownTimer =
|
|
27
|
-
const dragLimits =
|
|
28
|
-
const dragDirection =
|
|
29
|
-
const dropTarget =
|
|
30
|
-
const measuredDropTargets =
|
|
18
|
+
const [showOverflow, setShowOverflow] = react.useState(false);
|
|
19
|
+
const overflowMenuShowingRef = react.useRef(false);
|
|
20
|
+
const [isDragging, setIsDragging] = react.useState(false);
|
|
21
|
+
const [dragPortal, setDragPortal] = react.useState(null);
|
|
22
|
+
const draggableRef = react.useRef(null);
|
|
23
|
+
const startPos = react.useRef(0);
|
|
24
|
+
const previousPos = react.useRef(0);
|
|
25
|
+
const mouseOffset = react.useRef(0);
|
|
26
|
+
const mouseDownTimer = react.useRef(null);
|
|
27
|
+
const dragLimits = react.useRef({ start: 0, end: 0 });
|
|
28
|
+
const dragDirection = react.useRef();
|
|
29
|
+
const dropTarget = react.useRef(null);
|
|
30
|
+
const measuredDropTargets = react.useRef([]);
|
|
31
31
|
const { clearSpacers, displaceItem, displaceLastItem } = useDragSpacers.useDragSpacers();
|
|
32
|
-
const dragMouseMoveHandler =
|
|
32
|
+
const dragMouseMoveHandler = react.useCallback(
|
|
33
33
|
(evt) => {
|
|
34
34
|
const { POS } = dragUtils.dimensions(orientation);
|
|
35
35
|
const { [POS]: clientPos } = evt;
|
|
@@ -87,7 +87,7 @@ const useDragDropNaturalMovement = ({
|
|
|
87
87
|
},
|
|
88
88
|
[containerRef, displaceItem, displaceLastItem, orientation]
|
|
89
89
|
);
|
|
90
|
-
const dragMouseUpHandler =
|
|
90
|
+
const dragMouseUpHandler = react.useCallback(() => {
|
|
91
91
|
document.removeEventListener("mousemove", dragMouseMoveHandler, false);
|
|
92
92
|
document.removeEventListener("mouseup", dragMouseUpHandler, false);
|
|
93
93
|
clearSpacers();
|
|
@@ -106,7 +106,7 @@ const useDragDropNaturalMovement = ({
|
|
|
106
106
|
setShowOverflow(false);
|
|
107
107
|
setIsDragging(false);
|
|
108
108
|
}, [clearSpacers, dragMouseMoveHandler, onDrop]);
|
|
109
|
-
const enterDraggingState =
|
|
109
|
+
const enterDraggingState = react.useCallback(
|
|
110
110
|
(evt) => {
|
|
111
111
|
const { POS, START } = dragUtils.dimensions(orientation);
|
|
112
112
|
const { [POS]: clientPos } = evt;
|
|
@@ -163,7 +163,7 @@ const useDragDropNaturalMovement = ({
|
|
|
163
163
|
orientation
|
|
164
164
|
]
|
|
165
165
|
);
|
|
166
|
-
const preDragMouseMoveHandler =
|
|
166
|
+
const preDragMouseMoveHandler = react.useCallback(
|
|
167
167
|
(evt) => {
|
|
168
168
|
const { POS } = dragUtils.dimensions(orientation);
|
|
169
169
|
const { [POS]: clientPos } = evt;
|
|
@@ -184,7 +184,7 @@ const useDragDropNaturalMovement = ({
|
|
|
184
184
|
},
|
|
185
185
|
[containerRef, enterDraggingState, orientation]
|
|
186
186
|
);
|
|
187
|
-
const preDragMouseUpHandler =
|
|
187
|
+
const preDragMouseUpHandler = react.useCallback(() => {
|
|
188
188
|
if (mouseDownTimer.current) {
|
|
189
189
|
window.clearTimeout(mouseDownTimer.current);
|
|
190
190
|
mouseDownTimer.current = null;
|
|
@@ -192,7 +192,7 @@ const useDragDropNaturalMovement = ({
|
|
|
192
192
|
document.removeEventListener("mousemove", preDragMouseMoveHandler, false);
|
|
193
193
|
document.removeEventListener("mouseup", preDragMouseUpHandler, false);
|
|
194
194
|
}, [preDragMouseMoveHandler]);
|
|
195
|
-
const mouseDownHandler =
|
|
195
|
+
const mouseDownHandler = react.useCallback(
|
|
196
196
|
(evt) => {
|
|
197
197
|
if (containerRef.current && !evt.defaultPrevented) {
|
|
198
198
|
const { POS } = dragUtils.dimensions(orientation);
|
|
@@ -2,24 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var react = require('react');
|
|
6
6
|
var Draggable = require('./Draggable.js');
|
|
7
7
|
|
|
8
8
|
const useDragSpacers = () => {
|
|
9
|
-
const animationFrame =
|
|
10
|
-
const transitioning =
|
|
11
|
-
const spacers =
|
|
9
|
+
const animationFrame = react.useRef(0);
|
|
10
|
+
const transitioning = react.useRef(false);
|
|
11
|
+
const spacers = react.useMemo(
|
|
12
12
|
() => [Draggable.createDragSpacer(transitioning), Draggable.createDragSpacer()],
|
|
13
13
|
[]
|
|
14
14
|
);
|
|
15
|
-
const clearSpacers =
|
|
15
|
+
const clearSpacers = react.useCallback(
|
|
16
16
|
() => spacers.forEach((spacer) => {
|
|
17
17
|
var _a;
|
|
18
18
|
return (_a = spacer.parentElement) == null ? void 0 : _a.removeChild(spacer);
|
|
19
19
|
}),
|
|
20
20
|
[spacers]
|
|
21
21
|
);
|
|
22
|
-
const animateTransition =
|
|
22
|
+
const animateTransition = react.useCallback(
|
|
23
23
|
(size) => {
|
|
24
24
|
const [spacer1, spacer2] = spacers;
|
|
25
25
|
animationFrame.current = requestAnimationFrame(() => {
|
|
@@ -32,13 +32,13 @@ const useDragSpacers = () => {
|
|
|
32
32
|
},
|
|
33
33
|
[spacers]
|
|
34
34
|
);
|
|
35
|
-
const cancelAnyPendingAnimation =
|
|
35
|
+
const cancelAnyPendingAnimation = react.useCallback(() => {
|
|
36
36
|
if (animationFrame.current) {
|
|
37
37
|
cancelAnimationFrame(animationFrame.current);
|
|
38
38
|
animationFrame.current = 0;
|
|
39
39
|
}
|
|
40
40
|
}, []);
|
|
41
|
-
const displaceItem =
|
|
41
|
+
const displaceItem = react.useCallback(
|
|
42
42
|
(item, size, useTransition = false, direction) => {
|
|
43
43
|
var _a, _b, _c, _d;
|
|
44
44
|
if (item) {
|
|
@@ -64,7 +64,7 @@ const useDragSpacers = () => {
|
|
|
64
64
|
},
|
|
65
65
|
[animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers]
|
|
66
66
|
);
|
|
67
|
-
const displaceLastItem =
|
|
67
|
+
const displaceLastItem = react.useCallback(
|
|
68
68
|
(item, size, useTransition = false) => {
|
|
69
69
|
var _a, _b, _c, _d;
|
|
70
70
|
const [spacer1, spacer2] = spacers;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var react = require('react');
|
|
6
6
|
require('@salt-ds/core');
|
|
7
7
|
require('react/jsx-runtime');
|
|
8
8
|
var useResizeObserver = require('../responsive/useResizeObserver.js');
|
|
@@ -22,16 +22,16 @@ function useActivationIndicator({
|
|
|
22
22
|
tabId,
|
|
23
23
|
orientation
|
|
24
24
|
}) {
|
|
25
|
-
const [style, setStyle] =
|
|
25
|
+
const [style, setStyle] = react.useState({
|
|
26
26
|
left: 0,
|
|
27
27
|
width: 0
|
|
28
28
|
});
|
|
29
|
-
const styleRef =
|
|
30
|
-
const getTabPos =
|
|
29
|
+
const styleRef = react.useRef(style);
|
|
30
|
+
const getTabPos = react.useCallback(() => {
|
|
31
31
|
const { pos, size } = MEASUREMENTS[orientation];
|
|
32
32
|
return [pos, size];
|
|
33
33
|
}, [orientation]);
|
|
34
|
-
const createIndicatorStyle =
|
|
34
|
+
const createIndicatorStyle = react.useCallback(
|
|
35
35
|
(tabElement) => {
|
|
36
36
|
if (tabElement) {
|
|
37
37
|
const tabRect = tabElement.getBoundingClientRect();
|
|
@@ -52,7 +52,7 @@ function useActivationIndicator({
|
|
|
52
52
|
},
|
|
53
53
|
[rootRef, getTabPos]
|
|
54
54
|
);
|
|
55
|
-
const onResize =
|
|
55
|
+
const onResize = react.useCallback(() => {
|
|
56
56
|
requestAnimationFrame(() => {
|
|
57
57
|
if (tabId) {
|
|
58
58
|
const tabEl = document.getElementById(tabId);
|
|
@@ -63,7 +63,7 @@ function useActivationIndicator({
|
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
}, [createIndicatorStyle, tabId]);
|
|
66
|
-
|
|
66
|
+
react.useEffect(() => {
|
|
67
67
|
if (tabId) {
|
|
68
68
|
setTimeout(() => {
|
|
69
69
|
const tabEl = document.getElementById(tabId);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var core = require('@salt-ds/core');
|
|
6
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
7
|
|
|
8
8
|
const editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
|
|
9
9
|
const isEditKey = (key) => editKeys.has(key);
|
|
@@ -20,7 +20,7 @@ const useEditableItem = ({
|
|
|
20
20
|
name: "useEditableItem",
|
|
21
21
|
state: "editing"
|
|
22
22
|
});
|
|
23
|
-
const onEnterEditMode =
|
|
23
|
+
const onEnterEditMode = react.useCallback(() => {
|
|
24
24
|
setEditing(true);
|
|
25
25
|
onEnterEditModeProp == null ? void 0 : onEnterEditModeProp();
|
|
26
26
|
}, [onEnterEditModeProp]);
|
|
@@ -34,7 +34,7 @@ const useEditableItem = ({
|
|
|
34
34
|
tabIndex
|
|
35
35
|
);
|
|
36
36
|
};
|
|
37
|
-
const onKeyDown =
|
|
37
|
+
const onKeyDown = react.useCallback(
|
|
38
38
|
(evt) => {
|
|
39
39
|
var _a, _b;
|
|
40
40
|
console.log(`useEditableItem onKeyDown ${highlightedIdx}`, {
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var react = require('react');
|
|
6
6
|
var TabPanel = require('./TabPanel.js');
|
|
7
7
|
|
|
8
8
|
const useItemsWithIds = (children, id = "root") => {
|
|
9
|
-
const normalizeItems =
|
|
9
|
+
const normalizeItems = react.useCallback(
|
|
10
10
|
(items) => {
|
|
11
11
|
const sourceMap2 = {};
|
|
12
|
-
const tabDescriptors =
|
|
12
|
+
const tabDescriptors = react.Children.toArray(items).filter(react.isValidElement).map((child, index) => {
|
|
13
13
|
const {
|
|
14
14
|
"data-label": dataLabel = `Tab ${index + 1}`,
|
|
15
15
|
enableClose: closeable,
|
|
@@ -22,7 +22,7 @@ const useItemsWithIds = (children, id = "root") => {
|
|
|
22
22
|
id: tabPanelId,
|
|
23
23
|
key: tabId
|
|
24
24
|
};
|
|
25
|
-
const element = child.type === TabPanel.TabPanel ?
|
|
25
|
+
const element = child.type === TabPanel.TabPanel ? react.cloneElement(child, props) : /* @__PURE__ */ react.createElement(TabPanel.TabPanel, {
|
|
26
26
|
...props,
|
|
27
27
|
label,
|
|
28
28
|
key: tabId
|
|
@@ -40,10 +40,10 @@ const useItemsWithIds = (children, id = "root") => {
|
|
|
40
40
|
},
|
|
41
41
|
[id]
|
|
42
42
|
);
|
|
43
|
-
const [sourceWithIds, sourceMap] =
|
|
43
|
+
const [sourceWithIds, sourceMap] = react.useMemo(() => {
|
|
44
44
|
return normalizeItems(children);
|
|
45
45
|
}, [normalizeItems, children]);
|
|
46
|
-
const itemById =
|
|
46
|
+
const itemById = react.useCallback((id2) => sourceMap[id2], [sourceMap]);
|
|
47
47
|
return [sourceWithIds, itemById];
|
|
48
48
|
};
|
|
49
49
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var core = require('@salt-ds/core');
|
|
6
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
7
|
require('../common-hooks/collectionProvider.js');
|
|
8
8
|
var keyUtils = require('../common-hooks/keyUtils.js');
|
|
9
9
|
require('react/jsx-runtime');
|
|
@@ -56,21 +56,21 @@ const useKeyboardNavigation = ({
|
|
|
56
56
|
selectedIndex: selectedTabIndex = 0
|
|
57
57
|
}) => {
|
|
58
58
|
const manualActivation = keyBoardActivation === "manual";
|
|
59
|
-
const mouseClickPending =
|
|
60
|
-
const focusedRef =
|
|
61
|
-
const [hasFocus, setHasFocus] =
|
|
62
|
-
const [, forceRefresh] =
|
|
59
|
+
const mouseClickPending = react.useRef(false);
|
|
60
|
+
const focusedRef = react.useRef(-1);
|
|
61
|
+
const [hasFocus, setHasFocus] = react.useState(false);
|
|
62
|
+
const [, forceRefresh] = react.useState({});
|
|
63
63
|
const [highlightedIdx, _setHighlightedIdx] = core.useControlled({
|
|
64
64
|
controlled: highlightedIdxProp,
|
|
65
65
|
default: defaultHighlightedIdx,
|
|
66
66
|
name: "UseKeyboardNavigation"
|
|
67
67
|
});
|
|
68
|
-
const setHighlightedIdx =
|
|
68
|
+
const setHighlightedIdx = react.useCallback((value) => {
|
|
69
69
|
focusedRef.current = value;
|
|
70
70
|
_setHighlightedIdx(value);
|
|
71
71
|
}, []);
|
|
72
|
-
const keyboardNavigation =
|
|
73
|
-
const focusTab =
|
|
72
|
+
const keyboardNavigation = react.useRef(false);
|
|
73
|
+
const focusTab = react.useCallback(
|
|
74
74
|
(tabIndex, immediateFocus = false, withKeyboard) => {
|
|
75
75
|
setHighlightedIdx(tabIndex);
|
|
76
76
|
if (withKeyboard === true && !keyboardNavigation.current) {
|
|
@@ -104,7 +104,7 @@ const useKeyboardNavigation = ({
|
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
};
|
|
107
|
-
const nextFocusableItemIdx =
|
|
107
|
+
const nextFocusableItemIdx = react.useCallback(
|
|
108
108
|
(direction = "fwd", idx = direction === "fwd" ? -1 : indexPositions.length) => {
|
|
109
109
|
let nextIdx = nextItemIdx(indexPositions.length, direction, idx);
|
|
110
110
|
const nextDirection = direction === "start" ? "fwd" : direction === "end" ? "bwd" : direction;
|
|
@@ -123,7 +123,7 @@ const useKeyboardNavigation = ({
|
|
|
123
123
|
},
|
|
124
124
|
[indexPositions]
|
|
125
125
|
);
|
|
126
|
-
const navigateChildItems =
|
|
126
|
+
const navigateChildItems = react.useCallback(
|
|
127
127
|
(e, forceFocusVisible = false) => {
|
|
128
128
|
const direction = navigation[orientation][e.key];
|
|
129
129
|
const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
|
|
@@ -144,7 +144,7 @@ const useKeyboardNavigation = ({
|
|
|
144
144
|
orientation
|
|
145
145
|
]
|
|
146
146
|
);
|
|
147
|
-
const handleKeyDown =
|
|
147
|
+
const handleKeyDown = react.useCallback(
|
|
148
148
|
(e) => {
|
|
149
149
|
if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {
|
|
150
150
|
e.preventDefault();
|
|
@@ -171,7 +171,7 @@ const useKeyboardNavigation = ({
|
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
};
|
|
174
|
-
const handleContainerMouseDown =
|
|
174
|
+
const handleContainerMouseDown = react.useCallback(
|
|
175
175
|
(evt) => {
|
|
176
176
|
if (!hasFocus) {
|
|
177
177
|
mouseClickPending.current = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n type FocusEvent,\n type FocusEventHandler,\n type KeyboardEvent,\n type MouseEvent,\n type MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n ArrowDown,\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n End,\n Home,\n} from \"../common-hooks\";\nimport type { OverflowItem } from \"../responsive\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n horizontal: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowLeft]: \"bwd\",\n [ArrowRight]: \"fwd\",\n } as directionMap,\n vertical: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowUp]: \"bwd\",\n [ArrowDown]: \"fwd\",\n } as directionMap,\n};\n\nconst isNavigationKey = (\n key: string,\n orientation: orientationType = \"horizontal\",\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n if (direction === \"start\") {\n return 0;\n }\n if (direction === \"end\") {\n return count - 1;\n }\n if (direction === \"bwd\") {\n if (idx > 0) {\n return idx - 1;\n }\n return idx;\n }\n if (idx === null) {\n return 0;\n }\n if (idx === count - 1) {\n return idx;\n }\n return idx + 1;\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n el\n ? el.hasAttribute(\"tabindex\")\n ? el\n : (el.querySelector(\"[tabindex]\") as HTMLElement)\n : null;\n\nexport interface ContainerNavigationProps {\n onBlur: FocusEventHandler;\n onFocus: FocusEventHandler;\n onMouseDownCapture: MouseEventHandler;\n onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n defaultHighlightedIdx?: number;\n highlightedIdx?: number;\n indexPositions: OverflowItem[];\n keyBoardActivation?: \"manual\" | \"automatic\";\n orientation: orientationType;\n selectedIndex: number | null;\n}\n\ninterface TabstripNavigationHookResult {\n containerProps: ContainerNavigationProps;\n highlightedIdx: number;\n focusTab: (\n tabIndex: number,\n immediateFocus?: boolean,\n withKeyboard?: boolean,\n ) => void;\n focusVisible: number;\n focusIsWithinComponent: boolean;\n onClick: (evt: MouseEvent, tabIndex: number) => void;\n onFocus: (evt: FocusEvent<HTMLElement>) => void;\n onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n defaultHighlightedIdx = -1,\n highlightedIdx: highlightedIdxProp,\n indexPositions,\n keyBoardActivation,\n orientation,\n selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n const manualActivation = keyBoardActivation === \"manual\";\n const mouseClickPending = useRef(false);\n const focusedRef = useRef<number>(-1);\n const [hasFocus, setHasFocus] = useState(false);\n const [, forceRefresh] = useState({});\n const [highlightedIdx, _setHighlightedIdx] = useControlled({\n controlled: highlightedIdxProp,\n default: defaultHighlightedIdx,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIdx = useCallback((value: number) => {\n focusedRef.current = value;\n _setHighlightedIdx(value);\n }, []);\n\n const keyboardNavigation = useRef(false);\n\n const focusTab = useCallback(\n (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n // The timeout is important in two scenarios:\n // 1) where tab has overflowed and is being selected from overflow menu.\n // We must not focus it until the overflow mechanism + render has restored\n // it to the main display.\n // 2) when we are focussing a new tab\n // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n // styled by css class) focus style will briefly linger on both.\n setHighlightedIdx(tabIndex);\n\n if (withKeyboard === true && !keyboardNavigation.current) {\n keyboardNavigation.current = true;\n }\n\n const setFocus = () => {\n const item = indexPositions.find((i) => i.index === tabIndex);\n\n if (item) {\n const focussableElement = getFocusableElement(\n document.getElementById(item.id),\n );\n focussableElement?.focus();\n }\n };\n if (immediateFocus) {\n setFocus();\n } else {\n setTimeout(setFocus, 70);\n }\n },\n [indexPositions, setHighlightedIdx],\n );\n\n const onFocus = (e: FocusEvent<HTMLElement>) => {\n // If focus is received by keyboard navigation, item with tabindex 0 will receive\n // focus. If the item receiving focus has tabindex -1, then focus has been set\n // programatically. We must respect this and not reset focus to selected tab.\n if (focusedRef.current === -1) {\n // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n // the click event will have set correct value.\n if (e.target.tabIndex === -1) {\n // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n // to revisit this and add code here if we may get focus set programatically in other ways.\n } else {\n setTimeout(() => {\n // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n if (focusedRef.current === -1 && selectedTabIndex !== null) {\n setHighlightedIdx(selectedTabIndex);\n }\n }, 200);\n }\n }\n };\n\n const nextFocusableItemIdx = useCallback(\n (\n direction: directionType = \"fwd\",\n idx = direction === \"fwd\" ? -1 : indexPositions.length,\n ) => {\n let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n const nextDirection =\n direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n while (\n ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) ||\n (nextDirection === \"bwd\" && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n const newIdx = nextItemIdx(\n indexPositions.length,\n nextDirection,\n nextIdx,\n );\n if (newIdx === nextIdx) {\n break;\n }\n nextIdx = newIdx;\n }\n return nextIdx;\n },\n [indexPositions],\n );\n\n // forceFocusVisible supports an edge case - first or last Tab are clicked\n // then Left or Right Arrow keys are pressed, There will be no navigation\n // but focusVisible must be applied\n const navigateChildItems = useCallback(\n (e: React.KeyboardEvent, forceFocusVisible = false) => {\n const direction = navigation[orientation][e.key];\n const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n if (nextIdx !== highlightedIdx) {\n const immediateFocus = true;\n if (manualActivation) {\n focusTab(nextIdx, immediateFocus);\n } else {\n // activateTab(newTabIndex);\n }\n } else if (forceFocusVisible) {\n forceRefresh({});\n }\n },\n [\n highlightedIdx,\n manualActivation,\n nextFocusableItemIdx,\n focusTab,\n orientation,\n ],\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n e.preventDefault();\n if (keyboardNavigation.current) {\n navigateChildItems(e);\n } else {\n keyboardNavigation.current = true;\n navigateChildItems(e, true);\n }\n }\n },\n [indexPositions, navigateChildItems, orientation],\n );\n\n // TODO, in common hooks, we use mouse movement to track current highlighted\n // index, rather than rely on component item reporting it\n const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n setHighlightedIdx(tabIndex);\n };\n\n const handleFocus = () => {\n if (!hasFocus) {\n setHasFocus(true);\n if (!mouseClickPending.current) {\n keyboardNavigation.current = true;\n } else {\n mouseClickPending.current = false;\n }\n }\n };\n\n const handleContainerMouseDown = useCallback(\n (evt: MouseEvent) => {\n if (!hasFocus) {\n mouseClickPending.current = true;\n }\n keyboardNavigation.current = false;\n },\n [hasFocus],\n );\n\n const containerProps = {\n onBlur: (e: FocusEvent) => {\n const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n const destTarget = e.relatedTarget as HTMLElement;\n if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n setHighlightedIdx(-1);\n setHasFocus(false);\n }\n },\n onMouseDownCapture: handleContainerMouseDown,\n onFocus: handleFocus,\n onMouseLeave: () => {\n keyboardNavigation.current = true;\n setHighlightedIdx(-1);\n mouseClickPending.current = false;\n },\n };\n\n useIsomorphicLayoutEffect(() => {\n if (\n hasFocus &&\n selectedTabIndex !== undefined &&\n selectedTabIndex !== null\n ) {\n focusTab(selectedTabIndex);\n }\n }, [focusTab, hasFocus, selectedTabIndex]);\n\n return {\n containerProps,\n focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n focusIsWithinComponent: hasFocus,\n highlightedIdx,\n focusTab,\n onClick: handleItemClick,\n onFocus,\n onKeyDown: handleKeyDown,\n };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","useIsomorphicLayoutEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n type FocusEvent,\n type FocusEventHandler,\n type KeyboardEvent,\n type MouseEvent,\n type MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n ArrowDown,\n ArrowLeft,\n ArrowRight,\n ArrowUp,\n End,\n Home,\n} from \"../common-hooks\";\nimport type { OverflowItem } from \"../responsive\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n horizontal: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowLeft]: \"bwd\",\n [ArrowRight]: \"fwd\",\n } as directionMap,\n vertical: {\n [Home]: \"start\",\n [End]: \"end\",\n [ArrowUp]: \"bwd\",\n [ArrowDown]: \"fwd\",\n } as directionMap,\n};\n\nconst isNavigationKey = (\n key: string,\n orientation: orientationType = \"horizontal\",\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n if (direction === \"start\") {\n return 0;\n }\n if (direction === \"end\") {\n return count - 1;\n }\n if (direction === \"bwd\") {\n if (idx > 0) {\n return idx - 1;\n }\n return idx;\n }\n if (idx === null) {\n return 0;\n }\n if (idx === count - 1) {\n return idx;\n }\n return idx + 1;\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n el\n ? el.hasAttribute(\"tabindex\")\n ? el\n : (el.querySelector(\"[tabindex]\") as HTMLElement)\n : null;\n\nexport interface ContainerNavigationProps {\n onBlur: FocusEventHandler;\n onFocus: FocusEventHandler;\n onMouseDownCapture: MouseEventHandler;\n onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n defaultHighlightedIdx?: number;\n highlightedIdx?: number;\n indexPositions: OverflowItem[];\n keyBoardActivation?: \"manual\" | \"automatic\";\n orientation: orientationType;\n selectedIndex: number | null;\n}\n\ninterface TabstripNavigationHookResult {\n containerProps: ContainerNavigationProps;\n highlightedIdx: number;\n focusTab: (\n tabIndex: number,\n immediateFocus?: boolean,\n withKeyboard?: boolean,\n ) => void;\n focusVisible: number;\n focusIsWithinComponent: boolean;\n onClick: (evt: MouseEvent, tabIndex: number) => void;\n onFocus: (evt: FocusEvent<HTMLElement>) => void;\n onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n defaultHighlightedIdx = -1,\n highlightedIdx: highlightedIdxProp,\n indexPositions,\n keyBoardActivation,\n orientation,\n selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n const manualActivation = keyBoardActivation === \"manual\";\n const mouseClickPending = useRef(false);\n const focusedRef = useRef<number>(-1);\n const [hasFocus, setHasFocus] = useState(false);\n const [, forceRefresh] = useState({});\n const [highlightedIdx, _setHighlightedIdx] = useControlled({\n controlled: highlightedIdxProp,\n default: defaultHighlightedIdx,\n name: \"UseKeyboardNavigation\",\n });\n\n const setHighlightedIdx = useCallback((value: number) => {\n focusedRef.current = value;\n _setHighlightedIdx(value);\n }, []);\n\n const keyboardNavigation = useRef(false);\n\n const focusTab = useCallback(\n (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n // The timeout is important in two scenarios:\n // 1) where tab has overflowed and is being selected from overflow menu.\n // We must not focus it until the overflow mechanism + render has restored\n // it to the main display.\n // 2) when we are focussing a new tab\n // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n // styled by css class) focus style will briefly linger on both.\n setHighlightedIdx(tabIndex);\n\n if (withKeyboard === true && !keyboardNavigation.current) {\n keyboardNavigation.current = true;\n }\n\n const setFocus = () => {\n const item = indexPositions.find((i) => i.index === tabIndex);\n\n if (item) {\n const focussableElement = getFocusableElement(\n document.getElementById(item.id),\n );\n focussableElement?.focus();\n }\n };\n if (immediateFocus) {\n setFocus();\n } else {\n setTimeout(setFocus, 70);\n }\n },\n [indexPositions, setHighlightedIdx],\n );\n\n const onFocus = (e: FocusEvent<HTMLElement>) => {\n // If focus is received by keyboard navigation, item with tabindex 0 will receive\n // focus. If the item receiving focus has tabindex -1, then focus has been set\n // programatically. We must respect this and not reset focus to selected tab.\n if (focusedRef.current === -1) {\n // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n // the click event will have set correct value.\n if (e.target.tabIndex === -1) {\n // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n // to revisit this and add code here if we may get focus set programatically in other ways.\n } else {\n setTimeout(() => {\n // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n if (focusedRef.current === -1 && selectedTabIndex !== null) {\n setHighlightedIdx(selectedTabIndex);\n }\n }, 200);\n }\n }\n };\n\n const nextFocusableItemIdx = useCallback(\n (\n direction: directionType = \"fwd\",\n idx = direction === \"fwd\" ? -1 : indexPositions.length,\n ) => {\n let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n const nextDirection =\n direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n while (\n ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) ||\n (nextDirection === \"bwd\" && nextIdx > 0)) &&\n !isFocusable(indexPositions[nextIdx])\n ) {\n const newIdx = nextItemIdx(\n indexPositions.length,\n nextDirection,\n nextIdx,\n );\n if (newIdx === nextIdx) {\n break;\n }\n nextIdx = newIdx;\n }\n return nextIdx;\n },\n [indexPositions],\n );\n\n // forceFocusVisible supports an edge case - first or last Tab are clicked\n // then Left or Right Arrow keys are pressed, There will be no navigation\n // but focusVisible must be applied\n const navigateChildItems = useCallback(\n (e: KeyboardEvent, forceFocusVisible = false) => {\n const direction = navigation[orientation][e.key];\n const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n if (nextIdx !== highlightedIdx) {\n const immediateFocus = true;\n if (manualActivation) {\n focusTab(nextIdx, immediateFocus);\n } else {\n // activateTab(newTabIndex);\n }\n } else if (forceFocusVisible) {\n forceRefresh({});\n }\n },\n [\n highlightedIdx,\n manualActivation,\n nextFocusableItemIdx,\n focusTab,\n orientation,\n ],\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n e.preventDefault();\n if (keyboardNavigation.current) {\n navigateChildItems(e);\n } else {\n keyboardNavigation.current = true;\n navigateChildItems(e, true);\n }\n }\n },\n [indexPositions, navigateChildItems, orientation],\n );\n\n // TODO, in common hooks, we use mouse movement to track current highlighted\n // index, rather than rely on component item reporting it\n const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n setHighlightedIdx(tabIndex);\n };\n\n const handleFocus = () => {\n if (!hasFocus) {\n setHasFocus(true);\n if (!mouseClickPending.current) {\n keyboardNavigation.current = true;\n } else {\n mouseClickPending.current = false;\n }\n }\n };\n\n const handleContainerMouseDown = useCallback(\n (evt: MouseEvent) => {\n if (!hasFocus) {\n mouseClickPending.current = true;\n }\n keyboardNavigation.current = false;\n },\n [hasFocus],\n );\n\n const containerProps = {\n onBlur: (e: FocusEvent) => {\n const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n const destTarget = e.relatedTarget as HTMLElement;\n if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n setHighlightedIdx(-1);\n setHasFocus(false);\n }\n },\n onMouseDownCapture: handleContainerMouseDown,\n onFocus: handleFocus,\n onMouseLeave: () => {\n keyboardNavigation.current = true;\n setHighlightedIdx(-1);\n mouseClickPending.current = false;\n },\n };\n\n useIsomorphicLayoutEffect(() => {\n if (\n hasFocus &&\n selectedTabIndex !== undefined &&\n selectedTabIndex !== null\n ) {\n focusTab(selectedTabIndex);\n }\n }, [focusTab, hasFocus, selectedTabIndex]);\n\n return {\n containerProps,\n focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n focusIsWithinComponent: hasFocus,\n highlightedIdx,\n focusTab,\n onClick: handleItemClick,\n onFocus,\n onKeyDown: handleKeyDown,\n };\n};\n"],"names":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","useIsomorphicLayoutEffect"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var core = require('@salt-ds/core');
|
|
6
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
7
|
|
|
8
8
|
const defaultSelectionKeys = ["Enter", " "];
|
|
9
9
|
const isTabElement = (el) => el == null ? void 0 : el.matches('[class*="saltTab "]');
|
|
@@ -19,18 +19,18 @@ const useSelection = ({
|
|
|
19
19
|
name: "Tabstrip",
|
|
20
20
|
state: "value"
|
|
21
21
|
});
|
|
22
|
-
const isSelectionEvent =
|
|
22
|
+
const isSelectionEvent = react.useCallback(
|
|
23
23
|
(evt) => defaultSelectionKeys.includes(evt.key),
|
|
24
24
|
[]
|
|
25
25
|
);
|
|
26
|
-
const selectItem =
|
|
26
|
+
const selectItem = react.useCallback(
|
|
27
27
|
(tabIndex) => {
|
|
28
28
|
setSelected(tabIndex);
|
|
29
29
|
onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
|
|
30
30
|
},
|
|
31
31
|
[onSelectionChange]
|
|
32
32
|
);
|
|
33
|
-
const handleKeyDown =
|
|
33
|
+
const handleKeyDown = react.useCallback(
|
|
34
34
|
(e) => {
|
|
35
35
|
const targetElement = e.target;
|
|
36
36
|
if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
|
|
@@ -41,7 +41,7 @@ const useSelection = ({
|
|
|
41
41
|
},
|
|
42
42
|
[isSelectionEvent, highlightedIdx, selected, selectItem]
|
|
43
43
|
);
|
|
44
|
-
const onClick =
|
|
44
|
+
const onClick = react.useCallback(
|
|
45
45
|
(e, tabIndex) => {
|
|
46
46
|
if (tabIndex !== selected) {
|
|
47
47
|
selectItem(tabIndex);
|
package/dist-cjs/tabs/useTabs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var core = require('@salt-ds/core');
|
|
6
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
7
|
var useItemsWithIds = require('./useItemsWithIds.js');
|
|
8
8
|
|
|
9
9
|
const useTabs = ({
|
|
@@ -22,7 +22,7 @@ const useTabs = ({
|
|
|
22
22
|
name: "useTabs",
|
|
23
23
|
state: "activeTabIndex"
|
|
24
24
|
});
|
|
25
|
-
const handleTabActivated =
|
|
25
|
+
const handleTabActivated = react.useCallback(
|
|
26
26
|
(tabIndex) => {
|
|
27
27
|
setActiveTabIndex(tabIndex);
|
|
28
28
|
onActiveChange == null ? void 0 : onActiveChange(tabIndex);
|