@lumx/react 3.20.1-alpha.28 → 3.20.1-alpha.29
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/index.js +14033 -63
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/utils/index.js +158 -3
- package/utils/index.js.map +1 -1
- package/_internal/Button-5a87fee9.js +0 -97
- package/_internal/Button-5a87fee9.js.map +0 -1
- package/_internal/ButtonRoot-bf682215.js +0 -117
- package/_internal/ButtonRoot-bf682215.js.map +0 -1
- package/_internal/Chip-8d0aae06.js +0 -143
- package/_internal/Chip-8d0aae06.js.map +0 -1
- package/_internal/ClickAwayProvider-1204f237.js +0 -95
- package/_internal/ClickAwayProvider-1204f237.js.map +0 -1
- package/_internal/DisabledStateContext-ea04260d.js +0 -29
- package/_internal/DisabledStateContext-ea04260d.js.map +0 -1
- package/_internal/HeadingLevelProvider-ebdcb0c7.js +0 -61
- package/_internal/HeadingLevelProvider-ebdcb0c7.js.map +0 -1
- package/_internal/IconButton-351389b0.js +0 -77
- package/_internal/IconButton-351389b0.js.map +0 -1
- package/_internal/ImageCaption-4109b433.js +0 -75
- package/_internal/ImageCaption-4109b433.js.map +0 -1
- package/_internal/List-b7882a99.js +0 -817
- package/_internal/List-b7882a99.js.map +0 -1
- package/_internal/PopoverDialog-2e7b9ed5.js +0 -655
- package/_internal/PopoverDialog-2e7b9ed5.js.map +0 -1
- package/_internal/Portal-3f86608e.js +0 -45
- package/_internal/Portal-3f86608e.js.map +0 -1
- package/_internal/RawClickable-2c2b6a89.js +0 -52
- package/_internal/RawClickable-2c2b6a89.js.map +0 -1
- package/_internal/Slides-83646e84.js +0 -679
- package/_internal/Slides-83646e84.js.map +0 -1
- package/_internal/ThemeContext-3181f000.js +0 -14
- package/_internal/ThemeContext-3181f000.js.map +0 -1
- package/_internal/Thumbnail-741501a5.js +0 -314
- package/_internal/Thumbnail-741501a5.js.map +0 -1
- package/_internal/check-circle-de24f857.js +0 -4
- package/_internal/check-circle-de24f857.js.map +0 -1
- package/_internal/chevron-right-827b804a.js +0 -6
- package/_internal/chevron-right-827b804a.js.map +0 -1
- package/_internal/chevron-up-0b9c76cb.js +0 -6
- package/_internal/chevron-up-0b9c76cb.js.map +0 -1
- package/_internal/close-circle-ef5d1aac.js +0 -4
- package/_internal/close-circle-ef5d1aac.js.map +0 -1
- package/_internal/close-eaf6c45a.js +0 -4
- package/_internal/close-eaf6c45a.js.map +0 -1
- package/_internal/components/alert-dialog-5df4f133.js +0 -163
- package/_internal/components/alert-dialog-5df4f133.js.map +0 -1
- package/_internal/components/autocomplete-824c779e.js +0 -261
- package/_internal/components/autocomplete-824c779e.js.map +0 -1
- package/_internal/components/avatar-69b66f01.js +0 -83
- package/_internal/components/avatar-69b66f01.js.map +0 -1
- package/_internal/components/badge-63cd3b1c.js +0 -81
- package/_internal/components/badge-63cd3b1c.js.map +0 -1
- package/_internal/components/button-eebd4e00.js +0 -47
- package/_internal/components/button-eebd4e00.js.map +0 -1
- package/_internal/components/checkbox-54943a02.js +0 -143
- package/_internal/components/checkbox-54943a02.js.map +0 -1
- package/_internal/components/chip-9ad6b318.js +0 -102
- package/_internal/components/chip-9ad6b318.js.map +0 -1
- package/_internal/components/comment-block-55a4ab3c.js +0 -138
- package/_internal/components/comment-block-55a4ab3c.js.map +0 -1
- package/_internal/components/date-picker-a824a3ae.js +0 -2
- package/_internal/components/date-picker-a824a3ae.js.map +0 -1
- package/_internal/components/dialog-5e6320b8.js +0 -238
- package/_internal/components/dialog-5e6320b8.js.map +0 -1
- package/_internal/components/divider-bdf11ba3.js +0 -50
- package/_internal/components/divider-bdf11ba3.js.map +0 -1
- package/_internal/components/drag-handle-45912fd3.js +0 -52
- package/_internal/components/drag-handle-45912fd3.js.map +0 -1
- package/_internal/components/dropdown-0216211d.js +0 -147
- package/_internal/components/dropdown-0216211d.js.map +0 -1
- package/_internal/components/expansion-panel-3ce73c6b.js +0 -167
- package/_internal/components/expansion-panel-3ce73c6b.js.map +0 -1
- package/_internal/components/flag-1b177f78.js +0 -59
- package/_internal/components/flag-1b177f78.js.map +0 -1
- package/_internal/components/flex-box-93b97715.js +0 -56
- package/_internal/components/flex-box-93b97715.js.map +0 -1
- package/_internal/components/generic-block-925f7c5b.js +0 -128
- package/_internal/components/generic-block-925f7c5b.js.map +0 -1
- package/_internal/components/grid-95fd1493.js +0 -104
- package/_internal/components/grid-95fd1493.js.map +0 -1
- package/_internal/components/grid-column-43f28cfb.js +0 -58
- package/_internal/components/grid-column-43f28cfb.js.map +0 -1
- package/_internal/components/heading-45d6e78e.js +0 -53
- package/_internal/components/heading-45d6e78e.js.map +0 -1
- package/_internal/components/icon-79195151.js +0 -2
- package/_internal/components/icon-79195151.js.map +0 -1
- package/_internal/components/image-block-aba6d2db.js +0 -110
- package/_internal/components/image-block-aba6d2db.js.map +0 -1
- package/_internal/components/image-lightbox-8b8e77c2.js +0 -759
- package/_internal/components/image-lightbox-8b8e77c2.js.map +0 -1
- package/_internal/components/inline-list-dfb9fd34.js +0 -74
- package/_internal/components/inline-list-dfb9fd34.js.map +0 -1
- package/_internal/components/input-helper-c8a0078b.js +0 -71
- package/_internal/components/input-helper-c8a0078b.js.map +0 -1
- package/_internal/components/input-label-9711398b.js +0 -59
- package/_internal/components/input-label-9711398b.js.map +0 -1
- package/_internal/components/lightbox-894abe64.js +0 -155
- package/_internal/components/lightbox-894abe64.js.map +0 -1
- package/_internal/components/link-e70e64ed.js +0 -72
- package/_internal/components/link-e70e64ed.js.map +0 -1
- package/_internal/components/link-preview-e56f3570.js +0 -117
- package/_internal/components/link-preview-e56f3570.js.map +0 -1
- package/_internal/components/list-59b7ce56.js +0 -71
- package/_internal/components/list-59b7ce56.js.map +0 -1
- package/_internal/components/message-a255dfd3.js +0 -98
- package/_internal/components/message-a255dfd3.js.map +0 -1
- package/_internal/components/mosaic-192f2270.js +0 -94
- package/_internal/components/mosaic-192f2270.js.map +0 -1
- package/_internal/components/navigation-dfe8aac0.js +0 -225
- package/_internal/components/navigation-dfe8aac0.js.map +0 -1
- package/_internal/components/notification-10f289b5.js +0 -143
- package/_internal/components/notification-10f289b5.js.map +0 -1
- package/_internal/components/popover-6c7f745b.js +0 -3
- package/_internal/components/popover-6c7f745b.js.map +0 -1
- package/_internal/components/post-block-f7dcc6e9.js +0 -109
- package/_internal/components/post-block-f7dcc6e9.js.map +0 -1
- package/_internal/components/progress-7a05fb0c.js +0 -182
- package/_internal/components/progress-7a05fb0c.js.map +0 -1
- package/_internal/components/progress-tracker-48876add.js +0 -309
- package/_internal/components/progress-tracker-48876add.js.map +0 -1
- package/_internal/components/radio-button-07cf45e9.js +0 -149
- package/_internal/components/radio-button-07cf45e9.js.map +0 -1
- package/_internal/components/select-8b54a444.js +0 -457
- package/_internal/components/select-8b54a444.js.map +0 -1
- package/_internal/components/side-navigation-7eeed3b4.js +0 -164
- package/_internal/components/side-navigation-7eeed3b4.js.map +0 -1
- package/_internal/components/skeleton-a4e84085.js +0 -166
- package/_internal/components/skeleton-a4e84085.js.map +0 -1
- package/_internal/components/slider-5d64b470.js +0 -311
- package/_internal/components/slider-5d64b470.js.map +0 -1
- package/_internal/components/slideshow-bce65cf6.js +0 -151
- package/_internal/components/slideshow-bce65cf6.js.map +0 -1
- package/_internal/components/switch-7ae55d89.js +0 -121
- package/_internal/components/switch-7ae55d89.js.map +0 -1
- package/_internal/components/table-5bdf4aec.js +0 -297
- package/_internal/components/table-5bdf4aec.js.map +0 -1
- package/_internal/components/tabs-2ad54592.js +0 -298
- package/_internal/components/tabs-2ad54592.js.map +0 -1
- package/_internal/components/text-09c81111.js +0 -2
- package/_internal/components/text-09c81111.js.map +0 -1
- package/_internal/components/text-field-3e1030f0.js +0 -359
- package/_internal/components/text-field-3e1030f0.js.map +0 -1
- package/_internal/components/thumbnail-1c5828b9.js +0 -42
- package/_internal/components/thumbnail-1c5828b9.js.map +0 -1
- package/_internal/components/toolbar-0d14efb7.js +0 -61
- package/_internal/components/toolbar-0d14efb7.js.map +0 -1
- package/_internal/components/tooltip-31181a24.js +0 -327
- package/_internal/components/tooltip-31181a24.js.map +0 -1
- package/_internal/components/uploader-845b2412.js +0 -153
- package/_internal/components/uploader-845b2412.js.map +0 -1
- package/_internal/components/user-block-91c30797.js +0 -144
- package/_internal/components/user-block-91c30797.js.map +0 -1
- package/_internal/constants-9b714e31.js +0 -2167
- package/_internal/constants-9b714e31.js.map +0 -1
- package/_internal/constants-d0e3f49e.js +0 -24
- package/_internal/constants-d0e3f49e.js.map +0 -1
- package/_internal/context-9d1336a1.js +0 -19
- package/_internal/context-9d1336a1.js.map +0 -1
- package/_internal/forwardRef-d0e90329.js +0 -82
- package/_internal/forwardRef-d0e90329.js.map +0 -1
- package/_internal/getFocusableElements-230173a8.js +0 -13
- package/_internal/getFocusableElements-230173a8.js.map +0 -1
- package/_internal/index-68e1b0af.js +0 -436
- package/_internal/index-68e1b0af.js.map +0 -1
- package/_internal/index-745f94ee.js +0 -103
- package/_internal/index-745f94ee.js.map +0 -1
- package/_internal/index-ab520e78.js +0 -117
- package/_internal/index-ab520e78.js.map +0 -1
- package/_internal/information-49bbeed3.js +0 -6
- package/_internal/information-49bbeed3.js.map +0 -1
- package/_internal/isComponent-b9762ff1.js +0 -18
- package/_internal/isComponent-b9762ff1.js.map +0 -1
- package/_internal/isComponentType-e806b848.js +0 -9
- package/_internal/isComponentType-e806b848.js.map +0 -1
- package/_internal/mergeRefs-f0d7d6ea.js +0 -30
- package/_internal/mergeRefs-f0d7d6ea.js.map +0 -1
- package/_internal/state-db358714.js +0 -130
- package/_internal/state-db358714.js.map +0 -1
- package/_internal/useBooleanState-2a3d237c.js +0 -12
- package/_internal/useBooleanState-2a3d237c.js.map +0 -1
- package/_internal/useCallbackOnEscape-0b220f9c.js +0 -62
- package/_internal/useCallbackOnEscape-0b220f9c.js.map +0 -1
- package/_internal/useDisableBodyScroll-36bd7352.js +0 -219
- package/_internal/useDisableBodyScroll-36bd7352.js.map +0 -1
- package/_internal/useDisableStateProps-69e16b7c.js +0 -36
- package/_internal/useDisableStateProps-69e16b7c.js.map +0 -1
- package/_internal/useFocusTrap-3114e5e8.js +0 -112
- package/_internal/useFocusTrap-3114e5e8.js.map +0 -1
- package/_internal/useId-3a1facc0.js +0 -18
- package/_internal/useId-3a1facc0.js.map +0 -1
- package/_internal/useRovingTabIndex-7daf0f24.js +0 -77
- package/_internal/useRovingTabIndex-7daf0f24.js.map +0 -1
- package/_internal/useTransitionVisibility-321fdbfa.js +0 -50
- package/_internal/useTransitionVisibility-321fdbfa.js.map +0 -1
- package/_internal/wrapChildrenIconWithSpaces-e6038f72.js +0 -20
- package/_internal/wrapChildrenIconWithSpaces-e6038f72.js.map +0 -1
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
import React__default, { useState, useEffect, useRef, useMemo, Children } from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
|
-
import { D as DOCUMENT } from '../constants-d0e3f49e.js';
|
|
4
|
-
import { u as useCallbackOnEscape } from '../useCallbackOnEscape-0b220f9c.js';
|
|
5
|
-
import { u as useFocusTrap } from '../useFocusTrap-3114e5e8.js';
|
|
6
|
-
import { i as isComponent } from '../isComponent-b9762ff1.js';
|
|
7
|
-
import { partitionMulti } from '@lumx/core/js/utils/collection/partitionMulti';
|
|
8
|
-
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
9
|
-
import { C as ClickAwayProvider } from '../ClickAwayProvider-1204f237.js';
|
|
10
|
-
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
11
|
-
import { u as useDisableBodyScroll } from '../useDisableBodyScroll-36bd7352.js';
|
|
12
|
-
import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
|
|
13
|
-
import { T as ThemeProvider } from '../ThemeContext-3181f000.js';
|
|
14
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
15
|
-
import { P as Portal } from '../Portal-3f86608e.js';
|
|
16
|
-
import { H as HeadingLevelProvider } from '../HeadingLevelProvider-ebdcb0c7.js';
|
|
17
|
-
import { Progress, ProgressVariant } from './progress-7a05fb0c.js';
|
|
18
|
-
import { Size, DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Convenient hook to create interaction observers.
|
|
22
|
-
*
|
|
23
|
-
* @param elements Elements to observe.
|
|
24
|
-
* @param options IntersectionObserver options.
|
|
25
|
-
* @return Map of intersections.
|
|
26
|
-
*/
|
|
27
|
-
function useIntersectionObserver(elements, options) {
|
|
28
|
-
const [intersections, setIntersections] = useState(() => new Map());
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
if (elements.length < 1 || !elements.some(Boolean)) {
|
|
31
|
-
return undefined;
|
|
32
|
-
}
|
|
33
|
-
const observer = new IntersectionObserver(entries => {
|
|
34
|
-
for (const entry of entries) {
|
|
35
|
-
intersections.set(entry.target, entry);
|
|
36
|
-
}
|
|
37
|
-
setIntersections(new Map(intersections));
|
|
38
|
-
}, options);
|
|
39
|
-
for (const element of elements) {
|
|
40
|
-
if (element) {
|
|
41
|
-
observer.observe(element);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
return () => observer.disconnect();
|
|
45
|
-
},
|
|
46
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
47
|
-
[...elements]);
|
|
48
|
-
return intersections;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const isHeader = isComponent('header');
|
|
52
|
-
const isFooter = isComponent('footer');
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Component display name.
|
|
56
|
-
*/
|
|
57
|
-
const COMPONENT_NAME = 'Dialog';
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Component default class name and class prefix.
|
|
61
|
-
*/
|
|
62
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* Component default props.
|
|
66
|
-
*/
|
|
67
|
-
const DEFAULT_PROPS = {
|
|
68
|
-
size: Size.big,
|
|
69
|
-
disableBodyScroll: true
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Dialog component.
|
|
74
|
-
*
|
|
75
|
-
* @param props Component props.
|
|
76
|
-
* @param ref Component ref.
|
|
77
|
-
* @return React element.
|
|
78
|
-
*/
|
|
79
|
-
const Dialog = forwardRef((props, ref) => {
|
|
80
|
-
if (!DOCUMENT) {
|
|
81
|
-
// Can't render in SSR.
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
|
-
const {
|
|
85
|
-
children,
|
|
86
|
-
className,
|
|
87
|
-
header,
|
|
88
|
-
focusElement,
|
|
89
|
-
forceFooterDivider,
|
|
90
|
-
forceHeaderDivider,
|
|
91
|
-
footer,
|
|
92
|
-
isLoading,
|
|
93
|
-
isOpen,
|
|
94
|
-
onClose,
|
|
95
|
-
parentElement,
|
|
96
|
-
contentRef,
|
|
97
|
-
preventAutoClose,
|
|
98
|
-
size = DEFAULT_PROPS.size,
|
|
99
|
-
zIndex,
|
|
100
|
-
dialogProps,
|
|
101
|
-
onVisibilityChange,
|
|
102
|
-
disableBodyScroll = DEFAULT_PROPS.disableBodyScroll,
|
|
103
|
-
preventCloseOnClick,
|
|
104
|
-
preventCloseOnEscape,
|
|
105
|
-
...forwardedProps
|
|
106
|
-
} = props;
|
|
107
|
-
|
|
108
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
109
|
-
const previousOpen = React__default.useRef(isOpen);
|
|
110
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
111
|
-
React__default.useEffect(() => {
|
|
112
|
-
if (isOpen !== previousOpen.current) {
|
|
113
|
-
previousOpen.current = isOpen;
|
|
114
|
-
|
|
115
|
-
// Focus the parent element on close.
|
|
116
|
-
if (!isOpen && parentElement && parentElement.current) {
|
|
117
|
-
parentElement.current.focus();
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}, [isOpen, parentElement]);
|
|
121
|
-
const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
|
|
122
|
-
|
|
123
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
124
|
-
useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
|
|
125
|
-
|
|
126
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
127
|
-
const wrapperRef = useRef(null);
|
|
128
|
-
/**
|
|
129
|
-
* Since the `contentRef` comes from the parent and is optional,
|
|
130
|
-
* we need to create a stable contentRef that will always be available.
|
|
131
|
-
*/
|
|
132
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
133
|
-
const localContentRef = useRef(null);
|
|
134
|
-
// Handle focus trap.
|
|
135
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
136
|
-
useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
|
|
137
|
-
|
|
138
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
139
|
-
useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
|
|
140
|
-
|
|
141
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
142
|
-
const [sentinelTop, setSentinelTop] = useState(null);
|
|
143
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
144
|
-
const [sentinelBottom, setSentinelBottom] = useState(null);
|
|
145
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
146
|
-
const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {
|
|
147
|
-
threshold: [0, 1]
|
|
148
|
-
});
|
|
149
|
-
const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);
|
|
150
|
-
const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);
|
|
151
|
-
|
|
152
|
-
// Separate header, footer and dialog content from children.
|
|
153
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
154
|
-
const [[headerChild], [footerChild], content] = useMemo(() => partitionMulti(Children.toArray(children), [isHeader, isFooter]), [children]);
|
|
155
|
-
const headerChildProps = headerChild?.props;
|
|
156
|
-
const headerChildContent = headerChildProps?.children;
|
|
157
|
-
const footerChildProps = footerChild?.props;
|
|
158
|
-
const footerChildContent = footerChildProps?.children;
|
|
159
|
-
|
|
160
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
161
|
-
const clickAwayRefs = useRef([wrapperRef]);
|
|
162
|
-
|
|
163
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
164
|
-
const rootRef = useRef(null);
|
|
165
|
-
|
|
166
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
167
|
-
const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
|
|
168
|
-
const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
|
|
169
|
-
return isOpen || isVisible ? /*#__PURE__*/jsx(Portal, {
|
|
170
|
-
children: /*#__PURE__*/jsxs("div", {
|
|
171
|
-
ref: mergeRefs(rootRef, ref),
|
|
172
|
-
...forwardedProps,
|
|
173
|
-
className: classNames(className, handleBasicClasses({
|
|
174
|
-
isHidden: !isOpen,
|
|
175
|
-
isLoading,
|
|
176
|
-
isShown: isOpen || isVisible,
|
|
177
|
-
prefix: CLASSNAME,
|
|
178
|
-
size
|
|
179
|
-
})),
|
|
180
|
-
style: {
|
|
181
|
-
zIndex
|
|
182
|
-
},
|
|
183
|
-
children: [/*#__PURE__*/jsx("div", {
|
|
184
|
-
className: `${CLASSNAME}__overlay`
|
|
185
|
-
}), /*#__PURE__*/jsx(HeadingLevelProvider, {
|
|
186
|
-
level: 2,
|
|
187
|
-
children: /*#__PURE__*/jsx(ThemeProvider, {
|
|
188
|
-
value: undefined,
|
|
189
|
-
children: /*#__PURE__*/jsx("div", {
|
|
190
|
-
className: `${CLASSNAME}__container`,
|
|
191
|
-
role: "dialog",
|
|
192
|
-
"aria-modal": "true",
|
|
193
|
-
...dialogProps,
|
|
194
|
-
children: /*#__PURE__*/jsx(ClickAwayProvider, {
|
|
195
|
-
callback: !shouldPreventCloseOnClickAway && onClose,
|
|
196
|
-
childrenRefs: clickAwayRefs,
|
|
197
|
-
parentRef: rootRef,
|
|
198
|
-
children: /*#__PURE__*/jsxs("section", {
|
|
199
|
-
className: `${CLASSNAME}__wrapper`,
|
|
200
|
-
ref: wrapperRef,
|
|
201
|
-
children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
|
|
202
|
-
...headerChildProps,
|
|
203
|
-
className: classNames(`${CLASSNAME}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME}__header--has-divider`, headerChildProps?.className),
|
|
204
|
-
children: [header, headerChildContent]
|
|
205
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
206
|
-
ref: mergeRefs(contentRef, localContentRef),
|
|
207
|
-
className: `${CLASSNAME}__content`,
|
|
208
|
-
children: [/*#__PURE__*/jsx("div", {
|
|
209
|
-
className: `${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`,
|
|
210
|
-
ref: setSentinelTop
|
|
211
|
-
}), content, /*#__PURE__*/jsx("div", {
|
|
212
|
-
className: `${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`,
|
|
213
|
-
ref: setSentinelBottom
|
|
214
|
-
})]
|
|
215
|
-
}), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
|
|
216
|
-
...footerChildProps,
|
|
217
|
-
className: classNames(`${CLASSNAME}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME}__footer--has-divider`, footerChildProps?.className),
|
|
218
|
-
children: [footer, footerChildContent]
|
|
219
|
-
}), isLoading && /*#__PURE__*/jsx("div", {
|
|
220
|
-
className: `${CLASSNAME}__progress-overlay`,
|
|
221
|
-
children: /*#__PURE__*/jsx(Progress, {
|
|
222
|
-
variant: ProgressVariant.circular
|
|
223
|
-
})
|
|
224
|
-
})]
|
|
225
|
-
})
|
|
226
|
-
})
|
|
227
|
-
})
|
|
228
|
-
})
|
|
229
|
-
})]
|
|
230
|
-
})
|
|
231
|
-
}) : null;
|
|
232
|
-
});
|
|
233
|
-
Dialog.displayName = COMPONENT_NAME;
|
|
234
|
-
Dialog.className = CLASSNAME;
|
|
235
|
-
Dialog.defaultProps = DEFAULT_PROPS;
|
|
236
|
-
|
|
237
|
-
export { Dialog };
|
|
238
|
-
//# sourceMappingURL=dialog-5e6320b8.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-5e6320b8.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n elements: Array<T | null | undefined>,\n options?: IntersectionObserverInit,\n): Intersections<T> {\n const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n useEffect(\n () => {\n if (elements.length < 1 || !elements.some(Boolean)) {\n return undefined;\n }\n\n const observer = new IntersectionObserver((entries) => {\n for (const entry of entries) {\n intersections.set(entry.target as T, entry);\n }\n setIntersections(new Map(intersections));\n }, options);\n\n for (const element of elements) {\n if (element) {\n observer.observe(element);\n }\n }\n return () => observer.disconnect();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [...elements],\n );\n\n return intersections;\n}\n","import React, { Children, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { HeadingLevelProvider, Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\n\nimport { GenericProps, isComponent } from '@lumx/react/utils/type';\nimport { partitionMulti } from '@lumx/core/js/utils/collection/partitionMulti';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n /** Footer content. */\n footer?: ReactNode;\n /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n forceFooterDivider?: boolean;\n /** Header content. */\n header?: ReactNode;\n /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n forceHeaderDivider?: boolean;\n /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n isLoading?: boolean;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n parentElement?: RefObject<HTMLElement>;\n /** Reference to the dialog content element. */\n contentRef?: Ref<HTMLDivElement>;\n /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n focusElement?: RefObject<HTMLElement>;\n /** Whether to keep the dialog open on clickaway or escape press. */\n preventAutoClose?: boolean;\n /** Whether to keep the dialog open on escape press. */\n preventCloseOnEscape?: boolean;\n /** Whether to keep the dialog open on clickaway. */\n preventCloseOnClick?: boolean;\n /** Size variant. */\n size?: DialogSizes;\n /** Z-axis position. */\n zIndex?: number;\n /** Z-axis position. */\n dialogProps?: GenericProps;\n /** On close callback. */\n onClose?(): void;\n /** Callback called when the open animation starts and the close animation finishes. */\n onVisibilityChange?(isVisible: boolean): void;\n /** whether to disable the scroll on the body or not */\n disableBodyScroll?: boolean;\n /** Children */\n children?: React.ReactNode;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DialogProps> = {\n size: Size.big,\n disableBodyScroll: true,\n};\n\n/**\n * Dialog component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n\n const {\n children,\n className,\n header,\n focusElement,\n forceFooterDivider,\n forceHeaderDivider,\n footer,\n isLoading,\n isOpen,\n onClose,\n parentElement,\n contentRef,\n preventAutoClose,\n size = DEFAULT_PROPS.size,\n zIndex,\n dialogProps,\n onVisibilityChange,\n disableBodyScroll = DEFAULT_PROPS.disableBodyScroll,\n preventCloseOnClick,\n preventCloseOnEscape,\n ...forwardedProps\n } = props;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const previousOpen = React.useRef(isOpen);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isOpen !== previousOpen.current) {\n previousOpen.current = isOpen;\n\n // Focus the parent element on close.\n if (!isOpen && parentElement && parentElement.current) {\n parentElement.current.focus();\n }\n }\n }, [isOpen, parentElement]);\n\n const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const wrapperRef = useRef<HTMLDivElement>(null);\n /**\n * Since the `contentRef` comes from the parent and is optional,\n * we need to create a stable contentRef that will always be available.\n */\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const localContentRef = useRef<HTMLDivElement>(null);\n // Handle focus trap.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n threshold: [0, 1],\n });\n\n const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n // Separate header, footer and dialog content from children.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [[headerChild], [footerChild], content] = useMemo(\n () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n [children],\n );\n const headerChildProps = (headerChild as ReactElement)?.props;\n const headerChildContent = headerChildProps?.children;\n const footerChildProps = (footerChild as ReactElement)?.props;\n const footerChildContent = footerChildProps?.children;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const clickAwayRefs = useRef([wrapperRef]);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const rootRef = useRef<HTMLDivElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;\n\n return isOpen || isVisible ? (\n <Portal>\n <div\n ref={mergeRefs(rootRef, ref)}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isHidden: !isOpen,\n isLoading,\n isShown: isOpen || isVisible,\n prefix: CLASSNAME,\n size,\n }),\n )}\n style={{ zIndex }}\n >\n <div className={`${CLASSNAME}__overlay`} />\n\n <HeadingLevelProvider level={2}>\n <ThemeProvider value={undefined}>\n <div className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n <ClickAwayProvider\n callback={!shouldPreventCloseOnClickAway && onClose}\n childrenRefs={clickAwayRefs}\n parentRef={rootRef}\n >\n <section className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n {(header || headerChildContent) && (\n <header\n {...headerChildProps}\n className={classNames(\n `${CLASSNAME}__header`,\n (forceHeaderDivider || hasTopIntersection) &&\n `${CLASSNAME}__header--has-divider`,\n headerChildProps?.className,\n )}\n >\n {header}\n {headerChildContent}\n </header>\n )}\n\n <div\n ref={mergeRefs(contentRef, localContentRef)}\n className={`${CLASSNAME}__content`}\n >\n <div\n className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n ref={setSentinelTop}\n />\n\n {content}\n\n <div\n className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n ref={setSentinelBottom}\n />\n </div>\n\n {(footer || footerChildContent) && (\n <footer\n {...footerChildProps}\n className={classNames(\n `${CLASSNAME}__footer`,\n (forceFooterDivider || hasBottomIntersection) &&\n `${CLASSNAME}__footer--has-divider`,\n footerChildProps?.className,\n )}\n >\n {footer}\n {footerChildContent}\n </footer>\n )}\n\n {isLoading && (\n <div className={`${CLASSNAME}__progress-overlay`}>\n <Progress variant={ProgressVariant.circular} />\n </div>\n )}\n </section>\n </ClickAwayProvider>\n </div>\n </ThemeProvider>\n </HeadingLevelProvider>\n </div>\n </Portal>\n ) : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","intersections","setIntersections","useState","Map","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","disableBodyScroll","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","preventCloseOnClick","preventCloseOnEscape","forwardedProps","previousOpen","React","useRef","current","focus","shouldPreventCloseOnEscape","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","headerChild","footerChild","content","useMemo","partitionMulti","Children","toArray","headerChildProps","headerChildContent","footerChildProps","footerChildContent","clickAwayRefs","rootRef","isVisible","useTransitionVisibility","DIALOG_TRANSITION_DURATION","shouldPreventCloseOnClickAway","_jsx","Portal","_jsxs","mergeRefs","classNames","handleBasicClasses","isHidden","isShown","prefix","style","HeadingLevelProvider","level","ThemeProvider","value","role","ClickAwayProvider","callback","childrenRefs","parentRef","Progress","variant","ProgressVariant","circular","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
2
|
-
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
-
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
-
import { Theme } from '@lumx/core/js/constants';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Component display name.
|
|
9
|
-
*/
|
|
10
|
-
const COMPONENT_NAME = 'Divider';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Component default class name and class prefix.
|
|
14
|
-
*/
|
|
15
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Component default props.
|
|
19
|
-
*/
|
|
20
|
-
const DEFAULT_PROPS = {};
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Divider component.
|
|
24
|
-
*
|
|
25
|
-
* @param props Component props.
|
|
26
|
-
* @param ref Component ref.
|
|
27
|
-
* @return React element.
|
|
28
|
-
*/
|
|
29
|
-
const Divider = forwardRef((props, ref) => {
|
|
30
|
-
const defaultTheme = useTheme() || Theme.light;
|
|
31
|
-
const {
|
|
32
|
-
className,
|
|
33
|
-
theme = defaultTheme,
|
|
34
|
-
...forwardedProps
|
|
35
|
-
} = props;
|
|
36
|
-
return /*#__PURE__*/jsx("hr", {
|
|
37
|
-
ref: ref,
|
|
38
|
-
...forwardedProps,
|
|
39
|
-
className: classNames(className, handleBasicClasses({
|
|
40
|
-
prefix: CLASSNAME,
|
|
41
|
-
theme
|
|
42
|
-
}))
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
Divider.displayName = COMPONENT_NAME;
|
|
46
|
-
Divider.className = CLASSNAME;
|
|
47
|
-
Divider.defaultProps = DEFAULT_PROPS;
|
|
48
|
-
|
|
49
|
-
export { Divider };
|
|
50
|
-
//# sourceMappingURL=divider-bdf11ba3.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"divider-bdf11ba3.js","sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface DividerProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Divider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DividerProps> = {};\n\n/**\n * Divider component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Divider = forwardRef<DividerProps, HTMLHRElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { className, theme = defaultTheme, ...forwardedProps } = props;\n\n return (\n <hr\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n />\n );\n});\nDivider.displayName = COMPONENT_NAME;\nDivider.className = CLASSNAME;\nDivider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Divider","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;;AAaA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAoC,GAAG,EAAE,CAAA;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,SAAS;AAAEC,IAAAA,KAAK,GAAGL,YAAY;IAAE,GAAGM,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAEpE,EAAA,oBACIS,GAAA,CAAA,IAAA,EAAA;AACIR,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLO,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEjB,SAAS;AAAEY,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GACtF,CAAC,CAAA;AAEV,CAAC,EAAC;AACFT,OAAO,CAACe,WAAW,GAAGnB,cAAc,CAAA;AACpCI,OAAO,CAACQ,SAAS,GAAGX,SAAS,CAAA;AAC7BG,OAAO,CAACgB,YAAY,GAAGjB,aAAa;;;;"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
2
|
-
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
-
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
-
import { I as Icon } from '../index-745f94ee.js';
|
|
6
|
-
import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
|
|
7
|
-
|
|
8
|
-
const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Component display name.
|
|
12
|
-
*/
|
|
13
|
-
const COMPONENT_NAME = 'DragHandle';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Component default class name and class prefix.
|
|
17
|
-
*/
|
|
18
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* DragHandle component.
|
|
22
|
-
*
|
|
23
|
-
* @param props Component props.
|
|
24
|
-
* @param ref Component ref.
|
|
25
|
-
* @return React element.
|
|
26
|
-
*/
|
|
27
|
-
const DragHandle = forwardRef((props, ref) => {
|
|
28
|
-
const defaultTheme = useTheme();
|
|
29
|
-
const {
|
|
30
|
-
className,
|
|
31
|
-
theme = defaultTheme,
|
|
32
|
-
...forwardedProps
|
|
33
|
-
} = props;
|
|
34
|
-
return /*#__PURE__*/jsx("div", {
|
|
35
|
-
ref: ref,
|
|
36
|
-
...forwardedProps,
|
|
37
|
-
className: classNames(className, handleBasicClasses({
|
|
38
|
-
prefix: CLASSNAME,
|
|
39
|
-
theme
|
|
40
|
-
})),
|
|
41
|
-
children: /*#__PURE__*/jsx(Icon, {
|
|
42
|
-
icon: mdiDragVertical,
|
|
43
|
-
color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
|
|
44
|
-
size: Size.xs
|
|
45
|
-
})
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
DragHandle.displayName = COMPONENT_NAME;
|
|
49
|
-
DragHandle.className = CLASSNAME;
|
|
50
|
-
|
|
51
|
-
export { DragHandle };
|
|
52
|
-
//# sourceMappingURL=drag-handle-45912fd3.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"drag-handle-45912fd3.js","sources":["../../../../lumx-icons/dist/esm/drag-vertical.js","../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["export const mdiDragVertical = /*#__PURE__*/ 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';","import classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const DragHandle = forwardRef<DragHandleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { className, theme = defaultTheme, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n >\n <Icon\n icon={mdiDragVertical}\n color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n size={Size.xs}\n />\n </div>\n );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["mdiDragVertical","COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","defaultTheme","useTheme","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","children","Icon","icon","color","Theme","dark","ColorPalette","light","size","Size","xs","displayName"],"mappings":";;;;;;;AAAO,MAAMA,eAAe,GAAiB,wHAAwH;;ACcrK;AACA;AACA;AACA,MAAMC,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAU,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClF,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,SAAS;AAAEC,IAAAA,KAAK,GAAGH,YAAY;IAAE,GAAGI,cAAAA;AAAe,GAAC,GAAGN,KAAK,CAAA;AAEpE,EAAA,oBACIO,GAAA,CAAA,KAAA,EAAA;AACIN,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLK,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAS;AAAES,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAM,QAAA,eAEnFJ,GAAA,CAACK,IAAI,EAAA;AACDC,MAAAA,IAAI,EAAEnB,eAAgB;AACtBoB,MAAAA,KAAK,EAAET,KAAK,KAAKU,KAAK,CAACC,IAAI,GAAGC,YAAY,CAACC,KAAK,GAAGD,YAAY,CAACD,IAAK;MACrEG,IAAI,EAAEC,IAAI,CAACC,EAAAA;KACd,CAAA;AAAC,GACD,CAAC,CAAA;AAEd,CAAC,EAAC;AACFvB,UAAU,CAACwB,WAAW,GAAG3B,cAAc,CAAA;AACvCG,UAAU,CAACM,SAAS,GAAGR,SAAS;;;;"}
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
import { useEffect, useRef, useMemo, cloneElement } from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
|
-
import { L as List } from '../List-b7882a99.js';
|
|
4
|
-
import { P as Popover } from '../index-68e1b0af.js';
|
|
5
|
-
import { i as isComponent } from '../isComponent-b9762ff1.js';
|
|
6
|
-
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
7
|
-
import { P as Placement } from '../constants-9b714e31.js';
|
|
8
|
-
import { jsx } from 'react/jsx-runtime';
|
|
9
|
-
|
|
10
|
-
// The error margin in px we want to have for triggering infinite scroll
|
|
11
|
-
const SCROLL_TRIGGER_MARGIN = 5;
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Listen to clicks away from a given element and callback the passed in function.
|
|
15
|
-
*
|
|
16
|
-
* @param ref A reference to the element on which you want to listen scroll event.
|
|
17
|
-
* @param [callback] A callback function to call when the bottom of the reference element is reached.
|
|
18
|
-
* @param [callbackOnMount] A callback function to call when the component is mounted.
|
|
19
|
-
*/
|
|
20
|
-
const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTriggerMargin = SCROLL_TRIGGER_MARGIN) => {
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
const {
|
|
23
|
-
current
|
|
24
|
-
} = ref;
|
|
25
|
-
if (!callback || !current) {
|
|
26
|
-
return undefined;
|
|
27
|
-
}
|
|
28
|
-
const isAtBottom = () => Boolean(current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin);
|
|
29
|
-
const onScroll = e => {
|
|
30
|
-
if (isAtBottom()) {
|
|
31
|
-
callback(e);
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
if (isAtBottom()) {
|
|
35
|
-
onScroll();
|
|
36
|
-
}
|
|
37
|
-
current.addEventListener('scroll', onScroll);
|
|
38
|
-
current.addEventListener('resize', onScroll);
|
|
39
|
-
return () => {
|
|
40
|
-
current.removeEventListener('scroll', onScroll);
|
|
41
|
-
current.removeEventListener('resize', onScroll);
|
|
42
|
-
};
|
|
43
|
-
}, [ref, callback, scrollTriggerMargin]);
|
|
44
|
-
useEffect(() => {
|
|
45
|
-
if (callback && callbackOnMount) {
|
|
46
|
-
callback();
|
|
47
|
-
}
|
|
48
|
-
}, [callback, callbackOnMount]);
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Component display name.
|
|
53
|
-
*/
|
|
54
|
-
const COMPONENT_NAME = 'Dropdown';
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Component default class name and class prefix.
|
|
58
|
-
*/
|
|
59
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Component default props.
|
|
63
|
-
*/
|
|
64
|
-
const DEFAULT_PROPS = {
|
|
65
|
-
closeOnClick: true,
|
|
66
|
-
closeOnClickAway: true,
|
|
67
|
-
closeOnEscape: true,
|
|
68
|
-
fitToAnchorWidth: true,
|
|
69
|
-
fitWithinViewportHeight: true,
|
|
70
|
-
placement: Placement.BOTTOM_START,
|
|
71
|
-
shouldFocusOnOpen: true,
|
|
72
|
-
focusAnchorOnClose: true
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Dropdown component.
|
|
77
|
-
*
|
|
78
|
-
* @param props Component props.
|
|
79
|
-
* @param ref Component ref.
|
|
80
|
-
* @return React element.
|
|
81
|
-
*/
|
|
82
|
-
const Dropdown = forwardRef((props, ref) => {
|
|
83
|
-
const {
|
|
84
|
-
anchorRef,
|
|
85
|
-
children,
|
|
86
|
-
className,
|
|
87
|
-
closeOnClick = DEFAULT_PROPS.closeOnClick,
|
|
88
|
-
closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
|
|
89
|
-
closeOnEscape = DEFAULT_PROPS.closeOnEscape,
|
|
90
|
-
fitToAnchorWidth = DEFAULT_PROPS.fitToAnchorWidth,
|
|
91
|
-
fitWithinViewportHeight = DEFAULT_PROPS.fitWithinViewportHeight,
|
|
92
|
-
isOpen,
|
|
93
|
-
offset,
|
|
94
|
-
focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,
|
|
95
|
-
onClose,
|
|
96
|
-
onInfiniteScroll,
|
|
97
|
-
placement = DEFAULT_PROPS.placement,
|
|
98
|
-
shouldFocusOnOpen = DEFAULT_PROPS.shouldFocusOnOpen,
|
|
99
|
-
zIndex,
|
|
100
|
-
...forwardedProps
|
|
101
|
-
} = props;
|
|
102
|
-
const innerRef = useRef(null);
|
|
103
|
-
const listElement = useRef(null);
|
|
104
|
-
useInfiniteScroll(innerRef, onInfiniteScroll);
|
|
105
|
-
const popperElement = useMemo(() => {
|
|
106
|
-
return !Array.isArray(children) && isComponent(List)(children) ? /*#__PURE__*/cloneElement(children, {
|
|
107
|
-
...children.props,
|
|
108
|
-
ref: listElement,
|
|
109
|
-
onClick(evt) {
|
|
110
|
-
children.props.onClick?.(evt);
|
|
111
|
-
if (closeOnClick) {
|
|
112
|
-
onClose?.();
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
isClickable: true
|
|
116
|
-
}) : children;
|
|
117
|
-
}, [children, closeOnClick, onClose]);
|
|
118
|
-
return isOpen ? /*#__PURE__*/jsx(Popover, {
|
|
119
|
-
ref: ref,
|
|
120
|
-
...forwardedProps,
|
|
121
|
-
focusAnchorOnClose: focusAnchorOnClose,
|
|
122
|
-
anchorRef: anchorRef,
|
|
123
|
-
className: classNames(className, CLASSNAME),
|
|
124
|
-
elevation: 0,
|
|
125
|
-
closeOnClickAway: closeOnClickAway,
|
|
126
|
-
closeOnEscape: closeOnEscape,
|
|
127
|
-
fitToAnchorWidth: fitToAnchorWidth,
|
|
128
|
-
fitWithinViewportHeight: fitWithinViewportHeight,
|
|
129
|
-
focusElement: shouldFocusOnOpen ? listElement : undefined,
|
|
130
|
-
isOpen: isOpen,
|
|
131
|
-
offset: offset,
|
|
132
|
-
onClose: onClose,
|
|
133
|
-
placement: placement,
|
|
134
|
-
zIndex: zIndex,
|
|
135
|
-
children: /*#__PURE__*/jsx("div", {
|
|
136
|
-
className: `${CLASSNAME}__menu`,
|
|
137
|
-
ref: innerRef,
|
|
138
|
-
children: popperElement
|
|
139
|
-
})
|
|
140
|
-
}) : null;
|
|
141
|
-
});
|
|
142
|
-
Dropdown.displayName = COMPONENT_NAME;
|
|
143
|
-
Dropdown.className = CLASSNAME;
|
|
144
|
-
Dropdown.defaultProps = DEFAULT_PROPS;
|
|
145
|
-
|
|
146
|
-
export { Dropdown };
|
|
147
|
-
//# sourceMappingURL=dropdown-0216211d.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-0216211d.js","sources":["../../../src/hooks/useInfiniteScroll.tsx","../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\ntype useInfiniteScrollType = (\n ref: React.RefObject<HTMLElement>,\n callback?: EventCallback,\n callbackOnMount?: boolean,\n) => void;\ntype EventCallback = (evt?: Event) => void;\n\n// The error margin in px we want to have for triggering infinite scroll\nconst SCROLL_TRIGGER_MARGIN = 5;\n\n/**\n * Listen to clicks away from a given element and callback the passed in function.\n *\n * @param ref A reference to the element on which you want to listen scroll event.\n * @param [callback] A callback function to call when the bottom of the reference element is reached.\n * @param [callbackOnMount] A callback function to call when the component is mounted.\n */\nexport const useInfiniteScroll: useInfiniteScrollType = (\n ref,\n callback,\n callbackOnMount = false,\n scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,\n) => {\n useEffect(() => {\n const { current } = ref;\n if (!callback || !current) {\n return undefined;\n }\n\n const isAtBottom = () =>\n Boolean(\n current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,\n );\n\n const onScroll = (e?: Event): void => {\n if (isAtBottom()) {\n callback(e);\n }\n };\n\n if (isAtBottom()) {\n onScroll();\n }\n\n current.addEventListener('scroll', onScroll);\n current.addEventListener('resize', onScroll);\n return () => {\n current.removeEventListener('scroll', onScroll);\n current.removeEventListener('resize', onScroll);\n };\n }, [ref, callback, scrollTriggerMargin]);\n\n useEffect(() => {\n if (callback && callbackOnMount) {\n callback();\n }\n }, [callback, callbackOnMount]);\n};\n","import { cloneElement, useMemo, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { List, ListProps } from '@lumx/react/components/list/List';\nimport { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';\nimport { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';\nimport { GenericProps, isComponent } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { Offset, Placement } from '@lumx/react/components/popover/constants';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface DropdownProps extends GenericProps {\n /**\n * Reference to the element around which the dropdown is placed.\n * @see {@link PopoverProps#anchorRef}\n */\n anchorRef: PopoverProps['anchorRef'];\n /** Dropdown content. */\n children: React.ReactNode;\n /**\n * Whether a click anywhere out of the Dropdown would close it or not.\n * @see {@link PopoverProps#closeOnClickAway}\n */\n closeOnClickAway?: boolean;\n /**\n * Whether to close the Dropdown when clicking in it or not.\n */\n closeOnClick?: boolean;\n /**\n * Whether an escape key press would close the Dropdown or not.\n * @see {@link PopoverProps#closeOnEscape}\n */\n closeOnEscape?: boolean;\n /**\n * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link PopoverProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: PopoverProps['fitToAnchorWidth'];\n /**\n * Whether the dropdown should shrink to fit within the viewport height or not.\n * @see {@link PopoverProps#fitWithinViewportHeight}\n */\n fitWithinViewportHeight?: boolean;\n /**\n * Whether the dropdown should be displayed or not. Useful to control the Dropdown from outside the component.\n * @see {@link PopoverProps#isOpen}\n */\n isOpen: boolean;\n /**\n * Offset applied to the Dropdown position.\n * @see {@link PopoverProps#offset}\n */\n offset?: Offset;\n /**\n * Preferred Dropdown placement against the anchor element.\n * @see {@link PopoverProps#placement}\n */\n placement?: Placement;\n /** Whether the focus should be set on the list when the dropdown is open or not. */\n shouldFocusOnOpen?: boolean;\n /** Whether the dropdown should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */\n usePortal?: boolean;\n /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */\n focusAnchorOnClose?: boolean;\n /**\n * Z-axis position.\n * @see {@link PopoverProps#zIndex}\n */\n zIndex?: number;\n /**\n * On close callback.\n * @see {@link PopoverProps#onClose}\n */\n onClose?(): void;\n /** On scroll end callback. */\n onInfiniteScroll?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dropdown';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DropdownProps> = {\n closeOnClick: true,\n closeOnClickAway: true,\n closeOnEscape: true,\n fitToAnchorWidth: true,\n fitWithinViewportHeight: true,\n placement: Placement.BOTTOM_START,\n shouldFocusOnOpen: true,\n focusAnchorOnClose: true,\n};\n\n/**\n * Dropdown component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) => {\n const {\n anchorRef,\n children,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth = DEFAULT_PROPS.fitToAnchorWidth,\n fitWithinViewportHeight = DEFAULT_PROPS.fitWithinViewportHeight,\n isOpen,\n offset,\n focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,\n onClose,\n onInfiniteScroll,\n placement = DEFAULT_PROPS.placement,\n shouldFocusOnOpen = DEFAULT_PROPS.shouldFocusOnOpen,\n zIndex,\n ...forwardedProps\n } = props;\n const innerRef = useRef<HTMLDivElement>(null);\n const listElement = useRef(null);\n\n useInfiniteScroll(innerRef, onInfiniteScroll);\n\n const popperElement = useMemo(() => {\n return !Array.isArray(children) && isComponent(List)(children)\n ? cloneElement<ListProps>(children, {\n ...children.props,\n ref: listElement,\n onClick(evt: MouseEvent) {\n children.props.onClick?.(evt);\n\n if (closeOnClick) {\n onClose?.();\n }\n },\n isClickable: true,\n })\n : children;\n }, [children, closeOnClick, onClose]);\n\n return isOpen ? (\n <Popover\n ref={ref}\n {...forwardedProps}\n focusAnchorOnClose={focusAnchorOnClose}\n anchorRef={anchorRef}\n className={classNames(className, CLASSNAME)}\n elevation={0 as any}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n fitToAnchorWidth={fitToAnchorWidth}\n fitWithinViewportHeight={fitWithinViewportHeight}\n focusElement={shouldFocusOnOpen ? listElement : undefined}\n isOpen={isOpen}\n offset={offset}\n onClose={onClose}\n placement={placement}\n zIndex={zIndex}\n >\n <div className={`${CLASSNAME}__menu`} ref={innerRef}>\n {popperElement}\n </div>\n </Popover>\n ) : null;\n});\nDropdown.displayName = COMPONENT_NAME;\nDropdown.className = CLASSNAME;\nDropdown.defaultProps = DEFAULT_PROPS;\n"],"names":["SCROLL_TRIGGER_MARGIN","useInfiniteScroll","ref","callback","callbackOnMount","scrollTriggerMargin","useEffect","current","undefined","isAtBottom","Boolean","scrollHeight","scrollTop","clientHeight","onScroll","e","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","closeOnClick","closeOnClickAway","closeOnEscape","fitToAnchorWidth","fitWithinViewportHeight","placement","Placement","BOTTOM_START","shouldFocusOnOpen","focusAnchorOnClose","Dropdown","forwardRef","props","anchorRef","children","className","isOpen","offset","onClose","onInfiniteScroll","zIndex","forwardedProps","innerRef","useRef","listElement","popperElement","useMemo","Array","isArray","isComponent","List","cloneElement","onClick","evt","isClickable","_jsx","Popover","classNames","elevation","focusElement","displayName","defaultProps"],"mappings":"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"}
|