@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
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Thumbnail-30d2a781.js","sources":["../../src/components/thumbnail/useImageLoad.ts","../../src/components/thumbnail/useFocusPointStyle.tsx","../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n // Error event occurred or image has no source.\n if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {\n return 'hasError';\n }\n // Image is undefined or incomplete.\n if (!img || !img.complete) {\n return 'isLoading';\n }\n // Else loaded.\n return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n // Update state when changing image URL or DOM reference.\n useEffect(() => {\n setState(getState(imgRef));\n }, [imageURL, imgRef]);\n\n // Listen to `load` and `error` event on image\n useEffect(() => {\n const img = imgRef;\n if (!img) return undefined;\n const update = (event?: Event) => setState(getState(img, event));\n img.addEventListener('load', update);\n img.addEventListener('error', update);\n return () => {\n img.removeEventListener('load', update);\n img.removeEventListener('error', update);\n };\n }, [imgRef, imgRef?.src]);\n\n return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/core/js/constants';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\nimport { RectSize } from '@lumx/react/utils/type';\n\n// Calculate shift to center the focus point in the container.\nexport function shiftPosition({\n scale,\n focusPoint,\n imageSize,\n containerSize,\n}: {\n scale: number;\n focusPoint: number;\n imageSize: number;\n containerSize: number;\n}) {\n const scaledSize = imageSize / scale;\n if (scaledSize === containerSize) return 0;\n\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n element: HTMLImageElement | undefined,\n isLoaded: boolean,\n): CSSProperties => {\n // Get natural image size from imgProps or img element.\n const imageSize: RectSize | undefined = useMemo(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n if (typeof width === 'number' && typeof height === 'number') return { width, height };\n if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n return undefined;\n }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n // Get container size (dependant on imageSize).\n const [containerSize, setContainerSize] = useState<RectSize | undefined>(undefined);\n useEffect(\n function updateContainerSize() {\n const cWidth = element?.offsetWidth;\n const cHeight = element?.offsetHeight;\n if (cWidth && cHeight) {\n // Update only if needed.\n setContainerSize((oldContainerSize) =>\n oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n ? oldContainerSize\n : { width: cWidth, height: cHeight },\n );\n } else if (imageSize) {\n // Wait for a render (in case the container size is dependent on the image size).\n requestAnimationFrame(updateContainerSize);\n }\n },\n [element?.offsetHeight, element?.offsetWidth, imageSize],\n );\n\n // Compute style.\n const style: CSSProperties = useMemo(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {\n return {};\n }\n if (!element || !imageSize) {\n // Focus point can be computed but now right now (image size unknown).\n return { visibility: 'hidden' };\n }\n if (!containerSize || !imageSize.height || !imageSize.width) {\n // Missing container or image size abort focus point compute.\n return {};\n }\n\n const heightScale = imageSize.height / containerSize.height;\n const widthScale = imageSize.width / containerSize.width;\n const scale = Math.min(widthScale, heightScale);\n\n // Focus Y relative to the top (instead of the center)\n const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;\n const y = shiftPosition({\n scale,\n focusPoint: focusPointFromTop,\n imageSize: imageSize.height,\n containerSize: containerSize.height,\n });\n\n // Focus X relative to the left (instead of the center)\n const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;\n const x = shiftPosition({\n scale,\n focusPoint: focusPointFromLeft,\n imageSize: imageSize.width,\n containerSize: containerSize.width,\n });\n\n const objectPosition = `${x}% ${y}%`;\n\n return { objectPosition };\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';\nimport { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mdiImageBroken } from '@lumx/icons';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps, HasTheme {\n /** Alignment of the thumbnail in it's parent (requires flex parent). */\n align?: HorizontalAlignment;\n /** Image alternative text. */\n alt: string;\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Badge. */\n badge?: ReactElement | Falsy;\n /** Image cross origin resource policy. */\n crossOrigin?: ImgHTMLProps['crossOrigin'];\n /** Fallback icon (SVG path) or react node when image fails to load. */\n fallback?: string | ReactNode;\n /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n fillHeight?: boolean;\n /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n focusPoint?: FocusPoint;\n /** Image URL. */\n image: string;\n /** Props to inject into the native <img> element. */\n imgProps?: ImgHTMLProps;\n /** Reference to the native <img> element. */\n imgRef?: Ref<HTMLImageElement>;\n /** Set to true to force the display of the loading skeleton. */\n isLoading?: boolean;\n /** Set how the image should fit when its aspect ratio is constrained */\n objectFit?: ThumbnailObjectFit;\n /** Size variant of the component. */\n size?: ThumbnailSize;\n /** Image loading mode. */\n loading?: ImgHTMLProps['loading'];\n /** Ref of an existing placeholder image to display while loading. */\n loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Variant of the component. */\n variant?: ThumbnailVariant;\n /** Props to pass to the link wrapping the 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}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\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<ThumbnailProps> = {\n fallback: mdiImageBroken,\n loading: 'lazy',\n};\n\n/**\n * Thumbnail component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {\n const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback = DEFAULT_PROPS.fallback,\n fillHeight,\n // `focusPoint` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n focusPoint,\n image,\n imgProps,\n imgRef: propImgRef,\n isLoading: isLoadingProp,\n objectFit,\n loading = DEFAULT_PROPS.loading,\n loadingPlaceholderImageRef,\n size,\n theme = defaultTheme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = otherProps;\n const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n // Image loading state.\n const loadingState = useImageLoad(image, imgElement);\n const isLoaded = loadingState === 'isLoaded';\n const isLoading = isLoadingProp || loadingState === 'isLoading';\n const hasError = loadingState === 'hasError';\n\n // Focus point.\n const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n const hasIconErrorFallback = hasError && typeof fallback === 'string';\n const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n const imageErrorStyle: CSSProperties = {};\n if (hasIconErrorFallback) {\n // Keep the image layout on icon fallback.\n imageErrorStyle.visibility = 'hidden';\n } else if (hasCustomErrorFallback) {\n // Remove the image on custom fallback.\n imageErrorStyle.display = 'none';\n }\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);\n\n const Wrapper: any = isClickable ? RawClickable : 'div';\n const wrapperProps = { ...forwardedProps };\n if (isClickable) {\n Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);\n if (isLink) {\n Object.assign(wrapperProps, linkProps);\n } else {\n wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n }\n }\n\n // If we have a loading placeholder image that is really loaded (complete)\n const loadingPlaceholderImage =\n (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||\n undefined;\n\n // Set loading placeholder image as background\n const loadingStyle = loadingPlaceholderImage\n ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }\n : undefined;\n\n return (\n <Wrapper\n {...wrapperProps}\n ref={ref}\n className={classNames(\n linkProps?.className,\n className,\n handleBasicClasses({\n align,\n aspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isClickable,\n hasError,\n hasIconErrorFallback,\n hasCustomErrorFallback,\n isLoading,\n objectFit,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <span className={`${CLASSNAME}__background`}>\n <img\n // Use placeholder image size\n width={loadingPlaceholderImage?.naturalWidth}\n height={loadingPlaceholderImage?.naturalHeight}\n {...imgProps}\n style={{\n // Reserve space while loading (when possible)\n width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n ...loadingStyle,\n }}\n ref={useMergeRefs(setImgElement, propImgRef)}\n className={classNames(\n handleBasicClasses({\n prefix: `${CLASSNAME}__image`,\n isLoading,\n hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n }),\n imgProps?.className,\n )}\n crossOrigin={crossOrigin}\n src={image}\n alt={alt}\n loading={loading}\n />\n {!isLoading && hasError && (\n <span className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </span>\n )}\n </span>\n {badge &&\n React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n </Wrapper>\n );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","getAttribute","useImageLoad","imageURL","imgRef","state","setState","useState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","image","aspectRatio","imgProps","width","height","element","isLoaded","useMemo","AspectRatio","original","x","y","naturalWidth","naturalHeight","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","Thumbnail","forwardRef","props","ref","isAnyDisabled","otherProps","disabledStateProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoading","isLoadingProp","objectFit","loadingPlaceholderImageRef","size","theme","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isClickable","onClick","Wrapper","RawClickable","wrapperProps","Object","assign","as","loadingPlaceholderImage","current","loadingStyle","backgroundImage","React","createElement","_extends","classNames","handleBasicClasses","prefix","hasBadge","useMergeRefs","hasDefinedSize","Icon","icon","Size","xxs","cloneElement","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
+
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
1
2
|
import React__default from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { u as useId } from '
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import { Toolbar } from './bae266a9.js';
|
|
11
|
-
import { a as Button } from './a34639bd.js';
|
|
3
|
+
import { mdiAlert, mdiInformation, mdiCheckCircle, mdiAlertCircle } from '@lumx/icons';
|
|
4
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
5
|
+
import { u as useId } from '../useId-3a1facc0.js';
|
|
6
|
+
import { Dialog } from './dialog-7dbcb485.js';
|
|
7
|
+
import { Toolbar } from './toolbar-155562be.js';
|
|
8
|
+
import { Icon } from './icon-2e7345ad.js';
|
|
9
|
+
import { a as Button } from '../Button-f19e18df.js';
|
|
10
|
+
import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
|
|
12
11
|
|
|
13
12
|
/**
|
|
14
13
|
* Associative map from message kind to color and icon.
|
|
@@ -97,7 +96,7 @@ const AlertDialog = forwardRef((props, ref) => {
|
|
|
97
96
|
onClick: cancelOnClick,
|
|
98
97
|
...forwardedCancelProps
|
|
99
98
|
} = cancelProps || {};
|
|
100
|
-
return /*#__PURE__*/
|
|
99
|
+
return /*#__PURE__*/React__default.createElement(Dialog, _extends({
|
|
101
100
|
ref: ref,
|
|
102
101
|
focusElement: cancelProps ? cancelButtonRef : confirmationButtonRef,
|
|
103
102
|
size: size,
|
|
@@ -111,52 +110,38 @@ const AlertDialog = forwardRef((props, ref) => {
|
|
|
111
110
|
className: classNames(className, handleBasicClasses({
|
|
112
111
|
kind,
|
|
113
112
|
prefix: CLASSNAME
|
|
114
|
-
}))
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
onClick: cancelOnClick,
|
|
143
|
-
children: cancelLabel
|
|
144
|
-
}), /*#__PURE__*/jsx(Button, {
|
|
145
|
-
...forwardedConfirmProps,
|
|
146
|
-
ref: confirmationButtonRef,
|
|
147
|
-
color: color,
|
|
148
|
-
className: "lumx-spacing-margin-left-regular",
|
|
149
|
-
onClick: confirmOnClick,
|
|
150
|
-
children: confirmLabel
|
|
151
|
-
})]
|
|
152
|
-
})
|
|
153
|
-
})
|
|
154
|
-
})]
|
|
155
|
-
});
|
|
113
|
+
}))
|
|
114
|
+
}, forwardedProps), /*#__PURE__*/React__default.createElement("header", null, /*#__PURE__*/React__default.createElement(Toolbar, {
|
|
115
|
+
className: "lumx-spacing-margin-horizontal",
|
|
116
|
+
before: /*#__PURE__*/React__default.createElement(Icon, {
|
|
117
|
+
icon: icon,
|
|
118
|
+
size: Size.s,
|
|
119
|
+
color: color
|
|
120
|
+
}),
|
|
121
|
+
label: /*#__PURE__*/React__default.createElement("h2", {
|
|
122
|
+
id: titleId,
|
|
123
|
+
className: "lumx-typography-title"
|
|
124
|
+
}, title)
|
|
125
|
+
})), children && /*#__PURE__*/React__default.createElement(DescriptionElement, {
|
|
126
|
+
id: descriptionId,
|
|
127
|
+
className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
|
|
128
|
+
}, children), /*#__PURE__*/React__default.createElement("footer", null, /*#__PURE__*/React__default.createElement(Toolbar, {
|
|
129
|
+
className: "lumx-spacing-margin-horizontal",
|
|
130
|
+
after: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, cancelProps && /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedCancelProps, {
|
|
131
|
+
ref: cancelButtonRef,
|
|
132
|
+
emphasis: Emphasis.medium,
|
|
133
|
+
onClick: cancelOnClick
|
|
134
|
+
}), cancelLabel), /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedConfirmProps, {
|
|
135
|
+
ref: confirmationButtonRef,
|
|
136
|
+
color: color,
|
|
137
|
+
className: "lumx-spacing-margin-left-regular",
|
|
138
|
+
onClick: confirmOnClick
|
|
139
|
+
}), confirmLabel))
|
|
140
|
+
})));
|
|
156
141
|
});
|
|
157
142
|
AlertDialog.displayName = COMPONENT_NAME;
|
|
158
143
|
AlertDialog.className = CLASSNAME;
|
|
159
144
|
AlertDialog.defaultProps = DEFAULT_PROPS;
|
|
160
145
|
|
|
161
146
|
export { AlertDialog };
|
|
162
|
-
//# sourceMappingURL=
|
|
147
|
+
//# sourceMappingURL=alert-dialog-8f1c163c.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog-8f1c163c.js","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n DialogProps,\n Dialog,\n Button,\n Emphasis,\n ColorPalette,\n Icon,\n Size,\n Kind,\n Toolbar,\n ButtonProps,\n} from '@lumx/react';\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {\n /** Message variant. */\n kind?: Kind;\n /** Dialog title. */\n title?: string;\n /** Props forwarded to the confirm button */\n confirmProps: ButtonProps & {\n onClick(): void;\n label: string;\n };\n /**\n * Props forwarded to the cancel button.\n * Will not render a cancel button if undefined.\n */\n cancelProps?: ButtonProps & {\n onClick(): void;\n label: string;\n };\n /**\n * Children\n */\n children?: React.ReactNode;\n}\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 * Component display name.\n */\nconst COMPONENT_NAME = 'AlertDialog';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DialogProps> = {\n size: Size.tiny,\n kind: Kind.info,\n};\n\n/**\n * AlertDialog component.\n *\n * An alert dialog is a modal dialog that interrupts the user's workflow to\n * communicate an important message and acquire a response.\n *\n * It should not have a complex content.\n * Children of this component should only be strings, paragraphs or links.\n */\nexport const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {\n const {\n id,\n title,\n className,\n cancelProps,\n confirmProps,\n kind = DEFAULT_PROPS.kind,\n size = DEFAULT_PROPS.size,\n dialogProps,\n children,\n ...forwardedProps\n } = props;\n\n const cancelButtonRef = React.useRef(null);\n const confirmationButtonRef = React.useRef(null);\n const { color, icon } = CONFIG[kind as Kind] || {};\n\n // Define a unique ID to target title and description for aria attributes.\n const generatedId = useId();\n const uniqueId = id || generatedId;\n const titleId = `${uniqueId}-title`;\n const descriptionId = `${uniqueId}-description`;\n\n // If content is a string, set in a paragraph.\n const DescriptionElement = typeof children === 'string' ? 'p' : 'div';\n\n const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;\n const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};\n\n return (\n <Dialog\n ref={ref}\n focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}\n size={size}\n dialogProps={{\n id: uniqueId,\n role: 'alertdialog',\n 'aria-labelledby': titleId,\n 'aria-describedby': descriptionId,\n ...dialogProps,\n }}\n className={classNames(\n className,\n handleBasicClasses({\n kind,\n prefix: CLASSNAME,\n }),\n )}\n {...forwardedProps}\n >\n <header>\n <Toolbar\n className=\"lumx-spacing-margin-horizontal\"\n before={<Icon icon={icon} size={Size.s} color={color} />}\n label={\n <h2 id={titleId} className=\"lumx-typography-title\">\n {title}\n </h2>\n }\n />\n </header>\n\n {children && (\n <DescriptionElement\n id={descriptionId}\n className=\"lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge\"\n >\n {children}\n </DescriptionElement>\n )}\n\n <footer>\n <Toolbar\n className=\"lumx-spacing-margin-horizontal\"\n after={\n <>\n {cancelProps && (\n <Button\n {...forwardedCancelProps}\n ref={cancelButtonRef}\n emphasis={Emphasis.medium}\n onClick={cancelOnClick}\n >\n {cancelLabel}\n </Button>\n )}\n <Button\n {...forwardedConfirmProps}\n ref={confirmationButtonRef}\n color={color}\n className=\"lumx-spacing-margin-left-regular\"\n onClick={confirmOnClick}\n >\n {confirmLabel}\n </Button>\n </>\n }\n />\n </footer>\n </Dialog>\n );\n});\n\nAlertDialog.displayName = COMPONENT_NAME;\nAlertDialog.className = CLASSNAME;\nAlertDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","tiny","kind","AlertDialog","forwardRef","props","ref","id","title","className","cancelProps","confirmProps","dialogProps","children","forwardedProps","cancelButtonRef","React","useRef","confirmationButtonRef","generatedId","useId","uniqueId","titleId","descriptionId","DescriptionElement","label","confirmLabel","onClick","confirmOnClick","forwardedConfirmProps","cancelLabel","cancelOnClick","forwardedCancelProps","createElement","Dialog","_extends","focusElement","role","classNames","handleBasicClasses","prefix","Toolbar","before","Icon","s","after","Fragment","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":";;;;;;;;;;;AA6CA;AACA;AACA;AACA,MAAMA,MAAM,GAAG;EACX,CAACC,IAAI,CAACC,KAAK,GAAG;IAAEC,KAAK,EAAEC,YAAY,CAACC,GAAG;AAAEC,IAAAA,IAAI,EAAEC,QAAAA;GAAU;EACzD,CAACN,IAAI,CAACO,IAAI,GAAG;IAAEL,KAAK,EAAEC,YAAY,CAACK,IAAI;AAAEH,IAAAA,IAAI,EAAEI,cAAAA;GAAgB;EAC/D,CAACT,IAAI,CAACU,OAAO,GAAG;IAAER,KAAK,EAAEC,YAAY,CAACQ,KAAK;AAAEN,IAAAA,IAAI,EAAEO,cAAAA;GAAgB;EACnE,CAACZ,IAAI,CAACa,OAAO,GAAG;IAAEX,KAAK,EAAEC,YAAY,CAACW,MAAM;AAAET,IAAAA,IAAI,EAAEU,cAAAA;AAAe,GAAA;AACvE,CAAC,CAAA;;AAED;AACA;AACA;AACA,MAAMC,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,IAAI;EACfC,IAAI,EAAEvB,IAAI,CAACO,IAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMiB,WAAW,GAAGC,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;IACFC,EAAE;IACFC,KAAK;IACLC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZT,IAAI,GAAGJ,aAAa,CAACI,IAAI;IACzBH,IAAI,GAAGD,aAAa,CAACC,IAAI;IACzBa,WAAW;IACXC,QAAQ;IACR,GAAGC,cAAAA;AACP,GAAC,GAAGT,KAAK,CAAA;AAET,EAAA,MAAMU,eAAe,GAAGC,cAAK,CAACC,MAAM,CAAC,IAAI,CAAC,CAAA;AAC1C,EAAA,MAAMC,qBAAqB,GAAGF,cAAK,CAACC,MAAM,CAAC,IAAI,CAAC,CAAA;EAChD,MAAM;IAAEpC,KAAK;AAAEG,IAAAA,IAAAA;AAAK,GAAC,GAAGN,MAAM,CAACwB,IAAI,CAAS,IAAI,EAAE,CAAA;;AAElD;AACA,EAAA,MAAMiB,WAAW,GAAGC,KAAK,EAAE,CAAA;AAC3B,EAAA,MAAMC,QAAQ,GAAGd,EAAE,IAAIY,WAAW,CAAA;AAClC,EAAA,MAAMG,OAAO,GAAG,CAAGD,EAAAA,QAAQ,CAAQ,MAAA,CAAA,CAAA;AACnC,EAAA,MAAME,aAAa,GAAG,CAAGF,EAAAA,QAAQ,CAAc,YAAA,CAAA,CAAA;;AAE/C;EACA,MAAMG,kBAAkB,GAAG,OAAOX,QAAQ,KAAK,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAA;EAErE,MAAM;AAAEY,IAAAA,KAAK,EAAEC,YAAY;AAAEC,IAAAA,OAAO,EAAEC,cAAc;IAAE,GAAGC,qBAAAA;AAAsB,GAAC,GAAGlB,YAAY,CAAA;EAC/F,MAAM;AAAEc,IAAAA,KAAK,EAAEK,WAAW;AAAEH,IAAAA,OAAO,EAAEI,aAAa;IAAE,GAAGC,oBAAAA;AAAqB,GAAC,GAAGtB,WAAW,IAAI,EAAE,CAAA;AAEjG,EAAA,oBACIM,cAAA,CAAAiB,aAAA,CAACC,MAAM,EAAAC,QAAA,CAAA;AACH7B,IAAAA,GAAG,EAAEA,GAAI;AACT8B,IAAAA,YAAY,EAAE1B,WAAW,GAAGK,eAAe,GAAGG,qBAAsB;AACpEnB,IAAAA,IAAI,EAAEA,IAAK;AACXa,IAAAA,WAAW,EAAE;AACTL,MAAAA,EAAE,EAAEc,QAAQ;AACZgB,MAAAA,IAAI,EAAE,aAAa;AACnB,MAAA,iBAAiB,EAAEf,OAAO;AAC1B,MAAA,kBAAkB,EAAEC,aAAa;MACjC,GAAGX,WAAAA;KACL;AACFH,IAAAA,SAAS,EAAE6B,UAAU,CACjB7B,SAAS,EACT8B,kBAAkB,CAAC;MACfrC,IAAI;AACJsC,MAAAA,MAAM,EAAE5C,SAAAA;AACZ,KAAC,CACL,CAAA;GACIkB,EAAAA,cAAc,CAElBE,eAAAA,cAAA,CAAAiB,aAAA,8BACIjB,cAAA,CAAAiB,aAAA,CAACQ,OAAO,EAAA;AACJhC,IAAAA,SAAS,EAAC,gCAAgC;AAC1CiC,IAAAA,MAAM,eAAE1B,cAAA,CAAAiB,aAAA,CAACU,IAAI,EAAA;AAAC3D,MAAAA,IAAI,EAAEA,IAAK;MAACe,IAAI,EAAEC,IAAI,CAAC4C,CAAE;AAAC/D,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAE;IACzD4C,KAAK,eACDT,cAAA,CAAAiB,aAAA,CAAA,IAAA,EAAA;AAAI1B,MAAAA,EAAE,EAAEe,OAAQ;AAACb,MAAAA,SAAS,EAAC,uBAAA;AAAuB,KAAA,EAC7CD,KACD,CAAA;GAEX,CACG,CAAC,EAERK,QAAQ,iBACLG,cAAA,CAAAiB,aAAA,CAACT,kBAAkB,EAAA;AACfjB,IAAAA,EAAE,EAAEgB,aAAc;AAClBd,IAAAA,SAAS,EAAC,8FAAA;GAETI,EAAAA,QACe,CACvB,eAEDG,cAAA,CAAAiB,aAAA,CAAA,QAAA,EAAA,IAAA,eACIjB,cAAA,CAAAiB,aAAA,CAACQ,OAAO,EAAA;AACJhC,IAAAA,SAAS,EAAC,gCAAgC;AAC1CoC,IAAAA,KAAK,eACD7B,cAAA,CAAAiB,aAAA,CAAAjB,cAAA,CAAA8B,QAAA,EAAA,IAAA,EACKpC,WAAW,iBACRM,cAAA,CAAAiB,aAAA,CAACc,MAAM,EAAAZ,QAAA,KACCH,oBAAoB,EAAA;AACxB1B,MAAAA,GAAG,EAAES,eAAgB;MACrBiC,QAAQ,EAAEC,QAAQ,CAACC,MAAO;AAC1BvB,MAAAA,OAAO,EAAEI,aAAAA;KAERD,CAAAA,EAAAA,WACG,CACX,eACDd,cAAA,CAAAiB,aAAA,CAACc,MAAM,EAAAZ,QAAA,CAAA,EAAA,EACCN,qBAAqB,EAAA;AACzBvB,MAAAA,GAAG,EAAEY,qBAAsB;AAC3BrC,MAAAA,KAAK,EAAEA,KAAM;AACb4B,MAAAA,SAAS,EAAC,kCAAkC;AAC5CkB,MAAAA,OAAO,EAAEC,cAAAA;AAAe,KAAA,CAAA,EAEvBF,YACG,CACV,CAAA;GAET,CACG,CACJ,CAAC,CAAA;AAEjB,CAAC,EAAC;AAEFvB,WAAW,CAACgD,WAAW,GAAGxD,cAAc,CAAA;AACxCQ,WAAW,CAACM,SAAS,GAAGb,SAAS,CAAA;AACjCO,WAAW,CAACiD,YAAY,GAAGtD,aAAa;;;;"}
|
|
@@ -1,15 +1,20 @@
|
|
|
1
|
+
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
1
2
|
import { useRef } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { u as useFocus } from '
|
|
4
|
-
import { m as mergeRefs } from '
|
|
5
|
-
import { u as useTheme } from '
|
|
6
|
-
import { u as useDisableStateProps } from '
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import { C as Chip } from '
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
3
|
+
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
4
|
+
import { u as useFocus } from '../index-f415b08e.js';
|
|
5
|
+
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
6
|
+
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
7
|
+
import { u as useDisableStateProps } from '../useDisableStateProps-fffc365f.js';
|
|
8
|
+
import { TextField } from './text-field-82733568.js';
|
|
9
|
+
import { Dropdown } from './dropdown-38b0b6a0.js';
|
|
10
|
+
import { mdiClose } from '@lumx/icons';
|
|
11
|
+
import { C as Chip } from '../Chip-4c572eec.js';
|
|
12
|
+
import { Icon } from './icon-2e7345ad.js';
|
|
13
|
+
import { Size } from '@lumx/core/js/constants';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Defines the props of the component.
|
|
17
|
+
*/
|
|
13
18
|
|
|
14
19
|
/**
|
|
15
20
|
* Component display name.
|
|
@@ -83,53 +88,54 @@ const Autocomplete = forwardRef((props, ref) => {
|
|
|
83
88
|
const inputAnchorRef = useRef(null);
|
|
84
89
|
const textFieldRef = useRef(null);
|
|
85
90
|
useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
|
|
86
|
-
return /*#__PURE__*/
|
|
87
|
-
ref: ref
|
|
88
|
-
|
|
89
|
-
className: classNames(className, CLASSNAME$1)
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
children: children
|
|
126
|
-
})]
|
|
127
|
-
});
|
|
91
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
92
|
+
ref: ref
|
|
93
|
+
}, forwardedProps, {
|
|
94
|
+
className: classNames(className, CLASSNAME$1)
|
|
95
|
+
}), /*#__PURE__*/React.createElement(TextField, _extends({}, textFieldProps, {
|
|
96
|
+
chips: chips,
|
|
97
|
+
error: error,
|
|
98
|
+
hasError: hasError,
|
|
99
|
+
helper: helper,
|
|
100
|
+
icon: icon,
|
|
101
|
+
inputRef: mergeRefs(inputAnchorRef, inputRef),
|
|
102
|
+
clearButtonProps: clearButtonProps
|
|
103
|
+
}, disabledStateProps, {
|
|
104
|
+
isRequired: isRequired,
|
|
105
|
+
isValid: isValid,
|
|
106
|
+
label: label,
|
|
107
|
+
name: name,
|
|
108
|
+
onBlur: onBlur,
|
|
109
|
+
onChange: onChange,
|
|
110
|
+
onFocus: onFocus,
|
|
111
|
+
placeholder: placeholder,
|
|
112
|
+
textFieldRef: textFieldRef,
|
|
113
|
+
theme: theme,
|
|
114
|
+
value: value
|
|
115
|
+
})), /*#__PURE__*/React.createElement(Dropdown, {
|
|
116
|
+
anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
|
|
117
|
+
closeOnClick: closeOnClick,
|
|
118
|
+
closeOnClickAway: closeOnClickAway,
|
|
119
|
+
closeOnEscape: closeOnEscape,
|
|
120
|
+
focusAnchorOnClose: focusAnchorOnClose,
|
|
121
|
+
fitToAnchorWidth: fitToAnchorWidth,
|
|
122
|
+
isOpen: isOpen,
|
|
123
|
+
offset: offset,
|
|
124
|
+
onClose: onClose,
|
|
125
|
+
onInfiniteScroll: onInfiniteScroll,
|
|
126
|
+
placement: placement,
|
|
127
|
+
shouldFocusOnOpen: false,
|
|
128
|
+
theme: theme
|
|
129
|
+
}, children));
|
|
128
130
|
});
|
|
129
131
|
Autocomplete.displayName = COMPONENT_NAME$1;
|
|
130
132
|
Autocomplete.className = CLASSNAME$1;
|
|
131
133
|
Autocomplete.defaultProps = DEFAULT_PROPS$1;
|
|
132
134
|
|
|
135
|
+
/**
|
|
136
|
+
* Defines the props of the component.
|
|
137
|
+
*/
|
|
138
|
+
|
|
133
139
|
/**
|
|
134
140
|
* Component display name.
|
|
135
141
|
*/
|
|
@@ -148,17 +154,17 @@ const DEFAULT_PROPS = {
|
|
|
148
154
|
closeOnEscape: true,
|
|
149
155
|
selectedChipRender(choice, index, onClear, isDisabled) {
|
|
150
156
|
const onClick = event => onClear && onClear(event, choice);
|
|
151
|
-
return /*#__PURE__*/
|
|
152
|
-
|
|
157
|
+
return /*#__PURE__*/React.createElement(Chip, {
|
|
158
|
+
key: index,
|
|
159
|
+
after: onClear && /*#__PURE__*/React.createElement(Icon, {
|
|
153
160
|
icon: mdiClose,
|
|
154
161
|
size: Size.xxs
|
|
155
162
|
}),
|
|
156
163
|
isDisabled: isDisabled,
|
|
157
164
|
size: Size.s,
|
|
158
165
|
onAfterClick: onClick,
|
|
159
|
-
onClick: onClick
|
|
160
|
-
|
|
161
|
-
}, index);
|
|
166
|
+
onClick: onClick
|
|
167
|
+
}, choice);
|
|
162
168
|
},
|
|
163
169
|
values: []
|
|
164
170
|
};
|
|
@@ -214,9 +220,9 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
|
|
|
214
220
|
values = DEFAULT_PROPS.values,
|
|
215
221
|
...forwardedProps
|
|
216
222
|
} = otherProps;
|
|
217
|
-
return /*#__PURE__*/
|
|
218
|
-
ref: ref
|
|
219
|
-
|
|
223
|
+
return /*#__PURE__*/React.createElement(Autocomplete, _extends({
|
|
224
|
+
ref: ref
|
|
225
|
+
}, forwardedProps, {
|
|
220
226
|
anchorToInput: anchorToInput,
|
|
221
227
|
className: classNames(className, CLASSNAME),
|
|
222
228
|
name: name,
|
|
@@ -230,8 +236,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
|
|
|
230
236
|
helper: helper,
|
|
231
237
|
icon: icon,
|
|
232
238
|
inputRef: inputRef,
|
|
233
|
-
chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear))
|
|
234
|
-
|
|
239
|
+
chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear))
|
|
240
|
+
}, disabledStateProps, {
|
|
235
241
|
isRequired: isRequired,
|
|
236
242
|
clearButtonProps: clearButtonProps,
|
|
237
243
|
isValid: isValid,
|
|
@@ -247,13 +253,12 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
|
|
|
247
253
|
offset: offset,
|
|
248
254
|
placement: placement,
|
|
249
255
|
fitToAnchorWidth: fitToAnchorWidth,
|
|
250
|
-
onInfiniteScroll: onInfiniteScroll
|
|
251
|
-
|
|
252
|
-
});
|
|
256
|
+
onInfiniteScroll: onInfiniteScroll
|
|
257
|
+
}), children);
|
|
253
258
|
});
|
|
254
259
|
AutocompleteMultiple.displayName = COMPONENT_NAME;
|
|
255
260
|
AutocompleteMultiple.className = CLASSNAME;
|
|
256
261
|
AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
|
|
257
262
|
|
|
258
263
|
export { Autocomplete, AutocompleteMultiple };
|
|
259
|
-
//# sourceMappingURL=
|
|
264
|
+
//# sourceMappingURL=autocomplete-bfbdeb3c.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-bfbdeb3c.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","React","createElement","_extends","classNames","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","key","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
+
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
|
+
import { T as Thumbnail } from '../Thumbnail-30d2a781.js';
|
|
5
|
+
import { Size, Theme, AspectRatio } from '@lumx/core/js/constants';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Avatar sizes.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Defines the props of the component.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Component display name.
|
|
17
|
+
*/
|
|
18
|
+
const COMPONENT_NAME = 'Avatar';
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Component default class name and class prefix.
|
|
22
|
+
*/
|
|
23
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Component default props.
|
|
27
|
+
*/
|
|
28
|
+
const DEFAULT_PROPS = {
|
|
29
|
+
size: Size.m
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Avatar component.
|
|
34
|
+
*
|
|
35
|
+
* @param props Component props.
|
|
36
|
+
* @param ref Component ref.
|
|
37
|
+
* @return React element.
|
|
38
|
+
*/
|
|
39
|
+
const Avatar = forwardRef((props, ref) => {
|
|
40
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
41
|
+
const {
|
|
42
|
+
actions,
|
|
43
|
+
alt,
|
|
44
|
+
badge,
|
|
45
|
+
className,
|
|
46
|
+
image,
|
|
47
|
+
linkProps,
|
|
48
|
+
linkAs,
|
|
49
|
+
onClick,
|
|
50
|
+
onKeyPress,
|
|
51
|
+
size = DEFAULT_PROPS.size,
|
|
52
|
+
theme = defaultTheme,
|
|
53
|
+
thumbnailProps,
|
|
54
|
+
...forwardedProps
|
|
55
|
+
} = props;
|
|
56
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
57
|
+
ref: ref
|
|
58
|
+
}, forwardedProps, {
|
|
59
|
+
className: classNames(className, handleBasicClasses({
|
|
60
|
+
prefix: CLASSNAME,
|
|
61
|
+
size,
|
|
62
|
+
theme
|
|
63
|
+
}))
|
|
64
|
+
}), /*#__PURE__*/React.createElement(Thumbnail, _extends({
|
|
65
|
+
linkProps: linkProps,
|
|
66
|
+
linkAs: linkAs,
|
|
67
|
+
className: `${CLASSNAME}__thumbnail`,
|
|
68
|
+
onClick: onClick,
|
|
69
|
+
onKeyPress: onKeyPress
|
|
70
|
+
}, thumbnailProps, {
|
|
71
|
+
aspectRatio: AspectRatio.square,
|
|
72
|
+
size: size,
|
|
73
|
+
image: image,
|
|
74
|
+
alt: alt,
|
|
75
|
+
theme: theme
|
|
76
|
+
})), actions && /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
className: `${CLASSNAME}__actions`
|
|
78
|
+
}, actions), badge && /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: `${CLASSNAME}__badge`
|
|
80
|
+
}, badge));
|
|
81
|
+
});
|
|
82
|
+
Avatar.displayName = COMPONENT_NAME;
|
|
83
|
+
Avatar.className = CLASSNAME;
|
|
84
|
+
Avatar.defaultProps = DEFAULT_PROPS;
|
|
85
|
+
|
|
86
|
+
export { Avatar };
|
|
87
|
+
//# sourceMappingURL=avatar-6990e3e9.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-6990e3e9.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\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 * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps, HasTheme {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Image alternative text. */\n alt: string;\n /** Badge. */\n badge?: ReactElement;\n /** Image URL. */\n image: string;\n /** Props to pass to the link wrapping the 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 /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Size variant. */\n size?: AvatarSize;\n /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n thumbnailProps?: Omit<\n ThumbnailProps,\n 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n size: Size.m,\n};\n\n/**\n * Avatar component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actions,\n alt,\n badge,\n className,\n image,\n linkProps,\n linkAs,\n onClick,\n onKeyPress,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n thumbnailProps,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n >\n <Thumbnail\n linkProps={linkProps}\n linkAs={linkAs}\n className={`${CLASSNAME}__thumbnail`}\n onClick={onClick}\n onKeyPress={onKeyPress}\n {...thumbnailProps}\n aspectRatio={AspectRatio.square}\n size={size}\n image={image}\n alt={alt}\n theme={theme}\n />\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Avatar","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","badge","className","image","linkProps","linkAs","onClick","onKeyPress","theme","thumbnailProps","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","Thumbnail","aspectRatio","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAWA;AACA;AACA;;AAGA;AACA;AACA;;AA2BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVnB,IAAI,GAAGD,aAAa,CAACC,IAAI;AACzBoB,IAAAA,KAAK,GAAGb,YAAY;IACpBc,cAAc;IACd,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACInB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLgB,cAAc,EAAA;AAClBR,IAAAA,SAAS,EAAEY,UAAU,CAACZ,SAAS,EAAEa,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE/B,SAAS;MAAEG,IAAI;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAA,CAAA,eAEzFG,KAAA,CAAAC,aAAA,CAACK,SAAS,EAAAJ,QAAA,CAAA;AACNT,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,MAAM,EAAEA,MAAO;IACfH,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;AACrCqB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,UAAU,EAAEA,UAAAA;AAAW,GAAA,EACnBE,cAAc,EAAA;IAClBS,WAAW,EAAEC,WAAW,CAACC,MAAO;AAChChC,IAAAA,IAAI,EAAEA,IAAK;AACXe,IAAAA,KAAK,EAAEA,KAAM;AACbH,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,CAChB,CAAC,EACDT,OAAO,iBAAIY,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EAAEc,OAAa,CAAC,EACnEE,KAAK,iBAAIU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,OAAA,CAAA;GAAYgB,EAAAA,KAAW,CAC5D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFV,MAAM,CAAC8B,WAAW,GAAGrC,cAAc,CAAA;AACnCO,MAAM,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC5BM,MAAM,CAAC+B,YAAY,GAAGnC,aAAa;;;;"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
+
import { ColorPalette } from '@lumx/core/js/constants';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Defines the props of the component.
|
|
7
|
+
*/
|
|
4
8
|
|
|
5
9
|
/**
|
|
6
10
|
* Component display name.
|
|
@@ -33,15 +37,14 @@ const Badge = forwardRef((props, ref) => {
|
|
|
33
37
|
color = DEFAULT_PROPS.color,
|
|
34
38
|
...forwardedProps
|
|
35
39
|
} = props;
|
|
36
|
-
return /*#__PURE__*/
|
|
37
|
-
ref: ref
|
|
38
|
-
|
|
40
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
41
|
+
ref: ref
|
|
42
|
+
}, forwardedProps, {
|
|
39
43
|
className: classNames(className, handleBasicClasses({
|
|
40
44
|
prefix: CLASSNAME$1,
|
|
41
45
|
color
|
|
42
|
-
}))
|
|
43
|
-
|
|
44
|
-
});
|
|
46
|
+
}))
|
|
47
|
+
}), children);
|
|
45
48
|
});
|
|
46
49
|
Badge.displayName = COMPONENT_NAME$1;
|
|
47
50
|
Badge.className = CLASSNAME$1;
|
|
@@ -63,18 +66,16 @@ const BadgeWrapper = forwardRef((props, ref) => {
|
|
|
63
66
|
className,
|
|
64
67
|
...forwardedProps
|
|
65
68
|
} = props;
|
|
66
|
-
return /*#__PURE__*/
|
|
67
|
-
ref: ref
|
|
68
|
-
|
|
69
|
-
className: classNames(className, CLASSNAME)
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
})]
|
|
74
|
-
});
|
|
69
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
70
|
+
ref: ref
|
|
71
|
+
}, forwardedProps, {
|
|
72
|
+
className: classNames(className, CLASSNAME)
|
|
73
|
+
}), children, badge && /*#__PURE__*/React.createElement("div", {
|
|
74
|
+
className: `${CLASSNAME}__badge`
|
|
75
|
+
}, badge));
|
|
75
76
|
});
|
|
76
77
|
BadgeWrapper.displayName = 'BadgeWrapper';
|
|
77
78
|
BadgeWrapper.className = CLASSNAME;
|
|
78
79
|
|
|
79
80
|
export { Badge, BadgeWrapper };
|
|
80
|
-
//# sourceMappingURL=
|
|
81
|
+
//# sourceMappingURL=badge-81543bc7.js.map
|