@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21
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,95 +0,0 @@
|
|
|
1
|
-
import { useEffect, useContext, useMemo, useRef, createContext } from 'react';
|
|
2
|
-
import isEmpty from 'lodash/isEmpty';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
const EVENT_TYPES = ['mousedown', 'touchstart'];
|
|
6
|
-
function isClickAway(targets, refs) {
|
|
7
|
-
// The targets elements are not contained in any of the listed element references.
|
|
8
|
-
return !refs.some(ref => targets.some(target => ref?.current?.contains(target)));
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* Listen to clicks away from the given elements and callback the passed in function.
|
|
12
|
-
*
|
|
13
|
-
* Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
|
|
14
|
-
*/
|
|
15
|
-
function useClickAway({
|
|
16
|
-
callback,
|
|
17
|
-
childrenRefs
|
|
18
|
-
}) {
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const {
|
|
21
|
-
current: currentRefs
|
|
22
|
-
} = childrenRefs;
|
|
23
|
-
if (!callback || !currentRefs || isEmpty(currentRefs)) {
|
|
24
|
-
return undefined;
|
|
25
|
-
}
|
|
26
|
-
const listener = evt => {
|
|
27
|
-
const targets = [evt.composedPath?.()[0], evt.target];
|
|
28
|
-
if (isClickAway(targets, currentRefs)) {
|
|
29
|
-
callback(evt);
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
|
|
33
|
-
return () => {
|
|
34
|
-
EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
|
|
35
|
-
};
|
|
36
|
-
}, [callback, childrenRefs]);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const ClickAwayAncestorContext = /*#__PURE__*/createContext(null);
|
|
40
|
-
/**
|
|
41
|
-
* Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
|
|
42
|
-
* we take into account both the DOM tree and the React tree to detect click away.
|
|
43
|
-
*
|
|
44
|
-
* @return the react component.
|
|
45
|
-
*/
|
|
46
|
-
const ClickAwayProvider = ({
|
|
47
|
-
children,
|
|
48
|
-
callback,
|
|
49
|
-
childrenRefs,
|
|
50
|
-
parentRef
|
|
51
|
-
}) => {
|
|
52
|
-
const parentContext = useContext(ClickAwayAncestorContext);
|
|
53
|
-
const currentContext = useMemo(() => {
|
|
54
|
-
const context = {
|
|
55
|
-
childrenRefs: [],
|
|
56
|
-
/**
|
|
57
|
-
* Add element refs to the current context and propagate to the parent context.
|
|
58
|
-
*/
|
|
59
|
-
addRefs(...newChildrenRefs) {
|
|
60
|
-
// Add element refs that should be considered as inside the click away context.
|
|
61
|
-
context.childrenRefs.push(...newChildrenRefs);
|
|
62
|
-
if (parentContext) {
|
|
63
|
-
// Also add then to the parent context
|
|
64
|
-
parentContext.addRefs(...newChildrenRefs);
|
|
65
|
-
if (parentRef) {
|
|
66
|
-
// The parent element is also considered as inside the parent click away context but not inside the current context
|
|
67
|
-
parentContext.addRefs(parentRef);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
return context;
|
|
73
|
-
}, [parentContext, parentRef]);
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
const {
|
|
76
|
-
current: currentRefs
|
|
77
|
-
} = childrenRefs;
|
|
78
|
-
if (!currentRefs) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
currentContext.addRefs(...currentRefs);
|
|
82
|
-
}, [currentContext, childrenRefs]);
|
|
83
|
-
useClickAway({
|
|
84
|
-
callback,
|
|
85
|
-
childrenRefs: useRef(currentContext.childrenRefs)
|
|
86
|
-
});
|
|
87
|
-
return /*#__PURE__*/jsx(ClickAwayAncestorContext.Provider, {
|
|
88
|
-
value: currentContext,
|
|
89
|
-
children: children
|
|
90
|
-
});
|
|
91
|
-
};
|
|
92
|
-
ClickAwayProvider.displayName = 'ClickAwayProvider';
|
|
93
|
-
|
|
94
|
-
export { ClickAwayProvider as C };
|
|
95
|
-
//# sourceMappingURL=ClickAwayProvider-7093ba23.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ClickAwayProvider-7093ba23.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n // The targets elements are not contained in any of the listed element references.\n return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));\n}\n\nexport interface ClickAwayParameters {\n /**\n * A callback function to call when the user clicks away from the elements.\n */\n callback: EventListener | Falsy;\n /**\n * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n */\n childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n useEffect(() => {\n const { current: currentRefs } = childrenRefs;\n if (!callback || !currentRefs || isEmpty(currentRefs)) {\n return undefined;\n }\n const listener: EventListener = (evt) => {\n const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n if (isClickAway(targets, currentRefs)) {\n callback(evt);\n }\n };\n\n EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n return () => {\n EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n };\n }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n childrenRefs: Array<RefObject<HTMLElement>>;\n addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n /**\n * (Optional) Element that should be considered as part of the parent\n */\n parentRef?: RefObject<HTMLElement>;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n children,\n callback,\n childrenRefs,\n parentRef,\n}) => {\n const parentContext = useContext(ClickAwayAncestorContext);\n const currentContext = useMemo(() => {\n const context: ContextValue = {\n childrenRefs: [],\n /**\n * Add element refs to the current context and propagate to the parent context.\n */\n addRefs(...newChildrenRefs) {\n // Add element refs that should be considered as inside the click away context.\n context.childrenRefs.push(...newChildrenRefs);\n\n if (parentContext) {\n // Also add then to the parent context\n parentContext.addRefs(...newChildrenRefs);\n if (parentRef) {\n // The parent element is also considered as inside the parent click away context but not inside the current context\n parentContext.addRefs(parentRef);\n }\n }\n },\n };\n return context;\n }, [parentContext, parentRef]);\n\n useEffect(() => {\n const { current: currentRefs } = childrenRefs;\n if (!currentRefs) {\n return;\n }\n currentContext.addRefs(...currentRefs);\n }, [currentContext, childrenRefs]);\n\n useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n"],"names":["EVENT_TYPES","isClickAway","targets","refs","some","ref","target","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","composedPath","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","_jsx","Provider","value","displayName"],"mappings":"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"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React__default, { useContext } from 'react';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
const DisabledStateContext = /*#__PURE__*/React__default.createContext({
|
|
5
|
-
state: null
|
|
6
|
-
});
|
|
7
|
-
/**
|
|
8
|
-
* Disabled state provider.
|
|
9
|
-
* All nested LumX Design System components inherit this disabled state.
|
|
10
|
-
*/
|
|
11
|
-
function DisabledStateProvider({
|
|
12
|
-
children,
|
|
13
|
-
...value
|
|
14
|
-
}) {
|
|
15
|
-
return /*#__PURE__*/jsx(DisabledStateContext.Provider, {
|
|
16
|
-
value: value,
|
|
17
|
-
children: children
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Get DisabledState context value
|
|
23
|
-
*/
|
|
24
|
-
function useDisabledStateContext() {
|
|
25
|
-
return useContext(DisabledStateContext);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export { DisabledStateProvider as D, useDisabledStateContext as u };
|
|
29
|
-
//# sourceMappingURL=DisabledStateContext-ea04260d.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DisabledStateContext-ea04260d.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\n/** Disable state */\ntype DisabledStateContextValue =\n | {\n state: 'disabled';\n }\n | { state: undefined | null };\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n return useContext(DisabledStateContext);\n}\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext"],"mappings":";;;AASO,MAAMA,oBAAoB,gBAAGC,cAAK,CAACC,aAAa,CAA4B;AAAEC,EAAAA,KAAK,EAAE,IAAA;AAAK,CAAC,CAAC,CAAA;AAMnG;AACA;AACA;AACA;AACO,SAASC,qBAAqBA,CAAC;EAAEC,QAAQ;EAAE,GAAGC,KAAAA;AAAkC,CAAC,EAAE;AACtF,EAAA,oBAAOC,GAAA,CAACP,oBAAoB,CAACQ,QAAQ,EAAA;AAACF,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAgC,CAAC,CAAA;AAClG,CAAA;;AAEA;AACA;AACA;AACO,SAASI,uBAAuBA,GAA8B;EACjE,OAAOC,UAAU,CAACV,oBAAoB,CAAC,CAAA;AAC3C;;;;"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { Typography } from '@lumx/core/js/constants';
|
|
2
|
-
import React__default, { createContext } from 'react';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
/** The maximum authorized heading level. */
|
|
6
|
-
const MAX_HEADING_LEVEL = 6;
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Typography to use by default depending on the heading level.
|
|
10
|
-
*/
|
|
11
|
-
const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
|
|
12
|
-
h1: Typography.display1,
|
|
13
|
-
h2: Typography.headline,
|
|
14
|
-
h3: Typography.title,
|
|
15
|
-
h4: Typography.subtitle2,
|
|
16
|
-
h5: Typography.subtitle1,
|
|
17
|
-
h6: Typography.body2
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
const defaultContext = {
|
|
21
|
-
level: 1,
|
|
22
|
-
headingElement: 'h1'
|
|
23
|
-
};
|
|
24
|
-
const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
|
|
25
|
-
|
|
26
|
-
const useHeadingLevel = () => {
|
|
27
|
-
const {
|
|
28
|
-
level = 1,
|
|
29
|
-
headingElement = 'h1'
|
|
30
|
-
} = React__default.useContext(HeadingLevelContext);
|
|
31
|
-
return {
|
|
32
|
-
level,
|
|
33
|
-
headingElement
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Provide a new heading level context.
|
|
39
|
-
*/
|
|
40
|
-
const HeadingLevelProvider = ({
|
|
41
|
-
children,
|
|
42
|
-
level
|
|
43
|
-
}) => {
|
|
44
|
-
const {
|
|
45
|
-
level: contextLevel
|
|
46
|
-
} = useHeadingLevel();
|
|
47
|
-
const incrementedLevel = level || contextLevel + 1;
|
|
48
|
-
/** Don't allow a level beyond the maximum level. */
|
|
49
|
-
const nextLevel = incrementedLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : incrementedLevel;
|
|
50
|
-
const headingElement = `h${nextLevel}`;
|
|
51
|
-
return /*#__PURE__*/jsx(HeadingLevelContext.Provider, {
|
|
52
|
-
value: {
|
|
53
|
-
level: nextLevel,
|
|
54
|
-
headingElement
|
|
55
|
-
},
|
|
56
|
-
children: children
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export { DEFAULT_TYPOGRAPHY_BY_LEVEL as D, HeadingLevelProvider as H, useHeadingLevel as u };
|
|
61
|
-
//# sourceMappingURL=HeadingLevelProvider-ebdcb0c7.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HeadingLevelProvider-ebdcb0c7.js","sources":["../../src/components/heading/constants.ts","../../src/components/heading/context.tsx","../../src/components/heading/useHeadingLevel.tsx","../../src/components/heading/HeadingLevelProvider.tsx"],"sourcesContent":["import { Typography } from '@lumx/core/js/constants';\n\n/** The maximum authorized heading level. */\nexport const MAX_HEADING_LEVEL = 6;\n\n/**\n * Typography to use by default depending on the heading level.\n */\nexport const DEFAULT_TYPOGRAPHY_BY_LEVEL = {\n h1: Typography.display1,\n h2: Typography.headline,\n h3: Typography.title,\n h4: Typography.subtitle2,\n h5: Typography.subtitle1,\n h6: Typography.body2,\n};\n","import { HeadingElement } from '@lumx/react/utils/type';\nimport { createContext } from 'react';\n\ninterface HeadingLevelContext {\n /** The current level */\n level: number;\n /** The heading element matching the current level */\n headingElement: HeadingElement;\n}\n\nconst defaultContext: HeadingLevelContext = { level: 1, headingElement: 'h1' };\n\nexport const HeadingLevelContext = createContext<HeadingLevelContext>(defaultContext);\n","import React from 'react';\nimport { HeadingLevelContext } from './context';\n\nexport const useHeadingLevel = () => {\n const { level = 1, headingElement = 'h1' } = React.useContext(HeadingLevelContext);\n\n return { level, headingElement };\n};\n","import { HeadingElement } from '@lumx/react/utils/type';\nimport { ReactNode } from 'react';\nimport { MAX_HEADING_LEVEL } from './constants';\nimport { HeadingLevelContext } from './context';\nimport { useHeadingLevel } from './useHeadingLevel';\n\nexport interface HeadingLevelProviderProps {\n /** The heading level to start at. If left undefined, the parent context will be used, if any. */\n level?: number;\n /** The children to display */\n children: ReactNode;\n}\n\n/**\n * Provide a new heading level context.\n */\nexport const HeadingLevelProvider: React.FC<HeadingLevelProviderProps> = ({ children, level }) => {\n const { level: contextLevel } = useHeadingLevel();\n\n const incrementedLevel = level || contextLevel + 1;\n /** Don't allow a level beyond the maximum level. */\n const nextLevel = incrementedLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : incrementedLevel;\n const headingElement = `h${nextLevel}` as HeadingElement;\n\n return (\n <HeadingLevelContext.Provider value={{ level: nextLevel, headingElement }}>\n {children}\n </HeadingLevelContext.Provider>\n );\n};\n"],"names":["MAX_HEADING_LEVEL","DEFAULT_TYPOGRAPHY_BY_LEVEL","h1","Typography","display1","h2","headline","h3","title","h4","subtitle2","h5","subtitle1","h6","body2","defaultContext","level","headingElement","HeadingLevelContext","createContext","useHeadingLevel","React","useContext","HeadingLevelProvider","children","contextLevel","incrementedLevel","nextLevel","_jsx","Provider","value"],"mappings":";;;;AAEA;AACO,MAAMA,iBAAiB,GAAG,CAAC,CAAA;;AAElC;AACA;AACA;AACO,MAAMC,2BAA2B,GAAG;EACvCC,EAAE,EAAEC,UAAU,CAACC,QAAQ;EACvBC,EAAE,EAAEF,UAAU,CAACG,QAAQ;EACvBC,EAAE,EAAEJ,UAAU,CAACK,KAAK;EACpBC,EAAE,EAAEN,UAAU,CAACO,SAAS;EACxBC,EAAE,EAAER,UAAU,CAACS,SAAS;EACxBC,EAAE,EAAEV,UAAU,CAACW,KAAAA;AACnB;;ACLA,MAAMC,cAAmC,GAAG;AAAEC,EAAAA,KAAK,EAAE,CAAC;AAAEC,EAAAA,cAAc,EAAE,IAAA;AAAK,CAAC,CAAA;AAEvE,MAAMC,mBAAmB,gBAAGC,aAAa,CAAsBJ,cAAc,CAAC;;ACTxEK,MAAAA,eAAe,GAAGA,MAAM;EACjC,MAAM;AAAEJ,IAAAA,KAAK,GAAG,CAAC;AAAEC,IAAAA,cAAc,GAAG,IAAA;AAAK,GAAC,GAAGI,cAAK,CAACC,UAAU,CAACJ,mBAAmB,CAAC,CAAA;EAElF,OAAO;IAAEF,KAAK;AAAEC,IAAAA,cAAAA;GAAgB,CAAA;AACpC;;ACMA;AACA;AACA;AACO,MAAMM,oBAAyD,GAAGA,CAAC;EAAEC,QAAQ;AAAER,EAAAA,KAAAA;AAAM,CAAC,KAAK;EAC9F,MAAM;AAAEA,IAAAA,KAAK,EAAES,YAAAA;GAAc,GAAGL,eAAe,EAAE,CAAA;AAEjD,EAAA,MAAMM,gBAAgB,GAAGV,KAAK,IAAIS,YAAY,GAAG,CAAC,CAAA;AAClD;EACA,MAAME,SAAS,GAAGD,gBAAgB,GAAG1B,iBAAiB,GAAGA,iBAAiB,GAAG0B,gBAAgB,CAAA;AAC7F,EAAA,MAAMT,cAAc,GAAG,CAAIU,CAAAA,EAAAA,SAAS,CAAoB,CAAA,CAAA;AAExD,EAAA,oBACIC,GAAA,CAACV,mBAAmB,CAACW,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEd,MAAAA,KAAK,EAAEW,SAAS;AAAEV,MAAAA,cAAAA;KAAiB;AAAAO,IAAAA,QAAA,EACrEA,QAAAA;AAAQ,GACiB,CAAC,CAAA;AAEvC;;;;"}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { B as ButtonRoot } from './ButtonRoot-823f3e9c.js';
|
|
2
|
-
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
3
|
-
import { u as useTheme, T as ThemeProvider } from './ThemeContext-3181f000.js';
|
|
4
|
-
import { f as forwardRef } from './forwardRef-15f62847.js';
|
|
5
|
-
import { jsx } from 'react/jsx-runtime';
|
|
6
|
-
import { Tooltip } from './components/tooltip-2885ab2e.js';
|
|
7
|
-
import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
|
|
8
|
-
import { Icon } from './components/icon-b708cca4.js';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Component display name.
|
|
12
|
-
*/
|
|
13
|
-
const COMPONENT_NAME = 'IconButton';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Component default class name and class prefix.
|
|
17
|
-
*/
|
|
18
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Component default props.
|
|
22
|
-
*/
|
|
23
|
-
const DEFAULT_PROPS = {
|
|
24
|
-
emphasis: Emphasis.high,
|
|
25
|
-
size: Size.m
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* IconButton component.
|
|
30
|
-
*
|
|
31
|
-
* @param props Component props.
|
|
32
|
-
* @param ref Component ref.
|
|
33
|
-
* @return React element.
|
|
34
|
-
*/
|
|
35
|
-
const IconButton = forwardRef((props, ref) => {
|
|
36
|
-
const defaultTheme = useTheme() || Theme.light;
|
|
37
|
-
const {
|
|
38
|
-
emphasis = DEFAULT_PROPS.emphasis,
|
|
39
|
-
image,
|
|
40
|
-
icon,
|
|
41
|
-
label,
|
|
42
|
-
size = DEFAULT_PROPS.size,
|
|
43
|
-
theme = defaultTheme,
|
|
44
|
-
tooltipProps,
|
|
45
|
-
hideTooltip,
|
|
46
|
-
...forwardedProps
|
|
47
|
-
} = props;
|
|
48
|
-
return /*#__PURE__*/jsx(Tooltip, {
|
|
49
|
-
label: hideTooltip ? '' : label,
|
|
50
|
-
...tooltipProps,
|
|
51
|
-
children: /*#__PURE__*/jsx(ButtonRoot, {
|
|
52
|
-
ref: ref,
|
|
53
|
-
emphasis,
|
|
54
|
-
size,
|
|
55
|
-
theme,
|
|
56
|
-
...forwardedProps,
|
|
57
|
-
"aria-label": label,
|
|
58
|
-
variant: "icon",
|
|
59
|
-
children: image ? /*#__PURE__*/jsx("img", {
|
|
60
|
-
// no need to set alt as an aria-label is already set on the button
|
|
61
|
-
alt: "",
|
|
62
|
-
src: image
|
|
63
|
-
}) : /*#__PURE__*/jsx(ThemeProvider, {
|
|
64
|
-
value: undefined,
|
|
65
|
-
children: /*#__PURE__*/jsx(Icon, {
|
|
66
|
-
icon: icon
|
|
67
|
-
})
|
|
68
|
-
})
|
|
69
|
-
})
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
IconButton.displayName = COMPONENT_NAME;
|
|
73
|
-
IconButton.className = CLASSNAME;
|
|
74
|
-
IconButton.defaultProps = DEFAULT_PROPS;
|
|
75
|
-
|
|
76
|
-
export { IconButton as I };
|
|
77
|
-
//# sourceMappingURL=IconButton-f4df224c.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton-f4df224c.js","sources":["../../src/components/button/IconButton.tsx"],"sourcesContent":["import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';\nimport { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon (SVG path).\n * If `image` is also set, `image` will be used instead.\n */\n icon?: string;\n /**\n * Image (image url).\n * Has priority over `icon`.\n */\n image?: string;\n /**\n * Label text (required for a11y purpose).\n * If you really don't want an aria-label, you can set an empty label (this is not recommended).\n */\n label: string;\n /**\n * Props to pass to the tooltip.\n * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.\n * */\n tooltipProps?: Partial<TooltipProps>;\n /** Whether the tooltip should be hidden or not. */\n hideTooltip?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'IconButton';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<IconButtonProps> = {\n emphasis: Emphasis.high,\n size: Size.m,\n};\n\n/**\n * IconButton component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n emphasis = DEFAULT_PROPS.emphasis,\n image,\n icon,\n label,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n tooltipProps,\n hideTooltip,\n ...forwardedProps\n } = props;\n\n return (\n <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>\n <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant=\"icon\">\n {image ? (\n <img\n // no need to set alt as an aria-label is already set on the button\n alt=\"\"\n src={image}\n />\n ) : (\n <ThemeProvider value={undefined}>\n <Icon icon={icon as string} />\n </ThemeProvider>\n )}\n </ButtonRoot>\n </Tooltip>\n );\n});\nIconButton.displayName = COMPONENT_NAME;\nIconButton.className = CLASSNAME;\nIconButton.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","Emphasis","high","size","Size","m","IconButton","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","image","icon","label","theme","tooltipProps","hideTooltip","forwardedProps","_jsx","Tooltip","children","ButtonRoot","variant","alt","src","ThemeProvider","value","undefined","Icon","displayName","className","defaultProps"],"mappings":";;;;;;;;;AA+BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG;EAC5CC,QAAQ,EAAEC,QAAQ,CAACC,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFb,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCc,KAAK;IACLC,IAAI;IACJC,KAAK;IACLb,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACzBc,IAAAA,KAAK,GAAGP,YAAY;IACpBQ,YAAY;IACZC,WAAW;IACX,GAAGC,cAAAA;AACP,GAAC,GAAGZ,KAAK,CAAA;EAET,oBACIa,GAAA,CAACC,OAAO,EAAA;AAACN,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAM;AAAA,IAAA,GAAKE,YAAY;IAAAK,QAAA,eACtDF,GAAA,CAACG,UAAU,EAAA;AAACf,MAAAA,GAAG,EAAEA,GAAI;MAAOT,QAAQ;MAAEG,IAAI;MAAEc,KAAK;AAAE,MAAA,GAAGG,cAAc;AAAI,MAAA,YAAA,EAAYJ,KAAM;AAACS,MAAAA,OAAO,EAAC,MAAM;MAAAF,QAAA,EACpGT,KAAK,gBACFO,GAAA,CAAA,KAAA,EAAA;AACI;AACAK,QAAAA,GAAG,EAAC,EAAE;AACNC,QAAAA,GAAG,EAAEb,KAAAA;AAAM,OACd,CAAC,gBAEFO,GAAA,CAACO,aAAa,EAAA;AAACC,QAAAA,KAAK,EAAEC,SAAU;QAAAP,QAAA,eAC5BF,GAAA,CAACU,IAAI,EAAA;AAAChB,UAAAA,IAAI,EAAEA,IAAAA;SAAiB,CAAA;OAClB,CAAA;KAEX,CAAA;AAAC,GACR,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC0B,WAAW,GAAGpC,cAAc,CAAA;AACvCU,UAAU,CAAC2B,SAAS,GAAGpC,SAAS,CAAA;AAChCS,UAAU,CAAC4B,YAAY,GAAGnC,aAAa;;;;"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { c as classNames } from './forwardRef-15f62847.js';
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { u as useTheme } from './ThemeContext-3181f000.js';
|
|
4
|
-
import { FlexBox } from './components/flex-box-55144e5f.js';
|
|
5
|
-
import { T as Text } from './index-a9c5cd69.js';
|
|
6
|
-
|
|
7
|
-
/** Internal component used to render image captions */
|
|
8
|
-
const ImageCaption = props => {
|
|
9
|
-
const defaultTheme = useTheme();
|
|
10
|
-
const {
|
|
11
|
-
baseClassName,
|
|
12
|
-
theme = defaultTheme,
|
|
13
|
-
as = 'figcaption',
|
|
14
|
-
title,
|
|
15
|
-
titleProps,
|
|
16
|
-
description,
|
|
17
|
-
descriptionProps,
|
|
18
|
-
tags,
|
|
19
|
-
captionStyle,
|
|
20
|
-
align,
|
|
21
|
-
truncate
|
|
22
|
-
} = props;
|
|
23
|
-
if (!title && !description && !tags) return null;
|
|
24
|
-
const titleColor = {
|
|
25
|
-
color: theme === 'dark' ? 'light' : 'dark'
|
|
26
|
-
};
|
|
27
|
-
const baseColor = {
|
|
28
|
-
color: theme === 'dark' ? 'light' : 'dark',
|
|
29
|
-
colorVariant: 'L2'
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
// Display description as string or HTML
|
|
33
|
-
const descriptionContent = typeof description === 'string' ? {
|
|
34
|
-
children: description
|
|
35
|
-
} : {
|
|
36
|
-
dangerouslySetInnerHTML: description
|
|
37
|
-
};
|
|
38
|
-
return /*#__PURE__*/jsxs(FlexBox, {
|
|
39
|
-
as: as,
|
|
40
|
-
className: classNames(baseClassName && `${baseClassName}__wrapper`),
|
|
41
|
-
style: captionStyle,
|
|
42
|
-
orientation: "vertical",
|
|
43
|
-
vAlign: align,
|
|
44
|
-
hAlign: align === 'center' ? align : undefined,
|
|
45
|
-
gap: "regular",
|
|
46
|
-
children: [(title || description) && /*#__PURE__*/jsxs(Text, {
|
|
47
|
-
as: "p",
|
|
48
|
-
className: classNames(baseClassName && `${baseClassName}__caption`),
|
|
49
|
-
truncate: truncate,
|
|
50
|
-
...baseColor,
|
|
51
|
-
children: [title && /*#__PURE__*/jsx(Text, {
|
|
52
|
-
...titleProps,
|
|
53
|
-
as: "span",
|
|
54
|
-
className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
|
|
55
|
-
typography: "subtitle1",
|
|
56
|
-
...titleColor,
|
|
57
|
-
children: title
|
|
58
|
-
}), ' ', description && /*#__PURE__*/jsx(Text, {
|
|
59
|
-
...descriptionProps,
|
|
60
|
-
as: "span",
|
|
61
|
-
className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
|
|
62
|
-
typography: "body1",
|
|
63
|
-
...descriptionContent
|
|
64
|
-
})]
|
|
65
|
-
}), tags && /*#__PURE__*/jsx(FlexBox, {
|
|
66
|
-
className: classNames(baseClassName && `${baseClassName}__tags`),
|
|
67
|
-
orientation: "horizontal",
|
|
68
|
-
vAlign: align,
|
|
69
|
-
children: tags
|
|
70
|
-
})]
|
|
71
|
-
});
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export { ImageCaption as I };
|
|
75
|
-
//# sourceMappingURL=ImageCaption-8134a3aa.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCaption-8134a3aa.js","sources":["../../src/components/image-block/ImageCaption.tsx"],"sourcesContent":["import { CSSProperties, ReactNode } from 'react';\n\nimport { FlexBox, HorizontalAlignment, Text, TextProps, useTheme } from '@lumx/react';\nimport { HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\n\ntype As = 'div' | 'figcaption';\n\ntype ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;\n\nexport type ImageCaptionMetadata = {\n /** Image title to display in the caption. */\n title?: string;\n /** Props to pass to the title. */\n titleProps?: ForwardedTextProps;\n /** Image description. Can be either a string, or sanitized html. */\n description?: string | { __html: string };\n /** Props to pass to the title. */\n descriptionProps?: ForwardedTextProps;\n /** Tag content. */\n tags?: ReactNode;\n /** Caption custom CSS style. */\n captionStyle?: CSSProperties;\n};\n\nexport type ImageCaptionProps<AS extends As = 'figcaption'> = HasTheme &\n HasPolymorphicAs<AS> &\n ImageCaptionMetadata & {\n /** Base className for sub elements */\n baseClassName?: string;\n /** Alignment. */\n align?: HorizontalAlignment;\n /** Truncate text on title & description (no line wrapping). */\n truncate?: TextProps['truncate'];\n };\n\n/** Internal component used to render image captions */\nexport const ImageCaption = <AS extends As>(props: ImageCaptionProps<AS>) => {\n const defaultTheme = useTheme();\n const {\n baseClassName,\n theme = defaultTheme,\n as = 'figcaption',\n title,\n titleProps,\n description,\n descriptionProps,\n tags,\n captionStyle,\n align,\n truncate,\n } = props;\n if (!title && !description && !tags) return null;\n\n const titleColor = { color: theme === 'dark' ? 'light' : 'dark' } as const;\n const baseColor = { color: theme === 'dark' ? 'light' : 'dark', colorVariant: 'L2' } as const;\n\n // Display description as string or HTML\n const descriptionContent =\n typeof description === 'string' ? { children: description } : { dangerouslySetInnerHTML: description };\n\n return (\n <FlexBox\n as={as}\n className={classNames(baseClassName && `${baseClassName}__wrapper`)}\n style={captionStyle}\n orientation=\"vertical\"\n vAlign={align}\n hAlign={align === 'center' ? align : undefined}\n gap=\"regular\"\n >\n {(title || description) && (\n <Text\n as=\"p\"\n className={classNames(baseClassName && `${baseClassName}__caption`)}\n truncate={truncate}\n {...baseColor}\n >\n {title && (\n <Text\n {...titleProps}\n as=\"span\"\n className={classNames(titleProps?.className, baseClassName && `${baseClassName}__title`)}\n typography=\"subtitle1\"\n {...titleColor}\n >\n {title}\n </Text>\n )}{' '}\n {description && (\n <Text\n {...descriptionProps}\n as=\"span\"\n className={classNames(\n descriptionProps?.className,\n baseClassName && `${baseClassName}__description`,\n )}\n typography=\"body1\"\n {...descriptionContent}\n />\n )}\n </Text>\n )}\n {tags && (\n <FlexBox\n className={classNames(baseClassName && `${baseClassName}__tags`)}\n orientation=\"horizontal\"\n vAlign={align}\n >\n {tags}\n </FlexBox>\n )}\n </FlexBox>\n );\n};\n"],"names":["ImageCaption","props","defaultTheme","useTheme","baseClassName","theme","as","title","titleProps","description","descriptionProps","tags","captionStyle","align","truncate","titleColor","color","baseColor","colorVariant","descriptionContent","children","dangerouslySetInnerHTML","_jsxs","FlexBox","className","classNames","style","orientation","vAlign","hAlign","undefined","gap","Text","_jsx","typography"],"mappings":"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"}
|