@vibe/core 4.0.0 → 4.0.1-alpha-649fd.0
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/dist/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.d.ts +4 -0
- package/dist/hooks/useEventListener/index.d.ts +2 -8
- package/dist/hooks/useKeyEvent/index.d.ts +2 -56
- package/dist/mocked_classnames/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.d.ts +4 -0
- package/dist/mocked_classnames/hooks/useEventListener/index.d.ts +2 -8
- package/dist/mocked_classnames/hooks/useKeyEvent/index.d.ts +2 -56
- package/dist/mocked_classnames/src/components/Accordion/Accordion/Accordion.js +1 -1
- package/dist/mocked_classnames/src/components/Accordion/Accordion/Accordion.js.map +1 -1
- package/dist/mocked_classnames/src/components/Accordion/AccordionItem/AccordionItem.js +1 -1
- package/dist/mocked_classnames/src/components/Accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/AlertBanner/AlertBanner.js +1 -1
- package/dist/mocked_classnames/src/components/AlertBanner/AlertBanner.js.map +1 -1
- package/dist/mocked_classnames/src/components/Avatar/Avatar.js +1 -1
- package/dist/mocked_classnames/src/components/Avatar/Avatar.js.map +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarBadge.js +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarBadge.js.map +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarContent.js +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarContent.js.map +1 -1
- package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.js +1 -1
- package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.js.map +1 -1
- package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js +1 -1
- package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js.map +1 -1
- package/dist/mocked_classnames/src/components/Badge/Badge.js +1 -1
- package/dist/mocked_classnames/src/components/Badge/Badge.js.map +1 -1
- package/dist/mocked_classnames/src/components/BaseItem/BaseItem.js +1 -1
- package/dist/mocked_classnames/src/components/BaseItem/BaseItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/BaseList/BaseList.js +1 -1
- package/dist/mocked_classnames/src/components/BaseList/BaseList.js.map +1 -1
- package/dist/mocked_classnames/src/components/BaseList/context/BaseListContext.js +1 -1
- package/dist/mocked_classnames/src/components/BaseList/context/BaseListContext.js.map +1 -1
- package/dist/mocked_classnames/src/components/BaseList/hooks/useBaseListKeyboard.js +1 -1
- package/dist/mocked_classnames/src/components/BaseList/hooks/useBaseListKeyboard.js.map +1 -1
- package/dist/mocked_classnames/src/components/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/mocked_classnames/src/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/mocked_classnames/src/components/Checkbox/Checkbox.js +1 -1
- package/dist/mocked_classnames/src/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/mocked_classnames/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.js +1 -1
- package/dist/mocked_classnames/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.js.map +1 -1
- package/dist/mocked_classnames/src/components/Chips/Chips.js +1 -1
- package/dist/mocked_classnames/src/components/Chips/Chips.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/ColorPicker.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js.map +1 -1
- package/dist/mocked_classnames/src/components/Combobox/Combobox.js +1 -1
- package/dist/mocked_classnames/src/components/Combobox/Combobox.js.map +1 -1
- package/dist/mocked_classnames/src/components/Counter/Counter.js +1 -1
- package/dist/mocked_classnames/src/components/Counter/Counter.js.map +1 -1
- package/dist/mocked_classnames/src/components/Divider/Divider.js +1 -1
- package/dist/mocked_classnames/src/components/Divider/Divider.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js.map +1 -1
- package/dist/mocked_classnames/src/components/EditableHeading/EditableHeading.js +1 -1
- package/dist/mocked_classnames/src/components/EditableHeading/EditableHeading.js.map +1 -1
- package/dist/mocked_classnames/src/components/EditableText/EditableText.js +1 -1
- package/dist/mocked_classnames/src/components/EditableText/EditableText.js.map +1 -1
- package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js +1 -1
- package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js.map +1 -1
- package/dist/mocked_classnames/src/components/EmptyState/EmptyState.js +1 -1
- package/dist/mocked_classnames/src/components/EmptyState/EmptyState.js.map +1 -1
- package/dist/mocked_classnames/src/components/ExpandCollapse/ExpandCollapse.js +1 -1
- package/dist/mocked_classnames/src/components/ExpandCollapse/ExpandCollapse.js.map +1 -1
- package/dist/mocked_classnames/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js +1 -1
- package/dist/mocked_classnames/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js.map +1 -1
- package/dist/mocked_classnames/src/components/HiddenText/HiddenText.js +1 -1
- package/dist/mocked_classnames/src/components/HiddenText/HiddenText.js.map +1 -1
- package/dist/mocked_classnames/src/components/Info/Info.js +1 -1
- package/dist/mocked_classnames/src/components/Info/Info.js.map +1 -1
- package/dist/mocked_classnames/src/components/Label/Label.js +1 -1
- package/dist/mocked_classnames/src/components/Label/Label.js.map +1 -1
- package/dist/mocked_classnames/src/components/Link/Link.js +1 -1
- package/dist/mocked_classnames/src/components/Link/Link.js.map +1 -1
- package/dist/mocked_classnames/src/components/List/List.js +1 -1
- package/dist/mocked_classnames/src/components/List/List.js.map +1 -1
- package/dist/mocked_classnames/src/components/List/utils/ListContext.js +1 -1
- package/dist/mocked_classnames/src/components/List/utils/ListContext.js.map +1 -1
- package/dist/mocked_classnames/src/components/List/utils/ListUtils.js +1 -1
- package/dist/mocked_classnames/src/components/List/utils/ListUtils.js.map +1 -1
- package/dist/mocked_classnames/src/components/ListItem/ListItem.js +1 -1
- package/dist/mocked_classnames/src/components/ListItem/ListItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/ListItemAvatar/ListItemAvatar.js +1 -1
- package/dist/mocked_classnames/src/components/ListItemAvatar/ListItemAvatar.js.map +1 -1
- package/dist/mocked_classnames/src/components/ListItemIcon/ListItemIcon.js +1 -1
- package/dist/mocked_classnames/src/components/ListItemIcon/ListItemIcon.js.map +1 -1
- package/dist/mocked_classnames/src/components/ListTitle/ListTitle.js +1 -1
- package/dist/mocked_classnames/src/components/ListTitle/ListTitle.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/Menu.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/Menu.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useCloseMenuOnKeyEvent.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useCloseMenuOnKeyEvent.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useLastNavigationDirection.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useLastNavigationDirection.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useMenuId.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useMenuId.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useMenuKeyboardNavigation.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useMenuKeyboardNavigation.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useMouseLeave.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/hooks/useMouseLeave.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuGridItem/MenuGridItem.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuGridItem/MenuGridItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/hooks/useMenuItemMouseEvents.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/hooks/useMenuItemMouseEvents.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItemButton/MenuItemButton.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItemButton/MenuItemButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuTitle/MenuTitle.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuTitle/MenuTitle.js.map +1 -1
- package/dist/mocked_classnames/src/components/MenuButton/MenuButton.js +1 -1
- package/dist/mocked_classnames/src/components/MenuButton/MenuButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.js +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.js.map +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map +1 -1
- package/dist/mocked_classnames/src/components/NumberField/NumberField.js +1 -1
- package/dist/mocked_classnames/src/components/NumberField/NumberField.js.map +1 -1
- package/dist/mocked_classnames/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js +1 -1
- package/dist/mocked_classnames/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/ProgressBars/ProgressBar/Bar/Bar.js +1 -1
- package/dist/mocked_classnames/src/components/ProgressBars/ProgressBar/Bar/Bar.js.map +1 -1
- package/dist/mocked_classnames/src/components/ProgressBars/ProgressBar/ProgressBar.js +1 -1
- package/dist/mocked_classnames/src/components/ProgressBars/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/mocked_classnames/src/components/RadioButton/RadioButton.js +1 -1
- package/dist/mocked_classnames/src/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Search/Search.js +1 -1
- package/dist/mocked_classnames/src/components/Search/Search.js.map +1 -1
- package/dist/mocked_classnames/src/components/Skeleton/Skeleton.js +1 -1
- package/dist/mocked_classnames/src/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/Slider.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/Slider.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderBase.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderBase.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderFilledTrack.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderFilledTrack.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderRail.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderRail.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderTrack.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderTrack.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderContext.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderContext.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderHooks.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderHooks.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderInfix.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderInfix.js.map +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButton.js +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.js +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.js.map +1 -1
- package/dist/mocked_classnames/src/components/Steps/Steps.js +1 -1
- package/dist/mocked_classnames/src/components/Steps/Steps.js.map +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsCommand.js +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsCommand.js.map +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsDot.js +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsDot.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/Table/Table.js +1 -1
- package/dist/mocked_classnames/src/components/Table/Table/Table.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/TableCellSkeleton/TableCellSkeleton.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableCellSkeleton/TableCellSkeleton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/TableHeader/TableHeader.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/TableHeaderCell/TableHeaderCell.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableHeaderCell/TableHeaderCell.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/TableRow/TableRow.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableRow/TableRow.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/TableRowMenu/TableRowMenu.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableRowMenu/TableRowMenu.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js +1 -1
- package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabList/TabList.js +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabList/TabList.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabPanel/TabPanel.js +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabPanel/TabPanel.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabPanels/TabPanels.js +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabPanels/TabPanels.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabsContext/TabsContext.js +1 -1
- package/dist/mocked_classnames/src/components/Tabs/TabsContext/TabsContext.js.map +1 -1
- package/dist/mocked_classnames/src/components/TextField/TextField.js +1 -1
- package/dist/mocked_classnames/src/components/TextField/TextField.js.map +1 -1
- package/dist/mocked_classnames/src/components/TextWithHighlight/TextWithHighlight.js +1 -1
- package/dist/mocked_classnames/src/components/TextWithHighlight/TextWithHighlight.js.map +1 -1
- package/dist/mocked_classnames/src/components/ThemeProvider/ThemeProvider.js +1 -1
- package/dist/mocked_classnames/src/components/ThemeProvider/ThemeProvider.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/Tipseen.js +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/Tipseen.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/TipseenMedia/TipseenMedia.js +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/TipseenMedia/TipseenMedia.js.map +1 -1
- package/dist/mocked_classnames/src/components/Toast/Toast.js +1 -1
- package/dist/mocked_classnames/src/components/Toast/Toast.js.map +1 -1
- package/dist/mocked_classnames/src/components/Toggle/MockToggle.js +1 -1
- package/dist/mocked_classnames/src/components/Toggle/MockToggle.js.map +1 -1
- package/dist/mocked_classnames/src/components/VirtualizedGrid/VirtualizedGrid.js +1 -1
- package/dist/mocked_classnames/src/components/VirtualizedGrid/VirtualizedGrid.js.map +1 -1
- package/dist/mocked_classnames/src/components/VirtualizedList/VirtualizedList.js +1 -1
- package/dist/mocked_classnames/src/components/VirtualizedList/VirtualizedList.js.map +1 -1
- package/dist/mocked_classnames/src/helpers/textManipulations.js +1 -1
- package/dist/mocked_classnames/src/helpers/textManipulations.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.js +1 -1
- package/dist/mocked_classnames/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useFullKeyboardListeners.js +1 -1
- package/dist/mocked_classnames/src/hooks/useFullKeyboardListeners.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js +1 -1
- package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useIsMouseEnter.js +1 -1
- package/dist/mocked_classnames/src/hooks/useIsMouseEnter.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useIsMouseOver.js +1 -1
- package/dist/mocked_classnames/src/hooks/useIsMouseOver.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useItemsOverflow/useItemsOverflow.js +1 -1
- package/dist/mocked_classnames/src/hooks/useItemsOverflow/useItemsOverflow.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useListenFocusTriggers/index.js +1 -1
- package/dist/mocked_classnames/src/hooks/useListenFocusTriggers/index.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useMediaQuery/index.js +1 -1
- package/dist/mocked_classnames/src/hooks/useMediaQuery/index.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/usePrevious/index.js +1 -1
- package/dist/mocked_classnames/src/hooks/usePrevious/index.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useSetFocus/index.js +1 -1
- package/dist/mocked_classnames/src/hooks/useSetFocus/index.js.map +1 -1
- package/dist/mocked_classnames/src/hooks/useVibeMediaQuery/index.js +1 -1
- package/dist/mocked_classnames/src/hooks/useVibeMediaQuery/index.js.map +1 -1
- package/dist/mocked_classnames/src/index.js +1 -1
- package/dist/shared/dist/utils/dom-event-utils.js.map +1 -0
- package/dist/shared/dist/utils/media-query-utils.js +2 -0
- package/dist/shared/dist/utils/media-query-utils.js.map +1 -0
- package/dist/shared/dist/utils/testid-helper.js.map +1 -0
- package/dist/shared/dist/utils/user-agent-utils.js.map +1 -0
- package/dist/shared/dist/utils/warn-deprecated.js.map +1 -0
- package/dist/src/components/Accordion/Accordion/Accordion.js +1 -1
- package/dist/src/components/Accordion/Accordion/Accordion.js.map +1 -1
- package/dist/src/components/Accordion/AccordionItem/AccordionItem.js +1 -1
- package/dist/src/components/Accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/dist/src/components/AlertBanner/AlertBanner.js +1 -1
- package/dist/src/components/AlertBanner/AlertBanner.js.map +1 -1
- package/dist/src/components/Avatar/Avatar.js +1 -1
- package/dist/src/components/Avatar/Avatar.js.map +1 -1
- package/dist/src/components/Avatar/AvatarBadge.js +1 -1
- package/dist/src/components/Avatar/AvatarBadge.js.map +1 -1
- package/dist/src/components/Avatar/AvatarContent.js +1 -1
- package/dist/src/components/Avatar/AvatarContent.js.map +1 -1
- package/dist/src/components/AvatarGroup/AvatarGroupCounter.js +1 -1
- package/dist/src/components/AvatarGroup/AvatarGroupCounter.js.map +1 -1
- package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js +1 -1
- package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js.map +1 -1
- package/dist/src/components/Badge/Badge.js +1 -1
- package/dist/src/components/Badge/Badge.js.map +1 -1
- package/dist/src/components/BaseItem/BaseItem.js +1 -1
- package/dist/src/components/BaseItem/BaseItem.js.map +1 -1
- package/dist/src/components/BaseList/BaseList.js +1 -1
- package/dist/src/components/BaseList/BaseList.js.map +1 -1
- package/dist/src/components/BaseList/context/BaseListContext.js +1 -1
- package/dist/src/components/BaseList/context/BaseListContext.js.map +1 -1
- package/dist/src/components/BaseList/hooks/useBaseListKeyboard.js +1 -1
- package/dist/src/components/BaseList/hooks/useBaseListKeyboard.js.map +1 -1
- package/dist/src/components/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/src/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/src/components/Checkbox/Checkbox.js +1 -1
- package/dist/src/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.js +1 -1
- package/dist/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.js.map +1 -1
- package/dist/src/components/Chips/Chips.js +1 -1
- package/dist/src/components/Chips/Chips.js.map +1 -1
- package/dist/src/components/ColorPicker/ColorPicker.js +1 -1
- package/dist/src/components/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js.map +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.js +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.js.map +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js.map +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js +1 -1
- package/dist/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js.map +1 -1
- package/dist/src/components/Combobox/Combobox.js +1 -1
- package/dist/src/components/Combobox/Combobox.js.map +1 -1
- package/dist/src/components/Counter/Counter.js +1 -1
- package/dist/src/components/Counter/Counter.js.map +1 -1
- package/dist/src/components/Divider/Divider.js +1 -1
- package/dist/src/components/Divider/Divider.js.map +1 -1
- package/dist/src/components/Dropdown/Dropdown.js +1 -1
- package/dist/src/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js +1 -1
- package/dist/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js.map +1 -1
- package/dist/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js +1 -1
- package/dist/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js.map +1 -1
- package/dist/src/components/EditableHeading/EditableHeading.js +1 -1
- package/dist/src/components/EditableHeading/EditableHeading.js.map +1 -1
- package/dist/src/components/EditableText/EditableText.js +1 -1
- package/dist/src/components/EditableText/EditableText.js.map +1 -1
- package/dist/src/components/EditableTypography/EditableTypography.js +1 -1
- package/dist/src/components/EditableTypography/EditableTypography.js.map +1 -1
- package/dist/src/components/EmptyState/EmptyState.js +1 -1
- package/dist/src/components/EmptyState/EmptyState.js.map +1 -1
- package/dist/src/components/ExpandCollapse/ExpandCollapse.js +1 -1
- package/dist/src/components/ExpandCollapse/ExpandCollapse.js.map +1 -1
- package/dist/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js +1 -1
- package/dist/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js.map +1 -1
- package/dist/src/components/HiddenText/HiddenText.js +1 -1
- package/dist/src/components/HiddenText/HiddenText.js.map +1 -1
- package/dist/src/components/Info/Info.js +1 -1
- package/dist/src/components/Info/Info.js.map +1 -1
- package/dist/src/components/Label/Label.js +1 -1
- package/dist/src/components/Label/Label.js.map +1 -1
- package/dist/src/components/Link/Link.js +1 -1
- package/dist/src/components/Link/Link.js.map +1 -1
- package/dist/src/components/List/List.js +1 -1
- package/dist/src/components/List/List.js.map +1 -1
- package/dist/src/components/List/utils/ListContext.js +1 -1
- package/dist/src/components/List/utils/ListContext.js.map +1 -1
- package/dist/src/components/List/utils/ListUtils.js +1 -1
- package/dist/src/components/List/utils/ListUtils.js.map +1 -1
- package/dist/src/components/ListItem/ListItem.js +1 -1
- package/dist/src/components/ListItem/ListItem.js.map +1 -1
- package/dist/src/components/ListItemAvatar/ListItemAvatar.js +1 -1
- package/dist/src/components/ListItemAvatar/ListItemAvatar.js.map +1 -1
- package/dist/src/components/ListItemIcon/ListItemIcon.js +1 -1
- package/dist/src/components/ListItemIcon/ListItemIcon.js.map +1 -1
- package/dist/src/components/ListTitle/ListTitle.js +1 -1
- package/dist/src/components/ListTitle/ListTitle.js.map +1 -1
- package/dist/src/components/Menu/Menu/Menu.js +1 -1
- package/dist/src/components/Menu/Menu/Menu.js.map +1 -1
- package/dist/src/components/Menu/Menu/hooks/useCloseMenuOnKeyEvent.js +1 -1
- package/dist/src/components/Menu/Menu/hooks/useCloseMenuOnKeyEvent.js.map +1 -1
- package/dist/src/components/Menu/Menu/hooks/useLastNavigationDirection.js +1 -1
- package/dist/src/components/Menu/Menu/hooks/useLastNavigationDirection.js.map +1 -1
- package/dist/src/components/Menu/Menu/hooks/useMenuId.js +1 -1
- package/dist/src/components/Menu/Menu/hooks/useMenuId.js.map +1 -1
- package/dist/src/components/Menu/Menu/hooks/useMenuKeyboardNavigation.js +1 -1
- package/dist/src/components/Menu/Menu/hooks/useMenuKeyboardNavigation.js.map +1 -1
- package/dist/src/components/Menu/Menu/hooks/useMouseLeave.js +1 -1
- package/dist/src/components/Menu/Menu/hooks/useMouseLeave.js.map +1 -1
- package/dist/src/components/Menu/MenuGridItem/MenuGridItem.js +1 -1
- package/dist/src/components/Menu/MenuGridItem/MenuGridItem.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js +1 -1
- package/dist/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.js +1 -1
- package/dist/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.js +1 -1
- package/dist/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/hooks/useMenuItemMouseEvents.js +1 -1
- package/dist/src/components/Menu/MenuItem/hooks/useMenuItemMouseEvents.js.map +1 -1
- package/dist/src/components/Menu/MenuItemButton/MenuItemButton.js +1 -1
- package/dist/src/components/Menu/MenuItemButton/MenuItemButton.js.map +1 -1
- package/dist/src/components/Menu/MenuTitle/MenuTitle.js +1 -1
- package/dist/src/components/Menu/MenuTitle/MenuTitle.js.map +1 -1
- package/dist/src/components/MenuButton/MenuButton.js +1 -1
- package/dist/src/components/MenuButton/MenuButton.js.map +1 -1
- package/dist/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/src/components/Modal/Modal/Modal.js.map +1 -1
- package/dist/src/components/MultiStepIndicator/MultiStepIndicator.js +1 -1
- package/dist/src/components/MultiStepIndicator/MultiStepIndicator.js.map +1 -1
- package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js +1 -1
- package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map +1 -1
- package/dist/src/components/NumberField/NumberField.js +1 -1
- package/dist/src/components/NumberField/NumberField.js.map +1 -1
- package/dist/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js +1 -1
- package/dist/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js.map +1 -1
- package/dist/src/components/ProgressBars/ProgressBar/Bar/Bar.js +1 -1
- package/dist/src/components/ProgressBars/ProgressBar/Bar/Bar.js.map +1 -1
- package/dist/src/components/ProgressBars/ProgressBar/ProgressBar.js +1 -1
- package/dist/src/components/ProgressBars/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/src/components/RadioButton/RadioButton.js +1 -1
- package/dist/src/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/src/components/Search/Search.js +1 -1
- package/dist/src/components/Search/Search.js.map +1 -1
- package/dist/src/components/Skeleton/Skeleton.js +1 -1
- package/dist/src/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/src/components/Slider/Slider.js +1 -1
- package/dist/src/components/Slider/Slider.js.map +1 -1
- package/dist/src/components/Slider/SliderBase/SliderBase.js +1 -1
- package/dist/src/components/Slider/SliderBase/SliderBase.js.map +1 -1
- package/dist/src/components/Slider/SliderBase/SliderFilledTrack.js +1 -1
- package/dist/src/components/Slider/SliderBase/SliderFilledTrack.js.map +1 -1
- package/dist/src/components/Slider/SliderBase/SliderRail.js +1 -1
- package/dist/src/components/Slider/SliderBase/SliderRail.js.map +1 -1
- package/dist/src/components/Slider/SliderBase/SliderThumb.js +1 -1
- package/dist/src/components/Slider/SliderBase/SliderThumb.js.map +1 -1
- package/dist/src/components/Slider/SliderBase/SliderTrack.js +1 -1
- package/dist/src/components/Slider/SliderBase/SliderTrack.js.map +1 -1
- package/dist/src/components/Slider/SliderContext.js +1 -1
- package/dist/src/components/Slider/SliderContext.js.map +1 -1
- package/dist/src/components/Slider/SliderHooks.js +1 -1
- package/dist/src/components/Slider/SliderHooks.js.map +1 -1
- package/dist/src/components/Slider/SliderInfix.js +1 -1
- package/dist/src/components/Slider/SliderInfix.js.map +1 -1
- package/dist/src/components/SplitButton/SplitButton.js +1 -1
- package/dist/src/components/SplitButton/SplitButton.js.map +1 -1
- package/dist/src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.js +1 -1
- package/dist/src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.js.map +1 -1
- package/dist/src/components/Steps/Steps.js +1 -1
- package/dist/src/components/Steps/Steps.js.map +1 -1
- package/dist/src/components/Steps/StepsCommand.js +1 -1
- package/dist/src/components/Steps/StepsCommand.js.map +1 -1
- package/dist/src/components/Steps/StepsDot.js +1 -1
- package/dist/src/components/Steps/StepsDot.js.map +1 -1
- package/dist/src/components/Table/Table/Table.js +1 -1
- package/dist/src/components/Table/Table/Table.js.map +1 -1
- package/dist/src/components/Table/TableCellSkeleton/TableCellSkeleton.js +1 -1
- package/dist/src/components/Table/TableCellSkeleton/TableCellSkeleton.js.map +1 -1
- package/dist/src/components/Table/TableHeader/TableHeader.js +1 -1
- package/dist/src/components/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/src/components/Table/TableHeaderCell/TableHeaderCell.js +1 -1
- package/dist/src/components/Table/TableHeaderCell/TableHeaderCell.js.map +1 -1
- package/dist/src/components/Table/TableRow/TableRow.js +1 -1
- package/dist/src/components/Table/TableRow/TableRow.js.map +1 -1
- package/dist/src/components/Table/TableRowMenu/TableRowMenu.js +1 -1
- package/dist/src/components/Table/TableRowMenu/TableRowMenu.js.map +1 -1
- package/dist/src/components/Tabs/Tab/Tab.js +1 -1
- package/dist/src/components/Tabs/Tab/Tab.js.map +1 -1
- package/dist/src/components/Tabs/TabList/TabList.js +1 -1
- package/dist/src/components/Tabs/TabList/TabList.js.map +1 -1
- package/dist/src/components/Tabs/TabPanel/TabPanel.js +1 -1
- package/dist/src/components/Tabs/TabPanel/TabPanel.js.map +1 -1
- package/dist/src/components/Tabs/TabPanels/TabPanels.js +1 -1
- package/dist/src/components/Tabs/TabPanels/TabPanels.js.map +1 -1
- package/dist/src/components/Tabs/TabsContext/TabsContext.js +1 -1
- package/dist/src/components/Tabs/TabsContext/TabsContext.js.map +1 -1
- package/dist/src/components/TextField/TextField.js +1 -1
- package/dist/src/components/TextField/TextField.js.map +1 -1
- package/dist/src/components/TextWithHighlight/TextWithHighlight.js +1 -1
- package/dist/src/components/TextWithHighlight/TextWithHighlight.js.map +1 -1
- package/dist/src/components/ThemeProvider/ThemeProvider.js +1 -1
- package/dist/src/components/ThemeProvider/ThemeProvider.js.map +1 -1
- package/dist/src/components/Tipseen/Tipseen.js +1 -1
- package/dist/src/components/Tipseen/Tipseen.js.map +1 -1
- package/dist/src/components/Tipseen/TipseenMedia/TipseenMedia.js +1 -1
- package/dist/src/components/Tipseen/TipseenMedia/TipseenMedia.js.map +1 -1
- package/dist/src/components/Toast/Toast.js +1 -1
- package/dist/src/components/Toast/Toast.js.map +1 -1
- package/dist/src/components/Toggle/MockToggle.js +1 -1
- package/dist/src/components/Toggle/MockToggle.js.map +1 -1
- package/dist/src/components/VirtualizedGrid/VirtualizedGrid.js +1 -1
- package/dist/src/components/VirtualizedGrid/VirtualizedGrid.js.map +1 -1
- package/dist/src/components/VirtualizedList/VirtualizedList.js +1 -1
- package/dist/src/components/VirtualizedList/VirtualizedList.js.map +1 -1
- package/dist/src/helpers/textManipulations.js +1 -1
- package/dist/src/helpers/textManipulations.js.map +1 -1
- package/dist/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.js +1 -1
- package/dist/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.js.map +1 -1
- package/dist/src/hooks/useFullKeyboardListeners.js +1 -1
- package/dist/src/hooks/useFullKeyboardListeners.js.map +1 -1
- package/dist/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js +1 -1
- package/dist/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js.map +1 -1
- package/dist/src/hooks/useIsMouseEnter.js +1 -1
- package/dist/src/hooks/useIsMouseEnter.js.map +1 -1
- package/dist/src/hooks/useIsMouseOver.js +1 -1
- package/dist/src/hooks/useIsMouseOver.js.map +1 -1
- package/dist/src/hooks/useItemsOverflow/useItemsOverflow.js +1 -1
- package/dist/src/hooks/useItemsOverflow/useItemsOverflow.js.map +1 -1
- package/dist/src/hooks/useListenFocusTriggers/index.js +1 -1
- package/dist/src/hooks/useListenFocusTriggers/index.js.map +1 -1
- package/dist/src/hooks/useMediaQuery/index.js +1 -1
- package/dist/src/hooks/useMediaQuery/index.js.map +1 -1
- package/dist/src/hooks/usePrevious/index.js +1 -1
- package/dist/src/hooks/usePrevious/index.js.map +1 -1
- package/dist/src/hooks/useSetFocus/index.js +1 -1
- package/dist/src/hooks/useSetFocus/index.js.map +1 -1
- package/dist/src/hooks/useVibeMediaQuery/index.js +1 -1
- package/dist/src/hooks/useVibeMediaQuery/index.js.map +1 -1
- package/dist/src/index.js +1 -1
- package/package.json +15 -15
- package/dist/helpers/screenReaderAccessHelper.d.ts +0 -31
- package/dist/helpers/testid-helper.d.ts +0 -1
- package/dist/helpers/typesciptCssModulesHelper.d.ts +0 -6
- package/dist/hooks/ssr/useIsMounted.d.ts +0 -1
- package/dist/hooks/ssr/useIsomorphicLayoutEffect.d.ts +0 -3
- package/dist/hooks/useMergeRef.d.ts +0 -7
- package/dist/mocked_classnames/helpers/screenReaderAccessHelper.d.ts +0 -31
- package/dist/mocked_classnames/helpers/testid-helper.d.ts +0 -1
- package/dist/mocked_classnames/helpers/typesciptCssModulesHelper.d.ts +0 -6
- package/dist/mocked_classnames/hooks/ssr/useIsMounted.d.ts +0 -1
- package/dist/mocked_classnames/hooks/ssr/useIsomorphicLayoutEffect.d.ts +0 -3
- package/dist/mocked_classnames/hooks/useMergeRef.d.ts +0 -7
- package/dist/mocked_classnames/src/helpers/testid-helper.js.map +0 -1
- package/dist/mocked_classnames/src/helpers/typesciptCssModulesHelper.js +0 -2
- package/dist/mocked_classnames/src/helpers/typesciptCssModulesHelper.js.map +0 -1
- package/dist/mocked_classnames/src/hooks/ssr/useIsomorphicLayoutEffect.js +0 -2
- package/dist/mocked_classnames/src/hooks/ssr/useIsomorphicLayoutEffect.js.map +0 -1
- package/dist/mocked_classnames/src/hooks/useEventListener/index.js +0 -2
- package/dist/mocked_classnames/src/hooks/useEventListener/index.js.map +0 -1
- package/dist/mocked_classnames/src/hooks/useKeyEvent/index.js +0 -2
- package/dist/mocked_classnames/src/hooks/useKeyEvent/index.js.map +0 -1
- package/dist/mocked_classnames/src/hooks/useMergeRef.js +0 -2
- package/dist/mocked_classnames/src/hooks/useMergeRef.js.map +0 -1
- package/dist/mocked_classnames/src/utils/dom-event-utils.js.map +0 -1
- package/dist/mocked_classnames/src/utils/dom-utils.js +0 -2
- package/dist/mocked_classnames/src/utils/dom-utils.js.map +0 -1
- package/dist/mocked_classnames/src/utils/function-utils.js +0 -2
- package/dist/mocked_classnames/src/utils/function-utils.js.map +0 -1
- package/dist/mocked_classnames/src/utils/media-query-utils.js +0 -2
- package/dist/mocked_classnames/src/utils/media-query-utils.js.map +0 -1
- package/dist/mocked_classnames/src/utils/ssr-utils.js +0 -2
- package/dist/mocked_classnames/src/utils/ssr-utils.js.map +0 -1
- package/dist/mocked_classnames/src/utils/user-agent-utils.js.map +0 -1
- package/dist/mocked_classnames/src/utils/warn-deprecated.js.map +0 -1
- package/dist/mocked_classnames/utils/dom-event-utils.d.ts +0 -16
- package/dist/mocked_classnames/utils/dom-utils.d.ts +0 -2
- package/dist/mocked_classnames/utils/function-utils.d.ts +0 -5
- package/dist/mocked_classnames/utils/media-query-utils.d.ts +0 -23
- package/dist/mocked_classnames/utils/ssr-utils.d.ts +0 -2
- package/dist/mocked_classnames/utils/user-agent-utils.d.ts +0 -2
- package/dist/mocked_classnames/utils/warn-deprecated.d.ts +0 -10
- package/dist/src/helpers/testid-helper.js +0 -2
- package/dist/src/helpers/testid-helper.js.map +0 -1
- package/dist/src/helpers/typesciptCssModulesHelper.js +0 -2
- package/dist/src/helpers/typesciptCssModulesHelper.js.map +0 -1
- package/dist/src/hooks/ssr/useIsomorphicLayoutEffect.js +0 -2
- package/dist/src/hooks/ssr/useIsomorphicLayoutEffect.js.map +0 -1
- package/dist/src/hooks/useEventListener/index.js +0 -2
- package/dist/src/hooks/useEventListener/index.js.map +0 -1
- package/dist/src/hooks/useKeyEvent/index.js +0 -2
- package/dist/src/hooks/useKeyEvent/index.js.map +0 -1
- package/dist/src/hooks/useMergeRef.js +0 -2
- package/dist/src/hooks/useMergeRef.js.map +0 -1
- package/dist/src/utils/dom-event-utils.js +0 -2
- package/dist/src/utils/dom-event-utils.js.map +0 -1
- package/dist/src/utils/dom-utils.js +0 -2
- package/dist/src/utils/dom-utils.js.map +0 -1
- package/dist/src/utils/function-utils.js +0 -2
- package/dist/src/utils/function-utils.js.map +0 -1
- package/dist/src/utils/media-query-utils.js +0 -2
- package/dist/src/utils/media-query-utils.js.map +0 -1
- package/dist/src/utils/ssr-utils.js +0 -2
- package/dist/src/utils/ssr-utils.js.map +0 -1
- package/dist/src/utils/user-agent-utils.js +0 -2
- package/dist/src/utils/user-agent-utils.js.map +0 -1
- package/dist/src/utils/warn-deprecated.js +0 -2
- package/dist/src/utils/warn-deprecated.js.map +0 -1
- package/dist/utils/dom-event-utils.d.ts +0 -16
- package/dist/utils/dom-utils.d.ts +0 -2
- package/dist/utils/function-utils.d.ts +0 -5
- package/dist/utils/media-query-utils.d.ts +0 -23
- package/dist/utils/ssr-utils.d.ts +0 -2
- package/dist/utils/user-agent-utils.d.ts +0 -2
- package/dist/utils/warn-deprecated.d.ts +0 -10
- /package/dist/{mocked_classnames/src → shared/dist}/utils/dom-event-utils.js +0 -0
- /package/dist/{mocked_classnames/src/helpers → shared/dist/utils}/testid-helper.js +0 -0
- /package/dist/{mocked_classnames/src → shared/dist}/utils/user-agent-utils.js +0 -0
- /package/dist/{mocked_classnames/src → shared/dist}/utils/warn-deprecated.js +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import{camelCase as o}from"es-toolkit";import{getTestId as i,ComponentDefaultTestId as n}from"../../tests/testIds.js";import r from"classnames";import a,{useRef as
|
|
1
|
+
import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import{camelCase as o}from"es-toolkit";import{getTestId as i,ComponentDefaultTestId as n}from"../../tests/testIds.js";import r from"classnames";import a,{useRef as l,useMemo as s,useCallback as c,useEffect as m}from"react";import{CSSTransition as u}from"react-transition-group";import{Text as d}from"@vibe/typography/mockedClassNames";import{Loader as f}from"@vibe/loader/mockedClassNames";import{Flex as p}from"@vibe/layout/mockedClassNames";import{CloseSmall as v}from"@vibe/icons";import T from"./ToastLink/ToastLink.js";import y from"./ToastButton/ToastButton.js";import{getIcon as h}from"./ToastHelpers.js";import{getStyle as b,NOOP as N}from"@vibe/shared";import g from"./Toast.module.scss.js";import{IconButton as k}from"@vibe/icon-button/mockedClassNames";import E from"../../hooks/usePrevious/index.js";var C=function(C){var j=C.open,x=void 0!==j&&j,O=C.loading,A=void 0!==O&&O,B=C.autoHideDuration,_=void 0===B?null:B,w=C.type,L=void 0===w?"normal":w,S=C.icon,H=C.hideIcon,P=void 0!==H&&H,z=C.action,I=C.actions,D=C.children,R=C.closeable,U=void 0===R||R,q=C.onClose,F=void 0===q?N:q,G=C.className,J=C.id,K=C.closeButtonAriaLabel,M=void 0===K?"Close":K,Q=C["data-testid"],V=l(null),W=l(null),X=E(null==I?void 0:I.length),Y=s((function(){return I?I.filter((function(t){return"link"===t.type})).map((function(t){var o=e(t,["type"]);return a.createElement(T,Object.assign({key:o.href,className:g.actionLink},o))})):null}),[I]),Z=s((function(){return void 0!==X&&(null==I?void 0:I.length)!==X}),[I,X]),$=s((function(){return I?I.filter((function(t){return"button"===t.type})).map((function(o,i){var n=o.content,l=e(o,["type","content"]);return a.createElement(y,Object.assign({key:"alert-button-".concat(i),className:r(g.actionButton,t({},g.withTransition,Z))},l),n)})):null}),[I,Z]),tt=s((function(){return r(g.toast,b(g,o("type-"+L)),G)}),[L,G]),et=c((function(){F&&F()}),[F]),ot=l(),it=c((function(t){F&&null!=t&&(clearTimeout(ot.current),ot.current=setTimeout((function(){et()}),t))}),[et,F]);m((function(){return x&&_>0&&it(_),function(){clearTimeout(ot.current)}}),[x,_,it]);var nt=!P&&h(L,S),rt=c((function(t){var e=t.style.width;t.style.width="auto";var o=getComputedStyle(t).width;t.style.width=e,t.style.width=o}),[]);return m((function(){V.current&&rt(V.current)}),[D,rt]),a.createElement(u,{in:x,nodeRef:W,classNames:{enterActive:g.enterActive,exitActive:g.exitActive},timeout:400,unmountOnExit:!0},a.createElement(d,{ref:W,id:J,"data-testid":Q||i(n.TOAST,J),type:"text2",element:"div",color:"fixedLight",className:tt,role:"alert","aria-live":"polite"},nt&&a.createElement("div",{className:r(g.icon)},nt),a.createElement(p,{align:"center",gap:"large",className:g.content},a.createElement(p,{gap:"medium","data-testid":i(n.TOAST_CONTENT),className:g.textContent},a.createElement("span",null,D),Y),($||z)&&($||z),A&&a.createElement(f,{size:"xs"})),U&&a.createElement(k,{className:r(g.closeButton),onClick:et,size:"small",kind:"tertiary",color:"fixed-light","aria-label":M,"data-testid":i(n.TOAST_CLOSE_BUTTON),icon:v,hideTooltip:!0})))};export{C as default};
|
|
2
2
|
//# sourceMappingURL=Toast.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type ReactElement, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type IconSubComponentProps } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { Loader } from \"@vibe/loader\";\nimport { Flex } from \"@vibe/layout\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport ToastLink from \"./ToastLink/ToastLink\";\nimport ToastButton from \"./ToastButton/ToastButton\";\nimport { type ToastType, type ToastAction } from \"./Toast.types\";\nimport { getIcon } from \"./ToastHelpers\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Toast.module.scss\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nexport interface ToastProps extends VibeComponentProps {\n /**\n * The actions available in the toast.\n */\n actions?: ToastAction[];\n /**\n * If true, the toast is open (visible).\n */\n open?: boolean;\n /**\n * If true, displays a loading indicator inside the toast.\n */\n loading?: boolean;\n /**\n * The type of toast.\n */\n type?: ToastType;\n /**\n * The icon displayed in the toast.\n */\n icon?: string | React.FC<IconSubComponentProps> | null;\n /**\n * If true, hides the toast icon.\n */\n hideIcon?: boolean;\n /**\n * The action element displayed in the toast.\n */\n action?: JSX.Element;\n /**\n * If false, hides the close button.\n */\n closeable?: boolean;\n /**\n * Callback fired when the toast is closed.\n */\n onClose?: () => void;\n /**\n * The number of milliseconds before the toast automatically closes.\n * (0 or null disables auto-close behavior).\n */\n autoHideDuration?: number;\n /**\n * The content displayed inside the toast.\n */\n children?: ReactElement | ReactElement[] | string;\n /**\n * The aria-label for the close button.\n */\n closeButtonAriaLabel?: string;\n}\n\nconst Toast = ({\n open = false,\n loading = false,\n autoHideDuration = null,\n type = \"normal\",\n icon,\n hideIcon = false,\n action: deprecatedAction,\n actions,\n children,\n closeable = true,\n onClose = NOOP,\n className,\n id,\n closeButtonAriaLabel = \"Close\",\n \"data-testid\": dataTestId\n}: ToastProps) => {\n const ref = useRef(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n const prevActions = usePrevious(actions?.length);\n const toastLinks = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"link\")\n .map(({ type: _type, ...otherProps }) => (\n <ToastLink key={otherProps.href} className={styles.actionLink} {...otherProps} />\n ))\n : null;\n }, [actions]);\n\n const shouldShowButtonTransition = useMemo(() => {\n return prevActions !== undefined && actions?.length !== prevActions;\n }, [actions, prevActions]);\n\n const toastButtons: JSX.Element[] | null = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"button\")\n .map(({ type: _type, content, ...otherProps }, index) => (\n <ToastButton\n key={`alert-button-${index}`}\n className={cx(styles.actionButton, { [styles.withTransition]: shouldShowButtonTransition })}\n {...otherProps}\n >\n {content}\n </ToastButton>\n ))\n : null;\n }, [actions, shouldShowButtonTransition]);\n\n const classNames = useMemo(\n () => cx(styles.toast, getStyle(styles, camelCase(\"type-\" + type)), className),\n [type, className]\n );\n\n const handleClose = useCallback(() => {\n if (onClose) {\n onClose();\n }\n }, [onClose]);\n\n /* Timer */\n const timerAutoHide = useRef<NodeJS.Timeout>();\n const setAutoHideTimer = useCallback(\n (duration: number) => {\n if (!onClose || duration == null) {\n return;\n }\n\n clearTimeout(timerAutoHide.current);\n timerAutoHide.current = setTimeout(() => {\n handleClose();\n }, duration);\n },\n [handleClose, onClose]\n );\n\n useEffect(() => {\n if (open && autoHideDuration > 0) {\n setAutoHideTimer(autoHideDuration);\n }\n\n return () => {\n clearTimeout(timerAutoHide.current);\n };\n }, [open, autoHideDuration, setAutoHideTimer]);\n\n const iconElement = !hideIcon && getIcon(type, icon);\n\n // https://n12v.com/css-transition-to-from-auto/\n const recalculateElementWidth = useCallback((element: HTMLElement) => {\n const prevWidth = element.style.width;\n element.style.width = \"auto\";\n const endWidth = getComputedStyle(element).width;\n element.style.width = prevWidth;\n element.offsetWidth; // force repaint\n element.style.width = endWidth;\n }, []);\n\n useEffect(() => {\n if (ref.current) {\n recalculateElementWidth(ref.current);\n }\n }, [children, recalculateElementWidth]);\n\n return (\n <CSSTransition\n in={open}\n nodeRef={nodeRef}\n classNames={{ enterActive: styles.enterActive, exitActive: styles.exitActive }}\n timeout={400}\n unmountOnExit\n >\n <Text\n ref={nodeRef}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST, id)}\n type=\"text2\"\n element=\"div\"\n color=\"fixedLight\"\n className={classNames}\n role=\"alert\"\n aria-live=\"polite\"\n >\n {iconElement && <div className={cx(styles.icon)}>{iconElement}</div>}\n <Flex align=\"center\" gap=\"large\" className={styles.content}>\n <Flex\n gap=\"medium\"\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CONTENT)}\n className={styles.textContent}\n >\n <span>{children}</span>\n {toastLinks}\n </Flex>\n {(toastButtons || deprecatedAction) && (toastButtons || deprecatedAction)}\n {loading && <Loader size=\"xs\" />}\n </Flex>\n {closeable && (\n <IconButton\n className={cx(styles.closeButton)}\n onClick={handleClose}\n size=\"small\"\n kind=\"tertiary\"\n color=\"fixed-light\"\n aria-label={closeButtonAriaLabel}\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}\n icon={CloseSmall}\n hideTooltip\n />\n )}\n </Text>\n </CSSTransition>\n );\n};\n\nexport default Toast;\n"],"names":["Toast","_ref","_ref$open","open","_ref$loading","loading","_ref$autoHideDuration","autoHideDuration","_ref$type","type","icon","_ref$hideIcon","hideIcon","deprecatedAction","action","actions","children","_ref$closeable","closeable","_ref$onClose","onClose","NOOP","className","id","_ref$closeButtonAriaL","closeButtonAriaLabel","dataTestId","ref","useRef","nodeRef","prevActions","usePrevious","length","toastLinks","useMemo","filter","map","_a","otherProps","__rest","React","createElement","ToastLink","key","href","styles","actionLink","shouldShowButtonTransition","undefined","toastButtons","index","content","ToastButton","Object","assign","concat","cx","actionButton","_defineProperty","withTransition","classNames","toast","getStyle","camelCase","handleClose","useCallback","timerAutoHide","setAutoHideTimer","duration","clearTimeout","current","setTimeout","useEffect","iconElement","getIcon","recalculateElementWidth","element","prevWidth","style","width","endWidth","getComputedStyle","CSSTransition","in","enterActive","exitActive","timeout","unmountOnExit","Text","getTestId","ComponentDefaultTestId","TOAST","color","role","Flex","align","gap","TOAST_CONTENT","textContent","Loader","size","IconButton","closeButton","onClick","kind","TOAST_CLOSE_BUTTON","CloseSmall","hideTooltip"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type ReactElement, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type IconSubComponentProps } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { Loader } from \"@vibe/loader\";\nimport { Flex } from \"@vibe/layout\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport ToastLink from \"./ToastLink/ToastLink\";\nimport ToastButton from \"./ToastButton/ToastButton\";\nimport { type ToastType, type ToastAction } from \"./Toast.types\";\nimport { getIcon } from \"./ToastHelpers\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\n\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Toast.module.scss\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nexport interface ToastProps extends VibeComponentProps {\n /**\n * The actions available in the toast.\n */\n actions?: ToastAction[];\n /**\n * If true, the toast is open (visible).\n */\n open?: boolean;\n /**\n * If true, displays a loading indicator inside the toast.\n */\n loading?: boolean;\n /**\n * The type of toast.\n */\n type?: ToastType;\n /**\n * The icon displayed in the toast.\n */\n icon?: string | React.FC<IconSubComponentProps> | null;\n /**\n * If true, hides the toast icon.\n */\n hideIcon?: boolean;\n /**\n * The action element displayed in the toast.\n */\n action?: JSX.Element;\n /**\n * If false, hides the close button.\n */\n closeable?: boolean;\n /**\n * Callback fired when the toast is closed.\n */\n onClose?: () => void;\n /**\n * The number of milliseconds before the toast automatically closes.\n * (0 or null disables auto-close behavior).\n */\n autoHideDuration?: number;\n /**\n * The content displayed inside the toast.\n */\n children?: ReactElement | ReactElement[] | string;\n /**\n * The aria-label for the close button.\n */\n closeButtonAriaLabel?: string;\n}\n\nconst Toast = ({\n open = false,\n loading = false,\n autoHideDuration = null,\n type = \"normal\",\n icon,\n hideIcon = false,\n action: deprecatedAction,\n actions,\n children,\n closeable = true,\n onClose = NOOP,\n className,\n id,\n closeButtonAriaLabel = \"Close\",\n \"data-testid\": dataTestId\n}: ToastProps) => {\n const ref = useRef(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n const prevActions = usePrevious(actions?.length);\n const toastLinks = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"link\")\n .map(({ type: _type, ...otherProps }) => (\n <ToastLink key={otherProps.href} className={styles.actionLink} {...otherProps} />\n ))\n : null;\n }, [actions]);\n\n const shouldShowButtonTransition = useMemo(() => {\n return prevActions !== undefined && actions?.length !== prevActions;\n }, [actions, prevActions]);\n\n const toastButtons: JSX.Element[] | null = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"button\")\n .map(({ type: _type, content, ...otherProps }, index) => (\n <ToastButton\n key={`alert-button-${index}`}\n className={cx(styles.actionButton, { [styles.withTransition]: shouldShowButtonTransition })}\n {...otherProps}\n >\n {content}\n </ToastButton>\n ))\n : null;\n }, [actions, shouldShowButtonTransition]);\n\n const classNames = useMemo(\n () => cx(styles.toast, getStyle(styles, camelCase(\"type-\" + type)), className),\n [type, className]\n );\n\n const handleClose = useCallback(() => {\n if (onClose) {\n onClose();\n }\n }, [onClose]);\n\n /* Timer */\n const timerAutoHide = useRef<NodeJS.Timeout>();\n const setAutoHideTimer = useCallback(\n (duration: number) => {\n if (!onClose || duration == null) {\n return;\n }\n\n clearTimeout(timerAutoHide.current);\n timerAutoHide.current = setTimeout(() => {\n handleClose();\n }, duration);\n },\n [handleClose, onClose]\n );\n\n useEffect(() => {\n if (open && autoHideDuration > 0) {\n setAutoHideTimer(autoHideDuration);\n }\n\n return () => {\n clearTimeout(timerAutoHide.current);\n };\n }, [open, autoHideDuration, setAutoHideTimer]);\n\n const iconElement = !hideIcon && getIcon(type, icon);\n\n // https://n12v.com/css-transition-to-from-auto/\n const recalculateElementWidth = useCallback((element: HTMLElement) => {\n const prevWidth = element.style.width;\n element.style.width = \"auto\";\n const endWidth = getComputedStyle(element).width;\n element.style.width = prevWidth;\n element.offsetWidth; // force repaint\n element.style.width = endWidth;\n }, []);\n\n useEffect(() => {\n if (ref.current) {\n recalculateElementWidth(ref.current);\n }\n }, [children, recalculateElementWidth]);\n\n return (\n <CSSTransition\n in={open}\n nodeRef={nodeRef}\n classNames={{ enterActive: styles.enterActive, exitActive: styles.exitActive }}\n timeout={400}\n unmountOnExit\n >\n <Text\n ref={nodeRef}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST, id)}\n type=\"text2\"\n element=\"div\"\n color=\"fixedLight\"\n className={classNames}\n role=\"alert\"\n aria-live=\"polite\"\n >\n {iconElement && <div className={cx(styles.icon)}>{iconElement}</div>}\n <Flex align=\"center\" gap=\"large\" className={styles.content}>\n <Flex\n gap=\"medium\"\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CONTENT)}\n className={styles.textContent}\n >\n <span>{children}</span>\n {toastLinks}\n </Flex>\n {(toastButtons || deprecatedAction) && (toastButtons || deprecatedAction)}\n {loading && <Loader size=\"xs\" />}\n </Flex>\n {closeable && (\n <IconButton\n className={cx(styles.closeButton)}\n onClick={handleClose}\n size=\"small\"\n kind=\"tertiary\"\n color=\"fixed-light\"\n aria-label={closeButtonAriaLabel}\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}\n icon={CloseSmall}\n hideTooltip\n />\n )}\n </Text>\n </CSSTransition>\n );\n};\n\nexport default Toast;\n"],"names":["Toast","_ref","_ref$open","open","_ref$loading","loading","_ref$autoHideDuration","autoHideDuration","_ref$type","type","icon","_ref$hideIcon","hideIcon","deprecatedAction","action","actions","children","_ref$closeable","closeable","_ref$onClose","onClose","NOOP","className","id","_ref$closeButtonAriaL","closeButtonAriaLabel","dataTestId","ref","useRef","nodeRef","prevActions","usePrevious","length","toastLinks","useMemo","filter","map","_a","otherProps","__rest","React","createElement","ToastLink","key","href","styles","actionLink","shouldShowButtonTransition","undefined","toastButtons","index","content","ToastButton","Object","assign","concat","cx","actionButton","_defineProperty","withTransition","classNames","toast","getStyle","camelCase","handleClose","useCallback","timerAutoHide","setAutoHideTimer","duration","clearTimeout","current","setTimeout","useEffect","iconElement","getIcon","recalculateElementWidth","element","prevWidth","style","width","endWidth","getComputedStyle","CSSTransition","in","enterActive","exitActive","timeout","unmountOnExit","Text","getTestId","ComponentDefaultTestId","TOAST","color","role","Flex","align","gap","TOAST_CONTENT","textContent","Loader","size","IconButton","closeButton","onClick","kind","TOAST_CLOSE_BUTTON","CloseSmall","hideTooltip"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r from"./ToggleText.js";import l from"classnames";import t from"react";import
|
|
1
|
+
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r from"./ToggleText.js";import l from"classnames";import t from"react";import a from"./MockToggle.module.scss.js";import{getStyle as o}from"@vibe/shared";var s=function(s){var i=s.areLabelsHidden,d=s.checked,m=s.onOverrideText,n=s.className,c=s.selectedClassName,p=s.disabled,u=s.size,f=void 0===u?"medium":u;return t.createElement(t.Fragment,null,i?null:t.createElement(r,{disabled:p},s.offOverrideText),t.createElement("div",{className:l(a.toggle,o(a,f),n,e(e(e(e({},l(a.selected,c),d),a.notSelected,!d),a.disabled,p),a.noSpacing,i)),"aria-hidden":"true"}),i?null:t.createElement(r,{disabled:p},m))};export{s as MockToggle};
|
|
2
2
|
//# sourceMappingURL=MockToggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MockToggle.js","sources":["../../../../../src/components/Toggle/MockToggle.tsx"],"sourcesContent":["import ToggleText from \"./ToggleText\";\nimport cx from \"classnames\";\nimport React, { type FC } from \"react\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./MockToggle.module.scss\";\nimport { type ToggleSize } from \"./Toggle.types\";\nimport { getStyle } from \"
|
|
1
|
+
{"version":3,"file":"MockToggle.js","sources":["../../../../../src/components/Toggle/MockToggle.tsx"],"sourcesContent":["import ToggleText from \"./ToggleText\";\nimport cx from \"classnames\";\nimport React, { type FC } from \"react\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./MockToggle.module.scss\";\nimport { type ToggleSize } from \"./Toggle.types\";\nimport { getStyle } from \"@vibe/shared\";\n\nexport interface MockToggleProps extends VibeComponentProps {\n /**\n * If true, hides the on/off labels.\n */\n areLabelsHidden?: boolean;\n /**\n * If true, the toggle is in the \"on\" state.\n */\n checked?: boolean;\n /**\n * The text displayed when the toggle is in the \"off\" state.\n */\n offOverrideText?: string;\n /**\n * The text displayed when the toggle is in the \"on\" state.\n */\n onOverrideText?: string;\n /**\n * Class name applied when the toggle is selected.\n */\n selectedClassName?: string;\n /**\n * If true, disables the toggle.\n */\n disabled: boolean;\n /**\n * The size of the toggle.\n */\n size?: ToggleSize;\n}\n\nexport const MockToggle: FC<MockToggleProps> = ({\n areLabelsHidden,\n checked,\n offOverrideText,\n onOverrideText,\n className,\n selectedClassName,\n disabled,\n size = \"medium\"\n}) => (\n <>\n {areLabelsHidden ? null : <ToggleText disabled={disabled}>{offOverrideText}</ToggleText>}\n <div\n className={cx(styles.toggle, getStyle(styles, size), className, {\n [cx(styles.selected, selectedClassName)]: checked,\n [styles.notSelected]: !checked,\n [styles.disabled]: disabled,\n [styles.noSpacing]: areLabelsHidden\n })}\n aria-hidden=\"true\"\n />\n {areLabelsHidden ? null : <ToggleText disabled={disabled}>{onOverrideText}</ToggleText>}\n </>\n);\n"],"names":["MockToggle","_ref","areLabelsHidden","checked","onOverrideText","className","selectedClassName","disabled","_ref$size","size","React","createElement","Fragment","ToggleText","offOverrideText","cx","styles","toggle","getStyle","_defineProperty","selected","notSelected","noSpacing"],"mappings":"qPAuCaA,EAAkC,SAAxBC,GAAA,IACrBC,EAAeD,EAAfC,gBACAC,EAAOF,EAAPE,QAEAC,EAAcH,EAAdG,eACAC,EAASJ,EAATI,UACAC,EAAiBL,EAAjBK,kBACAC,EAAQN,EAARM,SAAQC,EAAAP,EACRQ,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAA,OAEfE,EAAAC,cAAAD,EAAAE,SAAA,KACGV,EAAkB,KAAOQ,EAACC,cAAAE,GAAWN,SAAUA,GARnCN,EAAfa,iBASEJ,EAAAC,cAAA,MAAA,CACEN,UAAWU,EAAGC,EAAOC,OAAQC,EAASF,EAAQP,GAAOJ,EAASc,EAAAA,EAAAA,EAAAA,EAC3DJ,CAAAA,EAAAA,EAAGC,EAAOI,SAAUd,GAAqBH,GACzCa,EAAOK,aAAelB,GACtBa,EAAOT,SAAWA,GAClBS,EAAOM,UAAYpB,IACpB,cACU,SAEbA,EAAkB,KAAOQ,EAACC,cAAAE,EAAW,CAAAN,SAAUA,GAAWH,GAC1D"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e,{forwardRef as t,useState as o,useRef as n,useCallback as i,useMemo as l,useEffect as u}from"react";import s from"classnames";import{VariableSizeGrid as c}from"react-window";import a from"react-virtualized-auto-sizer";import{getNormalizedItems as d,getOnItemsRenderedData as m,isLayoutDirectionScrollbarVisible as f}from"../../services/virtualized-service.js";import v from"../../hooks/usePrevious/index.js";import h from"../../hooks/useThrottledCallback.js";import I
|
|
1
|
+
import{slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e,{forwardRef as t,useState as o,useRef as n,useCallback as i,useMemo as l,useEffect as u}from"react";import s from"classnames";import{VariableSizeGrid as c}from"react-window";import a from"react-virtualized-auto-sizer";import{getNormalizedItems as d,getOnItemsRenderedData as m,isLayoutDirectionScrollbarVisible as f}from"../../services/virtualized-service.js";import v from"../../hooks/usePrevious/index.js";import h from"../../hooks/useThrottledCallback.js";import{useMergeRef as I,NOOP as p}from"@vibe/shared";import{getTestId as g,ComponentDefaultTestId as w}from"../../tests/testIds.js";import x from"./VirtualizedGrid.module.scss.js";var R=t((function(t,R){var T=t.className,b=t.id,S=t.items,C=void 0===S?[]:S,z=t.itemRenderer,N=t.getRowHeight,j=void 0===N?function(){return 50}:N,M=t.getColumnWidth,E=void 0===M?function(){return 100}:M,V=t.getItemId,W=void 0===V?function(r,e){return r.id}:V,k=t.onScroll,y=t.scrollToId,A=void 0===y?null:y,D=t.onScrollToFinished,G=void 0===D?p:D,H=t.onItemsRendered,O=void 0===H?null:H,U=t.onItemsRenderedThrottleMs,_=void 0===U?200:U,F=t.onSizeUpdate,P=void 0===F?p:F,q=t.onVerticalScrollbarVisiblityChange,B=void 0===q?null:q,L=t.scrollableClassName,Z=t["data-testid"],J=o(0),K=r(J,2),Q=K[0],X=K[1],Y=o(0),$=r(Y,2),rr=$[0],er=$[1],tr=v(A),or=n(null),nr=n(null),ir=n(null),lr=n(0),ur=n({scrollOffsetInitial:0,scrollOffsetFinal:0,animationStartTime:0}),sr=I(R,or),cr=ur.current,ar=i((function(r){var e=j();return e&&!Number.isNaN(e)||console.error("Couldn't get height for item: ",r),e}),[j]),dr=i((function(r,e){var t=W(r,e);return void 0===t&&console.error("Couldn't get id for item: ",r),t}),[W]),mr=l((function(){return d(C,dr,ar)}),[C,dr,ar]),fr=l((function(){return Math.min(C.length,Math.floor(rr/E()))}),[C,rr,E]),vr=l((function(){return fr>0?Math.ceil(C.length/fr):0}),[C,fr]),hr=l((function(){return A%fr}),[A,fr]),Ir=l((function(){return Math.floor(A/fr)}),[A,fr]),pr=i((function(r){var e=r.horizontalScrollDirection,t=r.scrollTop,o=r.scrollUpdateWasRequested;lr.current=t,o||(cr.scrollOffsetInitial=t),k&&k(e,t,o)}),[k,lr,cr]),gr=i((function(r){var e=r.rowIndex*fr+r.columnIndex;return z(C[e],e,r.style)}),[C,z,fr]),wr=i((function(r,e){e===Q&&r===rr||setTimeout((function(){X(e),er(r),P(r,e)}),0)}),[Q,rr,P]),xr=h((function(r){if(O){var e=m(C,mr,dr,r.visibleRowStartIndex,r.visibleRowStopIndex,Q,lr.current);O(e)}}),{wait:_,trailing:!0},[O,C,mr,dr,Q]);return u((function(){A&&tr!==A&&(ir.current.scrollToItem({align:"center",columnIndex:hr,rowIndex:Ir}),G())}),[A,tr,ir,hr,Ir,G]),u((function(){ir.current&&ir.current.resetAfterIndices({columnIndex:0,rowIndex:0})}),[mr]),u((function(){if(B){var r=f(C,mr,dr,Q);nr.current!==r&&(nr.current=r,B(r))}}),[B,C,mr,Q,dr]),e.createElement("div",{ref:sr,className:s(x.virtualizedGridWrapper,T),id:b,"data-testid":Z||g(w.VIRTUALIZED_GRID,b)},e.createElement(a,null,(function(r){var t=r.height,o=r.width;return wr(o,t),e.createElement(c,{ref:ir,height:t,width:o,columnWidth:E,columnCount:fr,rowHeight:j,rowCount:vr,onScroll:pr,onItemsRendered:xr,className:L},gr)})))}));export{R as default};
|
|
2
2
|
//# sourceMappingURL=VirtualizedGrid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualizedGrid.js","sources":["../../../../../src/components/VirtualizedGrid/VirtualizedGrid.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n type ReactElement,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport cx from \"classnames\";\nimport {\n type GridChildComponentProps,\n type GridOnScrollProps,\n type ScrollDirection,\n VariableSizeGrid as Grid,\n type GridOnItemsRenderedProps\n} from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport {\n getNormalizedItems,\n getOnItemsRenderedData,\n isLayoutDirectionScrollbarVisible\n} from \"../../services/virtualized-service\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useThrottledCallback from \"../../hooks/useThrottledCallback\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./VirtualizedGrid.module.scss\";\nimport { type VirtualizedGridItemType as ItemType } from \"./VirtualizedGrid.types\";\n\nexport interface VirtualizedGridProps extends VibeComponentProps {\n /**\n * The list of items to be rendered in the grid.\n */\n items: ItemType[];\n /**\n * Function that renders each item in the grid.\n */\n itemRenderer: (item: ItemType, index: number, style: CSSProperties) => ReactElement;\n /**\n * Function that returns the row height.\n */\n getRowHeight: () => number;\n /**\n * Function that returns the column width.\n */\n getColumnWidth: () => number;\n /**\n * Function that returns the unique ID of an item.\n */\n getItemId?: (item: ItemType, index: number) => string;\n /**\n * The index of the item to scroll to.\n */\n scrollToId?: number;\n /**\n * Callback fired when the grid is scrolled.\n */\n onScroll?: (horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;\n /**\n * Callback fired when scrolling has finished.\n */\n onScrollToFinished?: () => void;\n /**\n * Callback fired when items are rendered in the grid.\n */\n onItemsRendered?: ({\n firstItemId,\n secondItemId,\n lastItemId,\n centerItemId,\n firstItemOffsetEnd,\n currentOffsetTop\n }: {\n firstItemId: string;\n secondItemId: string;\n lastItemId: string;\n centerItemId: string;\n firstItemOffsetEnd: number;\n currentOffsetTop: number;\n }) => void;\n /**\n * The delay (in ms) for throttling the `onItemsRendered` callback.\n */\n onItemsRenderedThrottleMs?: number;\n /**\n * Callback fired when the grid size is updated.\n */\n onSizeUpdate?: (width: number, height: number) => void;\n /**\n * Callback fired when the vertical scrollbar visibility changes.\n */\n onVerticalScrollbarVisiblityChange?: (value: boolean) => void;\n /**\n * Class name applied to the scrollable container.\n */\n scrollableClassName?: string;\n}\n\nconst VirtualizedGrid = forwardRef(\n (\n {\n className,\n id,\n items = [],\n itemRenderer,\n getRowHeight = () => 50,\n getColumnWidth = () => 100,\n getItemId = (item: ItemType, _index: number) => item.id,\n onScroll,\n scrollToId = null,\n onScrollToFinished = NOOP,\n onItemsRendered = null,\n onItemsRenderedThrottleMs = 200,\n onSizeUpdate = NOOP,\n onVerticalScrollbarVisiblityChange = null,\n scrollableClassName,\n \"data-testid\": dataTestId\n }: VirtualizedGridProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n // states\n const [gridHeight, setGridHeight] = useState(0);\n const [gridWidth, setGridWidth] = useState(0);\n\n // prevs\n const prevScrollToId = usePrevious(scrollToId);\n\n // Refs\n const componentRef = useRef(null);\n const isVerticalScrollbarVisibleRef = useRef(null);\n const gridRef = useRef(null);\n const scrollTopRef = useRef(0);\n const animationDataRef = useRef({\n scrollOffsetInitial: 0,\n scrollOffsetFinal: 0,\n animationStartTime: 0\n });\n const mergedRef = useMergeRef(ref, componentRef);\n\n const animationData = animationDataRef.current;\n\n // Callbacks\n const heightGetter = useCallback(\n (item: ItemType) => {\n const height = getRowHeight();\n if (!height || Number.isNaN(height)) {\n console.error(\"Couldn't get height for item: \", item);\n }\n return height;\n },\n [getRowHeight]\n );\n\n const idGetter = useCallback(\n (item: ItemType, index: number) => {\n const itemId = getItemId(item, index);\n if (itemId === undefined) {\n console.error(\"Couldn't get id for item: \", item);\n }\n return itemId;\n },\n [getItemId]\n );\n\n // Memos\n // Creates object of itemId => { item, index, height, offsetTop}\n const normalizedItems = useMemo(() => {\n return getNormalizedItems(items, idGetter, heightGetter);\n }, [items, idGetter, heightGetter]);\n\n const calcColumnCount = useMemo(() => {\n return Math.min(items.length, Math.floor(gridWidth / getColumnWidth()));\n }, [items, gridWidth, getColumnWidth]);\n\n const calcRowCount = useMemo(() => {\n return calcColumnCount > 0 ? Math.ceil(items.length / calcColumnCount) : 0;\n }, [items, calcColumnCount]);\n\n const scrollToColumnIndex = useMemo(() => {\n return scrollToId % calcColumnCount;\n }, [scrollToId, calcColumnCount]);\n\n const scrollToRowIndex = useMemo(() => {\n return Math.floor(scrollToId / calcColumnCount);\n }, [scrollToId, calcColumnCount]);\n\n // Callbacks\n const onScrollCB = useCallback(\n ({ horizontalScrollDirection, scrollTop, scrollUpdateWasRequested }: GridOnScrollProps) => {\n scrollTopRef.current = scrollTop;\n if (!scrollUpdateWasRequested) {\n animationData.scrollOffsetInitial = scrollTop;\n }\n onScroll && onScroll(horizontalScrollDirection, scrollTop, scrollUpdateWasRequested);\n },\n [onScroll, scrollTopRef, animationData]\n );\n\n const cellRenderer = useCallback(\n ({ columnIndex, rowIndex, style }: { columnIndex: number; rowIndex: number; style: CSSProperties }) => {\n const index = rowIndex * calcColumnCount + columnIndex;\n const item = items[index];\n return itemRenderer(item, index, style);\n },\n [items, itemRenderer, calcColumnCount]\n );\n\n const updateGridSize = useCallback(\n (width: number, height: number) => {\n if (height !== gridHeight || width !== gridWidth) {\n setTimeout(() => {\n setGridHeight(height);\n setGridWidth(width);\n onSizeUpdate(width, height);\n }, 0);\n }\n },\n [gridHeight, gridWidth, onSizeUpdate]\n );\n\n const onItemsRenderedCB = useThrottledCallback(\n ({ visibleRowStartIndex, visibleRowStopIndex }: GridOnItemsRenderedProps) => {\n if (!onItemsRendered) return;\n const data = getOnItemsRenderedData(\n items,\n normalizedItems,\n idGetter,\n visibleRowStartIndex,\n visibleRowStopIndex,\n gridHeight,\n scrollTopRef.current\n );\n onItemsRendered(data);\n },\n { wait: onItemsRenderedThrottleMs, trailing: true },\n [onItemsRendered, items, normalizedItems, idGetter, gridHeight]\n );\n\n // Effects\n useEffect(() => {\n // scroll to specific item\n if (scrollToId && prevScrollToId !== scrollToId) {\n gridRef.current.scrollToItem({\n align: \"center\",\n columnIndex: scrollToColumnIndex,\n rowIndex: scrollToRowIndex\n });\n onScrollToFinished();\n }\n }, [scrollToId, prevScrollToId, gridRef, scrollToColumnIndex, scrollToRowIndex, onScrollToFinished]);\n\n useEffect(() => {\n // recalculate row heights\n if (gridRef.current) {\n gridRef.current.resetAfterIndices({ columnIndex: 0, rowIndex: 0 });\n }\n }, [normalizedItems]);\n\n useEffect(() => {\n // update vertical scrollbar visibility\n if (onVerticalScrollbarVisiblityChange) {\n const isVisible = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, gridHeight);\n if (isVerticalScrollbarVisibleRef.current !== isVisible) {\n isVerticalScrollbarVisibleRef.current = isVisible;\n onVerticalScrollbarVisiblityChange(isVisible);\n }\n }\n }, [onVerticalScrollbarVisiblityChange, items, normalizedItems, gridHeight, idGetter]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.virtualizedGridWrapper, className)}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.VIRTUALIZED_GRID, id)}\n >\n <AutoSizer>\n {({ height, width }: { height: number; width: number }) => {\n updateGridSize(width, height);\n return (\n <Grid\n ref={gridRef}\n height={height}\n width={width}\n columnWidth={getColumnWidth}\n columnCount={calcColumnCount}\n rowHeight={getRowHeight}\n rowCount={calcRowCount}\n onScroll={onScrollCB}\n onItemsRendered={onItemsRenderedCB}\n className={scrollableClassName}\n >\n {cellRenderer as unknown as React.ComponentType<GridChildComponentProps>}\n </Grid>\n );\n }}\n </AutoSizer>\n </div>\n );\n }\n);\n\nexport default VirtualizedGrid;\n"],"names":["VirtualizedGrid","forwardRef","_ref","ref","className","id","_ref$items","items","itemRenderer","_ref$getRowHeight","getRowHeight","_ref$getColumnWidth","getColumnWidth","_ref$getItemId","getItemId","item","_index","onScroll","_ref$scrollToId","scrollToId","_ref$onScrollToFinish","onScrollToFinished","NOOP","_ref$onItemsRendered","onItemsRendered","_ref$onItemsRenderedT","onItemsRenderedThrottleMs","_ref$onSizeUpdate","onSizeUpdate","_ref$onVerticalScroll","onVerticalScrollbarVisiblityChange","scrollableClassName","dataTestId","_useState","useState","_useState2","_slicedToArray","gridHeight","setGridHeight","_useState3","_useState4","gridWidth","setGridWidth","prevScrollToId","usePrevious","componentRef","useRef","isVerticalScrollbarVisibleRef","gridRef","scrollTopRef","animationDataRef","scrollOffsetInitial","scrollOffsetFinal","animationStartTime","mergedRef","useMergeRef","animationData","current","heightGetter","useCallback","height","Number","isNaN","console","error","idGetter","index","itemId","undefined","normalizedItems","useMemo","getNormalizedItems","calcColumnCount","Math","min","length","floor","calcRowCount","ceil","scrollToColumnIndex","scrollToRowIndex","onScrollCB","_ref2","horizontalScrollDirection","scrollTop","scrollUpdateWasRequested","cellRenderer","_ref3","rowIndex","columnIndex","style","updateGridSize","width","setTimeout","onItemsRenderedCB","useThrottledCallback","_ref4","data","getOnItemsRenderedData","visibleRowStartIndex","visibleRowStopIndex","wait","trailing","useEffect","scrollToItem","align","resetAfterIndices","isVisible","isLayoutDirectionScrollbarVisible","React","createElement","cx","styles","virtualizedGridWrapper","getTestId","ComponentDefaultTestId","VIRTUALIZED_GRID","AutoSizer","_ref5","Grid","columnWidth","columnCount","rowHeight","rowCount"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"VirtualizedGrid.js","sources":["../../../../../src/components/VirtualizedGrid/VirtualizedGrid.tsx"],"sourcesContent":["import React, {\n type CSSProperties,\n type ReactElement,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport cx from \"classnames\";\nimport {\n type GridChildComponentProps,\n type GridOnScrollProps,\n type ScrollDirection,\n VariableSizeGrid as Grid,\n type GridOnItemsRenderedProps\n} from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport {\n getNormalizedItems,\n getOnItemsRenderedData,\n isLayoutDirectionScrollbarVisible\n} from \"../../services/virtualized-service\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useThrottledCallback from \"../../hooks/useThrottledCallback\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\n\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./VirtualizedGrid.module.scss\";\nimport { type VirtualizedGridItemType as ItemType } from \"./VirtualizedGrid.types\";\n\nexport interface VirtualizedGridProps extends VibeComponentProps {\n /**\n * The list of items to be rendered in the grid.\n */\n items: ItemType[];\n /**\n * Function that renders each item in the grid.\n */\n itemRenderer: (item: ItemType, index: number, style: CSSProperties) => ReactElement;\n /**\n * Function that returns the row height.\n */\n getRowHeight: () => number;\n /**\n * Function that returns the column width.\n */\n getColumnWidth: () => number;\n /**\n * Function that returns the unique ID of an item.\n */\n getItemId?: (item: ItemType, index: number) => string;\n /**\n * The index of the item to scroll to.\n */\n scrollToId?: number;\n /**\n * Callback fired when the grid is scrolled.\n */\n onScroll?: (horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;\n /**\n * Callback fired when scrolling has finished.\n */\n onScrollToFinished?: () => void;\n /**\n * Callback fired when items are rendered in the grid.\n */\n onItemsRendered?: ({\n firstItemId,\n secondItemId,\n lastItemId,\n centerItemId,\n firstItemOffsetEnd,\n currentOffsetTop\n }: {\n firstItemId: string;\n secondItemId: string;\n lastItemId: string;\n centerItemId: string;\n firstItemOffsetEnd: number;\n currentOffsetTop: number;\n }) => void;\n /**\n * The delay (in ms) for throttling the `onItemsRendered` callback.\n */\n onItemsRenderedThrottleMs?: number;\n /**\n * Callback fired when the grid size is updated.\n */\n onSizeUpdate?: (width: number, height: number) => void;\n /**\n * Callback fired when the vertical scrollbar visibility changes.\n */\n onVerticalScrollbarVisiblityChange?: (value: boolean) => void;\n /**\n * Class name applied to the scrollable container.\n */\n scrollableClassName?: string;\n}\n\nconst VirtualizedGrid = forwardRef(\n (\n {\n className,\n id,\n items = [],\n itemRenderer,\n getRowHeight = () => 50,\n getColumnWidth = () => 100,\n getItemId = (item: ItemType, _index: number) => item.id,\n onScroll,\n scrollToId = null,\n onScrollToFinished = NOOP,\n onItemsRendered = null,\n onItemsRenderedThrottleMs = 200,\n onSizeUpdate = NOOP,\n onVerticalScrollbarVisiblityChange = null,\n scrollableClassName,\n \"data-testid\": dataTestId\n }: VirtualizedGridProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n // states\n const [gridHeight, setGridHeight] = useState(0);\n const [gridWidth, setGridWidth] = useState(0);\n\n // prevs\n const prevScrollToId = usePrevious(scrollToId);\n\n // Refs\n const componentRef = useRef(null);\n const isVerticalScrollbarVisibleRef = useRef(null);\n const gridRef = useRef(null);\n const scrollTopRef = useRef(0);\n const animationDataRef = useRef({\n scrollOffsetInitial: 0,\n scrollOffsetFinal: 0,\n animationStartTime: 0\n });\n const mergedRef = useMergeRef(ref, componentRef);\n\n const animationData = animationDataRef.current;\n\n // Callbacks\n const heightGetter = useCallback(\n (item: ItemType) => {\n const height = getRowHeight();\n if (!height || Number.isNaN(height)) {\n console.error(\"Couldn't get height for item: \", item);\n }\n return height;\n },\n [getRowHeight]\n );\n\n const idGetter = useCallback(\n (item: ItemType, index: number) => {\n const itemId = getItemId(item, index);\n if (itemId === undefined) {\n console.error(\"Couldn't get id for item: \", item);\n }\n return itemId;\n },\n [getItemId]\n );\n\n // Memos\n // Creates object of itemId => { item, index, height, offsetTop}\n const normalizedItems = useMemo(() => {\n return getNormalizedItems(items, idGetter, heightGetter);\n }, [items, idGetter, heightGetter]);\n\n const calcColumnCount = useMemo(() => {\n return Math.min(items.length, Math.floor(gridWidth / getColumnWidth()));\n }, [items, gridWidth, getColumnWidth]);\n\n const calcRowCount = useMemo(() => {\n return calcColumnCount > 0 ? Math.ceil(items.length / calcColumnCount) : 0;\n }, [items, calcColumnCount]);\n\n const scrollToColumnIndex = useMemo(() => {\n return scrollToId % calcColumnCount;\n }, [scrollToId, calcColumnCount]);\n\n const scrollToRowIndex = useMemo(() => {\n return Math.floor(scrollToId / calcColumnCount);\n }, [scrollToId, calcColumnCount]);\n\n // Callbacks\n const onScrollCB = useCallback(\n ({ horizontalScrollDirection, scrollTop, scrollUpdateWasRequested }: GridOnScrollProps) => {\n scrollTopRef.current = scrollTop;\n if (!scrollUpdateWasRequested) {\n animationData.scrollOffsetInitial = scrollTop;\n }\n onScroll && onScroll(horizontalScrollDirection, scrollTop, scrollUpdateWasRequested);\n },\n [onScroll, scrollTopRef, animationData]\n );\n\n const cellRenderer = useCallback(\n ({ columnIndex, rowIndex, style }: { columnIndex: number; rowIndex: number; style: CSSProperties }) => {\n const index = rowIndex * calcColumnCount + columnIndex;\n const item = items[index];\n return itemRenderer(item, index, style);\n },\n [items, itemRenderer, calcColumnCount]\n );\n\n const updateGridSize = useCallback(\n (width: number, height: number) => {\n if (height !== gridHeight || width !== gridWidth) {\n setTimeout(() => {\n setGridHeight(height);\n setGridWidth(width);\n onSizeUpdate(width, height);\n }, 0);\n }\n },\n [gridHeight, gridWidth, onSizeUpdate]\n );\n\n const onItemsRenderedCB = useThrottledCallback(\n ({ visibleRowStartIndex, visibleRowStopIndex }: GridOnItemsRenderedProps) => {\n if (!onItemsRendered) return;\n const data = getOnItemsRenderedData(\n items,\n normalizedItems,\n idGetter,\n visibleRowStartIndex,\n visibleRowStopIndex,\n gridHeight,\n scrollTopRef.current\n );\n onItemsRendered(data);\n },\n { wait: onItemsRenderedThrottleMs, trailing: true },\n [onItemsRendered, items, normalizedItems, idGetter, gridHeight]\n );\n\n // Effects\n useEffect(() => {\n // scroll to specific item\n if (scrollToId && prevScrollToId !== scrollToId) {\n gridRef.current.scrollToItem({\n align: \"center\",\n columnIndex: scrollToColumnIndex,\n rowIndex: scrollToRowIndex\n });\n onScrollToFinished();\n }\n }, [scrollToId, prevScrollToId, gridRef, scrollToColumnIndex, scrollToRowIndex, onScrollToFinished]);\n\n useEffect(() => {\n // recalculate row heights\n if (gridRef.current) {\n gridRef.current.resetAfterIndices({ columnIndex: 0, rowIndex: 0 });\n }\n }, [normalizedItems]);\n\n useEffect(() => {\n // update vertical scrollbar visibility\n if (onVerticalScrollbarVisiblityChange) {\n const isVisible = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, gridHeight);\n if (isVerticalScrollbarVisibleRef.current !== isVisible) {\n isVerticalScrollbarVisibleRef.current = isVisible;\n onVerticalScrollbarVisiblityChange(isVisible);\n }\n }\n }, [onVerticalScrollbarVisiblityChange, items, normalizedItems, gridHeight, idGetter]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.virtualizedGridWrapper, className)}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.VIRTUALIZED_GRID, id)}\n >\n <AutoSizer>\n {({ height, width }: { height: number; width: number }) => {\n updateGridSize(width, height);\n return (\n <Grid\n ref={gridRef}\n height={height}\n width={width}\n columnWidth={getColumnWidth}\n columnCount={calcColumnCount}\n rowHeight={getRowHeight}\n rowCount={calcRowCount}\n onScroll={onScrollCB}\n onItemsRendered={onItemsRenderedCB}\n className={scrollableClassName}\n >\n {cellRenderer as unknown as React.ComponentType<GridChildComponentProps>}\n </Grid>\n );\n }}\n </AutoSizer>\n </div>\n );\n }\n);\n\nexport default VirtualizedGrid;\n"],"names":["VirtualizedGrid","forwardRef","_ref","ref","className","id","_ref$items","items","itemRenderer","_ref$getRowHeight","getRowHeight","_ref$getColumnWidth","getColumnWidth","_ref$getItemId","getItemId","item","_index","onScroll","_ref$scrollToId","scrollToId","_ref$onScrollToFinish","onScrollToFinished","NOOP","_ref$onItemsRendered","onItemsRendered","_ref$onItemsRenderedT","onItemsRenderedThrottleMs","_ref$onSizeUpdate","onSizeUpdate","_ref$onVerticalScroll","onVerticalScrollbarVisiblityChange","scrollableClassName","dataTestId","_useState","useState","_useState2","_slicedToArray","gridHeight","setGridHeight","_useState3","_useState4","gridWidth","setGridWidth","prevScrollToId","usePrevious","componentRef","useRef","isVerticalScrollbarVisibleRef","gridRef","scrollTopRef","animationDataRef","scrollOffsetInitial","scrollOffsetFinal","animationStartTime","mergedRef","useMergeRef","animationData","current","heightGetter","useCallback","height","Number","isNaN","console","error","idGetter","index","itemId","undefined","normalizedItems","useMemo","getNormalizedItems","calcColumnCount","Math","min","length","floor","calcRowCount","ceil","scrollToColumnIndex","scrollToRowIndex","onScrollCB","_ref2","horizontalScrollDirection","scrollTop","scrollUpdateWasRequested","cellRenderer","_ref3","rowIndex","columnIndex","style","updateGridSize","width","setTimeout","onItemsRenderedCB","useThrottledCallback","_ref4","data","getOnItemsRenderedData","visibleRowStartIndex","visibleRowStopIndex","wait","trailing","useEffect","scrollToItem","align","resetAfterIndices","isVisible","isLayoutDirectionScrollbarVisible","React","createElement","cx","styles","virtualizedGridWrapper","getTestId","ComponentDefaultTestId","VIRTUALIZED_GRID","AutoSizer","_ref5","Grid","columnWidth","columnCount","rowHeight","rowCount"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import
|
|
1
|
+
import{slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i from"classnames";import e,{forwardRef as r,useState as o,useMemo as n,useRef as l,useCallback as a,useEffect as s}from"react";import{noop as c}from"es-toolkit";import{VariableSizeList as u}from"react-window";import f from"react-virtualized-auto-sizer";import d from"../../hooks/usePrevious/index.js";import m from"../../hooks/useThrottledCallback.js";import{useMergeRef as v}from"@vibe/shared";import{getNormalizedItems as p,getMaxOffset as h,getOnItemsRenderedData as I,isLayoutDirectionScrollbarVisible as S,easeInOutQuint as T}from"../../services/virtualized-service.js";import{getTestId as O}from"../../tests/testIds.js";import{ComponentDefaultTestId as g}from"../../tests/constants.js";import z from"./VirtualizedList.module.scss.js";var b=r((function(r,b){var y=r.className,C=r.id,j=r.items,w=void 0===j?[]:j,F=r.itemRenderer,R=void 0===F?function(t,i,e){return t}:F,x=r.getItemSize,L=void 0===x?function(t,i){return t.height}:x,k=r.layout,A=void 0===k?"vertical":k,D=r.onScroll,E=r.overscanCount,N=void 0===E?0:E,M=r.getItemId,U=void 0===M?function(t,i){return t.id}:M,V=r.scrollToId,_=r.scrollDuration,q=void 0===_?200:_,P=r.onScrollToFinished,W=void 0===P?c:P,B=r.onItemsRendered,H=r.onItemsRenderedThrottleMs,Z=void 0===H?200:H,G=r.onSizeUpdate,J=void 0===G?c:G,K=r.onLayoutDirectionScrollbarVisibilityChange,Q=void 0===K?null:K,X=r.virtualListRef,Y=r.scrollableClassName,$=r.role,tt=r["aria-label"],it=r.style,et=r["data-testid"],rt=o(0),ot=t(rt,2),nt=ot[0],lt=ot[1],at=o(0),st=t(at,2),ct=st[0],ut=st[1],ft="horizontal"!==A,dt=n((function(){return ft?nt:ct}),[ft,nt,ct]),mt=d(V),vt=l(null),pt=l(null),ht=l(null),It=l(0),St=l({initialized:!1,scrollOffsetInitial:0,scrollOffsetFinal:0,animationStartTime:0}),Tt=v(b,vt),Ot=v(X,ht),gt=St.current;gt.initialized||(gt.initialized=!0,gt.scrollOffsetInitial=0,gt.scrollOffsetFinal=0,gt.animationStartTime=0);var zt=a((function(t,i){var e=L(t,i);return void 0===e&&console.error("Couldn't get height for item: ",t),e}),[L]),bt=a((function(t,i){var e=U(t,i);return void 0===e&&console.error("Couldn't get id for item: ",t),e}),[U]),yt=n((function(){return p(w,bt,zt)}),[w,bt,zt]),Ct=n((function(){return h(dt,yt)}),[dt,yt]),jt=a((function(t){var i=t.scrollDirection,e=t.scrollOffset,r=t.scrollUpdateWasRequested;It.current=e,r||(gt.scrollOffsetInitial=e),D&&D(i,e,r)}),[D,It,gt]),wt=a((function(){requestAnimationFrame((function(){var t,i=performance.now()-gt.animationStartTime,e=gt.scrollOffsetFinal-gt.scrollOffsetInitial,r=T(Math.min(1,i/q)),o=Math.min(Ct,gt.scrollOffsetInitial+e*r);It.current=o,null===(t=ht.current)||void 0===t||t.scrollTo(o),q>i?wt():(gt.animationStartTime=void 0,W&&W())}))}),[q,gt,ht,Ct,W]),Ft=a((function(t){var i,e,r,o,n=t.offsetTop;gt.animationStartTime?gt.scrollOffsetFinal=n:(null!==(null===(e=null===(i=ht.current)||void 0===i?void 0:i.state)||void 0===e?void 0:e.scrollOffset)&&(gt.scrollOffsetInitial=null===(o=null===(r=ht.current)||void 0===r?void 0:r.state)||void 0===o?void 0:o.scrollOffset),gt.scrollOffsetInitial!==n?(gt.scrollOffsetFinal=n,gt.animationStartTime=performance.now(),wt()):W&&W())}),[gt,wt,W]),Rt=a((function(t){var i=t.index;return R(w[i],i,t.style)}),[w,R]),xt=a((function(t){return zt(w[t],t)}),[w,zt]),Lt=a((function(t,i){i===nt&&t===ct||setTimeout((function(){lt(i),ut(t),J(t,i)}),0)}),[nt,ct,J]),kt=m((function(t){if(B){var i=I(w,yt,bt,t.visibleStartIndex,t.visibleStopIndex,dt,It.current);B(i)}}),{wait:Z,trailing:!0},[B,w,yt,bt,dt]);return s((function(){if(V&&mt!==V){var t=S(w,yt,bt,dt),i=yt[V];t&&i&&Ft(i)}}),[mt,V,Ft,yt,w,bt,dt]),s((function(){ht.current&&ht.current.resetAfterIndex(0)}),[yt]),s((function(){if(Q){var t=S(w,yt,bt,dt);pt.current!==t&&(pt.current=t,Q(t))}}),[Q,w,yt,dt,bt]),e.createElement("div",{ref:Tt,className:i(z.virtualizedListWrapper,y),id:C,role:$,"aria-label":tt,"data-testid":et||O(g.VIRTUALIZED_LIST,C),style:it},e.createElement(f,null,(function(t){var i=t.height,r=t.width;return Lt(r,i),e.createElement(u,{ref:Ot,height:i,width:r,itemCount:w.length,itemSize:xt,onScroll:jt,layout:A,overscanCount:N,onItemsRendered:kt,className:Y},Rt)})))}));export{b as default};
|
|
2
2
|
//# sourceMappingURL=VirtualizedList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualizedList.js","sources":["../../../../../src/components/VirtualizedList/VirtualizedList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n type CSSProperties,\n type ForwardedRef,\n forwardRef,\n type LegacyRef,\n type ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport {\n type ScrollDirection,\n VariableSizeList as List,\n type ListOnItemsRenderedProps,\n type ListChildComponentProps,\n type VariableSizeList\n} from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useThrottledCallback from \"../../hooks/useThrottledCallback\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport {\n easeInOutQuint,\n getMaxOffset,\n getNormalizedItems,\n getOnItemsRenderedData,\n isLayoutDirectionScrollbarVisible\n} from \"../../services/virtualized-service\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./VirtualizedList.module.scss\";\nimport {\n type VirtualizedListItem,\n type VirtualizedListLayout,\n type VirtualizedListScrollDirection\n} from \"./VirtualizedList.types\";\n\nexport interface VirtualizedListProps extends VibeComponentProps {\n /**\n * Class name applied to the scrollable container.\n */\n scrollableClassName?: string;\n /**\n * The orientation of the list.\n */\n layout?: VirtualizedListLayout;\n /**\n * The list of items to be rendered.\n */\n items: VirtualizedListItem[];\n /**\n * Function to render each item in the list.\n */\n itemRenderer: (item: VirtualizedListItem, index: number, style: CSSProperties) => ReactElement | JSX.Element;\n /**\n * Function to get the size (height/width) of each item, based on layout.\n */\n getItemSize?: (item: VirtualizedListItem, index: number) => number;\n /**\n * Function to get the unique ID of an item.\n */\n getItemId?: (item: VirtualizedListItem, index: number) => string;\n /**\n * Callback fired when the scroll animation is finished.\n */\n onScrollToFinished?: () => void;\n /**\n * Number of items to render above and below the visible portion.\n */\n overscanCount?: number;\n /**\n * The duration of the scroll animation in milliseconds.\n */\n scrollDuration?: number;\n /**\n * Callback fired when items are rendered.\n */\n onItemsRendered?: ({\n firstItemId,\n secondItemId,\n lastItemId,\n centerItemId,\n firstItemOffsetEnd,\n currentOffsetTop\n }: {\n firstItemId: string;\n secondItemId: string;\n lastItemId: string;\n centerItemId: string;\n firstItemOffsetEnd: number;\n currentOffsetTop: number;\n }) => void;\n /**\n * The delay (in ms) for throttling the `onItemsRendered` callback.\n */\n onItemsRenderedThrottleMs?: number;\n /**\n * Callback fired when the list size changes.\n */\n onSizeUpdate?: (width: number, height: number) => void;\n /**\n * Callback fired when the vertical or horizontal scrollbar visibility changes.\n */\n onLayoutDirectionScrollbarVisibilityChange?: (value: boolean) => void;\n /**\n * The ARIA role attribute applied to the list.\n */\n role?: string;\n /**\n * The ARIA label for the list.\n */\n \"aria-label\"?: string;\n /**\n * Custom inline styles applied to the list.\n */\n style?: CSSProperties;\n /**\n * The ID of the item to scroll to.\n */\n scrollToId?: string;\n /**\n * Reference to the virtualized list component.\n */\n virtualListRef?: ForwardedRef<HTMLElement>;\n /**\n * Callback fired when the list is scrolled.\n */\n onScroll?: (\n horizontalScrollDirection: VirtualizedListScrollDirection,\n scrollTop: number,\n scrollUpdateWasRequested: boolean\n ) => void;\n}\n\nconst VirtualizedList = forwardRef(\n (\n {\n className,\n id,\n items = [],\n itemRenderer = (item: VirtualizedListItem, _index: number, _style: CSSProperties) => item as ReactElement,\n getItemSize = (item: VirtualizedListItem, _index: number) => item.height,\n layout = \"vertical\",\n onScroll,\n overscanCount = 0,\n getItemId = (item: VirtualizedListItem, _index: number) => item.id,\n scrollToId,\n scrollDuration = 200,\n onScrollToFinished = NOOP,\n onItemsRendered,\n onItemsRenderedThrottleMs = 200,\n onSizeUpdate = NOOP,\n onLayoutDirectionScrollbarVisibilityChange = null,\n virtualListRef,\n scrollableClassName,\n role,\n \"aria-label\": ariaLabel,\n style,\n \"data-testid\": dataTestId\n }: VirtualizedListProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n // states\n const [listHeight, setListHeight] = useState(0);\n const [listWidth, setListWidth] = useState(0);\n\n const isVerticalList = layout !== \"horizontal\";\n const listSizeByLayout = useMemo(() => {\n return isVerticalList ? listHeight : listWidth;\n }, [isVerticalList, listHeight, listWidth]);\n\n // prevs\n const prevScrollToId = usePrevious(scrollToId);\n\n // Refs\n const componentRef = useRef(null);\n const isVerticalScrollbarVisibleRef = useRef(null);\n const listRef = useRef(null);\n const scrollTopRef = useRef(0);\n const animationDataRef = useRef({\n initialized: false,\n scrollOffsetInitial: 0,\n scrollOffsetFinal: 0,\n animationStartTime: 0\n });\n const mergedRef = useMergeRef(ref, componentRef);\n const mergedListRef = useMergeRef(virtualListRef, listRef);\n\n const animationData = animationDataRef.current;\n if (!animationData.initialized) {\n animationData.initialized = true;\n animationData.scrollOffsetInitial = 0;\n animationData.scrollOffsetFinal = 0;\n animationData.animationStartTime = 0;\n }\n\n // Callbacks\n const sizeGetter = useCallback(\n (item: VirtualizedListItem, index: number) => {\n const height = getItemSize(item, index);\n if (height === undefined) {\n console.error(\"Couldn't get height for item: \", item);\n }\n return height;\n },\n [getItemSize]\n );\n\n const idGetter = useCallback(\n (item: VirtualizedListItem, index: number) => {\n const itemId = getItemId(item, index);\n if (itemId === undefined) {\n console.error(\"Couldn't get id for item: \", item);\n }\n return itemId;\n },\n [getItemId]\n );\n\n // Memos\n // Creates object of itemId => { item, index, size, offsetTop}\n const normalizedItems = useMemo(() => {\n return getNormalizedItems(items, idGetter, sizeGetter);\n }, [items, idGetter, sizeGetter]);\n\n const maxListOffset = useMemo(() => {\n return getMaxOffset(listSizeByLayout, normalizedItems);\n }, [listSizeByLayout, normalizedItems]);\n\n // Callbacks\n const onScrollCB = useCallback(\n ({\n scrollDirection,\n scrollOffset,\n scrollUpdateWasRequested\n }: {\n scrollDirection: ScrollDirection;\n scrollOffset: number;\n scrollUpdateWasRequested: boolean;\n }) => {\n scrollTopRef.current = scrollOffset;\n if (!scrollUpdateWasRequested) {\n animationData.scrollOffsetInitial = scrollOffset;\n }\n onScroll && onScroll(scrollDirection, scrollOffset, scrollUpdateWasRequested);\n },\n [onScroll, scrollTopRef, animationData]\n );\n\n const animateScroll = useCallback(() => {\n requestAnimationFrame(() => {\n const now = performance.now();\n const ellapsed = now - animationData.animationStartTime;\n const scrollDelta = animationData.scrollOffsetFinal - animationData.scrollOffsetInitial;\n const easedTime = easeInOutQuint(Math.min(1, ellapsed / scrollDuration));\n const scrollOffset = animationData.scrollOffsetInitial + scrollDelta * easedTime;\n const finalOffsetValue = Math.min(maxListOffset, scrollOffset);\n scrollTopRef.current = finalOffsetValue;\n listRef.current?.scrollTo(finalOffsetValue);\n\n if (ellapsed < scrollDuration) {\n animateScroll();\n } else {\n animationData.animationStartTime = undefined;\n onScrollToFinished && onScrollToFinished();\n }\n });\n }, [scrollDuration, animationData, listRef, maxListOffset, onScrollToFinished]);\n\n const startScrollAnimation = useCallback(\n (item: VirtualizedListItem) => {\n const { offsetTop } = item;\n\n if (animationData.animationStartTime) {\n // animation already in progress\n animationData.scrollOffsetFinal = offsetTop;\n return;\n }\n\n // Update the initial scroll offset with the current scroll position for react 18 batching behavior\n if (listRef.current?.state?.scrollOffset !== null) {\n animationData.scrollOffsetInitial = listRef.current?.state?.scrollOffset;\n }\n\n if (animationData.scrollOffsetInitial === offsetTop) {\n // offset already equals to item offset\n onScrollToFinished && onScrollToFinished();\n return;\n }\n\n animationData.scrollOffsetFinal = offsetTop;\n animationData.animationStartTime = performance.now();\n animateScroll();\n },\n [animationData, animateScroll, onScrollToFinished]\n );\n\n const rowRenderer = useCallback(\n ({ index, style }: { index: number; style: CSSProperties }) => {\n const item = items[index];\n return itemRenderer(item, index, style);\n },\n [items, itemRenderer]\n );\n\n const calcItemSize = useCallback(\n (index: number) => {\n const item = items[index];\n return sizeGetter(item, index);\n },\n [items, sizeGetter]\n );\n\n const updateListSize = useCallback(\n (width: number, height: number) => {\n if (height !== listHeight || width !== listWidth) {\n setTimeout(() => {\n setListHeight(height);\n setListWidth(width);\n onSizeUpdate(width, height);\n }, 0);\n }\n },\n [listHeight, listWidth, onSizeUpdate]\n );\n\n const onItemsRenderedCB = useThrottledCallback(\n ({ visibleStartIndex, visibleStopIndex }: ListOnItemsRenderedProps) => {\n if (!onItemsRendered) return;\n const data = getOnItemsRenderedData(\n items,\n normalizedItems,\n idGetter,\n visibleStartIndex,\n visibleStopIndex,\n listSizeByLayout,\n scrollTopRef.current\n );\n onItemsRendered(data);\n },\n { wait: onItemsRenderedThrottleMs, trailing: true },\n [onItemsRendered, items, normalizedItems, idGetter, listSizeByLayout]\n );\n\n // Effects\n useEffect(() => {\n // scroll to specific item\n if (scrollToId && prevScrollToId !== scrollToId) {\n const hasScrollbar = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, listSizeByLayout);\n const item = normalizedItems[scrollToId as keyof typeof normalizedItems];\n hasScrollbar && item && startScrollAnimation(item);\n }\n }, [prevScrollToId, scrollToId, startScrollAnimation, normalizedItems, items, idGetter, listSizeByLayout]);\n\n useEffect(() => {\n // recalculate row heights\n if (listRef.current) {\n listRef.current.resetAfterIndex(0);\n }\n }, [normalizedItems]);\n\n useEffect(() => {\n // update vertical scrollbar visibility\n if (onLayoutDirectionScrollbarVisibilityChange) {\n const isVisible = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, listSizeByLayout);\n if (isVerticalScrollbarVisibleRef.current !== isVisible) {\n isVerticalScrollbarVisibleRef.current = isVisible;\n onLayoutDirectionScrollbarVisibilityChange(isVisible);\n }\n }\n }, [onLayoutDirectionScrollbarVisibilityChange, items, normalizedItems, listSizeByLayout, idGetter]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.virtualizedListWrapper, className)}\n id={id}\n role={role}\n aria-label={ariaLabel}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.VIRTUALIZED_LIST, id)}\n style={style}\n >\n <AutoSizer>\n {({ height, width }: { height: number; width: number }) => {\n updateListSize(width, height);\n return (\n <List\n ref={mergedListRef as unknown as LegacyRef<VariableSizeList<unknown>>}\n height={height}\n width={width}\n itemCount={items.length}\n itemSize={calcItemSize}\n onScroll={onScrollCB}\n layout={layout}\n overscanCount={overscanCount}\n onItemsRendered={onItemsRenderedCB}\n className={scrollableClassName}\n >\n {rowRenderer as React.ComponentType<ListChildComponentProps>}\n </List>\n );\n }}\n </AutoSizer>\n </div>\n );\n }\n);\n\nexport default VirtualizedList;\n"],"names":["VirtualizedList","forwardRef","_ref","ref","className","id","_ref$items","items","_ref$itemRenderer","itemRenderer","item","_index","_style","_ref$getItemSize","getItemSize","height","_ref$layout","layout","onScroll","_ref$overscanCount","overscanCount","_ref$getItemId","getItemId","scrollToId","_ref$scrollDuration","scrollDuration","_ref$onScrollToFinish","onScrollToFinished","NOOP","onItemsRendered","_ref$onItemsRenderedT","onItemsRenderedThrottleMs","_ref$onSizeUpdate","onSizeUpdate","_ref$onLayoutDirectio","onLayoutDirectionScrollbarVisibilityChange","virtualListRef","scrollableClassName","role","ariaLabel","style","dataTestId","_useState","useState","_useState2","_slicedToArray","listHeight","setListHeight","_useState3","_useState4","listWidth","setListWidth","isVerticalList","listSizeByLayout","useMemo","prevScrollToId","usePrevious","componentRef","useRef","isVerticalScrollbarVisibleRef","listRef","scrollTopRef","animationDataRef","initialized","scrollOffsetInitial","scrollOffsetFinal","animationStartTime","mergedRef","useMergeRef","mergedListRef","animationData","current","sizeGetter","useCallback","index","undefined","console","error","idGetter","itemId","normalizedItems","getNormalizedItems","maxListOffset","getMaxOffset","onScrollCB","_ref2","scrollDirection","scrollOffset","scrollUpdateWasRequested","animateScroll","requestAnimationFrame","ellapsed","performance","now","scrollDelta","easedTime","easeInOutQuint","Math","min","finalOffsetValue","_a","scrollTo","startScrollAnimation","offsetTop","_b","state","_d","_c","rowRenderer","_ref3","calcItemSize","updateListSize","width","setTimeout","onItemsRenderedCB","useThrottledCallback","_ref4","data","getOnItemsRenderedData","visibleStartIndex","visibleStopIndex","wait","trailing","useEffect","hasScrollbar","isLayoutDirectionScrollbarVisible","resetAfterIndex","isVisible","React","createElement","cx","styles","virtualizedListWrapper","getTestId","ComponentDefaultTestId","VIRTUALIZED_LIST","AutoSizer","_ref5","List","itemCount","length","itemSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"VirtualizedList.js","sources":["../../../../../src/components/VirtualizedList/VirtualizedList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n type CSSProperties,\n type ForwardedRef,\n forwardRef,\n type LegacyRef,\n type ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport {\n type ScrollDirection,\n VariableSizeList as List,\n type ListOnItemsRenderedProps,\n type ListChildComponentProps,\n type VariableSizeList\n} from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useThrottledCallback from \"../../hooks/useThrottledCallback\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport {\n easeInOutQuint,\n getMaxOffset,\n getNormalizedItems,\n getOnItemsRenderedData,\n isLayoutDirectionScrollbarVisible\n} from \"../../services/virtualized-service\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./VirtualizedList.module.scss\";\nimport {\n type VirtualizedListItem,\n type VirtualizedListLayout,\n type VirtualizedListScrollDirection\n} from \"./VirtualizedList.types\";\n\nexport interface VirtualizedListProps extends VibeComponentProps {\n /**\n * Class name applied to the scrollable container.\n */\n scrollableClassName?: string;\n /**\n * The orientation of the list.\n */\n layout?: VirtualizedListLayout;\n /**\n * The list of items to be rendered.\n */\n items: VirtualizedListItem[];\n /**\n * Function to render each item in the list.\n */\n itemRenderer: (item: VirtualizedListItem, index: number, style: CSSProperties) => ReactElement | JSX.Element;\n /**\n * Function to get the size (height/width) of each item, based on layout.\n */\n getItemSize?: (item: VirtualizedListItem, index: number) => number;\n /**\n * Function to get the unique ID of an item.\n */\n getItemId?: (item: VirtualizedListItem, index: number) => string;\n /**\n * Callback fired when the scroll animation is finished.\n */\n onScrollToFinished?: () => void;\n /**\n * Number of items to render above and below the visible portion.\n */\n overscanCount?: number;\n /**\n * The duration of the scroll animation in milliseconds.\n */\n scrollDuration?: number;\n /**\n * Callback fired when items are rendered.\n */\n onItemsRendered?: ({\n firstItemId,\n secondItemId,\n lastItemId,\n centerItemId,\n firstItemOffsetEnd,\n currentOffsetTop\n }: {\n firstItemId: string;\n secondItemId: string;\n lastItemId: string;\n centerItemId: string;\n firstItemOffsetEnd: number;\n currentOffsetTop: number;\n }) => void;\n /**\n * The delay (in ms) for throttling the `onItemsRendered` callback.\n */\n onItemsRenderedThrottleMs?: number;\n /**\n * Callback fired when the list size changes.\n */\n onSizeUpdate?: (width: number, height: number) => void;\n /**\n * Callback fired when the vertical or horizontal scrollbar visibility changes.\n */\n onLayoutDirectionScrollbarVisibilityChange?: (value: boolean) => void;\n /**\n * The ARIA role attribute applied to the list.\n */\n role?: string;\n /**\n * The ARIA label for the list.\n */\n \"aria-label\"?: string;\n /**\n * Custom inline styles applied to the list.\n */\n style?: CSSProperties;\n /**\n * The ID of the item to scroll to.\n */\n scrollToId?: string;\n /**\n * Reference to the virtualized list component.\n */\n virtualListRef?: ForwardedRef<HTMLElement>;\n /**\n * Callback fired when the list is scrolled.\n */\n onScroll?: (\n horizontalScrollDirection: VirtualizedListScrollDirection,\n scrollTop: number,\n scrollUpdateWasRequested: boolean\n ) => void;\n}\n\nconst VirtualizedList = forwardRef(\n (\n {\n className,\n id,\n items = [],\n itemRenderer = (item: VirtualizedListItem, _index: number, _style: CSSProperties) => item as ReactElement,\n getItemSize = (item: VirtualizedListItem, _index: number) => item.height,\n layout = \"vertical\",\n onScroll,\n overscanCount = 0,\n getItemId = (item: VirtualizedListItem, _index: number) => item.id,\n scrollToId,\n scrollDuration = 200,\n onScrollToFinished = NOOP,\n onItemsRendered,\n onItemsRenderedThrottleMs = 200,\n onSizeUpdate = NOOP,\n onLayoutDirectionScrollbarVisibilityChange = null,\n virtualListRef,\n scrollableClassName,\n role,\n \"aria-label\": ariaLabel,\n style,\n \"data-testid\": dataTestId\n }: VirtualizedListProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n // states\n const [listHeight, setListHeight] = useState(0);\n const [listWidth, setListWidth] = useState(0);\n\n const isVerticalList = layout !== \"horizontal\";\n const listSizeByLayout = useMemo(() => {\n return isVerticalList ? listHeight : listWidth;\n }, [isVerticalList, listHeight, listWidth]);\n\n // prevs\n const prevScrollToId = usePrevious(scrollToId);\n\n // Refs\n const componentRef = useRef(null);\n const isVerticalScrollbarVisibleRef = useRef(null);\n const listRef = useRef(null);\n const scrollTopRef = useRef(0);\n const animationDataRef = useRef({\n initialized: false,\n scrollOffsetInitial: 0,\n scrollOffsetFinal: 0,\n animationStartTime: 0\n });\n const mergedRef = useMergeRef(ref, componentRef);\n const mergedListRef = useMergeRef(virtualListRef, listRef);\n\n const animationData = animationDataRef.current;\n if (!animationData.initialized) {\n animationData.initialized = true;\n animationData.scrollOffsetInitial = 0;\n animationData.scrollOffsetFinal = 0;\n animationData.animationStartTime = 0;\n }\n\n // Callbacks\n const sizeGetter = useCallback(\n (item: VirtualizedListItem, index: number) => {\n const height = getItemSize(item, index);\n if (height === undefined) {\n console.error(\"Couldn't get height for item: \", item);\n }\n return height;\n },\n [getItemSize]\n );\n\n const idGetter = useCallback(\n (item: VirtualizedListItem, index: number) => {\n const itemId = getItemId(item, index);\n if (itemId === undefined) {\n console.error(\"Couldn't get id for item: \", item);\n }\n return itemId;\n },\n [getItemId]\n );\n\n // Memos\n // Creates object of itemId => { item, index, size, offsetTop}\n const normalizedItems = useMemo(() => {\n return getNormalizedItems(items, idGetter, sizeGetter);\n }, [items, idGetter, sizeGetter]);\n\n const maxListOffset = useMemo(() => {\n return getMaxOffset(listSizeByLayout, normalizedItems);\n }, [listSizeByLayout, normalizedItems]);\n\n // Callbacks\n const onScrollCB = useCallback(\n ({\n scrollDirection,\n scrollOffset,\n scrollUpdateWasRequested\n }: {\n scrollDirection: ScrollDirection;\n scrollOffset: number;\n scrollUpdateWasRequested: boolean;\n }) => {\n scrollTopRef.current = scrollOffset;\n if (!scrollUpdateWasRequested) {\n animationData.scrollOffsetInitial = scrollOffset;\n }\n onScroll && onScroll(scrollDirection, scrollOffset, scrollUpdateWasRequested);\n },\n [onScroll, scrollTopRef, animationData]\n );\n\n const animateScroll = useCallback(() => {\n requestAnimationFrame(() => {\n const now = performance.now();\n const ellapsed = now - animationData.animationStartTime;\n const scrollDelta = animationData.scrollOffsetFinal - animationData.scrollOffsetInitial;\n const easedTime = easeInOutQuint(Math.min(1, ellapsed / scrollDuration));\n const scrollOffset = animationData.scrollOffsetInitial + scrollDelta * easedTime;\n const finalOffsetValue = Math.min(maxListOffset, scrollOffset);\n scrollTopRef.current = finalOffsetValue;\n listRef.current?.scrollTo(finalOffsetValue);\n\n if (ellapsed < scrollDuration) {\n animateScroll();\n } else {\n animationData.animationStartTime = undefined;\n onScrollToFinished && onScrollToFinished();\n }\n });\n }, [scrollDuration, animationData, listRef, maxListOffset, onScrollToFinished]);\n\n const startScrollAnimation = useCallback(\n (item: VirtualizedListItem) => {\n const { offsetTop } = item;\n\n if (animationData.animationStartTime) {\n // animation already in progress\n animationData.scrollOffsetFinal = offsetTop;\n return;\n }\n\n // Update the initial scroll offset with the current scroll position for react 18 batching behavior\n if (listRef.current?.state?.scrollOffset !== null) {\n animationData.scrollOffsetInitial = listRef.current?.state?.scrollOffset;\n }\n\n if (animationData.scrollOffsetInitial === offsetTop) {\n // offset already equals to item offset\n onScrollToFinished && onScrollToFinished();\n return;\n }\n\n animationData.scrollOffsetFinal = offsetTop;\n animationData.animationStartTime = performance.now();\n animateScroll();\n },\n [animationData, animateScroll, onScrollToFinished]\n );\n\n const rowRenderer = useCallback(\n ({ index, style }: { index: number; style: CSSProperties }) => {\n const item = items[index];\n return itemRenderer(item, index, style);\n },\n [items, itemRenderer]\n );\n\n const calcItemSize = useCallback(\n (index: number) => {\n const item = items[index];\n return sizeGetter(item, index);\n },\n [items, sizeGetter]\n );\n\n const updateListSize = useCallback(\n (width: number, height: number) => {\n if (height !== listHeight || width !== listWidth) {\n setTimeout(() => {\n setListHeight(height);\n setListWidth(width);\n onSizeUpdate(width, height);\n }, 0);\n }\n },\n [listHeight, listWidth, onSizeUpdate]\n );\n\n const onItemsRenderedCB = useThrottledCallback(\n ({ visibleStartIndex, visibleStopIndex }: ListOnItemsRenderedProps) => {\n if (!onItemsRendered) return;\n const data = getOnItemsRenderedData(\n items,\n normalizedItems,\n idGetter,\n visibleStartIndex,\n visibleStopIndex,\n listSizeByLayout,\n scrollTopRef.current\n );\n onItemsRendered(data);\n },\n { wait: onItemsRenderedThrottleMs, trailing: true },\n [onItemsRendered, items, normalizedItems, idGetter, listSizeByLayout]\n );\n\n // Effects\n useEffect(() => {\n // scroll to specific item\n if (scrollToId && prevScrollToId !== scrollToId) {\n const hasScrollbar = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, listSizeByLayout);\n const item = normalizedItems[scrollToId as keyof typeof normalizedItems];\n hasScrollbar && item && startScrollAnimation(item);\n }\n }, [prevScrollToId, scrollToId, startScrollAnimation, normalizedItems, items, idGetter, listSizeByLayout]);\n\n useEffect(() => {\n // recalculate row heights\n if (listRef.current) {\n listRef.current.resetAfterIndex(0);\n }\n }, [normalizedItems]);\n\n useEffect(() => {\n // update vertical scrollbar visibility\n if (onLayoutDirectionScrollbarVisibilityChange) {\n const isVisible = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, listSizeByLayout);\n if (isVerticalScrollbarVisibleRef.current !== isVisible) {\n isVerticalScrollbarVisibleRef.current = isVisible;\n onLayoutDirectionScrollbarVisibilityChange(isVisible);\n }\n }\n }, [onLayoutDirectionScrollbarVisibilityChange, items, normalizedItems, listSizeByLayout, idGetter]);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.virtualizedListWrapper, className)}\n id={id}\n role={role}\n aria-label={ariaLabel}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.VIRTUALIZED_LIST, id)}\n style={style}\n >\n <AutoSizer>\n {({ height, width }: { height: number; width: number }) => {\n updateListSize(width, height);\n return (\n <List\n ref={mergedListRef as unknown as LegacyRef<VariableSizeList<unknown>>}\n height={height}\n width={width}\n itemCount={items.length}\n itemSize={calcItemSize}\n onScroll={onScrollCB}\n layout={layout}\n overscanCount={overscanCount}\n onItemsRendered={onItemsRenderedCB}\n className={scrollableClassName}\n >\n {rowRenderer as React.ComponentType<ListChildComponentProps>}\n </List>\n );\n }}\n </AutoSizer>\n </div>\n );\n }\n);\n\nexport default VirtualizedList;\n"],"names":["VirtualizedList","forwardRef","_ref","ref","className","id","_ref$items","items","_ref$itemRenderer","itemRenderer","item","_index","_style","_ref$getItemSize","getItemSize","height","_ref$layout","layout","onScroll","_ref$overscanCount","overscanCount","_ref$getItemId","getItemId","scrollToId","_ref$scrollDuration","scrollDuration","_ref$onScrollToFinish","onScrollToFinished","NOOP","onItemsRendered","_ref$onItemsRenderedT","onItemsRenderedThrottleMs","_ref$onSizeUpdate","onSizeUpdate","_ref$onLayoutDirectio","onLayoutDirectionScrollbarVisibilityChange","virtualListRef","scrollableClassName","role","ariaLabel","style","dataTestId","_useState","useState","_useState2","_slicedToArray","listHeight","setListHeight","_useState3","_useState4","listWidth","setListWidth","isVerticalList","listSizeByLayout","useMemo","prevScrollToId","usePrevious","componentRef","useRef","isVerticalScrollbarVisibleRef","listRef","scrollTopRef","animationDataRef","initialized","scrollOffsetInitial","scrollOffsetFinal","animationStartTime","mergedRef","useMergeRef","mergedListRef","animationData","current","sizeGetter","useCallback","index","undefined","console","error","idGetter","itemId","normalizedItems","getNormalizedItems","maxListOffset","getMaxOffset","onScrollCB","_ref2","scrollDirection","scrollOffset","scrollUpdateWasRequested","animateScroll","requestAnimationFrame","ellapsed","performance","now","scrollDelta","easedTime","easeInOutQuint","Math","min","finalOffsetValue","_a","scrollTo","startScrollAnimation","offsetTop","_b","state","_d","_c","rowRenderer","_ref3","calcItemSize","updateListSize","width","setTimeout","onItemsRenderedCB","useThrottledCallback","_ref4","data","getOnItemsRenderedData","visibleStartIndex","visibleStopIndex","wait","trailing","useEffect","hasScrollbar","isLayoutDirectionScrollbarVisible","resetAfterIndex","isVisible","React","createElement","cx","styles","virtualizedListWrapper","getTestId","ComponentDefaultTestId","VIRTUALIZED_LIST","AutoSizer","_ref5","List","itemCount","length","itemSize"],"mappings":"2zBA2IMA,IAAAA,EAAkBC,GACtB,SAAAC,EAyBEC,GACE,IAxBAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACVO,aAAAA,OAAe,IAAHD,EAAG,SAACE,EAA2BC,EAAgBC,GAAqB,OAAKF,CAAoB,EAAAF,EAAAK,EAAAX,EACzGY,YAAAA,OAAW,IAAAD,EAAG,SAACH,EAA2BC,GAAc,OAAKD,EAAKK,MAAM,EAAAF,EAAAG,EAAAd,EACxEe,OAAAA,OAAS,IAAHD,EAAG,WAAUA,EACnBE,EAAQhB,EAARgB,SAAQC,EAAAjB,EACRkB,cAAAA,OAAgB,IAAHD,EAAG,EAACA,EAAAE,EAAAnB,EACjBoB,UAAAA,OAAS,IAAAD,EAAG,SAACX,EAA2BC,GAAc,OAAKD,EAAKL,EAAE,EAAAgB,EAClEE,EAAUrB,EAAVqB,WAAUC,EAAAtB,EACVuB,eAAAA,OAAiB,IAAHD,EAAG,IAAGA,EAAAE,EAAAxB,EACpByB,mBAAAA,OAAqBC,IAAHF,EAAGE,EAAIF,EACzBG,EAAe3B,EAAf2B,gBAAeC,EAAA5B,EACf6B,0BAAAA,OAA4B,IAAHD,EAAG,IAAGA,EAAAE,EAAA9B,EAC/B+B,aAAAA,OAAeL,IAAHI,EAAGJ,EAAII,EAAAE,EAAAhC,EACnBiC,2CAAAA,OAA6C,IAAHD,EAAG,KAAIA,EACjDE,EAAclC,EAAdkC,eACAC,EAAmBnC,EAAnBmC,oBACAC,EAAIpC,EAAJoC,KACcC,GAASrC,EAAvB,cACAsC,GAAKtC,EAALsC,MACeC,GAAUvC,EAAzB,eAKFwC,GAAoCC,EAAS,GAAEC,GAAAC,EAAAH,GAAA,GAAxCI,GAAUF,GAAA,GAAEG,GAAaH,GAAA,GAChCI,GAAkCL,EAAS,GAAEM,GAAAJ,EAAAG,GAAA,GAAtCE,GAASD,GAAA,GAAEE,GAAYF,GAAA,GAExBG,GAA4B,eAAXnC,EACjBoC,GAAmBC,GAAQ,WAC/B,OAAOF,GAAiBN,GAAaI,EACtC,GAAE,CAACE,GAAgBN,GAAYI,KAG1BK,GAAiBC,EAAYjC,GAG7BkC,GAAeC,EAAO,MACtBC,GAAgCD,EAAO,MACvCE,GAAUF,EAAO,MACjBG,GAAeH,EAAO,GACtBI,GAAmBJ,EAAO,CAC9BK,aAAa,EACbC,oBAAqB,EACrBC,kBAAmB,EACnBC,mBAAoB,IAEhBC,GAAYC,EAAYjE,EAAKsD,IAC7BY,GAAgBD,EAAYhC,EAAgBwB,IAE5CU,GAAgBR,GAAiBS,QAClCD,GAAcP,cACjBO,GAAcP,aAAc,EAC5BO,GAAcN,oBAAsB,EACpCM,GAAcL,kBAAoB,EAClCK,GAAcJ,mBAAqB,GAIrC,IAAMM,GAAaC,GACjB,SAAC/D,EAA2BgE,GAC1B,IAAM3D,EAASD,EAAYJ,EAAMgE,GAIjC,YAHeC,IAAX5D,GACF6D,QAAQC,MAAM,iCAAkCnE,GAE3CK,CACT,GACA,CAACD,IAGGgE,GAAWL,GACf,SAAC/D,EAA2BgE,GAC1B,IAAMK,EAASzD,EAAUZ,EAAMgE,GAI/B,YAHeC,IAAXI,GACFH,QAAQC,MAAM,6BAA8BnE,GAEvCqE,CACT,GACA,CAACzD,IAKG0D,GAAkB1B,GAAQ,WAC9B,OAAO2B,EAAmB1E,EAAOuE,GAAUN,GAC5C,GAAE,CAACjE,EAAOuE,GAAUN,KAEfU,GAAgB5B,GAAQ,WAC5B,OAAO6B,EAAa9B,GAAkB2B,GACxC,GAAG,CAAC3B,GAAkB2B,KAGhBI,GAAaX,GACjB,SAAAY,GAQK,IAPHC,EAAeD,EAAfC,gBACAC,EAAYF,EAAZE,aACAC,EAAwBH,EAAxBG,yBAMA3B,GAAaU,QAAUgB,EAClBC,IACHlB,GAAcN,oBAAsBuB,GAEtCrE,GAAYA,EAASoE,EAAiBC,EAAcC,EACrD,GACD,CAACtE,EAAU2C,GAAcS,KAGrBmB,GAAgBhB,GAAY,WAChCiB,uBAAsB,iBAEdC,EADMC,YAAYC,MACDvB,GAAcJ,mBAC/B4B,EAAcxB,GAAcL,kBAAoBK,GAAcN,oBAC9D+B,EAAYC,EAAeC,KAAKC,IAAI,EAAGP,EAAWlE,IAElD0E,EAAmBF,KAAKC,IAAIhB,GADbZ,GAAcN,oBAAsB8B,EAAcC,GAEvElC,GAAaU,QAAU4B,EACR,QAAfC,EAAAxC,GAAQW,eAAO,IAAA6B,GAAAA,EAAEC,SAASF,GAEX1E,EAAXkE,EACFF,MAEAnB,GAAcJ,wBAAqBS,EACnChD,GAAsBA,IAE1B,GACF,GAAG,CAACF,EAAgB6C,GAAeV,GAASsB,GAAevD,IAErD2E,GAAuB7B,GAC3B,SAAC/D,eACS6F,EAAc7F,EAAd6F,UAEJjC,GAAcJ,mBAEhBI,GAAcL,kBAAoBsC,GAKS,QAAjB,QAAxBC,EAAiB,QAAjBJ,EAAAxC,GAAQW,eAAS,IAAA6B,OAAA,EAAAA,EAAAK,aAAO,IAAAD,OAAA,EAAAA,EAAAjB,gBAC1BjB,GAAcN,oBAA8C,QAAxB0C,EAAiB,QAAjBC,EAAA/C,GAAQW,eAAS,IAAAoC,OAAA,EAAAA,EAAAF,aAAO,IAAAC,OAAA,EAAAA,EAAAnB,cAG1DjB,GAAcN,sBAAwBuC,GAM1CjC,GAAcL,kBAAoBsC,EAClCjC,GAAcJ,mBAAqB0B,YAAYC,MAC/CJ,MANE9D,GAAsBA,IAOzB,GACD,CAAC2C,GAAemB,GAAe9D,IAG3BiF,GAAcnC,GAClB,SAAAoC,GAA8D,IAA3DnC,EAAKmC,EAALnC,MAED,OAAOjE,EADMF,EAAMmE,GACOA,EAFbmC,EAALrE,MAGV,GACA,CAACjC,EAAOE,IAGJqG,GAAerC,GACnB,SAACC,GAEC,OAAOF,GADMjE,EAAMmE,GACKA,EAC1B,GACA,CAACnE,EAAOiE,KAGJuC,GAAiBtC,GACrB,SAACuC,EAAejG,GACVA,IAAW+B,IAAckE,IAAU9D,IACrC+D,YAAW,WACTlE,GAAchC,GACdoC,GAAa6D,GACb/E,EAAa+E,EAAOjG,EACrB,GAAE,EAEN,GACD,CAAC+B,GAAYI,GAAWjB,IAGpBiF,GAAoBC,GACxB,SAAAC,GACE,GAAKvF,EAAL,CACA,IAAMwF,EAAOC,EACX/G,EACAyE,GACAF,GALgBsC,EAAjBG,kBAAmCH,EAAhBI,iBAQlBnE,GACAQ,GAAaU,SAEf1C,EAAgBwF,EAVM,CAWxB,GACA,CAAEI,KAAM1F,EAA2B2F,UAAU,GAC7C,CAAC7F,EAAiBtB,EAAOyE,GAAiBF,GAAUzB,KA+BtD,OA3BAsE,GAAU,WAER,GAAIpG,GAAcgC,KAAmBhC,EAAY,CAC/C,IAAMqG,EAAeC,EAAkCtH,EAAOyE,GAAiBF,GAAUzB,IACnF3C,EAAOsE,GAAgBzD,GAC7BqG,GAAgBlH,GAAQ4F,GAAqB5F,EAC/C,CACF,GAAG,CAAC6C,GAAgBhC,EAAY+E,GAAsBtB,GAAiBzE,EAAOuE,GAAUzB,KAExFsE,GAAU,WAEJ/D,GAAQW,SACVX,GAAQW,QAAQuD,gBAAgB,EAEpC,GAAG,CAAC9C,KAEJ2C,GAAU,WAER,GAAIxF,EAA4C,CAC9C,IAAM4F,EAAYF,EAAkCtH,EAAOyE,GAAiBF,GAAUzB,IAClFM,GAA8BY,UAAYwD,IAC5CpE,GAA8BY,QAAUwD,EACxC5F,EAA2C4F,GAE/C,CACF,GAAG,CAAC5F,EAA4C5B,EAAOyE,GAAiB3B,GAAkByB,KAGxFkD,EACEC,cAAA,MAAA,CAAA9H,IAAKgE,GACL/D,UAAW8H,EAAGC,EAAOC,uBAAwBhI,GAC7CC,GAAIA,EACJiC,KAAMA,EAAI,aACEC,GACC,cAAAE,IAAc4F,EAAUC,EAAuBC,iBAAkBlI,GAC9EmC,MAAOA,IAEPwF,EAACC,cAAAO,QACE,SAAAC,GAAyD,IAAtD1H,EAAM0H,EAAN1H,OAAQiG,EAAKyB,EAALzB,MAEV,OADAD,GAAeC,EAAOjG,GAEpBiH,gBAACU,EAAI,CACHvI,IAAKkE,GACLtD,OAAQA,EACRiG,MAAOA,EACP2B,UAAWpI,EAAMqI,OACjBC,SAAU/B,GACV5F,SAAUkE,GACVnE,OAAQA,EACRG,cAAeA,EACfS,gBAAiBqF,GACjB9G,UAAWiC,GAEVuE,GAGN,IAIT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{convertToArray as t}from"
|
|
1
|
+
import{convertToArray as t}from"@vibe/shared";var r=0,o=20,e="en-US";var n=Object.freeze({MIN_PRECISION:r,MAX_PRECISION:o,DEFAULT_LOCAL:e});function a(n){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=a.local,c=void 0===i?e:i,l=a.isCompact,m=void 0===l||l,u=a.precision,s=void 0===u?2:u;if(null!=n){var v=function(r){var o;try{o=!!Intl.NumberFormat.supportedLocalesOf(t(r),{localeMatcher:"lookup"}).length}catch(t){o=!1}return o}(c),f=function(t){return r>t?r:t>o?o:t}(s);return new Intl.NumberFormat(v?c:e,Object.assign(Object.assign({},m&&{notation:"compact"}),{maximumFractionDigits:f})).format(n)}}export{a as formatNumber,n as formatNumberConsts};
|
|
2
2
|
//# sourceMappingURL=textManipulations.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textManipulations.js","sources":["../../../../src/helpers/textManipulations.ts"],"sourcesContent":["import { convertToArray } from \"
|
|
1
|
+
{"version":3,"file":"textManipulations.js","sources":["../../../../src/helpers/textManipulations.ts"],"sourcesContent":["import { convertToArray } from \"@vibe/shared\";\n\nconst MIN_PRECISION = 0;\nconst MAX_PRECISION = 20;\nconst DEFAULT_LOCAL = \"en-US\";\n\nfunction validateLocalSupported(local: string) {\n let isLocalSupported;\n try {\n const options = { localeMatcher: \"lookup\" as const };\n isLocalSupported = !!Intl.NumberFormat.supportedLocalesOf(convertToArray(local), options).length;\n } catch (err) {\n isLocalSupported = false;\n }\n\n return isLocalSupported;\n}\n\nfunction validatePrecision(precision: number) {\n if (precision < MIN_PRECISION) return MIN_PRECISION;\n if (precision > MAX_PRECISION) return MAX_PRECISION;\n return precision;\n}\n\nexport const formatNumberConsts = Object.freeze({\n MIN_PRECISION,\n MAX_PRECISION,\n DEFAULT_LOCAL\n});\n\nexport function formatNumber(\n value: number,\n {\n local = DEFAULT_LOCAL,\n isCompact = true,\n precision = 2\n }: { local?: Intl.Locale[\"language\"]; isCompact?: boolean; precision?: number } = {}\n) {\n if (value === undefined || value === null) return;\n const isLocalSupported = validateLocalSupported(local);\n const normalizedPrecision = validatePrecision(precision);\n const selectedLocal = isLocalSupported ? local : DEFAULT_LOCAL;\n return new Intl.NumberFormat(selectedLocal, {\n ...(isCompact && { notation: \"compact\" }),\n maximumFractionDigits: normalizedPrecision\n }).format(value);\n}\n"],"names":["MIN_PRECISION","MAX_PRECISION","DEFAULT_LOCAL","formatNumberConsts","Object","freeze","formatNumber","value","_ref","arguments","length","undefined","_ref$local","local","_ref$isCompact","isCompact","_ref$precision","precision","isLocalSupported","Intl","NumberFormat","supportedLocalesOf","convertToArray","localeMatcher","err","validateLocalSupported","normalizedPrecision","validatePrecision","assign","notation","maximumFractionDigits","format"],"mappings":"8CAEA,IAAMA,EAAgB,EAChBC,EAAgB,GAChBC,EAAgB,YAoBTC,EAAqBC,OAAOC,OAAO,CAC9CL,cAAAA,EACAC,cAAAA,EACAC,cAAAA,aAGcI,EACdC,GAKoF,IAAAC,EAAAC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAF,CAAE,EAAAG,EAAAJ,EAHlFK,MAAAA,OAAQX,IAAHU,EAAGV,EAAaU,EAAAE,EAAAN,EACrBO,UAAAA,OAAY,IAAHD,GAAOA,EAAAE,EAAAR,EAChBS,UAAAA,OAAY,IAAHD,EAAG,EAACA,EAGf,GAAIT,QAAJ,CACA,IAAMW,EAjCR,SAAgCL,GAC9B,IAAIK,EACJ,IAEEA,IAAqBC,KAAKC,aAAaC,mBAAmBC,EAAeT,GADzD,CAAEU,cAAe,WACyDb,MAC3F,CAAC,MAAOc,GACPN,GAAmB,CACrB,CAEA,OAAOA,CACT,CAuB2BO,CAAuBZ,GAC1Ca,EAtBR,SAA2BT,GACzB,OAAgBjB,EAAZiB,EAAkCjB,EAClCiB,EAAYhB,EAAsBA,EAC/BgB,CACT,CAkB8BU,CAAkBV,GAE9C,OAAO,IAAIE,KAAKC,aADMF,EAAmBL,EAAQX,EACPE,OAAAwB,OAAAxB,OAAAwB,OAAA,CAAA,EACpCb,GAAa,CAAEc,SAAU,YAC7B,CAAAC,sBAAuBJ,KACtBK,OAAOxB,EAPiC,CAQ7C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useCallback as e,useMemo as t,useEffect as n,useRef as s}from"react";import i
|
|
1
|
+
import{useCallback as e,useMemo as t,useEffect as n,useRef as s}from"react";import{useKeyEvent as i,useEventListener as o}from"@vibe/shared";import u from"../usePrevious/index.js";import{getNextSelectableIndex as c,getPreviousSelectableIndex as r}from"./useActiveDescendantListFocusHelpers.js";import l from"../useListenFocusTriggers/index.js";var a;!function(e){e.UP="ArrowUp",e.DOWN="ArrowDown",e.RIGHT="ArrowRight",e.LEFT="ArrowLeft"}(a||(a={}));var m="Enter";function I(t){var n=t.itemsCount,s=t.focusedElementRef,o=t.visualFocusItemIndex,u=t.setVisualFocusItemIndex,l=t.isHorizontalList,m=t.isItemSelectable,I=t.listenerOptions,d=t.triggeredByKeyboard,f=l?a.RIGHT:a.DOWN,v=l?a.LEFT:a.UP,F=e((function(e){var t;document.activeElement===s.current&&(!d.current&&(d.current=!0,o>-1)||(e===f?t=c({isItemSelectable:m,visualFocusItemIndex:o,itemsCount:n}):e===v&&(t=r({isItemSelectable:m,visualFocusItemIndex:o,itemsCount:n})),t>-1&&t!==o&&u(t)))}),[s,d,f,v,o,u,m,n]),b=e((function(){F(v)}),[v,F]),x=e((function(){F(f)}),[f,F]);i(Object.assign({keys:[f],callback:x},I)),i(Object.assign({keys:[v],callback:b},I))}function d(n){var s=n.visualFocusItemIndex,o=n.focusedElementRef,u=n.itemsCount,c=n.setVisualFocusItemIndex,r=n.onItemClick,l=n.isItemSelectable,a=n.listenerOptions,I=void 0===a?void 0:a,d=n.isIgnoreSpaceAsItemSelection,f=void 0!==d&&d,v=t((function(){return f?[m]:[m," "]}),[f]),F=e((function(e,t){r&&(t>=0&&u>t)&&l(t)&&(s!==t&&c(t),r(e,t))}),[u,r,l,s,c]),b=e((function(e){o.current.contains(document.activeElement)&&F(e,s)}),[F,o,s]);i(Object.assign({keys:v,callback:b},I))}function f(t){var s=t.focusedElementRef,i=t.visualFocusItemIndex,c=t.setVisualFocusItemIndex,r=u(s),l=e((function(){-1!==i&&c(-1)}),[c,i]);n((function(){null===(null==s?void 0:s.current)&&null!==(null==r?void 0:r.current)&&l()}),[s.current,r,l]),o({eventName:"blur",ref:s,callback:l})}function v(t){var n=t.focusedElementRef,i=t.isItemSelectable,o=t.visualFocusItemIndex,u=t.setVisualFocusItemIndex,r=t.itemsCount,a=t.defaultVisualFocusItemIndex,m=void 0===a?-1:a,I=s(!1),d=e((function(){var e;(I.current=!0,o!==m)&&(e=i(m)?m:c({isItemSelectable:i,itemsCount:r,visualFocusItemIndex:m}),u(e))}),[m,i,r,u,I,o]),f=e((function(){I.current=!1}),[I]);return l({ref:n,onFocusByKeyboard:d,onFocusByMouse:f}),{triggeredByKeyboard:I}}function F(e){var t=e.visualFocusItemIndex,s=e.itemsIds,i=e.isItemSelectable,o=e.setVisualFocusItemIndex,r=u(s);n((function(){var e;void 0!==r&&r!==s&&void 0!==r&&-1!==t?e=s.indexOf(r[t]):e=t;if(e!==t)if(i(e))o(e);else{var n=c({isItemSelectable:i,visualFocusItemIndex:e,itemsCount:s.length});o(n)}}),[t,s,i,o,r])}export{f as useCleanVisualFocusOnBlur,F as useKeepFocusOnItemWhenListChanged,v as useSetDefaultItemOnFocusEvent,I as useSupportArrowsKeyboardNavigation,d as useSupportPressItemKeyboardNavigation};
|
|
2
2
|
//# sourceMappingURL=useActiveDescendantListFocusHooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useActiveDescendantListFocusHooks.js","sources":["../../../../../src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.ts"],"sourcesContent":["import { type MutableRefObject } from \"react\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport useKeyEvent, { type UseKeyEventArgs } from \"../useKeyEvent\";\nimport useEventListener from \"../useEventListener\";\nimport usePrevious from \"../usePrevious\";\nimport { getNextSelectableIndex, getPreviousSelectableIndex } from \"./useActiveDescendantListFocusHelpers\";\nimport useListenFocusTriggers from \"../useListenFocusTriggers\";\n\nenum ArrowDirection {\n UP = \"ArrowUp\",\n DOWN = \"ArrowDown\",\n RIGHT = \"ArrowRight\",\n LEFT = \"ArrowLeft\"\n}\n\nconst ENTER_KEY = \"Enter\";\nconst SPACE_KEY = \" \";\n\nexport function useSupportArrowsKeyboardNavigation({\n itemsCount,\n focusedElementRef,\n visualFocusItemIndex,\n setVisualFocusItemIndex,\n isHorizontalList,\n isItemSelectable,\n listenerOptions,\n triggeredByKeyboard\n}: {\n itemsCount: number;\n focusedElementRef: MutableRefObject<HTMLElement>;\n visualFocusItemIndex: number;\n setVisualFocusItemIndex: (index: number) => void;\n isHorizontalList: boolean;\n isItemSelectable: (index: number) => boolean;\n triggeredByKeyboard: MutableRefObject<boolean>;\n listenerOptions: Omit<UseKeyEventArgs, \"keys\" | \"callback\">;\n}) {\n const nextArrow = isHorizontalList ? ArrowDirection.RIGHT : ArrowDirection.DOWN;\n const backArrow = isHorizontalList ? ArrowDirection.LEFT : ArrowDirection.UP;\n\n const onArrowKeyEvent = useCallback(\n (direction: ArrowDirection) => {\n // we desire to change the visual focus item only if the user pressed on the keyboard arrows keys while\n // the focusedElementRef is naturally focus\n if (document.activeElement !== focusedElementRef.current) {\n return;\n }\n\n // If the focusedElementRef is naturally focus but this is the first keyboard interaction of the user, we will mark future user interactions as trigger by keyboard (until the next mouse interaction)\n // that from now on the interactions are trigger by keyboard (until the next mouse interaction)\n if (!triggeredByKeyboard.current) {\n triggeredByKeyboard.current = true;\n\n // If the focusedElementRef is naturally focus but this is the first keyboard interaction of the user, we want only to display the item\n // which right now visually focus without changing it.\n if (visualFocusItemIndex > -1) {\n return;\n }\n }\n\n let newIndex;\n\n // We will change the visual focused item index according to the direction of the pressed arrow\n if (direction === nextArrow) {\n newIndex = getNextSelectableIndex({ isItemSelectable, visualFocusItemIndex, itemsCount });\n } else if (direction === backArrow) {\n newIndex = getPreviousSelectableIndex({ isItemSelectable, visualFocusItemIndex, itemsCount });\n }\n\n if (newIndex > -1 && newIndex !== visualFocusItemIndex) setVisualFocusItemIndex(newIndex);\n },\n [\n focusedElementRef,\n triggeredByKeyboard,\n nextArrow,\n backArrow,\n visualFocusItemIndex,\n setVisualFocusItemIndex,\n isItemSelectable,\n itemsCount\n ]\n );\n const onArrowBack = useCallback(() => {\n onArrowKeyEvent(backArrow);\n }, [backArrow, onArrowKeyEvent]);\n\n const onArrowNext = useCallback(() => {\n onArrowKeyEvent(nextArrow);\n }, [nextArrow, onArrowKeyEvent]);\n\n useKeyEvent({\n keys: [nextArrow],\n callback: onArrowNext,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: [backArrow],\n callback: onArrowBack,\n ...listenerOptions\n });\n}\n\nexport function useSupportPressItemKeyboardNavigation({\n visualFocusItemIndex,\n focusedElementRef,\n itemsCount,\n setVisualFocusItemIndex,\n onItemClick,\n isItemSelectable,\n listenerOptions = undefined,\n isIgnoreSpaceAsItemSelection = false\n}: {\n visualFocusItemIndex: number;\n focusedElementRef: MutableRefObject<HTMLElement>;\n itemsCount: number;\n setVisualFocusItemIndex: (index: number) => void;\n onItemClick: (event: React.MouseEvent | React.KeyboardEvent, index: number) => void;\n isItemSelectable: (index: number) => boolean;\n listenerOptions: Omit<UseKeyEventArgs, \"keys\" | \"callback\">;\n isIgnoreSpaceAsItemSelection: boolean;\n}) {\n const pressKeys = useMemo(\n () => (isIgnoreSpaceAsItemSelection ? [ENTER_KEY] : [ENTER_KEY, SPACE_KEY]),\n [isIgnoreSpaceAsItemSelection]\n );\n\n const baseOnClickCallback = useCallback(\n (event: React.KeyboardEvent, itemIndex: number) => {\n const hasValidIndex = itemIndex >= 0 && itemIndex < itemsCount;\n if (!onItemClick || !hasValidIndex || !isItemSelectable(itemIndex)) return;\n if (visualFocusItemIndex !== itemIndex) setVisualFocusItemIndex(itemIndex);\n onItemClick(event, itemIndex);\n },\n [itemsCount, onItemClick, isItemSelectable, visualFocusItemIndex, setVisualFocusItemIndex]\n );\n\n const keyboardOnSelectCallback = useCallback(\n (event: React.KeyboardEvent) => {\n // we desire to change the trigger the active item on click callback only if the user pressed on the keyboard arrows keys while\n // the focusedElementRef is naturally focus\n if (focusedElementRef.current.contains(document.activeElement)) {\n baseOnClickCallback(event, visualFocusItemIndex);\n }\n },\n [baseOnClickCallback, focusedElementRef, visualFocusItemIndex]\n );\n\n useKeyEvent({\n keys: pressKeys,\n callback: keyboardOnSelectCallback,\n ...listenerOptions\n });\n}\n\nexport function useCleanVisualFocusOnBlur({\n focusedElementRef,\n visualFocusItemIndex,\n setVisualFocusItemIndex\n}: {\n focusedElementRef: MutableRefObject<HTMLElement>;\n visualFocusItemIndex: number;\n setVisualFocusItemIndex: (index: number) => void;\n}) {\n const previousFocusedElementRef = usePrevious(focusedElementRef);\n\n const onBlurCallback = useCallback(() => {\n if (visualFocusItemIndex !== -1) {\n setVisualFocusItemIndex(-1);\n }\n }, [setVisualFocusItemIndex, visualFocusItemIndex]);\n\n // if element unmount act like element got blur event\n useEffect(() => {\n // if element unmount\n if (focusedElementRef?.current === null && previousFocusedElementRef?.current !== null) {\n onBlurCallback();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [focusedElementRef.current, previousFocusedElementRef, onBlurCallback]);\n\n useEventListener({\n eventName: \"blur\",\n ref: focusedElementRef,\n callback: onBlurCallback\n });\n}\n\nexport function useSetDefaultItemOnFocusEvent({\n focusedElementRef,\n isItemSelectable,\n visualFocusItemIndex,\n setVisualFocusItemIndex,\n itemsCount,\n defaultVisualFocusItemIndex = -1\n}: {\n focusedElementRef: MutableRefObject<HTMLElement>;\n isItemSelectable: (index: number) => boolean;\n visualFocusItemIndex: number;\n setVisualFocusItemIndex: (index: number) => void;\n itemsCount: number;\n defaultVisualFocusItemIndex: number;\n}) {\n const triggeredByKeyboard = useRef(false);\n\n const onFocusByKeyboard = useCallback(() => {\n triggeredByKeyboard.current = true;\n if (visualFocusItemIndex !== defaultVisualFocusItemIndex) {\n let newVisualFocusIndex;\n if (isItemSelectable(defaultVisualFocusItemIndex)) {\n newVisualFocusIndex = defaultVisualFocusItemIndex;\n } else {\n newVisualFocusIndex = getNextSelectableIndex({\n isItemSelectable,\n itemsCount,\n visualFocusItemIndex: defaultVisualFocusItemIndex\n });\n }\n setVisualFocusItemIndex(newVisualFocusIndex);\n }\n }, [\n defaultVisualFocusItemIndex,\n isItemSelectable,\n itemsCount,\n setVisualFocusItemIndex,\n triggeredByKeyboard,\n visualFocusItemIndex\n ]);\n const onFocusByMouse = useCallback(() => {\n triggeredByKeyboard.current = false;\n }, [triggeredByKeyboard]);\n useListenFocusTriggers({ ref: focusedElementRef, onFocusByKeyboard, onFocusByMouse });\n\n return { triggeredByKeyboard };\n}\n\nexport function useKeepFocusOnItemWhenListChanged({\n visualFocusItemIndex,\n itemsIds,\n isItemSelectable,\n setVisualFocusItemIndex\n}: {\n visualFocusItemIndex: number;\n itemsIds: string[];\n isItemSelectable: (index: number) => boolean;\n setVisualFocusItemIndex: (index: number) => void;\n}) {\n const prevItemIds = usePrevious(itemsIds);\n\n // When item list changed, keep the focus on the same item\n useEffect(() => {\n // When the list is changing the index of the focused item is point to a different item then before and\n // this is why we want to search for the new index of the item and change the index to point to it.\n let overrideIndexAfterListChanged;\n const isListChanged = prevItemIds !== undefined && prevItemIds !== itemsIds;\n if (isListChanged && prevItemIds !== undefined && visualFocusItemIndex !== -1) {\n const focusedItemId = prevItemIds[visualFocusItemIndex];\n overrideIndexAfterListChanged = itemsIds.indexOf(focusedItemId);\n } else {\n overrideIndexAfterListChanged = visualFocusItemIndex;\n }\n\n if (overrideIndexAfterListChanged !== visualFocusItemIndex) {\n if (isItemSelectable(overrideIndexAfterListChanged)) {\n setVisualFocusItemIndex(overrideIndexAfterListChanged);\n } else {\n const closestSelectableIndex = getNextSelectableIndex({\n isItemSelectable,\n visualFocusItemIndex: overrideIndexAfterListChanged,\n itemsCount: itemsIds.length\n });\n setVisualFocusItemIndex(closestSelectableIndex);\n }\n }\n }, [visualFocusItemIndex, itemsIds, isItemSelectable, setVisualFocusItemIndex, prevItemIds]);\n}\n"],"names":["ArrowDirection","ENTER_KEY","useSupportArrowsKeyboardNavigation","_ref","itemsCount","focusedElementRef","visualFocusItemIndex","setVisualFocusItemIndex","isHorizontalList","isItemSelectable","listenerOptions","triggeredByKeyboard","nextArrow","RIGHT","DOWN","backArrow","LEFT","UP","onArrowKeyEvent","useCallback","direction","newIndex","document","activeElement","current","getNextSelectableIndex","getPreviousSelectableIndex","onArrowBack","onArrowNext","useKeyEvent","Object","assign","keys","callback","useSupportPressItemKeyboardNavigation","_ref2","onItemClick","_ref2$listenerOptions","undefined","_ref2$isIgnoreSpaceAs","isIgnoreSpaceAsItemSelection","pressKeys","useMemo","baseOnClickCallback","event","itemIndex","keyboardOnSelectCallback","contains","useCleanVisualFocusOnBlur","_ref3","previousFocusedElementRef","usePrevious","onBlurCallback","useEffect","useEventListener","eventName","ref","useSetDefaultItemOnFocusEvent","_ref4","_ref4$defaultVisualFo","defaultVisualFocusItemIndex","useRef","onFocusByKeyboard","newVisualFocusIndex","onFocusByMouse","useListenFocusTriggers","useKeepFocusOnItemWhenListChanged","_ref5","itemsIds","prevItemIds","overrideIndexAfterListChanged","indexOf","closestSelectableIndex","length"],"mappings":"0WASA,IAAKA,GAAL,SAAKA,GACHA,EAAA,GAAA,UACAA,EAAA,KAAA,YACAA,EAAA,MAAA,aACAA,EAAA,KAAA,WACD,CALD,CAAKA,IAAAA,EAKJ,CAAA,IAED,IAAMC,EAAY,iBAGFC,EAAkCC,GAkBjD,IAjBCC,EAAUD,EAAVC,WACAC,EAAiBF,EAAjBE,kBACAC,EAAoBH,EAApBG,qBACAC,EAAuBJ,EAAvBI,wBACAC,EAAgBL,EAAhBK,iBACAC,EAAgBN,EAAhBM,iBACAC,EAAeP,EAAfO,gBACAC,EAAmBR,EAAnBQ,oBAWMC,EAAYJ,EAAmBR,EAAea,MAAQb,EAAec,KACrEC,EAAYP,EAAmBR,EAAegB,KAAOhB,EAAeiB,GAEpEC,EAAkBC,GACtB,SAACC,GAmBC,IAAIC,EAhBAC,SAASC,gBAAkBlB,EAAkBmB,WAM5Cb,EAAoBa,UACvBb,EAAoBa,SAAU,EAI1BlB,GAAwB,KAQ1Bc,IAAcR,EAChBS,EAAWI,EAAuB,CAAEhB,iBAAAA,EAAkBH,qBAAAA,EAAsBF,WAAAA,IACnEgB,IAAcL,IACvBM,EAAWK,EAA2B,CAAEjB,iBAAAA,EAAkBH,qBAAAA,EAAsBF,WAAAA,KAG9EiB,GAAY,GAAKA,IAAaf,GAAsBC,EAAwBc,IAClF,GACA,CACEhB,EACAM,EACAC,EACAG,EACAT,EACAC,EACAE,EACAL,IAGEuB,EAAcR,GAAY,WAC9BD,EAAgBH,EAClB,GAAG,CAACA,EAAWG,IAETU,EAAcT,GAAY,WAC9BD,EAAgBN,EAClB,GAAG,CAACA,EAAWM,IAEfW,EACEC,OAAAC,OAAA,CAAAC,KAAM,CAACpB,GACPqB,SAAUL,GACPlB,IAGLmB,EACEC,OAAAC,OAAA,CAAAC,KAAM,CAACjB,GACPkB,SAAUN,GACPjB,GAEP,CAEM,SAAUwB,EAAqCC,GAkBpD,IAjBC7B,EAAoB6B,EAApB7B,qBACAD,EAAiB8B,EAAjB9B,kBACAD,EAAU+B,EAAV/B,WACAG,EAAuB4B,EAAvB5B,wBACA6B,EAAWD,EAAXC,YACA3B,EAAgB0B,EAAhB1B,iBAAgB4B,EAAAF,EAChBzB,gBAAAA,OAAkB4B,IAAHD,OAAGC,EAASD,EAAAE,EAAAJ,EAC3BK,6BAAAA,OAA+B,IAAHD,GAAQA,EAW9BE,EAAYC,GAChB,WAAA,OAAOF,EAA+B,CAACvC,GAAa,CAACA,EA3GvC,IA2G4D,GAC1E,CAACuC,IAGGG,EAAsBxB,GAC1B,SAACyB,EAA4BC,GAEtBT,IADiBS,GAAa,GAAiBzC,EAAZyC,IACDpC,EAAiBoC,KACpDvC,IAAyBuC,GAAWtC,EAAwBsC,GAChET,EAAYQ,EAAOC,GACrB,GACA,CAACzC,EAAYgC,EAAa3B,EAAkBH,EAAsBC,IAG9DuC,EAA2B3B,GAC/B,SAACyB,GAGKvC,EAAkBmB,QAAQuB,SAASzB,SAASC,gBAC9CoB,EAAoBC,EAAOtC,EAE9B,GACD,CAACqC,EAAqBtC,EAAmBC,IAG3CuB,EAAWC,OAAAC,OAAA,CACTC,KAAMS,EACNR,SAAUa,GACPpC,GAEP,CAEM,SAAUsC,EAAyBC,GAQxC,IAPC5C,EAAiB4C,EAAjB5C,kBACAC,EAAoB2C,EAApB3C,qBACAC,EAAuB0C,EAAvB1C,wBAMM2C,EAA4BC,EAAY9C,GAExC+C,EAAiBjC,GAAY,YACH,IAA1Bb,GACFC,GAAyB,EAE7B,GAAG,CAACA,EAAyBD,IAG7B+C,GAAU,WAE2B,QAA/BhD,eAAAA,EAAmBmB,UAA2D,QAAvC0B,aAAA,EAAAA,EAA2B1B,UACpE4B,GAGH,GAAE,CAAC/C,EAAkBmB,QAAS0B,EAA2BE,IAE1DE,EAAiB,CACfC,UAAW,OACXC,IAAKnD,EACL4B,SAAUmB,GAEd,UAEgBK,EAA6BC,GAc5C,IAbCrD,EAAiBqD,EAAjBrD,kBACAI,EAAgBiD,EAAhBjD,iBACAH,EAAoBoD,EAApBpD,qBACAC,EAAuBmD,EAAvBnD,wBACAH,EAAUsD,EAAVtD,WAAUuD,EAAAD,EACVE,4BAAAA,OAA2B,IAAAD,GAAI,EAACA,EAS1BhD,EAAsBkD,GAAO,GAE7BC,EAAoB3C,GAAY,WAGlC,IAAI4C,GAFNpD,EAAoBa,SAAU,EAC1BlB,IAAyBsD,KAGzBG,EADEtD,EAAiBmD,GACGA,EAEAnC,EAAuB,CAC3ChB,iBAAAA,EACAL,WAAAA,EACAE,qBAAsBsD,IAG1BrD,EAAwBwD,GAE5B,GAAG,CACDH,EACAnD,EACAL,EACAG,EACAI,EACAL,IAEI0D,EAAiB7C,GAAY,WACjCR,EAAoBa,SAAU,CAChC,GAAG,CAACb,IAGJ,OAFAsD,EAAuB,CAAET,IAAKnD,EAAmByD,kBAAAA,EAAmBE,eAAAA,IAE7D,CAAErD,oBAAAA,EACX,CAEM,SAAUuD,EAAiCC,GAUhD,IATC7D,EAAoB6D,EAApB7D,qBACA8D,EAAQD,EAARC,SACA3D,EAAgB0D,EAAhB1D,iBACAF,EAAuB4D,EAAvB5D,wBAOM8D,EAAclB,EAAYiB,GAGhCf,GAAU,WAGR,IAAIiB,OACkChC,IAAhB+B,GAA6BA,IAAgBD,QAC9B9B,IAAhB+B,IAAuD,IAA1B/D,EAEhDgE,EAAgCF,EAASG,QADnBF,EAAY/D,IAGlCgE,EAAgChE,EAGlC,GAAIgE,IAAkChE,EACpC,GAAIG,EAAiB6D,GACnB/D,EAAwB+D,OACnB,CACL,IAAME,EAAyB/C,EAAuB,CACpDhB,iBAAAA,EACAH,qBAAsBgE,EACtBlE,WAAYgE,EAASK,SAEvBlE,EAAwBiE,EAC1B,CAEJ,GAAG,CAAClE,EAAsB8D,EAAU3D,EAAkBF,EAAyB8D,GACjF"}
|
|
1
|
+
{"version":3,"file":"useActiveDescendantListFocusHooks.js","sources":["../../../../../src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.ts"],"sourcesContent":["import { type MutableRefObject } from \"react\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport useKeyEvent, { type UseKeyEventArgs } from \"../useKeyEvent\";\nimport useEventListener from \"../useEventListener\";\nimport usePrevious from \"../usePrevious\";\nimport { getNextSelectableIndex, getPreviousSelectableIndex } from \"./useActiveDescendantListFocusHelpers\";\nimport useListenFocusTriggers from \"../useListenFocusTriggers\";\n\nenum ArrowDirection {\n UP = \"ArrowUp\",\n DOWN = \"ArrowDown\",\n RIGHT = \"ArrowRight\",\n LEFT = \"ArrowLeft\"\n}\n\nconst ENTER_KEY = \"Enter\";\nconst SPACE_KEY = \" \";\n\nexport function useSupportArrowsKeyboardNavigation({\n itemsCount,\n focusedElementRef,\n visualFocusItemIndex,\n setVisualFocusItemIndex,\n isHorizontalList,\n isItemSelectable,\n listenerOptions,\n triggeredByKeyboard\n}: {\n itemsCount: number;\n focusedElementRef: MutableRefObject<HTMLElement>;\n visualFocusItemIndex: number;\n setVisualFocusItemIndex: (index: number) => void;\n isHorizontalList: boolean;\n isItemSelectable: (index: number) => boolean;\n triggeredByKeyboard: MutableRefObject<boolean>;\n listenerOptions: Omit<UseKeyEventArgs, \"keys\" | \"callback\">;\n}) {\n const nextArrow = isHorizontalList ? ArrowDirection.RIGHT : ArrowDirection.DOWN;\n const backArrow = isHorizontalList ? ArrowDirection.LEFT : ArrowDirection.UP;\n\n const onArrowKeyEvent = useCallback(\n (direction: ArrowDirection) => {\n // we desire to change the visual focus item only if the user pressed on the keyboard arrows keys while\n // the focusedElementRef is naturally focus\n if (document.activeElement !== focusedElementRef.current) {\n return;\n }\n\n // If the focusedElementRef is naturally focus but this is the first keyboard interaction of the user, we will mark future user interactions as trigger by keyboard (until the next mouse interaction)\n // that from now on the interactions are trigger by keyboard (until the next mouse interaction)\n if (!triggeredByKeyboard.current) {\n triggeredByKeyboard.current = true;\n\n // If the focusedElementRef is naturally focus but this is the first keyboard interaction of the user, we want only to display the item\n // which right now visually focus without changing it.\n if (visualFocusItemIndex > -1) {\n return;\n }\n }\n\n let newIndex;\n\n // We will change the visual focused item index according to the direction of the pressed arrow\n if (direction === nextArrow) {\n newIndex = getNextSelectableIndex({ isItemSelectable, visualFocusItemIndex, itemsCount });\n } else if (direction === backArrow) {\n newIndex = getPreviousSelectableIndex({ isItemSelectable, visualFocusItemIndex, itemsCount });\n }\n\n if (newIndex > -1 && newIndex !== visualFocusItemIndex) setVisualFocusItemIndex(newIndex);\n },\n [\n focusedElementRef,\n triggeredByKeyboard,\n nextArrow,\n backArrow,\n visualFocusItemIndex,\n setVisualFocusItemIndex,\n isItemSelectable,\n itemsCount\n ]\n );\n const onArrowBack = useCallback(() => {\n onArrowKeyEvent(backArrow);\n }, [backArrow, onArrowKeyEvent]);\n\n const onArrowNext = useCallback(() => {\n onArrowKeyEvent(nextArrow);\n }, [nextArrow, onArrowKeyEvent]);\n\n useKeyEvent({\n keys: [nextArrow],\n callback: onArrowNext,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: [backArrow],\n callback: onArrowBack,\n ...listenerOptions\n });\n}\n\nexport function useSupportPressItemKeyboardNavigation({\n visualFocusItemIndex,\n focusedElementRef,\n itemsCount,\n setVisualFocusItemIndex,\n onItemClick,\n isItemSelectable,\n listenerOptions = undefined,\n isIgnoreSpaceAsItemSelection = false\n}: {\n visualFocusItemIndex: number;\n focusedElementRef: MutableRefObject<HTMLElement>;\n itemsCount: number;\n setVisualFocusItemIndex: (index: number) => void;\n onItemClick: (event: React.MouseEvent | React.KeyboardEvent, index: number) => void;\n isItemSelectable: (index: number) => boolean;\n listenerOptions: Omit<UseKeyEventArgs, \"keys\" | \"callback\">;\n isIgnoreSpaceAsItemSelection: boolean;\n}) {\n const pressKeys = useMemo(\n () => (isIgnoreSpaceAsItemSelection ? [ENTER_KEY] : [ENTER_KEY, SPACE_KEY]),\n [isIgnoreSpaceAsItemSelection]\n );\n\n const baseOnClickCallback = useCallback(\n (event: React.KeyboardEvent, itemIndex: number) => {\n const hasValidIndex = itemIndex >= 0 && itemIndex < itemsCount;\n if (!onItemClick || !hasValidIndex || !isItemSelectable(itemIndex)) return;\n if (visualFocusItemIndex !== itemIndex) setVisualFocusItemIndex(itemIndex);\n onItemClick(event, itemIndex);\n },\n [itemsCount, onItemClick, isItemSelectable, visualFocusItemIndex, setVisualFocusItemIndex]\n );\n\n const keyboardOnSelectCallback = useCallback(\n (event: React.KeyboardEvent) => {\n // we desire to change the trigger the active item on click callback only if the user pressed on the keyboard arrows keys while\n // the focusedElementRef is naturally focus\n if (focusedElementRef.current.contains(document.activeElement)) {\n baseOnClickCallback(event, visualFocusItemIndex);\n }\n },\n [baseOnClickCallback, focusedElementRef, visualFocusItemIndex]\n );\n\n useKeyEvent({\n keys: pressKeys,\n callback: keyboardOnSelectCallback,\n ...listenerOptions\n });\n}\n\nexport function useCleanVisualFocusOnBlur({\n focusedElementRef,\n visualFocusItemIndex,\n setVisualFocusItemIndex\n}: {\n focusedElementRef: MutableRefObject<HTMLElement>;\n visualFocusItemIndex: number;\n setVisualFocusItemIndex: (index: number) => void;\n}) {\n const previousFocusedElementRef = usePrevious(focusedElementRef);\n\n const onBlurCallback = useCallback(() => {\n if (visualFocusItemIndex !== -1) {\n setVisualFocusItemIndex(-1);\n }\n }, [setVisualFocusItemIndex, visualFocusItemIndex]);\n\n // if element unmount act like element got blur event\n useEffect(() => {\n // if element unmount\n if (focusedElementRef?.current === null && previousFocusedElementRef?.current !== null) {\n onBlurCallback();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [focusedElementRef.current, previousFocusedElementRef, onBlurCallback]);\n\n useEventListener({\n eventName: \"blur\",\n ref: focusedElementRef,\n callback: onBlurCallback\n });\n}\n\nexport function useSetDefaultItemOnFocusEvent({\n focusedElementRef,\n isItemSelectable,\n visualFocusItemIndex,\n setVisualFocusItemIndex,\n itemsCount,\n defaultVisualFocusItemIndex = -1\n}: {\n focusedElementRef: MutableRefObject<HTMLElement>;\n isItemSelectable: (index: number) => boolean;\n visualFocusItemIndex: number;\n setVisualFocusItemIndex: (index: number) => void;\n itemsCount: number;\n defaultVisualFocusItemIndex: number;\n}) {\n const triggeredByKeyboard = useRef(false);\n\n const onFocusByKeyboard = useCallback(() => {\n triggeredByKeyboard.current = true;\n if (visualFocusItemIndex !== defaultVisualFocusItemIndex) {\n let newVisualFocusIndex;\n if (isItemSelectable(defaultVisualFocusItemIndex)) {\n newVisualFocusIndex = defaultVisualFocusItemIndex;\n } else {\n newVisualFocusIndex = getNextSelectableIndex({\n isItemSelectable,\n itemsCount,\n visualFocusItemIndex: defaultVisualFocusItemIndex\n });\n }\n setVisualFocusItemIndex(newVisualFocusIndex);\n }\n }, [\n defaultVisualFocusItemIndex,\n isItemSelectable,\n itemsCount,\n setVisualFocusItemIndex,\n triggeredByKeyboard,\n visualFocusItemIndex\n ]);\n const onFocusByMouse = useCallback(() => {\n triggeredByKeyboard.current = false;\n }, [triggeredByKeyboard]);\n useListenFocusTriggers({ ref: focusedElementRef, onFocusByKeyboard, onFocusByMouse });\n\n return { triggeredByKeyboard };\n}\n\nexport function useKeepFocusOnItemWhenListChanged({\n visualFocusItemIndex,\n itemsIds,\n isItemSelectable,\n setVisualFocusItemIndex\n}: {\n visualFocusItemIndex: number;\n itemsIds: string[];\n isItemSelectable: (index: number) => boolean;\n setVisualFocusItemIndex: (index: number) => void;\n}) {\n const prevItemIds = usePrevious(itemsIds);\n\n // When item list changed, keep the focus on the same item\n useEffect(() => {\n // When the list is changing the index of the focused item is point to a different item then before and\n // this is why we want to search for the new index of the item and change the index to point to it.\n let overrideIndexAfterListChanged;\n const isListChanged = prevItemIds !== undefined && prevItemIds !== itemsIds;\n if (isListChanged && prevItemIds !== undefined && visualFocusItemIndex !== -1) {\n const focusedItemId = prevItemIds[visualFocusItemIndex];\n overrideIndexAfterListChanged = itemsIds.indexOf(focusedItemId);\n } else {\n overrideIndexAfterListChanged = visualFocusItemIndex;\n }\n\n if (overrideIndexAfterListChanged !== visualFocusItemIndex) {\n if (isItemSelectable(overrideIndexAfterListChanged)) {\n setVisualFocusItemIndex(overrideIndexAfterListChanged);\n } else {\n const closestSelectableIndex = getNextSelectableIndex({\n isItemSelectable,\n visualFocusItemIndex: overrideIndexAfterListChanged,\n itemsCount: itemsIds.length\n });\n setVisualFocusItemIndex(closestSelectableIndex);\n }\n }\n }, [visualFocusItemIndex, itemsIds, isItemSelectable, setVisualFocusItemIndex, prevItemIds]);\n}\n"],"names":["ArrowDirection","ENTER_KEY","useSupportArrowsKeyboardNavigation","_ref","itemsCount","focusedElementRef","visualFocusItemIndex","setVisualFocusItemIndex","isHorizontalList","isItemSelectable","listenerOptions","triggeredByKeyboard","nextArrow","RIGHT","DOWN","backArrow","LEFT","UP","onArrowKeyEvent","useCallback","direction","newIndex","document","activeElement","current","getNextSelectableIndex","getPreviousSelectableIndex","onArrowBack","onArrowNext","useKeyEvent","Object","assign","keys","callback","useSupportPressItemKeyboardNavigation","_ref2","onItemClick","_ref2$listenerOptions","undefined","_ref2$isIgnoreSpaceAs","isIgnoreSpaceAsItemSelection","pressKeys","useMemo","baseOnClickCallback","event","itemIndex","keyboardOnSelectCallback","contains","useCleanVisualFocusOnBlur","_ref3","previousFocusedElementRef","usePrevious","onBlurCallback","useEffect","useEventListener","eventName","ref","useSetDefaultItemOnFocusEvent","_ref4","_ref4$defaultVisualFo","defaultVisualFocusItemIndex","useRef","onFocusByKeyboard","newVisualFocusIndex","onFocusByMouse","useListenFocusTriggers","useKeepFocusOnItemWhenListChanged","_ref5","itemsIds","prevItemIds","overrideIndexAfterListChanged","indexOf","closestSelectableIndex","length"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useMemo as n,useCallback as e,useEffect as o}from"react";import{noop as t}from"es-toolkit";import r
|
|
1
|
+
import{useMemo as n,useCallback as e,useEffect as o}from"react";import{noop as t}from"es-toolkit";import{useKeyEvent as r}from"@vibe/shared";var c;!function(n){n.UP="up",n.DOWN="down",n.LEFT="left",n.RIGHT="right"}(c||(c={}));var a=["ArrowDown"],i=["ArrowUp"],s=["ArrowRight"],l=["ArrowLeft"],u=["Enter"," "],f=["Enter"],b=["Escape"],k=["End"],v=["Home"];function d(f){var d=f.ref,g=f.onSelectionKey,p=void 0===g?t:g,O=f.onArrowNavigation,m=void 0===O?t:O,y=f.onEscape,E=void 0===y?t:y,j=f.onHome,w=void 0===j?t:j,A=f.onEnd,D=void 0===A?t:A,H=f.useDocumentEventListeners,L=void 0!==H&&H,T=f.focusOnMount,h=void 0!==T&&T,N=n((function(){if(!L)return{ref:d,preventDefault:!0,stopPropagation:!0}}),[L,d]),P=e((function(){return m(c.DOWN)}),[m]),R=e((function(){return m(c.UP)}),[m]),U=e((function(){return m(c.RIGHT)}),[m]),F=e((function(){return m(c.LEFT)}),[m]);r(Object.assign({keys:a,callback:P},N)),r(Object.assign({keys:i,callback:R},N)),r(Object.assign({keys:s,callback:U},N)),r(Object.assign({keys:l,callback:F},N)),r(Object.assign({keys:u,callback:p},N)),r(Object.assign({keys:b,callback:E},N)),r(Object.assign({keys:v,callback:w},N)),r(Object.assign({keys:k,callback:D},N)),o((function(){var n;h&&!L&&(null===(n=null==d?void 0:d.current)||void 0===n||n.focus())}),[h,d,L])}export{a as ARROW_DOWN_KEYS,l as ARROW_LEFT_KEYS,s as ARROW_RIGHT_KEYS,i as ARROW_UP_KEYS,k as END_KEYS,f as ENTER_KEYS,b as ESCAPE_KEYS,v as HOME_KEYS,c as NavDirections,u as SELECTION_KEYS,d as default};
|
|
2
2
|
//# sourceMappingURL=useFullKeyboardListeners.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFullKeyboardListeners.js","sources":["../../../../src/hooks/useFullKeyboardListeners.ts"],"sourcesContent":["import { type MutableRefObject, useCallback, useEffect, useMemo } from \"react\";\nimport { noop } from \"es-toolkit\";\nimport useKeyEvent from \"./useKeyEvent\";\nimport { type KeyboardEventCallback } from \"../types/events\";\n\nexport enum NavDirections {\n UP = \"up\",\n DOWN = \"down\",\n LEFT = \"left\",\n RIGHT = \"right\"\n}\n\nexport const ARROW_DOWN_KEYS = [\"ArrowDown\"];\nexport const ARROW_UP_KEYS = [\"ArrowUp\"];\nexport const ARROW_RIGHT_KEYS = [\"ArrowRight\"];\nexport const ARROW_LEFT_KEYS = [\"ArrowLeft\"];\nexport const SELECTION_KEYS = [\"Enter\", \" \"];\nexport const ENTER_KEYS = [\"Enter\"];\nexport const ESCAPE_KEYS = [\"Escape\"];\nexport const END_KEYS = [\"End\"];\nexport const HOME_KEYS = [\"Home\"];\n\nexport default function useFullKeyboardListeners({\n ref, // the reference for the component that listens to keyboard\n onSelectionKey = noop,\n onArrowNavigation = noop,\n onEscape = noop,\n onHome = noop,\n onEnd = noop,\n useDocumentEventListeners = false,\n focusOnMount = false\n}: {\n ref: MutableRefObject<HTMLElement>;\n onSelectionKey: KeyboardEventCallback;\n onArrowNavigation: (type: NavDirections) => void;\n onEscape: KeyboardEventCallback;\n onHome?: KeyboardEventCallback;\n onEnd?: KeyboardEventCallback;\n useDocumentEventListeners?: boolean;\n focusOnMount: boolean;\n}) {\n const listenerOptions = useMemo(() => {\n if (useDocumentEventListeners) return undefined;\n\n return {\n ref,\n preventDefault: true,\n stopPropagation: true\n };\n }, [useDocumentEventListeners, ref]);\n\n const onArrowDown = useCallback(() => onArrowNavigation(NavDirections.DOWN), [onArrowNavigation]);\n const onArrowUp = useCallback(() => onArrowNavigation(NavDirections.UP), [onArrowNavigation]);\n const onArrowRight = useCallback(() => onArrowNavigation(NavDirections.RIGHT), [onArrowNavigation]);\n const onArrowLeft = useCallback(() => onArrowNavigation(NavDirections.LEFT), [onArrowNavigation]);\n\n useKeyEvent({\n keys: ARROW_DOWN_KEYS,\n callback: onArrowDown,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ARROW_UP_KEYS,\n callback: onArrowUp,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ARROW_RIGHT_KEYS,\n callback: onArrowRight,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ARROW_LEFT_KEYS,\n callback: onArrowLeft,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: SELECTION_KEYS,\n callback: onSelectionKey,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ESCAPE_KEYS,\n callback: onEscape,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: HOME_KEYS,\n callback: onHome,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: END_KEYS,\n callback: onEnd,\n ...listenerOptions\n });\n\n useEffect(() => {\n if (!focusOnMount || useDocumentEventListeners) return;\n ref?.current?.focus();\n }, [focusOnMount, ref, useDocumentEventListeners]);\n}\n"],"names":["NavDirections","ARROW_DOWN_KEYS","ARROW_UP_KEYS","ARROW_RIGHT_KEYS","ARROW_LEFT_KEYS","SELECTION_KEYS","ENTER_KEYS","ESCAPE_KEYS","END_KEYS","HOME_KEYS","useFullKeyboardListeners","_ref","ref","_ref$onSelectionKey","onSelectionKey","noop","_ref$onArrowNavigatio","onArrowNavigation","_ref$onEscape","onEscape","_ref$onHome","onHome","_ref$onEnd","onEnd","_ref$useDocumentEvent","useDocumentEventListeners","_ref$focusOnMount","focusOnMount","listenerOptions","useMemo","preventDefault","stopPropagation","onArrowDown","useCallback","DOWN","onArrowUp","UP","onArrowRight","RIGHT","onArrowLeft","LEFT","useKeyEvent","Object","assign","keys","callback","useEffect","_a","current","focus"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useFullKeyboardListeners.js","sources":["../../../../src/hooks/useFullKeyboardListeners.ts"],"sourcesContent":["import { type MutableRefObject, useCallback, useEffect, useMemo } from \"react\";\nimport { noop } from \"es-toolkit\";\nimport useKeyEvent from \"./useKeyEvent\";\nimport { type KeyboardEventCallback } from \"../types/events\";\n\nexport enum NavDirections {\n UP = \"up\",\n DOWN = \"down\",\n LEFT = \"left\",\n RIGHT = \"right\"\n}\n\nexport const ARROW_DOWN_KEYS = [\"ArrowDown\"];\nexport const ARROW_UP_KEYS = [\"ArrowUp\"];\nexport const ARROW_RIGHT_KEYS = [\"ArrowRight\"];\nexport const ARROW_LEFT_KEYS = [\"ArrowLeft\"];\nexport const SELECTION_KEYS = [\"Enter\", \" \"];\nexport const ENTER_KEYS = [\"Enter\"];\nexport const ESCAPE_KEYS = [\"Escape\"];\nexport const END_KEYS = [\"End\"];\nexport const HOME_KEYS = [\"Home\"];\n\nexport default function useFullKeyboardListeners({\n ref, // the reference for the component that listens to keyboard\n onSelectionKey = noop,\n onArrowNavigation = noop,\n onEscape = noop,\n onHome = noop,\n onEnd = noop,\n useDocumentEventListeners = false,\n focusOnMount = false\n}: {\n ref: MutableRefObject<HTMLElement>;\n onSelectionKey: KeyboardEventCallback;\n onArrowNavigation: (type: NavDirections) => void;\n onEscape: KeyboardEventCallback;\n onHome?: KeyboardEventCallback;\n onEnd?: KeyboardEventCallback;\n useDocumentEventListeners?: boolean;\n focusOnMount: boolean;\n}) {\n const listenerOptions = useMemo(() => {\n if (useDocumentEventListeners) return undefined;\n\n return {\n ref,\n preventDefault: true,\n stopPropagation: true\n };\n }, [useDocumentEventListeners, ref]);\n\n const onArrowDown = useCallback(() => onArrowNavigation(NavDirections.DOWN), [onArrowNavigation]);\n const onArrowUp = useCallback(() => onArrowNavigation(NavDirections.UP), [onArrowNavigation]);\n const onArrowRight = useCallback(() => onArrowNavigation(NavDirections.RIGHT), [onArrowNavigation]);\n const onArrowLeft = useCallback(() => onArrowNavigation(NavDirections.LEFT), [onArrowNavigation]);\n\n useKeyEvent({\n keys: ARROW_DOWN_KEYS,\n callback: onArrowDown,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ARROW_UP_KEYS,\n callback: onArrowUp,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ARROW_RIGHT_KEYS,\n callback: onArrowRight,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ARROW_LEFT_KEYS,\n callback: onArrowLeft,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: SELECTION_KEYS,\n callback: onSelectionKey,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: ESCAPE_KEYS,\n callback: onEscape,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: HOME_KEYS,\n callback: onHome,\n ...listenerOptions\n });\n\n useKeyEvent({\n keys: END_KEYS,\n callback: onEnd,\n ...listenerOptions\n });\n\n useEffect(() => {\n if (!focusOnMount || useDocumentEventListeners) return;\n ref?.current?.focus();\n }, [focusOnMount, ref, useDocumentEventListeners]);\n}\n"],"names":["NavDirections","ARROW_DOWN_KEYS","ARROW_UP_KEYS","ARROW_RIGHT_KEYS","ARROW_LEFT_KEYS","SELECTION_KEYS","ENTER_KEYS","ESCAPE_KEYS","END_KEYS","HOME_KEYS","useFullKeyboardListeners","_ref","ref","_ref$onSelectionKey","onSelectionKey","noop","_ref$onArrowNavigatio","onArrowNavigation","_ref$onEscape","onEscape","_ref$onHome","onHome","_ref$onEnd","onEnd","_ref$useDocumentEvent","useDocumentEventListeners","_ref$focusOnMount","focusOnMount","listenerOptions","useMemo","preventDefault","stopPropagation","onArrowDown","useCallback","DOWN","onArrowUp","UP","onArrowRight","RIGHT","onArrowLeft","LEFT","useKeyEvent","Object","assign","keys","callback","useEffect","_a","current","focus"],"mappings":"iJAKYA,GAAZ,SAAYA,GACVA,EAAA,GAAA,KACAA,EAAA,KAAA,OACAA,EAAA,KAAA,OACAA,EAAA,MAAA,OACD,CALD,CAAYA,IAAAA,EAKX,CAAA,IAEYC,IAAAA,EAAkB,CAAC,aACnBC,EAAgB,CAAC,WACjBC,EAAmB,CAAC,cACpBC,EAAkB,CAAC,aACnBC,EAAiB,CAAC,QAAS,KAC3BC,EAAa,CAAC,SACdC,EAAc,CAAC,UACfC,EAAW,CAAC,OACZC,EAAY,CAAC,QAEF,SAAAC,EAAwBC,GAkB/C,IAjBCC,EAAGD,EAAHC,IAAGC,EAAAF,EACHG,eAAAA,OAAiBC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAL,EACrBM,kBAAAA,OAAoBF,IAAHC,EAAGD,EAAIC,EAAAE,EAAAP,EACxBQ,SAAAA,OAAWJ,IAAHG,EAAGH,EAAIG,EAAAE,EAAAT,EACfU,OAAAA,OAASN,IAAHK,EAAGL,EAAIK,EAAAE,EAAAX,EACbY,MAAAA,OAAQR,IAAHO,EAAGP,EAAIO,EAAAE,EAAAb,EACZc,0BAAAA,OAA4B,IAAHD,GAAQA,EAAAE,EAAAf,EACjCgB,aAAAA,OAAe,IAAHD,GAAQA,EAWdE,EAAkBC,GAAQ,WAC9B,IAAIJ,EAEJ,MAAO,CACLb,IAAAA,EACAkB,gBAAgB,EAChBC,iBAAiB,EAErB,GAAG,CAACN,EAA2Bb,IAEzBoB,EAAcC,GAAY,WAAA,OAAMhB,EAAkBjB,EAAckC,QAAO,CAACjB,IACxEkB,EAAYF,GAAY,WAAA,OAAMhB,EAAkBjB,EAAcoC,MAAK,CAACnB,IACpEoB,EAAeJ,GAAY,WAAA,OAAMhB,EAAkBjB,EAAcsC,SAAQ,CAACrB,IAC1EsB,EAAcN,GAAY,WAAA,OAAMhB,EAAkBjB,EAAcwC,QAAO,CAACvB,IAE9EwB,EAAWC,OAAAC,OAAA,CACTC,KAAM3C,EACN4C,SAAUb,GACPJ,IAGLa,EAAWC,OAAAC,OAAA,CACTC,KAAM1C,EACN2C,SAAUV,GACPP,IAGLa,EAAWC,OAAAC,OAAA,CACTC,KAAMzC,EACN0C,SAAUR,GACPT,IAGLa,EAAWC,OAAAC,OAAA,CACTC,KAAMxC,EACNyC,SAAUN,GACPX,IAGLa,EAAWC,OAAAC,OAAA,CACTC,KAAMvC,EACNwC,SAAU/B,GACPc,IAGLa,EAAWC,OAAAC,OAAA,CACTC,KAAMrC,EACNsC,SAAU1B,GACPS,IAGLa,EAAWC,OAAAC,OAAA,CACTC,KAAMnC,EACNoC,SAAUxB,GACPO,IAGLa,EAAWC,OAAAC,OAAA,CACTC,KAAMpC,EACNqC,SAAUtB,GACPK,IAGLkB,GAAU,iBACHnB,IAAgBF,IACT,QAAZsB,EAAAnC,aAAA,EAAAA,EAAKoC,eAAO,IAAAD,GAAAA,EAAEE,QACf,GAAE,CAACtB,EAAcf,EAAKa,GACzB"}
|
package/dist/mocked_classnames/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useContext as
|
|
1
|
+
import{slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useContext as o,useCallback as t,useEffect as r}from"react";import{GridKeyboardNavigationContext as u}from"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js";import a from"../useFullKeyboardListeners.js";import{useEventListener as c}from"@vibe/shared";import{getActiveIndexFromInboundNavigation as l,calcActiveIndexAfterArrowNavigation as d}from"./gridKeyboardNavigationHelper.js";import{useLastNavigationDirection as f}from"../../components/Menu/Menu/hooks/useLastNavigationDirection.js";var s=-1;function v(v){var m=v.ref,b=v.itemsCount,g=v.numberOfItemsInLine,I=v.onItemClicked,p=v.entryFocusStrategy,N=void 0===p?"directional":p,x=v.getItemByIndex,y=void 0===x?function(n){}:x,O=v.focusOnMount,h=void 0!==O&&O,A=v.focusItemIndexOnMount,C=void 0===A?s:A,j=v.disabledIndexes,k=void 0===j?[]:j,K=v.circularNavigation,L=void 0!==K&&K,M=e(h&&C!==s),S=n(M,2),H=S[0],w=S[1],B=i(!1),D=e(H?C:s),E=n(D,2),F=E[0],G=E[1],_=e(!0),P=n(_,2),R=P[0],T=P[1],q=o(u),z=t((function(){var n;T(!0);var e=k.includes(0)&&b>k.length&&null!==(n=Array.from({length:b},(function(n,e){return e})).find((function(n){return!k.includes(n)})))&&void 0!==n?n:0;G(e)}),[k,b]),J=t((function(){var n;T(!0);var e=k.includes(b-1)&&b>k.length&&null!==(n=Array.from({length:b},(function(n,e){return b-1-e})).find((function(n){return!k.includes(n)})))&&void 0!==n?n:b-1;G(e)}),[k,b]);r((function(){B.current?w(!1):B.current=!0}),[F]);var Q=t((function(){var n;return null===(n=m.current)||void 0===n?void 0:n.blur()}),[m]),U=f().lastNavigationDirectionRef,V=t((function(){if(F===s){var n=U.current;G("directional"===N&&n?l({direction:n,numberOfItemsInLine:g,itemsCount:b}):0),T(!0)}else T(!0)}),[F,N,b,U,g,G,T]),W=t((function(){T(!1)}),[T]),X=t((function(){T(!0),G(s)}),[G]);c({eventName:"focus",callback:V,ref:m}),c({eventName:"mousedown",callback:W,ref:m}),c({eventName:"blur",callback:X,ref:m}),r((function(){var n;F>-1&&(null===(n=m.current)||void 0===n||n.focus())}),[F,m]);var Y=t((function(n){T(arguments.length>1&&void 0!==arguments[1]&&arguments[1]),G(n),I(y(n),n)}),[G,I,y]),Z=t((function(){if(R)return Y(F,!0)}),[R,Y,F]);return a({ref:m,onSelectionKey:Z,onArrowNavigation:function(n){if(T(!0),F!==s){var e=d({activeIndex:F,itemsCount:b,numberOfItemsInLine:g,direction:n,disabledIndexes:k,circularNavigation:L}),i=e.nextIndex;e.isOutbound?null==q||q.onOutboundNavigation(m,n):G(i)}else G(0)},onEscape:Q,onHome:z,onEnd:J,focusOnMount:h}),{activeIndex:R?F:s,onSelectionAction:Y,isInitialActiveState:H}}export{v as default};
|
|
2
2
|
//# sourceMappingURL=useGridKeyboardNavigation.js.map
|