@lumx/react 2.2.18-alpha-hooks.1 → 2.2.20-alpha-type.1
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/{alertdialog.1.js → AlertDialog.js} +8 -8
- package/esm/_internal/AlertDialog.js.map +1 -0
- package/esm/_internal/{autocompletemultiple.2.js → AutocompleteMultiple.js} +9 -9
- package/esm/_internal/AutocompleteMultiple.js.map +1 -0
- package/esm/_internal/{avatar.3.js → Avatar2.js} +4 -4
- package/esm/_internal/Avatar2.js.map +1 -0
- package/esm/_internal/{badge.4.js → Badge2.js} +3 -3
- package/esm/_internal/Badge2.js.map +1 -0
- package/esm/_internal/{button.5.js → Button2.js} +5 -5
- package/esm/_internal/Button2.js.map +1 -0
- package/esm/_internal/{buttongroup.7.js → ButtonGroup.js} +3 -3
- package/esm/_internal/ButtonGroup.js.map +1 -0
- package/esm/_internal/{buttonroot.57.js → ButtonRoot.js} +4 -4
- package/esm/_internal/ButtonRoot.js.map +1 -0
- package/esm/_internal/{checkbox.8.js → Checkbox2.js} +10 -8
- package/esm/_internal/Checkbox2.js.map +1 -0
- package/esm/_internal/{chip.9.js → Chip2.js} +3 -3
- package/esm/_internal/Chip2.js.map +1 -0
- package/esm/_internal/{chipgroup.10.js → ChipGroup.js} +3 -3
- package/esm/_internal/ChipGroup.js.map +1 -0
- package/esm/_internal/ClickAwayProvider.js +194 -0
- package/esm/_internal/ClickAwayProvider.js.map +1 -0
- package/esm/_internal/{commentblock.11.js → CommentBlock.js} +5 -5
- package/esm/_internal/CommentBlock.js.map +1 -0
- package/esm/_internal/{datepickerfield.12.js → DatePickerField.js} +27 -20
- package/esm/_internal/DatePickerField.js.map +1 -0
- package/esm/_internal/{dialog.13.js → Dialog2.js} +13 -13
- package/esm/_internal/Dialog2.js.map +1 -0
- package/esm/_internal/{divider.14.js → Divider2.js} +3 -3
- package/esm/_internal/Divider2.js.map +1 -0
- package/esm/_internal/{draghandle.15.js → DragHandle.js} +4 -4
- package/esm/_internal/DragHandle.js.map +1 -0
- package/esm/_internal/{dropdown.16.js → Dropdown2.js} +6 -6
- package/esm/_internal/Dropdown2.js.map +1 -0
- package/esm/_internal/{expansionpanel.17.js → ExpansionPanel.js} +8 -8
- package/esm/_internal/ExpansionPanel.js.map +1 -0
- package/esm/_internal/{flag.18.js → Flag2.js} +4 -4
- package/esm/_internal/Flag2.js.map +1 -0
- package/esm/_internal/{flexbox.19.js → FlexBox.js} +3 -3
- package/esm/_internal/FlexBox.js.map +1 -0
- package/esm/_internal/GenericBlock.js +90 -0
- package/esm/_internal/GenericBlock.js.map +1 -0
- package/esm/_internal/{griditem.20.js → GridItem.js} +3 -3
- package/esm/_internal/GridItem.js.map +1 -0
- package/esm/_internal/{icon.21.js → Icon2.js} +3 -3
- package/esm/_internal/Icon2.js.map +1 -0
- package/esm/_internal/{iconbutton.6.js → IconButton.js} +6 -6
- package/esm/_internal/IconButton.js.map +1 -0
- package/esm/_internal/{imageblock.22.js → ImageBlock.js} +4 -4
- package/esm/_internal/ImageBlock.js.map +1 -0
- package/esm/_internal/{inputhelper.23.js → InputHelper.js} +3 -3
- package/esm/_internal/InputHelper.js.map +1 -0
- package/esm/_internal/{inputlabel.24.js → InputLabel.js} +3 -3
- package/esm/_internal/InputLabel.js.map +1 -0
- package/esm/_internal/{lightbox.25.js → Lightbox2.js} +12 -12
- package/esm/_internal/Lightbox2.js.map +1 -0
- package/esm/_internal/{link.26.js → Link2.js} +5 -5
- package/esm/_internal/Link2.js.map +1 -0
- package/esm/_internal/{linkpreview.27.js → LinkPreview.js} +26 -16
- package/esm/_internal/LinkPreview.js.map +1 -0
- package/esm/_internal/{list.28.js → List2.js} +6 -6
- package/esm/_internal/List2.js.map +1 -0
- package/esm/_internal/{listsubheader.29.js → ListSubheader.js} +3 -3
- package/esm/_internal/ListSubheader.js.map +1 -0
- package/esm/_internal/{message.30.js → Message2.js} +4 -4
- package/esm/_internal/Message2.js.map +1 -0
- package/esm/_internal/{mosaic.31.js → Mosaic2.js} +4 -4
- package/esm/_internal/Mosaic2.js.map +1 -0
- package/esm/_internal/{notification.32.js → Notification2.js} +7 -7
- package/esm/_internal/Notification2.js.map +1 -0
- package/esm/_internal/{popover.33.js → Popover2.js} +51 -15
- package/esm/_internal/Popover2.js.map +1 -0
- package/esm/_internal/{postblock.34.js → PostBlock.js} +5 -5
- package/esm/_internal/PostBlock.js.map +1 -0
- package/esm/_internal/{progress.35.js → Progress2.js} +3 -3
- package/esm/_internal/Progress2.js.map +1 -0
- package/esm/_internal/{progresstrackersteppanel.36.js → ProgressTrackerStepPanel.js} +8 -8
- package/esm/_internal/ProgressTrackerStepPanel.js.map +1 -0
- package/esm/_internal/{radiogroup.37.js → RadioGroup.js} +6 -6
- package/esm/_internal/RadioGroup.js.map +1 -0
- package/esm/_internal/{selectmultiple.38.js → SelectMultiple.js} +28 -16
- package/esm/_internal/SelectMultiple.js.map +1 -0
- package/esm/_internal/{sidenavigationitem.39.js → SideNavigationItem.js} +15 -11
- package/esm/_internal/SideNavigationItem.js.map +1 -0
- package/esm/_internal/{skeletontypography.40.js → SkeletonTypography.js} +3 -3
- package/esm/_internal/SkeletonTypography.js.map +1 -0
- package/esm/_internal/{slider.41.js → Slider2.js} +6 -6
- package/esm/_internal/Slider2.js.map +1 -0
- package/esm/_internal/{slides.42.js → Slides.js} +8 -8
- package/esm/_internal/Slides.js.map +1 -0
- package/esm/_internal/{switch.43.js → Switch2.js} +6 -6
- package/esm/_internal/Switch2.js.map +1 -0
- package/esm/_internal/{tabpanel.45.js → TabPanel.js} +6 -6
- package/esm/_internal/TabPanel.js.map +1 -0
- package/esm/_internal/{tablerow.44.js → TableRow.js} +4 -4
- package/esm/_internal/TableRow.js.map +1 -0
- package/esm/_internal/{textfield.46.js → TextField.js} +9 -9
- package/esm/_internal/TextField.js.map +1 -0
- package/esm/_internal/{thumbnail.47.js → Thumbnail2.js} +6 -6
- package/esm/_internal/Thumbnail2.js.map +1 -0
- package/esm/_internal/{toolbar.49.js → Toolbar2.js} +3 -3
- package/esm/_internal/Toolbar2.js.map +1 -0
- package/esm/_internal/{tooltip.50.js → Tooltip2.js} +17 -19
- package/esm/_internal/Tooltip2.js.map +1 -0
- package/esm/_internal/{uploader.51.js → Uploader2.js} +4 -4
- package/esm/_internal/Uploader2.js.map +1 -0
- package/esm/_internal/{userblock.52.js → UserBlock.js} +14 -7
- package/esm/_internal/UserBlock.js.map +1 -0
- package/esm/_internal/{_rolluppluginbabelhelpers.53.js → _rollupPluginBabelHelpers.js} +1 -1
- package/esm/_internal/_rollupPluginBabelHelpers.js.map +1 -0
- package/esm/_internal/alert-dialog.js +20 -20
- package/esm/_internal/autocomplete.js +22 -22
- package/esm/_internal/avatar.js +6 -6
- package/esm/_internal/badge.js +3 -3
- package/esm/_internal/button.js +16 -16
- package/esm/_internal/checkbox.js +7 -7
- package/esm/_internal/chip.js +4 -4
- package/esm/_internal/comment-block.js +14 -14
- package/esm/_internal/components.js +1 -1
- package/esm/_internal/{constants.59.js → constants.js} +1 -1
- package/esm/_internal/constants.js.map +1 -0
- package/esm/_internal/date-picker.js +20 -20
- package/esm/_internal/dialog.js +13 -13
- package/esm/_internal/divider.js +3 -3
- package/esm/_internal/drag-handle.js +4 -4
- package/esm/_internal/dropdown.js +12 -12
- package/esm/_internal/expansion-panel.js +17 -18
- package/esm/_internal/expansion-panel.js.map +1 -1
- package/esm/_internal/flag.js +4 -4
- package/esm/_internal/flex-box.js +3 -3
- package/esm/_internal/generic-block.js +12 -0
- package/esm/_internal/generic-block.js.map +1 -0
- package/esm/_internal/{getrootclassname.54.js → getRootClassName.js} +2 -2
- package/esm/_internal/getRootClassName.js.map +1 -0
- package/esm/_internal/grid.js +3 -3
- package/esm/_internal/icon.js +3 -3
- package/esm/_internal/image-block.js +6 -6
- package/esm/_internal/input-helper.js +3 -3
- package/esm/_internal/input-label.js +3 -3
- package/esm/_internal/lightbox.js +18 -18
- package/esm/_internal/link-preview.js +8 -8
- package/esm/_internal/link.js +5 -5
- package/esm/_internal/list.js +7 -7
- package/esm/_internal/{mergerefs.56.js → mergeRefs.js} +1 -1
- package/esm/_internal/mergeRefs.js.map +1 -0
- package/esm/_internal/message.js +4 -4
- package/esm/_internal/mosaic.js +6 -6
- package/esm/_internal/notification.js +9 -9
- package/esm/_internal/{partitionmulti.62.js → partitionMulti.js} +1 -1
- package/esm/_internal/partitionMulti.js.map +1 -0
- package/esm/_internal/popover.js +8 -8
- package/esm/_internal/post-block.js +7 -7
- package/esm/_internal/progress-tracker.js +9 -9
- package/esm/_internal/progress.js +3 -3
- package/esm/_internal/radio-button.js +6 -6
- package/esm/_internal/{renderlink.65.js → renderLink.js} +2 -2
- package/esm/_internal/renderLink.js.map +1 -0
- package/esm/_internal/select.js +21 -21
- package/esm/_internal/side-navigation.js +16 -16
- package/esm/_internal/skeleton.js +3 -3
- package/esm/_internal/slider.js +6 -6
- package/esm/_internal/slideshow.js +15 -15
- package/esm/_internal/switch.js +6 -6
- package/esm/_internal/table.js +4 -4
- package/esm/_internal/tabs.js +7 -7
- package/esm/_internal/text-field.js +17 -17
- package/esm/_internal/thumbnail.js +6 -6
- package/esm/_internal/toolbar.js +3 -3
- package/esm/_internal/tooltip.js +10 -10
- package/esm/_internal/{type.64.js → type.js} +1 -1
- package/esm/_internal/type.js.map +1 -0
- package/esm/_internal/{types.48.js → types.js} +3 -2
- package/esm/_internal/types.js.map +1 -0
- package/esm/_internal/uploader.js +4 -4
- package/esm/_internal/{usedelayedvisibility.63.js → useDelayedVisibility.js} +2 -2
- package/esm/_internal/useDelayedVisibility.js.map +1 -0
- package/esm/_internal/{usedisablebodyscroll.61.js → useDisableBodyScroll.js} +1 -1
- package/esm/_internal/useDisableBodyScroll.js.map +1 -0
- package/esm/_internal/useFocusTrap.js +86 -0
- package/esm/_internal/useFocusTrap.js.map +1 -0
- package/esm/_internal/{userovingtabindex.66.js → useRovingTabIndex.js} +3 -3
- package/esm/_internal/useRovingTabIndex.js.map +1 -0
- package/esm/_internal/user-block.js +10 -9
- package/esm/_internal/user-block.js.map +1 -1
- package/esm/index.js +91 -0
- package/{index.js.map → esm/index.js.map} +1 -1
- package/esm/{_internal/index.55.js → index2.js} +1 -1
- package/esm/index2.js.map +1 -0
- package/package.json +9 -12
- package/src/components/autocomplete/Autocomplete.tsx +4 -4
- package/src/components/button/Button.stories.tsx +1 -0
- package/src/components/button/ButtonRoot.tsx +4 -4
- package/src/components/checkbox/Checkbox.tsx +2 -1
- package/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap +4 -0
- package/src/components/date-picker/DatePickerField.tsx +15 -16
- package/src/components/date-picker/types.ts +2 -2
- package/src/components/dialog/Dialog.stories.tsx +61 -14
- package/src/components/dialog/Dialog.tsx +3 -3
- package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +167 -91
- package/src/components/dropdown/Dropdown.tsx +4 -3
- package/src/components/generic-block/GenericBlock.stories.tsx +149 -0
- package/src/components/generic-block/GenericBlock.test.tsx +28 -0
- package/src/components/generic-block/GenericBlock.tsx +120 -0
- package/src/components/generic-block/__snapshots__/GenericBlock.test.tsx.snap +92 -0
- package/src/components/generic-block/index.ts +1 -0
- package/src/components/lightbox/Lightbox.tsx +1 -1
- package/src/components/link-preview/LinkPreview.test.tsx +50 -55
- package/src/components/link-preview/LinkPreview.tsx +43 -16
- package/src/components/popover/Popover.tsx +20 -4
- package/src/components/select/Select.stories.tsx +2 -0
- package/src/components/select/Select.tsx +11 -1
- package/src/components/select/SelectMultiple.stories.tsx +2 -0
- package/src/components/select/SelectMultiple.tsx +11 -1
- package/src/components/select/constants.ts +2 -0
- package/src/components/side-navigation/SideNavigation.stories.tsx +26 -0
- package/src/components/side-navigation/SideNavigationItem.test.tsx +19 -2
- package/src/components/side-navigation/SideNavigationItem.tsx +10 -2
- package/src/components/side-navigation/__snapshots__/SideNavigationItem.test.tsx.snap +1 -1
- package/src/components/table/__snapshots__/Table.test.tsx.snap +5 -0
- package/src/components/text-field/TextField.tsx +4 -4
- package/src/components/thumbnail/Thumbnail.tsx +2 -2
- package/src/components/thumbnail/index.ts +1 -0
- package/src/components/tooltip/Tooltip.tsx +2 -5
- package/src/components/tooltip/useTooltipOpen.tsx +7 -4
- package/src/components/user-block/UserBlock.stories.tsx +4 -4
- package/src/components/user-block/UserBlock.tsx +9 -3
- package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +51 -8
- package/src/hooks/useBooleanState.tsx +4 -10
- package/src/hooks/useCallbackOnEscape.ts +21 -13
- package/src/hooks/useFocusTrap.ts +67 -76
- package/src/index.ts +1 -0
- package/src/stories/generated/Dialog/Demos.stories.tsx +1 -0
- package/src/stories/generated/GenericBlock/Demos.stories.tsx +6 -0
- package/src/utils/focus/getFirstAndLastFocusable.test.ts +134 -0
- package/src/utils/focus/getFirstAndLastFocusable.ts +27 -0
- package/src/utils/makeListenerTowerContext.ts +32 -0
- package/src/utils/type.ts +3 -0
- package/{index.d.ts → types.d.ts} +82 -22
- package/esm/_internal/_rolluppluginbabelhelpers.53.js.map +0 -1
- package/esm/_internal/alertdialog.1.js.map +0 -1
- package/esm/_internal/autocompletemultiple.2.js.map +0 -1
- package/esm/_internal/avatar.3.js.map +0 -1
- package/esm/_internal/badge.4.js.map +0 -1
- package/esm/_internal/button.5.js.map +0 -1
- package/esm/_internal/buttongroup.7.js.map +0 -1
- package/esm/_internal/buttonroot.57.js.map +0 -1
- package/esm/_internal/checkbox.8.js.map +0 -1
- package/esm/_internal/chip.9.js.map +0 -1
- package/esm/_internal/chipgroup.10.js.map +0 -1
- package/esm/_internal/clickawayprovider.60.js +0 -116
- package/esm/_internal/clickawayprovider.60.js.map +0 -1
- package/esm/_internal/commentblock.11.js.map +0 -1
- package/esm/_internal/constants.59.js.map +0 -1
- package/esm/_internal/datepickerfield.12.js.map +0 -1
- package/esm/_internal/dialog.13.js.map +0 -1
- package/esm/_internal/divider.14.js.map +0 -1
- package/esm/_internal/draghandle.15.js.map +0 -1
- package/esm/_internal/dropdown.16.js.map +0 -1
- package/esm/_internal/expansionpanel.17.js.map +0 -1
- package/esm/_internal/flag.18.js.map +0 -1
- package/esm/_internal/flexbox.19.js.map +0 -1
- package/esm/_internal/getrootclassname.54.js.map +0 -1
- package/esm/_internal/griditem.20.js.map +0 -1
- package/esm/_internal/icon.21.js.map +0 -1
- package/esm/_internal/iconbutton.6.js.map +0 -1
- package/esm/_internal/imageblock.22.js.map +0 -1
- package/esm/_internal/index.55.js.map +0 -1
- package/esm/_internal/inputhelper.23.js.map +0 -1
- package/esm/_internal/inputlabel.24.js.map +0 -1
- package/esm/_internal/lightbox.25.js.map +0 -1
- package/esm/_internal/link.26.js.map +0 -1
- package/esm/_internal/linkpreview.27.js.map +0 -1
- package/esm/_internal/list.28.js.map +0 -1
- package/esm/_internal/listsubheader.29.js.map +0 -1
- package/esm/_internal/mergerefs.56.js.map +0 -1
- package/esm/_internal/message.30.js.map +0 -1
- package/esm/_internal/mosaic.31.js.map +0 -1
- package/esm/_internal/notification.32.js.map +0 -1
- package/esm/_internal/partitionmulti.62.js.map +0 -1
- package/esm/_internal/popover.33.js.map +0 -1
- package/esm/_internal/postblock.34.js.map +0 -1
- package/esm/_internal/progress.35.js.map +0 -1
- package/esm/_internal/progresstrackersteppanel.36.js.map +0 -1
- package/esm/_internal/radiogroup.37.js.map +0 -1
- package/esm/_internal/renderlink.65.js.map +0 -1
- package/esm/_internal/selectmultiple.38.js.map +0 -1
- package/esm/_internal/sidenavigationitem.39.js.map +0 -1
- package/esm/_internal/skeletontypography.40.js.map +0 -1
- package/esm/_internal/slider.41.js.map +0 -1
- package/esm/_internal/slides.42.js.map +0 -1
- package/esm/_internal/switch.43.js.map +0 -1
- package/esm/_internal/tablerow.44.js.map +0 -1
- package/esm/_internal/tabpanel.45.js.map +0 -1
- package/esm/_internal/textfield.46.js.map +0 -1
- package/esm/_internal/thumbnail.47.js.map +0 -1
- package/esm/_internal/toolbar.49.js.map +0 -1
- package/esm/_internal/tooltip.50.js.map +0 -1
- package/esm/_internal/type.64.js.map +0 -1
- package/esm/_internal/types.48.js.map +0 -1
- package/esm/_internal/uploader.51.js.map +0 -1
- package/esm/_internal/usedelayedvisibility.63.js.map +0 -1
- package/esm/_internal/usedisablebodyscroll.61.js.map +0 -1
- package/esm/_internal/usefocustrap.58.js +0 -93
- package/esm/_internal/usefocustrap.58.js.map +0 -1
- package/esm/_internal/userblock.52.js.map +0 -1
- package/esm/_internal/userovingtabindex.66.js.map +0 -1
- package/hooks/useFocusWithin.d.ts +0 -16
- package/hooks/useFocusWithin.js +0 -28
- package/hooks/useFocusWithin.js.map +0 -1
- package/index.js +0 -90
- package/src/components/link-preview/__snapshots__/LinkPreview.test.tsx.snap +0 -51
|
@@ -0,0 +1 @@
|
|
|
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,15 +1,15 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, d as _slicedToArray, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, d as _slicedToArray, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Emphasis, Theme, ColorPalette } from './components.js';
|
|
3
3
|
import React, { forwardRef, Children, useRef, useState, useEffect } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
5
|
-
import { i as mdiChevronUp, j as mdiChevronDown } from './
|
|
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
6
|
import isEmpty from 'lodash/isEmpty';
|
|
7
|
-
import { p as partitionMulti } from './
|
|
7
|
+
import { p as partitionMulti } from './partitionMulti.js';
|
|
8
8
|
import get from 'lodash/get';
|
|
9
|
-
import { i as isComponent } from './type.
|
|
10
|
-
import { I as IconButton } from './
|
|
9
|
+
import { i as isComponent } from './type.js';
|
|
10
|
+
import { I as IconButton } from './IconButton.js';
|
|
11
11
|
import isFunction from 'lodash/isFunction';
|
|
12
|
-
import { D as DragHandle } from './
|
|
12
|
+
import { D as DragHandle } from './DragHandle.js';
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Defines the props of the component.
|
|
@@ -153,4 +153,4 @@ ExpansionPanel.className = CLASSNAME;
|
|
|
153
153
|
ExpansionPanel.defaultProps = DEFAULT_PROPS;
|
|
154
154
|
|
|
155
155
|
export { ExpansionPanel as E };
|
|
156
|
-
//# sourceMappingURL=
|
|
156
|
+
//# sourceMappingURL=ExpansionPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 isComponent,\n partitionMulti,\n} from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface ExpansionPanelProps extends GenericProps {\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 /** Theme adapting the component to light or dark background. */\n theme?: Theme;\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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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Size, Theme, ColorPalette } from './components.js';
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
5
|
-
import { I as Icon } from './
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
+
import { I as Icon } from './Icon2.js';
|
|
6
6
|
|
|
7
7
|
var COMPONENT_NAME = 'Flag';
|
|
8
8
|
var CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
@@ -45,4 +45,4 @@ Flag.className = CLASSNAME;
|
|
|
45
45
|
Flag.defaultProps = DEFAULT_PROPS;
|
|
46
46
|
|
|
47
47
|
export { Flag as F };
|
|
48
|
-
//# sourceMappingURL=
|
|
48
|
+
//# sourceMappingURL=Flag2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps {\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\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":";;;;;;AAiBA,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;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Orientation } from './components.js';
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
5
|
import castArray from 'lodash/castArray';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -52,4 +52,4 @@ FlexBox.displayName = COMPONENT_NAME;
|
|
|
52
52
|
FlexBox.className = CLASSNAME;
|
|
53
53
|
|
|
54
54
|
export { FlexBox as F };
|
|
55
|
-
//# sourceMappingURL=
|
|
55
|
+
//# sourceMappingURL=FlexBox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n /** Children elements. */\n children?: ReactNode;\n /** Whether the \"content filling space\" is enabled or not. */\n fillSpace?: boolean;\n /** Gap space between flexbox items. */\n gap?: GapSize;\n /** Flex horizontal alignment. */\n hAlign?: VerticalAlignment;\n /** Whether the \"auto margin\" is enabled all around or not. */\n marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n /** Whether the \"content shrink\" is disabled or not. */\n noShrink?: boolean;\n /** Flex direction. */\n orientation?: Orientation;\n /** Flex vertical alignment. */\n vAlign?: HorizontalAlignment;\n /** Whether the \"flex wrap\" is enabled or not. */\n wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n fillSpace,\n gap,\n hAlign,\n marginAuto,\n noShrink,\n orientation,\n vAlign,\n wrap,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n vAlign,\n hAlign,\n gap,\n }),\n wrap && `${CLASSNAME}--wrap`,\n fillSpace && `${CLASSNAME}--fill-space`,\n noShrink && `${CLASSNAME}--no-shrink`,\n marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n )}\n >\n {children}\n </div>\n );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import { Orientation, Size, Alignment } from './components.js';
|
|
3
|
+
import React, { forwardRef } from 'react';
|
|
4
|
+
import { g as getRootClassName, c as classnames } from './getRootClassName.js';
|
|
5
|
+
import 'lodash/isBoolean';
|
|
6
|
+
import 'lodash/isEmpty';
|
|
7
|
+
import 'lodash/kebabCase';
|
|
8
|
+
import 'lodash/noop';
|
|
9
|
+
import { F as FlexBox } from './FlexBox.js';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Component display name.
|
|
13
|
+
*/
|
|
14
|
+
var COMPONENT_NAME = 'GenericBlock';
|
|
15
|
+
/**
|
|
16
|
+
* Component default class name and class prefix.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
var CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
20
|
+
/**
|
|
21
|
+
* Component default props.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
var DEFAULT_PROPS = {
|
|
25
|
+
gap: Size.regular,
|
|
26
|
+
orientation: Orientation.vertical,
|
|
27
|
+
hAlign: Alignment.center,
|
|
28
|
+
vAlign: Alignment.center
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* The GenericBlock is a layout component made of 3 sections that can be
|
|
32
|
+
* displayed either horizontally of vertically with the same gap between each section.
|
|
33
|
+
*
|
|
34
|
+
* The sections are:
|
|
35
|
+
* * (Optional) `Figure` => A visual element to display before the main content.
|
|
36
|
+
* * (Required) `Content` => The main content displayed
|
|
37
|
+
* * (Optional) `Actions` => One or more actions to set after the element.
|
|
38
|
+
*
|
|
39
|
+
* @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
var GenericBlock = forwardRef(function (props, ref) {
|
|
43
|
+
var className = props.className,
|
|
44
|
+
figure = props.figure,
|
|
45
|
+
figureProps = props.figureProps,
|
|
46
|
+
children = props.children,
|
|
47
|
+
actions = props.actions,
|
|
48
|
+
actionsProps = props.actionsProps,
|
|
49
|
+
gap = props.gap,
|
|
50
|
+
orientation = props.orientation,
|
|
51
|
+
contentProps = props.contentProps,
|
|
52
|
+
forwardedProps = _objectWithoutProperties(props, ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"]);
|
|
53
|
+
|
|
54
|
+
var actionsVAlign = Alignment.center;
|
|
55
|
+
|
|
56
|
+
if (orientation === Orientation.horizontal) {
|
|
57
|
+
actionsVAlign = Alignment.right;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
var contentVAlign = Alignment.center;
|
|
61
|
+
|
|
62
|
+
if (orientation === Orientation.horizontal) {
|
|
63
|
+
contentVAlign = Alignment.left;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
return React.createElement(FlexBox, _extends({
|
|
67
|
+
ref: ref,
|
|
68
|
+
className: classnames(className, CLASSNAME),
|
|
69
|
+
gap: gap,
|
|
70
|
+
orientation: orientation
|
|
71
|
+
}, forwardedProps), React.createElement(FlexBox, _extends({}, figureProps, {
|
|
72
|
+
className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, "".concat(CLASSNAME, "__figure"))
|
|
73
|
+
}), figure), children && React.createElement(FlexBox, _extends({
|
|
74
|
+
orientation: Orientation.vertical,
|
|
75
|
+
fillSpace: true,
|
|
76
|
+
vAlign: contentVAlign
|
|
77
|
+
}, contentProps, {
|
|
78
|
+
className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, "".concat(CLASSNAME, "__content"))
|
|
79
|
+
}), children), React.createElement(FlexBox, _extends({
|
|
80
|
+
vAlign: actionsVAlign
|
|
81
|
+
}, actionsProps, {
|
|
82
|
+
className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, "".concat(CLASSNAME, "__actions"))
|
|
83
|
+
}), actions));
|
|
84
|
+
});
|
|
85
|
+
GenericBlock.displayName = COMPONENT_NAME;
|
|
86
|
+
GenericBlock.className = CLASSNAME;
|
|
87
|
+
GenericBlock.defaultProps = DEFAULT_PROPS;
|
|
88
|
+
|
|
89
|
+
export { GenericBlock as G };
|
|
90
|
+
//# sourceMappingURL=GenericBlock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getRootClassName } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n /** Component to use as visual element. */\n figure?: ReactNode;\n /** Actions to set after the main content. */\n actions?: ReactNode;\n /** Main content to display */\n children: ReactNode;\n /** Orientation of the 3 sections */\n orientation?: FlexBoxProps['orientation'];\n /** Horizontal alignment. */\n hAlign?: FlexBoxProps['hAlign'];\n /** Vertical alignment. */\n vAlign?: FlexBoxProps['vAlign'];\n /**\n * The props to forward to the content.\n * By default, the content will have the same alignment as wrapper.\n */\n contentProps?: Omit<FlexBoxProps, 'children'>;\n /** props to forward to the actions element. */\n actionsProps?: Omit<FlexBoxProps, 'children'>;\n /** props to forward to the figure element. */\n figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\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<GenericBlockProps> = {\n gap: Size.regular,\n orientation: Orientation.vertical,\n hAlign: Alignment.center,\n vAlign: Alignment.center,\n};\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * * (Optional) `Figure` => A visual element to display before the main content.\n * * (Required) `Content` => The main content displayed\n * * (Optional) `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nexport const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n className,\n figure,\n figureProps,\n children,\n actions,\n actionsProps,\n gap,\n orientation,\n contentProps,\n ...forwardedProps\n } = props;\n\n let actionsVAlign: HorizontalAlignment = Alignment.center;\n if (orientation === Orientation.horizontal) {\n actionsVAlign = Alignment.right;\n }\n let contentVAlign: HorizontalAlignment = Alignment.center;\n if (orientation === Orientation.horizontal) {\n contentVAlign = Alignment.left;\n }\n\n return (\n <FlexBox\n ref={ref}\n className={classNames(className, CLASSNAME)}\n gap={gap}\n orientation={orientation}\n {...forwardedProps}\n >\n <FlexBox {...figureProps} className={classNames(figureProps?.className, `${CLASSNAME}__figure`)}>\n {figure}\n </FlexBox>\n\n {children && (\n <FlexBox\n orientation={Orientation.vertical}\n fillSpace\n vAlign={contentVAlign}\n {...contentProps}\n className={classNames(contentProps?.className, `${CLASSNAME}__content`)}\n >\n {children}\n </FlexBox>\n )}\n\n <FlexBox\n vAlign={actionsVAlign}\n {...actionsProps}\n className={classNames(actionsProps?.className, `${CLASSNAME}__actions`)}\n >\n {actions}\n </FlexBox>\n </FlexBox>\n );\n});\nGenericBlock.displayName = COMPONENT_NAME;\nGenericBlock.className = CLASSNAME;\nGenericBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","regular","orientation","Orientation","vertical","hAlign","Alignment","center","vAlign","GenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","actionsVAlign","horizontal","right","contentVAlign","left","classNames","displayName","defaultProps"],"mappings":";;;;;;;;;;AA6BA;;;AAGA,IAAMA,cAAc,GAAG,cAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAyC,GAAG;AAC9CC,EAAAA,GAAG,EAAEC,IAAI,CAACC,OADoC;AAE9CC,EAAAA,WAAW,EAAEC,WAAW,CAACC,QAFqB;AAG9CC,EAAAA,MAAM,EAAEC,SAAS,CAACC,MAH4B;AAI9CC,EAAAA,MAAM,EAAEF,SAAS,CAACC;AAJ4B,CAAlD;AAOA;;;;;;;;;;;;IAWaE,YAAqD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAExFC,SAFwF,GAYxFF,KAZwF,CAExFE,SAFwF;AAAA,MAGxFC,MAHwF,GAYxFH,KAZwF,CAGxFG,MAHwF;AAAA,MAIxFC,WAJwF,GAYxFJ,KAZwF,CAIxFI,WAJwF;AAAA,MAKxFC,QALwF,GAYxFL,KAZwF,CAKxFK,QALwF;AAAA,MAMxFC,OANwF,GAYxFN,KAZwF,CAMxFM,OANwF;AAAA,MAOxFC,YAPwF,GAYxFP,KAZwF,CAOxFO,YAPwF;AAAA,MAQxFnB,GARwF,GAYxFY,KAZwF,CAQxFZ,GARwF;AAAA,MASxFG,WATwF,GAYxFS,KAZwF,CASxFT,WATwF;AAAA,MAUxFiB,YAVwF,GAYxFR,KAZwF,CAUxFQ,YAVwF;AAAA,MAWrFC,cAXqF,4BAYxFT,KAZwF;;AAc5F,MAAIU,aAAkC,GAAGf,SAAS,CAACC,MAAnD;;AACA,MAAIL,WAAW,KAAKC,WAAW,CAACmB,UAAhC,EAA4C;AACxCD,IAAAA,aAAa,GAAGf,SAAS,CAACiB,KAA1B;AACH;;AACD,MAAIC,aAAkC,GAAGlB,SAAS,CAACC,MAAnD;;AACA,MAAIL,WAAW,KAAKC,WAAW,CAACmB,UAAhC,EAA4C;AACxCE,IAAAA,aAAa,GAAGlB,SAAS,CAACmB,IAA1B;AACH;;AAED,SACI,oBAAC,OAAD;AACI,IAAA,GAAG,EAAEb,GADT;AAEI,IAAA,SAAS,EAAEc,UAAU,CAACb,SAAD,EAAYjB,SAAZ,CAFzB;AAGI,IAAA,GAAG,EAAEG,GAHT;AAII,IAAA,WAAW,EAAEG;AAJjB,KAKQkB,cALR,GAOI,oBAAC,OAAD,eAAaL,WAAb;AAA0B,IAAA,SAAS,EAAEW,UAAU,CAACX,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAEF,SAAd,YAA4BjB,SAA5B;AAA/C,MACKkB,MADL,CAPJ,EAWKE,QAAQ,IACL,oBAAC,OAAD;AACI,IAAA,WAAW,EAAEb,WAAW,CAACC,QAD7B;AAEI,IAAA,SAAS,MAFb;AAGI,IAAA,MAAM,EAAEoB;AAHZ,KAIQL,YAJR;AAKI,IAAA,SAAS,EAAEO,UAAU,CAACP,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAEN,SAAf,YAA6BjB,SAA7B;AALzB,MAOKoB,QAPL,CAZR,EAuBI,oBAAC,OAAD;AACI,IAAA,MAAM,EAAEK;AADZ,KAEQH,YAFR;AAGI,IAAA,SAAS,EAAEQ,UAAU,CAACR,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAEL,SAAf,YAA6BjB,SAA7B;AAHzB,MAKKqB,OALL,CAvBJ,CADJ;AAiCH,CAxD8E;AAyD/ER,YAAY,CAACkB,WAAb,GAA2BhC,cAA3B;AACAc,YAAY,CAACI,SAAb,GAAyBjB,SAAzB;AACAa,YAAY,CAACmB,YAAb,GAA4B9B,aAA5B;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends, a as _defineProperty } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { Orientation } from './components.js';
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Component display name.
|
|
@@ -93,4 +93,4 @@ GridItem.displayName = COMPONENT_NAME$1;
|
|
|
93
93
|
GridItem.className = CLASSNAME$1;
|
|
94
94
|
|
|
95
95
|
export { Grid as G, GridItem as a };
|
|
96
|
-
//# sourceMappingURL=
|
|
96
|
+
//# sourceMappingURL=GridItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridItem.js","sources":["../../../src/components/grid/Grid.tsx","../../../src/components/grid/GridItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment, Orientation, Size } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\ntype GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface GridProps extends GenericProps {\n /** Orientation. */\n orientation?: Orientation;\n /** Whether the children are wrapped or not. */\n wrap?: string;\n /** Vertical alignment. */\n vAlign?: Alignment;\n /** Horizontal alignment. */\n hAlign?: Alignment;\n /** Gutter size. */\n gutter?: GridGutterSize;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Grid';\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<GridProps> = {\n orientation: Orientation.horizontal,\n wrap: 'nowrap',\n};\n\n/**\n * Grid component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Grid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, gutter, hAlign, orientation, vAlign, wrap, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n `${CLASSNAME}-container`,\n { [`${CLASSNAME}--h-align-${hAlign}`]: hAlign },\n { [`${CLASSNAME}--v-align-${vAlign}`]: vAlign },\n handleBasicClasses({ prefix: CLASSNAME, orientation, wrap, gutter }),\n )}\n >\n {children}\n </div>\n );\n});\nGrid.displayName = COMPONENT_NAME;\nGrid.className = CLASSNAME;\nGrid.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\ntype Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';\n\n/**\n * Defines the props of the component.\n */\nexport interface GridItemProps extends GenericProps {\n /** Alignment. */\n align?: Alignment;\n /** Order. */\n order?: Columns;\n /** Width. */\n width?: Columns;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GridItem';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * GridItem component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, width, align, order, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, width, order, align }))}\n >\n {children}\n </div>\n );\n});\nGridItem.displayName = COMPONENT_NAME;\nGridItem.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","wrap","Grid","forwardRef","props","ref","children","className","gutter","hAlign","vAlign","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps","GridItem","width","align","order"],"mappings":";;;;;AAyBA;;;AAGA,IAAMA,cAAc,GAAG,MAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,WAAW,EAAEC,WAAW,CAACC,UADa;AAEtCC,EAAAA,IAAI,EAAE;AAFgC,CAA1C;AAKA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,QADoE,GACkBF,KADlB,CACpEE,QADoE;AAAA,MAC1DC,SAD0D,GACkBH,KADlB,CAC1DG,SAD0D;AAAA,MAC/CC,MAD+C,GACkBJ,KADlB,CAC/CI,MAD+C;AAAA,MACvCC,MADuC,GACkBL,KADlB,CACvCK,MADuC;AAAA,MAC/BX,WAD+B,GACkBM,KADlB,CAC/BN,WAD+B;AAAA,MAClBY,MADkB,GACkBN,KADlB,CAClBM,MADkB;AAAA,MACVT,IADU,GACkBG,KADlB,CACVH,IADU;AAAA,MACDU,cADC,4BACkBP,KADlB;;AAG5E,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQM,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBL,SADiB,YAEdZ,SAFc,+CAGXA,SAHW,uBAGWc,MAHX,GAGsBA,MAHtB,iCAIXd,SAJW,uBAIWe,MAJX,GAIsBA,MAJtB,GAKjBG,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEnB,SAAV;AAAqBG,MAAAA,WAAW,EAAXA,WAArB;AAAkCG,MAAAA,IAAI,EAAJA,IAAlC;AAAwCO,MAAAA,MAAM,EAANA;AAAxC,KAAD,CALD;AAHzB,MAWKF,QAXL,CADJ;AAeH,CAlB8D;AAmB/DJ,IAAI,CAACa,WAAL,GAAmBrB,cAAnB;AACAQ,IAAI,CAACK,SAAL,GAAiBZ,SAAjB;AACAO,IAAI,CAACc,YAAL,GAAoBnB,aAApB;;AClDA;;;AAGA,IAAMH,gBAAc,GAAG,UAAvB;AAEA;;;;AAGA,IAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAD,CAAlC;AAEA;;;;;;;;IAOauB,QAA6C,GAAGd,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAC5EC,QAD4E,GACZF,KADY,CAC5EE,QAD4E;AAAA,MAClEC,SADkE,GACZH,KADY,CAClEG,SADkE;AAAA,MACvDW,KADuD,GACZd,KADY,CACvDc,KADuD;AAAA,MAChDC,KADgD,GACZf,KADY,CAChDe,KADgD;AAAA,MACzCC,KADyC,GACZhB,KADY,CACzCgB,KADyC;AAAA,MAC/BT,cAD+B,4BACZP,KADY;;AAGpF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQM,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEnB,WAAV;AAAqBuB,MAAAA,KAAK,EAALA,KAArB;AAA4BE,MAAAA,KAAK,EAALA,KAA5B;AAAmCD,MAAAA,KAAK,EAALA;AAAnC,KAAD,CAA9B;AAHzB,MAKKb,QALL,CADJ;AASH,CAZsE;AAavEW,QAAQ,CAACF,WAAT,GAAuBrB,gBAAvB;AACAuB,QAAQ,CAACV,SAAT,GAAqBZ,WAArB;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties, c as _extends } from './
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { ColorPalette, Theme, Size } from './components.js';
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './
|
|
4
|
+
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
5
|
|
|
6
6
|
// Material Design Icons v5.8.55
|
|
7
7
|
var mdiAlert = "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z";
|
|
@@ -117,4 +117,4 @@ Icon.className = CLASSNAME;
|
|
|
117
117
|
Icon.defaultProps = DEFAULT_PROPS;
|
|
118
118
|
|
|
119
119
|
export { Icon as I, mdiInformation as a, mdiCheckCircle as b, mdiAlertCircle as c, mdiClose as d, mdiCheck as e, mdiChevronRight as f, mdiChevronLeft as g, mdiDragVertical as h, mdiChevronUp as i, mdiChevronDown as j, mdiRadioboxMarked as k, mdiRadioboxBlank as l, mdiAlert as m, mdiCloseCircle as n, mdiMenuDown as o, mdiPauseCircleOutline as p, mdiPlayCircleOutline as q, mdiArrowUp as r, mdiArrowDown as s, mdiImageBroken as t };
|
|
120
|
-
//# sourceMappingURL=
|
|
120
|
+
//# sourceMappingURL=Icon2.js.map
|