@lumx/react 3.20.1-alpha.12 → 3.20.1-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_internal/Button-f19e18df.js +96 -0
- package/_internal/Button-f19e18df.js.map +1 -0
- package/_internal/{cdddaed8.js → ButtonRoot-ab633b1d.js} +19 -20
- package/_internal/ButtonRoot-ab633b1d.js.map +1 -0
- package/_internal/{85e3a5ca.js → Chip-4c572eec.js} +38 -34
- package/_internal/Chip-4c572eec.js.map +1 -0
- package/_internal/{7093ba23.js → ClickAwayProvider-bcce6ceb.js} +4 -6
- package/_internal/ClickAwayProvider-bcce6ceb.js.map +1 -0
- package/_internal/{ea04260d.js → DisabledStateContext-077b7bef.js} +6 -6
- package/_internal/DisabledStateContext-077b7bef.js.map +1 -0
- package/_internal/{370bdaed.js → HeadingLevelProvider-e4817816.js} +5 -7
- package/_internal/HeadingLevelProvider-e4817816.js.map +1 -0
- package/_internal/IconButton-10585058.js +72 -0
- package/_internal/IconButton-10585058.js.map +1 -0
- package/_internal/ImageCaption-4279b2b6.js +65 -0
- package/_internal/ImageCaption-4279b2b6.js.map +1 -0
- package/_internal/{f5508d3d.js → List-d5f5d465.js} +55 -56
- package/_internal/List-d5f5d465.js.map +1 -0
- package/_internal/{b1af5979.js → PopoverDialog-21e5c9dd.js} +165 -171
- package/_internal/PopoverDialog-21e5c9dd.js.map +1 -0
- package/_internal/{3f86608e.js → Portal-c43d098b.js} +2 -5
- package/_internal/Portal-c43d098b.js.map +1 -0
- package/_internal/{2c2b6a89.js → RawClickable-c76bbc4c.js} +7 -9
- package/_internal/RawClickable-c76bbc4c.js.map +1 -0
- package/_internal/{34c59f5b.js → Slides-01f513ce.js} +106 -112
- package/_internal/Slides-01f513ce.js.map +1 -0
- package/_internal/{3181f000.js → ThemeContext-3181f000.js} +1 -1
- package/_internal/ThemeContext-3181f000.js.map +1 -0
- package/_internal/{628468c4.js → Thumbnail-30d2a781.js} +50 -51
- package/_internal/Thumbnail-30d2a781.js.map +1 -0
- package/_internal/{3a4e4636.js → components/alert-dialog-8f1c163c.js} +39 -54
- package/_internal/components/alert-dialog-8f1c163c.js.map +1 -0
- package/_internal/{179a84d1.js → components/autocomplete-bfbdeb3c.js} +72 -67
- package/_internal/components/autocomplete-bfbdeb3c.js.map +1 -0
- package/_internal/components/avatar-6990e3e9.js +87 -0
- package/_internal/components/avatar-6990e3e9.js.map +1 -0
- package/_internal/{9c9df5f2.js → components/badge-81543bc7.js} +20 -19
- package/_internal/components/badge-81543bc7.js.map +1 -0
- package/_internal/{f93fe83e.js → components/button-927abe71.js} +14 -11
- package/_internal/components/button-927abe71.js.map +1 -0
- package/_internal/components/checkbox-dc4caec8.js +131 -0
- package/_internal/{f0900583.js.map → components/checkbox-dc4caec8.js.map} +1 -1
- package/_internal/{c0414b89.js → components/chip-fb3d0c76.js} +13 -10
- package/_internal/components/chip-fb3d0c76.js.map +1 -0
- package/_internal/components/comment-block-b84c4694.js +121 -0
- package/_internal/components/comment-block-b84c4694.js.map +1 -0
- package/_internal/components/date-picker-a425534c.js +2 -0
- package/_internal/components/date-picker-a425534c.js.map +1 -0
- package/_internal/{2f1716fa.js → components/dialog-7dbcb485.js} +69 -80
- package/_internal/components/dialog-7dbcb485.js.map +1 -0
- package/_internal/{3e653144.js → components/divider-12e9b6a0.js} +13 -9
- package/_internal/components/divider-12e9b6a0.js.map +1 -0
- package/_internal/components/drag-handle-a38ff757.js +53 -0
- package/_internal/components/drag-handle-a38ff757.js.map +1 -0
- package/_internal/{1ea72630.js → components/dropdown-38b0b6a0.js} +19 -17
- package/_internal/components/dropdown-38b0b6a0.js.map +1 -0
- package/_internal/{68c10f98.js → components/expansion-panel-c4b93653.js} +46 -54
- package/_internal/components/expansion-panel-c4b93653.js.map +1 -0
- package/_internal/{c2388b10.js → components/flag-c5e2f5f0.js} +19 -22
- package/_internal/components/flag-c5e2f5f0.js.map +1 -0
- package/_internal/{329b5f12.js → components/flex-box-c8701a85.js} +13 -10
- package/_internal/components/flex-box-c8701a85.js.map +1 -0
- package/_internal/{a84f4981.js → components/generic-block-0d6ad5a6.js} +30 -37
- package/_internal/components/generic-block-0d6ad5a6.js.map +1 -0
- package/_internal/{2f6c7f84.js → components/grid-3b194fe8.js} +22 -16
- package/_internal/components/grid-3b194fe8.js.map +1 -0
- package/_internal/{501f2f9f.js → components/grid-column-985b9327.js} +10 -8
- package/_internal/components/grid-column-985b9327.js.map +1 -0
- package/_internal/{193521fa.js → components/heading-5e954dfc.js} +13 -11
- package/_internal/components/heading-5e954dfc.js.map +1 -0
- package/_internal/{8ab42752.js → components/icon-2e7345ad.js} +29 -29
- package/_internal/components/icon-2e7345ad.js.map +1 -0
- package/_internal/components/image-block-8d21dd7e.js +109 -0
- package/_internal/components/image-block-8d21dd7e.js.map +1 -0
- package/_internal/{7f54e947.js → components/image-lightbox-4a5ab962.js} +105 -120
- package/_internal/components/image-lightbox-4a5ab962.js.map +1 -0
- package/_internal/{15eab19b.js → components/inline-list-4884f004.js} +25 -26
- package/_internal/components/inline-list-4884f004.js.map +1 -0
- package/_internal/{5f8f9454.js → components/input-helper-e644e05e.js} +14 -11
- package/_internal/components/input-helper-e644e05e.js.map +1 -0
- package/_internal/{b0a7a999.js → components/input-label-5e509a1b.js} +14 -12
- package/_internal/components/input-label-5e509a1b.js.map +1 -0
- package/_internal/{86aa4aa4.js → components/lightbox-bec1b95f.js} +59 -64
- package/_internal/components/lightbox-bec1b95f.js.map +1 -0
- package/_internal/components/link-9637b9e4.js +70 -0
- package/_internal/components/link-9637b9e4.js.map +1 -0
- package/_internal/components/link-preview-7a4a6e4b.js +108 -0
- package/_internal/components/link-preview-7a4a6e4b.js.map +1 -0
- package/_internal/{95cfd814.js → components/list-5c8f7122.js} +21 -14
- package/_internal/components/list-5c8f7122.js.map +1 -0
- package/_internal/{0be1006e.js → components/message-a67067d9.js} +27 -28
- package/_internal/components/message-a67067d9.js.map +1 -0
- package/_internal/components/mosaic-92b66c80.js +92 -0
- package/_internal/components/mosaic-92b66c80.js.map +1 -0
- package/_internal/components/navigation-4fd3917d.js +210 -0
- package/_internal/components/navigation-4fd3917d.js.map +1 -0
- package/_internal/{5ec059fe.js → components/notification-9063c963.js} +47 -52
- package/_internal/components/notification-9063c963.js.map +1 -0
- package/_internal/components/popover-3c4c54bd.js +3 -0
- package/_internal/components/popover-3c4c54bd.js.map +1 -0
- package/_internal/components/post-block-0cfc2206.js +99 -0
- package/_internal/components/post-block-0cfc2206.js.map +1 -0
- package/_internal/{f23cdf84.js → components/progress-eaf5b33d.js} +53 -46
- package/_internal/components/progress-eaf5b33d.js.map +1 -0
- package/_internal/{edab29ce.js → components/progress-tracker-4a65718d.js} +70 -69
- package/_internal/components/progress-tracker-4a65718d.js.map +1 -0
- package/_internal/components/radio-button-3ef8a325.js +148 -0
- package/_internal/components/radio-button-3ef8a325.js.map +1 -0
- package/_internal/components/select-d46cfe35.js +404 -0
- package/_internal/components/select-d46cfe35.js.map +1 -0
- package/_internal/{b477da26.js → components/side-navigation-75b22f19.js} +62 -67
- package/_internal/components/side-navigation-75b22f19.js.map +1 -0
- package/_internal/{6da19518.js → components/skeleton-361ce335.js} +34 -25
- package/_internal/components/skeleton-361ce335.js.map +1 -0
- package/_internal/{db4fdc7b.js → components/slider-8094cb5c.js} +60 -65
- package/_internal/components/slider-8094cb5c.js.map +1 -0
- package/_internal/{eaa8b1d8.js → components/slideshow-2e8cd372.js} +41 -41
- package/_internal/components/slideshow-2e8cd372.js.map +1 -0
- package/_internal/components/switch-5516949b.js +118 -0
- package/_internal/components/switch-5516949b.js.map +1 -0
- package/_internal/{be6da9b0.js → components/table-fa198ee6.js} +76 -73
- package/_internal/components/table-fa198ee6.js.map +1 -0
- package/_internal/{65f91970.js → components/tabs-bb9bc2a5.js} +48 -47
- package/_internal/components/tabs-bb9bc2a5.js.map +1 -0
- package/_internal/components/text-289c0526.js +2 -0
- package/_internal/components/text-289c0526.js.map +1 -0
- package/_internal/{b0b2e33d.js → components/text-field-82733568.js} +109 -122
- package/_internal/components/text-field-82733568.js.map +1 -0
- package/_internal/{76be70dd.js → components/thumbnail-e3acff82.js} +3 -3
- package/_internal/components/thumbnail-e3acff82.js.map +1 -0
- package/_internal/{bae266a9.js → components/toolbar-155562be.js} +18 -19
- package/_internal/components/toolbar-155562be.js.map +1 -0
- package/_internal/{9a4dfad0.js → components/tooltip-84ffb4f9.js} +42 -50
- package/_internal/components/tooltip-84ffb4f9.js.map +1 -0
- package/_internal/{9fdc715b.js → components/uploader-896a1d89.js} +38 -40
- package/_internal/components/uploader-896a1d89.js.map +1 -0
- package/_internal/{0d1a078c.js → components/user-block-8fd15895.js} +44 -45
- package/_internal/components/user-block-8fd15895.js.map +1 -0
- package/_internal/{4cd870a5.js → constants-b9e57936.js} +2 -2
- package/_internal/constants-b9e57936.js.map +1 -0
- package/_internal/{478b5c92.js → constants-d0e3f49e.js} +2 -2
- package/_internal/constants-d0e3f49e.js.map +1 -0
- package/_internal/{9d1336a1.js → context-21aeb1c7.js} +6 -6
- package/_internal/context-21aeb1c7.js.map +1 -0
- package/_internal/forwardRef-49d2bb84.js +80 -0
- package/_internal/forwardRef-49d2bb84.js.map +1 -0
- package/_internal/{230173a8.js → getFocusableElements-230173a8.js} +1 -1
- package/_internal/getFocusableElements-230173a8.js.map +1 -0
- package/_internal/{0420e67b.js → index-b4d256e7.js} +14 -15
- package/_internal/index-b4d256e7.js.map +1 -0
- package/_internal/{84dfe68f.js → index-f415b08e.js} +46 -52
- package/_internal/index-f415b08e.js.map +1 -0
- package/_internal/{78df9309.js → isComponent-78df9309.js} +1 -1
- package/_internal/isComponent-78df9309.js.map +1 -0
- package/_internal/{e806b848.js → isComponentType-e806b848.js} +1 -1
- package/_internal/isComponentType-e806b848.js.map +1 -0
- package/_internal/{f0d7d6ea.js → mergeRefs-f0d7d6ea.js} +1 -1
- package/_internal/mergeRefs-f0d7d6ea.js.map +1 -0
- package/_internal/{4daccdd5.js → partitionMulti-4daccdd5.js} +1 -1
- package/_internal/partitionMulti-4daccdd5.js.map +1 -0
- package/_internal/{825ac334.js → state-db358714.js} +2 -2
- package/_internal/state-db358714.js.map +1 -0
- package/_internal/{2a3d237c.js → useBooleanState-2a3d237c.js} +1 -1
- package/_internal/useBooleanState-2a3d237c.js.map +1 -0
- package/_internal/{d5f316cb.js → useCallbackOnEscape-ea4d9eb4.js} +3 -3
- package/_internal/useCallbackOnEscape-ea4d9eb4.js.map +1 -0
- package/_internal/{36bd7352.js → useDisableBodyScroll-36bd7352.js} +1 -1
- package/_internal/useDisableBodyScroll-36bd7352.js.map +1 -0
- package/_internal/{b8667090.js → useDisableStateProps-fffc365f.js} +2 -2
- package/_internal/useDisableStateProps-fffc365f.js.map +1 -0
- package/_internal/{5fe09341.js → useFocusTrap-c3c6378b.js} +4 -4
- package/_internal/useFocusTrap-c3c6378b.js.map +1 -0
- package/_internal/{3a1facc0.js → useId-3a1facc0.js} +1 -1
- package/_internal/useId-3a1facc0.js.map +1 -0
- package/_internal/{7daf0f24.js → useRovingTabIndex-7daf0f24.js} +1 -1
- package/_internal/useRovingTabIndex-7daf0f24.js.map +1 -0
- package/_internal/{e6dd117e.js → useTransitionVisibility-321fdbfa.js} +2 -2
- package/_internal/useTransitionVisibility-321fdbfa.js.map +1 -0
- package/_internal/{37b007a4.js → wrapChildrenIconWithSpaces-f86106ce.js} +3 -3
- package/_internal/wrapChildrenIconWithSpaces-f86106ce.js.map +1 -0
- package/index.d.ts +7 -352
- package/index.js +65 -111
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/utils/index.d.ts +1 -1
- package/utils/index.js +3 -3
- package/_internal/0420e67b.js.map +0 -1
- package/_internal/0a490b07.js +0 -75
- package/_internal/0a490b07.js.map +0 -1
- package/_internal/0b9c76cb.js +0 -6
- package/_internal/0b9c76cb.js.map +0 -1
- package/_internal/0be1006e.js.map +0 -1
- package/_internal/0d1a078c.js.map +0 -1
- package/_internal/15eab19b.js.map +0 -1
- package/_internal/179a84d1.js.map +0 -1
- package/_internal/193521fa.js.map +0 -1
- package/_internal/1a90ea3d.js +0 -51
- package/_internal/1a90ea3d.js.map +0 -1
- package/_internal/1deba7d7.js +0 -224
- package/_internal/1deba7d7.js.map +0 -1
- package/_internal/1ea72630.js.map +0 -1
- package/_internal/21b83d16.js +0 -137
- package/_internal/21b83d16.js.map +0 -1
- package/_internal/230173a8.js.map +0 -1
- package/_internal/297bed8f.js +0 -457
- package/_internal/297bed8f.js.map +0 -1
- package/_internal/2a3d237c.js.map +0 -1
- package/_internal/2c2b6a89.js.map +0 -1
- package/_internal/2f1716fa.js.map +0 -1
- package/_internal/2f6c7f84.js.map +0 -1
- package/_internal/3181f000.js.map +0 -1
- package/_internal/329b5f12.js.map +0 -1
- package/_internal/332e9844.js +0 -2
- package/_internal/332e9844.js.map +0 -1
- package/_internal/34c59f5b.js.map +0 -1
- package/_internal/36bd7352.js.map +0 -1
- package/_internal/370bdaed.js.map +0 -1
- package/_internal/37b007a4.js.map +0 -1
- package/_internal/3a1facc0.js.map +0 -1
- package/_internal/3a4e4636.js.map +0 -1
- package/_internal/3e653144.js.map +0 -1
- package/_internal/3f86608e.js.map +0 -1
- package/_internal/478b5c92.js.map +0 -1
- package/_internal/4962be5b.js +0 -121
- package/_internal/4962be5b.js.map +0 -1
- package/_internal/49bbeed3.js +0 -6
- package/_internal/49bbeed3.js.map +0 -1
- package/_internal/4cd870a5.js.map +0 -1
- package/_internal/4daccdd5.js.map +0 -1
- package/_internal/501f2f9f.js.map +0 -1
- package/_internal/5e7b90e2.js +0 -2
- package/_internal/5e7b90e2.js.map +0 -1
- package/_internal/5ec059fe.js.map +0 -1
- package/_internal/5f8f9454.js.map +0 -1
- package/_internal/5fe09341.js.map +0 -1
- package/_internal/628468c4.js.map +0 -1
- package/_internal/6589b796.js +0 -280
- package/_internal/6589b796.js.map +0 -1
- package/_internal/65f91970.js.map +0 -1
- package/_internal/66f691d3.js +0 -74
- package/_internal/66f691d3.js.map +0 -1
- package/_internal/68c10f98.js.map +0 -1
- package/_internal/690ca33e.js +0 -109
- package/_internal/690ca33e.js.map +0 -1
- package/_internal/6ca04271.js +0 -108
- package/_internal/6ca04271.js.map +0 -1
- package/_internal/6da19518.js.map +0 -1
- package/_internal/7093ba23.js.map +0 -1
- package/_internal/74a4a214.js +0 -82
- package/_internal/74a4a214.js.map +0 -1
- package/_internal/76be70dd.js.map +0 -1
- package/_internal/78df9309.js.map +0 -1
- package/_internal/7b221b05.js +0 -9
- package/_internal/7b221b05.js.map +0 -1
- package/_internal/7daf0f24.js.map +0 -1
- package/_internal/7f54e947.js.map +0 -1
- package/_internal/825ac334.js.map +0 -1
- package/_internal/827b804a.js +0 -6
- package/_internal/827b804a.js.map +0 -1
- package/_internal/84dfe68f.js.map +0 -1
- package/_internal/85e3a5ca.js.map +0 -1
- package/_internal/86aa4aa4.js.map +0 -1
- package/_internal/88ec77c2.js +0 -130
- package/_internal/88ec77c2.js.map +0 -1
- package/_internal/8ab42752.js.map +0 -1
- package/_internal/95cfd814.js.map +0 -1
- package/_internal/9a4dfad0.js.map +0 -1
- package/_internal/9c9df5f2.js.map +0 -1
- package/_internal/9d1336a1.js.map +0 -1
- package/_internal/9fdc715b.js.map +0 -1
- package/_internal/a003602b.js +0 -116
- package/_internal/a003602b.js.map +0 -1
- package/_internal/a34639bd.js +0 -97
- package/_internal/a34639bd.js.map +0 -1
- package/_internal/a84f4981.js.map +0 -1
- package/_internal/b0a7a999.js.map +0 -1
- package/_internal/b0b2e33d.js.map +0 -1
- package/_internal/b1af5979.js.map +0 -1
- package/_internal/b477da26.js.map +0 -1
- package/_internal/b8667090.js.map +0 -1
- package/_internal/bae266a9.js.map +0 -1
- package/_internal/be6da9b0.js.map +0 -1
- package/_internal/c0414b89.js.map +0 -1
- package/_internal/c2388b10.js.map +0 -1
- package/_internal/c459a04d.js +0 -148
- package/_internal/c459a04d.js.map +0 -1
- package/_internal/c6ca7494.js +0 -2
- package/_internal/c6ca7494.js.map +0 -1
- package/_internal/cdddaed8.js.map +0 -1
- package/_internal/d0dd1815.js +0 -10
- package/_internal/d0dd1815.js.map +0 -1
- package/_internal/d45e3f16.js +0 -15
- package/_internal/d45e3f16.js.map +0 -1
- package/_internal/d5f316cb.js.map +0 -1
- package/_internal/d95844c1.d.ts +0 -7
- package/_internal/db4fdc7b.js.map +0 -1
- package/_internal/dbe0cf24.js +0 -75
- package/_internal/dbe0cf24.js.map +0 -1
- package/_internal/de24f857.js +0 -4
- package/_internal/de24f857.js.map +0 -1
- package/_internal/e2afb13f.js +0 -75
- package/_internal/e2afb13f.js.map +0 -1
- package/_internal/e52f0d3f.js +0 -94
- package/_internal/e52f0d3f.js.map +0 -1
- package/_internal/e6dd117e.js.map +0 -1
- package/_internal/e806b848.js.map +0 -1
- package/_internal/ea04260d.js.map +0 -1
- package/_internal/eaa8b1d8.js.map +0 -1
- package/_internal/eaf6c45a.js +0 -4
- package/_internal/eaf6c45a.js.map +0 -1
- package/_internal/edab29ce.js.map +0 -1
- package/_internal/ef5d1aac.js +0 -4
- package/_internal/ef5d1aac.js.map +0 -1
- package/_internal/f0900583.js +0 -142
- package/_internal/f0d7d6ea.js.map +0 -1
- package/_internal/f23cdf84.js.map +0 -1
- package/_internal/f52e979e.js +0 -3
- package/_internal/f52e979e.js.map +0 -1
- package/_internal/f5508d3d.js.map +0 -1
- package/_internal/f93fe83e.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"0420e67b.js","sources":["../../src/hooks/useOverflowTooltipLabel.tsx","../../src/components/text/Text.tsx"],"sourcesContent":["import React from 'react';\nimport { useTooltipContext } from '@lumx/react/components/tooltip/context';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Compute a tooltip label based on a label element `innerText` if the text overflows.\n * Updates dynamically on content changes (but not on resize!)\n */\nexport const useOverflowTooltipLabel = (content: React.ReactNode) => {\n const parentTooltip = useTooltipContext();\n const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);\n const [labelElement, setLabelElement] = React.useState<HTMLElement | null>(null);\n\n React.useLayoutEffect(() => {\n if (\n // Not inside a tooltip\n !parentTooltip &&\n labelElement &&\n // Not inside a visually hidden\n !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&\n // Text overflows\n labelElement.offsetWidth < labelElement.scrollWidth\n ) {\n // Set tooltip label\n setTooltipLabel(labelElement.innerText);\n } else {\n setTooltipLabel(undefined);\n }\n }, [labelElement, parentTooltip, content]);\n\n return { labelRef: setLabelElement, tooltipLabel };\n};\n","import classNames from 'classnames';\n\nimport { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';\nimport { GenericProps, TextElement } from '@lumx/react/utils/type';\nimport {\n fontColorClass,\n getRootClassName,\n handleBasicClasses,\n getTypographyClassName,\n} from '@lumx/core/js/utils/className';\nimport { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextProps extends GenericProps {\n /**\n * Color variant.\n */\n color?: ColorWithVariants;\n /**\n * Lightened or darkened variant of the selected color.\n */\n colorVariant?: ColorVariant;\n /**\n * Typography variant.\n */\n typography?: Typography;\n /**\n * Custom component to render the text.\n */\n as: TextElement;\n /**\n * Control whether the text should truncate or not.\n * Setting as `true` will make the text truncate on a single line.\n * Setting as `{ lines: number }` will make the text truncate on a multiple lines.\n */\n truncate?: boolean | { lines: number };\n /**\n * Prevents text to wrap on multiple lines\n * (automatically activated when single line text truncate is activated).\n */\n noWrap?: boolean;\n /**\n * WhiteSpace variant\n * Ignored when `noWrap` is set to true\n * Ignored when `truncate` is set to true or lines: 1\n * */\n whiteSpace?: WhiteSpace;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Text';\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 = {} as const;\n\n/**\n * Text component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Text = forwardRef<TextProps>((props, ref) => {\n const {\n as: Component,\n children,\n className,\n color,\n colorVariant,\n noWrap,\n typography,\n truncate,\n whiteSpace,\n style,\n ...forwardedProps\n } = props;\n\n const typographyClass = typography && getTypographyClassName(typography);\n\n // Truncate mode\n const truncateLinesStyle = typeof truncate === 'object' &&\n truncate.lines > 1 && { '--lumx-text-truncate-lines': truncate.lines };\n const isTruncatedMultiline = !!truncateLinesStyle;\n const isTruncated = !!truncate;\n\n /**\n * Add custom white-space style if specified\n * Disabled if noWrap is specified\n * Disabled if truncated on one-line\n * */\n const whiteSpaceStyle = !noWrap &&\n !(isTruncated && !isTruncatedMultiline) &&\n whiteSpace && { '--lumx-text-white-space': whiteSpace };\n\n const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);\n\n return (\n <Component\n ref={useMergeRefs(ref as React.Ref<any>, labelRef)}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isTruncated: isTruncated && !isTruncatedMultiline,\n isTruncatedMultiline,\n }),\n typographyClass,\n fontColorClass(color, colorVariant),\n noWrap && `${CLASSNAME}--no-wrap`,\n )}\n title={tooltipLabel}\n style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}\n {...forwardedProps}\n >\n {wrapChildrenIconWithSpaces(children)}\n </Component>\n );\n});\nText.displayName = COMPONENT_NAME;\nText.className = CLASSNAME;\nText.defaultProps = DEFAULT_PROPS;\n"],"names":["useOverflowTooltipLabel","content","parentTooltip","useTooltipContext","tooltipLabel","setTooltipLabel","React","useState","undefined","labelElement","setLabelElement","useLayoutEffect","closest","VISUALLY_HIDDEN","offsetWidth","scrollWidth","innerText","labelRef","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Text","forwardRef","props","ref","as","Component","children","className","color","colorVariant","noWrap","typography","truncate","whiteSpace","style","forwardedProps","typographyClass","getTypographyClassName","truncateLinesStyle","lines","isTruncatedMultiline","isTruncated","whiteSpaceStyle","_jsx","useMergeRefs","classNames","handleBasicClasses","prefix","fontColorClass","title","wrapChildrenIconWithSpaces","displayName","defaultProps"],"mappings":"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"}
|
package/_internal/0a490b07.js
DELETED
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { B as ButtonRoot } from './cdddaed8.js';
|
|
2
|
-
import { m as getRootClassName, d as Emphasis, c as Size, n as forwardRef, b as Theme } from './6589b796.js';
|
|
3
|
-
import { u as useTheme, T as ThemeProvider } from './3181f000.js';
|
|
4
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
-
import { Tooltip } from './9a4dfad0.js';
|
|
6
|
-
import { I as Icon } from './8ab42752.js';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Component display name.
|
|
10
|
-
*/
|
|
11
|
-
const COMPONENT_NAME = 'IconButton';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Component default class name and class prefix.
|
|
15
|
-
*/
|
|
16
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Component default props.
|
|
20
|
-
*/
|
|
21
|
-
const DEFAULT_PROPS = {
|
|
22
|
-
emphasis: Emphasis.high,
|
|
23
|
-
size: Size.m
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* IconButton component.
|
|
28
|
-
*
|
|
29
|
-
* @param props Component props.
|
|
30
|
-
* @param ref Component ref.
|
|
31
|
-
* @return React element.
|
|
32
|
-
*/
|
|
33
|
-
const IconButton = forwardRef((props, ref) => {
|
|
34
|
-
const defaultTheme = useTheme() || Theme.light;
|
|
35
|
-
const {
|
|
36
|
-
emphasis = DEFAULT_PROPS.emphasis,
|
|
37
|
-
image,
|
|
38
|
-
icon,
|
|
39
|
-
label,
|
|
40
|
-
size = DEFAULT_PROPS.size,
|
|
41
|
-
theme = defaultTheme,
|
|
42
|
-
tooltipProps,
|
|
43
|
-
hideTooltip,
|
|
44
|
-
...forwardedProps
|
|
45
|
-
} = props;
|
|
46
|
-
return /*#__PURE__*/jsx(Tooltip, {
|
|
47
|
-
label: hideTooltip ? '' : label,
|
|
48
|
-
...tooltipProps,
|
|
49
|
-
children: /*#__PURE__*/jsx(ButtonRoot, {
|
|
50
|
-
ref: ref,
|
|
51
|
-
emphasis,
|
|
52
|
-
size,
|
|
53
|
-
theme,
|
|
54
|
-
...forwardedProps,
|
|
55
|
-
"aria-label": label,
|
|
56
|
-
variant: "icon",
|
|
57
|
-
children: image ? /*#__PURE__*/jsx("img", {
|
|
58
|
-
// no need to set alt as an aria-label is already set on the button
|
|
59
|
-
alt: "",
|
|
60
|
-
src: image
|
|
61
|
-
}) : /*#__PURE__*/jsx(ThemeProvider, {
|
|
62
|
-
value: undefined,
|
|
63
|
-
children: /*#__PURE__*/jsx(Icon, {
|
|
64
|
-
icon: icon
|
|
65
|
-
})
|
|
66
|
-
})
|
|
67
|
-
})
|
|
68
|
-
});
|
|
69
|
-
});
|
|
70
|
-
IconButton.displayName = COMPONENT_NAME;
|
|
71
|
-
IconButton.className = CLASSNAME;
|
|
72
|
-
IconButton.defaultProps = DEFAULT_PROPS;
|
|
73
|
-
|
|
74
|
-
export { IconButton as I };
|
|
75
|
-
//# sourceMappingURL=0a490b07.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"0a490b07.js","sources":["../../src/components/button/IconButton.tsx"],"sourcesContent":["import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';\nimport { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon (SVG path).\n * If `image` is also set, `image` will be used instead.\n */\n icon?: string;\n /**\n * Image (image url).\n * Has priority over `icon`.\n */\n image?: string;\n /**\n * Label text (required for a11y purpose).\n * If you really don't want an aria-label, you can set an empty label (this is not recommended).\n */\n label: string;\n /**\n * Props to pass to the tooltip.\n * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.\n * */\n tooltipProps?: Partial<TooltipProps>;\n /** Whether the tooltip should be hidden or not. */\n hideTooltip?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'IconButton';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<IconButtonProps> = {\n emphasis: Emphasis.high,\n size: Size.m,\n};\n\n/**\n * IconButton component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n emphasis = DEFAULT_PROPS.emphasis,\n image,\n icon,\n label,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n tooltipProps,\n hideTooltip,\n ...forwardedProps\n } = props;\n\n return (\n <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>\n <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant=\"icon\">\n {image ? (\n <img\n // no need to set alt as an aria-label is already set on the button\n alt=\"\"\n src={image}\n />\n ) : (\n <ThemeProvider value={undefined}>\n <Icon icon={icon as string} />\n </ThemeProvider>\n )}\n </ButtonRoot>\n </Tooltip>\n );\n});\nIconButton.displayName = COMPONENT_NAME;\nIconButton.className = CLASSNAME;\nIconButton.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","Emphasis","high","size","Size","m","IconButton","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","image","icon","label","theme","tooltipProps","hideTooltip","forwardedProps","_jsx","Tooltip","children","ButtonRoot","variant","alt","src","ThemeProvider","value","undefined","Icon","displayName","className","defaultProps"],"mappings":";;;;;;;AA+BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG;EAC5CC,QAAQ,EAAEC,QAAQ,CAACC,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAqC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFb,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCc,KAAK;IACLC,IAAI;IACJC,KAAK;IACLb,IAAI,GAAGJ,aAAa,CAACI,IAAI;AACzBc,IAAAA,KAAK,GAAGP,YAAY;IACpBQ,YAAY;IACZC,WAAW;IACX,GAAGC,cAAAA;AACP,GAAC,GAAGZ,KAAK,CAAA;EAET,oBACIa,GAAA,CAACC,OAAO,EAAA;AAACN,IAAAA,KAAK,EAAEG,WAAW,GAAG,EAAE,GAAGH,KAAM;AAAA,IAAA,GAAKE,YAAY;IAAAK,QAAA,eACtDF,GAAA,CAACG,UAAU,EAAA;AAACf,MAAAA,GAAG,EAAEA,GAAI;MAAOT,QAAQ;MAAEG,IAAI;MAAEc,KAAK;AAAE,MAAA,GAAGG,cAAc;AAAI,MAAA,YAAA,EAAYJ,KAAM;AAACS,MAAAA,OAAO,EAAC,MAAM;MAAAF,QAAA,EACpGT,KAAK,gBACFO,GAAA,CAAA,KAAA,EAAA;AACI;AACAK,QAAAA,GAAG,EAAC,EAAE;AACNC,QAAAA,GAAG,EAAEb,KAAAA;AAAM,OACd,CAAC,gBAEFO,GAAA,CAACO,aAAa,EAAA;AAACC,QAAAA,KAAK,EAAEC,SAAU;QAAAP,QAAA,eAC5BF,GAAA,CAACU,IAAI,EAAA;AAAChB,UAAAA,IAAI,EAAEA,IAAAA;SAAiB,CAAA;OAClB,CAAA;KAEX,CAAA;AAAC,GACR,CAAC,CAAA;AAElB,CAAC,EAAC;AACFT,UAAU,CAAC0B,WAAW,GAAGpC,cAAc,CAAA;AACvCU,UAAU,CAAC2B,SAAS,GAAGpC,SAAS,CAAA;AAChCS,UAAU,CAAC4B,YAAY,GAAGnC,aAAa;;;;"}
|
package/_internal/0b9c76cb.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"0b9c76cb.js","sources":["../../../lumx-icons/dist/esm/chevron-down.js","../../../lumx-icons/dist/esm/chevron-up.js"],"sourcesContent":["export const mdiChevronDown = 'M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';","export const mdiChevronUp = 'M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';"],"names":["mdiChevronDown","mdiChevronUp"],"mappings":"AAAO,MAAMA,cAAc,GAAG;;ACAvB,MAAMC,YAAY,GAAG;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"0be1006e.js","sources":["../../src/components/message/Message.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface MessageProps extends GenericProps {\n /** Content. */\n children?: ReactNode;\n /** Whether the message has a background or not. */\n hasBackground?: boolean;\n /** Message variant. */\n kind?: Kind;\n /** Message custom icon SVG path. */\n icon?: string;\n /**\n * Displays a close button.\n *\n * NB: only available if `kind === 'info' && hasBackground === true`\n */\n closeButtonProps?: {\n /** The callback called when the button is clicked */\n onClick: () => void;\n /** The label of the close button. */\n label: string;\n };\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Message component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {\n const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;\n const { color, icon } = CONFIG[kind as Kind] || {};\n const { onClick, label: closeButtonLabel } = closeButtonProps || {};\n const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n color,\n hasBackground,\n prefix: CLASSNAME,\n }),\n )}\n {...forwardedProps}\n >\n {(customIcon || icon) && (\n <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />\n )}\n <div className={`${CLASSNAME}__text`}>{children}</div>\n {isCloseButtonDisplayed && (\n <IconButton\n className={`${CLASSNAME}__close-button`}\n icon={mdiClose}\n onClick={onClick}\n label={closeButtonLabel}\n emphasis={Emphasis.low}\n />\n )}\n </div>\n );\n});\n\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","closeButtonProps","forwardedProps","onClick","label","closeButtonLabel","isCloseButtonDisplayed","_jsxs","classNames","handleBasicClasses","prefix","_jsx","Icon","size","Size","xs","IconButton","mdiClose","emphasis","Emphasis","low","displayName"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"0d1a078c.js","sources":["../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport set from 'lodash/set';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps, HasTheme {\n /** Props to pass to the avatar. */\n avatarProps?: Omit<AvatarProps, 'alt'>;\n /** Additional fields used to describe the user. */\n fields?: string[];\n /** Props to pass to the link wrapping the avatar thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** Multiple action toolbar content. */\n multipleActions?: ReactNode;\n /** User name. */\n name?: React.ReactNode;\n /** Props to pass to the name block. */\n nameProps?: GenericProps;\n /** Orientation. */\n orientation?: Orientation;\n /** Simple action toolbar content. */\n simpleAction?: ReactNode;\n /** Size variant. */\n size?: UserBlockSize;\n /** On click callback. */\n onClick?(): void;\n /** On mouse enter callback. */\n onMouseEnter?(): void;\n /** On mouse leave callback. */\n onMouseLeave?(): void;\n /** Display additional fields below the original name and fields */\n additionalFields?: React.ReactNode;\n /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */\n after?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n orientation: Orientation.horizontal,\n size: Size.m,\n};\n\n/**\n * UserBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n avatarProps,\n className,\n fields,\n linkProps,\n linkAs,\n multipleActions,\n name,\n nameProps,\n onClick,\n onMouseEnter,\n onMouseLeave,\n orientation = DEFAULT_PROPS.orientation,\n simpleAction,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n children,\n additionalFields,\n after,\n ...forwardedProps\n } = props;\n let componentSize = size;\n\n // Special case - When using vertical orientation force the size to be Sizes.l.\n if (orientation === Orientation.vertical) {\n componentSize = Size.l;\n }\n\n const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isClickable = !!onClick || isLink;\n\n const nameBlock: ReactNode = React.useMemo(() => {\n if (isEmpty(name)) {\n return null;\n }\n let NameComponent: any = 'span';\n const nProps: any = {\n ...nameProps,\n className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n };\n if (isClickable) {\n NameComponent = Link;\n Object.assign(nProps, {\n ...linkProps,\n onClick,\n linkAs,\n color: ColorPalette.dark,\n });\n }\n // Disable avatar focus since the name block is the same link / same button.\n if (avatarProps) {\n set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);\n }\n return <NameComponent {...nProps}>{name}</NameComponent>;\n }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;\n\n const fieldsBlock: ReactNode = fields && shouldDisplayFields && (\n <div className={`${CLASSNAME}__fields`}>\n {fields.map((field: string, idx: number) => (\n <span key={idx} className={`${CLASSNAME}__field`}>\n {field}\n </span>\n ))}\n </div>\n );\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n )}\n onMouseLeave={onMouseLeave}\n onMouseEnter={onMouseEnter}\n >\n {avatarProps && (\n <Avatar\n linkAs={linkAs}\n linkProps={linkProps}\n alt=\"\"\n {...(avatarProps as any)}\n className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n size={componentSize}\n onClick={onClick}\n theme={theme}\n />\n )}\n {(fields || name || children || additionalFields) && (\n <div className={`${CLASSNAME}__wrapper`}>\n {children || nameBlock}\n {fieldsBlock}\n {shouldDisplayFields ? additionalFields : null}\n </div>\n )}\n {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n {shouldDisplayActions && multipleActions && (\n <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n )}\n {after ? <div className={`${CLASSNAME}__after`}>{after}</div> : null}\n </div>\n );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","UserBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","theme","children","additionalFields","after","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","set","_jsx","shouldDisplayFields","s","xs","fieldsBlock","map","field","idx","_jsxs","handleBasicClasses","prefix","Avatar","alt","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"15eab19b.js","sources":["../../src/components/inline-list/InlineList.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface InlineListProps extends GenericProps {\n /**\n * Text color.\n */\n color?: ColorWithVariants;\n /**\n * Lightened or darkened variant of the selected color.\n */\n colorVariant?: ColorVariant;\n /**\n * Typography variant.\n */\n typography?: Typography;\n /**\n * Activate line wrap on overflow.\n */\n wrap?: boolean;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InlineList';\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 = {} as const;\n\n/**\n * InlineList component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const InlineList = forwardRef<InlineListProps>((props, ref) => {\n const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;\n const typographyClassName = typography && getTypographyClassName(typography);\n return (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n {...forwardedProps}\n ref={ref as any}\n className={classNames(\n className,\n CLASSNAME,\n wrap && `${CLASSNAME}--wrap`,\n fontColorClass(color, colorVariant),\n typographyClassName,\n )}\n // Lists with removed bullet style can lose their a11y list role on some browsers\n role=\"list\"\n >\n {Children.toArray(children).map((child, index) => {\n const key = (isValidElement(child) && child.key) || index;\n return (\n // We need to item is set as display: contents which removes the semantic.\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <li key={key} role=\"listitem\" className={`${CLASSNAME}__item`}>\n {index !== 0 && (\n <span className={`${CLASSNAME}__item-separator`} aria-hidden=\"true\">\n {'\\u00A0•\\u00A0'}\n </span>\n )}\n {child}\n </li>\n );\n })}\n </ul>\n );\n});\nInlineList.displayName = COMPONENT_NAME;\nInlineList.className = CLASSNAME;\nInlineList.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InlineList","forwardRef","props","ref","className","color","colorVariant","typography","children","wrap","forwardedProps","typographyClassName","getTypographyClassName","_jsx","classNames","fontColorClass","role","Children","toArray","map","child","index","key","isValidElement","_jsxs","displayName","defaultProps"],"mappings":";;;;;;AAmCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClE,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,YAAY;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,IAAI;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAC/F,EAAA,MAAMS,mBAAmB,GAAGJ,UAAU,IAAIK,sBAAsB,CAACL,UAAU,CAAC,CAAA;AAC5E,EAAA;AAAA;AACI;IACAM,GAAA,CAAA,IAAA,EAAA;AAAA,MAAA,GACQH,cAAc;AAClBP,MAAAA,GAAG,EAAEA,GAAW;MAChBC,SAAS,EAAEU,UAAU,CACjBV,SAAS,EACTP,SAAS,EACTY,IAAI,IAAI,CAAA,EAAGZ,SAAS,CAAQ,MAAA,CAAA,EAC5BkB,cAAc,CAACV,KAAK,EAAEC,YAAY,CAAC,EACnCK,mBACJ,CAAA;AACA;AAAA;AACAK,MAAAA,IAAI,EAAC,MAAM;AAAAR,MAAAA,QAAA,EAEVS,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC,CAACW,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;AAC9C,QAAA,MAAMC,GAAG,gBAAIC,cAAc,CAACH,KAAK,CAAC,IAAIA,KAAK,CAACE,GAAG,IAAKD,KAAK,CAAA;AACzD,QAAA;AAAA;AACI;AACA;UACAG,IAAA,CAAA,IAAA,EAAA;AAAcR,YAAAA,IAAI,EAAC,UAAU;YAACZ,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAAW,YAAAA,QAAA,EACzDa,CAAAA,KAAK,KAAK,CAAC,iBACRR,GAAA,CAAA,MAAA,EAAA;cAAMT,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAmB,gBAAA,CAAA;AAAC,cAAA,aAAA,EAAY,MAAM;AAAAW,cAAAA,QAAA,EAC9D,eAAA;aACC,CACT,EACAY,KAAK,CAAA;AAAA,WAAA,EANDE,GAOL,CAAA;AAAC,UAAA;OAEZ,CAAA;KACD,CAAA;AAAC,IAAA;AAEb,CAAC,EAAC;AACFtB,UAAU,CAACyB,WAAW,GAAG7B,cAAc,CAAA;AACvCI,UAAU,CAACI,SAAS,GAAGP,SAAS,CAAA;AAChCG,UAAU,CAAC0B,YAAY,GAAG3B,aAAa;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"179a84d1.js","sources":["../../src/components/autocomplete/Autocomplete.tsx","../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\n /**\n * Whether the suggestions list should display anchored to the input or to the wrapper.\n * @see {@link DropdownProps#anchorToInput}\n */\n anchorToInput?: boolean;\n /**\n * Props to pass to the clear button (minus those already set by the TextField props).\n * If not specified, the button won't be displayed.\n * @see {@link TextFieldProps#clearButtonProps}\n */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /**\n * Reference to the <input> or <textarea> element.\n * @see {@link TextFieldProps#inputRef}\n */\n inputRef?: TextFieldProps['inputRef'];\n /**\n * The offset that will be applied to the Dropdown position.\n * @see {@link DropdownProps#offset}\n */\n offset?: Offset;\n /**\n * The preferred Dropdown location against the anchor element.\n * @see {@link DropdownProps#placement}\n */\n placement?: Placement;\n /**\n * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link DropdownProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\n /**\n * The error related to the component.\n * @see {@link TextFieldProps#error}\n */\n error?: string | ReactNode;\n /**\n * Whether the text field is displayed with error style or not.\n * @see {@link TextFieldProps#hasError}\n */\n hasError?: boolean;\n /**\n * Whether the text box should be focused upon closing the suggestions or not.\n */\n shouldFocusOnClose?: boolean;\n /**\n * The helper message of the text field.\n * @see {@link TextFieldProps#helper}\n */\n helper?: string;\n /**\n * The icon of the text field (SVG path).\n * @see {@link TextFieldProps#icon}\n */\n icon?: string;\n /**\n * Whether the component is disabled or not.\n * @see {@link TextFieldProps#isDisabled}\n */\n isDisabled?: boolean;\n /**\n * Whether the component is required or not.\n * @see {@link TextFieldProps#isRequired}\n */\n isRequired?: boolean;\n /**\n * Whether the text field is displayed with valid style or not.\n * @see {@link TextFieldProps#isValid}\n */\n isValid?: boolean;\n /**\n * The label of the text field displayed in a label tag.\n * @see {@link TextFieldProps#label}\n */\n label?: string;\n /**\n * The placeholder message of the text field.\n * @see {@link TextFieldProps#placeholder}\n */\n placeholder?: string;\n /** List of suggestions to display during autocomplete. */\n children: React.ReactNode;\n /**\n * The list of chips to be displayed before the text field input.\n */\n chips?: React.ReactNode;\n /**\n * The value of the text field.\n * @see {@link TextFieldProps#value}\n */\n value: string;\n /**\n * Whether the suggestions from the autocomplete should be displayed or not.\n * @see {@link DropdownProps#isOpen}\n */\n isOpen: boolean;\n /**\n * The native input name property.\n * @see {@link TextFieldProps#name}\n */\n name?: string;\n /**\n * Whether a click in the Autocomplete dropdown would close it or not.\n * @see {@link DropdownProps#closeOnClick}\n */\n closeOnClick?: boolean;\n /**\n * Whether a click anywhere out of the Autocomplete would close it or not.\n * @see {@link DropdownProps#closeOnClickAway}\n */\n closeOnClickAway?: boolean;\n /**\n * Whether an escape key press would close the Autocomplete or not.\n * @see {@link DropdownProps#closeOnEscape}\n */\n closeOnEscape?: boolean;\n /**\n * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n * @see {@link DropdownProps#focusAnchorOnClose}\n */\n focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\n /**\n * The function called on blur.\n * @see {@link TextFieldProps#onBlur}\n */\n onBlur?(event: React.FocusEvent): void;\n /**\n * On change callback.\n * @see {@link TextFieldProps#onChange}\n */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /**\n * The function called on close.\n * @see {@link DropdownProps#onClose}\n */\n onClose?(): void;\n /**\n * The function called on focus.\n * @see {@link TextFieldProps#onFocus}\n */\n onFocus?(event: React.FocusEvent): void;\n /**\n * The function called when the bottom of the dropdown is reached.\n * @see {@link DropdownProps#onInfiniteScroll}\n */\n onInfiniteScroll?(): void;\n /**\n * Props forwarded to the underlying TextField component.\n * Only the props not managed by the Autocomplete can be set.\n * @see {@link TextFieldProps}\n */\n textFieldProps?: Partial<TextFieldProps>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\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<AutocompleteProps> = {\n anchorToInput: false,\n closeOnClick: false,\n closeOnClickAway: true,\n closeOnEscape: true,\n shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput = DEFAULT_PROPS.anchorToInput,\n children,\n chips,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n error,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClose,\n onFocus,\n onInfiniteScroll,\n placeholder,\n placement,\n shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n theme = defaultTheme,\n value,\n textFieldProps = {},\n focusAnchorOnClose,\n ...forwardedProps\n } = otherProps;\n const inputAnchorRef = useRef<HTMLElement>(null);\n const textFieldRef = useRef(null);\n useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n <TextField\n {...textFieldProps}\n chips={chips}\n error={error}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}\n clearButtonProps={clearButtonProps}\n {...disabledStateProps}\n isRequired={isRequired}\n isValid={isValid}\n label={label}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n textFieldRef={textFieldRef}\n theme={theme}\n value={value}\n />\n <Dropdown\n anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n closeOnClick={closeOnClick}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n focusAnchorOnClose={focusAnchorOnClose}\n fitToAnchorWidth={fitToAnchorWidth}\n isOpen={isOpen}\n offset={offset}\n onClose={onClose}\n onInfiniteScroll={onInfiniteScroll}\n placement={placement}\n shouldFocusOnOpen={false}\n theme={theme}\n >\n {children}\n </Dropdown>\n </div>\n );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n /** Selected values. */\n values: any[];\n /** Alignment of the chips in the autocomplete. */\n chipsAlignment?: HorizontalAlignment;\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender(\n choice: any,\n index: number,\n onClear?: (event: React.MouseEvent, choice: any) => void,\n isDisabled?: boolean,\n ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\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<AutocompleteMultipleProps> = {\n closeOnClickAway: true,\n closeOnEscape: true,\n selectedChipRender(choice, index, onClear, isDisabled) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n >\n {choice}\n </Chip>\n );\n },\n values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput,\n children,\n // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chipsAlignment,\n className,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClear,\n onClose,\n onFocus,\n onInfiniteScroll,\n onKeyDown,\n placeholder,\n placement,\n selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n shouldFocusOnClose,\n theme = defaultTheme,\n type,\n value,\n values = DEFAULT_PROPS.values,\n ...forwardedProps\n } = otherProps;\n\n return (\n <Autocomplete\n ref={ref}\n {...forwardedProps}\n anchorToInput={anchorToInput}\n className={classNames(className, CLASSNAME)}\n name={name}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n shouldFocusOnClose={shouldFocusOnClose}\n onFocus={onFocus}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={inputRef}\n chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n {...disabledStateProps}\n isRequired={isRequired}\n clearButtonProps={clearButtonProps}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n theme={theme}\n type={type}\n isOpen={isOpen}\n closeOnClick={false}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n onClose={onClose}\n offset={offset}\n placement={placement}\n fitToAnchorWidth={fitToAnchorWidth}\n onInfiniteScroll={onInfiniteScroll}\n >\n {children}\n </Autocomplete>\n );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","_jsxs","classNames","_jsx","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"193521fa.js","sources":["../../src/components/heading/Heading.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeadingElement } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Text, TextProps } from '../text';\nimport { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';\nimport { useHeadingLevel } from './useHeadingLevel';\n\n/**\n * Defines the props of the component.\n */\nexport interface HeadingProps extends Partial<TextProps> {\n /**\n * Display a specific heading level instead of the one provided by parent context provider.\n */\n as?: HeadingElement;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Heading';\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 = {} as const;\n\n/**\n * Renders a heading component.\n * Extends the `Text` Component with the heading level automatically computed based on\n * the current level provided by the context.\n */\nexport const Heading = forwardRef<HeadingProps>((props, ref) => {\n const { children, as, className, ...forwardedProps } = props;\n const { headingElement } = useHeadingLevel();\n\n const computedHeadingElement = as || headingElement;\n return (\n <Text\n ref={ref}\n className={classNames(className, CLASSNAME)}\n as={computedHeadingElement}\n typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}\n {...forwardedProps}\n >\n {children}\n </Text>\n );\n});\n\nHeading.displayName = COMPONENT_NAME;\nHeading.className = CLASSNAME;\nHeading.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Heading","forwardRef","props","ref","children","as","className","forwardedProps","headingElement","useHeadingLevel","computedHeadingElement","_jsx","Text","classNames","typography","DEFAULT_TYPOGRAPHY_BY_LEVEL","displayName","defaultProps"],"mappings":";;;;;;AAwBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAAe,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,EAAE;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGL,KAAK,CAAA;EAC5D,MAAM;AAAEM,IAAAA,cAAAA;GAAgB,GAAGC,eAAe,EAAE,CAAA;AAE5C,EAAA,MAAMC,sBAAsB,GAAGL,EAAE,IAAIG,cAAc,CAAA;EACnD,oBACIG,GAAA,CAACC,IAAI,EAAA;AACDT,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,SAAS,EAAEO,UAAU,CAACP,SAAS,EAAET,SAAS,CAAE;AAC5CQ,IAAAA,EAAE,EAAEK,sBAAuB;AAC3BI,IAAAA,UAAU,EAAEC,2BAA2B,CAACL,sBAAsB,CAAE;AAAA,IAAA,GAC5DH,cAAc;AAAAH,IAAAA,QAAA,EAEjBA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAEf,CAAC,EAAC;AAEFJ,OAAO,CAACgB,WAAW,GAAGpB,cAAc,CAAA;AACpCI,OAAO,CAACM,SAAS,GAAGT,SAAS,CAAA;AAC7BG,OAAO,CAACiB,YAAY,GAAGlB,aAAa;;;;"}
|
package/_internal/1a90ea3d.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { m as getRootClassName, n as forwardRef, l as classNames, b as Theme, j as ColorPalette, c as Size } from './6589b796.js';
|
|
2
|
-
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
3
|
-
import { u as useTheme } from './3181f000.js';
|
|
4
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
-
import { I as Icon } from './8ab42752.js';
|
|
6
|
-
|
|
7
|
-
const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Component display name.
|
|
11
|
-
*/
|
|
12
|
-
const COMPONENT_NAME = 'DragHandle';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Component default class name and class prefix.
|
|
16
|
-
*/
|
|
17
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* DragHandle component.
|
|
21
|
-
*
|
|
22
|
-
* @param props Component props.
|
|
23
|
-
* @param ref Component ref.
|
|
24
|
-
* @return React element.
|
|
25
|
-
*/
|
|
26
|
-
const DragHandle = forwardRef((props, ref) => {
|
|
27
|
-
const defaultTheme = useTheme();
|
|
28
|
-
const {
|
|
29
|
-
className,
|
|
30
|
-
theme = defaultTheme,
|
|
31
|
-
...forwardedProps
|
|
32
|
-
} = props;
|
|
33
|
-
return /*#__PURE__*/jsx("div", {
|
|
34
|
-
ref: ref,
|
|
35
|
-
...forwardedProps,
|
|
36
|
-
className: classNames(className, handleBasicClasses({
|
|
37
|
-
prefix: CLASSNAME,
|
|
38
|
-
theme
|
|
39
|
-
})),
|
|
40
|
-
children: /*#__PURE__*/jsx(Icon, {
|
|
41
|
-
icon: mdiDragVertical,
|
|
42
|
-
color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
|
|
43
|
-
size: Size.xs
|
|
44
|
-
})
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
DragHandle.displayName = COMPONENT_NAME;
|
|
48
|
-
DragHandle.className = CLASSNAME;
|
|
49
|
-
|
|
50
|
-
export { DragHandle };
|
|
51
|
-
//# sourceMappingURL=1a90ea3d.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"1a90ea3d.js","sources":["../../../lumx-icons/dist/esm/drag-vertical.js","../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["export const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';","import classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\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 = forwardRef<DragHandleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { className, theme = defaultTheme, ...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":["mdiDragVertical","COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","defaultTheme","useTheme","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","children","Icon","icon","color","Theme","dark","ColorPalette","light","size","Size","xs","displayName"],"mappings":";;;;;;AAAO,MAAMA,eAAe,GAAG,wHAAwH;;ACcvJ;AACA;AACA;AACA,MAAMC,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAU,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClF,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,SAAS;AAAEC,IAAAA,KAAK,GAAGH,YAAY;IAAE,GAAGI,cAAAA;AAAe,GAAC,GAAGN,KAAK,CAAA;AAEpE,EAAA,oBACIO,GAAA,CAAA,KAAA,EAAA;AACIN,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLK,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAS;AAAES,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAM,QAAA,eAEnFJ,GAAA,CAACK,IAAI,EAAA;AACDC,MAAAA,IAAI,EAAEnB,eAAgB;AACtBoB,MAAAA,KAAK,EAAET,KAAK,KAAKU,KAAK,CAACC,IAAI,GAAGC,YAAY,CAACC,KAAK,GAAGD,YAAY,CAACD,IAAK;MACrEG,IAAI,EAAEC,IAAI,CAACC,EAAAA;KACd,CAAA;AAAC,GACD,CAAC,CAAA;AAEd,CAAC,EAAC;AACFvB,UAAU,CAACwB,WAAW,GAAG3B,cAAc,CAAA;AACvCG,UAAU,CAACM,SAAS,GAAGR,SAAS;;;;"}
|
package/_internal/1deba7d7.js
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
import { m as getRootClassName, l as classNames, c as Size, O as Orientation, n as forwardRef, b as Theme } from './6589b796.js';
|
|
2
|
-
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
3
|
-
import { u as useTheme, T as ThemeProvider } from './3181f000.js';
|
|
4
|
-
import { createContext, useState, useRef, useContext } from 'react';
|
|
5
|
-
import { u as useId } from './3a1facc0.js';
|
|
6
|
-
import { f as forwardRefPolymorphic, R as RawClickable } from './2c2b6a89.js';
|
|
7
|
-
import { u as useOverflowTooltipLabel, T as Text } from './0420e67b.js';
|
|
8
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
9
|
-
import { Tooltip } from './9a4dfad0.js';
|
|
10
|
-
import { P as Placement } from './4cd870a5.js';
|
|
11
|
-
import { I as Icon } from './8ab42752.js';
|
|
12
|
-
import { P as Popover } from './84dfe68f.js';
|
|
13
|
-
import { m as mdiChevronUp, a as mdiChevronDown } from './0b9c76cb.js';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Component display name.
|
|
17
|
-
*/
|
|
18
|
-
const COMPONENT_NAME$2 = 'NavigationItem';
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Component default class name and class prefix.
|
|
22
|
-
*/
|
|
23
|
-
const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
|
|
24
|
-
const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
|
|
25
|
-
const {
|
|
26
|
-
className,
|
|
27
|
-
icon,
|
|
28
|
-
label,
|
|
29
|
-
isCurrentPage,
|
|
30
|
-
as: Element = 'a',
|
|
31
|
-
...forwardedProps
|
|
32
|
-
} = props;
|
|
33
|
-
const theme = useTheme();
|
|
34
|
-
const {
|
|
35
|
-
tooltipLabel,
|
|
36
|
-
labelRef
|
|
37
|
-
} = useOverflowTooltipLabel(label);
|
|
38
|
-
return /*#__PURE__*/jsx("li", {
|
|
39
|
-
className: classNames(className, handleBasicClasses({
|
|
40
|
-
prefix: CLASSNAME$2,
|
|
41
|
-
theme
|
|
42
|
-
})),
|
|
43
|
-
children: /*#__PURE__*/jsx(Tooltip, {
|
|
44
|
-
label: tooltipLabel,
|
|
45
|
-
placement: Placement.TOP,
|
|
46
|
-
children: /*#__PURE__*/jsxs(RawClickable, {
|
|
47
|
-
as: Element,
|
|
48
|
-
className: handleBasicClasses({
|
|
49
|
-
prefix: `${CLASSNAME$2}__link`,
|
|
50
|
-
isSelected: isCurrentPage
|
|
51
|
-
}),
|
|
52
|
-
ref: ref,
|
|
53
|
-
"aria-current": isCurrentPage ? 'page' : undefined,
|
|
54
|
-
...forwardedProps,
|
|
55
|
-
children: [icon ? /*#__PURE__*/jsx(Icon, {
|
|
56
|
-
className: `${CLASSNAME$2}__icon`,
|
|
57
|
-
icon: icon,
|
|
58
|
-
size: Size.xs,
|
|
59
|
-
theme: theme
|
|
60
|
-
}) : null, /*#__PURE__*/jsx(Text, {
|
|
61
|
-
as: "span",
|
|
62
|
-
truncate: true,
|
|
63
|
-
className: `${CLASSNAME$2}__label`,
|
|
64
|
-
ref: labelRef,
|
|
65
|
-
children: label
|
|
66
|
-
})]
|
|
67
|
-
})
|
|
68
|
-
})
|
|
69
|
-
});
|
|
70
|
-
}), {
|
|
71
|
-
displayName: COMPONENT_NAME$2,
|
|
72
|
-
className: CLASSNAME$2
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
const NavigationContext = /*#__PURE__*/createContext({
|
|
76
|
-
orientation: Orientation.vertical
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* Component display name.
|
|
81
|
-
*/
|
|
82
|
-
const COMPONENT_NAME$1 = 'NavigationSection';
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Component default class name and class prefix.
|
|
86
|
-
*/
|
|
87
|
-
const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
|
|
88
|
-
const NavigationSection = forwardRef((props, ref) => {
|
|
89
|
-
const {
|
|
90
|
-
children,
|
|
91
|
-
className,
|
|
92
|
-
label,
|
|
93
|
-
icon,
|
|
94
|
-
...forwardedProps
|
|
95
|
-
} = props;
|
|
96
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
97
|
-
const buttonRef = useRef(null);
|
|
98
|
-
const sectionId = useId();
|
|
99
|
-
const {
|
|
100
|
-
orientation
|
|
101
|
-
} = useContext(NavigationContext) || {};
|
|
102
|
-
const theme = useTheme();
|
|
103
|
-
const isDropdown = orientation === Orientation.horizontal;
|
|
104
|
-
return /*#__PURE__*/jsxs("li", {
|
|
105
|
-
className: classNames(className, CLASSNAME$1, CLASSNAME$2, handleBasicClasses({
|
|
106
|
-
prefix: CLASSNAME$2,
|
|
107
|
-
theme
|
|
108
|
-
})),
|
|
109
|
-
ref: ref,
|
|
110
|
-
children: [/*#__PURE__*/jsxs(RawClickable, {
|
|
111
|
-
as: "button",
|
|
112
|
-
...forwardedProps,
|
|
113
|
-
"aria-controls": sectionId,
|
|
114
|
-
"aria-expanded": isOpen,
|
|
115
|
-
className: classNames(`${CLASSNAME$2}__link`),
|
|
116
|
-
ref: buttonRef,
|
|
117
|
-
onClick: event => {
|
|
118
|
-
setIsOpen(!isOpen);
|
|
119
|
-
event.stopPropagation();
|
|
120
|
-
},
|
|
121
|
-
children: [icon ? /*#__PURE__*/jsx(Icon, {
|
|
122
|
-
className: `${CLASSNAME$2}__icon`,
|
|
123
|
-
icon: icon,
|
|
124
|
-
size: Size.xs
|
|
125
|
-
}) : null, /*#__PURE__*/jsx(Text, {
|
|
126
|
-
as: "span",
|
|
127
|
-
truncate: true,
|
|
128
|
-
className: `${CLASSNAME$2}__label`,
|
|
129
|
-
ref: ref,
|
|
130
|
-
children: label
|
|
131
|
-
}), /*#__PURE__*/jsx(Icon, {
|
|
132
|
-
className: classNames(`${CLASSNAME$2}__icon`, `${CLASSNAME$1}__chevron`),
|
|
133
|
-
icon: isOpen ? mdiChevronUp : mdiChevronDown
|
|
134
|
-
})]
|
|
135
|
-
}), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
|
|
136
|
-
anchorRef: buttonRef,
|
|
137
|
-
isOpen: isOpen,
|
|
138
|
-
placement: Placement.BOTTOM_START,
|
|
139
|
-
usePortal: false,
|
|
140
|
-
closeOnClickAway: true,
|
|
141
|
-
closeOnEscape: true,
|
|
142
|
-
onClick: () => setIsOpen(false),
|
|
143
|
-
onClose: () => setIsOpen(false),
|
|
144
|
-
zIndex: 996,
|
|
145
|
-
children: /*#__PURE__*/jsx(ThemeProvider, {
|
|
146
|
-
value: Theme.light,
|
|
147
|
-
children: /*#__PURE__*/jsx("ul", {
|
|
148
|
-
className: `${CLASSNAME$1}__drawer--popover`,
|
|
149
|
-
id: sectionId,
|
|
150
|
-
children: /*#__PURE__*/jsx(NavigationContext.Provider, {
|
|
151
|
-
value: {
|
|
152
|
-
orientation: Orientation.vertical
|
|
153
|
-
},
|
|
154
|
-
children: children
|
|
155
|
-
})
|
|
156
|
-
})
|
|
157
|
-
})
|
|
158
|
-
}) : /*#__PURE__*/jsx("ul", {
|
|
159
|
-
className: `${CLASSNAME$1}__drawer`,
|
|
160
|
-
id: sectionId,
|
|
161
|
-
children: children
|
|
162
|
-
}))]
|
|
163
|
-
});
|
|
164
|
-
});
|
|
165
|
-
NavigationSection.displayName = COMPONENT_NAME$1;
|
|
166
|
-
NavigationSection.className = CLASSNAME$1;
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Component display name.
|
|
170
|
-
*/
|
|
171
|
-
const COMPONENT_NAME = 'Navigation';
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
* Component default class name and class prefix.
|
|
175
|
-
*/
|
|
176
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Component default props
|
|
180
|
-
*/
|
|
181
|
-
const DEFAULT_PROPS = {
|
|
182
|
-
orientation: Orientation.vertical
|
|
183
|
-
};
|
|
184
|
-
const Navigation = forwardRef((props, ref) => {
|
|
185
|
-
const defaultTheme = useTheme() || Theme.light;
|
|
186
|
-
const {
|
|
187
|
-
children,
|
|
188
|
-
className,
|
|
189
|
-
theme = defaultTheme,
|
|
190
|
-
orientation = DEFAULT_PROPS.orientation,
|
|
191
|
-
...forwardedProps
|
|
192
|
-
} = props;
|
|
193
|
-
return /*#__PURE__*/jsx(ThemeProvider, {
|
|
194
|
-
value: theme,
|
|
195
|
-
children: /*#__PURE__*/jsx("nav", {
|
|
196
|
-
className: classNames(className, handleBasicClasses({
|
|
197
|
-
prefix: CLASSNAME,
|
|
198
|
-
theme,
|
|
199
|
-
orientation
|
|
200
|
-
})),
|
|
201
|
-
ref: ref,
|
|
202
|
-
...forwardedProps,
|
|
203
|
-
children: /*#__PURE__*/jsx(NavigationContext.Provider, {
|
|
204
|
-
value: {
|
|
205
|
-
orientation
|
|
206
|
-
},
|
|
207
|
-
children: /*#__PURE__*/jsx("ul", {
|
|
208
|
-
className: `${CLASSNAME}__list`,
|
|
209
|
-
children: children
|
|
210
|
-
})
|
|
211
|
-
})
|
|
212
|
-
})
|
|
213
|
-
});
|
|
214
|
-
});
|
|
215
|
-
Navigation.displayName = COMPONENT_NAME;
|
|
216
|
-
Navigation.className = CLASSNAME;
|
|
217
|
-
Navigation.defaultProps = DEFAULT_PROPS;
|
|
218
|
-
|
|
219
|
-
// Sub components
|
|
220
|
-
Navigation.Section = NavigationSection;
|
|
221
|
-
Navigation.Item = NavigationItem;
|
|
222
|
-
|
|
223
|
-
export { Navigation };
|
|
224
|
-
//# sourceMappingURL=1deba7d7.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"1deba7d7.js","sources":["../../src/components/navigation/NavigationItem.tsx","../../src/components/navigation/context.tsx","../../src/components/navigation/NavigationSection.tsx","../../src/components/navigation/Navigation.tsx"],"sourcesContent":["import { ElementType, ReactNode } from 'react';\nimport { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\nimport { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\n\ntype BaseNavigationItemProps = {\n /** Icon (SVG path). */\n icon?: string;\n /** Label content. */\n label: ReactNode;\n /** Mark as the current page link */\n isCurrentPage?: boolean;\n};\n\n/**\n * Navigation item props\n */\nexport type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<E> &\n HasTheme &\n HasClassName &\n BaseNavigationItemProps &\n HasRequiredLinkHref<E>;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationItem';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationItem = Object.assign(\n forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {\n const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;\n const theme = useTheme();\n const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);\n\n return (\n <li\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <Tooltip label={tooltipLabel} placement={Placement.TOP}>\n <RawClickable\n as={Element}\n className={handleBasicClasses({\n prefix: `${CLASSNAME}__link`,\n isSelected: isCurrentPage,\n })}\n ref={ref as React.Ref<any>}\n aria-current={isCurrentPage ? 'page' : undefined}\n {...forwardedProps}\n >\n {icon ? (\n <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />\n ) : null}\n\n <Text as=\"span\" truncate className={`${CLASSNAME}__label`} ref={labelRef}>\n {label}\n </Text>\n </RawClickable>\n </Tooltip>\n </li>\n );\n }),\n {\n displayName: COMPONENT_NAME,\n className: CLASSNAME,\n },\n);\n","import { createContext } from 'react';\n\nimport { Orientation } from '@lumx/core/js/constants';\n\nexport const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({\n orientation: Orientation.vertical,\n});\n","import { useRef, useState, useContext } from 'react';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\nimport { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';\nimport classNames from 'classnames';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { HasClassName } from '@lumx/react/utils/type';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {\n /** Items inside the section */\n children: React.ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Label content. */\n label: string | React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationSection';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {\n const { children, className, label, icon, ...forwardedProps } = props;\n const [isOpen, setIsOpen] = useState(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const sectionId = useId();\n const { orientation } = useContext(NavigationContext) || {};\n const theme = useTheme();\n const isDropdown = orientation === Orientation.horizontal;\n return (\n <li\n className={classNames(\n className,\n CLASSNAME,\n ITEM_CLASSNAME,\n handleBasicClasses({\n prefix: ITEM_CLASSNAME,\n theme,\n }),\n )}\n ref={ref}\n >\n <RawClickable<'button'>\n as=\"button\"\n {...forwardedProps}\n aria-controls={sectionId}\n aria-expanded={isOpen}\n className={classNames(`${ITEM_CLASSNAME}__link`)}\n ref={buttonRef}\n onClick={(event) => {\n setIsOpen(!isOpen);\n event.stopPropagation();\n }}\n >\n {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}\n\n <Text as=\"span\" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>\n {label}\n </Text>\n <Icon\n className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}\n icon={isOpen ? mdiChevronUp : mdiChevronDown}\n />\n </RawClickable>\n {isOpen &&\n (isDropdown ? (\n <Popover\n anchorRef={buttonRef}\n isOpen={isOpen}\n placement={Placement.BOTTOM_START}\n usePortal={false}\n closeOnClickAway\n closeOnEscape\n onClick={() => setIsOpen(false)}\n onClose={() => setIsOpen(false)}\n zIndex={996}\n >\n <ThemeProvider value={Theme.light}>\n <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>\n <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>\n {children}\n </NavigationContext.Provider>\n </ul>\n </ThemeProvider>\n </Popover>\n ) : (\n <ul className={`${CLASSNAME}__drawer`} id={sectionId}>\n {children}\n </ul>\n ))}\n </li>\n );\n});\nNavigationSection.displayName = COMPONENT_NAME;\nNavigationSection.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { Orientation, Theme } from '@lumx/react';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { NavigationSection } from './NavigationSection';\nimport { NavigationItem } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport type NavigationProps = React.ComponentProps<'nav'> &\n HasClassName &\n HasTheme & {\n /** Content of the navigation. These components should be of type NavigationItem to be rendered */\n children?: React.ReactNode;\n orientation?: Orientation;\n } & HasAriaLabelOrLabelledBy;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Navigation';\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 = {\n orientation: Orientation.vertical,\n};\n\ntype SubComponents = {\n Section: typeof NavigationSection;\n Item: typeof NavigationItem;\n};\n\nexport const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n children,\n className,\n theme = defaultTheme,\n orientation = DEFAULT_PROPS.orientation,\n ...forwardedProps\n } = props;\n return (\n <ThemeProvider value={theme}>\n <nav\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n theme,\n orientation,\n }),\n )}\n ref={ref}\n {...forwardedProps}\n >\n <NavigationContext.Provider value={{ orientation }}>\n <ul className={`${CLASSNAME}__list`}>{children}</ul>\n </NavigationContext.Provider>\n </nav>\n </ThemeProvider>\n );\n});\nNavigation.displayName = COMPONENT_NAME;\nNavigation.className = CLASSNAME;\nNavigation.defaultProps = DEFAULT_PROPS;\n\n// Sub components\nNavigation.Section = NavigationSection;\nNavigation.Item = NavigationItem;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","NavigationItem","Object","assign","forwardRefPolymorphic","props","ref","className","icon","label","isCurrentPage","as","Element","forwardedProps","theme","useTheme","tooltipLabel","labelRef","useOverflowTooltipLabel","_jsx","classNames","handleBasicClasses","prefix","children","Tooltip","placement","Placement","TOP","_jsxs","RawClickable","isSelected","undefined","Icon","size","Size","xs","Text","truncate","displayName","NavigationContext","createContext","orientation","Orientation","vertical","NavigationSection","forwardRef","isOpen","setIsOpen","useState","buttonRef","useRef","sectionId","useId","useContext","isDropdown","horizontal","ITEM_CLASSNAME","onClick","event","stopPropagation","mdiChevronUp","mdiChevronDown","Popover","anchorRef","BOTTOM_START","usePortal","closeOnClickAway","closeOnEscape","onClose","zIndex","ThemeProvider","value","Theme","light","id","Provider","DEFAULT_PROPS","Navigation","defaultTheme","defaultProps","Section","Item"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"1ea72630.js","sources":["../../src/hooks/useInfiniteScroll.tsx","../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { 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 { cloneElement, useMemo, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { List, ListProps } from '@lumx/react/components/list/List';\nimport { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';\nimport { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';\nimport { GenericProps, isComponent } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { Offset, Placement } from '@lumx/react/components/popover/constants';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\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 * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link PopoverProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: PopoverProps['fitToAnchorWidth'];\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 dropdown should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */\n usePortal?: 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 = forwardRef<DropdownProps, HTMLDivElement>((props, ref) => {\n const {\n anchorRef,\n children,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth = DEFAULT_PROPS.fitToAnchorWidth,\n fitWithinViewportHeight = DEFAULT_PROPS.fitWithinViewportHeight,\n isOpen,\n offset,\n focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,\n onClose,\n onInfiniteScroll,\n placement = DEFAULT_PROPS.placement,\n shouldFocusOnOpen = DEFAULT_PROPS.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, 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","_jsx","Popover","classNames","elevation","focusElement","displayName","defaultProps"],"mappings":"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"}
|