@lumx/react 3.20.1-alpha.15 → 3.20.1-alpha.16
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 → Button-1f227024.js} +30 -28
- package/_internal/{Button-f19e18df.js.map → Button-1f227024.js.map} +1 -1
- package/_internal/{ButtonRoot-ab633b1d.js → ButtonRoot-823f3e9c.js} +18 -16
- package/_internal/{ButtonRoot-ab633b1d.js.map → ButtonRoot-823f3e9c.js.map} +1 -1
- package/_internal/{Chip-4c572eec.js → Chip-a34f6905.js} +31 -34
- package/_internal/{Chip-4c572eec.js.map → Chip-a34f6905.js.map} +1 -1
- package/_internal/{ClickAwayProvider-bcce6ceb.js → ClickAwayProvider-7093ba23.js} +6 -4
- package/_internal/{ClickAwayProvider-bcce6ceb.js.map → ClickAwayProvider-7093ba23.js.map} +1 -1
- package/_internal/{DisabledStateContext-077b7bef.js → DisabledStateContext-ea04260d.js} +6 -6
- package/_internal/{DisabledStateContext-077b7bef.js.map → DisabledStateContext-ea04260d.js.map} +1 -1
- package/_internal/{HeadingLevelProvider-e4817816.js → HeadingLevelProvider-ebdcb0c7.js} +6 -4
- package/_internal/{HeadingLevelProvider-e4817816.js.map → HeadingLevelProvider-ebdcb0c7.js.map} +1 -1
- package/_internal/{IconButton-10585058.js → IconButton-f4df224c.js} +29 -24
- package/_internal/{IconButton-10585058.js.map → IconButton-f4df224c.js.map} +1 -1
- package/_internal/ImageCaption-8134a3aa.js +75 -0
- package/_internal/{ImageCaption-4279b2b6.js.map → ImageCaption-8134a3aa.js.map} +1 -1
- package/_internal/{List-d5f5d465.js → List-54237e0e.js} +52 -50
- package/_internal/{List-d5f5d465.js.map → List-54237e0e.js.map} +1 -1
- package/_internal/{PopoverDialog-21e5c9dd.js → PopoverDialog-e0967e5f.js} +166 -158
- package/_internal/{PopoverDialog-21e5c9dd.js.map → PopoverDialog-e0967e5f.js.map} +1 -1
- package/_internal/{Portal-c43d098b.js → Portal-3f86608e.js} +5 -2
- package/_internal/{Portal-c43d098b.js.map → Portal-3f86608e.js.map} +1 -1
- package/_internal/{RawClickable-c76bbc4c.js → RawClickable-2c2b6a89.js} +9 -7
- package/_internal/{RawClickable-c76bbc4c.js.map → RawClickable-2c2b6a89.js.map} +1 -1
- package/_internal/{Slides-01f513ce.js → Slides-b7a67f32.js} +99 -96
- package/_internal/{Slides-01f513ce.js.map → Slides-b7a67f32.js.map} +1 -1
- package/_internal/{Thumbnail-30d2a781.js → Thumbnail-b5dea0af.js} +46 -45
- package/_internal/{Thumbnail-30d2a781.js.map → Thumbnail-b5dea0af.js.map} +1 -1
- package/_internal/components/{alert-dialog-8f1c163c.js → alert-dialog-b284b191.js} +50 -35
- package/_internal/components/{alert-dialog-8f1c163c.js.map → alert-dialog-b284b191.js.map} +1 -1
- package/_internal/components/{autocomplete-bfbdeb3c.js → autocomplete-8d3f37ea.js} +64 -67
- package/_internal/components/{autocomplete-bfbdeb3c.js.map → autocomplete-8d3f37ea.js.map} +1 -1
- package/_internal/components/{avatar-6990e3e9.js → avatar-5fc70e00.js} +28 -32
- package/_internal/components/{avatar-6990e3e9.js.map → avatar-5fc70e00.js.map} +1 -1
- package/_internal/components/{badge-81543bc7.js → badge-8390e590.js} +18 -18
- package/_internal/components/{badge-81543bc7.js.map → badge-8390e590.js.map} +1 -1
- package/_internal/components/{button-927abe71.js → button-e3c7f2eb.js} +11 -13
- package/_internal/components/{button-927abe71.js.map → button-e3c7f2eb.js.map} +1 -1
- package/_internal/components/{checkbox-dc4caec8.js → checkbox-d1ca9748.js} +53 -44
- package/_internal/components/{checkbox-dc4caec8.js.map → checkbox-d1ca9748.js.map} +1 -1
- package/_internal/components/{chip-fb3d0c76.js → chip-e40c5521.js} +10 -12
- package/_internal/components/{chip-fb3d0c76.js.map → chip-e40c5521.js.map} +1 -1
- package/_internal/components/comment-block-a3cf7b9b.js +138 -0
- package/_internal/components/{comment-block-b84c4694.js.map → comment-block-a3cf7b9b.js.map} +1 -1
- package/_internal/components/date-picker-6c1b14e4.js +2 -0
- package/_internal/components/date-picker-6c1b14e4.js.map +1 -0
- package/_internal/components/{dialog-7dbcb485.js → dialog-ebdb9500.js} +70 -58
- package/_internal/components/{dialog-7dbcb485.js.map → dialog-ebdb9500.js.map} +1 -1
- package/_internal/components/{divider-12e9b6a0.js → divider-116af6b9.js} +7 -10
- package/_internal/components/{divider-12e9b6a0.js.map → divider-116af6b9.js.map} +1 -1
- package/_internal/components/{drag-handle-a38ff757.js → drag-handle-5215cd21.js} +14 -16
- package/_internal/components/{drag-handle-a38ff757.js.map → drag-handle-5215cd21.js.map} +1 -1
- package/_internal/components/{dropdown-38b0b6a0.js → dropdown-0baed51b.js} +15 -16
- package/_internal/components/{dropdown-38b0b6a0.js.map → dropdown-0baed51b.js.map} +1 -1
- package/_internal/components/{expansion-panel-c4b93653.js → expansion-panel-5533a680.js} +48 -39
- package/_internal/components/{expansion-panel-c4b93653.js.map → expansion-panel-5533a680.js.map} +1 -1
- package/_internal/components/{flag-c5e2f5f0.js → flag-8d4a7e72.js} +20 -16
- package/_internal/components/{flag-c5e2f5f0.js.map → flag-8d4a7e72.js.map} +1 -1
- package/_internal/components/{flex-box-c8701a85.js → flex-box-55144e5f.js} +9 -11
- package/_internal/components/{flex-box-c8701a85.js.map → flex-box-55144e5f.js.map} +1 -1
- package/_internal/components/{generic-block-0d6ad5a6.js → generic-block-ff0509ee.js} +35 -26
- package/_internal/components/{generic-block-0d6ad5a6.js.map → generic-block-ff0509ee.js.map} +1 -1
- package/_internal/components/{grid-3b194fe8.js → grid-6f1b5a41.js} +15 -20
- package/_internal/components/{grid-3b194fe8.js.map → grid-6f1b5a41.js.map} +1 -1
- package/_internal/components/{grid-column-985b9327.js → grid-column-f01df853.js} +8 -9
- package/_internal/components/{grid-column-985b9327.js.map → grid-column-f01df853.js.map} +1 -1
- package/_internal/components/{heading-5e954dfc.js → heading-89239843.js} +11 -12
- package/_internal/components/{heading-5e954dfc.js.map → heading-89239843.js.map} +1 -1
- package/_internal/components/{icon-2e7345ad.js → icon-b708cca4.js} +24 -25
- package/_internal/components/{icon-2e7345ad.js.map → icon-b708cca4.js.map} +1 -1
- package/_internal/components/{image-block-8d21dd7e.js → image-block-7938422d.js} +35 -34
- package/_internal/components/{image-block-8d21dd7e.js.map → image-block-7938422d.js.map} +1 -1
- package/_internal/components/{image-lightbox-4a5ab962.js → image-lightbox-58331704.js} +113 -100
- package/_internal/components/{image-lightbox-4a5ab962.js.map → image-lightbox-58331704.js.map} +1 -1
- package/_internal/components/{inline-list-4884f004.js → inline-list-e6f19a98.js} +24 -24
- package/_internal/components/{inline-list-4884f004.js.map → inline-list-e6f19a98.js.map} +1 -1
- package/_internal/components/{input-helper-e644e05e.js → input-helper-64153099.js} +9 -11
- package/_internal/components/{input-helper-e644e05e.js.map → input-helper-64153099.js.map} +1 -1
- package/_internal/components/{input-label-5e509a1b.js → input-label-2feb0bb0.js} +9 -11
- package/_internal/components/{input-label-5e509a1b.js.map → input-label-2feb0bb0.js.map} +1 -1
- package/_internal/components/{lightbox-bec1b95f.js → lightbox-570ad9e5.js} +55 -49
- package/_internal/components/{lightbox-bec1b95f.js.map → lightbox-570ad9e5.js.map} +1 -1
- package/_internal/components/{link-9637b9e4.js → link-91f76477.js} +25 -23
- package/_internal/components/{link-9637b9e4.js.map → link-91f76477.js.map} +1 -1
- package/_internal/components/link-preview-fdd8d738.js +117 -0
- package/_internal/components/{link-preview-7a4a6e4b.js.map → link-preview-fdd8d738.js.map} +1 -1
- package/_internal/components/{list-5c8f7122.js → list-b08d8423.js} +14 -20
- package/_internal/components/{list-5c8f7122.js.map → list-b08d8423.js.map} +1 -1
- package/_internal/components/{message-a67067d9.js → message-29cb9181.js} +24 -24
- package/_internal/components/{message-a67067d9.js.map → message-29cb9181.js.map} +1 -1
- package/_internal/components/{mosaic-92b66c80.js → mosaic-cdb9f563.js} +36 -33
- package/_internal/components/{mosaic-92b66c80.js.map → mosaic-cdb9f563.js.map} +1 -1
- package/_internal/components/navigation-8b7d9bd8.js +225 -0
- package/_internal/components/{navigation-4fd3917d.js.map → navigation-8b7d9bd8.js.map} +1 -1
- package/_internal/components/{notification-9063c963.js → notification-a45fda96.js} +45 -40
- package/_internal/components/{notification-9063c963.js.map → notification-a45fda96.js.map} +1 -1
- package/_internal/components/popover-65bfbc57.js +3 -0
- package/_internal/components/popover-65bfbc57.js.map +1 -0
- package/_internal/components/post-block-52e58dd5.js +109 -0
- package/_internal/components/{post-block-0cfc2206.js.map → post-block-52e58dd5.js.map} +1 -1
- package/_internal/components/{progress-eaf5b33d.js → progress-f39c3fa2.js} +44 -50
- package/_internal/components/{progress-eaf5b33d.js.map → progress-f39c3fa2.js.map} +1 -1
- package/_internal/components/{progress-tracker-4a65718d.js → progress-tracker-512d7a08.js} +59 -63
- package/_internal/components/{progress-tracker-4a65718d.js.map → progress-tracker-512d7a08.js.map} +1 -1
- package/_internal/components/{radio-button-3ef8a325.js → radio-button-559a4863.js} +54 -53
- package/_internal/components/{radio-button-3ef8a325.js.map → radio-button-559a4863.js.map} +1 -1
- package/_internal/components/select-48d4fa8c.js +454 -0
- package/_internal/components/{select-d46cfe35.js.map → select-48d4fa8c.js.map} +1 -1
- package/_internal/components/{side-navigation-75b22f19.js → side-navigation-f9bc5b4e.js} +62 -56
- package/_internal/components/{side-navigation-75b22f19.js.map → side-navigation-f9bc5b4e.js.map} +1 -1
- package/_internal/components/{skeleton-361ce335.js → skeleton-c66516ee.js} +23 -31
- package/_internal/components/{skeleton-361ce335.js.map → skeleton-c66516ee.js.map} +1 -1
- package/_internal/components/{slider-8094cb5c.js → slider-efbfbc45.js} +62 -56
- package/_internal/components/{slider-8094cb5c.js.map → slider-efbfbc45.js.map} +1 -1
- package/_internal/components/{slideshow-2e8cd372.js → slideshow-dd312470.js} +39 -38
- package/_internal/components/{slideshow-2e8cd372.js.map → slideshow-dd312470.js.map} +1 -1
- package/_internal/components/{switch-5516949b.js → switch-769a2a04.js} +49 -45
- package/_internal/components/{switch-5516949b.js.map → switch-769a2a04.js.map} +1 -1
- package/_internal/components/{table-fa198ee6.js → table-8617b1ba.js} +68 -73
- package/_internal/components/{table-fa198ee6.js.map → table-8617b1ba.js.map} +1 -1
- package/_internal/components/{tabs-bb9bc2a5.js → tabs-884c57b6.js} +41 -41
- package/_internal/components/{tabs-bb9bc2a5.js.map → tabs-884c57b6.js.map} +1 -1
- package/_internal/components/text-c7b1e079.js +2 -0
- package/_internal/components/text-c7b1e079.js.map +1 -0
- package/_internal/components/{text-field-82733568.js → text-field-478acd86.js} +116 -103
- package/_internal/components/{text-field-82733568.js.map → text-field-478acd86.js.map} +1 -1
- package/_internal/components/{thumbnail-e3acff82.js → thumbnail-310a4c4b.js} +2 -2
- package/_internal/components/{thumbnail-e3acff82.js.map → thumbnail-310a4c4b.js.map} +1 -1
- package/_internal/components/{toolbar-155562be.js → toolbar-a43533a2.js} +18 -17
- package/_internal/components/{toolbar-155562be.js.map → toolbar-a43533a2.js.map} +1 -1
- package/_internal/components/{tooltip-84ffb4f9.js → tooltip-2885ab2e.js} +44 -35
- package/_internal/components/{tooltip-84ffb4f9.js.map → tooltip-2885ab2e.js.map} +1 -1
- package/_internal/components/{uploader-896a1d89.js → uploader-1e7f5bbb.js} +35 -32
- package/_internal/components/{uploader-896a1d89.js.map → uploader-1e7f5bbb.js.map} +1 -1
- package/_internal/components/{user-block-8fd15895.js → user-block-68a51ed0.js} +43 -41
- package/_internal/components/{user-block-8fd15895.js.map → user-block-68a51ed0.js.map} +1 -1
- package/_internal/{context-21aeb1c7.js → context-9d1336a1.js} +6 -6
- package/_internal/{context-21aeb1c7.js.map → context-9d1336a1.js.map} +1 -1
- package/_internal/{forwardRef-49d2bb84.js → forwardRef-15f62847.js} +2 -12
- package/_internal/{forwardRef-49d2bb84.js.map → forwardRef-15f62847.js.map} +1 -1
- package/_internal/{index-f415b08e.js → index-9df37c0d.js} +45 -39
- package/_internal/{index-f415b08e.js.map → index-9df37c0d.js.map} +1 -1
- package/_internal/{index-b4d256e7.js → index-a9c5cd69.js} +10 -11
- package/_internal/{index-b4d256e7.js.map → index-a9c5cd69.js.map} +1 -1
- package/_internal/{useDisableStateProps-fffc365f.js → useDisableStateProps-69e16b7c.js} +2 -2
- package/_internal/{useDisableStateProps-fffc365f.js.map → useDisableStateProps-69e16b7c.js.map} +1 -1
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js → wrapChildrenIconWithSpaces-c1faaae4.js} +2 -2
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js.map → wrapChildrenIconWithSpaces-c1faaae4.js.map} +1 -1
- package/index.js +61 -61
- package/package.json +3 -3
- package/utils/index.js +3 -3
- package/_internal/ImageCaption-4279b2b6.js +0 -65
- package/_internal/components/comment-block-b84c4694.js +0 -121
- package/_internal/components/date-picker-a425534c.js +0 -2
- package/_internal/components/date-picker-a425534c.js.map +0 -1
- package/_internal/components/link-preview-7a4a6e4b.js +0 -108
- package/_internal/components/navigation-4fd3917d.js +0 -210
- package/_internal/components/popover-3c4c54bd.js +0 -3
- package/_internal/components/popover-3c4c54bd.js.map +0 -1
- package/_internal/components/post-block-0cfc2206.js +0 -99
- package/_internal/components/select-d46cfe35.js +0 -404
- package/_internal/components/text-289c0526.js +0 -2
- package/_internal/components/text-289c0526.js.map +0 -1
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
import { c as classNames, f as forwardRef } from '../forwardRef-15f62847.js';
|
|
2
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
+
import { u as useTheme, T as ThemeProvider } from '../ThemeContext-3181f000.js';
|
|
4
|
+
import { createContext, useState, useRef, useContext } from 'react';
|
|
5
|
+
import { mdiChevronUp, mdiChevronDown } from '@lumx/icons';
|
|
6
|
+
import { u as useId } from '../useId-3a1facc0.js';
|
|
7
|
+
import { f as forwardRefPolymorphic, R as RawClickable } from '../RawClickable-2c2b6a89.js';
|
|
8
|
+
import { u as useOverflowTooltipLabel, T as Text } from '../index-a9c5cd69.js';
|
|
9
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
10
|
+
import { Tooltip } from './tooltip-2885ab2e.js';
|
|
11
|
+
import { P as Placement } from '../constants-b9e57936.js';
|
|
12
|
+
import { Icon } from './icon-b708cca4.js';
|
|
13
|
+
import { Size, Orientation, Theme } from '@lumx/core/js/constants';
|
|
14
|
+
import { P as Popover } from '../index-9df37c0d.js';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Component display name.
|
|
18
|
+
*/
|
|
19
|
+
const COMPONENT_NAME$2 = 'NavigationItem';
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Component default class name and class prefix.
|
|
23
|
+
*/
|
|
24
|
+
const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
|
|
25
|
+
const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
|
|
26
|
+
const {
|
|
27
|
+
className,
|
|
28
|
+
icon,
|
|
29
|
+
label,
|
|
30
|
+
isCurrentPage,
|
|
31
|
+
as: Element = 'a',
|
|
32
|
+
...forwardedProps
|
|
33
|
+
} = props;
|
|
34
|
+
const theme = useTheme();
|
|
35
|
+
const {
|
|
36
|
+
tooltipLabel,
|
|
37
|
+
labelRef
|
|
38
|
+
} = useOverflowTooltipLabel(label);
|
|
39
|
+
return /*#__PURE__*/jsx("li", {
|
|
40
|
+
className: classNames(className, handleBasicClasses({
|
|
41
|
+
prefix: CLASSNAME$2,
|
|
42
|
+
theme
|
|
43
|
+
})),
|
|
44
|
+
children: /*#__PURE__*/jsx(Tooltip, {
|
|
45
|
+
label: tooltipLabel,
|
|
46
|
+
placement: Placement.TOP,
|
|
47
|
+
children: /*#__PURE__*/jsxs(RawClickable, {
|
|
48
|
+
as: Element,
|
|
49
|
+
className: handleBasicClasses({
|
|
50
|
+
prefix: `${CLASSNAME$2}__link`,
|
|
51
|
+
isSelected: isCurrentPage
|
|
52
|
+
}),
|
|
53
|
+
ref: ref,
|
|
54
|
+
"aria-current": isCurrentPage ? 'page' : undefined,
|
|
55
|
+
...forwardedProps,
|
|
56
|
+
children: [icon ? /*#__PURE__*/jsx(Icon, {
|
|
57
|
+
className: `${CLASSNAME$2}__icon`,
|
|
58
|
+
icon: icon,
|
|
59
|
+
size: Size.xs,
|
|
60
|
+
theme: theme
|
|
61
|
+
}) : null, /*#__PURE__*/jsx(Text, {
|
|
62
|
+
as: "span",
|
|
63
|
+
truncate: true,
|
|
64
|
+
className: `${CLASSNAME$2}__label`,
|
|
65
|
+
ref: labelRef,
|
|
66
|
+
children: label
|
|
67
|
+
})]
|
|
68
|
+
})
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
}), {
|
|
72
|
+
displayName: COMPONENT_NAME$2,
|
|
73
|
+
className: CLASSNAME$2
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
const NavigationContext = /*#__PURE__*/createContext({
|
|
77
|
+
orientation: Orientation.vertical
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Component display name.
|
|
82
|
+
*/
|
|
83
|
+
const COMPONENT_NAME$1 = 'NavigationSection';
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Component default class name and class prefix.
|
|
87
|
+
*/
|
|
88
|
+
const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
|
|
89
|
+
const NavigationSection = forwardRef((props, ref) => {
|
|
90
|
+
const {
|
|
91
|
+
children,
|
|
92
|
+
className,
|
|
93
|
+
label,
|
|
94
|
+
icon,
|
|
95
|
+
...forwardedProps
|
|
96
|
+
} = props;
|
|
97
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
98
|
+
const buttonRef = useRef(null);
|
|
99
|
+
const sectionId = useId();
|
|
100
|
+
const {
|
|
101
|
+
orientation
|
|
102
|
+
} = useContext(NavigationContext) || {};
|
|
103
|
+
const theme = useTheme();
|
|
104
|
+
const isDropdown = orientation === Orientation.horizontal;
|
|
105
|
+
return /*#__PURE__*/jsxs("li", {
|
|
106
|
+
className: classNames(className, CLASSNAME$1, CLASSNAME$2, handleBasicClasses({
|
|
107
|
+
prefix: CLASSNAME$2,
|
|
108
|
+
theme
|
|
109
|
+
})),
|
|
110
|
+
ref: ref,
|
|
111
|
+
children: [/*#__PURE__*/jsxs(RawClickable, {
|
|
112
|
+
as: "button",
|
|
113
|
+
...forwardedProps,
|
|
114
|
+
"aria-controls": sectionId,
|
|
115
|
+
"aria-expanded": isOpen,
|
|
116
|
+
className: classNames(`${CLASSNAME$2}__link`),
|
|
117
|
+
ref: buttonRef,
|
|
118
|
+
onClick: event => {
|
|
119
|
+
setIsOpen(!isOpen);
|
|
120
|
+
event.stopPropagation();
|
|
121
|
+
},
|
|
122
|
+
children: [icon ? /*#__PURE__*/jsx(Icon, {
|
|
123
|
+
className: `${CLASSNAME$2}__icon`,
|
|
124
|
+
icon: icon,
|
|
125
|
+
size: Size.xs
|
|
126
|
+
}) : null, /*#__PURE__*/jsx(Text, {
|
|
127
|
+
as: "span",
|
|
128
|
+
truncate: true,
|
|
129
|
+
className: `${CLASSNAME$2}__label`,
|
|
130
|
+
ref: ref,
|
|
131
|
+
children: label
|
|
132
|
+
}), /*#__PURE__*/jsx(Icon, {
|
|
133
|
+
className: classNames(`${CLASSNAME$2}__icon`, `${CLASSNAME$1}__chevron`),
|
|
134
|
+
icon: isOpen ? mdiChevronUp : mdiChevronDown
|
|
135
|
+
})]
|
|
136
|
+
}), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
|
|
137
|
+
anchorRef: buttonRef,
|
|
138
|
+
isOpen: isOpen,
|
|
139
|
+
placement: Placement.BOTTOM_START,
|
|
140
|
+
usePortal: false,
|
|
141
|
+
closeOnClickAway: true,
|
|
142
|
+
closeOnEscape: true,
|
|
143
|
+
onClick: () => setIsOpen(false),
|
|
144
|
+
onClose: () => setIsOpen(false),
|
|
145
|
+
zIndex: 996,
|
|
146
|
+
children: /*#__PURE__*/jsx(ThemeProvider, {
|
|
147
|
+
value: Theme.light,
|
|
148
|
+
children: /*#__PURE__*/jsx("ul", {
|
|
149
|
+
className: `${CLASSNAME$1}__drawer--popover`,
|
|
150
|
+
id: sectionId,
|
|
151
|
+
children: /*#__PURE__*/jsx(NavigationContext.Provider, {
|
|
152
|
+
value: {
|
|
153
|
+
orientation: Orientation.vertical
|
|
154
|
+
},
|
|
155
|
+
children: children
|
|
156
|
+
})
|
|
157
|
+
})
|
|
158
|
+
})
|
|
159
|
+
}) : /*#__PURE__*/jsx("ul", {
|
|
160
|
+
className: `${CLASSNAME$1}__drawer`,
|
|
161
|
+
id: sectionId,
|
|
162
|
+
children: children
|
|
163
|
+
}))]
|
|
164
|
+
});
|
|
165
|
+
});
|
|
166
|
+
NavigationSection.displayName = COMPONENT_NAME$1;
|
|
167
|
+
NavigationSection.className = CLASSNAME$1;
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* Component display name.
|
|
171
|
+
*/
|
|
172
|
+
const COMPONENT_NAME = 'Navigation';
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Component default class name and class prefix.
|
|
176
|
+
*/
|
|
177
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
178
|
+
|
|
179
|
+
/**
|
|
180
|
+
* Component default props
|
|
181
|
+
*/
|
|
182
|
+
const DEFAULT_PROPS = {
|
|
183
|
+
orientation: Orientation.vertical
|
|
184
|
+
};
|
|
185
|
+
const Navigation = forwardRef((props, ref) => {
|
|
186
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
187
|
+
const {
|
|
188
|
+
children,
|
|
189
|
+
className,
|
|
190
|
+
theme = defaultTheme,
|
|
191
|
+
orientation = DEFAULT_PROPS.orientation,
|
|
192
|
+
...forwardedProps
|
|
193
|
+
} = props;
|
|
194
|
+
return /*#__PURE__*/jsx(ThemeProvider, {
|
|
195
|
+
value: theme,
|
|
196
|
+
children: /*#__PURE__*/jsx("nav", {
|
|
197
|
+
className: classNames(className, handleBasicClasses({
|
|
198
|
+
prefix: CLASSNAME,
|
|
199
|
+
theme,
|
|
200
|
+
orientation
|
|
201
|
+
})),
|
|
202
|
+
ref: ref,
|
|
203
|
+
...forwardedProps,
|
|
204
|
+
children: /*#__PURE__*/jsx(NavigationContext.Provider, {
|
|
205
|
+
value: {
|
|
206
|
+
orientation
|
|
207
|
+
},
|
|
208
|
+
children: /*#__PURE__*/jsx("ul", {
|
|
209
|
+
className: `${CLASSNAME}__list`,
|
|
210
|
+
children: children
|
|
211
|
+
})
|
|
212
|
+
})
|
|
213
|
+
})
|
|
214
|
+
});
|
|
215
|
+
});
|
|
216
|
+
Navigation.displayName = COMPONENT_NAME;
|
|
217
|
+
Navigation.className = CLASSNAME;
|
|
218
|
+
Navigation.defaultProps = DEFAULT_PROPS;
|
|
219
|
+
|
|
220
|
+
// Sub components
|
|
221
|
+
Navigation.Section = NavigationSection;
|
|
222
|
+
Navigation.Item = NavigationItem;
|
|
223
|
+
|
|
224
|
+
export { Navigation };
|
|
225
|
+
//# sourceMappingURL=navigation-8b7d9bd8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-4fd3917d.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","React","createElement","classNames","handleBasicClasses","prefix","Tooltip","placement","Placement","TOP","RawClickable","_extends","isSelected","undefined","Icon","size","Size","xs","Text","truncate","displayName","NavigationContext","createContext","orientation","Orientation","vertical","NavigationSection","forwardRef","children","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
|
+
{"version":3,"file":"navigation-8b7d9bd8.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,5 +1,5 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
1
|
import { useRef } from 'react';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
3
3
|
import isFunction from 'lodash/isFunction';
|
|
4
4
|
import { D as DOCUMENT } from '../constants-d0e3f49e.js';
|
|
5
5
|
import { mdiAlert, mdiInformation, mdiCheckCircle, mdiAlertCircle } from '@lumx/icons';
|
|
@@ -7,10 +7,11 @@ import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/classN
|
|
|
7
7
|
import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
|
|
8
8
|
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
9
9
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
10
|
-
import {
|
|
10
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
11
|
+
import { P as Portal } from '../Portal-3f86608e.js';
|
|
11
12
|
import { Theme, Size, Emphasis, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
|
|
12
|
-
import { Icon } from './icon-
|
|
13
|
-
import { a as Button } from '../Button-
|
|
13
|
+
import { Icon } from './icon-b708cca4.js';
|
|
14
|
+
import { a as Button } from '../Button-1f227024.js';
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* Notification icon and colors according to their type.
|
|
@@ -34,10 +35,6 @@ const NOTIFICATION_CONFIGURATION = {
|
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
37
|
|
|
37
|
-
/**
|
|
38
|
-
* Defines the props of the component.
|
|
39
|
-
*/
|
|
40
|
-
|
|
41
38
|
/**
|
|
42
39
|
* Component display name.
|
|
43
40
|
*/
|
|
@@ -100,41 +97,49 @@ const Notification = forwardRef((props, ref) => {
|
|
|
100
97
|
if (!type || !isVisible) {
|
|
101
98
|
return null;
|
|
102
99
|
}
|
|
103
|
-
return /*#__PURE__*/
|
|
104
|
-
enabled: usePortal
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
100
|
+
return /*#__PURE__*/jsx(Portal, {
|
|
101
|
+
enabled: usePortal,
|
|
102
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
103
|
+
ref: mergeRefs(ref, rootRef),
|
|
104
|
+
role: "alert",
|
|
105
|
+
...forwardedProps,
|
|
106
|
+
className: classNames(className, handleBasicClasses({
|
|
107
|
+
color,
|
|
108
|
+
hasAction,
|
|
109
|
+
isHidden: !isOpen,
|
|
110
|
+
prefix: CLASSNAME
|
|
111
|
+
})),
|
|
112
|
+
onClick: onClick,
|
|
113
|
+
style: {
|
|
114
|
+
...style,
|
|
115
|
+
zIndex
|
|
116
|
+
},
|
|
117
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
118
|
+
className: `${CLASSNAME}__icon`,
|
|
119
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
120
|
+
icon: icon,
|
|
121
|
+
size: Size.s
|
|
122
|
+
})
|
|
123
|
+
}), /*#__PURE__*/jsx("div", {
|
|
124
|
+
className: `${CLASSNAME}__content`,
|
|
125
|
+
children: content
|
|
126
|
+
}), hasAction && /*#__PURE__*/jsx("div", {
|
|
127
|
+
className: `${CLASSNAME}__action`,
|
|
128
|
+
children: /*#__PURE__*/jsx(Button, {
|
|
129
|
+
emphasis: Emphasis.medium,
|
|
130
|
+
theme: theme,
|
|
131
|
+
onClick: handleCallback,
|
|
132
|
+
children: /*#__PURE__*/jsx("span", {
|
|
133
|
+
children: actionLabel
|
|
134
|
+
})
|
|
135
|
+
})
|
|
136
|
+
})]
|
|
137
|
+
})
|
|
138
|
+
});
|
|
134
139
|
});
|
|
135
140
|
Notification.displayName = COMPONENT_NAME;
|
|
136
141
|
Notification.className = CLASSNAME;
|
|
137
142
|
Notification.defaultProps = DEFAULT_PROPS;
|
|
138
143
|
|
|
139
144
|
export { Notification };
|
|
140
|
-
//# sourceMappingURL=notification-
|
|
145
|
+
//# sourceMappingURL=notification-a45fda96.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification-
|
|
1
|
+
{"version":3,"file":"notification-a45fda96.js","sources":["../../../src/components/notification/constants.ts","../../../src/components/notification/Notification.tsx"],"sourcesContent":["import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\n\n/**\n * Notification delay before hiding.\n */\nexport const HIDE_DELAY = 6000;\n\n/**\n * Notification icon and colors according to their type.\n */\nexport const NOTIFICATION_CONFIGURATION = {\n error: {\n color: 'red',\n icon: mdiAlert,\n },\n info: {\n color: 'blue',\n icon: mdiInformation,\n },\n success: {\n color: 'green',\n icon: mdiCheckCircle,\n },\n warning: {\n color: 'yellow',\n icon: mdiAlertCircle,\n },\n};\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\nimport isFunction from 'lodash/isFunction';\n\nimport { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';\nimport { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';\nimport { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\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 { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface NotificationProps extends GenericProps, HasTheme {\n /** Action button label. */\n actionLabel?: string;\n /** Content. */\n content?: React.ReactNode;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Notification type. */\n type?: Kind;\n /** Z-axis position. */\n zIndex?: number;\n /** On action button click callback. */\n onActionClick?(): void;\n /** On click callback. */\n onClick?(): void;\n /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */\n usePortal?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Notification';\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<NotificationProps> = {\n zIndex: 9999,\n usePortal: true,\n};\n\n/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n/**\n * Notification component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Notification = forwardRef<NotificationProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actionLabel,\n className,\n content,\n isOpen,\n onActionClick,\n onClick,\n theme = defaultTheme,\n type,\n zIndex = DEFAULT_PROPS.zIndex,\n usePortal = DEFAULT_PROPS.usePortal,\n style,\n ...forwardedProps\n } = props;\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};\n const rootRef = useRef<HTMLDivElement>(null);\n const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);\n const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);\n\n const handleCallback = (evt: React.MouseEvent) => {\n if (isFunction(onActionClick)) {\n onActionClick();\n }\n evt.stopPropagation();\n };\n\n if (!type || !isVisible) {\n return null;\n }\n\n return (\n <Portal enabled={usePortal}>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n <div\n ref={mergeRefs(ref, rootRef)}\n role=\"alert\"\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n color,\n hasAction,\n isHidden: !isOpen,\n prefix: CLASSNAME,\n }),\n )}\n onClick={onClick}\n style={{ ...style, zIndex }}\n >\n <div className={`${CLASSNAME}__icon`}>\n <Icon icon={icon} size={Size.s} />\n </div>\n <div className={`${CLASSNAME}__content`}>{content}</div>\n {hasAction && (\n <div className={`${CLASSNAME}__action`}>\n <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>\n <span>{actionLabel}</span>\n </Button>\n </div>\n )}\n </div>\n </Portal>\n );\n});\nNotification.displayName = COMPONENT_NAME;\nNotification.className = CLASSNAME;\nNotification.defaultProps = DEFAULT_PROPS;\n"],"names":["NOTIFICATION_CONFIGURATION","error","color","icon","mdiAlert","info","mdiInformation","success","mdiCheckCircle","warning","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","zIndex","usePortal","Notification","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actionLabel","className","content","isOpen","onActionClick","onClick","theme","type","style","forwardedProps","DOCUMENT","rootRef","useRef","isVisible","useTransitionVisibility","NOTIFICATION_TRANSITION_DURATION","hasAction","Boolean","handleCallback","evt","isFunction","stopPropagation","_jsx","Portal","enabled","children","_jsxs","mergeRefs","role","classNames","handleBasicClasses","isHidden","prefix","Icon","size","Size","s","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-65bfbc57.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
2
|
+
import isObject from 'lodash/isObject';
|
|
3
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
4
|
+
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
import { ThumbnailVariant } from './thumbnail-310a4c4b.js';
|
|
7
|
+
import { Orientation, Theme } from '@lumx/core/js/constants';
|
|
8
|
+
import { T as Thumbnail } from '../Thumbnail-b5dea0af.js';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Component display name.
|
|
12
|
+
*/
|
|
13
|
+
const COMPONENT_NAME = 'PostBlock';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Component default class name and class prefix.
|
|
17
|
+
*/
|
|
18
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Component default props.
|
|
22
|
+
*/
|
|
23
|
+
const DEFAULT_PROPS = {
|
|
24
|
+
orientation: Orientation.horizontal
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* PostBlock component.
|
|
29
|
+
*
|
|
30
|
+
* @param props Component props.
|
|
31
|
+
* @param ref Component ref.
|
|
32
|
+
* @return React element.
|
|
33
|
+
*/
|
|
34
|
+
const PostBlock = forwardRef((props, ref) => {
|
|
35
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
36
|
+
const {
|
|
37
|
+
actions,
|
|
38
|
+
attachments,
|
|
39
|
+
author,
|
|
40
|
+
className,
|
|
41
|
+
meta,
|
|
42
|
+
onClick,
|
|
43
|
+
orientation = DEFAULT_PROPS.orientation,
|
|
44
|
+
tags,
|
|
45
|
+
text,
|
|
46
|
+
theme = defaultTheme,
|
|
47
|
+
thumbnailProps,
|
|
48
|
+
title,
|
|
49
|
+
...forwardedProps
|
|
50
|
+
} = props;
|
|
51
|
+
return /*#__PURE__*/jsxs("div", {
|
|
52
|
+
ref: ref,
|
|
53
|
+
className: classNames(className, handleBasicClasses({
|
|
54
|
+
prefix: CLASSNAME,
|
|
55
|
+
orientation,
|
|
56
|
+
theme
|
|
57
|
+
})),
|
|
58
|
+
...forwardedProps,
|
|
59
|
+
children: [thumbnailProps && /*#__PURE__*/jsx("div", {
|
|
60
|
+
className: `${CLASSNAME}__thumbnail`,
|
|
61
|
+
children: /*#__PURE__*/jsx(Thumbnail, {
|
|
62
|
+
...thumbnailProps,
|
|
63
|
+
theme: theme,
|
|
64
|
+
variant: ThumbnailVariant.rounded
|
|
65
|
+
})
|
|
66
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
67
|
+
className: `${CLASSNAME}__wrapper`,
|
|
68
|
+
children: [author && /*#__PURE__*/jsx("div", {
|
|
69
|
+
className: `${CLASSNAME}__author`,
|
|
70
|
+
children: author
|
|
71
|
+
}), title && /*#__PURE__*/jsx("button", {
|
|
72
|
+
type: "button",
|
|
73
|
+
className: `${CLASSNAME}__title`,
|
|
74
|
+
onClick: onClick,
|
|
75
|
+
children: title
|
|
76
|
+
}), meta && /*#__PURE__*/jsx("span", {
|
|
77
|
+
className: `${CLASSNAME}__meta`,
|
|
78
|
+
children: meta
|
|
79
|
+
}), isObject(text) && text.__html ?
|
|
80
|
+
/*#__PURE__*/
|
|
81
|
+
// eslint-disable-next-line react/no-danger
|
|
82
|
+
jsx("p", {
|
|
83
|
+
dangerouslySetInnerHTML: text,
|
|
84
|
+
className: `${CLASSNAME}__text`
|
|
85
|
+
}) : /*#__PURE__*/jsx("p", {
|
|
86
|
+
className: `${CLASSNAME}__text`,
|
|
87
|
+
children: text
|
|
88
|
+
}), attachments && /*#__PURE__*/jsx("div", {
|
|
89
|
+
className: `${CLASSNAME}__attachments`,
|
|
90
|
+
children: attachments
|
|
91
|
+
}), (tags || actions) && /*#__PURE__*/jsxs("div", {
|
|
92
|
+
className: `${CLASSNAME}__toolbar`,
|
|
93
|
+
children: [tags && /*#__PURE__*/jsx("div", {
|
|
94
|
+
className: `${CLASSNAME}__tags`,
|
|
95
|
+
children: tags
|
|
96
|
+
}), actions && /*#__PURE__*/jsx("div", {
|
|
97
|
+
className: `${CLASSNAME}__actions`,
|
|
98
|
+
children: actions
|
|
99
|
+
})]
|
|
100
|
+
})]
|
|
101
|
+
})]
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
PostBlock.displayName = COMPONENT_NAME;
|
|
105
|
+
PostBlock.className = CLASSNAME;
|
|
106
|
+
PostBlock.defaultProps = DEFAULT_PROPS;
|
|
107
|
+
|
|
108
|
+
export { PostBlock };
|
|
109
|
+
//# sourceMappingURL=post-block-52e58dd5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"post-block-
|
|
1
|
+
{"version":3,"file":"post-block-52e58dd5.js","sources":["../../../src/components/post-block/PostBlock.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isObject from 'lodash/isObject';\n\nimport { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } 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 PostBlockProps extends GenericProps, HasTheme {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Attachment content. */\n attachments?: ReactNode;\n /** Author content. */\n author?: ReactNode;\n /** Metadata content. */\n meta?: ReactNode;\n /** Orientation. */\n orientation?: Orientation;\n /** Tag content. */\n tags?: ReactNode;\n /** Content (string, or sanitized html). */\n text?: string | { __html: string };\n /** Thumbnail. */\n thumbnailProps?: ThumbnailProps;\n /** Title. */\n title: string;\n /** On click callback. */\n onClick?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'PostBlock';\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<PostBlockProps> = {\n orientation: Orientation.horizontal,\n};\n\n/**\n * PostBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actions,\n attachments,\n author,\n className,\n meta,\n onClick,\n orientation = DEFAULT_PROPS.orientation,\n tags,\n text,\n theme = defaultTheme,\n thumbnailProps,\n title,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, orientation, theme }))}\n {...forwardedProps}\n >\n {thumbnailProps && (\n <div className={`${CLASSNAME}__thumbnail`}>\n <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />\n </div>\n )}\n <div className={`${CLASSNAME}__wrapper`}>\n {author && <div className={`${CLASSNAME}__author`}>{author}</div>}\n\n {title && (\n <button type=\"button\" className={`${CLASSNAME}__title`} onClick={onClick}>\n {title}\n </button>\n )}\n\n {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}\n\n {isObject(text) && text.__html ? (\n // eslint-disable-next-line react/no-danger\n <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />\n ) : (\n <p className={`${CLASSNAME}__text`}>{text}</p>\n )}\n\n {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}\n {(tags || actions) && (\n <div className={`${CLASSNAME}__toolbar`}>\n {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n </div>\n )}\n </div>\n </div>\n );\n});\nPostBlock.displayName = COMPONENT_NAME;\nPostBlock.className = CLASSNAME;\nPostBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","PostBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","attachments","author","className","meta","onClick","tags","text","theme","thumbnailProps","title","forwardedProps","_jsxs","classNames","handleBasicClasses","prefix","children","_jsx","Thumbnail","variant","ThumbnailVariant","rounded","type","isObject","__html","dangerouslySetInnerHTML","displayName","defaultProps"],"mappings":";;;;;;;;;AAqCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,WAAW,CAAA;;AAElC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAsC,GAAG;EAC3CC,WAAW,EAAEC,WAAW,CAACC,UAAAA;AAC7B,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,SAAS,GAAGC,UAAU,CAAiC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,IAAI;IACJC,OAAO;IACPhB,WAAW,GAAGD,aAAa,CAACC,WAAW;IACvCiB,IAAI;IACJC,IAAI;AACJC,IAAAA,KAAK,GAAGZ,YAAY;IACpBa,cAAc;IACdC,KAAK;IACL,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,IAAA,CAAA,KAAA,EAAA;AACIjB,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,SAAS,EAAEU,UAAU,CAACV,SAAS,EAAEW,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE7B,SAAS;MAAEG,WAAW;AAAEmB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAA,IAAA,GAC5FG,cAAc;IAAAK,QAAA,EAAA,CAEjBP,cAAc,iBACXQ,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;MAAA8B,QAAA,eACtCC,GAAA,CAACC,SAAS,EAAA;AAAA,QAAA,GAAKT,cAAc;AAAED,QAAAA,KAAK,EAAEA,KAAM;QAACW,OAAO,EAAEC,gBAAgB,CAACC,OAAAA;OAAU,CAAA;KAChF,CACR,eACDT,IAAA,CAAA,KAAA,EAAA;MAAKT,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAY,SAAA,CAAA;MAAA8B,QAAA,EAAA,CACnCd,MAAM,iBAAIe,GAAA,CAAA,KAAA,EAAA;QAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAW,QAAA,CAAA;AAAA8B,QAAAA,QAAA,EAAEd,MAAAA;AAAM,OAAM,CAAC,EAEhEQ,KAAK,iBACFO,GAAA,CAAA,QAAA,EAAA;AAAQK,QAAAA,IAAI,EAAC,QAAQ;QAACnB,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAU,OAAA,CAAA;AAACmB,QAAAA,OAAO,EAAEA,OAAQ;AAAAW,QAAAA,QAAA,EACpEN,KAAAA;AAAK,OACF,CACX,EAEAN,IAAI,iBAAIa,GAAA,CAAA,MAAA,EAAA;QAAMd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAA8B,QAAAA,QAAA,EAAEZ,IAAAA;OAAW,CAAC,EAE5DmB,QAAQ,CAAChB,IAAI,CAAC,IAAIA,IAAI,CAACiB,MAAM;AAAA;AAC1B;MACAP,GAAA,CAAA,GAAA,EAAA;AAAGQ,QAAAA,uBAAuB,EAAElB,IAAK;QAACJ,SAAS,EAAE,GAAGjB,SAAS,CAAA,MAAA,CAAA;OAAW,CAAC,gBAErE+B,GAAA,CAAA,GAAA,EAAA;QAAGd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAA8B,QAAAA,QAAA,EAAET,IAAAA;AAAI,OAAI,CAChD,EAEAN,WAAW,iBAAIgB,GAAA,CAAA,KAAA,EAAA;QAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAgB,aAAA,CAAA;AAAA8B,QAAAA,QAAA,EAAEf,WAAAA;AAAW,OAAM,CAAC,EAC/E,CAACK,IAAI,IAAIN,OAAO,kBACbY,IAAA,CAAA,KAAA,EAAA;QAAKT,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAY,SAAA,CAAA;QAAA8B,QAAA,EAAA,CACnCV,IAAI,iBAAIW,GAAA,CAAA,KAAA,EAAA;UAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAA8B,UAAAA,QAAA,EAAEV,IAAAA;AAAI,SAAM,CAAC,EAC1DN,OAAO,iBAAIiB,GAAA,CAAA,KAAA,EAAA;UAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAA8B,UAAAA,QAAA,EAAEhB,OAAAA;AAAO,SAAM,CAAC,CAAA;AAAA,OACnE,CACR,CAAA;AAAA,KACA,CAAC,CAAA;AAAA,GACL,CAAC,CAAA;AAEd,CAAC,EAAC;AACFR,SAAS,CAACkC,WAAW,GAAGzC,cAAc,CAAA;AACtCO,SAAS,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC/BM,SAAS,CAACmC,YAAY,GAAGvC,aAAa;;;;"}
|