@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,311 +0,0 @@
1
- import React__default, { useMemo, useRef } from 'react';
2
- import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
3
- import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
4
- import { u as useId } from '../useId-3a1facc0.js';
5
- import { u as useTheme } from '../ThemeContext-3181f000.js';
6
- import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
7
- import { jsxs, jsx } from 'react/jsx-runtime';
8
- import { Theme } from '@lumx/core/js/constants';
9
- import { InputLabel } from './input-label-9711398b.js';
10
- import { InputHelper } from './input-helper-c8a0078b.js';
11
-
12
- const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
13
-
14
- /**
15
- * https://github.com/facebook/react/issues/14099#issuecomment-440013892
16
- *
17
- * @param fn A function to run
18
- * @return A React callback
19
- */
20
- function useEventCallback(fn) {
21
- const ref = React__default.useRef(fn);
22
- useEnhancedEffect(() => {
23
- ref.current = fn;
24
- });
25
- return React__default.useCallback(event => ref.current(event), []);
26
- }
27
-
28
- /**
29
- * Clamp value in range.
30
- *
31
- * @param value Value to clamp.
32
- * @param min Minimum value.
33
- * @param max Maximum value.
34
- * @return Clamped value.
35
- */
36
- const clamp = (value, min, max) => {
37
- if (value < min) {
38
- return min;
39
- }
40
- if (value > max) {
41
- return max;
42
- }
43
- return value;
44
- };
45
-
46
- /* eslint-disable jsx-a11y/no-static-element-interactions */
47
- /**
48
- * Component display name.
49
- */
50
- const COMPONENT_NAME = 'Slider';
51
-
52
- /**
53
- * Component default class name and class prefix.
54
- */
55
- const CLASSNAME = getRootClassName(COMPONENT_NAME);
56
-
57
- /**
58
- * Component default props.
59
- */
60
- const DEFAULT_PROPS = {
61
- precision: 0,
62
- steps: 0
63
- };
64
-
65
- /**
66
- * Convert a percent value to a value in range min - max.
67
- *
68
- * @param percent Value to convert.
69
- * @param min Minimum value.
70
- * @param max Maximum value.
71
- * @param precision Precision.
72
- * @return Value in range min - max
73
- */
74
- const computeValueFromPercent = (percent, min, max, precision = 0) => Number((min + percent * (max - min)).toFixed(precision));
75
-
76
- /**
77
- * Convert a value in range min - max to a percent value.
78
- *
79
- * @param value Value to convert.
80
- * @param min Minimum value.
81
- * @param max Maximum value.
82
- * @return Value in percent
83
- */
84
- const computePercentFromValue = (value, min, max) => Number((value - min) / (max - min));
85
-
86
- /**
87
- * Slider component.
88
- *
89
- * @param props Component props.
90
- * @param ref Component ref.
91
- * @return React element.
92
- */
93
- const Slider = forwardRef((props, ref) => {
94
- const {
95
- isAnyDisabled,
96
- disabledStateProps,
97
- otherProps
98
- } = useDisableStateProps(props);
99
- const defaultTheme = useTheme() || Theme.light;
100
- const {
101
- className,
102
- helper,
103
- hideMinMaxLabel,
104
- id,
105
- label,
106
- max,
107
- min,
108
- name,
109
- onChange,
110
- onMouseDown,
111
- precision = DEFAULT_PROPS.precision,
112
- steps = DEFAULT_PROPS.steps,
113
- theme = defaultTheme,
114
- value,
115
- ...forwardedProps
116
- } = otherProps;
117
- const generatedId = useId();
118
- const sliderId = id || generatedId;
119
- const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
120
- const sliderRef = useRef(null);
121
-
122
- // build a lookup array for the steps.
123
- const availableSteps = useMemo(() => {
124
- if (!steps) return [];
125
- const available = [0];
126
- const percentStep = 1 / ((max - min) / steps);
127
- let ptr = 0;
128
- while (ptr + percentStep < 1) {
129
- ptr += percentStep;
130
- available.push(ptr);
131
- }
132
- return available;
133
- }, [steps, min, max]);
134
-
135
- /**
136
- * Try to find the closest step to the current slider position.
137
- *
138
- * @param percentValue Reference value
139
- * @return The closest step value
140
- */
141
- const findClosestStep = percentValue => {
142
- const closest = availableSteps.reduce((acc, step) => {
143
- const aDst = Math.abs(percentValue - step);
144
- if (aDst < acc.dst) {
145
- return {
146
- dst: aDst,
147
- val: step
148
- };
149
- }
150
- return acc;
151
- }, {
152
- dst: Infinity,
153
- val: -1
154
- });
155
- return closest.val;
156
- };
157
-
158
- /**
159
- * Convert slider's handle position to percent.
160
- *
161
- * @param event The interaction event
162
- * @param slider the slider element
163
- * @return The computed percent value
164
- */
165
- const getPercentValue = (event, slider) => {
166
- const {
167
- width,
168
- left
169
- } = slider.getBoundingClientRect();
170
- let percent = (event.pageX - left - window.pageXOffset) / width;
171
- percent = clamp(percent, 0, 1);
172
- if (steps) {
173
- percent = findClosestStep(percent);
174
- }
175
- return percent;
176
- };
177
-
178
- /**
179
- * Register a handler for the mouse move event.
180
- */
181
- const handleMove = useEventCallback(event => {
182
- const {
183
- current: slider
184
- } = sliderRef;
185
- if (!slider || !onChange) return;
186
- const newValue = getPercentValue(event, slider);
187
- onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
188
- });
189
-
190
- /**
191
- * Register a handler for the mouse up event.
192
- * Clean a all listeners.
193
- */
194
- const handleEnd = useEventCallback(() => {
195
- document.body.removeEventListener('mousemove', handleMove);
196
- document.body.removeEventListener('mouseup', handleEnd);
197
- document.body.removeEventListener('touchmove', handleMove);
198
- document.body.removeEventListener('touchend', handleEnd);
199
- });
200
-
201
- /**
202
- * Move to the next or previous value (i.e. + or - 10%) or next step
203
- * @param previous Should seek the previous value.
204
- */
205
- const hopToValue = (previous = false) => {
206
- const oldPercent = computePercentFromValue(value, min, max);
207
- let percent = clamp(oldPercent + (previous ? -0.1 : 0.1), 0, 1);
208
- if (steps) {
209
- percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);
210
- percent = findClosestStep(percent);
211
- }
212
- if (onChange) {
213
- onChange(computeValueFromPercent(percent, min, max, precision), name);
214
- }
215
- };
216
-
217
- /**
218
- * Register a handler for keyboard interactions
219
- */
220
- const handleKeyDown = useEventCallback(event => {
221
- if (event.key === 'ArrowRight') {
222
- hopToValue();
223
- } else if (event.key === 'ArrowLeft') {
224
- hopToValue(true);
225
- }
226
- });
227
-
228
- /**
229
- * Register a handler for the mouseDown event.
230
- */
231
- const handleMouseDown = useEventCallback(event => {
232
- onMouseDown?.(event);
233
- const {
234
- current: slider
235
- } = sliderRef;
236
- if (isAnyDisabled || !slider) return;
237
- const newValue = getPercentValue(event, slider);
238
- if (onChange) {
239
- onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
240
- }
241
- document.body.addEventListener('mousemove', handleMove);
242
- document.body.addEventListener('mouseup', handleEnd);
243
- });
244
- const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
245
- return /*#__PURE__*/jsxs("div", {
246
- ref: ref,
247
- ...forwardedProps,
248
- className: classNames(className, handleBasicClasses({
249
- prefix: CLASSNAME,
250
- theme,
251
- hasLabel: Boolean(label)
252
- })),
253
- onMouseDown: handleMouseDown,
254
- children: [label && /*#__PURE__*/jsx(InputLabel, {
255
- id: sliderLabelId,
256
- htmlFor: sliderId,
257
- className: `${CLASSNAME}__label`,
258
- theme: theme,
259
- children: label
260
- }), helper && /*#__PURE__*/jsx(InputHelper, {
261
- className: `${CLASSNAME}__helper`,
262
- theme: theme,
263
- children: helper
264
- }), /*#__PURE__*/jsxs("div", {
265
- className: `${CLASSNAME}__ui-wrapper`,
266
- children: [!hideMinMaxLabel && /*#__PURE__*/jsx("span", {
267
- className: `${CLASSNAME}__value-label ${CLASSNAME}__value-label--min`,
268
- children: min
269
- }), /*#__PURE__*/jsxs("div", {
270
- className: `${CLASSNAME}__wrapper`,
271
- ref: sliderRef,
272
- children: [/*#__PURE__*/jsx("div", {
273
- className: `${CLASSNAME}__track ${CLASSNAME}__track--background`
274
- }), /*#__PURE__*/jsx("div", {
275
- className: `${CLASSNAME}__track ${CLASSNAME}__track--active`,
276
- style: {
277
- width: percentString
278
- }
279
- }), steps ? /*#__PURE__*/jsx("div", {
280
- className: `${CLASSNAME}__ticks`,
281
- children: availableSteps.map((step, idx) => /*#__PURE__*/jsx("div", {
282
- className: `${CLASSNAME}__tick`,
283
- style: {
284
- left: `${step * 100}%`
285
- }
286
- }, `tick_${idx}`))
287
- }) : null, /*#__PURE__*/jsx("button", {
288
- type: "button",
289
- "aria-labelledby": sliderLabelId,
290
- name: name,
291
- id: sliderId,
292
- className: `${CLASSNAME}__handle`,
293
- style: {
294
- left: percentString
295
- },
296
- onKeyDown: isAnyDisabled ? undefined : handleKeyDown,
297
- ...disabledStateProps
298
- })]
299
- }), !hideMinMaxLabel && /*#__PURE__*/jsx("span", {
300
- className: `${CLASSNAME}__value-label ${CLASSNAME}__value-label--max`,
301
- children: max
302
- })]
303
- })]
304
- });
305
- });
306
- Slider.displayName = COMPONENT_NAME;
307
- Slider.className = CLASSNAME;
308
- Slider.defaultProps = DEFAULT_PROPS;
309
-
310
- export { Slider, clamp };
311
- //# sourceMappingURL=slider-5d64b470.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"slider-5d64b470.js","sources":["../../../src/hooks/useEventCallback.tsx","../../../src/utils/number/clamp.ts","../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n *\n * @param fn A function to run\n * @return A React callback\n */\nexport default function useEventCallback(fn: (...args: any[]) => any): (event: any) => any {\n const ref = React.useRef(fn);\n useEnhancedEffect(() => {\n ref.current = fn;\n });\n return React.useCallback((event: any) => ref.current(event), []);\n}\n","/**\n * Clamp value in range.\n *\n * @param value Value to clamp.\n * @param min Minimum value.\n * @param max Maximum value.\n * @return Clamped value.\n */\nexport const clamp = (value: number, min: number, max: number): number => {\n if (value < min) {\n return min;\n }\n if (value > max) {\n return max;\n }\n return value;\n};\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { SyntheticEvent, useMemo, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { InputHelper, InputLabel, Theme } from '@lumx/react';\nimport useEventCallback from '@lumx/react/hooks/useEventCallback';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { clamp } from '@lumx/react/utils/number/clamp';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface SliderProps extends GenericProps, HasTheme {\n /** Helper text. */\n helper?: string;\n /** Whether the min and max labels should be hidden or not. */\n hideMinMaxLabel?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: string;\n /** Maximum value on the range. */\n max: number;\n /** Minimum value of the range. */\n min: number;\n /** Native input name property. */\n name?: string;\n /** Number of digits in the fractional part of the selected value. */\n precision?: number;\n /** Range step value. */\n steps?: number;\n /** Selected ranged value. */\n value: number;\n /** On change callback. */\n onChange(value: number, name?: string, event?: SyntheticEvent): void;\n /** On click callback. */\n onMouseDown?(event: React.SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Slider';\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<SliderProps> = {\n precision: 0,\n steps: 0,\n};\n\n/**\n * Convert a percent value to a value in range min - max.\n *\n * @param percent Value to convert.\n * @param min Minimum value.\n * @param max Maximum value.\n * @param precision Precision.\n * @return Value in range min - max\n */\nconst computeValueFromPercent = (percent: number, min: number, max: number, precision = 0): number =>\n Number((min + percent * (max - min)).toFixed(precision));\n\n/**\n * Convert a value in range min - max to a percent value.\n *\n * @param value Value to convert.\n * @param min Minimum value.\n * @param max Maximum value.\n * @return Value in percent\n */\nconst computePercentFromValue = (value: number, min: number, max: number): number =>\n Number((value - min) / (max - min));\n\n/**\n * Slider component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n className,\n helper,\n hideMinMaxLabel,\n id,\n label,\n max,\n min,\n name,\n onChange,\n onMouseDown,\n precision = DEFAULT_PROPS.precision,\n steps = DEFAULT_PROPS.steps,\n theme = defaultTheme,\n value,\n ...forwardedProps\n } = otherProps;\n const generatedId = useId();\n const sliderId = id || generatedId;\n const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);\n const sliderRef = useRef<HTMLDivElement>(null);\n\n // build a lookup array for the steps.\n const availableSteps = useMemo((): number[] => {\n if (!steps) return [];\n\n const available = [0];\n const percentStep = 1 / ((max - min) / steps);\n let ptr = 0;\n while (ptr + percentStep < 1) {\n ptr += percentStep;\n available.push(ptr);\n }\n return available;\n }, [steps, min, max]);\n\n /**\n * Try to find the closest step to the current slider position.\n *\n * @param percentValue Reference value\n * @return The closest step value\n */\n const findClosestStep = (percentValue: number): number => {\n const closest = availableSteps.reduce(\n (acc, step) => {\n const aDst = Math.abs(percentValue - step);\n if (aDst < acc.dst) {\n return { dst: aDst, val: step };\n }\n return acc;\n },\n { dst: Infinity, val: -1 },\n );\n return closest.val;\n };\n\n /**\n * Convert slider's handle position to percent.\n *\n * @param event The interaction event\n * @param slider the slider element\n * @return The computed percent value\n */\n const getPercentValue = (event: React.MouseEvent, slider: HTMLDivElement): number => {\n const { width, left } = slider.getBoundingClientRect();\n let percent = (event.pageX - left - window.pageXOffset) / width;\n percent = clamp(percent, 0, 1);\n if (steps) {\n percent = findClosestStep(percent);\n }\n return percent;\n };\n\n /**\n * Register a handler for the mouse move event.\n */\n const handleMove = useEventCallback((event: React.MouseEvent) => {\n const { current: slider } = sliderRef;\n if (!slider || !onChange) return;\n const newValue = getPercentValue(event, slider);\n onChange(computeValueFromPercent(newValue, min, max, precision), name, event);\n });\n\n /**\n * Register a handler for the mouse up event.\n * Clean a all listeners.\n */\n const handleEnd = useEventCallback(() => {\n document.body.removeEventListener('mousemove', handleMove);\n document.body.removeEventListener('mouseup', handleEnd);\n document.body.removeEventListener('touchmove', handleMove);\n document.body.removeEventListener('touchend', handleEnd);\n });\n\n /**\n * Move to the next or previous value (i.e. + or - 10%) or next step\n * @param previous Should seek the previous value.\n */\n const hopToValue = (previous = false) => {\n const oldPercent = computePercentFromValue(value, min, max);\n let percent = clamp(oldPercent + (previous ? -0.1 : 0.1), 0, 1);\n if (steps) {\n percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);\n percent = findClosestStep(percent);\n }\n if (onChange) {\n onChange(computeValueFromPercent(percent, min, max, precision), name);\n }\n };\n\n /**\n * Register a handler for keyboard interactions\n */\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent) => {\n if (event.key === 'ArrowRight') {\n hopToValue();\n } else if (event.key === 'ArrowLeft') {\n hopToValue(true);\n }\n });\n\n /**\n * Register a handler for the mouseDown event.\n */\n const handleMouseDown = useEventCallback((event: React.MouseEvent) => {\n onMouseDown?.(event);\n\n const { current: slider } = sliderRef;\n if (isAnyDisabled || !slider) return;\n const newValue = getPercentValue(event, slider);\n if (onChange) {\n onChange(computeValueFromPercent(newValue, min, max, precision), name, event);\n }\n\n document.body.addEventListener('mousemove', handleMove);\n document.body.addEventListener('mouseup', handleEnd);\n });\n\n const percentString = `${computePercentFromValue(value, min, max) * 100}%`;\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, theme, hasLabel: Boolean(label) }),\n )}\n onMouseDown={handleMouseDown}\n >\n {label && (\n <InputLabel id={sliderLabelId} htmlFor={sliderId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n\n <div className={`${CLASSNAME}__ui-wrapper`}>\n {!hideMinMaxLabel && (\n <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--min`}>{min}</span>\n )}\n <div className={`${CLASSNAME}__wrapper`} ref={sliderRef}>\n <div className={`${CLASSNAME}__track ${CLASSNAME}__track--background`} />\n <div\n className={`${CLASSNAME}__track ${CLASSNAME}__track--active`}\n style={{ width: percentString }}\n />\n {steps ? (\n <div className={`${CLASSNAME}__ticks`}>\n {availableSteps.map((step, idx) => (\n <div\n key={`tick_${idx}`}\n className={`${CLASSNAME}__tick`}\n style={{ left: `${step * 100}%` }}\n />\n ))}\n </div>\n ) : null}\n <button\n type=\"button\"\n aria-labelledby={sliderLabelId}\n name={name}\n id={sliderId}\n className={`${CLASSNAME}__handle`}\n style={{ left: percentString }}\n onKeyDown={isAnyDisabled ? undefined : handleKeyDown}\n {...disabledStateProps}\n />\n </div>\n {!hideMinMaxLabel && (\n <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--max`}>{max}</span>\n )}\n </div>\n </div>\n );\n});\nSlider.displayName = COMPONENT_NAME;\nSlider.className = CLASSNAME;\nSlider.defaultProps = DEFAULT_PROPS;\n"],"names":["useEnhancedEffect","window","React","useLayoutEffect","useEffect","useEventCallback","fn","ref","useRef","current","useCallback","event","clamp","value","min","max","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","precision","steps","computeValueFromPercent","percent","Number","toFixed","computePercentFromValue","Slider","forwardRef","props","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","helper","hideMinMaxLabel","id","label","name","onChange","onMouseDown","theme","forwardedProps","generatedId","useId","sliderId","sliderLabelId","useMemo","sliderRef","availableSteps","available","percentStep","ptr","push","findClosestStep","percentValue","closest","reduce","acc","step","aDst","Math","abs","dst","val","Infinity","getPercentValue","slider","width","left","getBoundingClientRect","pageX","pageXOffset","handleMove","newValue","handleEnd","document","body","removeEventListener","hopToValue","previous","oldPercent","handleKeyDown","key","handleMouseDown","addEventListener","percentString","_jsxs","classNames","handleBasicClasses","prefix","hasLabel","Boolean","children","_jsx","InputLabel","htmlFor","InputHelper","style","map","idx","type","onKeyDown","undefined","displayName","defaultProps"],"mappings":"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"}
@@ -1,151 +0,0 @@
1
- import React__default, { useEffect } from 'react';
2
- import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from '../Slides-83646e84.js';
3
- export { S as SlideshowItem } from '../Slides-83646e84.js';
4
- import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
5
- import { u as useTheme } from '../ThemeContext-3181f000.js';
6
- import { f as forwardRef } from '../forwardRef-d0e90329.js';
7
- import { jsx } from 'react/jsx-runtime';
8
- import { Theme } from '@lumx/core/js/constants';
9
-
10
- /**
11
- * Hook that allows to control when there is a focus event within a given element, meaning
12
- * that any element within the given target will trigger the focus in and focus out events.
13
- * @param options - UseFocusWithinOptions
14
- */
15
- const useFocusWithin = ({
16
- element,
17
- onFocusIn,
18
- onFocusOut
19
- }) => {
20
- useEffect(() => {
21
- if (element) {
22
- element.addEventListener('focusin', onFocusIn);
23
- element.addEventListener('focusout', onFocusOut);
24
- }
25
- return () => {
26
- if (element) {
27
- element.removeEventListener('focusin', onFocusIn);
28
- element.removeEventListener('focusout', onFocusOut);
29
- }
30
- };
31
- }, [onFocusIn, element, onFocusOut]);
32
- };
33
-
34
- /**
35
- * Component default props.
36
- */
37
- const DEFAULT_PROPS = DEFAULT_OPTIONS;
38
-
39
- /**
40
- * Slideshow component.
41
- *
42
- * @param props Component props.
43
- * @param ref Component ref.
44
- * @return React element.
45
- */
46
- const Slideshow = forwardRef((props, ref) => {
47
- const defaultTheme = useTheme() || Theme.light;
48
- const {
49
- activeIndex,
50
- autoPlay = DEFAULT_PROPS.autoPlay,
51
- children,
52
- className,
53
- fillHeight,
54
- groupBy = DEFAULT_OPTIONS.groupBy,
55
- interval = DEFAULT_PROPS.interval,
56
- onChange,
57
- slideshowControlsProps,
58
- theme = defaultTheme,
59
- id,
60
- slidesId,
61
- slideGroupLabel,
62
- ...forwardedProps
63
- } = props;
64
- // Number of slideshow items.
65
- const itemsCount = React__default.Children.count(children);
66
- const {
67
- activeIndex: currentIndex,
68
- slideshowId,
69
- setSlideshow,
70
- isAutoPlaying,
71
- slideshowSlidesId,
72
- slidesCount,
73
- onNextClick,
74
- onPaginationClick,
75
- onPreviousClick,
76
- slideshow,
77
- stopAutoPlay,
78
- startAutoPlay,
79
- toggleAutoPlay,
80
- toggleForcePause
81
- } = SlideshowControls.useSlideshowControls({
82
- activeIndex,
83
- defaultActiveIndex: DEFAULT_PROPS.activeIndex,
84
- autoPlay: Boolean(autoPlay),
85
- itemsCount,
86
- groupBy,
87
- id,
88
- interval,
89
- onChange,
90
- slidesId
91
- });
92
- useFocusWithin({
93
- element: slideshow,
94
- onFocusIn: stopAutoPlay,
95
- onFocusOut: startAutoPlay
96
- });
97
- const showControls = slideshowControlsProps && slidesCount > 1;
98
- return /*#__PURE__*/jsx(Slides, {
99
- activeIndex: currentIndex,
100
- id: slideshowId,
101
- className: className,
102
- theme: theme,
103
- fillHeight: fillHeight,
104
- groupBy: groupBy,
105
- isAutoPlaying: isAutoPlaying,
106
- autoPlay: autoPlay,
107
- slidesId: slideshowSlidesId,
108
- toggleAutoPlay: toggleAutoPlay,
109
- ref: mergeRefs(ref, setSlideshow),
110
- hasControls: showControls,
111
- slideGroupLabel: slideGroupLabel,
112
- afterSlides: slideshowControlsProps && slidesCount > 1 ? /*#__PURE__*/jsx("div", {
113
- className: `${Slides.className}__controls`,
114
- children: /*#__PURE__*/jsx(SlideshowControls, {
115
- ...slideshowControlsProps,
116
- activeIndex: currentIndex,
117
- onPaginationClick: onPaginationClick,
118
- onNextClick: onNextClick,
119
- onPreviousClick: onPreviousClick,
120
- slidesCount: slidesCount,
121
- parentRef: slideshow,
122
- theme: theme,
123
- isAutoPlaying: isAutoPlaying,
124
- nextButtonProps: {
125
- 'aria-controls': slideshowSlidesId,
126
- ...slideshowControlsProps.nextButtonProps
127
- },
128
- previousButtonProps: {
129
- 'aria-controls': slideshowSlidesId,
130
- ...slideshowControlsProps.previousButtonProps
131
- },
132
- playButtonProps: autoPlay ? {
133
- 'aria-controls': slideshowSlidesId,
134
- onClick: toggleForcePause,
135
- ...slideshowControlsProps.playButtonProps
136
- } : undefined,
137
- paginationItemProps: index => ({
138
- 'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),
139
- ...slideshowControlsProps.paginationItemProps?.(index)
140
- })
141
- })
142
- }) : undefined,
143
- ...forwardedProps,
144
- children: children
145
- });
146
- });
147
- Slideshow.displayName = 'Slideshow';
148
- Slideshow.defaultProps = DEFAULT_PROPS;
149
-
150
- export { Slides, Slideshow, SlideshowControls };
151
- //# sourceMappingURL=slideshow-bce65cf6.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"slideshow-bce65cf6.js","sources":["../../../src/hooks/useFocusWithin.ts","../../../src/components/slideshow/Slideshow.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n /** element to add the focus within to */\n element: HTMLElement | null;\n /** callback to be executed on focus in */\n onFocusIn: (ev: FocusEvent) => void;\n /** callback to be executed on focus out */\n onFocusOut: (ev: FocusEvent) => void;\n}\n\n/**\n * Hook that allows to control when there is a focus event within a given element, meaning\n * that any element within the given target will trigger the focus in and focus out events.\n * @param options - UseFocusWithinOptions\n */\nexport const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {\n useEffect(() => {\n if (element) {\n element.addEventListener('focusin', onFocusIn);\n\n element.addEventListener('focusout', onFocusOut);\n }\n\n return () => {\n if (element) {\n element.removeEventListener('focusin', onFocusIn);\n\n element.removeEventListener('focusout', onFocusOut);\n }\n };\n }, [onFocusIn, element, onFocusOut]);\n};\n","import React from 'react';\n\nimport { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';\nimport { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { buildSlideShowGroupId } from './SlideshowItemGroup';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowProps\n extends GenericProps,\n Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {\n /** current slide active */\n activeIndex?: SlidesProps['activeIndex'];\n /** Interval between each slide when automatic rotation is enabled. */\n interval?: number;\n /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */\n slideshowControlsProps?: Pick<\n SlideshowControlsProps,\n 'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'\n > &\n Omit<\n SlideshowControlsProps,\n | 'activeIndex'\n | 'onPaginationClick'\n | 'onNextClick'\n | 'onPreviousClick'\n | 'slidesCount'\n | 'parentRef'\n | 'theme'\n >;\n /** Callback when slide changes */\n onChange?(index: number): void;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SlideshowProps> = DEFAULT_OPTIONS;\n\n/**\n * Slideshow component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Slideshow = forwardRef<SlideshowProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n activeIndex,\n autoPlay = DEFAULT_PROPS.autoPlay,\n children,\n className,\n fillHeight,\n groupBy = DEFAULT_OPTIONS.groupBy,\n interval = DEFAULT_PROPS.interval,\n onChange,\n slideshowControlsProps,\n theme = defaultTheme,\n id,\n slidesId,\n slideGroupLabel,\n ...forwardedProps\n } = props;\n // Number of slideshow items.\n const itemsCount = React.Children.count(children);\n\n const {\n activeIndex: currentIndex,\n slideshowId,\n setSlideshow,\n isAutoPlaying,\n slideshowSlidesId,\n slidesCount,\n onNextClick,\n onPaginationClick,\n onPreviousClick,\n slideshow,\n stopAutoPlay,\n startAutoPlay,\n toggleAutoPlay,\n toggleForcePause,\n } = SlideshowControls.useSlideshowControls({\n activeIndex,\n defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,\n autoPlay: Boolean(autoPlay),\n itemsCount,\n groupBy,\n id,\n interval,\n onChange,\n slidesId,\n });\n\n useFocusWithin({\n element: slideshow,\n onFocusIn: stopAutoPlay,\n onFocusOut: startAutoPlay,\n });\n\n const showControls = slideshowControlsProps && slidesCount > 1;\n\n return (\n <Slides\n activeIndex={currentIndex}\n id={slideshowId}\n className={className}\n theme={theme}\n fillHeight={fillHeight}\n groupBy={groupBy}\n isAutoPlaying={isAutoPlaying}\n autoPlay={autoPlay}\n slidesId={slideshowSlidesId}\n toggleAutoPlay={toggleAutoPlay}\n ref={mergeRefs(ref, setSlideshow)}\n hasControls={showControls}\n slideGroupLabel={slideGroupLabel}\n afterSlides={\n slideshowControlsProps && slidesCount > 1 ? (\n <div className={`${Slides.className}__controls`}>\n <SlideshowControls\n {...slideshowControlsProps}\n activeIndex={currentIndex}\n onPaginationClick={onPaginationClick}\n onNextClick={onNextClick}\n onPreviousClick={onPreviousClick}\n slidesCount={slidesCount}\n parentRef={slideshow}\n theme={theme}\n isAutoPlaying={isAutoPlaying}\n nextButtonProps={{\n 'aria-controls': slideshowSlidesId,\n ...slideshowControlsProps.nextButtonProps,\n }}\n previousButtonProps={{\n 'aria-controls': slideshowSlidesId,\n ...slideshowControlsProps.previousButtonProps,\n }}\n playButtonProps={\n autoPlay\n ? {\n 'aria-controls': slideshowSlidesId,\n onClick: toggleForcePause,\n ...slideshowControlsProps.playButtonProps,\n }\n : undefined\n }\n paginationItemProps={(index) => ({\n 'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),\n ...slideshowControlsProps.paginationItemProps?.(index),\n })}\n />\n </div>\n ) : undefined\n }\n {...forwardedProps}\n >\n {children}\n </Slides>\n );\n});\n\nSlideshow.displayName = 'Slideshow';\nSlideshow.defaultProps = DEFAULT_PROPS;\n"],"names":["useFocusWithin","element","onFocusIn","onFocusOut","useEffect","addEventListener","removeEventListener","DEFAULT_PROPS","DEFAULT_OPTIONS","Slideshow","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","activeIndex","autoPlay","children","className","fillHeight","groupBy","interval","onChange","slideshowControlsProps","theme","id","slidesId","slideGroupLabel","forwardedProps","itemsCount","React","Children","count","currentIndex","slideshowId","setSlideshow","isAutoPlaying","slideshowSlidesId","slidesCount","onNextClick","onPaginationClick","onPreviousClick","slideshow","stopAutoPlay","startAutoPlay","toggleAutoPlay","toggleForcePause","SlideshowControls","useSlideshowControls","defaultActiveIndex","Boolean","showControls","_jsx","Slides","mergeRefs","hasControls","afterSlides","parentRef","nextButtonProps","previousButtonProps","playButtonProps","onClick","undefined","paginationItemProps","index","buildSlideShowGroupId","displayName","defaultProps"],"mappings":"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"}
@@ -1,121 +0,0 @@
1
- import { Children } from 'react';
2
- import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
3
- import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
4
- import { u as useId } from '../useId-3a1facc0.js';
5
- import { u as useTheme } from '../ThemeContext-3181f000.js';
6
- import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
7
- import { jsxs, jsx } from 'react/jsx-runtime';
8
- import { Alignment, Theme } from '@lumx/core/js/constants';
9
- import { InputLabel } from './input-label-9711398b.js';
10
- import { InputHelper } from './input-helper-c8a0078b.js';
11
-
12
- /**
13
- * Component display name.
14
- */
15
- const COMPONENT_NAME = 'Switch';
16
-
17
- /**
18
- * Component default class name and class prefix.
19
- */
20
- const CLASSNAME = getRootClassName(COMPONENT_NAME);
21
-
22
- /**
23
- * Component default props.
24
- */
25
- const DEFAULT_PROPS = {
26
- position: Alignment.left
27
- };
28
-
29
- /**
30
- * Switch component.
31
- *
32
- * @param props Component props.
33
- * @param ref Component ref.
34
- * @return React element.
35
- */
36
- const Switch = forwardRef((props, ref) => {
37
- const {
38
- isAnyDisabled,
39
- disabledStateProps,
40
- otherProps
41
- } = useDisableStateProps(props);
42
- const defaultTheme = useTheme() || Theme.light;
43
- const {
44
- checked,
45
- children,
46
- className,
47
- helper,
48
- id,
49
- isChecked = checked,
50
- name,
51
- onChange,
52
- position = DEFAULT_PROPS.position,
53
- theme = defaultTheme,
54
- value,
55
- inputProps = {},
56
- ...forwardedProps
57
- } = otherProps;
58
- const generatedInputId = useId();
59
- const inputId = id || generatedInputId;
60
- const handleChange = event => {
61
- if (onChange) {
62
- onChange(!isChecked, value, name, event);
63
- }
64
- };
65
- return /*#__PURE__*/jsxs("div", {
66
- ref: ref,
67
- ...forwardedProps,
68
- className: classNames(className, handleBasicClasses({
69
- prefix: CLASSNAME,
70
- isChecked,
71
- isDisabled: isAnyDisabled,
72
- position,
73
- theme,
74
- isUnchecked: !isChecked
75
- })),
76
- children: [/*#__PURE__*/jsxs("div", {
77
- className: `${CLASSNAME}__input-wrapper`,
78
- children: [/*#__PURE__*/jsx("input", {
79
- type: "checkbox",
80
- role: "switch",
81
- id: inputId,
82
- className: `${CLASSNAME}__input-native`,
83
- name: name,
84
- value: value,
85
- ...disabledStateProps,
86
- readOnly: inputProps.readOnly || isAnyDisabled,
87
- checked: isChecked,
88
- "aria-checked": Boolean(isChecked),
89
- onChange: handleChange,
90
- "aria-describedby": helper ? `${inputId}-helper` : undefined,
91
- ...inputProps
92
- }), /*#__PURE__*/jsxs("div", {
93
- className: `${CLASSNAME}__input-placeholder`,
94
- children: [/*#__PURE__*/jsx("div", {
95
- className: `${CLASSNAME}__input-background`
96
- }), /*#__PURE__*/jsx("div", {
97
- className: `${CLASSNAME}__input-indicator`
98
- })]
99
- })]
100
- }), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
101
- className: `${CLASSNAME}__content`,
102
- children: [/*#__PURE__*/jsx(InputLabel, {
103
- htmlFor: inputId,
104
- theme: theme,
105
- className: `${CLASSNAME}__label`,
106
- children: children
107
- }), helper && /*#__PURE__*/jsx(InputHelper, {
108
- id: `${inputId}-helper`,
109
- theme: theme,
110
- className: `${CLASSNAME}__helper`,
111
- children: helper
112
- })]
113
- })]
114
- });
115
- });
116
- Switch.displayName = COMPONENT_NAME;
117
- Switch.className = CLASSNAME;
118
- Switch.defaultProps = DEFAULT_PROPS;
119
-
120
- export { Switch };
121
- //# sourceMappingURL=switch-7ae55d89.js.map