@salt-ds/lab 1.0.0-alpha.74 → 1.0.0-alpha.75
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/CHANGELOG.md +17 -0
- package/css/salt-lab.css +7 -23
- package/dist-cjs/app-header/AppHeader.js +5 -1
- package/dist-cjs/app-header/AppHeader.js.map +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumbs.js +11 -2
- package/dist-cjs/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -6
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-cjs/button-bar/ButtonBar.js +1 -1
- package/dist-cjs/button-bar/ButtonBar.js.map +1 -1
- package/dist-cjs/button-bar/internal/DescendantContext.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +2 -2
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenu.js +19 -13
- package/dist-cjs/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.js +2 -4
- package/dist-cjs/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuList.js +1 -2
- package/dist-cjs/cascading-menu/CascadingMenuList.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js +4 -1
- package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useMouseHandlers.js +1 -1
- package/dist-cjs/cascading-menu/internal/useMouseHandlers.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useRefsManager.js +3 -1
- package/dist-cjs/cascading-menu/internal/useRefsManager.js.map +1 -1
- package/dist-cjs/collapsible/CollapsibleTrigger.js +1 -2
- package/dist-cjs/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-cjs/color-chooser/AlphaInputField.js +1 -1
- package/dist-cjs/color-chooser/AlphaInputField.js.map +1 -1
- package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
- package/dist-cjs/color-chooser/DictTabs.js +1 -1
- package/dist-cjs/color-chooser/DictTabs.js.map +1 -1
- package/dist-cjs/color-chooser/RGBAInputField.js +2 -2
- package/dist-cjs/color-chooser/RGBAInputField.js.map +1 -1
- package/dist-cjs/combo-box/useCombobox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/ComboBoxDeprecated.js +1 -1
- package/dist-cjs/combo-box-deprecated/ComboBoxDeprecated.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js +1 -2
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js +0 -4
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useComboBox.js +4 -1
- package/dist-cjs/combo-box-deprecated/internal/useComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js +7 -2
- package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-cjs/common-hooks/useAutoSizer.js +0 -9
- package/dist-cjs/common-hooks/useAutoSizer.js.map +1 -1
- package/dist-cjs/common-hooks/useCollapsibleGroups.js +37 -49
- package/dist-cjs/common-hooks/useCollapsibleGroups.js.map +1 -1
- package/dist-cjs/common-hooks/useCollectionItems.js +6 -11
- package/dist-cjs/common-hooks/useCollectionItems.js.map +1 -1
- package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js +7 -7
- package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
- package/dist-cjs/common-hooks/useSelection.js +1 -1
- package/dist-cjs/common-hooks/useSelection.js.map +1 -1
- package/dist-cjs/common-hooks/useTypeahead.js +2 -2
- package/dist-cjs/common-hooks/useTypeahead.js.map +1 -1
- package/dist-cjs/common-hooks/useViewportTracking.js +1 -1
- package/dist-cjs/common-hooks/useViewportTracking.js.map +1 -1
- package/dist-cjs/common-hooks/utils/collection-item-utils.js +1 -1
- package/dist-cjs/common-hooks/utils/collection-item-utils.js.map +1 -1
- package/dist-cjs/contact-details/ContactAction.js +1 -0
- package/dist-cjs/contact-details/ContactAction.js.map +1 -1
- package/dist-cjs/contact-details/ContactSecondaryInfo.js +1 -1
- package/dist-cjs/contact-details/ContactSecondaryInfo.js.map +1 -1
- package/dist-cjs/contact-details/internal/ContactDetailsContext.js +2 -2
- package/dist-cjs/contact-details/internal/ContactDetailsContext.js.map +1 -1
- package/dist-cjs/contact-details/internal/FavoriteToggleWithTooltip.js +10 -1
- package/dist-cjs/contact-details/internal/FavoriteToggleWithTooltip.js.map +1 -1
- package/dist-cjs/content-status/ContentStatus.js.map +1 -1
- package/dist-cjs/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-picker/useFocusOut.js +1 -1
- package/dist-cjs/date-picker/useFocusOut.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/dropdown/useDropdown.js.map +1 -1
- package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
- package/dist-cjs/list/List.js +1 -1
- package/dist-cjs/list/List.js.map +1 -1
- package/dist-cjs/list/ListItem.css.js +1 -1
- package/dist-cjs/list/ListItem.js +2 -1
- package/dist-cjs/list/ListItem.js.map +1 -1
- package/dist-cjs/list/keyset.js.map +1 -1
- package/dist-cjs/list/useList.js +1 -3
- package/dist-cjs/list/useList.js.map +1 -1
- package/dist-cjs/list/useListHeight.js +3 -3
- package/dist-cjs/list/useListHeight.js.map +1 -1
- package/dist-cjs/list-deprecated/List.js +4 -1
- package/dist-cjs/list-deprecated/List.js.map +1 -1
- package/dist-cjs/list-deprecated/ListBase.js +18 -17
- package/dist-cjs/list-deprecated/ListBase.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItem.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItemBase.js +1 -0
- package/dist-cjs/list-deprecated/ListItemBase.js.map +1 -1
- package/dist-cjs/list-deprecated/internal/helpers.js.map +1 -1
- package/dist-cjs/list-deprecated/internal/scrollIntoView.js +2 -2
- package/dist-cjs/list-deprecated/internal/scrollIntoView.js.map +1 -1
- package/dist-cjs/list-deprecated/internal/useListAutoSizer.js.map +1 -1
- package/dist-cjs/list-deprecated/itemToString.js.map +1 -1
- package/dist-cjs/list-deprecated/useList.js +3 -10
- package/dist-cjs/list-deprecated/useList.js.map +1 -1
- package/dist-cjs/list-deprecated/useListItem.js.map +1 -1
- package/dist-cjs/list-next/ListNext.js.map +1 -1
- package/dist-cjs/metric/MetricContent.js +1 -0
- package/dist-cjs/metric/MetricContent.js.map +1 -1
- package/dist-cjs/number-input/NumberInput.css.js +1 -1
- package/dist-cjs/number-input/internal/utils.js +1 -1
- package/dist-cjs/number-input/internal/utils.js.map +1 -1
- package/dist-cjs/query-input/QueryInput.js +10 -10
- package/dist-cjs/query-input/QueryInput.js.map +1 -1
- package/dist-cjs/query-input/internal/QueryInputBody.js +1 -1
- package/dist-cjs/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-cjs/query-input/internal/SearchList.js +1 -1
- package/dist-cjs/query-input/internal/SearchList.js.map +1 -1
- package/dist-cjs/query-input/internal/usePopperStatus.js +2 -2
- package/dist-cjs/query-input/internal/usePopperStatus.js.map +1 -1
- package/dist-cjs/query-input/useQueryInput.js +6 -6
- package/dist-cjs/query-input/useQueryInput.js.map +1 -1
- package/dist-cjs/responsive/OverflowReducer.js +0 -2
- package/dist-cjs/responsive/OverflowReducer.js.map +1 -1
- package/dist-cjs/responsive/overflowUtils.js +6 -3
- package/dist-cjs/responsive/overflowUtils.js.map +1 -1
- package/dist-cjs/responsive/useDynamicCollapse.js +6 -3
- package/dist-cjs/responsive/useDynamicCollapse.js.map +1 -1
- package/dist-cjs/responsive/useOverflow.js +2 -2
- package/dist-cjs/responsive/useOverflow.js.map +1 -1
- package/dist-cjs/responsive/useOverflowCollectionItems.js +1 -1
- package/dist-cjs/responsive/useOverflowCollectionItems.js.map +1 -1
- package/dist-cjs/responsive/useOverflowLayout.js +1 -1
- package/dist-cjs/responsive/useOverflowLayout.js.map +1 -1
- package/dist-cjs/responsive/useReclaimSpace.js +1 -1
- package/dist-cjs/responsive/useReclaimSpace.js.map +1 -1
- package/dist-cjs/responsive/useResizeObserver.js +7 -2
- package/dist-cjs/responsive/useResizeObserver.js.map +1 -1
- package/dist-cjs/search-input/SearchInput.js.map +1 -1
- package/dist-cjs/table/TH.js +1 -1
- package/dist-cjs/table/TH.js.map +1 -1
- package/dist-cjs/table/TR.js +1 -1
- package/dist-cjs/table/TR.js.map +1 -1
- package/dist-cjs/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-cjs/tabs/Tabs.js +0 -8
- package/dist-cjs/tabs/Tabs.js.map +1 -1
- package/dist-cjs/tabs/drag-drop/useDragSpacers.js +6 -7
- package/dist-cjs/tabs/drag-drop/useDragSpacers.js.map +1 -1
- package/dist-cjs/tabs/useActivationIndicator.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextTrigger.js +2 -1
- package/dist-cjs/tabs-next/TabNextTrigger.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useOverflow.js +3 -5
- package/dist-cjs/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-cjs/tokenized-input/useTokenizedInput.js +5 -5
- package/dist-cjs/tokenized-input/useTokenizedInput.js.map +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-cjs/tree/Tree.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigation.css.js +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigation.js +4 -4
- package/dist-cjs/vertical-navigation/VerticalNavigation.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItem.js +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItem.js.map +1 -1
- package/dist-es/app-header/AppHeader.js +5 -1
- package/dist-es/app-header/AppHeader.js.map +1 -1
- package/dist-es/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-es/breadcrumbs/Breadcrumbs.js +11 -2
- package/dist-es/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -6
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-es/button-bar/ButtonBar.js +1 -1
- package/dist-es/button-bar/ButtonBar.js.map +1 -1
- package/dist-es/button-bar/internal/DescendantContext.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +2 -2
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenu.js +19 -13
- package/dist-es/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.js +2 -4
- package/dist-es/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuList.js +1 -2
- package/dist-es/cascading-menu/CascadingMenuList.js.map +1 -1
- package/dist-es/cascading-menu/internal/useMenuTriggerHandlers.js +4 -1
- package/dist-es/cascading-menu/internal/useMenuTriggerHandlers.js.map +1 -1
- package/dist-es/cascading-menu/internal/useMouseHandlers.js +1 -1
- package/dist-es/cascading-menu/internal/useMouseHandlers.js.map +1 -1
- package/dist-es/cascading-menu/internal/useRefsManager.js +3 -1
- package/dist-es/cascading-menu/internal/useRefsManager.js.map +1 -1
- package/dist-es/collapsible/CollapsibleTrigger.js +1 -2
- package/dist-es/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-es/color-chooser/AlphaInputField.js +1 -1
- package/dist-es/color-chooser/AlphaInputField.js.map +1 -1
- package/dist-es/color-chooser/ColorChooser.js.map +1 -1
- package/dist-es/color-chooser/DictTabs.js +1 -1
- package/dist-es/color-chooser/DictTabs.js.map +1 -1
- package/dist-es/color-chooser/RGBAInputField.js +2 -2
- package/dist-es/color-chooser/RGBAInputField.js.map +1 -1
- package/dist-es/combo-box/useCombobox.js.map +1 -1
- package/dist-es/combo-box-deprecated/ComboBoxDeprecated.js +1 -1
- package/dist-es/combo-box-deprecated/ComboBoxDeprecated.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js +1 -2
- package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js +1 -5
- package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/useComboBox.js +4 -1
- package/dist-es/combo-box-deprecated/internal/useComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js +7 -2
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-es/common-hooks/useAutoSizer.js +0 -9
- package/dist-es/common-hooks/useAutoSizer.js.map +1 -1
- package/dist-es/common-hooks/useCollapsibleGroups.js +38 -50
- package/dist-es/common-hooks/useCollapsibleGroups.js.map +1 -1
- package/dist-es/common-hooks/useCollectionItems.js +6 -11
- package/dist-es/common-hooks/useCollectionItems.js.map +1 -1
- package/dist-es/common-hooks/useKeyboardNavigationPanel.js +8 -8
- package/dist-es/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
- package/dist-es/common-hooks/useSelection.js +1 -1
- package/dist-es/common-hooks/useSelection.js.map +1 -1
- package/dist-es/common-hooks/useTypeahead.js +2 -2
- package/dist-es/common-hooks/useTypeahead.js.map +1 -1
- package/dist-es/common-hooks/useViewportTracking.js +1 -1
- package/dist-es/common-hooks/useViewportTracking.js.map +1 -1
- package/dist-es/common-hooks/utils/collection-item-utils.js +1 -1
- package/dist-es/common-hooks/utils/collection-item-utils.js.map +1 -1
- package/dist-es/contact-details/ContactAction.js +1 -0
- package/dist-es/contact-details/ContactAction.js.map +1 -1
- package/dist-es/contact-details/ContactSecondaryInfo.js +1 -1
- package/dist-es/contact-details/ContactSecondaryInfo.js.map +1 -1
- package/dist-es/contact-details/internal/ContactDetailsContext.js +2 -2
- package/dist-es/contact-details/internal/ContactDetailsContext.js.map +1 -1
- package/dist-es/contact-details/internal/FavoriteToggleWithTooltip.js +10 -1
- package/dist-es/contact-details/internal/FavoriteToggleWithTooltip.js.map +1 -1
- package/dist-es/content-status/ContentStatus.js.map +1 -1
- package/dist-es/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-picker/useFocusOut.js +1 -1
- package/dist-es/date-picker/useFocusOut.js.map +1 -1
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/dropdown/useDropdown.js.map +1 -1
- package/dist-es/input-legacy/InputLegacy.css.js +1 -1
- package/dist-es/list/List.js +2 -2
- package/dist-es/list/List.js.map +1 -1
- package/dist-es/list/ListItem.css.js +1 -1
- package/dist-es/list/ListItem.js +2 -1
- package/dist-es/list/ListItem.js.map +1 -1
- package/dist-es/list/keyset.js.map +1 -1
- package/dist-es/list/useList.js +1 -3
- package/dist-es/list/useList.js.map +1 -1
- package/dist-es/list/useListHeight.js +3 -3
- package/dist-es/list/useListHeight.js.map +1 -1
- package/dist-es/list-deprecated/List.js +4 -1
- package/dist-es/list-deprecated/List.js.map +1 -1
- package/dist-es/list-deprecated/ListBase.js +19 -18
- package/dist-es/list-deprecated/ListBase.js.map +1 -1
- package/dist-es/list-deprecated/ListItem.js.map +1 -1
- package/dist-es/list-deprecated/ListItemBase.js +1 -0
- package/dist-es/list-deprecated/ListItemBase.js.map +1 -1
- package/dist-es/list-deprecated/internal/helpers.js.map +1 -1
- package/dist-es/list-deprecated/internal/scrollIntoView.js +2 -2
- package/dist-es/list-deprecated/internal/scrollIntoView.js.map +1 -1
- package/dist-es/list-deprecated/internal/useListAutoSizer.js.map +1 -1
- package/dist-es/list-deprecated/itemToString.js.map +1 -1
- package/dist-es/list-deprecated/useList.js +3 -10
- package/dist-es/list-deprecated/useList.js.map +1 -1
- package/dist-es/list-deprecated/useListItem.js.map +1 -1
- package/dist-es/list-next/ListNext.js.map +1 -1
- package/dist-es/metric/MetricContent.js +1 -0
- package/dist-es/metric/MetricContent.js.map +1 -1
- package/dist-es/number-input/NumberInput.css.js +1 -1
- package/dist-es/number-input/internal/utils.js +1 -1
- package/dist-es/number-input/internal/utils.js.map +1 -1
- package/dist-es/query-input/QueryInput.js +10 -10
- package/dist-es/query-input/QueryInput.js.map +1 -1
- package/dist-es/query-input/internal/QueryInputBody.js +1 -1
- package/dist-es/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-es/query-input/internal/SearchList.js +1 -1
- package/dist-es/query-input/internal/SearchList.js.map +1 -1
- package/dist-es/query-input/internal/usePopperStatus.js +2 -2
- package/dist-es/query-input/internal/usePopperStatus.js.map +1 -1
- package/dist-es/query-input/useQueryInput.js +6 -6
- package/dist-es/query-input/useQueryInput.js.map +1 -1
- package/dist-es/responsive/OverflowReducer.js +0 -2
- package/dist-es/responsive/OverflowReducer.js.map +1 -1
- package/dist-es/responsive/overflowUtils.js +6 -3
- package/dist-es/responsive/overflowUtils.js.map +1 -1
- package/dist-es/responsive/useDynamicCollapse.js +6 -3
- package/dist-es/responsive/useDynamicCollapse.js.map +1 -1
- package/dist-es/responsive/useOverflow.js +2 -2
- package/dist-es/responsive/useOverflow.js.map +1 -1
- package/dist-es/responsive/useOverflowCollectionItems.js +1 -1
- package/dist-es/responsive/useOverflowCollectionItems.js.map +1 -1
- package/dist-es/responsive/useOverflowLayout.js +1 -1
- package/dist-es/responsive/useOverflowLayout.js.map +1 -1
- package/dist-es/responsive/useReclaimSpace.js +1 -1
- package/dist-es/responsive/useReclaimSpace.js.map +1 -1
- package/dist-es/responsive/useResizeObserver.js +7 -2
- package/dist-es/responsive/useResizeObserver.js.map +1 -1
- package/dist-es/search-input/SearchInput.js.map +1 -1
- package/dist-es/table/TH.js +1 -1
- package/dist-es/table/TH.js.map +1 -1
- package/dist-es/table/TR.js +1 -1
- package/dist-es/table/TR.js.map +1 -1
- package/dist-es/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-es/tabs/Tabs.js +1 -9
- package/dist-es/tabs/Tabs.js.map +1 -1
- package/dist-es/tabs/drag-drop/useDragSpacers.js +6 -7
- package/dist-es/tabs/drag-drop/useDragSpacers.js.map +1 -1
- package/dist-es/tabs/useActivationIndicator.js.map +1 -1
- package/dist-es/tabs-next/TabNextTrigger.js +2 -1
- package/dist-es/tabs-next/TabNextTrigger.js.map +1 -1
- package/dist-es/tabs-next/hooks/useOverflow.js +4 -6
- package/dist-es/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-es/tokenized-input/useTokenizedInput.js +5 -5
- package/dist-es/tokenized-input/useTokenizedInput.js.map +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-es/tree/Tree.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigation.css.js +1 -1
- package/dist-es/vertical-navigation/VerticalNavigation.js +4 -4
- package/dist-es/vertical-navigation/VerticalNavigation.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItem.js +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItem.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/cascading-menu/CascadingMenuList.d.ts +3 -1
- package/dist-types/cascading-menu/CascadingMenuProps.d.ts +1 -1
- package/dist-types/cascading-menu/internal/useMenuTriggerHandlers.d.ts +3 -2
- package/dist-types/collapsible/CollapsibleTrigger.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +5 -5
- package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +7 -7
- package/dist-types/common-hooks/useAutoSizer.d.ts +1 -1
- package/dist-types/common-hooks/useCollapsibleGroups.d.ts +2 -2
- package/dist-types/common-hooks/useCollectionItems.d.ts +1 -1
- package/dist-types/common-hooks/useSelection.d.ts +1 -1
- package/dist-types/content-status/ContentStatus.d.ts +1 -1
- package/dist-types/dropdown/DropdownButton.d.ts +1 -1
- package/dist-types/dropdown/dropdownTypes.d.ts +2 -2
- package/dist-types/dropdown/useDropdown.d.ts +1 -1
- package/dist-types/list/useListHeight.d.ts +1 -1
- package/dist-types/list-deprecated/ListBase.d.ts +4 -8
- package/dist-types/list-deprecated/ListProps.d.ts +7 -6
- package/dist-types/list-deprecated/internal/helpers.d.ts +3 -2
- package/dist-types/list-deprecated/internal/useListAutoSizer.d.ts +2 -7
- package/dist-types/list-deprecated/itemToString.d.ts +2 -2
- package/dist-types/list-deprecated/useList.d.ts +1 -1
- package/dist-types/metric/internal/helpers.d.ts +1 -1
- package/dist-types/query-input/internal/usePopperStatus.d.ts +3 -3
- package/dist-types/responsive/overflowTypes.d.ts +1 -1
- package/dist-types/responsive/overflowUtils.d.ts +1 -1
- package/dist-types/responsive/useReclaimSpace.d.ts +1 -1
- package/dist-types/search-input/SearchInput.d.ts +1 -1
- package/dist-types/vertical-navigation/VerticalNavigation.d.ts +2 -2
- package/package.json +3 -6
|
@@ -84,7 +84,7 @@ function useMouseHandlers(props, isMenuActiveState, menuRef) {
|
|
|
84
84
|
type: CascadingMenuAction.CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,
|
|
85
85
|
cause: stateChangeTypes.stateChangeTypes.ITEM_MOUSE_MOVE_TO_PARENT,
|
|
86
86
|
targetId: menuId,
|
|
87
|
-
highlightedItemIndex:
|
|
87
|
+
highlightedItemIndex: -1
|
|
88
88
|
});
|
|
89
89
|
}
|
|
90
90
|
const didMouseMoveOutOfMenu = !(mouseMovedToParentMenu || mouseMovedToSameMenu || isOrContainsNode(subMenuElement, relatedTarget));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMouseHandlers.js","sources":["../src/cascading-menu/internal/useMouseHandlers.ts"],"sourcesContent":["import {\n type Dispatch,\n type MouseEvent,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\n\nimport type { CascadingMenuListProps } from \"../CascadingMenuList\";\nimport { stateChangeTypes } from \"../stateChangeTypes\";\nimport { CascadingMenuAction } from \"./CascadingMenuAction\";\n\nfunction isOrContainsNode(parent: HTMLElement | null, child: HTMLElement) {\n return parent === child || !!parent?.contains?.(child);\n}\n\nexport function useMouseHandlers(\n props: CascadingMenuListProps,\n isMenuActiveState: [boolean, Dispatch<SetStateAction<boolean>>],\n menuRef: HTMLElement | null,\n) {\n const [isMenuActive, setIsMenuActive] = isMenuActiveState;\n const {\n delay,\n refsManager,\n dispatch,\n isNavigatingWithKeyboard,\n setIsNavigatingWithKeyboard,\n data,\n highlightedItemIndex,\n menuId,\n parentElement,\n } = props;\n const scheduledHighlightedIndexChange = useRef<number | null>(null);\n const mouseEnterTimer = useRef<number>();\n const mouseOutTimer = useRef<number>();\n\n useEffect(\n () =>\n function cleanUpTimeouts() {\n clearTimeout(mouseEnterTimer.current);\n clearTimeout(mouseOutTimer.current);\n },\n [],\n );\n\n const handleMouseMove = useCallback(\n (highlightedIndex: number) => {\n if (isNavigatingWithKeyboard) {\n setIsNavigatingWithKeyboard(false);\n }\n\n if (!isMenuActive) {\n setIsMenuActive(true);\n }\n if (scheduledHighlightedIndexChange.current !== highlightedIndex) {\n scheduledHighlightedIndexChange.current = highlightedIndex;\n clearTimeout(mouseEnterTimer.current);\n clearTimeout(mouseOutTimer.current);\n mouseEnterTimer.current = window.setTimeout(() => {\n dispatch({\n type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n cause: stateChangeTypes.ITEM_MOUSE_ENTER,\n targetId: menuId,\n highlightedItemIndex: highlightedIndex,\n });\n }, delay);\n }\n },\n [\n isNavigatingWithKeyboard,\n isMenuActive,\n setIsNavigatingWithKeyboard,\n setIsMenuActive,\n delay,\n dispatch,\n menuId,\n ],\n );\n const handleMouseOut = useCallback(\n (event: MouseEvent<HTMLElement>) => {\n if (isNavigatingWithKeyboard) {\n setIsNavigatingWithKeyboard(false);\n }\n clearTimeout(mouseOutTimer.current);\n // If mouse leaves from parent menu into other element other than submenu -> close submenu\n const { relatedTarget } = event;\n const subMenuElement =\n typeof highlightedItemIndex === \"number\"\n ? (refsManager.get(data.childMenus[highlightedItemIndex]) ?? null)\n : null;\n\n const mouseMovedToSameMenu = isOrContainsNode(\n menuRef,\n relatedTarget as HTMLElement,\n );\n const mouseMovedToParentMenu = isOrContainsNode(\n parentElement ?? null,\n relatedTarget as HTMLElement,\n );\n\n if (mouseMovedToParentMenu) {\n dispatch({\n type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n cause: stateChangeTypes.ITEM_MOUSE_MOVE_TO_PARENT,\n targetId: menuId,\n highlightedItemIndex:
|
|
1
|
+
{"version":3,"file":"useMouseHandlers.js","sources":["../src/cascading-menu/internal/useMouseHandlers.ts"],"sourcesContent":["import {\n type Dispatch,\n type MouseEvent,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\n\nimport type { CascadingMenuListProps } from \"../CascadingMenuList\";\nimport { stateChangeTypes } from \"../stateChangeTypes\";\nimport { CascadingMenuAction } from \"./CascadingMenuAction\";\n\nfunction isOrContainsNode(parent: HTMLElement | null, child: HTMLElement) {\n return parent === child || !!parent?.contains?.(child);\n}\n\nexport function useMouseHandlers(\n props: CascadingMenuListProps,\n isMenuActiveState: [boolean, Dispatch<SetStateAction<boolean>>],\n menuRef: HTMLElement | null,\n) {\n const [isMenuActive, setIsMenuActive] = isMenuActiveState;\n const {\n delay,\n refsManager,\n dispatch,\n isNavigatingWithKeyboard,\n setIsNavigatingWithKeyboard,\n data,\n highlightedItemIndex,\n menuId,\n parentElement,\n } = props;\n const scheduledHighlightedIndexChange = useRef<number | null>(null);\n const mouseEnterTimer = useRef<number>();\n const mouseOutTimer = useRef<number>();\n\n useEffect(\n () =>\n function cleanUpTimeouts() {\n clearTimeout(mouseEnterTimer.current);\n clearTimeout(mouseOutTimer.current);\n },\n [],\n );\n\n const handleMouseMove = useCallback(\n (highlightedIndex: number) => {\n if (isNavigatingWithKeyboard) {\n setIsNavigatingWithKeyboard(false);\n }\n\n if (!isMenuActive) {\n setIsMenuActive(true);\n }\n if (scheduledHighlightedIndexChange.current !== highlightedIndex) {\n scheduledHighlightedIndexChange.current = highlightedIndex;\n clearTimeout(mouseEnterTimer.current);\n clearTimeout(mouseOutTimer.current);\n mouseEnterTimer.current = window.setTimeout(() => {\n dispatch({\n type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n cause: stateChangeTypes.ITEM_MOUSE_ENTER,\n targetId: menuId,\n highlightedItemIndex: highlightedIndex,\n });\n }, delay);\n }\n },\n [\n isNavigatingWithKeyboard,\n isMenuActive,\n setIsNavigatingWithKeyboard,\n setIsMenuActive,\n delay,\n dispatch,\n menuId,\n ],\n );\n const handleMouseOut = useCallback(\n (event: MouseEvent<HTMLElement>) => {\n if (isNavigatingWithKeyboard) {\n setIsNavigatingWithKeyboard(false);\n }\n clearTimeout(mouseOutTimer.current);\n // If mouse leaves from parent menu into other element other than submenu -> close submenu\n const { relatedTarget } = event;\n const subMenuElement =\n typeof highlightedItemIndex === \"number\"\n ? (refsManager.get(data.childMenus[highlightedItemIndex]) ?? null)\n : null;\n\n const mouseMovedToSameMenu = isOrContainsNode(\n menuRef,\n relatedTarget as HTMLElement,\n );\n const mouseMovedToParentMenu = isOrContainsNode(\n parentElement ?? null,\n relatedTarget as HTMLElement,\n );\n\n if (mouseMovedToParentMenu) {\n dispatch({\n type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n cause: stateChangeTypes.ITEM_MOUSE_MOVE_TO_PARENT,\n targetId: menuId,\n highlightedItemIndex: -1,\n });\n }\n const didMouseMoveOutOfMenu = !(\n mouseMovedToParentMenu ||\n mouseMovedToSameMenu ||\n isOrContainsNode(subMenuElement, relatedTarget as HTMLElement)\n );\n\n if (didMouseMoveOutOfMenu) {\n scheduledHighlightedIndexChange.current = null;\n if (!isMenuActive) {\n setIsMenuActive(true);\n clearInterval(mouseEnterTimer.current);\n mouseOutTimer.current = window.setTimeout(() => {\n dispatch({\n type: CascadingMenuAction.RESET_MENU,\n cause: stateChangeTypes.MOUSE_OUT_OF_MENUS,\n targetId: menuId,\n });\n }, delay);\n }\n } else if (!mouseMovedToSameMenu) {\n setIsMenuActive(false);\n }\n },\n [\n isNavigatingWithKeyboard,\n refsManager,\n data.childMenus,\n highlightedItemIndex,\n menuRef,\n parentElement,\n setIsNavigatingWithKeyboard,\n dispatch,\n menuId,\n isMenuActive,\n delay,\n setIsMenuActive,\n ],\n );\n return [handleMouseMove, handleMouseOut] as const;\n}\n"],"names":["useRef","useEffect","useCallback","CascadingMenuAction","stateChangeTypes"],"mappings":";;;;;;AAaA,SAAS,gBAAA,CAAiB,QAA4B,KAAoB,EAAA;AAb1E,EAAA,IAAA,EAAA;AAcE,EAAA,OAAO,WAAW,KAAS,IAAA,CAAC,EAAC,CAAA,EAAA,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,aAAR,IAAmB,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AAClD;AAEgB,SAAA,gBAAA,CACd,KACA,EAAA,iBAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,iBAAA;AACxC,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,IACA,IAAA;AAAA,IACA,oBAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAM,MAAA,+BAAA,GAAkCA,aAAsB,IAAI,CAAA;AAClE,EAAA,MAAM,kBAAkBA,YAAe,EAAA;AACvC,EAAA,MAAM,gBAAgBA,YAAe,EAAA;AAErC,EAAAC,eAAA;AAAA,IACE,MACE,SAAS,eAAkB,GAAA;AACzB,MAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA;AACpC,MAAA,YAAA,CAAa,cAAc,OAAO,CAAA;AAAA,KACpC;AAAA,IACF;AAAC,GACH;AAEA,EAAA,MAAM,eAAkB,GAAAC,iBAAA;AAAA,IACtB,CAAC,gBAA6B,KAAA;AAC5B,MAAA,IAAI,wBAA0B,EAAA;AAC5B,QAAA,2BAAA,CAA4B,KAAK,CAAA;AAAA;AAGnC,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,eAAA,CAAgB,IAAI,CAAA;AAAA;AAEtB,MAAI,IAAA,+BAAA,CAAgC,YAAY,gBAAkB,EAAA;AAChE,QAAA,+BAAA,CAAgC,OAAU,GAAA,gBAAA;AAC1C,QAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA;AACpC,QAAA,YAAA,CAAa,cAAc,OAAO,CAAA;AAClC,QAAgB,eAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAChD,UAAS,QAAA,CAAA;AAAA,YACP,MAAMC,uCAAoB,CAAA,2BAAA;AAAA,YAC1B,OAAOC,iCAAiB,CAAA,gBAAA;AAAA,YACxB,QAAU,EAAA,MAAA;AAAA,YACV,oBAAsB,EAAA;AAAA,WACvB,CAAA;AAAA,WACA,KAAK,CAAA;AAAA;AACV,KACF;AAAA,IACA;AAAA,MACE,wBAAA;AAAA,MACA,YAAA;AAAA,MACA,2BAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AACA,EAAA,MAAM,cAAiB,GAAAF,iBAAA;AAAA,IACrB,CAAC,KAAmC,KAAA;AAClC,MAAA,IAAI,wBAA0B,EAAA;AAC5B,QAAA,2BAAA,CAA4B,KAAK,CAAA;AAAA;AAEnC,MAAA,YAAA,CAAa,cAAc,OAAO,CAAA;AAElC,MAAM,MAAA,EAAE,eAAkB,GAAA,KAAA;AAC1B,MAAM,MAAA,cAAA,GACJ,OAAO,oBAAA,KAAyB,QAC3B,GAAA,WAAA,CAAY,GAAI,CAAA,IAAA,CAAK,UAAW,CAAA,oBAAoB,CAAC,CAAA,IAAK,IAC3D,GAAA,IAAA;AAEN,MAAA,MAAM,oBAAuB,GAAA,gBAAA;AAAA,QAC3B,OAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAM,sBAAyB,GAAA,gBAAA;AAAA,QAC7B,aAAiB,IAAA,IAAA;AAAA,QACjB;AAAA,OACF;AAEA,MAAA,IAAI,sBAAwB,EAAA;AAC1B,QAAS,QAAA,CAAA;AAAA,UACP,MAAMC,uCAAoB,CAAA,2BAAA;AAAA,UAC1B,OAAOC,iCAAiB,CAAA,yBAAA;AAAA,UACxB,QAAU,EAAA,MAAA;AAAA,UACV,oBAAsB,EAAA;AAAA,SACvB,CAAA;AAAA;AAEH,MAAA,MAAM,wBAAwB,EAC5B,sBAAA,IACA,oBACA,IAAA,gBAAA,CAAiB,gBAAgB,aAA4B,CAAA,CAAA;AAG/D,MAAA,IAAI,qBAAuB,EAAA;AACzB,QAAA,+BAAA,CAAgC,OAAU,GAAA,IAAA;AAC1C,QAAA,IAAI,CAAC,YAAc,EAAA;AACjB,UAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,UAAA,aAAA,CAAc,gBAAgB,OAAO,CAAA;AACrC,UAAc,aAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC9C,YAAS,QAAA,CAAA;AAAA,cACP,MAAMD,uCAAoB,CAAA,UAAA;AAAA,cAC1B,OAAOC,iCAAiB,CAAA,kBAAA;AAAA,cACxB,QAAU,EAAA;AAAA,aACX,CAAA;AAAA,aACA,KAAK,CAAA;AAAA;AACV,OACF,MAAA,IAAW,CAAC,oBAAsB,EAAA;AAChC,QAAA,eAAA,CAAgB,KAAK,CAAA;AAAA;AACvB,KACF;AAAA,IACA;AAAA,MACE,wBAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAK,CAAA,UAAA;AAAA,MACL,oBAAA;AAAA,MACA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,2BAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA;AACF,GACF;AACA,EAAO,OAAA,CAAC,iBAAiB,cAAc,CAAA;AACzC;;;;"}
|
|
@@ -12,7 +12,9 @@ function useRefsManager() {
|
|
|
12
12
|
}, []);
|
|
13
13
|
const values = react.useCallback(() => {
|
|
14
14
|
const vals = [];
|
|
15
|
-
|
|
15
|
+
for (const value of refs.current.values()) {
|
|
16
|
+
vals.push(value);
|
|
17
|
+
}
|
|
16
18
|
return vals;
|
|
17
19
|
}, []);
|
|
18
20
|
return react.useMemo(() => ({ get, set, values }), [get, set, values]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRefsManager.js","sources":["../src/cascading-menu/internal/useRefsManager.ts"],"sourcesContent":["import { useCallback, useMemo, useReducer, useRef } from \"react\";\n\nexport type refsManager = {\n get: (key: string) => HTMLElement | undefined;\n set: (key: string, ref: HTMLElement) => void;\n values: () => HTMLElement[];\n};\n\nexport function useRefsManager(): refsManager {\n const refs = useRef(new Map<string, HTMLElement>());\n const [, forceUpdate] = useReducer((x) => !x, false);\n\n const get = useCallback((key: string) => refs.current.get(key), []);\n\n const set = useCallback((key: string, value: HTMLElement) => {\n refs.current.set(key, value);\n forceUpdate();\n }, []);\n\n const values = useCallback(() => {\n const vals: HTMLElement[] = [];\n refs.current.
|
|
1
|
+
{"version":3,"file":"useRefsManager.js","sources":["../src/cascading-menu/internal/useRefsManager.ts"],"sourcesContent":["import { useCallback, useMemo, useReducer, useRef } from \"react\";\n\nexport type refsManager = {\n get: (key: string) => HTMLElement | undefined;\n set: (key: string, ref: HTMLElement) => void;\n values: () => HTMLElement[];\n};\n\nexport function useRefsManager(): refsManager {\n const refs = useRef(new Map<string, HTMLElement>());\n const [, forceUpdate] = useReducer((x) => !x, false);\n\n const get = useCallback((key: string) => refs.current.get(key), []);\n\n const set = useCallback((key: string, value: HTMLElement) => {\n refs.current.set(key, value);\n forceUpdate();\n }, []);\n\n const values = useCallback(() => {\n const vals: HTMLElement[] = [];\n for (const value of refs.current.values()) {\n vals.push(value);\n }\n return vals;\n }, []);\n\n return useMemo(() => ({ get, set, values }), [get, set, values]);\n}\n"],"names":["useRef","useReducer","useCallback","useMemo"],"mappings":";;;;AAQO,SAAS,cAA8B,GAAA;AAC5C,EAAA,MAAM,IAAO,GAAAA,YAAA,iBAAW,IAAA,GAAA,EAA0B,CAAA;AAClD,EAAM,MAAA,GAAG,WAAW,CAAA,GAAIC,iBAAW,CAAC,CAAA,KAAM,CAAC,CAAA,EAAG,KAAK,CAAA;AAEnD,EAAM,MAAA,GAAA,GAAMC,iBAAY,CAAA,CAAC,GAAgB,KAAA,IAAA,CAAK,QAAQ,GAAI,CAAA,GAAG,CAAG,EAAA,EAAE,CAAA;AAElE,EAAA,MAAM,GAAM,GAAAA,iBAAA,CAAY,CAAC,GAAA,EAAa,KAAuB,KAAA;AAC3D,IAAK,IAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,GAAA,EAAK,KAAK,CAAA;AAC3B,IAAY,WAAA,EAAA;AAAA,GACd,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,MAAA,GAASA,kBAAY,MAAM;AAC/B,IAAA,MAAM,OAAsB,EAAC;AAC7B,IAAA,KAAA,MAAW,KAAS,IAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,EAAU,EAAA;AACzC,MAAA,IAAA,CAAK,KAAK,KAAK,CAAA;AAAA;AAEjB,IAAO,OAAA,IAAA;AAAA,GACT,EAAG,EAAE,CAAA;AAEL,EAAO,OAAAC,aAAA,CAAQ,OAAO,EAAE,GAAK,EAAA,GAAA,EAAK,MAAO,EAAA,CAAA,EAAI,CAAC,GAAA,EAAK,GAAK,EAAA,MAAM,CAAC,CAAA;AACjE;;;;"}
|
|
@@ -8,7 +8,7 @@ var CollapsibleContext = require('./CollapsibleContext.js');
|
|
|
8
8
|
|
|
9
9
|
const withBaseName = core.makePrefixer("saltCollapsibleTrigger");
|
|
10
10
|
const CollapsibleTrigger = react.forwardRef(function CollapsibleTrigger2(props, ref) {
|
|
11
|
-
const { children, className, onClick} = props;
|
|
11
|
+
const { children, className, onClick } = props;
|
|
12
12
|
const { open, setOpen, panelId } = CollapsibleContext.useCollapsibleContext();
|
|
13
13
|
const handleClick = (event) => {
|
|
14
14
|
setOpen(event, !open);
|
|
@@ -21,7 +21,6 @@ const CollapsibleTrigger = react.forwardRef(function CollapsibleTrigger2(props,
|
|
|
21
21
|
...core.mergeProps(
|
|
22
22
|
{
|
|
23
23
|
className: clsx.clsx(withBaseName(), className),
|
|
24
|
-
type: "button",
|
|
25
24
|
"aria-expanded": open,
|
|
26
25
|
"aria-controls": panelId,
|
|
27
26
|
onClick: handleClick
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsibleTrigger.js","sources":["../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { makePrefixer, mergeProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n cloneElement,\n forwardRef,\n isValidElement,\n type MouseEvent,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleTriggerProps\n extends ComponentPropsWithoutRef<\"button\"> {\n children: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsibleTrigger\");\n\nexport const CollapsibleTrigger = forwardRef<\n HTMLButtonElement,\n CollapsibleTriggerProps\n>(function CollapsibleTrigger(props, ref) {\n const { children, className, onClick
|
|
1
|
+
{"version":3,"file":"CollapsibleTrigger.js","sources":["../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { makePrefixer, mergeProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n cloneElement,\n forwardRef,\n isValidElement,\n type MouseEvent,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleTriggerProps\n extends Pick<ComponentPropsWithoutRef<\"button\">, \"className\" | \"onClick\"> {\n children: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsibleTrigger\");\n\nexport const CollapsibleTrigger = forwardRef<\n HTMLButtonElement,\n CollapsibleTriggerProps\n>(function CollapsibleTrigger(props, ref) {\n const { children, className, onClick } = props;\n\n const { open, setOpen, panelId } = useCollapsibleContext();\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n setOpen(event, !open);\n onClick?.(event);\n };\n\n if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n // Should we log or throw error?\n return <>{children}</>;\n }\n\n return cloneElement(children, {\n ...mergeProps(\n {\n className: clsx(withBaseName(), className),\n \"aria-expanded\": open,\n \"aria-controls\": panelId,\n onClick: handleClick,\n },\n children.props,\n ),\n ref,\n });\n});\n"],"names":["makePrefixer","forwardRef","CollapsibleTrigger","useCollapsibleContext","isValidElement","cloneElement","mergeProps","clsx"],"mappings":";;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAqB,GAAAC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAY,GAAA,KAAA;AAEzC,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAYC,wCAAsB,EAAA;AAEzD,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAQ,OAAA,CAAA,KAAA,EAAO,CAAC,IAAI,CAAA;AACpB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAuC,QAAQ,CAAG,EAAA;AAElE,IAAA,6DAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EAAA,OAAOC,mBAAa,QAAU,EAAA;AAAA,IAC5B,GAAGC,eAAA;AAAA,MACD;AAAA,QACE,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,eAAiB,EAAA,IAAA;AAAA,QACjB,eAAiB,EAAA,OAAA;AAAA,QACjB,OAAS,EAAA;AAAA,OACX;AAAA,MACA,QAAS,CAAA;AAAA,KACX;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n useEffect,\n useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n alphaValue: number;\n showAsOpacity?: boolean;\n onSubmit: (alpha: number, e?: ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n alphaValue,\n onSubmit,\n showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\n const [alphaInputValue, setAlphaInputValue] = useState<string>(\n !Number.isNaN(alphaValue) ? alphaValue.toString() : \"\",\n );\n\n useEffect(() => {\n setAlphaInputValue(!Number.isNaN(alphaValue) ? alphaValue.toString() : \"\");\n }, [alphaValue]);\n\n const handleAlphaInputChange = (\n event: ChangeEvent<HTMLInputElement>,\n newValue: string,\n ): void => {\n const value = newValue.replace(\"%\", \"\");\n let alpha: string = value;\n\n if (value.trim() === \"\" || Number.isNaN(value)) {\n alpha = \"\";\n }\n\n if (showAsOpacity && Number.parseFloat(value)) {\n alpha = (Number.parseFloat(value) / 100).toString();\n }\n\n if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n alpha = value;\n }\n\n setAlphaInputValue(alpha);\n };\n\n const handleKeyDownAlpha = (e: KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === \"Enter\") {\n const alpha =\n alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n ? Number.parseFloat(alphaInputValue)\n : 0;\n const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n setAlphaInputValue(validatedAlpha.toString());\n onSubmit(validatedAlpha);\n }\n };\n\n const handleOnBlurAlpha = (e: FocusEvent<HTMLInputElement>): void => {\n // Guard against parseFloat('') becoming NaN\n const alpha =\n alphaInputValue.trim() !== \"\" ? Number.parseFloat(alphaInputValue) : 0;\n\n const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n setAlphaInputValue(validatedAlpha.toString());\n onSubmit(validatedAlpha, e);\n };\n\n return (\n <Input\n inputProps={{\n // @ts-
|
|
1
|
+
{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n useEffect,\n useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n alphaValue: number;\n showAsOpacity?: boolean;\n onSubmit: (alpha: number, e?: ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n alphaValue,\n onSubmit,\n showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\n const [alphaInputValue, setAlphaInputValue] = useState<string>(\n !Number.isNaN(alphaValue) ? alphaValue.toString() : \"\",\n );\n\n useEffect(() => {\n setAlphaInputValue(!Number.isNaN(alphaValue) ? alphaValue.toString() : \"\");\n }, [alphaValue]);\n\n const handleAlphaInputChange = (\n event: ChangeEvent<HTMLInputElement>,\n newValue: string,\n ): void => {\n const value = newValue.replace(\"%\", \"\");\n let alpha: string = value;\n\n if (value.trim() === \"\" || Number.isNaN(value)) {\n alpha = \"\";\n }\n\n if (showAsOpacity && Number.parseFloat(value)) {\n alpha = (Number.parseFloat(value) / 100).toString();\n }\n\n if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n alpha = value;\n }\n\n setAlphaInputValue(alpha);\n };\n\n const handleKeyDownAlpha = (e: KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === \"Enter\") {\n const alpha =\n alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n ? Number.parseFloat(alphaInputValue)\n : 0;\n const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n setAlphaInputValue(validatedAlpha.toString());\n onSubmit(validatedAlpha);\n }\n };\n\n const handleOnBlurAlpha = (e: FocusEvent<HTMLInputElement>): void => {\n // Guard against parseFloat('') becoming NaN\n const alpha =\n alphaInputValue.trim() !== \"\" ? Number.parseFloat(alphaInputValue) : 0;\n\n const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n setAlphaInputValue(validatedAlpha.toString());\n onSubmit(validatedAlpha, e);\n };\n\n return (\n <Input\n inputProps={{\n // @ts-expect-error\n \"data-testid\": \"a-input\",\n }}\n className={clsx({\n [withBaseName(\"rgbaInput\")]: !showAsOpacity,\n [withBaseName(\"opacityInput\")]: showAsOpacity,\n })}\n value={\n showAsOpacity\n ? alphaInputValue\n ? `${(Number.parseFloat(alphaInputValue) * 100).toString()}%`\n : \"%\"\n : alphaInputValue\n }\n onChange={handleAlphaInputChange}\n onBlur={handleOnBlurAlpha}\n onKeyDown={handleKeyDownAlpha}\n />\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","jsx","Input","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n makePrefixer,\n Overlay,\n OverlayPanel,\n OverlayPanelCloseButton,\n OverlayPanelContent,\n OverlayTrigger,\n} from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ChangeEvent, useState } from \"react\";\nimport type { Color } from \"./Color\";\nimport colorChooserCss from \"./ColorChooser.css\";\nimport {\n convertColorMapValueToHex,\n getColorNameByHexValue,\n getHexValue,\n hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { isTransparent } from \"./color-utils\";\nimport { saltColorMap } from \"./colorMap\";\nimport { createTabsMapping } from \"./createTabsMapping\";\nimport { type ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n hexValue: string | undefined,\n tabs: ColorChooserTabs,\n saltColorOverrides: Record<string, string> | undefined,\n): number {\n if (tabs.Swatches && tabs[\"Color Picker\"]) {\n const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n const colors = saltColorOverrides ?? saltColorMap;\n // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n if (\n hexNoAlpha &&\n !Object.keys(colors).find(\n (key: string) =>\n convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n hexNoAlpha?.toLowerCase(),\n )\n ) {\n return 1;\n }\n }\n return 0;\n}\n\nexport interface ColorChooserProps {\n color: Color | undefined;\n defaultAlpha?: number;\n disableAlphaChooser?: boolean;\n displayHexOnly?: boolean;\n hideLabel?: boolean;\n onClear: () => void; // called when user clicks \"default\" button\n onSelect: (\n color: Color | undefined,\n finalSelection: boolean,\n event?: ChangeEvent,\n ) => void;\n placeholder?: string;\n buttonProps?: Partial<ButtonProps>;\n saltColorOverrides?: Record<string, string>;\n showSwatches?: boolean;\n showColorPicker?: boolean;\n readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n onClear,\n onSelect,\n color,\n showSwatches = true,\n showColorPicker = true,\n defaultAlpha = 1,\n disableAlphaChooser = false,\n hideLabel = false,\n placeholder,\n buttonProps,\n saltColorOverrides,\n readOnly = false,\n displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-chooser\",\n css: colorChooserCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n\n const allColors: string[][] = saltColorOverrides\n ? getColorPalettes(saltColorOverrides)\n : getColorPalettes();\n const displayColorName = displayHexOnly\n ? getHexValue(color?.hex, disableAlphaChooser)\n : getColorNameByHexValue(\n color?.hex,\n disableAlphaChooser,\n saltColorOverrides,\n );\n\n const handleOpenChange = (open: boolean) => setOpen(open);\n\n const alphaForTabs = isTransparent(color?.hex)\n ? defaultAlpha\n : (color?.rgba?.a ?? defaultAlpha);\n\n const tabsMapping = createTabsMapping({\n swatches: showSwatches,\n colorPicker: showColorPicker,\n disableAlphaChooser,\n allColors,\n color,\n alpha: alphaForTabs,\n handleColorChange: onSelect,\n displayColorName,\n placeholder,\n onDialogClosed: () => {\n setOpen(false);\n },\n });\n\n const [activeTab, setActiveTab] = useState<number>(\n getActiveTab(color?.hex, tabsMapping, saltColorOverrides),\n );\n const onDefaultSelected = (): void => {\n if (activeTab === 0 && showSwatches) {\n onClear();\n handleOpenChange(false);\n } else {\n onClear();\n }\n };\n\n const onTabClick = (index: number): void => {\n setActiveTab(index);\n };\n\n const overlayContent = (\n <div\n className={clsx(withBaseName(\"overlayContent\"))}\n data-testid=\"overlay-content\"\n >\n <Button\n data-testid=\"default-button\"\n variant=\"secondary\"\n className={clsx(withBaseName(\"defaultButton\"))}\n onClick={onDefaultSelected}\n >\n <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n Default\n </Button>\n <DictTabs\n tabs={tabsMapping}\n hexValue={color?.hex}\n onTabClick={onTabClick}\n activeTab={activeTab}\n />\n </div>\n );\n\n return (\n <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n <OverlayTrigger>\n <Button\n className={clsx(withBaseName(\"overlayButton\"), {\n [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n })}\n // @ts-ignore\n data-testid=\"color-chooser-overlay-button\"\n disabled={readOnly}\n {...buttonProps}\n >\n {color && (\n <div\n className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n color?.hex.startsWith(\"#ffffff\"),\n [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n color?.hex,\n ),\n })}\n style={{\n backgroundColor: color?.hex,\n }}\n />\n )}\n {!hideLabel && (\n <div className={withBaseName(\"overlayButtonText\")}>\n {displayColorName ?? placeholder ?? \"No color selected\"}\n </div>\n )}\n </Button>\n </OverlayTrigger>\n <OverlayPanel>\n <OverlayPanelCloseButton />\n <OverlayPanelContent>{overlayContent}</OverlayPanelContent>\n </OverlayPanel>\n </Overlay>\n );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelCloseButton","OverlayPanelContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n makePrefixer,\n Overlay,\n OverlayPanel,\n OverlayPanelCloseButton,\n OverlayPanelContent,\n OverlayTrigger,\n} from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ChangeEvent, useState } from \"react\";\nimport type { Color } from \"./Color\";\nimport colorChooserCss from \"./ColorChooser.css\";\nimport {\n convertColorMapValueToHex,\n getColorNameByHexValue,\n getHexValue,\n hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { isTransparent } from \"./color-utils\";\nimport { saltColorMap } from \"./colorMap\";\nimport { createTabsMapping } from \"./createTabsMapping\";\nimport { type ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n hexValue: string | undefined,\n tabs: ColorChooserTabs,\n saltColorOverrides: Record<string, string> | undefined,\n): number {\n if (tabs.Swatches && tabs[\"Color Picker\"]) {\n const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n const colors = saltColorOverrides ?? saltColorMap;\n // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n if (\n hexNoAlpha &&\n !Object.keys(colors).find(\n (key: string) =>\n convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n hexNoAlpha?.toLowerCase(),\n )\n ) {\n return 1;\n }\n }\n return 0;\n}\n\nexport interface ColorChooserProps {\n color: Color | undefined;\n defaultAlpha?: number;\n disableAlphaChooser?: boolean;\n displayHexOnly?: boolean;\n hideLabel?: boolean;\n onClear: () => void; // called when user clicks \"default\" button\n onSelect: (\n color: Color | undefined,\n finalSelection: boolean,\n event?: ChangeEvent,\n ) => void;\n placeholder?: string;\n buttonProps?: Partial<ButtonProps>;\n saltColorOverrides?: Record<string, string>;\n showSwatches?: boolean;\n showColorPicker?: boolean;\n readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n onClear,\n onSelect,\n color,\n showSwatches = true,\n showColorPicker = true,\n defaultAlpha = 1,\n disableAlphaChooser = false,\n hideLabel = false,\n placeholder,\n buttonProps,\n saltColorOverrides,\n readOnly = false,\n displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-chooser\",\n css: colorChooserCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n\n const allColors: string[][] = saltColorOverrides\n ? getColorPalettes(saltColorOverrides)\n : getColorPalettes();\n const displayColorName = displayHexOnly\n ? getHexValue(color?.hex, disableAlphaChooser)\n : getColorNameByHexValue(\n color?.hex,\n disableAlphaChooser,\n saltColorOverrides,\n );\n\n const handleOpenChange = (open: boolean) => setOpen(open);\n\n const alphaForTabs = isTransparent(color?.hex)\n ? defaultAlpha\n : (color?.rgba?.a ?? defaultAlpha);\n\n const tabsMapping = createTabsMapping({\n swatches: showSwatches,\n colorPicker: showColorPicker,\n disableAlphaChooser,\n allColors,\n color,\n alpha: alphaForTabs,\n handleColorChange: onSelect,\n displayColorName,\n placeholder,\n onDialogClosed: () => {\n setOpen(false);\n },\n });\n\n const [activeTab, setActiveTab] = useState<number>(\n getActiveTab(color?.hex, tabsMapping, saltColorOverrides),\n );\n const onDefaultSelected = (): void => {\n if (activeTab === 0 && showSwatches) {\n onClear();\n handleOpenChange(false);\n } else {\n onClear();\n }\n };\n\n const onTabClick = (index: number): void => {\n setActiveTab(index);\n };\n\n const overlayContent = (\n <div\n className={clsx(withBaseName(\"overlayContent\"))}\n data-testid=\"overlay-content\"\n >\n <Button\n data-testid=\"default-button\"\n variant=\"secondary\"\n className={clsx(withBaseName(\"defaultButton\"))}\n onClick={onDefaultSelected}\n >\n <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n Default\n </Button>\n <DictTabs\n tabs={tabsMapping}\n hexValue={color?.hex}\n onTabClick={onTabClick}\n activeTab={activeTab}\n />\n </div>\n );\n\n return (\n <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n <OverlayTrigger>\n <Button\n className={clsx(withBaseName(\"overlayButton\"), {\n [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n })}\n data-testid=\"color-chooser-overlay-button\"\n disabled={readOnly}\n {...buttonProps}\n >\n {color && (\n <div\n className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n color?.hex.startsWith(\"#ffffff\"),\n [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n color?.hex,\n ),\n })}\n style={{\n backgroundColor: color?.hex,\n }}\n />\n )}\n {!hideLabel && (\n <div className={withBaseName(\"overlayButtonText\")}>\n {displayColorName ?? placeholder ?? \"No color selected\"}\n </div>\n )}\n </Button>\n </OverlayTrigger>\n <OverlayPanel>\n <OverlayPanelCloseButton />\n <OverlayPanelContent>{overlayContent}</OverlayPanelContent>\n </OverlayPanel>\n </Overlay>\n );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelCloseButton","OverlayPanelContent"],"mappings":"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"}
|
|
@@ -40,7 +40,7 @@ const DictTabs = ({
|
|
|
40
40
|
"aria-hidden": activeTab !== idx,
|
|
41
41
|
hidden: activeTab !== idx,
|
|
42
42
|
children: (tab == null ? void 0 : tab.props) ? (
|
|
43
|
-
// @ts-
|
|
43
|
+
// @ts-expect-error
|
|
44
44
|
/* @__PURE__ */ jsxRuntime.jsx(TabComponent, { ...tab == null ? void 0 : tab.props })
|
|
45
45
|
) : null
|
|
46
46
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Tab, Tabstrip, type TabstripProps } from \"../tabs\";\nimport type { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport type { Swatches, SwatchesTabProps } from \"./Swatches\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserDictTabs\");\n\nexport type ColorChooserTabs = {\n Swatches?: {\n Component: typeof Swatches;\n props: SwatchesTabProps;\n };\n \"Color Picker\"?: {\n Component: typeof ColorPicker;\n props: ColorPickerProps;\n };\n};\n\nexport interface DictTabsProps\n extends Omit<TabstripProps, \"tabs\" | \"renderContent\" | \"classes\"> {\n hexValue: string | undefined;\n tabs: ColorChooserTabs;\n onTabClick: (index: number) => void;\n activeTab: number;\n}\n\nexport const DictTabs = ({\n tabs,\n hexValue,\n onTabClick,\n activeTab,\n ...props\n}: DictTabsProps): JSX.Element => {\n return (\n <div>\n <Tabstrip\n {...props}\n data-testid=\"color-chooser-tabstrip\"\n className={clsx(withBaseName(\"wrapper\"))}\n activeTabIndex={activeTab}\n onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n >\n {[...Object.keys(tabs)].map((label, i) => (\n <Tab className={clsx(withBaseName(\"text\"))} label={label} key={i} />\n ))}\n </Tabstrip>\n {[...Object.values(tabs)].map((tab, idx) => {\n if (!tab) {\n return null;\n }\n const TabComponent: typeof Swatches | typeof ColorPicker =\n tab?.Component;\n\n return (\n <div\n aria-hidden={activeTab !== idx}\n hidden={activeTab !== idx}\n key={idx}\n >\n {tab?.props ? (\n // @ts-
|
|
1
|
+
{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Tab, Tabstrip, type TabstripProps } from \"../tabs\";\nimport type { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport type { Swatches, SwatchesTabProps } from \"./Swatches\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserDictTabs\");\n\nexport type ColorChooserTabs = {\n Swatches?: {\n Component: typeof Swatches;\n props: SwatchesTabProps;\n };\n \"Color Picker\"?: {\n Component: typeof ColorPicker;\n props: ColorPickerProps;\n };\n};\n\nexport interface DictTabsProps\n extends Omit<TabstripProps, \"tabs\" | \"renderContent\" | \"classes\"> {\n hexValue: string | undefined;\n tabs: ColorChooserTabs;\n onTabClick: (index: number) => void;\n activeTab: number;\n}\n\nexport const DictTabs = ({\n tabs,\n hexValue,\n onTabClick,\n activeTab,\n ...props\n}: DictTabsProps): JSX.Element => {\n return (\n <div>\n <Tabstrip\n {...props}\n data-testid=\"color-chooser-tabstrip\"\n className={clsx(withBaseName(\"wrapper\"))}\n activeTabIndex={activeTab}\n onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n >\n {[...Object.keys(tabs)].map((label, i) => (\n <Tab className={clsx(withBaseName(\"text\"))} label={label} key={i} />\n ))}\n </Tabstrip>\n {[...Object.values(tabs)].map((tab, idx) => {\n if (!tab) {\n return null;\n }\n const TabComponent: typeof Swatches | typeof ColorPicker =\n tab?.Component;\n\n return (\n <div\n aria-hidden={activeTab !== idx}\n hidden={activeTab !== idx}\n key={idx}\n >\n {tab?.props ? (\n // @ts-expect-error\n <TabComponent {...tab?.props} />\n ) : null}\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["makePrefixer","jsx","Tabstrip","clsx","Tab"],"mappings":";;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAkC,KAAA;AAChC,EAAA,uCACG,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAY,EAAA,wBAAA;AAAA,QACZ,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QACvC,cAAgB,EAAA,SAAA;AAAA,QAChB,cAAgB,EAAA,CAAC,QAAqB,KAAA,UAAA,CAAW,QAAQ,CAAA;AAAA,QAExD,QAAA,EAAA,CAAC,GAAG,MAAO,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CAAE,IAAI,CAAC,KAAA,EAAO,sBACjCF,cAAA,CAAAG,OAAA,EAAA,EAAI,WAAWD,SAAK,CAAA,YAAA,CAAa,MAAM,CAAC,CAAA,EAAG,KAAmB,EAAA,EAAA,CAAG,CACnE;AAAA;AAAA,KACH;AAAA,IACC,CAAC,GAAG,MAAA,CAAO,MAAO,CAAA,IAAI,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,GAAQ,KAAA;AAC1C,MAAA,IAAI,CAAC,GAAK,EAAA;AACR,QAAO,OAAA,IAAA;AAAA;AAET,MAAA,MAAM,eACJ,GAAK,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAA,SAAA;AAEP,MACE,uBAAAF,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,eAAa,SAAc,KAAA,GAAA;AAAA,UAC3B,QAAQ,SAAc,KAAA,GAAA;AAAA,UAGrB,QAAK,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAA,KAAA;AAAA;AAAA,4BAEHA,cAAA,CAAA,YAAA,EAAA,EAAc,GAAG,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,KAAO,EAAA;AAAA,cAC5B;AAAA,SAAA;AAAA,QALC;AAAA,OAMP;AAAA,KAEH;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -29,7 +29,7 @@ const RGBInput = ({
|
|
|
29
29
|
}, [rgbaValue, value]);
|
|
30
30
|
const handleRGBInputChange = (e, value2) => {
|
|
31
31
|
let rgb;
|
|
32
|
-
rgb = Number.parseInt(value2);
|
|
32
|
+
rgb = Number.parseInt(value2, 10);
|
|
33
33
|
if (value2.trim() === "" || Number.isNaN(rgb)) {
|
|
34
34
|
rgb = "";
|
|
35
35
|
}
|
|
@@ -61,7 +61,7 @@ const RGBInput = ({
|
|
|
61
61
|
InputLegacy.InputLegacy,
|
|
62
62
|
{
|
|
63
63
|
inputProps: {
|
|
64
|
-
// @ts-
|
|
64
|
+
// @ts-expect-error
|
|
65
65
|
"data-testid": `${value}-input`
|
|
66
66
|
},
|
|
67
67
|
className: withBaseName("rgbaInput"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n useEffect,\n useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport type { RGBAValue } from \"./Color\";\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\ninterface RGBInputProps {\n rgbaValue: RGBAValue;\n value: \"r\" | \"g\" | \"b\";\n onSubmit: (rgb: RGBAValue, e?: ChangeEvent) => void;\n}\n\nexport const RGBInput = ({\n rgbaValue,\n value,\n onSubmit,\n}: RGBInputProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\n const [rgbaInputValue, setRgbaInputValue] = useState<number | string>(\n rgbaValue ? rgbaValue[value] : \"\",\n );\n\n useEffect(() => {\n setRgbaInputValue(rgbaValue ? rgbaValue[value] : \"\");\n }, [rgbaValue, value]);\n\n const handleRGBInputChange = (\n e: ChangeEvent<HTMLInputElement>,\n value: string,\n ): void => {\n let rgb: string | number;\n\n rgb = Number.parseInt(value);\n\n if (value.trim() === \"\" || Number.isNaN(rgb)) {\n rgb = \"\";\n }\n\n setRgbaInputValue(rgb);\n };\n\n const handleKeyDownRGB = (e: KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === \"Enter\") {\n const newRgb = { ...rgbaValue, [value]: e.currentTarget.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb);\n }\n };\n\n const handleOnBlurRGB = (e: FocusEvent<HTMLInputElement>): void => {\n const newRgb = { ...rgbaValue, [value]: e.target.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb, e);\n };\n\n return (\n <Input\n inputProps={{\n // @ts-
|
|
1
|
+
{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n useEffect,\n useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport type { RGBAValue } from \"./Color\";\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\ninterface RGBInputProps {\n rgbaValue: RGBAValue;\n value: \"r\" | \"g\" | \"b\";\n onSubmit: (rgb: RGBAValue, e?: ChangeEvent) => void;\n}\n\nexport const RGBInput = ({\n rgbaValue,\n value,\n onSubmit,\n}: RGBInputProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\n const [rgbaInputValue, setRgbaInputValue] = useState<number | string>(\n rgbaValue ? rgbaValue[value] : \"\",\n );\n\n useEffect(() => {\n setRgbaInputValue(rgbaValue ? rgbaValue[value] : \"\");\n }, [rgbaValue, value]);\n\n const handleRGBInputChange = (\n e: ChangeEvent<HTMLInputElement>,\n value: string,\n ): void => {\n let rgb: string | number;\n\n rgb = Number.parseInt(value, 10);\n\n if (value.trim() === \"\" || Number.isNaN(rgb)) {\n rgb = \"\";\n }\n\n setRgbaInputValue(rgb);\n };\n\n const handleKeyDownRGB = (e: KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === \"Enter\") {\n const newRgb = { ...rgbaValue, [value]: e.currentTarget.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb);\n }\n };\n\n const handleOnBlurRGB = (e: FocusEvent<HTMLInputElement>): void => {\n const newRgb = { ...rgbaValue, [value]: e.target.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb, e);\n };\n\n return (\n <Input\n inputProps={{\n // @ts-expect-error\n \"data-testid\": `${value}-input`,\n }}\n className={withBaseName(\"rgbaInput\")}\n value={rgbaInputValue.toString()}\n onChange={handleRGBInputChange}\n onBlur={handleOnBlurRGB}\n onKeyDown={handleKeyDownRGB}\n />\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","value","jsx","Input"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type CollectionItem,\n itemToString as defaultItemToString,\n type SelectionChangeHandler,\n type SelectionStrategy,\n type SingleSelectionStrategy,\n} from \"../common-hooks\";\nimport type { DropdownHookProps, DropdownHookResult } from \"../dropdown\";\nimport type { InputLegacyProps as InputProps } from \"../input-legacy\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n Omit<\n ListHookProps<Item, Strategy>,\n \"containerRef\" | \"defaultSelected\" | \"selected\" | \"onSelect\"\n > {\n InputProps?: InputProps;\n allowFreeText?: boolean;\n ariaLabel?: string;\n defaultValue?: string;\n id: string;\n itemToString?: (item: Item) => string;\n stringToItem?: (value?: string) => Item | null | undefined;\n value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n extends Pick<\n ListHookResult<Item, Selection>,\n | \"focusVisible\"\n | \"highlightedIndex\"\n | \"listControlProps\"\n | \"listHandlers\"\n | \"selected\"\n >,\n Partial<DropdownHookResult> {\n inputProps: InputProps;\n onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n allowFreeText,\n ariaLabel,\n collectionHook,\n defaultIsOpen,\n defaultValue,\n onBlur,\n onFocus,\n onChange,\n onSelect,\n id,\n isOpen: isOpenProp,\n itemToString = defaultItemToString as (item: Item) => string,\n onOpenChange,\n onSelectionChange,\n selectionStrategy,\n stringToItem,\n value: valueProp,\n InputProps: inputProps = {\n onBlur,\n onFocus,\n onChange,\n onSelect,\n },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n type selectedCollectionType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[];\n const isMultiSelect =\n selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n valueProp ?? defaultValue ?? null,\n );\n\n const {\n data: indexPositions,\n itemToCollectionItem,\n setFilterPattern,\n stringToCollectionItem,\n } = collectionHook;\n const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n const setSelectedRef = useRef<\n null | ListHookResult<Item, Selection>[\"setSelected\"]\n >(null);\n // Input select events are used to identify user navigation within the input text.\n // The initial select event fired on focus is an exception that we ignore.\n const ignoreSelectOnFocus = useRef(true);\n const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen ?? false,\n name: \"useDropdownList\",\n });\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"ComboBox\",\n state: \"value\",\n });\n\n const collectionItemsToItem = useCallback(\n (\n sel: CollectionItem<Item> | null | CollectionItem<Item>[],\n ): Selection extends SingleSelectionStrategy ? Item | null : Item[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[];\n if (Array.isArray(sel)) {\n return sel.map((i) => i.value) as returnType;\n }\n if (sel) {\n return sel.value as returnType;\n }\n return sel as returnType;\n },\n [],\n );\n\n const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n useState(true);\n const [quickSelection, setQuickSelection] = useState(false);\n\n const highlightSelectedItem = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected == null) {\n setHighlightedIndexRef.current?.(-1);\n } else {\n const indexOfSelectedItem = indexPositions.indexOf(selected);\n setHighlightedIndexRef.current?.(indexOfSelectedItem);\n }\n },\n [indexPositions],\n );\n\n const setTextValue = useCallback(\n (value: string) => {\n setValue(value);\n setFilterPattern(value === \"\" ? undefined : value);\n },\n [setFilterPattern],\n );\n\n const reconcileInput = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n let value = \"\";\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected != null && selected.value !== null) {\n value = itemToString(selected.value);\n }\n setTextValue(value);\n if (value === \"\") {\n setHighlightedIndexRef.current?.(-1);\n } else {\n highlightSelectedItem(selected);\n }\n },\n [highlightSelectedItem, itemToString, setTextValue],\n );\n\n const applySelection = useCallback(\n (evt: any, selected: selectedCollectionType) => {\n if (!isMultiSelect) {\n setIsOpen(false);\n }\n selectedRef.current = selected;\n reconcileInput(selected);\n onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n },\n [collectionItemsToItem, isMultiSelect, onSelectionChange, reconcileInput],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<Item, Selection>\n >(\n (evt, selected) => {\n if (!isMultiSelect) {\n const selectedCollectionItem = itemToCollectionItem<\n Selection,\n typeof selected\n >(selected);\n applySelection(evt, selectedCollectionItem);\n }\n },\n [applySelection, isMultiSelect, itemToCollectionItem],\n );\n\n const handleFirstItemSelection = useCallback(\n (evt: KeyboardEvent | ChangeEvent) => {\n if (\n !allowFreeText &&\n (evt as KeyboardEvent).key === \"Enter\" &&\n quickSelection\n ) {\n const [firstItem] = indexPositions;\n applySelection(evt, firstItem as selectedCollectionType);\n }\n },\n [allowFreeText, applySelection, indexPositions, quickSelection],\n );\n\n const {\n onKeyDown: inputOnKeyDown,\n onFocus: inputOnFocus,\n onChange: inputOnChange,\n onBlur: inputOnBlur,\n onSelect: inputOnSelect,\n } = inputProps;\n\n const handleInputKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n if (\"Escape\" === evt.key) {\n if (allowFreeText) {\n setTextValue(\"\");\n } else {\n reconcileInput();\n }\n } else if (\"Tab\" === evt.key) {\n if (!allowFreeText) {\n reconcileInput();\n }\n }\n\n handleFirstItemSelection(evt);\n\n inputOnKeyDown?.(evt as KeyboardEvent<HTMLInputElement>);\n },\n [\n allowFreeText,\n handleFirstItemSelection,\n inputOnKeyDown,\n reconcileInput,\n setTextValue,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(() => {\n setDisableAriaActiveDescendant(false);\n }, []);\n\n const {\n focusVisible,\n setHighlightedIndex,\n highlightedIndex,\n listControlProps,\n listHandlers: listHookListHandlers,\n selected,\n setSelected,\n } = useList<Item, Selection>({\n collectionHook,\n defaultHighlightedIndex: -1,\n disableAriaActiveDescendant,\n disableHighlightOnFocus: true,\n disableTypeToSelect: true,\n onKeyboardNavigation: handleKeyboardNavigation,\n onKeyDown: handleInputKeyDown,\n onSelectionChange: handleSelectionChange,\n containerRef: NULL_REF,\n // we are controlling selection from a ref value - is this right ?\n selected: selectedRef.current,\n selectionKeys: EnterOnly,\n selectionStrategy,\n tabToSelect: !isMultiSelect,\n });\n\n setHighlightedIndexRef.current = setHighlightedIndex;\n setSelectedRef.current = setSelected;\n // selectedRef.current = selected;\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n setIsOpen(open);\n if (!open) {\n setQuickSelection(false);\n }\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n\n const { onClick: listHandlersOnClick } = listHookListHandlers;\n const handleListClick = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n //TODO use ref\n document.getElementById(`${id}-input`)?.focus();\n // const inputEl = inputRef.current;\n console.log(\"handle list click\");\n listHandlersOnClick?.(evt);\n // if (inputEl != null) {\n // inputEl.focus();\n // }\n\n // if (restListProps.onClick) {\n // restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n // }\n\n // notifyPopper(event);\n },\n [id, listHandlersOnClick],\n );\n\n const handleInputChange = useCallback(\n (evt: ChangeEvent<HTMLInputElement>) => {\n const newValue = evt.target.value;\n setValue(newValue);\n\n if (newValue?.trim().length) {\n setFilterPattern(newValue);\n } else {\n setFilterPattern(undefined);\n if (selectedRef.current !== null) {\n onSelectionChange?.(\n evt,\n null as Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[],\n );\n }\n selectedRef.current = null as selectedCollectionType;\n }\n\n setIsOpen(true);\n\n setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n inputOnChange?.(evt, newValue);\n },\n [allowFreeText, inputOnChange, setFilterPattern, onSelectionChange],\n );\n\n const { onFocus: listOnFocus } = listControlProps;\n const handleInputFocus = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n setDisableAriaActiveDescendant(false);\n listOnFocus?.(evt);\n inputOnFocus?.(evt);\n },\n [inputOnFocus, listOnFocus],\n );\n\n const listFocused = useCallback(\n (evt: FocusEvent) => {\n const element = evt.relatedTarget as HTMLElement;\n return element?.id === `${id}-list`;\n },\n [id],\n );\n\n // When focus leaves a free text combo, check to see if the entered text is\n // a valid selection, if so fire a change event\n const selectInputValue = useCallback(\n (evt: ChangeEvent) => {\n const text = value.trim();\n if (text) {\n const selectedCollectionItem = stringToCollectionItem<\"default\">(\n text,\n ) as selectedCollectionType;\n if (selectedCollectionItem) {\n if (Array.isArray(selectedCollectionItem)) {\n // TODO multi select\n } else if (selectedCollectionItem !== selected) {\n setSelectedRef.current?.(selectedCollectionItem);\n onSelectionChange?.(\n evt,\n selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[],\n );\n }\n } else if (stringToItem) {\n const item = stringToItem(text);\n if (item) {\n console.log(\"we have a new item\");\n }\n }\n // How do we check if string is Item\n }\n },\n [onSelectionChange, selected, stringToItem, stringToCollectionItem, value],\n );\n\n const { onBlur: listOnBlur } = listControlProps;\n const handleInputBlur = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n if (listFocused(evt)) {\n // nothing doing\n } else {\n listOnBlur?.(evt);\n inputOnBlur?.(evt);\n if (allowFreeText) {\n selectInputValue(evt as ChangeEvent);\n } else {\n reconcileInput();\n }\n setDisableAriaActiveDescendant(true);\n ignoreSelectOnFocus.current = true;\n }\n },\n [\n allowFreeText,\n listFocused,\n inputOnBlur,\n listOnBlur,\n reconcileInput,\n selectInputValue,\n ],\n );\n\n const handleInputSelect = useCallback(\n (event: SyntheticEvent<HTMLDivElement>) => {\n if (ignoreSelectOnFocus.current) {\n ignoreSelectOnFocus.current = false;\n } else {\n setDisableAriaActiveDescendant(true);\n }\n inputOnSelect?.(event);\n },\n [inputOnSelect],\n );\n\n // If we have selected item(s) and we filter down the list by typing,\n // the position of selected items within the list may be changing.\n // Relocate highlighted index to the selection whenever this happens,\n // so if we resume keyboard navigation, navigation begins from the selected\n // item.\n useEffect(() => {\n highlightSelectedItem();\n // TODO may need to scrollIntoView\n if (indexPositions.length === 0) {\n setIsOpen(false);\n }\n }, [highlightSelectedItem, indexPositions.length]);\n\n // const activeDescendant: string | undefined = selectionChanged\n // ? \"\"\n // : undefined;\n\n const mergedInputProps = {\n ...inputProps.inputProps,\n // \"aria-owns\": listId,\n \"aria-label\": ariaLabel,\n };\n\n return {\n focusVisible,\n highlightedIndex,\n isOpen,\n onOpenChange: handleOpenChange,\n inputProps: {\n ...inputProps,\n // \"aria-activedescendant\": activeDescendant,\n id: `${id}-input`,\n inputProps: mergedInputProps,\n onChange: handleInputChange,\n onSelect: handleInputSelect,\n role: \"combobox\",\n value,\n },\n // listControlProps,\n listControlProps: {\n ...listControlProps,\n onBlur: handleInputBlur,\n onFocus: handleInputFocus,\n },\n listHandlers: {\n ...listHookListHandlers,\n onClick: handleListClick,\n },\n selected,\n };\n};\n"],"names":["itemToString","defaultItemToString","useRef","useControlled","useCallback","useState","selected","value","useList","useEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type CollectionItem,\n itemToString as defaultItemToString,\n type SelectionChangeHandler,\n type SelectionStrategy,\n type SingleSelectionStrategy,\n} from \"../common-hooks\";\nimport type { DropdownHookProps, DropdownHookResult } from \"../dropdown\";\nimport type { InputLegacyProps as InputProps } from \"../input-legacy\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n Omit<\n ListHookProps<Item, Strategy>,\n \"containerRef\" | \"defaultSelected\" | \"selected\" | \"onSelect\"\n > {\n InputProps?: InputProps;\n allowFreeText?: boolean;\n ariaLabel?: string;\n defaultValue?: string;\n id: string;\n itemToString?: (item: Item) => string;\n stringToItem?: (value?: string) => Item | null | undefined;\n value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n extends Pick<\n ListHookResult<Item, Selection>,\n | \"focusVisible\"\n | \"highlightedIndex\"\n | \"listControlProps\"\n | \"listHandlers\"\n | \"selected\"\n >,\n Partial<DropdownHookResult> {\n inputProps: InputProps;\n onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n Item,\n Selection extends SelectionStrategy = \"default\",\n>({\n allowFreeText,\n ariaLabel,\n collectionHook,\n defaultIsOpen,\n defaultValue,\n onBlur,\n onFocus,\n onChange,\n onSelect,\n id,\n isOpen: isOpenProp,\n itemToString = defaultItemToString as (item: Item) => string,\n onOpenChange,\n onSelectionChange,\n selectionStrategy,\n stringToItem,\n value: valueProp,\n InputProps: inputProps = {\n onBlur,\n onFocus,\n onChange,\n onSelect,\n },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n type selectedCollectionType = Selection extends SingleSelectionStrategy\n ? CollectionItem<Item> | null\n : CollectionItem<Item>[];\n const isMultiSelect =\n selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n valueProp ?? defaultValue ?? null,\n );\n\n const {\n data: indexPositions,\n itemToCollectionItem,\n setFilterPattern,\n stringToCollectionItem,\n } = collectionHook;\n const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n const setSelectedRef = useRef<\n null | ListHookResult<Item, Selection>[\"setSelected\"]\n >(null);\n // Input select events are used to identify user navigation within the input text.\n // The initial select event fired on focus is an exception that we ignore.\n const ignoreSelectOnFocus = useRef(true);\n const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen ?? false,\n name: \"useDropdownList\",\n });\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"ComboBox\",\n state: \"value\",\n });\n\n const collectionItemsToItem = useCallback(\n (\n sel: CollectionItem<Item> | null | CollectionItem<Item>[],\n ): Selection extends SingleSelectionStrategy ? Item | null : Item[] => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[];\n if (Array.isArray(sel)) {\n return sel.map((i) => i.value) as returnType;\n }\n if (sel) {\n return sel.value as returnType;\n }\n return sel as returnType;\n },\n [],\n );\n\n const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n useState(true);\n const [quickSelection, setQuickSelection] = useState(false);\n\n const highlightSelectedItem = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected == null) {\n setHighlightedIndexRef.current?.(-1);\n } else {\n const indexOfSelectedItem = indexPositions.indexOf(selected);\n setHighlightedIndexRef.current?.(indexOfSelectedItem);\n }\n },\n [indexPositions],\n );\n\n const setTextValue = useCallback(\n (value: string) => {\n setValue(value);\n setFilterPattern(value === \"\" ? undefined : value);\n },\n [setFilterPattern],\n );\n\n const reconcileInput = useCallback(\n (selected: selectedCollectionType = selectedRef.current) => {\n let value = \"\";\n if (Array.isArray(selected)) {\n console.log(\"TODO multi selection\");\n } else if (selected != null && selected.value !== null) {\n value = itemToString(selected.value);\n }\n setTextValue(value);\n if (value === \"\") {\n setHighlightedIndexRef.current?.(-1);\n } else {\n highlightSelectedItem(selected);\n }\n },\n [highlightSelectedItem, itemToString, setTextValue],\n );\n\n const applySelection = useCallback(\n (evt: SyntheticEvent, selected: selectedCollectionType) => {\n if (!isMultiSelect) {\n setIsOpen(false);\n }\n selectedRef.current = selected;\n reconcileInput(selected);\n onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n },\n [collectionItemsToItem, isMultiSelect, onSelectionChange, reconcileInput],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<Item, Selection>\n >(\n (evt, selected) => {\n if (!isMultiSelect) {\n const selectedCollectionItem = itemToCollectionItem<\n Selection,\n typeof selected\n >(selected);\n applySelection(evt, selectedCollectionItem);\n }\n },\n [applySelection, isMultiSelect, itemToCollectionItem],\n );\n\n const handleFirstItemSelection = useCallback(\n (evt: KeyboardEvent | ChangeEvent) => {\n if (\n !allowFreeText &&\n (evt as KeyboardEvent).key === \"Enter\" &&\n quickSelection\n ) {\n const [firstItem] = indexPositions;\n applySelection(evt, firstItem as selectedCollectionType);\n }\n },\n [allowFreeText, applySelection, indexPositions, quickSelection],\n );\n\n const {\n onKeyDown: inputOnKeyDown,\n onFocus: inputOnFocus,\n onChange: inputOnChange,\n onBlur: inputOnBlur,\n onSelect: inputOnSelect,\n } = inputProps;\n\n const handleInputKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n if (\"Escape\" === evt.key) {\n if (allowFreeText) {\n setTextValue(\"\");\n } else {\n reconcileInput();\n }\n } else if (\"Tab\" === evt.key) {\n if (!allowFreeText) {\n reconcileInput();\n }\n }\n\n handleFirstItemSelection(evt);\n\n inputOnKeyDown?.(evt as KeyboardEvent<HTMLInputElement>);\n },\n [\n allowFreeText,\n handleFirstItemSelection,\n inputOnKeyDown,\n reconcileInput,\n setTextValue,\n ],\n );\n\n const handleKeyboardNavigation = useCallback(() => {\n setDisableAriaActiveDescendant(false);\n }, []);\n\n const {\n focusVisible,\n setHighlightedIndex,\n highlightedIndex,\n listControlProps,\n listHandlers: listHookListHandlers,\n selected,\n setSelected,\n } = useList<Item, Selection>({\n collectionHook,\n defaultHighlightedIndex: -1,\n disableAriaActiveDescendant,\n disableHighlightOnFocus: true,\n disableTypeToSelect: true,\n onKeyboardNavigation: handleKeyboardNavigation,\n onKeyDown: handleInputKeyDown,\n onSelectionChange: handleSelectionChange,\n containerRef: NULL_REF,\n // we are controlling selection from a ref value - is this right ?\n selected: selectedRef.current,\n selectionKeys: EnterOnly,\n selectionStrategy,\n tabToSelect: !isMultiSelect,\n });\n\n setHighlightedIndexRef.current = setHighlightedIndex;\n setSelectedRef.current = setSelected;\n // selectedRef.current = selected;\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n setIsOpen(open);\n if (!open) {\n setQuickSelection(false);\n }\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n\n const { onClick: listHandlersOnClick } = listHookListHandlers;\n const handleListClick = useCallback(\n (evt: MouseEvent<HTMLElement>) => {\n //TODO use ref\n document.getElementById(`${id}-input`)?.focus();\n // const inputEl = inputRef.current;\n console.log(\"handle list click\");\n listHandlersOnClick?.(evt);\n // if (inputEl != null) {\n // inputEl.focus();\n // }\n\n // if (restListProps.onClick) {\n // restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n // }\n\n // notifyPopper(event);\n },\n [id, listHandlersOnClick],\n );\n\n const handleInputChange = useCallback(\n (evt: ChangeEvent<HTMLInputElement>) => {\n const newValue = evt.target.value;\n setValue(newValue);\n\n if (newValue?.trim().length) {\n setFilterPattern(newValue);\n } else {\n setFilterPattern(undefined);\n if (selectedRef.current !== null) {\n onSelectionChange?.(\n evt,\n null as Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[],\n );\n }\n selectedRef.current = null as selectedCollectionType;\n }\n\n setIsOpen(true);\n\n setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n inputOnChange?.(evt, newValue);\n },\n [allowFreeText, inputOnChange, setFilterPattern, onSelectionChange],\n );\n\n const { onFocus: listOnFocus } = listControlProps;\n const handleInputFocus = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n setDisableAriaActiveDescendant(false);\n listOnFocus?.(evt);\n inputOnFocus?.(evt);\n },\n [inputOnFocus, listOnFocus],\n );\n\n const listFocused = useCallback(\n (evt: FocusEvent) => {\n const element = evt.relatedTarget as HTMLElement;\n return element?.id === `${id}-list`;\n },\n [id],\n );\n\n // When focus leaves a free text combo, check to see if the entered text is\n // a valid selection, if so fire a change event\n const selectInputValue = useCallback(\n (evt: ChangeEvent) => {\n const text = value.trim();\n if (text) {\n const selectedCollectionItem = stringToCollectionItem<\"default\">(\n text,\n ) as selectedCollectionType;\n if (selectedCollectionItem) {\n if (Array.isArray(selectedCollectionItem)) {\n // TODO multi select\n } else if (selectedCollectionItem !== selected) {\n setSelectedRef.current?.(selectedCollectionItem);\n onSelectionChange?.(\n evt,\n selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n ? Item | null\n : Item[],\n );\n }\n } else if (stringToItem) {\n const item = stringToItem(text);\n if (item) {\n console.log(\"we have a new item\");\n }\n }\n // How do we check if string is Item\n }\n },\n [onSelectionChange, selected, stringToItem, stringToCollectionItem, value],\n );\n\n const { onBlur: listOnBlur } = listControlProps;\n const handleInputBlur = useCallback(\n (evt: FocusEvent<HTMLInputElement>) => {\n if (listFocused(evt)) {\n // nothing doing\n } else {\n listOnBlur?.(evt);\n inputOnBlur?.(evt);\n if (allowFreeText) {\n selectInputValue(evt as ChangeEvent);\n } else {\n reconcileInput();\n }\n setDisableAriaActiveDescendant(true);\n ignoreSelectOnFocus.current = true;\n }\n },\n [\n allowFreeText,\n listFocused,\n inputOnBlur,\n listOnBlur,\n reconcileInput,\n selectInputValue,\n ],\n );\n\n const handleInputSelect = useCallback(\n (event: SyntheticEvent<HTMLDivElement>) => {\n if (ignoreSelectOnFocus.current) {\n ignoreSelectOnFocus.current = false;\n } else {\n setDisableAriaActiveDescendant(true);\n }\n inputOnSelect?.(event);\n },\n [inputOnSelect],\n );\n\n // If we have selected item(s) and we filter down the list by typing,\n // the position of selected items within the list may be changing.\n // Relocate highlighted index to the selection whenever this happens,\n // so if we resume keyboard navigation, navigation begins from the selected\n // item.\n useEffect(() => {\n highlightSelectedItem();\n // TODO may need to scrollIntoView\n if (indexPositions.length === 0) {\n setIsOpen(false);\n }\n }, [highlightSelectedItem, indexPositions.length]);\n\n // const activeDescendant: string | undefined = selectionChanged\n // ? \"\"\n // : undefined;\n\n const mergedInputProps = {\n ...inputProps.inputProps,\n // \"aria-owns\": listId,\n \"aria-label\": ariaLabel,\n };\n\n return {\n focusVisible,\n highlightedIndex,\n isOpen,\n onOpenChange: handleOpenChange,\n inputProps: {\n ...inputProps,\n // \"aria-activedescendant\": activeDescendant,\n id: `${id}-input`,\n inputProps: mergedInputProps,\n onChange: handleInputChange,\n onSelect: handleInputSelect,\n role: \"combobox\",\n value,\n },\n // listControlProps,\n listControlProps: {\n ...listControlProps,\n onBlur: handleInputBlur,\n onFocus: handleInputFocus,\n },\n listHandlers: {\n ...listHookListHandlers,\n onClick: handleListClick,\n },\n selected,\n };\n};\n"],"names":["itemToString","defaultItemToString","useRef","useControlled","useCallback","useState","selected","value","useList","useEffect"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxDeprecated.js","sources":["../src/combo-box-deprecated/ComboBoxDeprecated.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, forwardRef, type Ref, useRef } from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { useWidth } from \"../list-deprecated/internal/useWidth\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport {\n DefaultComboBox,\n type DefaultComboBoxProps,\n} from \"./internal/DefaultComboBox\";\nimport {\n MultiSelectComboBox,\n type MultiSelectComboBoxProps,\n} from \"./internal/MultiSelectComboBox\";\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nfunction getMultiSelect<Item>({\n multiSelect,\n initialSelectedItem,\n selectedItem,\n}: {\n multiSelect?: boolean;\n initialSelectedItem?: Item | Item[];\n selectedItem?: Item | Item[];\n}) {\n return (\n multiSelect ||\n Array.isArray(initialSelectedItem) ||\n Array.isArray(selectedItem)\n );\n}\n\nconst validateProps = ({\n isMultiSelect,\n delimiter,\n}: {\n isMultiSelect: boolean;\n delimiter?: string | string[];\n}) => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isMultiSelect && delimiter) {\n console.warn(\"Delimiter can only be used for a multi-select combo-box.\");\n }\n }\n};\n\nexport type ComboBoxDeprecatedProps = Omit<\n DefaultComboBoxProps<any> | MultiSelectComboBoxProps<any>,\n \"rootRef\"\n> & {\n rootRef?: Ref<HTMLElement>;\n delimiter?: string | string[];\n};\n\nexport const ComboBoxDeprecated = forwardRef<\n HTMLDivElement,\n ComboBoxDeprecatedProps\n>(function ComboBox(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-deprecated\",\n css: comboBoxCss,\n window: targetWindow,\n });\n\n const {\n inFormField,\n a11yProps: {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-required\": ariaRequired,\n disabled: formFieldDisabled,\n } = {},\n } = useFormFieldLegacyProps();\n\n const { current: isMultiSelect } = useRef(getMultiSelect(props));\n validateProps({ isMultiSelect, ...props });\n\n const {\n inputRef,\n listRef,\n className,\n disabled = formFieldDisabled,\n source = [],\n multiSelect,\n initialSelectedItem,\n selectedItem,\n width,\n listWidth,\n id: idProp,\n \"aria-label\": ariaLabel,\n ...restProps\n } = props;\n\n const id = useId(idProp);\n const [rootRef, rootWidth] = useWidth<HTMLDivElement>(\n width == null && listWidth == null,\n );\n\n const ComboBoxComponent = (\n isMultiSelect ? MultiSelectComboBox : DefaultComboBox\n ) as ComponentType<ComboBoxDeprecatedProps>;\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"field\")]: inFormField,\n },\n className,\n )}\n id={id}\n ref={useForkRef(ref, rootRef)}\n style={{ width }}\n >\n <ComboBoxComponent\n {...{\n ...restProps,\n id,\n source,\n disabled,\n rootRef,\n rootWidth,\n inputRef,\n listRef,\n listWidth,\n initialSelectedItem,\n selectedItem,\n \"aria-label\": clsx(ariaLabel),\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-required\": ariaRequired,\n }}\n />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ComboBox","useWindow","useComponentCssInjection","comboBoxCss","useFormFieldLegacyProps","useRef","useId","useWidth","MultiSelectComboBox","DefaultComboBox","jsx","clsx","useForkRef"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAEhD,SAAS,cAAqB,CAAA;AAAA,EAC5B,WAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAIG,EAAA;AACD,EAAA,OACE,eACA,KAAM,CAAA,OAAA,CAAQ,mBAAmB,CACjC,IAAA,KAAA,CAAM,QAAQ,YAAY,CAAA;AAE9B;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB,aAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAI,IAAA,CAAC,iBAAiB,SAAW,EAAA;AAC/B,MAAA,OAAA,CAAQ,KAAK,0DAA0D,CAAA;AAAA;AACzE;AAEJ,CAAA;AAUO,MAAM,kBAAqB,GAAAC,gBAAA,CAGhC,SAASC,UAAA,CAAS,OAAO,GAAK,EAAA;AAC9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,SAAW,EAAA;AAAA,MACT,iBAAmB,EAAA,cAAA;AAAA,MACnB,eAAiB,EAAA,YAAA;AAAA,MACjB,QAAU,EAAA;AAAA,QACR;AAAC,MACHC,+CAAwB,EAAA;AAE5B,EAAA,MAAM,EAAE,OAAS,EAAA,aAAA,KAAkBC,YAAO,CAAA,cAAA,CAAe,KAAK,CAAC,CAAA;AAC/D,EAAA,aAAA,CAAc,EAAE,aAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AAEzC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,iBAAA;AAAA,IACX,SAAS,EAAC;AAAA,IACV,
|
|
1
|
+
{"version":3,"file":"ComboBoxDeprecated.js","sources":["../src/combo-box-deprecated/ComboBoxDeprecated.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, forwardRef, type Ref, useRef } from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { useWidth } from \"../list-deprecated/internal/useWidth\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport {\n DefaultComboBox,\n type DefaultComboBoxProps,\n} from \"./internal/DefaultComboBox\";\nimport {\n MultiSelectComboBox,\n type MultiSelectComboBoxProps,\n} from \"./internal/MultiSelectComboBox\";\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nfunction getMultiSelect<Item>({\n multiSelect,\n initialSelectedItem,\n selectedItem,\n}: {\n multiSelect?: boolean;\n initialSelectedItem?: Item | Item[];\n selectedItem?: Item | Item[];\n}) {\n return (\n multiSelect ||\n Array.isArray(initialSelectedItem) ||\n Array.isArray(selectedItem)\n );\n}\n\nconst validateProps = ({\n isMultiSelect,\n delimiter,\n}: {\n isMultiSelect: boolean;\n delimiter?: string | string[];\n}) => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isMultiSelect && delimiter) {\n console.warn(\"Delimiter can only be used for a multi-select combo-box.\");\n }\n }\n};\n\nexport type ComboBoxDeprecatedProps = Omit<\n DefaultComboBoxProps<any> | MultiSelectComboBoxProps<any>,\n \"rootRef\"\n> & {\n rootRef?: Ref<HTMLElement>;\n delimiter?: string | string[];\n};\n\nexport const ComboBoxDeprecated = forwardRef<\n HTMLDivElement,\n ComboBoxDeprecatedProps\n>(function ComboBox(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-deprecated\",\n css: comboBoxCss,\n window: targetWindow,\n });\n\n const {\n inFormField,\n a11yProps: {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-required\": ariaRequired,\n disabled: formFieldDisabled,\n } = {},\n } = useFormFieldLegacyProps();\n\n const { current: isMultiSelect } = useRef(getMultiSelect(props));\n validateProps({ isMultiSelect, ...props });\n\n const {\n inputRef,\n listRef,\n className,\n disabled = formFieldDisabled,\n source = [],\n multiSelect: _multiSelect,\n initialSelectedItem,\n selectedItem,\n width,\n listWidth,\n id: idProp,\n \"aria-label\": ariaLabel,\n ...restProps\n } = props;\n\n const id = useId(idProp);\n const [rootRef, rootWidth] = useWidth<HTMLDivElement>(\n width == null && listWidth == null,\n );\n\n const ComboBoxComponent = (\n isMultiSelect ? MultiSelectComboBox : DefaultComboBox\n ) as ComponentType<ComboBoxDeprecatedProps>;\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"field\")]: inFormField,\n },\n className,\n )}\n id={id}\n ref={useForkRef(ref, rootRef)}\n style={{ width }}\n >\n <ComboBoxComponent\n {...{\n ...restProps,\n id,\n source,\n disabled,\n rootRef,\n rootWidth,\n inputRef,\n listRef,\n listWidth,\n initialSelectedItem,\n selectedItem,\n \"aria-label\": clsx(ariaLabel),\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-required\": ariaRequired,\n }}\n />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ComboBox","useWindow","useComponentCssInjection","comboBoxCss","useFormFieldLegacyProps","useRef","useId","useWidth","MultiSelectComboBox","DefaultComboBox","jsx","clsx","useForkRef"],"mappings":"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"}
|
|
@@ -41,13 +41,12 @@ const DefaultComboBox = function DefaultComboBox2(props) {
|
|
|
41
41
|
} = useComboBox.useComboBox(restProps);
|
|
42
42
|
const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;
|
|
43
43
|
const { isListOpen, itemCount, itemToString, source, ...restListProps } = listProps;
|
|
44
|
-
const firstItem = null;
|
|
45
44
|
const allowAnnouncementRef = react.useRef(allowAnnouncement);
|
|
46
45
|
react.useEffect(() => {
|
|
47
46
|
allowAnnouncementRef.current = allowAnnouncement;
|
|
48
47
|
}, [allowAnnouncement]);
|
|
49
48
|
react.useEffect(() => {
|
|
50
|
-
}, [
|
|
49
|
+
}, [value, itemCount, announce]);
|
|
51
50
|
const [maxListHeight, setMaxListHeight] = react.useState(
|
|
52
51
|
void 0
|
|
53
52
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultComboBox.js","sources":["../src/combo-box-deprecated/internal/DefaultComboBox.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport { useAriaAnnouncer, useFloatingUI, useForkRef } from \"@salt-ds/core\";\nimport {\n type ComponentType,\n type HTMLAttributes,\n type ReactNode,\n type Ref,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n} from \"../../input-legacy\";\nimport {\n type IndexedListItemProps,\n ListBase,\n type ListProps,\n type ListSelectionVariant,\n ListStateContext,\n} from \"../../list-deprecated\";\nimport { Portal } from \"../../portal\";\nimport { isDesktop, Window, type WindowProps } from \"../../window\";\nimport type { GetFilterRegex } from \"../filterHelpers\";\nimport { getAnnouncement } from \"./getAnnouncement\";\nimport { useComboBox } from \"./useComboBox\";\n\nexport type BaseComboBoxProps<\n Item,\n Variant extends ListSelectionVariant = \"default\",\n> = Omit<\n HTMLAttributes<HTMLDivElement>,\n \"children\" | \"onChange\" | \"onSelect\" | \"onFocus\" | \"onBlur\" | \"onClick\"\n> &\n Pick<\n ListProps<Item, Variant>,\n | \"displayedItemCount\"\n | \"itemToString\"\n | \"listRef\"\n | \"onChange\"\n | \"onSelect\"\n | \"overscanCount\"\n | \"virtualized\"\n | \"width\"\n > & {\n ListItem?: ComponentType<IndexedListItemProps<Item>>;\n ListProps?: Partial<ListProps<Item, Variant>>;\n WindowProps?: Partial<WindowProps>;\n allowFreeText?: boolean;\n disabled?: boolean;\n getFilterRegex?: GetFilterRegex;\n initialOpen?: boolean;\n inputRef?: Ref<HTMLInputElement>;\n inputValue?: string;\n listWidth?: number | string;\n\n rootWidth?: string | number;\n rootRef: RefObject<HTMLElement>;\n disabledPortal?: boolean;\n source: ReadonlyArray<Item>;\n };\n\nexport interface DefaultComboBoxProps<Item>\n extends BaseComboBoxProps<Item>,\n Pick<InputProps, \"onFocus\" | \"onBlur\"> {\n InputProps?: InputProps;\n initialSelectedItem?: Item;\n selectedItem?: Item;\n multiSelect?: false;\n onInputFocus?: InputProps[\"onFocus\"];\n onInputBlur?: InputProps[\"onBlur\"];\n onInputChange?: InputProps[\"onChange\"];\n onInputSelect?: InputProps[\"onSelect\"];\n stringToItem?: (value?: string) => Item | null | undefined;\n}\n\nexport const DefaultComboBox = function DefaultComboBox<Item>(\n props: DefaultComboBoxProps<Item>,\n): ReactNode {\n const {\n ListItem,\n WindowProps = {},\n rootRef,\n listRef: listRefProp,\n inputRef: inputRefProp,\n rootWidth,\n listWidth,\n ...restProps\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef(null);\n\n const setInputRef = useForkRef(inputRef, inputRefProp);\n // Use callback ref as listRef could be null when it's closed\n const setListRef = useForkRef(listRef, listRefProp);\n\n const { announce } = useAriaAnnouncer({ debounce: 1000 });\n\n const {\n inputRef: setHookInputRef,\n listContext,\n inputProps,\n listProps,\n } = useComboBox(restProps);\n\n const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;\n const { isListOpen, itemCount, itemToString, source, ...restListProps } =\n listProps;\n\n const firstItem = null;\n\n const allowAnnouncementRef = useRef(allowAnnouncement);\n useEffect(() => {\n allowAnnouncementRef.current = allowAnnouncement;\n }, [allowAnnouncement]);\n\n useEffect(() => {\n if (allowAnnouncementRef.current && value && firstItem) {\n announce(getAnnouncement(itemCount, firstItem));\n }\n }, [
|
|
1
|
+
{"version":3,"file":"DefaultComboBox.js","sources":["../src/combo-box-deprecated/internal/DefaultComboBox.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport { useAriaAnnouncer, useFloatingUI, useForkRef } from \"@salt-ds/core\";\nimport {\n type ComponentType,\n type HTMLAttributes,\n type ReactNode,\n type Ref,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n} from \"../../input-legacy\";\nimport {\n type IndexedListItemProps,\n ListBase,\n type ListProps,\n type ListSelectionVariant,\n ListStateContext,\n} from \"../../list-deprecated\";\nimport { Portal } from \"../../portal\";\nimport { isDesktop, Window, type WindowProps } from \"../../window\";\nimport type { GetFilterRegex } from \"../filterHelpers\";\nimport { getAnnouncement } from \"./getAnnouncement\";\nimport { useComboBox } from \"./useComboBox\";\n\nexport type BaseComboBoxProps<\n Item,\n Variant extends ListSelectionVariant = \"default\",\n> = Omit<\n HTMLAttributes<HTMLDivElement>,\n \"children\" | \"onChange\" | \"onSelect\" | \"onFocus\" | \"onBlur\" | \"onClick\"\n> &\n Pick<\n ListProps<Item, Variant>,\n | \"displayedItemCount\"\n | \"itemToString\"\n | \"listRef\"\n | \"onChange\"\n | \"onSelect\"\n | \"overscanCount\"\n | \"virtualized\"\n | \"width\"\n > & {\n ListItem?: ComponentType<IndexedListItemProps<Item>>;\n ListProps?: Partial<ListProps<Item, Variant>>;\n WindowProps?: Partial<WindowProps>;\n allowFreeText?: boolean;\n disabled?: boolean;\n getFilterRegex?: GetFilterRegex;\n initialOpen?: boolean;\n inputRef?: Ref<HTMLInputElement>;\n inputValue?: string;\n listWidth?: number | string;\n\n rootWidth?: string | number;\n rootRef: RefObject<HTMLElement>;\n disabledPortal?: boolean;\n source: ReadonlyArray<Item>;\n };\n\nexport interface DefaultComboBoxProps<Item>\n extends BaseComboBoxProps<Item>,\n Pick<InputProps, \"onFocus\" | \"onBlur\"> {\n InputProps?: InputProps;\n initialSelectedItem?: Item;\n selectedItem?: Item;\n multiSelect?: false;\n onInputFocus?: InputProps[\"onFocus\"];\n onInputBlur?: InputProps[\"onBlur\"];\n onInputChange?: InputProps[\"onChange\"];\n onInputSelect?: InputProps[\"onSelect\"];\n stringToItem?: (value?: string) => Item | null | undefined;\n}\n\nexport const DefaultComboBox = function DefaultComboBox<Item>(\n props: DefaultComboBoxProps<Item>,\n): ReactNode {\n const {\n ListItem,\n WindowProps = {},\n rootRef,\n listRef: listRefProp,\n inputRef: inputRefProp,\n rootWidth,\n listWidth,\n ...restProps\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef(null);\n\n const setInputRef = useForkRef(inputRef, inputRefProp);\n // Use callback ref as listRef could be null when it's closed\n const setListRef = useForkRef(listRef, listRefProp);\n\n const { announce } = useAriaAnnouncer({ debounce: 1000 });\n\n const {\n inputRef: setHookInputRef,\n listContext,\n inputProps,\n listProps,\n } = useComboBox(restProps);\n\n const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;\n const { isListOpen, itemCount, itemToString, source, ...restListProps } =\n listProps;\n\n const firstItem = null;\n\n const allowAnnouncementRef = useRef(allowAnnouncement);\n useEffect(() => {\n allowAnnouncementRef.current = allowAnnouncement;\n }, [allowAnnouncement]);\n\n useEffect(() => {\n if (allowAnnouncementRef.current && value && firstItem) {\n announce(getAnnouncement(itemCount, firstItem));\n }\n }, [value, itemCount, announce]);\n\n const [maxListHeight, setMaxListHeight] = useState<number | undefined>(\n undefined,\n );\n const middleware = isDesktop\n ? []\n : [\n flip({\n fallbackPlacements: [\"bottom-start\", \"top-start\"],\n }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight }) {\n setMaxListHeight(availableHeight);\n },\n }),\n ];\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement: \"bottom-start\",\n middleware,\n });\n\n useEffect(() => {\n if (rootRef.current) {\n reference(rootRef.current);\n }\n }, [rootRef, reference]);\n\n return (\n <>\n <Input\n disabled={disabled}\n ref={useForkRef(setInputRef, setHookInputRef)}\n value={value}\n {...restInputProps}\n />\n {rootRef.current && isListOpen && (\n <Portal>\n <Window\n style={{\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n maxHeight: maxListHeight ?? \"\",\n }}\n {...WindowProps}\n ref={floating}\n >\n <ListStateContext.Provider value={listContext}>\n <ListBase\n {...{\n ListItem,\n disabled,\n itemCount,\n itemToString,\n width: listWidth || rootWidth,\n source,\n ...restListProps,\n listRef: setListRef,\n }}\n maxHeight={maxListHeight || listProps.maxHeight}\n />\n </ListStateContext.Provider>\n </Window>\n </Portal>\n )}\n </>\n );\n};\n"],"names":["DefaultComboBox","useRef","useForkRef","useAriaAnnouncer","useComboBox","useEffect","useState","isDesktop","flip","shift","limitShift","size","useFloatingUI","jsxs","Fragment","jsx","Input","Portal","Window","ListStateContext","ListBase"],"mappings":"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"}
|
|
@@ -30,7 +30,6 @@ function MultiSelectComboBox(props) {
|
|
|
30
30
|
inputRef: inputRefProp,
|
|
31
31
|
...restProps
|
|
32
32
|
} = props;
|
|
33
|
-
const { announce } = core.useAriaAnnouncer({ debounce: 1e3 });
|
|
34
33
|
const expandButtonRef = react.useRef(null);
|
|
35
34
|
const listRef = react.useRef(null);
|
|
36
35
|
const setListRef = core.useForkRef(listRef, listRefProp);
|
|
@@ -40,13 +39,10 @@ function MultiSelectComboBox(props) {
|
|
|
40
39
|
});
|
|
41
40
|
const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;
|
|
42
41
|
const { isListOpen, itemCount, itemToString, source, ...restListProps } = listProps;
|
|
43
|
-
const firstItem = null;
|
|
44
42
|
const allowAnnouncementRef = react.useRef(allowAnnouncement);
|
|
45
43
|
react.useEffect(() => {
|
|
46
44
|
allowAnnouncementRef.current = allowAnnouncement;
|
|
47
45
|
}, [allowAnnouncement]);
|
|
48
|
-
react.useEffect(() => {
|
|
49
|
-
}, [value, firstItem, itemCount, announce]);
|
|
50
46
|
const [maxListHeight, setMaxListHeight] = react.useState(
|
|
51
47
|
void 0
|
|
52
48
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectComboBox.js","sources":["../src/combo-box-deprecated/internal/MultiSelectComboBox.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {
|
|
1
|
+
{"version":3,"file":"MultiSelectComboBox.js","sources":["../src/combo-box-deprecated/internal/MultiSelectComboBox.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport { useFloatingUI, useForkRef } from \"@salt-ds/core\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { ListBase, ListStateContext } from \"../../list-deprecated\";\nimport { Portal } from \"../../portal\";\nimport {\n TokenizedInputBase,\n type TokenizedInputProps,\n} from \"../../tokenized-input\";\nimport { isDesktop, useWindow } from \"../../window\";\nimport type { BaseComboBoxProps } from \"./DefaultComboBox\";\nimport { useMultiSelectComboBox } from \"./useMultiSelectComboBox\";\n\nexport type MultiSelectComboBoxProps<Item> = BaseComboBoxProps<\n Item,\n \"multiple\"\n> &\n Pick<\n TokenizedInputProps<Item>,\n | \"onFocus\"\n | \"onBlur\"\n | \"onInputFocus\"\n | \"onInputBlur\"\n | \"onInputChange\"\n | \"onInputSelect\"\n | \"stringToItem\"\n > & {\n InputProps?: Partial<TokenizedInputProps<Item>>;\n initialSelectedItem?: Item[];\n selectedItem?: Item[];\n multiSelect: true;\n delimiter?: string | string[];\n };\n\nexport function MultiSelectComboBox<Item>(\n props: MultiSelectComboBoxProps<Item>,\n) {\n const {\n ListItem,\n WindowProps,\n rootRef,\n listRef: listRefProp,\n rootWidth,\n listWidth,\n inputRef: inputRefProp,\n ...restProps\n } = props;\n\n // const { announce } = useAriaAnnouncer({ debounce: 1000 });\n\n const expandButtonRef = useRef(null);\n const listRef = useRef(null);\n // Use callback ref as listRef could be null when it's closed\n const setListRef = useForkRef(listRef, listRefProp);\n\n const { inputRef, listContext, inputProps, listProps, inputHelpers } =\n useMultiSelectComboBox({\n ...restProps,\n expandButtonRef,\n });\n\n const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;\n const { isListOpen, itemCount, itemToString, source, ...restListProps } =\n listProps;\n\n // const firstItem = null;\n\n const allowAnnouncementRef = useRef(allowAnnouncement);\n useEffect(() => {\n allowAnnouncementRef.current = allowAnnouncement;\n }, [allowAnnouncement]);\n\n // useEffect(() => {\n // if (allowAnnouncementRef.current && value && firstItem) {\n // announce(getAnnouncement(itemCount, firstItem));\n // }\n // }, [value, firstItem, itemCount, announce]);\n\n const [maxListHeight, setMaxListHeight] = useState<number | undefined>(\n undefined,\n );\n const middleware = isDesktop\n ? []\n : [\n flip({\n fallbackPlacements: [\"bottom-start\", \"top-start\"],\n }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight }) {\n setMaxListHeight(availableHeight);\n },\n }),\n ];\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement: \"bottom-start\",\n middleware,\n });\n\n useEffect(() => {\n if (rootRef.current) {\n reference(rootRef.current);\n }\n }, [rootRef, reference]);\n\n const Window = useWindow();\n\n return (\n <>\n <TokenizedInputBase\n disabled={disabled}\n expandButtonRef={expandButtonRef}\n inputRef={useForkRef(inputRef, inputRefProp)}\n value={value}\n helpers={inputHelpers}\n {...restInputProps}\n />\n {rootRef.current && isListOpen && (\n <Portal>\n <Window\n style={{\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n maxHeight: maxListHeight ?? \"\",\n }}\n {...WindowProps}\n ref={floating}\n >\n <ListStateContext.Provider value={listContext}>\n <ListBase\n {...{\n ListItem,\n disabled,\n itemCount,\n itemToString,\n width: listWidth || rootWidth,\n source,\n ...restListProps,\n listRef: setListRef,\n }}\n maxHeight={maxListHeight || listProps.maxHeight}\n />\n </ListStateContext.Provider>\n </Window>\n </Portal>\n )}\n </>\n );\n}\n"],"names":["useRef","useForkRef","useMultiSelectComboBox","useEffect","useState","isDesktop","flip","shift","limitShift","size","useFloatingUI","useWindow","jsxs","Fragment","jsx","TokenizedInputBase","Portal","ListStateContext","ListBase"],"mappings":"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"}
|
|
@@ -97,7 +97,10 @@ const useComboBox = (props) => {
|
|
|
97
97
|
onBlur: handleBlurVisible,
|
|
98
98
|
ref: focusVisibleRef
|
|
99
99
|
} = core.useIsFocusVisible();
|
|
100
|
-
const handleFocusVisibleRef = core.useForkRef(
|
|
100
|
+
const handleFocusVisibleRef = core.useForkRef(
|
|
101
|
+
focusVisibleRef,
|
|
102
|
+
focusedRef
|
|
103
|
+
);
|
|
101
104
|
const handleInputRef = core.useForkRef(inputRef, handleFocusVisibleRef);
|
|
102
105
|
const { "aria-activedescendant": ariaActiveDescendant, ...restListProps } = listProps;
|
|
103
106
|
const { selectedItem, highlightedIndex } = state;
|