@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.
Files changed (197) hide show
  1. package/index.js +14033 -63
  2. package/index.js.map +1 -1
  3. package/package.json +3 -3
  4. package/utils/index.js +158 -3
  5. package/utils/index.js.map +1 -1
  6. package/_internal/Button-5a87fee9.js +0 -97
  7. package/_internal/Button-5a87fee9.js.map +0 -1
  8. package/_internal/ButtonRoot-bf682215.js +0 -117
  9. package/_internal/ButtonRoot-bf682215.js.map +0 -1
  10. package/_internal/Chip-8d0aae06.js +0 -143
  11. package/_internal/Chip-8d0aae06.js.map +0 -1
  12. package/_internal/ClickAwayProvider-1204f237.js +0 -95
  13. package/_internal/ClickAwayProvider-1204f237.js.map +0 -1
  14. package/_internal/DisabledStateContext-ea04260d.js +0 -29
  15. package/_internal/DisabledStateContext-ea04260d.js.map +0 -1
  16. package/_internal/HeadingLevelProvider-ebdcb0c7.js +0 -61
  17. package/_internal/HeadingLevelProvider-ebdcb0c7.js.map +0 -1
  18. package/_internal/IconButton-351389b0.js +0 -77
  19. package/_internal/IconButton-351389b0.js.map +0 -1
  20. package/_internal/ImageCaption-4109b433.js +0 -75
  21. package/_internal/ImageCaption-4109b433.js.map +0 -1
  22. package/_internal/List-b7882a99.js +0 -817
  23. package/_internal/List-b7882a99.js.map +0 -1
  24. package/_internal/PopoverDialog-2e7b9ed5.js +0 -655
  25. package/_internal/PopoverDialog-2e7b9ed5.js.map +0 -1
  26. package/_internal/Portal-3f86608e.js +0 -45
  27. package/_internal/Portal-3f86608e.js.map +0 -1
  28. package/_internal/RawClickable-2c2b6a89.js +0 -52
  29. package/_internal/RawClickable-2c2b6a89.js.map +0 -1
  30. package/_internal/Slides-83646e84.js +0 -679
  31. package/_internal/Slides-83646e84.js.map +0 -1
  32. package/_internal/ThemeContext-3181f000.js +0 -14
  33. package/_internal/ThemeContext-3181f000.js.map +0 -1
  34. package/_internal/Thumbnail-741501a5.js +0 -314
  35. package/_internal/Thumbnail-741501a5.js.map +0 -1
  36. package/_internal/check-circle-de24f857.js +0 -4
  37. package/_internal/check-circle-de24f857.js.map +0 -1
  38. package/_internal/chevron-right-827b804a.js +0 -6
  39. package/_internal/chevron-right-827b804a.js.map +0 -1
  40. package/_internal/chevron-up-0b9c76cb.js +0 -6
  41. package/_internal/chevron-up-0b9c76cb.js.map +0 -1
  42. package/_internal/close-circle-ef5d1aac.js +0 -4
  43. package/_internal/close-circle-ef5d1aac.js.map +0 -1
  44. package/_internal/close-eaf6c45a.js +0 -4
  45. package/_internal/close-eaf6c45a.js.map +0 -1
  46. package/_internal/components/alert-dialog-5df4f133.js +0 -163
  47. package/_internal/components/alert-dialog-5df4f133.js.map +0 -1
  48. package/_internal/components/autocomplete-824c779e.js +0 -261
  49. package/_internal/components/autocomplete-824c779e.js.map +0 -1
  50. package/_internal/components/avatar-69b66f01.js +0 -83
  51. package/_internal/components/avatar-69b66f01.js.map +0 -1
  52. package/_internal/components/badge-63cd3b1c.js +0 -81
  53. package/_internal/components/badge-63cd3b1c.js.map +0 -1
  54. package/_internal/components/button-eebd4e00.js +0 -47
  55. package/_internal/components/button-eebd4e00.js.map +0 -1
  56. package/_internal/components/checkbox-54943a02.js +0 -143
  57. package/_internal/components/checkbox-54943a02.js.map +0 -1
  58. package/_internal/components/chip-9ad6b318.js +0 -102
  59. package/_internal/components/chip-9ad6b318.js.map +0 -1
  60. package/_internal/components/comment-block-55a4ab3c.js +0 -138
  61. package/_internal/components/comment-block-55a4ab3c.js.map +0 -1
  62. package/_internal/components/date-picker-a824a3ae.js +0 -2
  63. package/_internal/components/date-picker-a824a3ae.js.map +0 -1
  64. package/_internal/components/dialog-5e6320b8.js +0 -238
  65. package/_internal/components/dialog-5e6320b8.js.map +0 -1
  66. package/_internal/components/divider-bdf11ba3.js +0 -50
  67. package/_internal/components/divider-bdf11ba3.js.map +0 -1
  68. package/_internal/components/drag-handle-45912fd3.js +0 -52
  69. package/_internal/components/drag-handle-45912fd3.js.map +0 -1
  70. package/_internal/components/dropdown-0216211d.js +0 -147
  71. package/_internal/components/dropdown-0216211d.js.map +0 -1
  72. package/_internal/components/expansion-panel-3ce73c6b.js +0 -167
  73. package/_internal/components/expansion-panel-3ce73c6b.js.map +0 -1
  74. package/_internal/components/flag-1b177f78.js +0 -59
  75. package/_internal/components/flag-1b177f78.js.map +0 -1
  76. package/_internal/components/flex-box-93b97715.js +0 -56
  77. package/_internal/components/flex-box-93b97715.js.map +0 -1
  78. package/_internal/components/generic-block-925f7c5b.js +0 -128
  79. package/_internal/components/generic-block-925f7c5b.js.map +0 -1
  80. package/_internal/components/grid-95fd1493.js +0 -104
  81. package/_internal/components/grid-95fd1493.js.map +0 -1
  82. package/_internal/components/grid-column-43f28cfb.js +0 -58
  83. package/_internal/components/grid-column-43f28cfb.js.map +0 -1
  84. package/_internal/components/heading-45d6e78e.js +0 -53
  85. package/_internal/components/heading-45d6e78e.js.map +0 -1
  86. package/_internal/components/icon-79195151.js +0 -2
  87. package/_internal/components/icon-79195151.js.map +0 -1
  88. package/_internal/components/image-block-aba6d2db.js +0 -110
  89. package/_internal/components/image-block-aba6d2db.js.map +0 -1
  90. package/_internal/components/image-lightbox-8b8e77c2.js +0 -759
  91. package/_internal/components/image-lightbox-8b8e77c2.js.map +0 -1
  92. package/_internal/components/inline-list-dfb9fd34.js +0 -74
  93. package/_internal/components/inline-list-dfb9fd34.js.map +0 -1
  94. package/_internal/components/input-helper-c8a0078b.js +0 -71
  95. package/_internal/components/input-helper-c8a0078b.js.map +0 -1
  96. package/_internal/components/input-label-9711398b.js +0 -59
  97. package/_internal/components/input-label-9711398b.js.map +0 -1
  98. package/_internal/components/lightbox-894abe64.js +0 -155
  99. package/_internal/components/lightbox-894abe64.js.map +0 -1
  100. package/_internal/components/link-e70e64ed.js +0 -72
  101. package/_internal/components/link-e70e64ed.js.map +0 -1
  102. package/_internal/components/link-preview-e56f3570.js +0 -117
  103. package/_internal/components/link-preview-e56f3570.js.map +0 -1
  104. package/_internal/components/list-59b7ce56.js +0 -71
  105. package/_internal/components/list-59b7ce56.js.map +0 -1
  106. package/_internal/components/message-a255dfd3.js +0 -98
  107. package/_internal/components/message-a255dfd3.js.map +0 -1
  108. package/_internal/components/mosaic-192f2270.js +0 -94
  109. package/_internal/components/mosaic-192f2270.js.map +0 -1
  110. package/_internal/components/navigation-dfe8aac0.js +0 -225
  111. package/_internal/components/navigation-dfe8aac0.js.map +0 -1
  112. package/_internal/components/notification-10f289b5.js +0 -143
  113. package/_internal/components/notification-10f289b5.js.map +0 -1
  114. package/_internal/components/popover-6c7f745b.js +0 -3
  115. package/_internal/components/popover-6c7f745b.js.map +0 -1
  116. package/_internal/components/post-block-f7dcc6e9.js +0 -109
  117. package/_internal/components/post-block-f7dcc6e9.js.map +0 -1
  118. package/_internal/components/progress-7a05fb0c.js +0 -182
  119. package/_internal/components/progress-7a05fb0c.js.map +0 -1
  120. package/_internal/components/progress-tracker-48876add.js +0 -309
  121. package/_internal/components/progress-tracker-48876add.js.map +0 -1
  122. package/_internal/components/radio-button-07cf45e9.js +0 -149
  123. package/_internal/components/radio-button-07cf45e9.js.map +0 -1
  124. package/_internal/components/select-8b54a444.js +0 -457
  125. package/_internal/components/select-8b54a444.js.map +0 -1
  126. package/_internal/components/side-navigation-7eeed3b4.js +0 -164
  127. package/_internal/components/side-navigation-7eeed3b4.js.map +0 -1
  128. package/_internal/components/skeleton-a4e84085.js +0 -166
  129. package/_internal/components/skeleton-a4e84085.js.map +0 -1
  130. package/_internal/components/slider-5d64b470.js +0 -311
  131. package/_internal/components/slider-5d64b470.js.map +0 -1
  132. package/_internal/components/slideshow-bce65cf6.js +0 -151
  133. package/_internal/components/slideshow-bce65cf6.js.map +0 -1
  134. package/_internal/components/switch-7ae55d89.js +0 -121
  135. package/_internal/components/switch-7ae55d89.js.map +0 -1
  136. package/_internal/components/table-5bdf4aec.js +0 -297
  137. package/_internal/components/table-5bdf4aec.js.map +0 -1
  138. package/_internal/components/tabs-2ad54592.js +0 -298
  139. package/_internal/components/tabs-2ad54592.js.map +0 -1
  140. package/_internal/components/text-09c81111.js +0 -2
  141. package/_internal/components/text-09c81111.js.map +0 -1
  142. package/_internal/components/text-field-3e1030f0.js +0 -359
  143. package/_internal/components/text-field-3e1030f0.js.map +0 -1
  144. package/_internal/components/thumbnail-1c5828b9.js +0 -42
  145. package/_internal/components/thumbnail-1c5828b9.js.map +0 -1
  146. package/_internal/components/toolbar-0d14efb7.js +0 -61
  147. package/_internal/components/toolbar-0d14efb7.js.map +0 -1
  148. package/_internal/components/tooltip-31181a24.js +0 -327
  149. package/_internal/components/tooltip-31181a24.js.map +0 -1
  150. package/_internal/components/uploader-845b2412.js +0 -153
  151. package/_internal/components/uploader-845b2412.js.map +0 -1
  152. package/_internal/components/user-block-91c30797.js +0 -144
  153. package/_internal/components/user-block-91c30797.js.map +0 -1
  154. package/_internal/constants-9b714e31.js +0 -2167
  155. package/_internal/constants-9b714e31.js.map +0 -1
  156. package/_internal/constants-d0e3f49e.js +0 -24
  157. package/_internal/constants-d0e3f49e.js.map +0 -1
  158. package/_internal/context-9d1336a1.js +0 -19
  159. package/_internal/context-9d1336a1.js.map +0 -1
  160. package/_internal/forwardRef-d0e90329.js +0 -82
  161. package/_internal/forwardRef-d0e90329.js.map +0 -1
  162. package/_internal/getFocusableElements-230173a8.js +0 -13
  163. package/_internal/getFocusableElements-230173a8.js.map +0 -1
  164. package/_internal/index-68e1b0af.js +0 -436
  165. package/_internal/index-68e1b0af.js.map +0 -1
  166. package/_internal/index-745f94ee.js +0 -103
  167. package/_internal/index-745f94ee.js.map +0 -1
  168. package/_internal/index-ab520e78.js +0 -117
  169. package/_internal/index-ab520e78.js.map +0 -1
  170. package/_internal/information-49bbeed3.js +0 -6
  171. package/_internal/information-49bbeed3.js.map +0 -1
  172. package/_internal/isComponent-b9762ff1.js +0 -18
  173. package/_internal/isComponent-b9762ff1.js.map +0 -1
  174. package/_internal/isComponentType-e806b848.js +0 -9
  175. package/_internal/isComponentType-e806b848.js.map +0 -1
  176. package/_internal/mergeRefs-f0d7d6ea.js +0 -30
  177. package/_internal/mergeRefs-f0d7d6ea.js.map +0 -1
  178. package/_internal/state-db358714.js +0 -130
  179. package/_internal/state-db358714.js.map +0 -1
  180. package/_internal/useBooleanState-2a3d237c.js +0 -12
  181. package/_internal/useBooleanState-2a3d237c.js.map +0 -1
  182. package/_internal/useCallbackOnEscape-0b220f9c.js +0 -62
  183. package/_internal/useCallbackOnEscape-0b220f9c.js.map +0 -1
  184. package/_internal/useDisableBodyScroll-36bd7352.js +0 -219
  185. package/_internal/useDisableBodyScroll-36bd7352.js.map +0 -1
  186. package/_internal/useDisableStateProps-69e16b7c.js +0 -36
  187. package/_internal/useDisableStateProps-69e16b7c.js.map +0 -1
  188. package/_internal/useFocusTrap-3114e5e8.js +0 -112
  189. package/_internal/useFocusTrap-3114e5e8.js.map +0 -1
  190. package/_internal/useId-3a1facc0.js +0 -18
  191. package/_internal/useId-3a1facc0.js.map +0 -1
  192. package/_internal/useRovingTabIndex-7daf0f24.js +0 -77
  193. package/_internal/useRovingTabIndex-7daf0f24.js.map +0 -1
  194. package/_internal/useTransitionVisibility-321fdbfa.js +0 -50
  195. package/_internal/useTransitionVisibility-321fdbfa.js.map +0 -1
  196. package/_internal/wrapChildrenIconWithSpaces-e6038f72.js +0 -20
  197. 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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"}