@lumx/react 3.0.2 → 3.0.3
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/{esm/_internal/_rollupPluginBabelHelpers.js → _internal/ClickAwayProvider.js} +107 -2
- package/_internal/ClickAwayProvider.js.map +1 -0
- package/_internal/types.d.ts +271 -0
- package/index.d.ts +2686 -0
- package/index.js +12533 -0
- package/index.js.map +1 -0
- package/package.json +7 -6
- package/src/components/alert-dialog/AlertDialog.tsx +2 -1
- package/src/components/autocomplete/Autocomplete.tsx +2 -2
- package/src/components/autocomplete/AutocompleteMultiple.tsx +2 -1
- package/src/components/avatar/Avatar.tsx +2 -1
- package/src/components/badge/Badge.test.tsx +1 -1
- package/src/components/badge/Badge.tsx +2 -1
- package/src/components/button/Button.test.tsx +1 -1
- package/src/components/button/Button.tsx +2 -1
- package/src/components/button/ButtonGroup.tsx +2 -1
- package/src/components/button/ButtonRoot.test.tsx +1 -1
- package/src/components/button/ButtonRoot.tsx +2 -1
- package/src/components/button/IconButton.tsx +2 -1
- package/src/components/checkbox/Checkbox.test.tsx +1 -1
- package/src/components/checkbox/Checkbox.tsx +2 -1
- package/src/components/chip/Chip.test.tsx +1 -1
- package/src/components/chip/Chip.tsx +3 -1
- package/src/components/chip/ChipGroup.tsx +2 -1
- package/src/components/comment-block/CommentBlock.tsx +2 -1
- package/src/components/date-picker/DatePicker.tsx +1 -1
- package/src/components/date-picker/DatePickerControlled.tsx +1 -1
- package/src/components/date-picker/DatePickerField.tsx +1 -1
- package/src/components/date-picker/constants.ts +1 -1
- package/src/components/date-picker/types.ts +1 -1
- package/src/components/dialog/Dialog.tsx +4 -8
- package/src/components/divider/Divider.test.tsx +1 -1
- package/src/components/divider/Divider.tsx +3 -2
- package/src/components/drag-handle/DragHandle.tsx +2 -1
- package/src/components/dropdown/Dropdown.tsx +2 -1
- package/src/components/expansion-panel/ExpansionPanel.test.tsx +1 -1
- package/src/components/expansion-panel/ExpansionPanel.tsx +3 -10
- package/src/components/flag/Flag.test.tsx +1 -1
- package/src/components/flag/Flag.tsx +2 -1
- package/src/components/flex-box/FlexBox.stories.tsx +8 -0
- package/src/components/flex-box/FlexBox.tsx +7 -3
- package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap +16 -0
- package/src/components/generic-block/GenericBlock.stories.jsx +23 -1
- package/src/components/generic-block/GenericBlock.tsx +18 -4
- package/src/components/generic-block/constants.ts +9 -0
- package/src/components/generic-block/index.ts +1 -0
- package/src/components/grid/Grid.tsx +2 -1
- package/src/components/grid/GridItem.tsx +2 -1
- package/src/components/heading/Heading.tsx +2 -1
- package/src/components/heading/HeadingLevelProvider.tsx +1 -1
- package/src/components/heading/context.tsx +1 -1
- package/src/components/icon/Icon.test.tsx +1 -1
- package/src/components/icon/Icon.tsx +2 -1
- package/src/components/image-block/ImageBlock.tsx +2 -1
- package/src/components/index.ts +1 -1
- package/src/components/inline-list/InlineList.stories.tsx +40 -0
- package/src/components/inline-list/InlineList.test.tsx +41 -0
- package/src/components/inline-list/InlineList.tsx +80 -0
- package/src/components/inline-list/index.ts +1 -0
- package/src/components/input-helper/InputHelper.tsx +2 -1
- package/src/components/input-label/InputLabel.tsx +2 -1
- package/src/components/lightbox/Lightbox.tsx +2 -1
- package/src/components/link/Link.tsx +2 -1
- package/src/components/link-preview/LinkPreview.test.tsx +1 -1
- package/src/components/link-preview/LinkPreview.tsx +2 -1
- package/src/components/list/List.tsx +2 -1
- package/src/components/list/ListDivider.tsx +2 -1
- package/src/components/list/ListItem.tsx +3 -8
- package/src/components/list/ListSubheader.tsx +2 -1
- package/src/components/list/useInteractiveList.tsx +1 -1
- package/src/components/message/Message.test.tsx +1 -1
- package/src/components/message/Message.tsx +2 -1
- package/src/components/mosaic/Mosaic.tsx +2 -1
- package/src/components/notification/Notification.tsx +2 -1
- package/src/components/popover/Popover.tsx +2 -1
- package/src/components/post-block/PostBlock.tsx +2 -1
- package/src/components/progress/Progress.tsx +2 -1
- package/src/components/progress-tracker/ProgressTracker.tsx +2 -1
- package/src/components/progress-tracker/ProgressTrackerStep.test.tsx +1 -1
- package/src/components/progress-tracker/ProgressTrackerStep.tsx +2 -1
- package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx +2 -1
- package/src/components/radio-button/RadioButton.test.tsx +1 -1
- package/src/components/radio-button/RadioButton.tsx +2 -1
- package/src/components/radio-button/RadioGroup.tsx +2 -1
- package/src/components/select/Select.test.tsx +1 -1
- package/src/components/select/Select.tsx +2 -1
- package/src/components/select/SelectMultiple.test.tsx +1 -1
- package/src/components/select/SelectMultiple.tsx +2 -1
- package/src/components/select/WithSelectContext.tsx +1 -1
- package/src/components/select/constants.ts +1 -1
- package/src/components/side-navigation/SideNavigation.tsx +2 -1
- package/src/components/side-navigation/SideNavigationItem.test.tsx +1 -1
- package/src/components/side-navigation/SideNavigationItem.tsx +3 -9
- package/src/components/skeleton/SkeletonCircle.tsx +2 -1
- package/src/components/skeleton/SkeletonRectangle.tsx +2 -1
- package/src/components/skeleton/SkeletonTypography.tsx +2 -1
- package/src/components/slider/Slider.tsx +2 -1
- package/src/components/slideshow/Slides.tsx +2 -1
- package/src/components/slideshow/Slideshow.tsx +1 -1
- package/src/components/slideshow/SlideshowControls.tsx +2 -1
- package/src/components/slideshow/SlideshowItem.tsx +2 -1
- package/src/components/slideshow/SlideshowItemGroup.tsx +2 -1
- package/src/components/switch/Switch.test.tsx +1 -1
- package/src/components/switch/Switch.tsx +2 -1
- package/src/components/table/Table.tsx +2 -1
- package/src/components/table/TableBody.tsx +2 -1
- package/src/components/table/TableCell.tsx +3 -1
- package/src/components/table/TableHeader.tsx +2 -1
- package/src/components/table/TableRow.tsx +2 -1
- package/src/components/tabs/Tab.test.tsx +1 -1
- package/src/components/tabs/Tab.tsx +2 -1
- package/src/components/tabs/TabList.test.tsx +1 -1
- package/src/components/tabs/TabList.tsx +2 -1
- package/src/components/tabs/TabPanel.tsx +2 -1
- package/src/components/text/{Text.stories.tsx → Text.stories.jsx} +23 -28
- package/src/components/text/Text.test.tsx +15 -1
- package/src/components/text/Text.tsx +38 -12
- package/src/components/text-field/TextField.test.tsx +1 -1
- package/src/components/text-field/TextField.tsx +2 -1
- package/src/components/thumbnail/Thumbnail.tsx +2 -1
- package/src/components/thumbnail/types.ts +1 -1
- package/src/components/toolbar/Toolbar.tsx +2 -1
- package/src/components/tooltip/Tooltip.tsx +2 -1
- package/src/components/tooltip/useTooltipOpen.tsx +1 -1
- package/src/components/uploader/Uploader.test.tsx +1 -1
- package/src/components/uploader/Uploader.tsx +2 -1
- package/src/components/user-block/UserBlock.tsx +2 -1
- package/src/hooks/useCallbackOnEscape.ts +2 -1
- package/src/hooks/useClickAway.tsx +1 -1
- package/src/hooks/useDisableBodyScroll.ts +1 -1
- package/src/hooks/useFocusTrap.ts +1 -1
- package/src/hooks/useInterval.tsx +1 -1
- package/src/hooks/useOnResize.ts +1 -1
- package/src/index.ts +5 -0
- package/src/stories/generated/GenericBlock/Demos.stories.tsx +3 -1
- package/src/stories/generated/Heading/Demos.stories.tsx +6 -0
- package/src/stories/withResizableBox.tsx +18 -0
- package/src/testing/utils/commonTestsSuite.ts +1 -1
- package/src/utils/{getRootClassName.ts → className.ts} +19 -0
- package/src/utils/event.ts +1 -0
- package/src/utils/index.ts +5 -0
- package/src/utils/type.ts +3 -0
- package/src/utils/utils.test.ts +1 -1
- package/types.d.ts +68 -11
- package/utils/index.d.ts +29 -0
- package/utils/index.js +2 -0
- package/utils/index.js.map +1 -0
- package/esm/_internal/AlertDialog.js +0 -141
- package/esm/_internal/AlertDialog.js.map +0 -1
- package/esm/_internal/AutocompleteMultiple.js +0 -257
- package/esm/_internal/AutocompleteMultiple.js.map +0 -1
- package/esm/_internal/Avatar2.js +0 -82
- package/esm/_internal/Avatar2.js.map +0 -1
- package/esm/_internal/Badge2.js +0 -54
- package/esm/_internal/Badge2.js.map +0 -1
- package/esm/_internal/Button2.js +0 -84
- package/esm/_internal/Button2.js.map +0 -1
- package/esm/_internal/ButtonGroup.js +0 -51
- package/esm/_internal/ButtonGroup.js.map +0 -1
- package/esm/_internal/ButtonRoot.js +0 -135
- package/esm/_internal/ButtonRoot.js.map +0 -1
- package/esm/_internal/Checkbox2.js +0 -116
- package/esm/_internal/Checkbox2.js.map +0 -1
- package/esm/_internal/Chip2.js +0 -118
- package/esm/_internal/Chip2.js.map +0 -1
- package/esm/_internal/ChipGroup.js +0 -122
- package/esm/_internal/ChipGroup.js.map +0 -1
- package/esm/_internal/ClickAwayProvider.js +0 -217
- package/esm/_internal/ClickAwayProvider.js.map +0 -1
- package/esm/_internal/CommentBlock.js +0 -124
- package/esm/_internal/CommentBlock.js.map +0 -1
- package/esm/_internal/DatePickerField.js +0 -347
- package/esm/_internal/DatePickerField.js.map +0 -1
- package/esm/_internal/Dialog2.js +0 -274
- package/esm/_internal/Dialog2.js.map +0 -1
- package/esm/_internal/Divider2.js +0 -53
- package/esm/_internal/Divider2.js.map +0 -1
- package/esm/_internal/DragHandle.js +0 -50
- package/esm/_internal/DragHandle.js.map +0 -1
- package/esm/_internal/Dropdown2.js +0 -157
- package/esm/_internal/Dropdown2.js.map +0 -1
- package/esm/_internal/ExpansionPanel.js +0 -156
- package/esm/_internal/ExpansionPanel.js.map +0 -1
- package/esm/_internal/Flag2.js +0 -48
- package/esm/_internal/Flag2.js.map +0 -1
- package/esm/_internal/FlexBox.js +0 -55
- package/esm/_internal/FlexBox.js.map +0 -1
- package/esm/_internal/GenericBlock.js +0 -125
- package/esm/_internal/GenericBlock.js.map +0 -1
- package/esm/_internal/GridItem.js +0 -96
- package/esm/_internal/GridItem.js.map +0 -1
- package/esm/_internal/HeadingLevelProvider.js +0 -112
- package/esm/_internal/HeadingLevelProvider.js.map +0 -1
- package/esm/_internal/Icon2.js +0 -120
- package/esm/_internal/Icon2.js.map +0 -1
- package/esm/_internal/IconButton.js +0 -74
- package/esm/_internal/IconButton.js.map +0 -1
- package/esm/_internal/ImageBlock.js +0 -101
- package/esm/_internal/ImageBlock.js.map +0 -1
- package/esm/_internal/InputHelper.js +0 -72
- package/esm/_internal/InputHelper.js.map +0 -1
- package/esm/_internal/InputLabel.js +0 -58
- package/esm/_internal/InputLabel.js.map +0 -1
- package/esm/_internal/Lightbox2.js +0 -123
- package/esm/_internal/Lightbox2.js.map +0 -1
- package/esm/_internal/Link2.js +0 -122
- package/esm/_internal/Link2.js.map +0 -1
- package/esm/_internal/LinkPreview.js +0 -105
- package/esm/_internal/LinkPreview.js.map +0 -1
- package/esm/_internal/List2.js +0 -799
- package/esm/_internal/List2.js.map +0 -1
- package/esm/_internal/ListSubheader.js +0 -79
- package/esm/_internal/ListSubheader.js.map +0 -1
- package/esm/_internal/Message2.js +0 -78
- package/esm/_internal/Message2.js.map +0 -1
- package/esm/_internal/Mosaic2.js +0 -89
- package/esm/_internal/Mosaic2.js.map +0 -1
- package/esm/_internal/Notification2.js +0 -133
- package/esm/_internal/Notification2.js.map +0 -1
- package/esm/_internal/Popover2.js +0 -2473
- package/esm/_internal/Popover2.js.map +0 -1
- package/esm/_internal/PostBlock.js +0 -96
- package/esm/_internal/PostBlock.js.map +0 -1
- package/esm/_internal/Progress2.js +0 -81
- package/esm/_internal/Progress2.js.map +0 -1
- package/esm/_internal/ProgressTrackerStepPanel.js +0 -313
- package/esm/_internal/ProgressTrackerStepPanel.js.map +0 -1
- package/esm/_internal/RadioGroup.js +0 -147
- package/esm/_internal/RadioGroup.js.map +0 -1
- package/esm/_internal/SelectMultiple.js +0 -424
- package/esm/_internal/SelectMultiple.js.map +0 -1
- package/esm/_internal/SideNavigationItem.js +0 -151
- package/esm/_internal/SideNavigationItem.js.map +0 -1
- package/esm/_internal/SkeletonTypography.js +0 -168
- package/esm/_internal/SkeletonTypography.js.map +0 -1
- package/esm/_internal/Slider2.js +0 -327
- package/esm/_internal/Slider2.js.map +0 -1
- package/esm/_internal/Slides.js +0 -864
- package/esm/_internal/Slides.js.map +0 -1
- package/esm/_internal/Switch2.js +0 -116
- package/esm/_internal/Switch2.js.map +0 -1
- package/esm/_internal/TabPanel.js +0 -280
- package/esm/_internal/TabPanel.js.map +0 -1
- package/esm/_internal/TableRow.js +0 -291
- package/esm/_internal/TableRow.js.map +0 -1
- package/esm/_internal/Text2.js +0 -63
- package/esm/_internal/Text2.js.map +0 -1
- package/esm/_internal/TextField.js +0 -322
- package/esm/_internal/TextField.js.map +0 -1
- package/esm/_internal/Thumbnail2.js +0 -301
- package/esm/_internal/Thumbnail2.js.map +0 -1
- package/esm/_internal/Toolbar2.js +0 -60
- package/esm/_internal/Toolbar2.js.map +0 -1
- package/esm/_internal/Tooltip2.js +0 -282
- package/esm/_internal/Tooltip2.js.map +0 -1
- package/esm/_internal/Uploader2.js +0 -84
- package/esm/_internal/Uploader2.js.map +0 -1
- package/esm/_internal/UserBlock.js +0 -132
- package/esm/_internal/UserBlock.js.map +0 -1
- package/esm/_internal/_rollupPluginBabelHelpers.js.map +0 -1
- package/esm/_internal/alert-dialog.js +0 -34
- package/esm/_internal/alert-dialog.js.map +0 -1
- package/esm/_internal/autocomplete.js +0 -32
- package/esm/_internal/autocomplete.js.map +0 -1
- package/esm/_internal/avatar.js +0 -13
- package/esm/_internal/avatar.js.map +0 -1
- package/esm/_internal/badge.js +0 -10
- package/esm/_internal/badge.js.map +0 -1
- package/esm/_internal/button.js +0 -25
- package/esm/_internal/button.js.map +0 -1
- package/esm/_internal/checkbox.js +0 -14
- package/esm/_internal/checkbox.js.map +0 -1
- package/esm/_internal/chip.js +0 -12
- package/esm/_internal/chip.js.map +0 -1
- package/esm/_internal/comment-block.js +0 -24
- package/esm/_internal/comment-block.js.map +0 -1
- package/esm/_internal/components.js +0 -156
- package/esm/_internal/components.js.map +0 -1
- package/esm/_internal/constants.js +0 -13
- package/esm/_internal/constants.js.map +0 -1
- package/esm/_internal/date-picker.js +0 -32
- package/esm/_internal/date-picker.js.map +0 -1
- package/esm/_internal/dialog.js +0 -27
- package/esm/_internal/dialog.js.map +0 -1
- package/esm/_internal/divider.js +0 -10
- package/esm/_internal/divider.js.map +0 -1
- package/esm/_internal/drag-handle.js +0 -11
- package/esm/_internal/drag-handle.js.map +0 -1
- package/esm/_internal/dropdown.js +0 -21
- package/esm/_internal/dropdown.js.map +0 -1
- package/esm/_internal/expansion-panel.js +0 -32
- package/esm/_internal/expansion-panel.js.map +0 -1
- package/esm/_internal/flag.js +0 -11
- package/esm/_internal/flag.js.map +0 -1
- package/esm/_internal/flex-box.js +0 -11
- package/esm/_internal/flex-box.js.map +0 -1
- package/esm/_internal/generic-block.js +0 -20
- package/esm/_internal/generic-block.js.map +0 -1
- package/esm/_internal/getRootClassName.js +0 -346
- package/esm/_internal/getRootClassName.js.map +0 -1
- package/esm/_internal/grid.js +0 -10
- package/esm/_internal/grid.js.map +0 -1
- package/esm/_internal/heading.js +0 -11
- package/esm/_internal/heading.js.map +0 -1
- package/esm/_internal/icon.js +0 -10
- package/esm/_internal/icon.js.map +0 -1
- package/esm/_internal/image-block.js +0 -14
- package/esm/_internal/image-block.js.map +0 -1
- package/esm/_internal/input-helper.js +0 -10
- package/esm/_internal/input-helper.js.map +0 -1
- package/esm/_internal/input-label.js +0 -10
- package/esm/_internal/input-label.js.map +0 -1
- package/esm/_internal/lightbox.js +0 -27
- package/esm/_internal/lightbox.js.map +0 -1
- package/esm/_internal/link-preview.js +0 -15
- package/esm/_internal/link-preview.js.map +0 -1
- package/esm/_internal/link.js +0 -12
- package/esm/_internal/link.js.map +0 -1
- package/esm/_internal/list.js +0 -15
- package/esm/_internal/list.js.map +0 -1
- package/esm/_internal/mergeRefs.js +0 -25
- package/esm/_internal/mergeRefs.js.map +0 -1
- package/esm/_internal/message.js +0 -11
- package/esm/_internal/message.js.map +0 -1
- package/esm/_internal/mosaic.js +0 -14
- package/esm/_internal/mosaic.js.map +0 -1
- package/esm/_internal/notification.js +0 -18
- package/esm/_internal/notification.js.map +0 -1
- package/esm/_internal/partitionMulti.js +0 -27
- package/esm/_internal/partitionMulti.js.map +0 -1
- package/esm/_internal/popover.js +0 -15
- package/esm/_internal/popover.js.map +0 -1
- package/esm/_internal/post-block.js +0 -15
- package/esm/_internal/post-block.js.map +0 -1
- package/esm/_internal/progress-tracker.js +0 -17
- package/esm/_internal/progress-tracker.js.map +0 -1
- package/esm/_internal/progress.js +0 -10
- package/esm/_internal/progress.js.map +0 -1
- package/esm/_internal/radio-button.js +0 -13
- package/esm/_internal/radio-button.js.map +0 -1
- package/esm/_internal/renderLink.js +0 -25
- package/esm/_internal/renderLink.js.map +0 -1
- package/esm/_internal/select.js +0 -31
- package/esm/_internal/select.js.map +0 -1
- package/esm/_internal/side-navigation.js +0 -25
- package/esm/_internal/side-navigation.js.map +0 -1
- package/esm/_internal/skeleton.js +0 -10
- package/esm/_internal/skeleton.js.map +0 -1
- package/esm/_internal/slider.js +0 -13
- package/esm/_internal/slider.js.map +0 -1
- package/esm/_internal/slideshow.js +0 -29
- package/esm/_internal/slideshow.js.map +0 -1
- package/esm/_internal/state.js +0 -145
- package/esm/_internal/state.js.map +0 -1
- package/esm/_internal/switch.js +0 -13
- package/esm/_internal/switch.js.map +0 -1
- package/esm/_internal/table.js +0 -12
- package/esm/_internal/table.js.map +0 -1
- package/esm/_internal/tabs.js +0 -15
- package/esm/_internal/tabs.js.map +0 -1
- package/esm/_internal/text-field.js +0 -26
- package/esm/_internal/text-field.js.map +0 -1
- package/esm/_internal/text.js +0 -10
- package/esm/_internal/text.js.map +0 -1
- package/esm/_internal/thumbnail.js +0 -13
- package/esm/_internal/thumbnail.js.map +0 -1
- package/esm/_internal/toolbar.js +0 -9
- package/esm/_internal/toolbar.js.map +0 -1
- package/esm/_internal/tooltip.js +0 -18
- package/esm/_internal/tooltip.js.map +0 -1
- package/esm/_internal/type.js +0 -40
- package/esm/_internal/type.js.map +0 -1
- package/esm/_internal/types.js +0 -23
- package/esm/_internal/types.js.map +0 -1
- package/esm/_internal/uploader.js +0 -11
- package/esm/_internal/uploader.js.map +0 -1
- package/esm/_internal/useDelayedVisibility.js +0 -47
- package/esm/_internal/useDelayedVisibility.js.map +0 -1
- package/esm/_internal/useDisableBodyScroll.js +0 -220
- package/esm/_internal/useDisableBodyScroll.js.map +0 -1
- package/esm/_internal/useFocusTrap.js +0 -86
- package/esm/_internal/useFocusTrap.js.map +0 -1
- package/esm/_internal/useRovingTabIndex.js +0 -87
- package/esm/_internal/useRovingTabIndex.js.map +0 -1
- package/esm/_internal/user-block.js +0 -17
- package/esm/_internal/user-block.js.map +0 -1
- package/esm/index.js +0 -95
- package/esm/index.js.map +0 -1
- package/esm/index2.js +0 -16
- package/esm/index2.js.map +0 -1
- package/src/utils/index.tsx +0 -7
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog2.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n elements: Array<T | null | undefined>,\n options?: IntersectionObserverInit,\n): Intersections<T> {\n const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n useEffect(\n () => {\n if (elements.length < 1 || !elements.some(Boolean)) {\n return undefined;\n }\n\n const observer = new IntersectionObserver((entries) => {\n for (const entry of entries) {\n intersections.set(entry.target as T, entry);\n }\n setIntersections(new Map(intersections));\n }, options);\n\n for (const element of elements) {\n if (element) {\n observer.observe(element);\n }\n }\n return () => observer.disconnect();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [...elements],\n );\n\n return intersections;\n}\n","import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport classNames from 'classnames';\n\nimport { Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\nimport {\n Comp,\n GenericProps,\n getRootClassName,\n handleBasicClasses,\n isComponent,\n partitionMulti,\n} from '@lumx/react/utils';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n /** Footer content. */\n footer?: ReactNode;\n /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n forceFooterDivider?: boolean;\n /** Header content. */\n header?: ReactNode;\n /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n forceHeaderDivider?: boolean;\n /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n isLoading?: boolean;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n parentElement?: RefObject<HTMLElement>;\n /** Reference to the dialog content element. */\n contentRef?: Ref<HTMLDivElement>;\n /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n focusElement?: RefObject<HTMLElement>;\n /** Whether to keep the dialog open on clickaway or escape press. */\n preventAutoClose?: boolean;\n /** Size variant. */\n size?: DialogSizes;\n /** Z-axis position. */\n zIndex?: number;\n /** Z-axis position. */\n dialogProps?: GenericProps;\n /** On close callback. */\n onClose?(): void;\n /** Callback called when the open animation starts and the close animation finishes. */\n onVisibilityChange?(isVisible: boolean): void;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\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<DialogProps> = {\n size: Size.big,\n};\n\n/**\n * Dialog component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n\n const {\n children,\n className,\n header,\n focusElement,\n forceFooterDivider,\n forceHeaderDivider,\n footer,\n isLoading,\n isOpen,\n onClose,\n parentElement,\n contentRef,\n preventAutoClose,\n size,\n zIndex,\n dialogProps,\n onVisibilityChange,\n ...forwardedProps\n } = props;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const previousOpen = React.useRef(isOpen);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isOpen !== previousOpen.current) {\n previousOpen.current = isOpen;\n\n // Focus the parent element on close.\n if (!isOpen && parentElement && parentElement.current) {\n parentElement.current.focus();\n }\n }\n }, [isOpen, parentElement]);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useCallbackOnEscape(onClose, isOpen && !preventAutoClose);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const wrapperRef = useRef<HTMLDivElement>(null);\n /**\n * Since the `contentRef` comes from the parent and is optional,\n * we need to create a stable contentRef that will always be available.\n */\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const localContentRef = useRef<HTMLDivElement>(null);\n // Handle focus trap.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useDisableBodyScroll(isOpen && localContentRef.current);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n threshold: [0, 1],\n });\n\n const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n // Separate header, footer and dialog content from children.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [[headerChild], [footerChild], content] = useMemo(\n () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n [children],\n );\n const headerChildProps = (headerChild as ReactElement)?.props;\n const headerChildContent = headerChildProps?.children;\n const footerChildProps = (footerChild as ReactElement)?.props;\n const footerChildContent = footerChildProps?.children;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const clickAwayRefs = useRef([wrapperRef]);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const rootRef = useRef<HTMLDivElement>(null);\n\n return isOpen || isVisible\n ? createPortal(\n <div\n ref={mergeRefs(rootRef, ref)}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isHidden: !isOpen,\n isLoading,\n isShown: isOpen || isVisible,\n prefix: CLASSNAME,\n size,\n }),\n )}\n style={{ zIndex }}\n >\n <div className={`${CLASSNAME}__overlay`} />\n\n <section className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n <ClickAwayProvider\n callback={!preventAutoClose && onClose}\n childrenRefs={clickAwayRefs}\n parentRef={rootRef}\n >\n <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n {(header || headerChildContent) && (\n <header\n {...headerChildProps}\n className={classNames(\n `${CLASSNAME}__header`,\n (forceHeaderDivider || hasTopIntersection) &&\n `${CLASSNAME}__header--has-divider`,\n headerChildProps?.className,\n )}\n >\n {header}\n {headerChildContent}\n </header>\n )}\n\n <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>\n <div\n className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n ref={setSentinelTop}\n />\n\n {content}\n\n <div\n className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n ref={setSentinelBottom}\n />\n </div>\n\n {(footer || footerChildContent) && (\n <footer\n {...footerChildProps}\n className={classNames(\n `${CLASSNAME}__footer`,\n (forceFooterDivider || hasBottomIntersection) &&\n `${CLASSNAME}__footer--has-divider`,\n footerChildProps?.className,\n )}\n >\n {footer}\n {footerChildContent}\n </footer>\n )}\n\n {isLoading && (\n <div className={`${CLASSNAME}__progress-overlay`}>\n <Progress variant={ProgressVariant.circular} />\n </div>\n )}\n </div>\n </ClickAwayProvider>\n </section>\n </div>,\n document.body,\n )\n : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","useState","Map","intersections","setIntersections","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","forwardedProps","previousOpen","React","useRef","current","focus","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","useMemo","partitionMulti","Children","toArray","headerChild","footerChild","content","headerChildProps","headerChildContent","footerChildProps","footerChildContent","isVisible","useDelayedVisibility","DIALOG_TRANSITION_DURATION","clickAwayRefs","rootRef","createPortal","mergeRefs","classNames","handleBasicClasses","isHidden","isShown","prefix","ProgressVariant","circular","document","body","displayName","defaultProps"],"mappings":";;;;;;;;;;;;;;;AAIA;;;;;;;AAOO,SAASA,uBAAT,CACHC,QADG,EAEHC,OAFG,EAGa;AAAA,kBAC0BC,QAAQ,CAAmB;AAAA,WAAM,IAAIC,GAAJ,EAAN;AAAA,GAAnB,CADlC;AAAA;AAAA,MACTC,aADS;AAAA,MACMC,gBADN;;AAGhBC,EAAAA,SAAS,CACL,YAAM;AACF,QAAIN,QAAQ,CAACO,MAAT,GAAkB,CAAlB,IAAuB,CAACP,QAAQ,CAACQ,IAAT,CAAcC,OAAd,CAA5B,EAAoD;AAChD,aAAOC,SAAP;AACH;;AAED,QAAMC,QAAQ,GAAG,IAAIC,oBAAJ,CAAyB,UAACC,OAAD,EAAa;AAAA;AAAA;AAAA;;AAAA;AACnD,6BAAoBA,OAApB,8HAA6B;AAAA,cAAlBC,KAAkB;AACzBV,UAAAA,aAAa,CAACW,GAAd,CAAkBD,KAAK,CAACE,MAAxB,EAAqCF,KAArC;AACH;AAHkD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAInDT,MAAAA,gBAAgB,CAAC,IAAIF,GAAJ,CAAQC,aAAR,CAAD,CAAhB;AACH,KALgB,EAKdH,OALc,CAAjB;AALE;AAAA;AAAA;;AAAA;AAYF,4BAAsBD,QAAtB,mIAAgC;AAAA,YAArBiB,OAAqB;;AAC5B,YAAIA,OAAJ,EAAa;AACTN,UAAAA,QAAQ,CAACO,OAAT,CAAiBD,OAAjB;AACH;AACJ;AAhBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAiBF,WAAO;AAAA,aAAMN,QAAQ,CAACQ,UAAT,EAAN;AAAA,KAAP;AACH,GAnBI;AAAA,qBAqBDnB,QArBC,EAAT;AAwBA,SAAOI,aAAP;AACH;;ACjBD;;;;AAsCA,IAAMgB,QAAQ,GAAGC,WAAW,CAAC,QAAD,CAA5B;AACA,IAAMC,QAAQ,GAAGD,WAAW,CAAC,QAAD,CAA5B;AAEA;;;;AAGA,IAAME,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC;AAD6B,CAA5C;AAIA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA;;AAChF,MAAI,CAACC,QAAL,EAAe;AACX;AACA,WAAO,IAAP;AACH;;AAJ+E,MAO5EC,QAP4E,GAyB5EH,KAzB4E,CAO5EG,QAP4E;AAAA,MAQ5EC,SAR4E,GAyB5EJ,KAzB4E,CAQ5EI,SAR4E;AAAA,MAS5EC,MAT4E,GAyB5EL,KAzB4E,CAS5EK,MAT4E;AAAA,MAU5EC,YAV4E,GAyB5EN,KAzB4E,CAU5EM,YAV4E;AAAA,MAW5EC,kBAX4E,GAyB5EP,KAzB4E,CAW5EO,kBAX4E;AAAA,MAY5EC,kBAZ4E,GAyB5ER,KAzB4E,CAY5EQ,kBAZ4E;AAAA,MAa5EC,MAb4E,GAyB5ET,KAzB4E,CAa5ES,MAb4E;AAAA,MAc5EC,SAd4E,GAyB5EV,KAzB4E,CAc5EU,SAd4E;AAAA,MAe5EC,MAf4E,GAyB5EX,KAzB4E,CAe5EW,MAf4E;AAAA,MAgB5EC,OAhB4E,GAyB5EZ,KAzB4E,CAgB5EY,OAhB4E;AAAA,MAiB5EC,aAjB4E,GAyB5Eb,KAzB4E,CAiB5Ea,aAjB4E;AAAA,MAkB5EC,UAlB4E,GAyB5Ed,KAzB4E,CAkB5Ec,UAlB4E;AAAA,MAmB5EC,gBAnB4E,GAyB5Ef,KAzB4E,CAmB5Ee,gBAnB4E;AAAA,MAoB5EpB,IApB4E,GAyB5EK,KAzB4E,CAoB5EL,IApB4E;AAAA,MAqB5EqB,MArB4E,GAyB5EhB,KAzB4E,CAqB5EgB,MArB4E;AAAA,MAsB5EC,WAtB4E,GAyB5EjB,KAzB4E,CAsB5EiB,WAtB4E;AAAA,MAuB5EC,kBAvB4E,GAyB5ElB,KAzB4E,CAuB5EkB,kBAvB4E;AAAA,MAwBzEC,cAxByE,4BAyB5EnB,KAzB4E;;;AA4BhF,MAAMoB,YAAY,GAAGC,KAAK,CAACC,MAAN,CAAaX,MAAb,CAArB,CA5BgF;;AA8BhFU,EAAAA,KAAK,CAAC/C,SAAN,CAAgB,YAAM;AAClB,QAAIqC,MAAM,KAAKS,YAAY,CAACG,OAA5B,EAAqC;AACjCH,MAAAA,YAAY,CAACG,OAAb,GAAuBZ,MAAvB,CADiC;;AAIjC,UAAI,CAACA,MAAD,IAAWE,aAAX,IAA4BA,aAAa,CAACU,OAA9C,EAAuD;AACnDV,QAAAA,aAAa,CAACU,OAAd,CAAsBC,KAAtB;AACH;AACJ;AACJ,GATD,EASG,CAACb,MAAD,EAASE,aAAT,CATH,EA9BgF;;AA0ChFY,EAAAA,mBAAmB,CAACb,OAAD,EAAUD,MAAM,IAAI,CAACI,gBAArB,CAAnB,CA1CgF;;AA6ChF,MAAMW,UAAU,GAAGJ,MAAM,CAAiB,IAAjB,CAAzB;AACA;;;;AAIA;;AACA,MAAMK,eAAe,GAAGL,MAAM,CAAiB,IAAjB,CAA9B,CAnDgF;AAqDhF;;AACAM,EAAAA,YAAY,CAACjB,MAAM,IAAIe,UAAU,CAACH,OAAtB,EAA+BjB,YAA/B,aAA+BA,YAA/B,uBAA+BA,YAAY,CAAEiB,OAA7C,CAAZ,CAtDgF;;AAyDhFM,EAAAA,oBAAoB,CAAClB,MAAM,IAAIgB,eAAe,CAACJ,OAA3B,CAApB,CAzDgF;;AAAA,kBA4D1CrD,QAAQ,CAAiB,IAAjB,CA5DkC;AAAA;AAAA,MA4DzE4D,WA5DyE;AAAA,MA4D5DC,cA5D4D;;;AAAA,mBA8DpC7D,QAAQ,CAAiB,IAAjB,CA9D4B;AAAA;AAAA,MA8DzE8D,cA9DyE;AAAA,MA8DzDC,iBA9DyD;;;AAgEhF,MAAM7D,aAAa,GAAGL,uBAAuB,CAAC,CAAC+D,WAAD,EAAcE,cAAd,CAAD,EAAgC;AACzEE,IAAAA,SAAS,EAAE,CAAC,CAAD,EAAI,CAAJ;AAD8D,GAAhC,CAA7C;AAIA,MAAMC,kBAAkB,GAAGL,WAAW,IAAI,gCAAE1D,aAAa,CAACgE,GAAd,CAAkBN,WAAlB,CAAF,uDAAE,mBAAgCO,cAAlC,uCAAoD,IAApD,CAA1C;AACA,MAAMC,qBAAqB,GAAGN,cAAc,IAAI,kCAAE5D,aAAa,CAACgE,GAAd,CAAkBJ,cAAlB,CAAF,wDAAE,oBAAmCK,cAArC,yCAAuD,IAAvD,CAAhD,CArEgF;AAwEhF;;AAxEgF,iBAyEhCE,OAAO,CACnD;AAAA,WAAMC,cAAc,CAACC,QAAQ,CAACC,OAAT,CAAiBvC,QAAjB,CAAD,EAA6B,CAACf,QAAD,EAAWE,QAAX,CAA7B,CAApB;AAAA,GADmD,EAEnD,CAACa,QAAD,CAFmD,CAzEyB;AAAA;AAAA;AAAA,MAyExEwC,WAzEwE;AAAA;AAAA,MAyEzDC,WAzEyD;AAAA,MAyE3CC,OAzE2C;;AA6EhF,MAAMC,gBAAgB,YAAIH,WAAJ,0CAAG,MAA+B3C,KAAxD;AACA,MAAM+C,kBAAkB,GAAGD,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAE3C,QAA7C;AACA,MAAM6C,gBAAgB,YAAIJ,WAAJ,0CAAG,MAA+B5C,KAAxD;AACA,MAAMiD,kBAAkB,GAAGD,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAE7C,QAA7C,CAhFgF;;AAmFhF,MAAM+C,SAAS,GAAGC,oBAAoB,CAAC1E,OAAO,CAACkC,MAAD,CAAR,EAAkByC,0BAAlB,EAA8ClC,kBAA9C,CAAtC,CAnFgF;;AAsFhF,MAAMmC,aAAa,GAAG/B,MAAM,CAAC,CAACI,UAAD,CAAD,CAA5B,CAtFgF;;AAyFhF,MAAM4B,OAAO,GAAGhC,MAAM,CAAiB,IAAjB,CAAtB;AAEA,SAAOX,MAAM,IAAIuC,SAAV,GACDK,YAAY,CACR;AACI,IAAA,GAAG,EAAEC,SAAS,CAACF,OAAD,EAAUrD,GAAV;AADlB,KAEQkB,cAFR;AAGI,IAAA,SAAS,EAAEsC,UAAU,CACjBrD,SADiB,EAEjBsD,kBAAkB,CAAC;AACfC,MAAAA,QAAQ,EAAE,CAAChD,MADI;AAEfD,MAAAA,SAAS,EAATA,SAFe;AAGfkD,MAAAA,OAAO,EAAEjD,MAAM,IAAIuC,SAHJ;AAIfW,MAAAA,MAAM,EAAErE,SAJO;AAKfG,MAAAA,IAAI,EAAJA;AALe,KAAD,CAFD,CAHzB;AAaI,IAAA,KAAK,EAAE;AAAEqB,MAAAA,MAAM,EAANA;AAAF;AAbX,MAeI;AAAK,IAAA,SAAS,YAAKxB,SAAL;AAAd,IAfJ,EAiBI;AAAS,IAAA,SAAS,YAAKA,SAAL,gBAAlB;AAA+C,IAAA,IAAI,EAAC,QAApD;AAA6D,kBAAW;AAAxE,KAAmFyB,WAAnF,GACI,oBAAC,iBAAD;AACI,IAAA,QAAQ,EAAE,CAACF,gBAAD,IAAqBH,OADnC;AAEI,IAAA,YAAY,EAAEyC,aAFlB;AAGI,IAAA,SAAS,EAAEC;AAHf,KAKI;AAAK,IAAA,SAAS,YAAK9D,SAAL,cAAd;AAAyC,IAAA,GAAG,EAAEkC;AAA9C,KACK,CAACrB,MAAM,IAAI0C,kBAAX,KACG,2CACQD,gBADR;AAEI,IAAA,SAAS,EAAEW,UAAU,WACdjE,SADc,eAEjB,CAACgB,kBAAkB,IAAI2B,kBAAvB,eACO3C,SADP,0BAFiB,EAIjBsD,gBAJiB,aAIjBA,gBAJiB,uBAIjBA,gBAAgB,CAAE1C,SAJD;AAFzB,MASKC,MATL,EAUK0C,kBAVL,CAFR,EAgBI;AAAK,IAAA,GAAG,EAAES,SAAS,CAAC1C,UAAD,EAAaa,eAAb,CAAnB;AAAkD,IAAA,SAAS,YAAKnC,SAAL;AAA3D,KACI;AACI,IAAA,SAAS,YAAKA,SAAL,wBAA4BA,SAA5B,oBADb;AAEI,IAAA,GAAG,EAAEuC;AAFT,IADJ,EAMKc,OANL,EAQI;AACI,IAAA,SAAS,YAAKrD,SAAL,wBAA4BA,SAA5B,uBADb;AAEI,IAAA,GAAG,EAAEyC;AAFT,IARJ,CAhBJ,EA8BK,CAACxB,MAAM,IAAIwC,kBAAX,KACG,2CACQD,gBADR;AAEI,IAAA,SAAS,EAAES,UAAU,WACdjE,SADc,eAEjB,CAACe,kBAAkB,IAAI+B,qBAAvB,eACO9C,SADP,0BAFiB,EAIjBwD,gBAJiB,aAIjBA,gBAJiB,uBAIjBA,gBAAgB,CAAE5C,SAJD;AAFzB,MASKK,MATL,EAUKwC,kBAVL,CA/BR,EA6CKvC,SAAS,IACN;AAAK,IAAA,SAAS,YAAKlB,SAAL;AAAd,KACI,oBAAC,QAAD;AAAU,IAAA,OAAO,EAAEsE,eAAe,CAACC;AAAnC,IADJ,CA9CR,CALJ,CADJ,CAjBJ,CADQ,EA8ERC,QAAQ,CAACC,IA9ED,CADX,GAiFD,IAjFN;AAkFH,CA7KkE;AA8KnEnE,MAAM,CAACoE,WAAP,GAAqB3E,cAArB;AACAO,MAAM,CAACM,SAAP,GAAmBZ,SAAnB;AACAM,MAAM,CAACqE,YAAP,GAAsBzE,aAAtB;;;;"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { Theme } from './components.js';
|
|
3
|
-
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Defines the props of the component.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Component display name.
|
|
12
|
-
*/
|
|
13
|
-
var COMPONENT_NAME = 'Divider';
|
|
14
|
-
/**
|
|
15
|
-
* Component default class name and class prefix.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
var CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
19
|
-
/**
|
|
20
|
-
* Component default props.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
var DEFAULT_PROPS = {
|
|
24
|
-
theme: Theme.light
|
|
25
|
-
};
|
|
26
|
-
/**
|
|
27
|
-
* Divider component.
|
|
28
|
-
*
|
|
29
|
-
* @param props Component props.
|
|
30
|
-
* @param ref Component ref.
|
|
31
|
-
* @return React element.
|
|
32
|
-
*/
|
|
33
|
-
|
|
34
|
-
var Divider = forwardRef(function (props, ref) {
|
|
35
|
-
var className = props.className,
|
|
36
|
-
theme = props.theme,
|
|
37
|
-
forwardedProps = _objectWithoutProperties(props, ["className", "theme"]);
|
|
38
|
-
|
|
39
|
-
return React.createElement("hr", _extends({
|
|
40
|
-
ref: ref
|
|
41
|
-
}, forwardedProps, {
|
|
42
|
-
className: classnames(className, handleBasicClasses({
|
|
43
|
-
prefix: CLASSNAME,
|
|
44
|
-
theme: theme
|
|
45
|
-
}))
|
|
46
|
-
}));
|
|
47
|
-
});
|
|
48
|
-
Divider.displayName = COMPONENT_NAME;
|
|
49
|
-
Divider.className = CLASSNAME;
|
|
50
|
-
Divider.defaultProps = DEFAULT_PROPS;
|
|
51
|
-
|
|
52
|
-
export { DEFAULT_PROPS as D, Divider as a };
|
|
53
|
-
//# sourceMappingURL=Divider2.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Divider2.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DividerProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Divider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nexport const DEFAULT_PROPS: Partial<DividerProps> = {\n theme: Theme.light,\n};\n\n/**\n * Divider component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {\n const { className, theme, ...forwardedProps } = props;\n\n return (\n <hr\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n />\n );\n});\nDivider.displayName = COMPONENT_NAME;\nDivider.className = CLASSNAME;\nDivider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Divider","forwardRef","props","ref","className","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;AAOA;;;;AAKA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;IAGaG,aAAoC,GAAG;AAChDC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADmC;AAIpD;;;;;;;;IAOaC,OAA0C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACzEC,SADyE,GACjCF,KADiC,CACzEE,SADyE;AAAA,MAC9DP,KAD8D,GACjCK,KADiC,CAC9DL,KAD8D;AAAA,MACpDQ,cADoD,4BACjCH,KADiC;;AAGjF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQE,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACF,SAAD,EAAYG,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAV;AAAqBG,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,KADJ;AAOH,CAVmE;AAWpEG,OAAO,CAACS,WAAR,GAAsBhB,cAAtB;AACAO,OAAO,CAACI,SAAR,GAAoBV,SAApB;AACAM,OAAO,CAACU,YAAR,GAAuBd,aAAvB;;;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { Theme, ColorPalette, Size } from './components.js';
|
|
3
|
-
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
-
import { I as Icon, h as mdiDragVertical } from './Icon2.js';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Defines the props of the component.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Component display name.
|
|
13
|
-
*/
|
|
14
|
-
var COMPONENT_NAME = 'DragHandle';
|
|
15
|
-
/**
|
|
16
|
-
* Component default class name and class prefix.
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
var CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
20
|
-
/**
|
|
21
|
-
* DragHandle component.
|
|
22
|
-
*
|
|
23
|
-
* @param props Component props.
|
|
24
|
-
* @param ref Component ref.
|
|
25
|
-
* @return React element.
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
var DragHandle = forwardRef(function (props, ref) {
|
|
29
|
-
var className = props.className,
|
|
30
|
-
theme = props.theme,
|
|
31
|
-
forwardedProps = _objectWithoutProperties(props, ["className", "theme"]);
|
|
32
|
-
|
|
33
|
-
return React.createElement("div", _extends({
|
|
34
|
-
ref: ref
|
|
35
|
-
}, forwardedProps, {
|
|
36
|
-
className: classnames(className, handleBasicClasses({
|
|
37
|
-
prefix: CLASSNAME,
|
|
38
|
-
theme: theme
|
|
39
|
-
}))
|
|
40
|
-
}), React.createElement(Icon, {
|
|
41
|
-
icon: mdiDragVertical,
|
|
42
|
-
color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
|
|
43
|
-
size: Size.xs
|
|
44
|
-
}));
|
|
45
|
-
});
|
|
46
|
-
DragHandle.displayName = COMPONENT_NAME;
|
|
47
|
-
DragHandle.className = CLASSNAME;
|
|
48
|
-
|
|
49
|
-
export { DragHandle as D };
|
|
50
|
-
//# sourceMappingURL=DragHandle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DragHandle.js","sources":["../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { className, theme, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n >\n <Icon\n icon={mdiDragVertical}\n color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n size={Size.xs}\n />\n </div>\n );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","className","theme","forwardedProps","classNames","handleBasicClasses","prefix","mdiDragVertical","Theme","dark","ColorPalette","light","Size","xs","displayName"],"mappings":";;;;;;AAQA;;;;AAKA;;;AAGA,IAAMA,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAChFC,SADgF,GACxCF,KADwC,CAChFE,SADgF;AAAA,MACrEC,KADqE,GACxCH,KADwC,CACrEG,KADqE;AAAA,MAC3DC,cAD2D,4BACxCJ,KADwC;;AAGxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQG,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACH,SAAD,EAAYI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEX,SAAV;AAAqBO,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,MAKI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEK,eADV;AAEI,IAAA,KAAK,EAAEL,KAAK,KAAKM,KAAK,CAACC,IAAhB,GAAuBC,YAAY,CAACC,KAApC,GAA4CD,YAAY,CAACD,IAFpE;AAGI,IAAA,IAAI,EAAEG,IAAI,CAACC;AAHf,IALJ,CADJ;AAaH,CAhB0E;AAiB3EhB,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;AACAG,UAAU,CAACI,SAAX,GAAuBN,SAAvB;;;;"}
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React, { useEffect, forwardRef, useRef, useMemo, cloneElement } from 'react';
|
|
3
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
4
|
-
import { i as isComponent } from './type.js';
|
|
5
|
-
import { a as Popover, P as Placement } from './Popover2.js';
|
|
6
|
-
import { L as List } from './List2.js';
|
|
7
|
-
|
|
8
|
-
// The error margin in px we want to have for triggering infinite scroll
|
|
9
|
-
var SCROLL_TRIGGER_MARGIN = 5;
|
|
10
|
-
/**
|
|
11
|
-
* Listen to clicks away from a given element and callback the passed in function.
|
|
12
|
-
*
|
|
13
|
-
* @param ref A reference to the element on which you want to listen scroll event.
|
|
14
|
-
* @param [callback] A callback function to call when the bottom of the reference element is reached.
|
|
15
|
-
* @param [callbackOnMount] A callback function to call when the component is mounted.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
var useInfiniteScroll = function useInfiniteScroll(ref, callback) {
|
|
19
|
-
var callbackOnMount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
20
|
-
var scrollTriggerMargin = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : SCROLL_TRIGGER_MARGIN;
|
|
21
|
-
useEffect(function () {
|
|
22
|
-
var current = ref.current;
|
|
23
|
-
|
|
24
|
-
if (!callback || !current) {
|
|
25
|
-
return undefined;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
var isAtBottom = function isAtBottom() {
|
|
29
|
-
return Boolean(current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
var onScroll = function onScroll(e) {
|
|
33
|
-
if (isAtBottom()) {
|
|
34
|
-
callback(e);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
if (isAtBottom()) {
|
|
39
|
-
onScroll();
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
current.addEventListener('scroll', onScroll);
|
|
43
|
-
current.addEventListener('resize', onScroll);
|
|
44
|
-
return function () {
|
|
45
|
-
current.removeEventListener('scroll', onScroll);
|
|
46
|
-
current.removeEventListener('resize', onScroll);
|
|
47
|
-
};
|
|
48
|
-
}, [ref, callback, scrollTriggerMargin]);
|
|
49
|
-
useEffect(function () {
|
|
50
|
-
if (callback && callbackOnMount) {
|
|
51
|
-
callback();
|
|
52
|
-
}
|
|
53
|
-
}, [callback, callbackOnMount]);
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Defines the props of the component.
|
|
58
|
-
*/
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Component display name.
|
|
62
|
-
*/
|
|
63
|
-
var COMPONENT_NAME = 'Dropdown';
|
|
64
|
-
/**
|
|
65
|
-
* Component default class name and class prefix.
|
|
66
|
-
*/
|
|
67
|
-
|
|
68
|
-
var CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
69
|
-
/**
|
|
70
|
-
* Component default props.
|
|
71
|
-
*/
|
|
72
|
-
|
|
73
|
-
var DEFAULT_PROPS = {
|
|
74
|
-
closeOnClick: true,
|
|
75
|
-
closeOnClickAway: true,
|
|
76
|
-
closeOnEscape: true,
|
|
77
|
-
fitToAnchorWidth: true,
|
|
78
|
-
fitWithinViewportHeight: true,
|
|
79
|
-
placement: Placement.BOTTOM_START,
|
|
80
|
-
shouldFocusOnOpen: true,
|
|
81
|
-
focusAnchorOnClose: true
|
|
82
|
-
};
|
|
83
|
-
/**
|
|
84
|
-
* Dropdown component.
|
|
85
|
-
*
|
|
86
|
-
* @param props Component props.
|
|
87
|
-
* @param ref Component ref.
|
|
88
|
-
* @return React element.
|
|
89
|
-
*/
|
|
90
|
-
|
|
91
|
-
var Dropdown = forwardRef(function (props, ref) {
|
|
92
|
-
var anchorRef = props.anchorRef,
|
|
93
|
-
children = props.children,
|
|
94
|
-
className = props.className,
|
|
95
|
-
closeOnClick = props.closeOnClick,
|
|
96
|
-
closeOnClickAway = props.closeOnClickAway,
|
|
97
|
-
closeOnEscape = props.closeOnEscape,
|
|
98
|
-
fitToAnchorWidth = props.fitToAnchorWidth,
|
|
99
|
-
fitWithinViewportHeight = props.fitWithinViewportHeight,
|
|
100
|
-
isOpen = props.isOpen,
|
|
101
|
-
offset = props.offset,
|
|
102
|
-
focusAnchorOnClose = props.focusAnchorOnClose,
|
|
103
|
-
onClose = props.onClose,
|
|
104
|
-
onInfiniteScroll = props.onInfiniteScroll,
|
|
105
|
-
placement = props.placement,
|
|
106
|
-
shouldFocusOnOpen = props.shouldFocusOnOpen,
|
|
107
|
-
zIndex = props.zIndex,
|
|
108
|
-
forwardedProps = _objectWithoutProperties(props, ["anchorRef", "children", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "fitWithinViewportHeight", "isOpen", "offset", "focusAnchorOnClose", "onClose", "onInfiniteScroll", "placement", "shouldFocusOnOpen", "zIndex"]);
|
|
109
|
-
|
|
110
|
-
var innerRef = useRef(null);
|
|
111
|
-
var listElement = useRef(null);
|
|
112
|
-
useInfiniteScroll(innerRef, onInfiniteScroll);
|
|
113
|
-
var popperElement = useMemo(function () {
|
|
114
|
-
return !Array.isArray(children) && isComponent(List)(children) ? cloneElement(children, _objectSpread2({}, children.props, {
|
|
115
|
-
ref: listElement,
|
|
116
|
-
onClick: function onClick(evt) {
|
|
117
|
-
var _children$props$onCli, _children$props;
|
|
118
|
-
|
|
119
|
-
(_children$props$onCli = (_children$props = children.props).onClick) === null || _children$props$onCli === void 0 ? void 0 : _children$props$onCli.call(_children$props, evt);
|
|
120
|
-
|
|
121
|
-
if (closeOnClick) {
|
|
122
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
123
|
-
}
|
|
124
|
-
},
|
|
125
|
-
isClickable: true
|
|
126
|
-
})) : children;
|
|
127
|
-
}, [children, closeOnClick, onClose]);
|
|
128
|
-
return isOpen ? React.createElement(Popover, _extends({
|
|
129
|
-
ref: ref
|
|
130
|
-
}, forwardedProps, {
|
|
131
|
-
focusAnchorOnClose: focusAnchorOnClose,
|
|
132
|
-
anchorRef: anchorRef,
|
|
133
|
-
className: classnames(className, handleBasicClasses({
|
|
134
|
-
prefix: CLASSNAME
|
|
135
|
-
})),
|
|
136
|
-
elevation: 0,
|
|
137
|
-
closeOnClickAway: closeOnClickAway,
|
|
138
|
-
closeOnEscape: closeOnEscape,
|
|
139
|
-
fitToAnchorWidth: fitToAnchorWidth,
|
|
140
|
-
fitWithinViewportHeight: fitWithinViewportHeight,
|
|
141
|
-
focusElement: shouldFocusOnOpen ? listElement : undefined,
|
|
142
|
-
isOpen: isOpen,
|
|
143
|
-
offset: offset,
|
|
144
|
-
onClose: onClose,
|
|
145
|
-
placement: placement,
|
|
146
|
-
zIndex: zIndex
|
|
147
|
-
}), React.createElement("div", {
|
|
148
|
-
className: "".concat(CLASSNAME, "__menu"),
|
|
149
|
-
ref: innerRef
|
|
150
|
-
}, popperElement)) : null;
|
|
151
|
-
});
|
|
152
|
-
Dropdown.displayName = COMPONENT_NAME;
|
|
153
|
-
Dropdown.className = CLASSNAME;
|
|
154
|
-
Dropdown.defaultProps = DEFAULT_PROPS;
|
|
155
|
-
|
|
156
|
-
export { Dropdown as D };
|
|
157
|
-
//# sourceMappingURL=Dropdown2.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown2.js","sources":["../../../src/hooks/useInfiniteScroll.tsx","../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\ntype useInfiniteScrollType = (\n ref: React.RefObject<HTMLElement>,\n callback?: EventCallback,\n callbackOnMount?: boolean,\n) => void;\ntype EventCallback = (evt?: Event) => void;\n\n// The error margin in px we want to have for triggering infinite scroll\nconst SCROLL_TRIGGER_MARGIN = 5;\n\n/**\n * Listen to clicks away from a given element and callback the passed in function.\n *\n * @param ref A reference to the element on which you want to listen scroll event.\n * @param [callback] A callback function to call when the bottom of the reference element is reached.\n * @param [callbackOnMount] A callback function to call when the component is mounted.\n */\nexport const useInfiniteScroll: useInfiniteScrollType = (\n ref,\n callback,\n callbackOnMount = false,\n scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,\n) => {\n useEffect(() => {\n const { current } = ref;\n if (!callback || !current) {\n return undefined;\n }\n\n const isAtBottom = () =>\n Boolean(\n current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,\n );\n\n const onScroll = (e?: Event): void => {\n if (isAtBottom()) {\n callback(e);\n }\n };\n\n if (isAtBottom()) {\n onScroll();\n }\n\n current.addEventListener('scroll', onScroll);\n current.addEventListener('resize', onScroll);\n return () => {\n current.removeEventListener('scroll', onScroll);\n current.removeEventListener('resize', onScroll);\n };\n }, [ref, callback, scrollTriggerMargin]);\n\n useEffect(() => {\n if (callback && callbackOnMount) {\n callback();\n }\n }, [callback, callbackOnMount]);\n};\n","import React, { cloneElement, forwardRef, useMemo, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { List, ListProps } from '@lumx/react/components/list/List';\nimport { Offset, Placement, Popover, PopoverProps } from '@lumx/react/components/popover/Popover';\nimport { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DropdownProps extends GenericProps {\n /**\n * Reference to the element around which the dropdown is placed.\n * @see {@link PopoverProps#anchorRef}\n */\n anchorRef: PopoverProps['anchorRef'];\n /** Dropdown content. */\n children: React.ReactNode;\n /**\n * Whether a click anywhere out of the Dropdown would close it or not.\n * @see {@link PopoverProps#closeOnClickAway}\n */\n closeOnClickAway?: boolean;\n /**\n * Whether to close the Dropdown when clicking in it or not.\n */\n closeOnClick?: boolean;\n /**\n * Whether an escape key press would close the Dropdown or not.\n * @see {@link PopoverProps#closeOnEscape}\n */\n closeOnEscape?: boolean;\n /**\n * Whether the dropdown should fit to the anchor width (if dropdown is smaller) or not.\n * @see {@link PopoverProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: boolean;\n /**\n * Whether the dropdown should shrink to fit within the viewport height or not.\n * @see {@link PopoverProps#fitWithinViewportHeight}\n */\n fitWithinViewportHeight?: boolean;\n /**\n * Whether the dropdown should be displayed or not. Useful to control the Dropdown from outside the component.\n * @see {@link PopoverProps#isOpen}\n */\n isOpen: boolean;\n /**\n * Offset applied to the Dropdown position.\n * @see {@link PopoverProps#offset}\n */\n offset?: Offset;\n /**\n * Preferred Dropdown placement against the anchor element.\n * @see {@link PopoverProps#placement}\n */\n placement?: Placement;\n /** Whether the focus should be set on the list when the dropdown is open or not. */\n shouldFocusOnOpen?: boolean;\n /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */\n focusAnchorOnClose?: boolean;\n /**\n * Z-axis position.\n * @see {@link PopoverProps#zIndex}\n */\n zIndex?: number;\n /**\n * On close callback.\n * @see {@link PopoverProps#onClose}\n */\n onClose?(): void;\n /** On scroll end callback. */\n onInfiniteScroll?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dropdown';\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<DropdownProps> = {\n closeOnClick: true,\n closeOnClickAway: true,\n closeOnEscape: true,\n fitToAnchorWidth: true,\n fitWithinViewportHeight: true,\n placement: Placement.BOTTOM_START,\n shouldFocusOnOpen: true,\n focusAnchorOnClose: true,\n};\n\n/**\n * Dropdown component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n anchorRef,\n children,\n className,\n closeOnClick,\n closeOnClickAway,\n closeOnEscape,\n fitToAnchorWidth,\n fitWithinViewportHeight,\n isOpen,\n offset,\n focusAnchorOnClose,\n onClose,\n onInfiniteScroll,\n placement,\n shouldFocusOnOpen,\n zIndex,\n ...forwardedProps\n } = props;\n const innerRef = useRef<HTMLDivElement>(null);\n const listElement = useRef(null);\n\n useInfiniteScroll(innerRef, onInfiniteScroll);\n\n const popperElement = useMemo(() => {\n return !Array.isArray(children) && isComponent(List)(children)\n ? cloneElement<ListProps>(children, {\n ...children.props,\n ref: listElement,\n onClick(evt: MouseEvent) {\n children.props.onClick?.(evt);\n\n if (closeOnClick) {\n onClose?.();\n }\n },\n isClickable: true,\n })\n : children;\n }, [children, closeOnClick, onClose]);\n\n return isOpen ? (\n <Popover\n ref={ref}\n {...forwardedProps}\n focusAnchorOnClose={focusAnchorOnClose}\n anchorRef={anchorRef}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n elevation={0 as any}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n fitToAnchorWidth={fitToAnchorWidth}\n fitWithinViewportHeight={fitWithinViewportHeight}\n focusElement={shouldFocusOnOpen ? listElement : undefined}\n isOpen={isOpen}\n offset={offset}\n onClose={onClose}\n placement={placement}\n zIndex={zIndex}\n >\n <div className={`${CLASSNAME}__menu`} ref={innerRef}>\n {popperElement}\n </div>\n </Popover>\n ) : null;\n});\nDropdown.displayName = COMPONENT_NAME;\nDropdown.className = CLASSNAME;\nDropdown.defaultProps = DEFAULT_PROPS;\n"],"names":["SCROLL_TRIGGER_MARGIN","useInfiniteScroll","ref","callback","callbackOnMount","scrollTriggerMargin","useEffect","current","undefined","isAtBottom","Boolean","scrollHeight","scrollTop","clientHeight","onScroll","e","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","closeOnClick","closeOnClickAway","closeOnEscape","fitToAnchorWidth","fitWithinViewportHeight","placement","Placement","BOTTOM_START","shouldFocusOnOpen","focusAnchorOnClose","Dropdown","forwardRef","props","anchorRef","children","className","isOpen","offset","onClose","onInfiniteScroll","zIndex","forwardedProps","innerRef","useRef","listElement","popperElement","useMemo","Array","isArray","isComponent","List","cloneElement","onClick","evt","isClickable","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, d as _slicedToArray, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { Emphasis, Theme, ColorPalette } from './components.js';
|
|
3
|
-
import React, { forwardRef, Children, useRef, useState, useEffect } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
-
import { i as mdiChevronUp, j as mdiChevronDown } from './Icon2.js';
|
|
6
|
-
import isEmpty from 'lodash/isEmpty';
|
|
7
|
-
import { p as partitionMulti } from './partitionMulti.js';
|
|
8
|
-
import get from 'lodash/get';
|
|
9
|
-
import { i as isComponent } from './type.js';
|
|
10
|
-
import { I as IconButton } from './IconButton.js';
|
|
11
|
-
import isFunction from 'lodash/isFunction';
|
|
12
|
-
import { D as DragHandle } from './DragHandle.js';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Defines the props of the component.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Component display name.
|
|
20
|
-
*/
|
|
21
|
-
var COMPONENT_NAME = 'ExpansionPanel';
|
|
22
|
-
/**
|
|
23
|
-
* Component default class name and class prefix.
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
var CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
27
|
-
/**
|
|
28
|
-
* Component default props.
|
|
29
|
-
*/
|
|
30
|
-
|
|
31
|
-
var DEFAULT_PROPS = {
|
|
32
|
-
theme: Theme.light
|
|
33
|
-
};
|
|
34
|
-
var isDragHandle = isComponent(DragHandle);
|
|
35
|
-
var isHeader = isComponent('header');
|
|
36
|
-
var isFooter = isComponent('footer');
|
|
37
|
-
/**
|
|
38
|
-
* ExpansionPanel component.
|
|
39
|
-
*
|
|
40
|
-
* @param props Component props.
|
|
41
|
-
* @param ref Component ref.
|
|
42
|
-
* @return React element.
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
|
-
var ExpansionPanel = forwardRef(function (props, ref) {
|
|
46
|
-
var className = props.className,
|
|
47
|
-
anyChildren = props.children,
|
|
48
|
-
hasBackground = props.hasBackground,
|
|
49
|
-
hasHeaderDivider = props.hasHeaderDivider,
|
|
50
|
-
isOpen = props.isOpen,
|
|
51
|
-
label = props.label,
|
|
52
|
-
onClose = props.onClose,
|
|
53
|
-
onOpen = props.onOpen,
|
|
54
|
-
onToggleOpen = props.onToggleOpen,
|
|
55
|
-
theme = props.theme,
|
|
56
|
-
toggleButtonProps = props.toggleButtonProps,
|
|
57
|
-
forwardedProps = _objectWithoutProperties(props, ["className", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"]);
|
|
58
|
-
|
|
59
|
-
var children = Children.toArray(anyChildren); // Partition children by types.
|
|
60
|
-
|
|
61
|
-
var _partitionMulti = partitionMulti(children, [isDragHandle, isHeader, isFooter]),
|
|
62
|
-
_partitionMulti2 = _slicedToArray(_partitionMulti, 4),
|
|
63
|
-
_partitionMulti2$ = _slicedToArray(_partitionMulti2[0], 1),
|
|
64
|
-
dragHandle = _partitionMulti2$[0],
|
|
65
|
-
_partitionMulti2$2 = _slicedToArray(_partitionMulti2[1], 1),
|
|
66
|
-
header = _partitionMulti2$2[0],
|
|
67
|
-
_partitionMulti2$3 = _slicedToArray(_partitionMulti2[2], 1),
|
|
68
|
-
footer = _partitionMulti2$3[0],
|
|
69
|
-
content = _partitionMulti2[3]; // Either take the header in children or create one with the label.
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
var headerProps = React.isValidElement(header) ? header.props : {};
|
|
73
|
-
var headerContent = !isEmpty(headerProps.children) ? headerProps.children : React.createElement("span", {
|
|
74
|
-
className: "".concat(CLASSNAME, "__label")
|
|
75
|
-
}, label);
|
|
76
|
-
|
|
77
|
-
var toggleOpen = function toggleOpen() {
|
|
78
|
-
var shouldOpen = !isOpen;
|
|
79
|
-
|
|
80
|
-
if (isFunction(onOpen) && shouldOpen) {
|
|
81
|
-
onOpen();
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
if (isFunction(onClose) && !shouldOpen) {
|
|
85
|
-
onClose();
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
if (isFunction(onToggleOpen)) {
|
|
89
|
-
onToggleOpen(shouldOpen);
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
var color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
|
|
94
|
-
var rootClassName = classnames(className, handleBasicClasses({
|
|
95
|
-
hasBackground: hasBackground,
|
|
96
|
-
hasHeader: Boolean(!isEmpty(headerProps.children)),
|
|
97
|
-
hasHeaderDivider: hasHeaderDivider,
|
|
98
|
-
isClose: !isOpen,
|
|
99
|
-
isDraggable: Boolean(dragHandle),
|
|
100
|
-
isOpen: isOpen,
|
|
101
|
-
prefix: CLASSNAME,
|
|
102
|
-
theme: theme
|
|
103
|
-
}));
|
|
104
|
-
var wrapperRef = useRef(null);
|
|
105
|
-
|
|
106
|
-
var isContentVisible = function isContentVisible() {
|
|
107
|
-
return get(wrapperRef.current, 'clientHeight', 0) > 0;
|
|
108
|
-
}; // Switch max height on/off to activate the CSS transition (updates when children changes).
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
var _useState = useState('0'),
|
|
112
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
113
|
-
maxHeight = _useState2[0],
|
|
114
|
-
setMaxHeight = _useState2[1];
|
|
115
|
-
|
|
116
|
-
useEffect(function () {
|
|
117
|
-
var height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
|
|
118
|
-
setMaxHeight("".concat(height, "px"));
|
|
119
|
-
}, [children, isOpen]);
|
|
120
|
-
return React.createElement("section", _extends({
|
|
121
|
-
ref: ref
|
|
122
|
-
}, forwardedProps, {
|
|
123
|
-
className: rootClassName
|
|
124
|
-
}), React.createElement("header", {
|
|
125
|
-
className: "".concat(CLASSNAME, "__header"),
|
|
126
|
-
onClick: toggleOpen
|
|
127
|
-
}, dragHandle && React.createElement("div", {
|
|
128
|
-
className: "".concat(CLASSNAME, "__header-drag")
|
|
129
|
-
}, dragHandle), React.createElement("div", _extends({}, headerProps, {
|
|
130
|
-
className: "".concat(CLASSNAME, "__header-content")
|
|
131
|
-
}), headerContent), React.createElement("div", {
|
|
132
|
-
className: "".concat(CLASSNAME, "__header-toggle")
|
|
133
|
-
}, React.createElement(IconButton, _extends({}, toggleButtonProps, {
|
|
134
|
-
color: color,
|
|
135
|
-
emphasis: Emphasis.low,
|
|
136
|
-
icon: isOpen ? mdiChevronUp : mdiChevronDown
|
|
137
|
-
})))), (isOpen || isContentVisible()) && React.createElement("div", {
|
|
138
|
-
className: "".concat(CLASSNAME, "__wrapper"),
|
|
139
|
-
style: {
|
|
140
|
-
maxHeight: maxHeight
|
|
141
|
-
}
|
|
142
|
-
}, React.createElement("div", {
|
|
143
|
-
className: "".concat(CLASSNAME, "__container"),
|
|
144
|
-
ref: wrapperRef
|
|
145
|
-
}, React.createElement("div", {
|
|
146
|
-
className: "".concat(CLASSNAME, "__content")
|
|
147
|
-
}, content), footer && React.createElement("div", {
|
|
148
|
-
className: "".concat(CLASSNAME, "__footer")
|
|
149
|
-
}, footer))));
|
|
150
|
-
});
|
|
151
|
-
ExpansionPanel.displayName = COMPONENT_NAME;
|
|
152
|
-
ExpansionPanel.className = CLASSNAME;
|
|
153
|
-
ExpansionPanel.defaultProps = DEFAULT_PROPS;
|
|
154
|
-
|
|
155
|
-
export { ExpansionPanel as E };
|
|
156
|
-
//# sourceMappingURL=ExpansionPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionPanel.js","sources":["../../../src/components/expansion-panel/ExpansionPanel.tsx"],"sourcesContent":["import React, { Children, forwardRef, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\n\nimport get from 'lodash/get';\nimport isEmpty from 'lodash/isEmpty';\nimport isFunction from 'lodash/isFunction';\n\nimport { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';\nimport {\n Callback,\n Comp,\n GenericProps,\n getRootClassName,\n handleBasicClasses,\n HasTheme,\n isComponent,\n partitionMulti,\n} from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface ExpansionPanelProps extends GenericProps, HasTheme {\n /** Whether the expansion panel has a background. */\n hasBackground?: boolean;\n /** Whether the header has a divider. */\n hasHeaderDivider?: boolean;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Label text (overwritten if a `<header>` is provided in the children). */\n label?: string;\n /** On open callback. */\n onOpen?: Callback;\n /** On close callback. */\n onClose?: Callback;\n /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */\n toggleButtonProps: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n /** On toggle open or close callback. */\n onToggleOpen?(shouldOpen: boolean): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ExpansionPanel';\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<ExpansionPanelProps> = {\n theme: Theme.light,\n};\n\nconst isDragHandle = isComponent(DragHandle);\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * ExpansionPanel component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n className,\n children: anyChildren,\n hasBackground,\n hasHeaderDivider,\n isOpen,\n label,\n onClose,\n onOpen,\n onToggleOpen,\n theme,\n toggleButtonProps,\n ...forwardedProps\n } = props;\n\n const children: ReactNode[] = Children.toArray(anyChildren);\n\n // Partition children by types.\n const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);\n\n // Either take the header in children or create one with the label.\n const headerProps: PropsWithChildren<any> = React.isValidElement(header) ? header.props : {};\n const headerContent = !isEmpty(headerProps.children) ? (\n headerProps.children\n ) : (\n <span className={`${CLASSNAME}__label`}>{label}</span>\n );\n\n const toggleOpen = () => {\n const shouldOpen = !isOpen;\n if (isFunction(onOpen) && shouldOpen) {\n onOpen();\n }\n if (isFunction(onClose) && !shouldOpen) {\n onClose();\n }\n if (isFunction(onToggleOpen)) {\n onToggleOpen(shouldOpen);\n }\n };\n\n const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;\n\n const rootClassName = classNames(\n className,\n handleBasicClasses({\n hasBackground,\n hasHeader: Boolean(!isEmpty(headerProps.children)),\n hasHeaderDivider,\n isClose: !isOpen,\n isDraggable: Boolean(dragHandle),\n isOpen,\n prefix: CLASSNAME,\n theme,\n }),\n );\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const isContentVisible = (): boolean => get(wrapperRef.current, 'clientHeight', 0) > 0;\n\n // Switch max height on/off to activate the CSS transition (updates when children changes).\n const [maxHeight, setMaxHeight] = useState('0');\n useEffect(() => {\n const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;\n setMaxHeight(`${height}px`);\n }, [children, isOpen]);\n\n return (\n <section ref={ref} {...forwardedProps} className={rootClassName}>\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n <header className={`${CLASSNAME}__header`} onClick={toggleOpen}>\n {dragHandle && <div className={`${CLASSNAME}__header-drag`}>{dragHandle}</div>}\n\n <div {...headerProps} className={`${CLASSNAME}__header-content`}>\n {headerContent}\n </div>\n\n <div className={`${CLASSNAME}__header-toggle`}>\n <IconButton\n {...toggleButtonProps}\n color={color}\n emphasis={Emphasis.low}\n icon={isOpen ? mdiChevronUp : mdiChevronDown}\n />\n </div>\n </header>\n\n {(isOpen || isContentVisible()) && (\n <div className={`${CLASSNAME}__wrapper`} style={{ maxHeight }}>\n <div className={`${CLASSNAME}__container`} ref={wrapperRef}>\n <div className={`${CLASSNAME}__content`}>{content}</div>\n\n {footer && <div className={`${CLASSNAME}__footer`}>{footer}</div>}\n </div>\n </div>\n )}\n </section>\n );\n});\nExpansionPanel.displayName = COMPONENT_NAME;\nExpansionPanel.className = CLASSNAME;\nExpansionPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","isDragHandle","isComponent","DragHandle","isHeader","isFooter","ExpansionPanel","forwardRef","props","ref","className","anyChildren","children","hasBackground","hasHeaderDivider","isOpen","label","onClose","onOpen","onToggleOpen","toggleButtonProps","forwardedProps","Children","toArray","partitionMulti","dragHandle","header","footer","content","headerProps","React","isValidElement","headerContent","isEmpty","toggleOpen","shouldOpen","isFunction","color","dark","ColorPalette","rootClassName","classNames","handleBasicClasses","hasHeader","Boolean","isClose","isDraggable","prefix","wrapperRef","useRef","isContentVisible","get","current","useState","maxHeight","setMaxHeight","useEffect","height","Emphasis","low","mdiChevronUp","mdiChevronDown","displayName","defaultProps"],"mappings":"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"}
|
package/esm/_internal/Flag2.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { Size, Theme, ColorPalette } from './components.js';
|
|
3
|
-
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
-
import { I as Icon } from './Icon2.js';
|
|
6
|
-
|
|
7
|
-
var COMPONENT_NAME = 'Flag';
|
|
8
|
-
var CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
9
|
-
var DEFAULT_PROPS = {
|
|
10
|
-
theme: Theme.light
|
|
11
|
-
};
|
|
12
|
-
/**
|
|
13
|
-
* Flag component.
|
|
14
|
-
*
|
|
15
|
-
* @param props Component props.
|
|
16
|
-
* @param ref Component ref.
|
|
17
|
-
* @return React element.
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
var Flag = forwardRef(function (props, ref) {
|
|
21
|
-
var label = props.label,
|
|
22
|
-
icon = props.icon,
|
|
23
|
-
color = props.color,
|
|
24
|
-
className = props.className,
|
|
25
|
-
theme = props.theme,
|
|
26
|
-
forwardedProps = _objectWithoutProperties(props, ["label", "icon", "color", "className", "theme"]);
|
|
27
|
-
|
|
28
|
-
var flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
|
|
29
|
-
return React.createElement("div", _extends({}, forwardedProps, {
|
|
30
|
-
className: classnames(className, handleBasicClasses({
|
|
31
|
-
prefix: CLASSNAME,
|
|
32
|
-
color: flagColor
|
|
33
|
-
})),
|
|
34
|
-
ref: ref
|
|
35
|
-
}), icon && React.createElement(Icon, {
|
|
36
|
-
icon: icon,
|
|
37
|
-
size: Size.xxs,
|
|
38
|
-
className: "".concat(CLASSNAME, "__icon")
|
|
39
|
-
}), React.createElement("span", {
|
|
40
|
-
className: "".concat(CLASSNAME, "__label")
|
|
41
|
-
}, label));
|
|
42
|
-
});
|
|
43
|
-
Flag.displayName = COMPONENT_NAME;
|
|
44
|
-
Flag.className = CLASSNAME;
|
|
45
|
-
Flag.defaultProps = DEFAULT_PROPS;
|
|
46
|
-
|
|
47
|
-
export { Flag as F };
|
|
48
|
-
//# sourceMappingURL=Flag2.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Flag2.js","sources":["../../../src/components/flag/Flag.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps, HasTheme {\n /** Color of the component. */\n color?: ColorPalette;\n /** Icon to use before the label. */\n icon?: string;\n /** Text label of the flag. */\n label: string;\n}\n\nconst COMPONENT_NAME = 'Flag';\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\nconst DEFAULT_PROPS: Partial<FlagProps> = {\n theme: Theme.light,\n};\n\n/**\n * Flag component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { label, icon, color, className, theme, ...forwardedProps } = props;\n const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n return (\n <div\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}\n ref={ref}\n >\n {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}\n <span className={`${CLASSNAME}__label`}>{label}</span>\n </div>\n );\n});\nFlag.displayName = COMPONENT_NAME;\nFlag.className = CLASSNAME;\nFlag.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Flag","forwardRef","props","ref","label","icon","color","className","forwardedProps","flagColor","ColorPalette","dark","classNames","handleBasicClasses","prefix","Size","xxs","displayName","defaultProps"],"mappings":";;;;;;AAeA,IAAMA,cAAc,GAAG,MAAvB;AACA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AACA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADyB,CAA1C;AAIA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,KADoE,GACRF,KADQ,CACpEE,KADoE;AAAA,MAC7DC,IAD6D,GACRH,KADQ,CAC7DG,IAD6D;AAAA,MACvDC,KADuD,GACRJ,KADQ,CACvDI,KADuD;AAAA,MAChDC,SADgD,GACRL,KADQ,CAChDK,SADgD;AAAA,MACrCV,KADqC,GACRK,KADQ,CACrCL,KADqC;AAAA,MAC3BW,cAD2B,4BACRN,KADQ;;AAE5E,MAAMO,SAAS,GAAGH,KAAK,KAAKT,KAAK,KAAKC,KAAK,CAACC,KAAhB,GAAwBW,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACX,KAA9D,CAAvB;AAEA,SACI,wCACQS,cADR;AAEI,IAAA,SAAS,EAAEI,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAV;AAAqBY,MAAAA,KAAK,EAAEG;AAA5B,KAAD,CAA9B,CAFzB;AAGI,IAAA,GAAG,EAAEN;AAHT,MAKKE,IAAI,IAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAEU,IAAI,CAACC,GAA7B;AAAkC,IAAA,SAAS,YAAKtB,SAAL;AAA3C,IALb,EAMI;AAAM,IAAA,SAAS,YAAKA,SAAL;AAAf,KAAyCU,KAAzC,CANJ,CADJ;AAUH,CAd8D;AAe/DJ,IAAI,CAACiB,WAAL,GAAmBxB,cAAnB;AACAO,IAAI,CAACO,SAAL,GAAiBb,SAAjB;AACAM,IAAI,CAACkB,YAAL,GAAoBtB,aAApB;;;;"}
|