@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22
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/_internal/Falsy.d.ts +7 -0
- package/_internal/index.js +236 -0
- package/_internal/index.js.map +1 -0
- package/index.d.ts +352 -7
- package/index.js +14486 -65
- package/index.js.map +1 -1
- package/package.json +11 -4
- package/src/components/alert-dialog/AlertDialog.stories.tsx +127 -0
- package/src/components/alert-dialog/AlertDialog.test.tsx +34 -0
- package/src/components/alert-dialog/AlertDialog.tsx +189 -0
- package/src/components/alert-dialog/index.ts +1 -0
- package/src/components/autocomplete/Autocomplete.stories.tsx +75 -0
- package/src/components/autocomplete/Autocomplete.test.tsx +99 -0
- package/src/components/autocomplete/Autocomplete.tsx +294 -0
- package/src/components/autocomplete/AutocompleteMultiple.stories.tsx +167 -0
- package/src/components/autocomplete/AutocompleteMultiple.test.tsx +61 -0
- package/src/components/autocomplete/AutocompleteMultiple.tsx +156 -0
- package/src/components/autocomplete/__mockData__/index.ts +39 -0
- package/src/components/autocomplete/index.ts +2 -0
- package/src/components/avatar/Avatar.stories.tsx +119 -0
- package/src/components/avatar/Avatar.test.tsx +32 -0
- package/src/components/avatar/Avatar.tsx +114 -0
- package/src/components/avatar/index.ts +1 -0
- package/src/components/badge/Badge.stories.tsx +69 -0
- package/src/components/badge/Badge.test.tsx +45 -0
- package/src/components/badge/Badge.tsx +58 -0
- package/src/components/badge/BadgeWrapper.stories.tsx +75 -0
- package/src/components/badge/BadgeWrapper.test.tsx +47 -0
- package/src/components/badge/BadgeWrapper.tsx +37 -0
- package/src/components/badge/index.ts +2 -0
- package/src/components/button/Button.stories.tsx +355 -0
- package/src/components/button/Button.test.tsx +125 -0
- package/src/components/button/Button.tsx +101 -0
- package/src/components/button/ButtonGroup.stories.tsx +52 -0
- package/src/components/button/ButtonGroup.test.tsx +41 -0
- package/src/components/button/ButtonGroup.tsx +50 -0
- package/src/components/button/ButtonRoot.tsx +163 -0
- package/src/components/button/IconButton.stories.tsx +52 -0
- package/src/components/button/IconButton.test.tsx +66 -0
- package/src/components/button/IconButton.tsx +91 -0
- package/src/components/button/index.ts +4 -0
- package/src/components/checkbox/Checkbox.stories.tsx +64 -0
- package/src/components/checkbox/Checkbox.test.tsx +154 -0
- package/src/components/checkbox/Checkbox.tsx +164 -0
- package/src/components/checkbox/index.ts +1 -0
- package/src/components/chip/Chip.stories.tsx +164 -0
- package/src/components/chip/Chip.test.tsx +243 -0
- package/src/components/chip/Chip.tsx +168 -0
- package/src/components/chip/ChipGroup.stories.tsx +47 -0
- package/src/components/chip/ChipGroup.test.tsx +37 -0
- package/src/components/chip/ChipGroup.tsx +60 -0
- package/src/components/chip/index.ts +2 -0
- package/src/components/comment-block/CommentBlock.stories.tsx +91 -0
- package/src/components/comment-block/CommentBlock.test.tsx +28 -0
- package/src/components/comment-block/CommentBlock.tsx +172 -0
- package/src/components/comment-block/index.ts +1 -0
- package/src/components/date-picker/DatePicker.stories.tsx +118 -0
- package/src/components/date-picker/DatePicker.test.tsx +34 -0
- package/src/components/date-picker/DatePicker.tsx +52 -0
- package/src/components/date-picker/DatePickerControlled.test.tsx +91 -0
- package/src/components/date-picker/DatePickerControlled.tsx +259 -0
- package/src/components/date-picker/DatePickerField.stories.tsx +100 -0
- package/src/components/date-picker/DatePickerField.test.tsx +70 -0
- package/src/components/date-picker/DatePickerField.tsx +135 -0
- package/src/components/date-picker/constants.ts +11 -0
- package/src/components/date-picker/index.ts +4 -0
- package/src/components/date-picker/types.ts +28 -0
- package/src/components/dialog/Dialog.stories.tsx +318 -0
- package/src/components/dialog/Dialog.test.tsx +97 -0
- package/src/components/dialog/Dialog.tsx +288 -0
- package/src/components/dialog/index.ts +1 -0
- package/src/components/divider/Divider.test.tsx +51 -0
- package/src/components/divider/Divider.tsx +50 -0
- package/src/components/divider/index.ts +1 -0
- package/src/components/drag-handle/DragHandle.test.tsx +36 -0
- package/src/components/drag-handle/DragHandle.tsx +51 -0
- package/src/components/drag-handle/index.ts +1 -0
- package/src/components/dropdown/Dropdown.stories.tsx +31 -0
- package/src/components/dropdown/Dropdown.test.tsx +66 -0
- package/src/components/dropdown/Dropdown.tsx +186 -0
- package/src/components/dropdown/index.ts +1 -0
- package/src/components/expansion-panel/ExpansionPanel.stories.tsx +91 -0
- package/src/components/expansion-panel/ExpansionPanel.test.tsx +185 -0
- package/src/components/expansion-panel/ExpansionPanel.tsx +195 -0
- package/src/components/expansion-panel/index.ts +1 -0
- package/src/components/flag/Flag.stories.tsx +48 -0
- package/src/components/flag/Flag.test.tsx +62 -0
- package/src/components/flag/Flag.tsx +52 -0
- package/src/components/flag/index.ts +1 -0
- package/src/components/flex-box/FlexBox.stories.tsx +156 -0
- package/src/components/flex-box/FlexBox.test.tsx +24 -0
- package/src/components/flex-box/FlexBox.tsx +100 -0
- package/src/components/flex-box/index.ts +1 -0
- package/src/components/generic-block/GenericBlock.stories.jsx +128 -0
- package/src/components/generic-block/GenericBlock.test.tsx +156 -0
- package/src/components/generic-block/GenericBlock.tsx +225 -0
- package/src/components/generic-block/constants.ts +9 -0
- package/src/components/generic-block/index.ts +2 -0
- package/src/components/grid/Grid.tsx +83 -0
- package/src/components/grid/GridItem.tsx +55 -0
- package/src/components/grid/index.ts +2 -0
- package/src/components/grid-column/GridColumn.stories.tsx +45 -0
- package/src/components/grid-column/GridColumn.test.jsx +56 -0
- package/src/components/grid-column/GridColumn.tsx +83 -0
- package/src/components/grid-column/index.ts +1 -0
- package/src/components/heading/Heading.stories.tsx +69 -0
- package/src/components/heading/Heading.test.tsx +82 -0
- package/src/components/heading/Heading.tsx +65 -0
- package/src/components/heading/HeadingLevelProvider.tsx +30 -0
- package/src/components/heading/constants.ts +16 -0
- package/src/components/heading/context.tsx +13 -0
- package/src/components/heading/index.ts +3 -0
- package/src/components/heading/useHeadingLevel.tsx +8 -0
- package/src/components/icon/Icon.stories.tsx +73 -0
- package/src/components/icon/Icon.test.tsx +125 -0
- package/src/components/icon/Icon.tsx +133 -0
- package/src/components/icon/index.ts +1 -0
- package/src/components/image-block/ImageBlock.stories.tsx +117 -0
- package/src/components/image-block/ImageBlock.test.tsx +58 -0
- package/src/components/image-block/ImageBlock.tsx +142 -0
- package/src/components/image-block/ImageCaption.tsx +115 -0
- package/src/components/image-block/index.ts +1 -0
- package/src/components/image-lightbox/ImageLightbox.stories.tsx +160 -0
- package/src/components/image-lightbox/ImageLightbox.test.tsx +254 -0
- package/src/components/image-lightbox/ImageLightbox.tsx +90 -0
- package/src/components/image-lightbox/constants.ts +11 -0
- package/src/components/image-lightbox/index.ts +2 -0
- package/src/components/image-lightbox/internal/ImageSlide.tsx +107 -0
- package/src/components/image-lightbox/internal/ImageSlideshow.tsx +164 -0
- package/src/components/image-lightbox/internal/useAnimateScroll.ts +55 -0
- package/src/components/image-lightbox/internal/usePointerZoom.ts +148 -0
- package/src/components/image-lightbox/types.ts +48 -0
- package/src/components/image-lightbox/useImageLightbox.tsx +141 -0
- package/src/components/inline-list/InlineList.stories.tsx +77 -0
- package/src/components/inline-list/InlineList.test.tsx +52 -0
- package/src/components/inline-list/InlineList.tsx +96 -0
- package/src/components/inline-list/index.ts +1 -0
- package/src/components/input-helper/InputHelper.stories.tsx +35 -0
- package/src/components/input-helper/InputHelper.test.tsx +55 -0
- package/src/components/input-helper/InputHelper.tsx +65 -0
- package/src/components/input-helper/constants.ts +11 -0
- package/src/components/input-helper/index.ts +1 -0
- package/src/components/input-label/InputLabel.stories.tsx +45 -0
- package/src/components/input-label/InputLabel.test.tsx +59 -0
- package/src/components/input-label/InputLabel.tsx +69 -0
- package/src/components/input-label/index.ts +1 -0
- package/src/components/lightbox/Lightbox.stories.tsx +101 -0
- package/src/components/lightbox/Lightbox.test.tsx +53 -0
- package/src/components/lightbox/Lightbox.tsx +180 -0
- package/src/components/lightbox/index.ts +1 -0
- package/src/components/link/Link.stories.tsx +195 -0
- package/src/components/link/Link.test.tsx +127 -0
- package/src/components/link/Link.tsx +106 -0
- package/src/components/link/index.ts +1 -0
- package/src/components/link-preview/LinkPreview.stories.tsx +61 -0
- package/src/components/link-preview/LinkPreview.test.tsx +105 -0
- package/src/components/link-preview/LinkPreview.tsx +158 -0
- package/src/components/link-preview/index.ts +1 -0
- package/src/components/list/List.stories.tsx +116 -0
- package/src/components/list/List.test.tsx +18 -0
- package/src/components/list/List.tsx +104 -0
- package/src/components/list/ListDivider.stories.tsx +12 -0
- package/src/components/list/ListDivider.test.tsx +22 -0
- package/src/components/list/ListDivider.tsx +35 -0
- package/src/components/list/ListItem.stories.tsx +66 -0
- package/src/components/list/ListItem.test.tsx +93 -0
- package/src/components/list/ListItem.tsx +157 -0
- package/src/components/list/ListSubheader.stories.tsx +11 -0
- package/src/components/list/ListSubheader.test.tsx +21 -0
- package/src/components/list/ListSubheader.tsx +44 -0
- package/src/components/list/index.ts +4 -0
- package/src/components/list/useInteractiveList.tsx +202 -0
- package/src/components/message/Message.stories.tsx +72 -0
- package/src/components/message/Message.test.tsx +76 -0
- package/src/components/message/Message.tsx +100 -0
- package/src/components/message/index.ts +1 -0
- package/src/components/mosaic/Mosaic.stories.tsx +89 -0
- package/src/components/mosaic/Mosaic.test.tsx +77 -0
- package/src/components/mosaic/Mosaic.tsx +98 -0
- package/src/components/mosaic/index.ts +1 -0
- package/src/components/navigation/Navigation.stories.tsx +234 -0
- package/src/components/navigation/Navigation.test.tsx +65 -0
- package/src/components/navigation/Navigation.tsx +79 -0
- package/src/components/navigation/NavigationItem.test.tsx +35 -0
- package/src/components/navigation/NavigationItem.tsx +82 -0
- package/src/components/navigation/NavigationSection.test.tsx +137 -0
- package/src/components/navigation/NavigationSection.tsx +108 -0
- package/src/components/navigation/context.tsx +7 -0
- package/src/components/navigation/index.ts +1 -0
- package/src/components/notification/Notification.test.tsx +94 -0
- package/src/components/notification/Notification.tsx +138 -0
- package/src/components/notification/Notifications.stories.tsx +92 -0
- package/src/components/notification/constants.ts +28 -0
- package/src/components/notification/index.ts +1 -0
- package/src/components/popover/Popover.stories.tsx +264 -0
- package/src/components/popover/Popover.test.tsx +62 -0
- package/src/components/popover/Popover.tsx +201 -0
- package/src/components/popover/constants.ts +62 -0
- package/src/components/popover/index.ts +3 -0
- package/src/components/popover/usePopoverStyle.tsx +184 -0
- package/src/components/popover/useRestoreFocusOnClose.tsx +47 -0
- package/src/components/popover-dialog/PopoverDialog.stories.tsx +64 -0
- package/src/components/popover-dialog/PopoverDialog.test.tsx +139 -0
- package/src/components/popover-dialog/PopoverDialog.tsx +74 -0
- package/src/components/popover-dialog/index.tsx +1 -0
- package/src/components/post-block/PostBlock.test.tsx +27 -0
- package/src/components/post-block/PostBlock.tsx +122 -0
- package/src/components/post-block/index.ts +1 -0
- package/src/components/progress/Progress.tsx +68 -0
- package/src/components/progress/ProgressCircular.stories.tsx +43 -0
- package/src/components/progress/ProgressCircular.test.tsx +46 -0
- package/src/components/progress/ProgressCircular.tsx +82 -0
- package/src/components/progress/ProgressLinear.stories.tsx +12 -0
- package/src/components/progress/ProgressLinear.test.tsx +30 -0
- package/src/components/progress/ProgressLinear.tsx +50 -0
- package/src/components/progress/index.ts +3 -0
- package/src/components/progress-tracker/ProgressTracker.stories.tsx +145 -0
- package/src/components/progress-tracker/ProgressTracker.test.tsx +42 -0
- package/src/components/progress-tracker/ProgressTracker.tsx +87 -0
- package/src/components/progress-tracker/ProgressTrackerProvider.test.tsx +65 -0
- package/src/components/progress-tracker/ProgressTrackerProvider.tsx +67 -0
- package/src/components/progress-tracker/ProgressTrackerStep.test.tsx +36 -0
- package/src/components/progress-tracker/ProgressTrackerStep.tsx +159 -0
- package/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx +34 -0
- package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx +67 -0
- package/src/components/progress-tracker/index.ts +4 -0
- package/src/components/radio-button/RadioButton.stories.tsx +71 -0
- package/src/components/radio-button/RadioButton.test.tsx +143 -0
- package/src/components/radio-button/RadioButton.tsx +143 -0
- package/src/components/radio-button/RadioGroup.stories.tsx +39 -0
- package/src/components/radio-button/RadioGroup.test.tsx +29 -0
- package/src/components/radio-button/RadioGroup.tsx +44 -0
- package/src/components/radio-button/index.ts +2 -0
- package/src/components/select/Select.stories.tsx +385 -0
- package/src/components/select/Select.test.tsx +199 -0
- package/src/components/select/Select.tsx +199 -0
- package/src/components/select/SelectMultiple.stories.tsx +315 -0
- package/src/components/select/SelectMultiple.test.tsx +213 -0
- package/src/components/select/SelectMultiple.tsx +206 -0
- package/src/components/select/WithSelectContext.tsx +147 -0
- package/src/components/select/constants.ts +55 -0
- package/src/components/select/index.ts +2 -0
- package/src/components/side-navigation/SideNavigation.stories.tsx +191 -0
- package/src/components/side-navigation/SideNavigation.test.tsx +37 -0
- package/src/components/side-navigation/SideNavigation.tsx +52 -0
- package/src/components/side-navigation/SideNavigationItem.stories.tsx +133 -0
- package/src/components/side-navigation/SideNavigationItem.test.tsx +136 -0
- package/src/components/side-navigation/SideNavigationItem.tsx +165 -0
- package/src/components/side-navigation/index.ts +2 -0
- package/src/components/skeleton/SkeletonCircle.stories.tsx +41 -0
- package/src/components/skeleton/SkeletonCircle.test.tsx +27 -0
- package/src/components/skeleton/SkeletonCircle.tsx +52 -0
- package/src/components/skeleton/SkeletonRectangle.stories.tsx +82 -0
- package/src/components/skeleton/SkeletonRectangle.test.tsx +27 -0
- package/src/components/skeleton/SkeletonRectangle.tsx +88 -0
- package/src/components/skeleton/SkeletonTypography.stories.tsx +19 -0
- package/src/components/skeleton/SkeletonTypography.test.tsx +27 -0
- package/src/components/skeleton/SkeletonTypography.tsx +59 -0
- package/src/components/skeleton/index.ts +3 -0
- package/src/components/slider/Slider.stories.tsx +45 -0
- package/src/components/slider/Slider.test.tsx +29 -0
- package/src/components/slider/Slider.tsx +299 -0
- package/src/components/slider/index.ts +2 -0
- package/src/components/slideshow/Slides.tsx +130 -0
- package/src/components/slideshow/Slideshow.stories.tsx +179 -0
- package/src/components/slideshow/Slideshow.test.tsx +35 -0
- package/src/components/slideshow/Slideshow.tsx +173 -0
- package/src/components/slideshow/SlideshowControls.stories.tsx +100 -0
- package/src/components/slideshow/SlideshowControls.tsx +243 -0
- package/src/components/slideshow/SlideshowItem.tsx +44 -0
- package/src/components/slideshow/SlideshowItemGroup.tsx +60 -0
- package/src/components/slideshow/constants.ts +24 -0
- package/src/components/slideshow/index.ts +4 -0
- package/src/components/slideshow/useKeyNavigate.ts +28 -0
- package/src/components/slideshow/usePaginationVisibleRange.ts +37 -0
- package/src/components/slideshow/useSlideFocusManagement.tsx +92 -0
- package/src/components/slideshow/useSwipeNavigate.ts +18 -0
- package/src/components/switch/Switch.stories.tsx +49 -0
- package/src/components/switch/Switch.test.tsx +144 -0
- package/src/components/switch/Switch.tsx +145 -0
- package/src/components/switch/index.ts +1 -0
- package/src/components/table/Table.test.tsx +29 -0
- package/src/components/table/Table.tsx +59 -0
- package/src/components/table/TableBody.test.tsx +30 -0
- package/src/components/table/TableBody.tsx +42 -0
- package/src/components/table/TableCell.test.tsx +72 -0
- package/src/components/table/TableCell.tsx +130 -0
- package/src/components/table/TableHeader.test.tsx +30 -0
- package/src/components/table/TableHeader.tsx +48 -0
- package/src/components/table/TableRow.test.tsx +40 -0
- package/src/components/table/TableRow.tsx +71 -0
- package/src/components/table/index.ts +5 -0
- package/src/components/tabs/Tab.test.tsx +50 -0
- package/src/components/tabs/Tab.tsx +133 -0
- package/src/components/tabs/TabList.test.tsx +49 -0
- package/src/components/tabs/TabList.tsx +94 -0
- package/src/components/tabs/TabPanel.test.tsx +37 -0
- package/src/components/tabs/TabPanel.tsx +67 -0
- package/src/components/tabs/TabProvider.test.tsx +161 -0
- package/src/components/tabs/TabProvider.tsx +67 -0
- package/src/components/tabs/Tabs.stories.tsx +170 -0
- package/src/components/tabs/index.ts +4 -0
- package/src/components/tabs/state.ts +114 -0
- package/src/components/tabs/test-utils.ts +39 -0
- package/src/components/text/Text.stories.tsx +177 -0
- package/src/components/text/Text.test.tsx +92 -0
- package/src/components/text/Text.tsx +139 -0
- package/src/components/text/index.ts +1 -0
- package/src/components/text-field/TextField.stories.tsx +180 -0
- package/src/components/text-field/TextField.test.tsx +298 -0
- package/src/components/text-field/TextField.tsx +493 -0
- package/src/components/text-field/index.ts +1 -0
- package/src/components/thumbnail/Thumbnail.stories.tsx +448 -0
- package/src/components/thumbnail/Thumbnail.test.tsx +88 -0
- package/src/components/thumbnail/Thumbnail.tsx +248 -0
- package/src/components/thumbnail/index.ts +3 -0
- package/src/components/thumbnail/types.ts +48 -0
- package/src/components/thumbnail/useFocusPointStyle.test.ts +92 -0
- package/src/components/thumbnail/useFocusPointStyle.tsx +107 -0
- package/src/components/thumbnail/useImageLoad.ts +40 -0
- package/src/components/toolbar/Toolbar.tsx +68 -0
- package/src/components/toolbar/index.ts +1 -0
- package/src/components/tooltip/Tooltip.stories.tsx +118 -0
- package/src/components/tooltip/Tooltip.test.tsx +417 -0
- package/src/components/tooltip/Tooltip.tsx +165 -0
- package/src/components/tooltip/constants.ts +8 -0
- package/src/components/tooltip/context.tsx +17 -0
- package/src/components/tooltip/index.ts +1 -0
- package/src/components/tooltip/useInjectTooltipRef.tsx +55 -0
- package/src/components/tooltip/useTooltipOpen.tsx +143 -0
- package/src/components/uploader/Uploader.stories.tsx +109 -0
- package/src/components/uploader/Uploader.test.tsx +146 -0
- package/src/components/uploader/Uploader.tsx +177 -0
- package/src/components/uploader/index.ts +1 -0
- package/src/components/user-block/UserBlock.stories.tsx +133 -0
- package/src/components/user-block/UserBlock.test.tsx +106 -0
- package/src/components/user-block/UserBlock.tsx +193 -0
- package/src/components/user-block/index.ts +1 -0
- package/src/constants.ts +27 -0
- package/src/hooks/useBooleanState.tsx +13 -0
- package/src/hooks/useCallbackOnEscape.ts +34 -0
- package/src/hooks/useChipGroupNavigation.tsx +75 -0
- package/src/hooks/useClickAway.tsx +48 -0
- package/src/hooks/useDisableBodyScroll.ts +28 -0
- package/src/hooks/useEventCallback.tsx +17 -0
- package/src/hooks/useFocus.tsx +21 -0
- package/src/hooks/useFocusTrap.ts +93 -0
- package/src/hooks/useFocusWithin.ts +33 -0
- package/src/hooks/useId.test.tsx +22 -0
- package/src/hooks/useId.ts +15 -0
- package/src/hooks/useImageSize.ts +17 -0
- package/src/hooks/useInfiniteScroll.tsx +60 -0
- package/src/hooks/useIntersectionObserver.tsx +43 -0
- package/src/hooks/useInterval.tsx +31 -0
- package/src/hooks/useKeyboardListNavigation.tsx +204 -0
- package/src/hooks/useListenFocus.tsx +26 -0
- package/src/hooks/useOverflowTooltipLabel.tsx +32 -0
- package/src/hooks/usePopper.ts +12 -0
- package/src/hooks/usePreviousValue.ts +12 -0
- package/src/hooks/useRovingTabIndex.tsx +90 -0
- package/src/hooks/useSizeOnWindowResize.ts +30 -0
- package/src/hooks/useSlideshowControls.ts +246 -0
- package/src/hooks/useStopPropagation.ts +21 -0
- package/src/hooks/useTransitionVisibility.ts +48 -0
- package/src/index.ts +63 -0
- package/src/stories/controls/color.ts +7 -0
- package/src/stories/controls/element.ts +6 -0
- package/src/stories/controls/focusPoint.ts +1 -0
- package/src/stories/controls/icons.ts +126 -0
- package/src/stories/controls/image.ts +84 -0
- package/src/stories/controls/selectArgType.ts +8 -0
- package/src/stories/controls/theme.ts +3 -0
- package/src/stories/controls/typography.ts +5 -0
- package/src/stories/controls/withUndefined.ts +1 -0
- package/src/stories/decorators/withChromaticForceScreenSize.tsx +7 -0
- package/src/stories/decorators/withCombinations.tsx +132 -0
- package/src/stories/decorators/withNestedProps.tsx +22 -0
- package/src/stories/decorators/withResizableBox.tsx +21 -0
- package/src/stories/decorators/withThemedBackground.tsx +16 -0
- package/src/stories/decorators/withValueOnChange.tsx +18 -0
- package/src/stories/decorators/withWrapper.tsx +19 -0
- package/src/stories/generated/Autocomplete/Demos.stories.tsx +7 -0
- package/src/stories/generated/Avatar/Demos.stories.tsx +7 -0
- package/src/stories/generated/Badge/Demos.stories.tsx +9 -0
- package/src/stories/generated/Button/Demos.stories.tsx +11 -0
- package/src/stories/generated/Checkbox/Demos.stories.tsx +6 -0
- package/src/stories/generated/Chip/Demos.stories.tsx +11 -0
- package/src/stories/generated/CommentBlock/Demos.stories.tsx +8 -0
- package/src/stories/generated/DatePicker/Demos.stories.tsx +8 -0
- package/src/stories/generated/Dialog/Demos.stories.tsx +10 -0
- package/src/stories/generated/Divider/Demos.stories.tsx +6 -0
- package/src/stories/generated/Dropdown/Demos.stories.tsx +8 -0
- package/src/stories/generated/ExpansionPanel/Demos.stories.tsx +9 -0
- package/src/stories/generated/Flag/Demos.stories.tsx +6 -0
- package/src/stories/generated/GenericBlock/Demos.stories.tsx +8 -0
- package/src/stories/generated/Heading/Demos.stories.tsx +6 -0
- package/src/stories/generated/Icon/Demos.stories.tsx +8 -0
- package/src/stories/generated/ImageBlock/Demos.stories.tsx +9 -0
- package/src/stories/generated/ImageLightbox/Demos.stories.tsx +6 -0
- package/src/stories/generated/Lightbox/Demos.stories.tsx +6 -0
- package/src/stories/generated/LinkPreview/Demos.stories.tsx +7 -0
- package/src/stories/generated/List/Demos.stories.tsx +11 -0
- package/src/stories/generated/Message/Demos.stories.tsx +11 -0
- package/src/stories/generated/Mosaic/Demos.stories.tsx +10 -0
- package/src/stories/generated/Notification/Demos.stories.tsx +6 -0
- package/src/stories/generated/Popover/Demos.stories.tsx +11 -0
- package/src/stories/generated/PopoverDialog/Demos.stories.tsx +6 -0
- package/src/stories/generated/PostBlock/Demos.stories.tsx +6 -0
- package/src/stories/generated/Progress/Demos.stories.tsx +7 -0
- package/src/stories/generated/ProgressTracker/Demos.stories.tsx +9 -0
- package/src/stories/generated/RadioButton/Demos.stories.tsx +6 -0
- package/src/stories/generated/Select/Demos.stories.tsx +14 -0
- package/src/stories/generated/SideNavigation/Demos.stories.tsx +10 -0
- package/src/stories/generated/Skeleton/Demos.stories.tsx +9 -0
- package/src/stories/generated/Slider/Demos.stories.tsx +9 -0
- package/src/stories/generated/Slideshow/Demos.stories.tsx +8 -0
- package/src/stories/generated/Switch/Demos.stories.tsx +6 -0
- package/src/stories/generated/Table/Demos.stories.tsx +7 -0
- package/src/stories/generated/Tabs/Demos.stories.tsx +8 -0
- package/src/stories/generated/TextField/Demos.stories.tsx +20 -0
- package/src/stories/generated/Thumbnail/Demos.stories.tsx +12 -0
- package/src/stories/generated/Toolbar/Demos.stories.tsx +10 -0
- package/src/stories/generated/Tooltip/Demos.stories.tsx +8 -0
- package/src/stories/generated/Uploader/Demos.stories.tsx +8 -0
- package/src/stories/generated/UserBlock/Demos.stories.tsx +11 -0
- package/src/stories/utils/CustomLink.tsx +12 -0
- package/src/stories/utils/concatPath.tsx +17 -0
- package/src/stories/utils/disableArgTypes.ts +3 -0
- package/src/stories/utils/initDemoShadowDOMPortal.ts +10 -0
- package/src/stories/utils/lorem.ts +59 -0
- package/src/stories/utils/theming.tsx +166 -0
- package/src/stories/utils/toFlattenProps.ts +28 -0
- package/src/stories/utils/withCategory.ts +12 -0
- package/src/testing/utils/ThemeSentinel.tsx +10 -0
- package/src/testing/utils/commonTestsSuiteRTL.tsx +193 -0
- package/src/testing/utils/index.ts +1 -0
- package/src/testing/utils/queries.ts +19 -0
- package/src/untypped-modules.d.ts +9 -0
- package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx +70 -0
- package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx +69 -0
- package/src/utils/ClickAwayProvider/index.ts +1 -0
- package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +54 -0
- package/src/utils/MaterialThemeSwitcher/index.ts +1 -0
- package/src/utils/Portal/Portal.test.tsx +31 -0
- package/src/utils/Portal/Portal.tsx +33 -0
- package/src/utils/Portal/PortalProvider.stories.jsx +22 -0
- package/src/utils/Portal/PortalProvider.test.tsx +72 -0
- package/src/utils/Portal/PortalProvider.tsx +24 -0
- package/src/utils/Portal/index.tsx +2 -0
- package/src/utils/browser/DOM/findImage.tsx +3 -0
- package/src/utils/browser/DOM/startViewTransition.ts +68 -0
- package/src/utils/browser/focus/constants.ts +7 -0
- package/src/utils/browser/focus/getFirstAndLastFocusable.test.ts +134 -0
- package/src/utils/browser/focus/getFirstAndLastFocusable.ts +21 -0
- package/src/utils/browser/focus/getFocusableElements.test.ts +151 -0
- package/src/utils/browser/focus/getFocusableElements.ts +7 -0
- package/src/utils/browser/isFocusVisible.ts +9 -0
- package/src/utils/browser/isHoverNotSupported.test.js +24 -0
- package/src/utils/browser/isHoverNotSupported.ts +2 -0
- package/src/utils/browser/isReducedMotion.ts +6 -0
- package/src/utils/date/addMonthResetDay.test.ts +13 -0
- package/src/utils/date/addMonthResetDay.ts +9 -0
- package/src/utils/date/formatDayNumber.test.ts +12 -0
- package/src/utils/date/formatDayNumber.ts +5 -0
- package/src/utils/date/getFirstDayOfWeek.test.ts +20 -0
- package/src/utils/date/getFirstDayOfWeek.ts +59 -0
- package/src/utils/date/getMonthCalendar.test.ts +127 -0
- package/src/utils/date/getMonthCalendar.ts +69 -0
- package/src/utils/date/getWeekDays.test.ts +48 -0
- package/src/utils/date/getWeekDays.ts +34 -0
- package/src/utils/date/getYearDisplayName.test.ts +20 -0
- package/src/utils/date/getYearDisplayName.ts +12 -0
- package/src/utils/date/isDateValid.test.ts +15 -0
- package/src/utils/date/isDateValid.ts +4 -0
- package/src/utils/date/isSameDay.test.ts +37 -0
- package/src/utils/date/isSameDay.ts +11 -0
- package/src/utils/disabled/DisabledStateContext.tsx +29 -0
- package/src/utils/disabled/DisabledStateProvider.stories.tsx +92 -0
- package/src/utils/disabled/index.ts +2 -0
- package/src/utils/disabled/useDisableStateProps.test.tsx +74 -0
- package/src/utils/disabled/useDisableStateProps.tsx +37 -0
- package/src/utils/function/makeListenerTowerContext.ts +32 -0
- package/src/utils/index.ts +7 -0
- package/src/utils/locale/getCurrentLocale.ts +4 -0
- package/src/utils/locale/parseLocale.test.ts +17 -0
- package/src/utils/locale/parseLocale.ts +23 -0
- package/src/utils/locale/types.ts +8 -0
- package/src/utils/number/clamp.ts +17 -0
- package/src/utils/object/isEqual.test.ts +25 -0
- package/src/utils/object/isEqual.ts +11 -0
- package/src/utils/partitionMulti.test.ts +27 -0
- package/{_internal/partitionMulti-4daccdd5.js → src/utils/partitionMulti.ts} +9 -5
- package/src/utils/react/OnBeforeUnmount.tsx +20 -0
- package/src/utils/react/RawClickable.test.tsx +153 -0
- package/src/utils/react/RawClickable.tsx +65 -0
- package/src/utils/react/flattenChildren.ts +32 -0
- package/src/utils/react/forwardRef.ts +11 -0
- package/src/utils/react/forwardRefPolymorphic.ts +9 -0
- package/src/utils/react/mergeRefs.ts +33 -0
- package/src/utils/react/renderLink.tsx +17 -0
- package/src/utils/react/skipRender.tsx +18 -0
- package/src/utils/react/unref.ts +7 -0
- package/src/utils/react/wrapChildrenIconWithSpaces.test.tsx +37 -0
- package/src/utils/react/wrapChildrenIconWithSpaces.tsx +22 -0
- package/src/utils/theme/ThemeContext.ts +16 -0
- package/src/utils/theme/invertTheme.ts +4 -0
- package/src/utils/type/Comp.ts +14 -0
- package/src/utils/type/ComponentRef.ts +16 -0
- package/src/utils/type/HasAriaDisabled.ts +6 -0
- package/src/utils/type/HasPolymorphicAs.ts +6 -0
- package/src/utils/type/HasRequiredLinkHref.ts +1 -0
- package/src/utils/type/MaybeElementOrRef.ts +6 -0
- package/src/utils/type/index.ts +9 -0
- package/src/utils/type/isComponent.ts +33 -0
- package/src/utils/type/isComponentType.ts +9 -0
- package/utils/index.d.ts +1 -1
- package/utils/index.js +1 -3
- package/utils/index.js.map +1 -1
- package/_internal/Button-1f227024.js +0 -98
- package/_internal/Button-1f227024.js.map +0 -1
- package/_internal/ButtonRoot-823f3e9c.js +0 -117
- package/_internal/ButtonRoot-823f3e9c.js.map +0 -1
- package/_internal/Chip-a34f6905.js +0 -146
- package/_internal/Chip-a34f6905.js.map +0 -1
- package/_internal/ClickAwayProvider-7093ba23.js +0 -95
- package/_internal/ClickAwayProvider-7093ba23.js.map +0 -1
- package/_internal/DisabledStateContext-ea04260d.js +0 -29
- package/_internal/DisabledStateContext-ea04260d.js.map +0 -1
- package/_internal/HeadingLevelProvider-ebdcb0c7.js +0 -61
- package/_internal/HeadingLevelProvider-ebdcb0c7.js.map +0 -1
- package/_internal/IconButton-f4df224c.js +0 -77
- package/_internal/IconButton-f4df224c.js.map +0 -1
- package/_internal/ImageCaption-8134a3aa.js +0 -75
- package/_internal/ImageCaption-8134a3aa.js.map +0 -1
- package/_internal/List-54237e0e.js +0 -793
- package/_internal/List-54237e0e.js.map +0 -1
- package/_internal/PopoverDialog-e0967e5f.js +0 -655
- package/_internal/PopoverDialog-e0967e5f.js.map +0 -1
- package/_internal/Portal-3f86608e.js +0 -45
- package/_internal/Portal-3f86608e.js.map +0 -1
- package/_internal/RawClickable-2c2b6a89.js +0 -52
- package/_internal/RawClickable-2c2b6a89.js.map +0 -1
- package/_internal/Slides-b7a67f32.js +0 -678
- package/_internal/Slides-b7a67f32.js.map +0 -1
- package/_internal/ThemeContext-3181f000.js +0 -14
- package/_internal/ThemeContext-3181f000.js.map +0 -1
- package/_internal/Thumbnail-b5dea0af.js +0 -313
- package/_internal/Thumbnail-b5dea0af.js.map +0 -1
- package/_internal/components/alert-dialog-b284b191.js +0 -162
- package/_internal/components/alert-dialog-b284b191.js.map +0 -1
- package/_internal/components/autocomplete-8d3f37ea.js +0 -261
- package/_internal/components/autocomplete-8d3f37ea.js.map +0 -1
- package/_internal/components/avatar-5fc70e00.js +0 -83
- package/_internal/components/avatar-5fc70e00.js.map +0 -1
- package/_internal/components/badge-8390e590.js +0 -81
- package/_internal/components/badge-8390e590.js.map +0 -1
- package/_internal/components/button-e3c7f2eb.js +0 -47
- package/_internal/components/button-e3c7f2eb.js.map +0 -1
- package/_internal/components/checkbox-d1ca9748.js +0 -140
- package/_internal/components/checkbox-d1ca9748.js.map +0 -1
- package/_internal/components/chip-e40c5521.js +0 -102
- package/_internal/components/chip-e40c5521.js.map +0 -1
- package/_internal/components/comment-block-a3cf7b9b.js +0 -138
- package/_internal/components/comment-block-a3cf7b9b.js.map +0 -1
- package/_internal/components/date-picker-6c1b14e4.js +0 -2
- package/_internal/components/date-picker-6c1b14e4.js.map +0 -1
- package/_internal/components/dialog-ebdb9500.js +0 -238
- package/_internal/components/dialog-ebdb9500.js.map +0 -1
- package/_internal/components/divider-116af6b9.js +0 -50
- package/_internal/components/divider-116af6b9.js.map +0 -1
- package/_internal/components/drag-handle-5215cd21.js +0 -51
- package/_internal/components/drag-handle-5215cd21.js.map +0 -1
- package/_internal/components/dropdown-0baed51b.js +0 -147
- package/_internal/components/dropdown-0baed51b.js.map +0 -1
- package/_internal/components/expansion-panel-5533a680.js +0 -167
- package/_internal/components/expansion-panel-5533a680.js.map +0 -1
- package/_internal/components/flag-8d4a7e72.js +0 -59
- package/_internal/components/flag-8d4a7e72.js.map +0 -1
- package/_internal/components/flex-box-55144e5f.js +0 -56
- package/_internal/components/flex-box-55144e5f.js.map +0 -1
- package/_internal/components/generic-block-ff0509ee.js +0 -124
- package/_internal/components/generic-block-ff0509ee.js.map +0 -1
- package/_internal/components/grid-6f1b5a41.js +0 -104
- package/_internal/components/grid-6f1b5a41.js.map +0 -1
- package/_internal/components/grid-column-f01df853.js +0 -59
- package/_internal/components/grid-column-f01df853.js.map +0 -1
- package/_internal/components/heading-89239843.js +0 -53
- package/_internal/components/heading-89239843.js.map +0 -1
- package/_internal/components/icon-b708cca4.js +0 -102
- package/_internal/components/icon-b708cca4.js.map +0 -1
- package/_internal/components/image-block-7938422d.js +0 -110
- package/_internal/components/image-block-7938422d.js.map +0 -1
- package/_internal/components/image-lightbox-58331704.js +0 -756
- package/_internal/components/image-lightbox-58331704.js.map +0 -1
- package/_internal/components/inline-list-e6f19a98.js +0 -74
- package/_internal/components/inline-list-e6f19a98.js.map +0 -1
- package/_internal/components/input-helper-64153099.js +0 -71
- package/_internal/components/input-helper-64153099.js.map +0 -1
- package/_internal/components/input-label-2feb0bb0.js +0 -59
- package/_internal/components/input-label-2feb0bb0.js.map +0 -1
- package/_internal/components/lightbox-570ad9e5.js +0 -155
- package/_internal/components/lightbox-570ad9e5.js.map +0 -1
- package/_internal/components/link-91f76477.js +0 -72
- package/_internal/components/link-91f76477.js.map +0 -1
- package/_internal/components/link-preview-fdd8d738.js +0 -117
- package/_internal/components/link-preview-fdd8d738.js.map +0 -1
- package/_internal/components/list-b08d8423.js +0 -71
- package/_internal/components/list-b08d8423.js.map +0 -1
- package/_internal/components/message-29cb9181.js +0 -96
- package/_internal/components/message-29cb9181.js.map +0 -1
- package/_internal/components/mosaic-cdb9f563.js +0 -95
- package/_internal/components/mosaic-cdb9f563.js.map +0 -1
- package/_internal/components/navigation-8b7d9bd8.js +0 -225
- package/_internal/components/navigation-8b7d9bd8.js.map +0 -1
- package/_internal/components/notification-a45fda96.js +0 -145
- package/_internal/components/notification-a45fda96.js.map +0 -1
- package/_internal/components/popover-65bfbc57.js +0 -3
- package/_internal/components/popover-65bfbc57.js.map +0 -1
- package/_internal/components/post-block-52e58dd5.js +0 -109
- package/_internal/components/post-block-52e58dd5.js.map +0 -1
- package/_internal/components/progress-f39c3fa2.js +0 -182
- package/_internal/components/progress-f39c3fa2.js.map +0 -1
- package/_internal/components/progress-tracker-512d7a08.js +0 -305
- package/_internal/components/progress-tracker-512d7a08.js.map +0 -1
- package/_internal/components/radio-button-559a4863.js +0 -149
- package/_internal/components/radio-button-559a4863.js.map +0 -1
- package/_internal/components/select-48d4fa8c.js +0 -454
- package/_internal/components/select-48d4fa8c.js.map +0 -1
- package/_internal/components/side-navigation-f9bc5b4e.js +0 -165
- package/_internal/components/side-navigation-f9bc5b4e.js.map +0 -1
- package/_internal/components/skeleton-c66516ee.js +0 -166
- package/_internal/components/skeleton-c66516ee.js.map +0 -1
- package/_internal/components/slider-efbfbc45.js +0 -311
- package/_internal/components/slider-efbfbc45.js.map +0 -1
- package/_internal/components/slideshow-dd312470.js +0 -151
- package/_internal/components/slideshow-dd312470.js.map +0 -1
- package/_internal/components/switch-769a2a04.js +0 -122
- package/_internal/components/switch-769a2a04.js.map +0 -1
- package/_internal/components/table-8617b1ba.js +0 -294
- package/_internal/components/table-8617b1ba.js.map +0 -1
- package/_internal/components/tabs-884c57b6.js +0 -298
- package/_internal/components/tabs-884c57b6.js.map +0 -1
- package/_internal/components/text-c7b1e079.js +0 -2
- package/_internal/components/text-c7b1e079.js.map +0 -1
- package/_internal/components/text-field-478acd86.js +0 -359
- package/_internal/components/text-field-478acd86.js.map +0 -1
- package/_internal/components/thumbnail-310a4c4b.js +0 -42
- package/_internal/components/thumbnail-310a4c4b.js.map +0 -1
- package/_internal/components/toolbar-a43533a2.js +0 -61
- package/_internal/components/toolbar-a43533a2.js.map +0 -1
- package/_internal/components/tooltip-2885ab2e.js +0 -327
- package/_internal/components/tooltip-2885ab2e.js.map +0 -1
- package/_internal/components/uploader-1e7f5bbb.js +0 -153
- package/_internal/components/uploader-1e7f5bbb.js.map +0 -1
- package/_internal/components/user-block-68a51ed0.js +0 -145
- package/_internal/components/user-block-68a51ed0.js.map +0 -1
- package/_internal/constants-b9e57936.js +0 -2155
- package/_internal/constants-b9e57936.js.map +0 -1
- package/_internal/constants-d0e3f49e.js +0 -24
- package/_internal/constants-d0e3f49e.js.map +0 -1
- package/_internal/context-9d1336a1.js +0 -19
- package/_internal/context-9d1336a1.js.map +0 -1
- package/_internal/forwardRef-15f62847.js +0 -70
- package/_internal/forwardRef-15f62847.js.map +0 -1
- package/_internal/getFocusableElements-230173a8.js +0 -13
- package/_internal/getFocusableElements-230173a8.js.map +0 -1
- package/_internal/index-9df37c0d.js +0 -436
- package/_internal/index-9df37c0d.js.map +0 -1
- package/_internal/index-a9c5cd69.js +0 -117
- package/_internal/index-a9c5cd69.js.map +0 -1
- package/_internal/isComponent-78df9309.js +0 -20
- package/_internal/isComponent-78df9309.js.map +0 -1
- package/_internal/isComponentType-e806b848.js +0 -9
- package/_internal/isComponentType-e806b848.js.map +0 -1
- package/_internal/mergeRefs-f0d7d6ea.js +0 -30
- package/_internal/mergeRefs-f0d7d6ea.js.map +0 -1
- package/_internal/partitionMulti-4daccdd5.js.map +0 -1
- package/_internal/state-db358714.js +0 -130
- package/_internal/state-db358714.js.map +0 -1
- package/_internal/useBooleanState-2a3d237c.js +0 -12
- package/_internal/useBooleanState-2a3d237c.js.map +0 -1
- package/_internal/useCallbackOnEscape-ea4d9eb4.js +0 -62
- package/_internal/useCallbackOnEscape-ea4d9eb4.js.map +0 -1
- package/_internal/useDisableBodyScroll-36bd7352.js +0 -219
- package/_internal/useDisableBodyScroll-36bd7352.js.map +0 -1
- package/_internal/useDisableStateProps-69e16b7c.js +0 -36
- package/_internal/useDisableStateProps-69e16b7c.js.map +0 -1
- package/_internal/useFocusTrap-c3c6378b.js +0 -112
- package/_internal/useFocusTrap-c3c6378b.js.map +0 -1
- package/_internal/useId-3a1facc0.js +0 -18
- package/_internal/useId-3a1facc0.js.map +0 -1
- package/_internal/useRovingTabIndex-7daf0f24.js +0 -77
- package/_internal/useRovingTabIndex-7daf0f24.js.map +0 -1
- package/_internal/useTransitionVisibility-321fdbfa.js +0 -50
- package/_internal/useTransitionVisibility-321fdbfa.js.map +0 -1
- package/_internal/wrapChildrenIconWithSpaces-c1faaae4.js +0 -20
- package/_internal/wrapChildrenIconWithSpaces-c1faaae4.js.map +0 -1
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { D as DOCUMENT } from './constants-d0e3f49e.js';
|
|
3
|
-
import { g as getFocusableElements } from './getFocusableElements-230173a8.js';
|
|
4
|
-
import { m as makeListenerTowerContext } from './useCallbackOnEscape-ea4d9eb4.js';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Get first and last elements focusable in an element.
|
|
8
|
-
*
|
|
9
|
-
* @param parentElement The element in which to search focusable elements.
|
|
10
|
-
* @return first and last focusable elements
|
|
11
|
-
*/
|
|
12
|
-
function getFirstAndLastFocusable(parentElement) {
|
|
13
|
-
const focusableElements = getFocusableElements(parentElement);
|
|
14
|
-
|
|
15
|
-
// First non disabled element.
|
|
16
|
-
const first = focusableElements[0];
|
|
17
|
-
// Last non disabled element.
|
|
18
|
-
const last = focusableElements[focusableElements.length - 1];
|
|
19
|
-
if (last && first) {
|
|
20
|
-
return {
|
|
21
|
-
first,
|
|
22
|
-
last
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
return {};
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
const FOCUS_TRAPS = makeListenerTowerContext();
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Trap 'Tab' focus switch inside the `focusZoneElement`.
|
|
32
|
-
*
|
|
33
|
-
* If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
|
|
34
|
-
* gets activated again.
|
|
35
|
-
*
|
|
36
|
-
* @param focusZoneElement The element in which to trap the focus.
|
|
37
|
-
* @param focusElement The element to focus when the focus trap is activated (otherwise the first focusable element
|
|
38
|
-
* will be focused).
|
|
39
|
-
*/
|
|
40
|
-
function useFocusTrap(focusZoneElement, focusElement) {
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
// Body element can be undefined in SSR context.
|
|
43
|
-
const rootElement = DOCUMENT?.body;
|
|
44
|
-
if (!rootElement || !focusZoneElement) {
|
|
45
|
-
return undefined;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// Use the shadow root as focusZoneElement when available
|
|
49
|
-
const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
|
|
50
|
-
|
|
51
|
-
// Trap 'Tab' key down focus switch into the focus zone.
|
|
52
|
-
const trapTabFocusInFocusZone = evt => {
|
|
53
|
-
const {
|
|
54
|
-
key
|
|
55
|
-
} = evt;
|
|
56
|
-
if (key !== 'Tab') {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
|
|
60
|
-
|
|
61
|
-
// Prevent focus switch if no focusable available.
|
|
62
|
-
if (!focusable.first) {
|
|
63
|
-
evt.preventDefault();
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : document.activeElement;
|
|
67
|
-
if (
|
|
68
|
-
// No previous focus
|
|
69
|
-
!activeElement ||
|
|
70
|
-
// Previous focus is at the end of the focus zone.
|
|
71
|
-
!evt.shiftKey && activeElement === focusable.last ||
|
|
72
|
-
// Previous focus is outside the focus zone
|
|
73
|
-
!focusZoneElementOrShadowRoot.contains(activeElement)) {
|
|
74
|
-
focusable.first.focus();
|
|
75
|
-
evt.preventDefault();
|
|
76
|
-
return;
|
|
77
|
-
}
|
|
78
|
-
if (
|
|
79
|
-
// Focus order reversed
|
|
80
|
-
evt.shiftKey &&
|
|
81
|
-
// Previous focus is at the start of the focus zone.
|
|
82
|
-
activeElement === focusable.first) {
|
|
83
|
-
focusable.last.focus();
|
|
84
|
-
evt.preventDefault();
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const focusTrap = {
|
|
88
|
-
enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
|
|
89
|
-
disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
// SETUP:
|
|
93
|
-
if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
|
|
94
|
-
// Focus the given element.
|
|
95
|
-
focusElement.focus({
|
|
96
|
-
preventScroll: true
|
|
97
|
-
});
|
|
98
|
-
} else {
|
|
99
|
-
// Focus the first focusable element in the zone.
|
|
100
|
-
getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({
|
|
101
|
-
preventScroll: true
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
FOCUS_TRAPS.register(focusTrap);
|
|
105
|
-
|
|
106
|
-
// TEARDOWN:
|
|
107
|
-
return () => FOCUS_TRAPS.unregister(focusTrap);
|
|
108
|
-
}, [focusElement, focusZoneElement]);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
export { getFirstAndLastFocusable as g, useFocusTrap as u };
|
|
112
|
-
//# sourceMappingURL=useFocusTrap-c3c6378b.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap-c3c6378b.js","sources":["../../src/utils/browser/focus/getFirstAndLastFocusable.ts","../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { getFocusableElements } from './getFocusableElements';\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nexport function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot) {\n const focusableElements = getFocusableElements(parentElement);\n\n // First non disabled element.\n const first = focusableElements[0];\n // Last non disabled element.\n const last = focusableElements[focusableElements.length - 1];\n\n if (last && first) {\n return { first, last };\n }\n return {};\n}\n","import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';\nimport { Falsy } from '@lumx/react/utils/type';\nimport { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';\n\nconst FOCUS_TRAPS = makeListenerTowerContext();\n\n/**\n * Trap 'Tab' focus switch inside the `focusZoneElement`.\n *\n * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one\n * gets activated again.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement The element to focus when the focus trap is activated (otherwise the first focusable element\n * will be focused).\n */\nexport function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement?: HTMLElement | null): void {\n useEffect(() => {\n // Body element can be undefined in SSR context.\n const rootElement = DOCUMENT?.body;\n\n if (!rootElement || !focusZoneElement) {\n return undefined;\n }\n\n // Use the shadow root as focusZoneElement when available\n const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;\n\n // Trap 'Tab' key down focus switch into the focus zone.\n const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {\n const { key } = evt;\n if (key !== 'Tab') {\n return;\n }\n\n const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);\n\n // Prevent focus switch if no focusable available.\n if (!focusable.first) {\n evt.preventDefault();\n return;\n }\n\n const activeElement = focusZoneElement.shadowRoot\n ? focusZoneElement.shadowRoot.activeElement\n : document.activeElement;\n\n if (\n // No previous focus\n !activeElement ||\n // Previous focus is at the end of the focus zone.\n (!evt.shiftKey && activeElement === focusable.last) ||\n // Previous focus is outside the focus zone\n !focusZoneElementOrShadowRoot.contains(activeElement)\n ) {\n focusable.first.focus();\n evt.preventDefault();\n return;\n }\n\n if (\n // Focus order reversed\n evt.shiftKey &&\n // Previous focus is at the start of the focus zone.\n activeElement === focusable.first\n ) {\n focusable.last.focus();\n evt.preventDefault();\n }\n };\n\n const focusTrap: Listener = {\n enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),\n disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone),\n };\n\n // SETUP:\n if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {\n // Focus the given element.\n focusElement.focus({ preventScroll: true });\n } else {\n // Focus the first focusable element in the zone.\n getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({ preventScroll: true });\n }\n FOCUS_TRAPS.register(focusTrap);\n\n // TEARDOWN:\n return () => FOCUS_TRAPS.unregister(focusTrap);\n }, [focusElement, focusZoneElement]);\n}\n"],"names":["getFirstAndLastFocusable","parentElement","focusableElements","getFocusableElements","first","last","length","FOCUS_TRAPS","makeListenerTowerContext","useFocusTrap","focusZoneElement","focusElement","useEffect","rootElement","DOCUMENT","body","undefined","focusZoneElementOrShadowRoot","shadowRoot","trapTabFocusInFocusZone","evt","key","focusable","preventDefault","activeElement","document","shiftKey","contains","focus","focusTrap","enable","addEventListener","disable","removeEventListener","preventScroll","register","unregister"],"mappings":"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"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
|
|
3
|
-
let i = 0;
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Generate a unique id (for use in a11y or other id based DOM linking).
|
|
7
|
-
*
|
|
8
|
-
* (Tries to emulate React 18 useId hook, to remove once we upgrade React)
|
|
9
|
-
*/
|
|
10
|
-
function useId() {
|
|
11
|
-
return React__default.useMemo(() => {
|
|
12
|
-
i += 1;
|
|
13
|
-
return `:lumx${i}:`;
|
|
14
|
-
}, []);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export { useId as u };
|
|
18
|
-
//# sourceMappingURL=useId-3a1facc0.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useId-3a1facc0.js","sources":["../../src/hooks/useId.ts"],"sourcesContent":["import React from 'react';\n\nlet i = 0;\n\n/**\n * Generate a unique id (for use in a11y or other id based DOM linking).\n *\n * (Tries to emulate React 18 useId hook, to remove once we upgrade React)\n */\nexport function useId() {\n return React.useMemo(() => {\n i += 1;\n return `:lumx${i}:`;\n }, []);\n}\n"],"names":["i","useId","React","useMemo"],"mappings":";;AAEA,IAAIA,CAAC,GAAG,CAAC,CAAA;;AAET;AACA;AACA;AACA;AACA;AACO,SAASC,KAAKA,GAAG;AACpB,EAAA,OAAOC,cAAK,CAACC,OAAO,CAAC,MAAM;AACvBH,IAAAA,CAAC,IAAI,CAAC,CAAA;IACN,OAAO,CAAA,KAAA,EAAQA,CAAC,CAAG,CAAA,CAAA,CAAA;GACtB,EAAE,EAAE,CAAC,CAAA;AACV;;;;"}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
const useRovingTabIndex = ({
|
|
4
|
-
parentRef,
|
|
5
|
-
elementSelector,
|
|
6
|
-
keepTabIndex,
|
|
7
|
-
onElementFocus,
|
|
8
|
-
extraDependencies = []
|
|
9
|
-
}) => {
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
const parent = parentRef?.current;
|
|
12
|
-
if (!parent) {
|
|
13
|
-
return undefined;
|
|
14
|
-
}
|
|
15
|
-
const elements = parent.querySelectorAll(elementSelector);
|
|
16
|
-
const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex="0"]`);
|
|
17
|
-
const handleKeyDown = index => evt => {
|
|
18
|
-
let newTabFocus = index;
|
|
19
|
-
if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
if (evt.key === 'ArrowRight') {
|
|
23
|
-
// Move right
|
|
24
|
-
newTabFocus += 1;
|
|
25
|
-
// If we're at the end, go to the start
|
|
26
|
-
if (newTabFocus >= elements.length) {
|
|
27
|
-
newTabFocus = 0;
|
|
28
|
-
}
|
|
29
|
-
} else if (evt.key === 'ArrowLeft') {
|
|
30
|
-
// Move left
|
|
31
|
-
newTabFocus -= 1;
|
|
32
|
-
if (newTabFocus < 0) {
|
|
33
|
-
// If we're at the start, move to the end
|
|
34
|
-
newTabFocus = elements.length - 1;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
const newElement = elements[newTabFocus];
|
|
38
|
-
newElement?.focus();
|
|
39
|
-
|
|
40
|
-
// When an element is focused using roving tab index, trigger the onElementFocus callback
|
|
41
|
-
if (newElement && onElementFocus) {
|
|
42
|
-
onElementFocus(newElement);
|
|
43
|
-
}
|
|
44
|
-
if (keepTabIndex) {
|
|
45
|
-
evt.currentTarget.setAttribute('tabindex', '-1');
|
|
46
|
-
newElement?.setAttribute('tabindex', '0');
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
if (elements?.length > 0) {
|
|
50
|
-
elements.forEach((el, key) => {
|
|
51
|
-
// if no element has tabindex set to 0, set the first element as focusable
|
|
52
|
-
if (!initialFocusableElement && key === 0) {
|
|
53
|
-
el.setAttribute('tabindex', '0');
|
|
54
|
-
// set all other to -1
|
|
55
|
-
} else if (initialFocusableElement !== el) {
|
|
56
|
-
el.setAttribute('tabindex', '-1');
|
|
57
|
-
}
|
|
58
|
-
// add event listener
|
|
59
|
-
el.addEventListener('keydown', handleKeyDown(key));
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
// Cleanup listeners
|
|
64
|
-
return () => {
|
|
65
|
-
if (elements?.length > 0) {
|
|
66
|
-
elements.forEach((el, key) => {
|
|
67
|
-
el.removeEventListener('keydown', handleKeyDown(key));
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
},
|
|
72
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
73
|
-
[parentRef, ...extraDependencies]);
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export { useRovingTabIndex as u };
|
|
77
|
-
//# sourceMappingURL=useRovingTabIndex-7daf0f24.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useRovingTabIndex-7daf0f24.js","sources":["../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n parentRef: RefObject<HTMLElement>;\n elementSelector: string;\n keepTabIndex?: boolean;\n /** Action to trigger when an element is focused using roving tab index */\n onElementFocus?: (element: HTMLElement) => void;\n /** List of values to be used as extra dependencies of the useEffect */\n extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n parentRef,\n elementSelector,\n keepTabIndex,\n onElementFocus,\n extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n useEffect(\n () => {\n const parent = parentRef?.current;\n if (!parent) {\n return undefined;\n }\n\n const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n let newTabFocus = index;\n if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n return;\n }\n\n if (evt.key === 'ArrowRight') {\n // Move right\n newTabFocus += 1;\n // If we're at the end, go to the start\n if (newTabFocus >= elements.length) {\n newTabFocus = 0;\n }\n } else if (evt.key === 'ArrowLeft') {\n // Move left\n newTabFocus -= 1;\n if (newTabFocus < 0) {\n // If we're at the start, move to the end\n newTabFocus = elements.length - 1;\n }\n }\n const newElement = elements[newTabFocus];\n newElement?.focus();\n\n // When an element is focused using roving tab index, trigger the onElementFocus callback\n if (newElement && onElementFocus) {\n onElementFocus(newElement);\n }\n\n if (keepTabIndex) {\n (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n newElement?.setAttribute('tabindex', '0');\n }\n };\n\n if (elements?.length > 0) {\n elements.forEach((el, key) => {\n // if no element has tabindex set to 0, set the first element as focusable\n if (!initialFocusableElement && key === 0) {\n el.setAttribute('tabindex', '0');\n // set all other to -1\n } else if (initialFocusableElement !== el) {\n el.setAttribute('tabindex', '-1');\n }\n // add event listener\n el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n });\n }\n\n // Cleanup listeners\n return () => {\n if (elements?.length > 0) {\n elements.forEach((el, key) => {\n el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n });\n }\n };\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n [parentRef, ...extraDependencies],\n );\n};\n"],"names":["useRovingTabIndex","parentRef","elementSelector","keepTabIndex","onElementFocus","extraDependencies","useEffect","parent","current","undefined","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","index","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":"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"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { useState, useRef, useEffect } from 'react';
|
|
2
|
-
import { W as WINDOW } from './constants-d0e3f49e.js';
|
|
3
|
-
|
|
4
|
-
/** Check if user prefers reduced motion */
|
|
5
|
-
function isReducedMotion() {
|
|
6
|
-
return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Returns true if the component is visible tracking the opacity transition.
|
|
11
|
-
*
|
|
12
|
-
* @param ref Element on which to listen the transition event.
|
|
13
|
-
* @param isComponentVisible Whether the component intends to be visible or not.
|
|
14
|
-
* @param onVisibilityChange Callback called when the visibility changes.
|
|
15
|
-
* @return true if the component should be rendered
|
|
16
|
-
*/
|
|
17
|
-
const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityChange) => {
|
|
18
|
-
const [isVisible, setVisible] = useState(isComponentVisible);
|
|
19
|
-
const previousVisibility = useRef(isVisible);
|
|
20
|
-
|
|
21
|
-
// On component visibility change.
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (isComponentVisible) {
|
|
24
|
-
setVisible(true);
|
|
25
|
-
return undefined;
|
|
26
|
-
}
|
|
27
|
-
const {
|
|
28
|
-
current: element
|
|
29
|
-
} = ref;
|
|
30
|
-
|
|
31
|
-
// Transition event is not supported or the user prefers reduced motion.
|
|
32
|
-
// => Skip and set visibility to false directly.
|
|
33
|
-
if (!element || !window.TransitionEvent || isReducedMotion()) {
|
|
34
|
-
setVisible(false);
|
|
35
|
-
return undefined;
|
|
36
|
-
}
|
|
37
|
-
const timer = setTimeout(() => setVisible(false), timeout);
|
|
38
|
-
return () => clearTimeout(timer);
|
|
39
|
-
}, [isComponentVisible, ref, timeout]);
|
|
40
|
-
useEffect(() => {
|
|
41
|
-
if (onVisibilityChange && previousVisibility.current !== isVisible) {
|
|
42
|
-
onVisibilityChange(isVisible);
|
|
43
|
-
previousVisibility.current = isVisible;
|
|
44
|
-
}
|
|
45
|
-
}, [isVisible, onVisibilityChange]);
|
|
46
|
-
return isVisible || isComponentVisible;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export { isReducedMotion as i, useTransitionVisibility as u };
|
|
50
|
-
//# sourceMappingURL=useTransitionVisibility-321fdbfa.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTransitionVisibility-321fdbfa.js","sources":["../../src/utils/browser/isReducedMotion.ts","../../src/hooks/useTransitionVisibility.ts"],"sourcesContent":["import { WINDOW } from '@lumx/react/constants';\n\n/** Check if user prefers reduced motion */\nexport function isReducedMotion() {\n return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n}\n","import { RefObject, useEffect, useRef, useState } from 'react';\nimport { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';\n\n/**\n * Returns true if the component is visible tracking the opacity transition.\n *\n * @param ref Element on which to listen the transition event.\n * @param isComponentVisible Whether the component intends to be visible or not.\n * @param onVisibilityChange Callback called when the visibility changes.\n * @return true if the component should be rendered\n */\nexport const useTransitionVisibility = (\n ref: RefObject<HTMLElement>,\n isComponentVisible: boolean,\n timeout: number,\n onVisibilityChange?: (isVisible: boolean) => void,\n) => {\n const [isVisible, setVisible] = useState(isComponentVisible);\n const previousVisibility = useRef(isVisible);\n\n // On component visibility change.\n useEffect(() => {\n if (isComponentVisible) {\n setVisible(true);\n return undefined;\n }\n const { current: element } = ref;\n\n // Transition event is not supported or the user prefers reduced motion.\n // => Skip and set visibility to false directly.\n if (!element || !window.TransitionEvent || isReducedMotion()) {\n setVisible(false);\n return undefined;\n }\n\n const timer = setTimeout(() => setVisible(false), timeout);\n return () => clearTimeout(timer);\n }, [isComponentVisible, ref, timeout]);\n\n useEffect(() => {\n if (onVisibilityChange && previousVisibility.current !== isVisible) {\n onVisibilityChange(isVisible);\n previousVisibility.current = isVisible;\n }\n }, [isVisible, onVisibilityChange]);\n\n return isVisible || isComponentVisible;\n};\n"],"names":["isReducedMotion","WINDOW","matchMedia","matches","useTransitionVisibility","ref","isComponentVisible","timeout","onVisibilityChange","isVisible","setVisible","useState","previousVisibility","useRef","useEffect","undefined","current","element","window","TransitionEvent","timer","setTimeout","clearTimeout"],"mappings":";;;AAEA;AACO,SAASA,eAAeA,GAAG;AAC9B,EAAA,OAAOC,MAAM,EAAEC,UAAU,GAAG,kCAAkC,CAAC,CAACC,OAAO,CAAA;AAC3E;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGA,CACnCC,GAA2B,EAC3BC,kBAA2B,EAC3BC,OAAe,EACfC,kBAAiD,KAChD;EACD,MAAM,CAACC,SAAS,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAACL,kBAAkB,CAAC,CAAA;AAC5D,EAAA,MAAMM,kBAAkB,GAAGC,MAAM,CAACJ,SAAS,CAAC,CAAA;;AAE5C;AACAK,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIR,kBAAkB,EAAE;MACpBI,UAAU,CAAC,IAAI,CAAC,CAAA;AAChB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IACA,MAAM;AAAEC,MAAAA,OAAO,EAAEC,OAAAA;AAAQ,KAAC,GAAGZ,GAAG,CAAA;;AAEhC;AACA;IACA,IAAI,CAACY,OAAO,IAAI,CAACC,MAAM,CAACC,eAAe,IAAInB,eAAe,EAAE,EAAE;MAC1DU,UAAU,CAAC,KAAK,CAAC,CAAA;AACjB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IAEA,MAAMK,KAAK,GAAGC,UAAU,CAAC,MAAMX,UAAU,CAAC,KAAK,CAAC,EAAEH,OAAO,CAAC,CAAA;AAC1D,IAAA,OAAO,MAAMe,YAAY,CAACF,KAAK,CAAC,CAAA;GACnC,EAAE,CAACd,kBAAkB,EAAED,GAAG,EAAEE,OAAO,CAAC,CAAC,CAAA;AAEtCO,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIN,kBAAkB,IAAII,kBAAkB,CAACI,OAAO,KAAKP,SAAS,EAAE;MAChED,kBAAkB,CAACC,SAAS,CAAC,CAAA;MAC7BG,kBAAkB,CAACI,OAAO,GAAGP,SAAS,CAAA;AAC1C,KAAA;AACJ,GAAC,EAAE,CAACA,SAAS,EAAED,kBAAkB,CAAC,CAAC,CAAA;EAEnC,OAAOC,SAAS,IAAIH,kBAAkB,CAAA;AAC1C;;;;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React__default, { Children } from 'react';
|
|
2
|
-
import { i as isComponentType } from './isComponentType-e806b848.js';
|
|
3
|
-
import { Icon } from './components/icon-b708cca4.js';
|
|
4
|
-
|
|
5
|
-
/** Force wrap spaces around icons to make sure they are never stuck against text. */
|
|
6
|
-
function wrapChildrenIconWithSpaces(children) {
|
|
7
|
-
if (children === null || children === undefined) return undefined;
|
|
8
|
-
return Children.toArray(children).flatMap(child => {
|
|
9
|
-
if (isComponentType(Icon)(child)) {
|
|
10
|
-
return [' ', child, ' '];
|
|
11
|
-
}
|
|
12
|
-
if (/*#__PURE__*/React__default.isValidElement(child) && child.props && typeof child.props === 'object' && 'children' in child.props) {
|
|
13
|
-
return /*#__PURE__*/React__default.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
|
|
14
|
-
}
|
|
15
|
-
return child;
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export { wrapChildrenIconWithSpaces as w };
|
|
20
|
-
//# sourceMappingURL=wrapChildrenIconWithSpaces-c1faaae4.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"wrapChildrenIconWithSpaces-c1faaae4.js","sources":["../../src/utils/react/wrapChildrenIconWithSpaces.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport { isComponentType } from '@lumx/react/utils/type';\nimport { Icon } from '@lumx/react';\n\n/** Force wrap spaces around icons to make sure they are never stuck against text. */\nexport function wrapChildrenIconWithSpaces(children: React.ReactNode): React.ReactNode {\n if (children === null || children === undefined) return undefined;\n return Children.toArray(children).flatMap((child) => {\n if (isComponentType(Icon)(child)) {\n return [' ', child, ' '];\n }\n if (\n React.isValidElement(child) &&\n child.props &&\n typeof child.props === 'object' &&\n 'children' in child.props\n ) {\n return React.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));\n }\n return child;\n });\n}\n"],"names":["wrapChildrenIconWithSpaces","children","undefined","Children","toArray","flatMap","child","isComponentType","Icon","React","isValidElement","props","cloneElement"],"mappings":";;;;AAIA;AACO,SAASA,0BAA0BA,CAACC,QAAyB,EAAmB;EACnF,IAAIA,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAKC,SAAS,EAAE,OAAOA,SAAS,CAAA;EACjE,OAAOC,QAAQ,CAACC,OAAO,CAACH,QAAQ,CAAC,CAACI,OAAO,CAAEC,KAAK,IAAK;AACjD,IAAA,IAAIC,eAAe,CAACC,IAAI,CAAC,CAACF,KAAK,CAAC,EAAE;AAC9B,MAAA,OAAO,CAAC,GAAG,EAAEA,KAAK,EAAE,GAAG,CAAC,CAAA;AAC5B,KAAA;IACA,iBACIG,cAAK,CAACC,cAAc,CAACJ,KAAK,CAAC,IAC3BA,KAAK,CAACK,KAAK,IACX,OAAOL,KAAK,CAACK,KAAK,KAAK,QAAQ,IAC/B,UAAU,IAAIL,KAAK,CAACK,KAAK,EAC3B;AACE,MAAA,oBAAOF,cAAK,CAACG,YAAY,CAACN,KAAK,EAAEJ,SAAS,EAAEF,0BAA0B,CAACM,KAAK,CAACK,KAAK,CAACV,QAAQ,CAAC,CAAC,CAAA;AACjG,KAAA;AACA,IAAA,OAAOK,KAAK,CAAA;AAChB,GAAC,CAAC,CAAA;AACN;;;;"}
|