@lumx/react 3.20.1-alpha.15 → 3.20.1-alpha.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_internal/{Button-f19e18df.js → Button-1f227024.js} +30 -28
- package/_internal/{Button-f19e18df.js.map → Button-1f227024.js.map} +1 -1
- package/_internal/{ButtonRoot-ab633b1d.js → ButtonRoot-823f3e9c.js} +18 -16
- package/_internal/{ButtonRoot-ab633b1d.js.map → ButtonRoot-823f3e9c.js.map} +1 -1
- package/_internal/{Chip-4c572eec.js → Chip-a34f6905.js} +31 -34
- package/_internal/{Chip-4c572eec.js.map → Chip-a34f6905.js.map} +1 -1
- package/_internal/{ClickAwayProvider-bcce6ceb.js → ClickAwayProvider-7093ba23.js} +6 -4
- package/_internal/{ClickAwayProvider-bcce6ceb.js.map → ClickAwayProvider-7093ba23.js.map} +1 -1
- package/_internal/{DisabledStateContext-077b7bef.js → DisabledStateContext-ea04260d.js} +6 -6
- package/_internal/{DisabledStateContext-077b7bef.js.map → DisabledStateContext-ea04260d.js.map} +1 -1
- package/_internal/{HeadingLevelProvider-e4817816.js → HeadingLevelProvider-ebdcb0c7.js} +6 -4
- package/_internal/{HeadingLevelProvider-e4817816.js.map → HeadingLevelProvider-ebdcb0c7.js.map} +1 -1
- package/_internal/{IconButton-10585058.js → IconButton-f4df224c.js} +29 -24
- package/_internal/{IconButton-10585058.js.map → IconButton-f4df224c.js.map} +1 -1
- package/_internal/ImageCaption-8134a3aa.js +75 -0
- package/_internal/{ImageCaption-4279b2b6.js.map → ImageCaption-8134a3aa.js.map} +1 -1
- package/_internal/{List-d5f5d465.js → List-54237e0e.js} +52 -50
- package/_internal/{List-d5f5d465.js.map → List-54237e0e.js.map} +1 -1
- package/_internal/{PopoverDialog-21e5c9dd.js → PopoverDialog-e0967e5f.js} +166 -158
- package/_internal/{PopoverDialog-21e5c9dd.js.map → PopoverDialog-e0967e5f.js.map} +1 -1
- package/_internal/{Portal-c43d098b.js → Portal-3f86608e.js} +5 -2
- package/_internal/{Portal-c43d098b.js.map → Portal-3f86608e.js.map} +1 -1
- package/_internal/{RawClickable-c76bbc4c.js → RawClickable-2c2b6a89.js} +9 -7
- package/_internal/{RawClickable-c76bbc4c.js.map → RawClickable-2c2b6a89.js.map} +1 -1
- package/_internal/{Slides-01f513ce.js → Slides-b7a67f32.js} +99 -96
- package/_internal/{Slides-01f513ce.js.map → Slides-b7a67f32.js.map} +1 -1
- package/_internal/{Thumbnail-30d2a781.js → Thumbnail-b5dea0af.js} +46 -45
- package/_internal/{Thumbnail-30d2a781.js.map → Thumbnail-b5dea0af.js.map} +1 -1
- package/_internal/components/{alert-dialog-8f1c163c.js → alert-dialog-b284b191.js} +50 -35
- package/_internal/components/{alert-dialog-8f1c163c.js.map → alert-dialog-b284b191.js.map} +1 -1
- package/_internal/components/{autocomplete-bfbdeb3c.js → autocomplete-8d3f37ea.js} +64 -67
- package/_internal/components/{autocomplete-bfbdeb3c.js.map → autocomplete-8d3f37ea.js.map} +1 -1
- package/_internal/components/{avatar-6990e3e9.js → avatar-5fc70e00.js} +28 -32
- package/_internal/components/{avatar-6990e3e9.js.map → avatar-5fc70e00.js.map} +1 -1
- package/_internal/components/{badge-81543bc7.js → badge-8390e590.js} +18 -18
- package/_internal/components/{badge-81543bc7.js.map → badge-8390e590.js.map} +1 -1
- package/_internal/components/{button-927abe71.js → button-e3c7f2eb.js} +11 -13
- package/_internal/components/{button-927abe71.js.map → button-e3c7f2eb.js.map} +1 -1
- package/_internal/components/{checkbox-dc4caec8.js → checkbox-d1ca9748.js} +53 -44
- package/_internal/components/{checkbox-dc4caec8.js.map → checkbox-d1ca9748.js.map} +1 -1
- package/_internal/components/{chip-fb3d0c76.js → chip-e40c5521.js} +10 -12
- package/_internal/components/{chip-fb3d0c76.js.map → chip-e40c5521.js.map} +1 -1
- package/_internal/components/comment-block-a3cf7b9b.js +138 -0
- package/_internal/components/{comment-block-b84c4694.js.map → comment-block-a3cf7b9b.js.map} +1 -1
- package/_internal/components/date-picker-6c1b14e4.js +2 -0
- package/_internal/components/date-picker-6c1b14e4.js.map +1 -0
- package/_internal/components/{dialog-7dbcb485.js → dialog-ebdb9500.js} +70 -58
- package/_internal/components/{dialog-7dbcb485.js.map → dialog-ebdb9500.js.map} +1 -1
- package/_internal/components/{divider-12e9b6a0.js → divider-116af6b9.js} +7 -10
- package/_internal/components/{divider-12e9b6a0.js.map → divider-116af6b9.js.map} +1 -1
- package/_internal/components/{drag-handle-a38ff757.js → drag-handle-5215cd21.js} +14 -16
- package/_internal/components/{drag-handle-a38ff757.js.map → drag-handle-5215cd21.js.map} +1 -1
- package/_internal/components/{dropdown-38b0b6a0.js → dropdown-0baed51b.js} +15 -16
- package/_internal/components/{dropdown-38b0b6a0.js.map → dropdown-0baed51b.js.map} +1 -1
- package/_internal/components/{expansion-panel-c4b93653.js → expansion-panel-5533a680.js} +48 -39
- package/_internal/components/{expansion-panel-c4b93653.js.map → expansion-panel-5533a680.js.map} +1 -1
- package/_internal/components/{flag-c5e2f5f0.js → flag-8d4a7e72.js} +20 -16
- package/_internal/components/{flag-c5e2f5f0.js.map → flag-8d4a7e72.js.map} +1 -1
- package/_internal/components/{flex-box-c8701a85.js → flex-box-55144e5f.js} +9 -11
- package/_internal/components/{flex-box-c8701a85.js.map → flex-box-55144e5f.js.map} +1 -1
- package/_internal/components/{generic-block-0d6ad5a6.js → generic-block-ff0509ee.js} +35 -26
- package/_internal/components/{generic-block-0d6ad5a6.js.map → generic-block-ff0509ee.js.map} +1 -1
- package/_internal/components/{grid-3b194fe8.js → grid-6f1b5a41.js} +15 -20
- package/_internal/components/{grid-3b194fe8.js.map → grid-6f1b5a41.js.map} +1 -1
- package/_internal/components/{grid-column-985b9327.js → grid-column-f01df853.js} +8 -9
- package/_internal/components/{grid-column-985b9327.js.map → grid-column-f01df853.js.map} +1 -1
- package/_internal/components/{heading-5e954dfc.js → heading-89239843.js} +11 -12
- package/_internal/components/{heading-5e954dfc.js.map → heading-89239843.js.map} +1 -1
- package/_internal/components/{icon-2e7345ad.js → icon-b708cca4.js} +24 -25
- package/_internal/components/{icon-2e7345ad.js.map → icon-b708cca4.js.map} +1 -1
- package/_internal/components/{image-block-8d21dd7e.js → image-block-7938422d.js} +35 -34
- package/_internal/components/{image-block-8d21dd7e.js.map → image-block-7938422d.js.map} +1 -1
- package/_internal/components/{image-lightbox-4a5ab962.js → image-lightbox-58331704.js} +113 -100
- package/_internal/components/{image-lightbox-4a5ab962.js.map → image-lightbox-58331704.js.map} +1 -1
- package/_internal/components/{inline-list-4884f004.js → inline-list-e6f19a98.js} +24 -24
- package/_internal/components/{inline-list-4884f004.js.map → inline-list-e6f19a98.js.map} +1 -1
- package/_internal/components/{input-helper-e644e05e.js → input-helper-64153099.js} +9 -11
- package/_internal/components/{input-helper-e644e05e.js.map → input-helper-64153099.js.map} +1 -1
- package/_internal/components/{input-label-5e509a1b.js → input-label-2feb0bb0.js} +9 -11
- package/_internal/components/{input-label-5e509a1b.js.map → input-label-2feb0bb0.js.map} +1 -1
- package/_internal/components/{lightbox-bec1b95f.js → lightbox-570ad9e5.js} +55 -49
- package/_internal/components/{lightbox-bec1b95f.js.map → lightbox-570ad9e5.js.map} +1 -1
- package/_internal/components/{link-9637b9e4.js → link-91f76477.js} +25 -23
- package/_internal/components/{link-9637b9e4.js.map → link-91f76477.js.map} +1 -1
- package/_internal/components/link-preview-fdd8d738.js +117 -0
- package/_internal/components/{link-preview-7a4a6e4b.js.map → link-preview-fdd8d738.js.map} +1 -1
- package/_internal/components/{list-5c8f7122.js → list-b08d8423.js} +14 -20
- package/_internal/components/{list-5c8f7122.js.map → list-b08d8423.js.map} +1 -1
- package/_internal/components/{message-a67067d9.js → message-29cb9181.js} +24 -24
- package/_internal/components/{message-a67067d9.js.map → message-29cb9181.js.map} +1 -1
- package/_internal/components/{mosaic-92b66c80.js → mosaic-cdb9f563.js} +36 -33
- package/_internal/components/{mosaic-92b66c80.js.map → mosaic-cdb9f563.js.map} +1 -1
- package/_internal/components/navigation-8b7d9bd8.js +225 -0
- package/_internal/components/{navigation-4fd3917d.js.map → navigation-8b7d9bd8.js.map} +1 -1
- package/_internal/components/{notification-9063c963.js → notification-a45fda96.js} +45 -40
- package/_internal/components/{notification-9063c963.js.map → notification-a45fda96.js.map} +1 -1
- package/_internal/components/popover-65bfbc57.js +3 -0
- package/_internal/components/popover-65bfbc57.js.map +1 -0
- package/_internal/components/post-block-52e58dd5.js +109 -0
- package/_internal/components/{post-block-0cfc2206.js.map → post-block-52e58dd5.js.map} +1 -1
- package/_internal/components/{progress-eaf5b33d.js → progress-f39c3fa2.js} +44 -50
- package/_internal/components/{progress-eaf5b33d.js.map → progress-f39c3fa2.js.map} +1 -1
- package/_internal/components/{progress-tracker-4a65718d.js → progress-tracker-512d7a08.js} +59 -63
- package/_internal/components/{progress-tracker-4a65718d.js.map → progress-tracker-512d7a08.js.map} +1 -1
- package/_internal/components/{radio-button-3ef8a325.js → radio-button-559a4863.js} +54 -53
- package/_internal/components/{radio-button-3ef8a325.js.map → radio-button-559a4863.js.map} +1 -1
- package/_internal/components/select-48d4fa8c.js +454 -0
- package/_internal/components/{select-d46cfe35.js.map → select-48d4fa8c.js.map} +1 -1
- package/_internal/components/{side-navigation-75b22f19.js → side-navigation-f9bc5b4e.js} +62 -56
- package/_internal/components/{side-navigation-75b22f19.js.map → side-navigation-f9bc5b4e.js.map} +1 -1
- package/_internal/components/{skeleton-361ce335.js → skeleton-c66516ee.js} +23 -31
- package/_internal/components/{skeleton-361ce335.js.map → skeleton-c66516ee.js.map} +1 -1
- package/_internal/components/{slider-8094cb5c.js → slider-efbfbc45.js} +62 -56
- package/_internal/components/{slider-8094cb5c.js.map → slider-efbfbc45.js.map} +1 -1
- package/_internal/components/{slideshow-2e8cd372.js → slideshow-dd312470.js} +39 -38
- package/_internal/components/{slideshow-2e8cd372.js.map → slideshow-dd312470.js.map} +1 -1
- package/_internal/components/{switch-5516949b.js → switch-769a2a04.js} +49 -45
- package/_internal/components/{switch-5516949b.js.map → switch-769a2a04.js.map} +1 -1
- package/_internal/components/{table-fa198ee6.js → table-8617b1ba.js} +68 -73
- package/_internal/components/{table-fa198ee6.js.map → table-8617b1ba.js.map} +1 -1
- package/_internal/components/{tabs-bb9bc2a5.js → tabs-884c57b6.js} +41 -41
- package/_internal/components/{tabs-bb9bc2a5.js.map → tabs-884c57b6.js.map} +1 -1
- package/_internal/components/text-c7b1e079.js +2 -0
- package/_internal/components/text-c7b1e079.js.map +1 -0
- package/_internal/components/{text-field-82733568.js → text-field-478acd86.js} +116 -103
- package/_internal/components/{text-field-82733568.js.map → text-field-478acd86.js.map} +1 -1
- package/_internal/components/{thumbnail-e3acff82.js → thumbnail-310a4c4b.js} +2 -2
- package/_internal/components/{thumbnail-e3acff82.js.map → thumbnail-310a4c4b.js.map} +1 -1
- package/_internal/components/{toolbar-155562be.js → toolbar-a43533a2.js} +18 -17
- package/_internal/components/{toolbar-155562be.js.map → toolbar-a43533a2.js.map} +1 -1
- package/_internal/components/{tooltip-84ffb4f9.js → tooltip-2885ab2e.js} +44 -35
- package/_internal/components/{tooltip-84ffb4f9.js.map → tooltip-2885ab2e.js.map} +1 -1
- package/_internal/components/{uploader-896a1d89.js → uploader-1e7f5bbb.js} +35 -32
- package/_internal/components/{uploader-896a1d89.js.map → uploader-1e7f5bbb.js.map} +1 -1
- package/_internal/components/{user-block-8fd15895.js → user-block-68a51ed0.js} +43 -41
- package/_internal/components/{user-block-8fd15895.js.map → user-block-68a51ed0.js.map} +1 -1
- package/_internal/{context-21aeb1c7.js → context-9d1336a1.js} +6 -6
- package/_internal/{context-21aeb1c7.js.map → context-9d1336a1.js.map} +1 -1
- package/_internal/{forwardRef-49d2bb84.js → forwardRef-15f62847.js} +2 -12
- package/_internal/{forwardRef-49d2bb84.js.map → forwardRef-15f62847.js.map} +1 -1
- package/_internal/{index-f415b08e.js → index-9df37c0d.js} +45 -39
- package/_internal/{index-f415b08e.js.map → index-9df37c0d.js.map} +1 -1
- package/_internal/{index-b4d256e7.js → index-a9c5cd69.js} +10 -11
- package/_internal/{index-b4d256e7.js.map → index-a9c5cd69.js.map} +1 -1
- package/_internal/{useDisableStateProps-fffc365f.js → useDisableStateProps-69e16b7c.js} +2 -2
- package/_internal/{useDisableStateProps-fffc365f.js.map → useDisableStateProps-69e16b7c.js.map} +1 -1
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js → wrapChildrenIconWithSpaces-c1faaae4.js} +2 -2
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js.map → wrapChildrenIconWithSpaces-c1faaae4.js.map} +1 -1
- package/index.js +61 -61
- package/package.json +3 -3
- package/utils/index.js +3 -3
- package/_internal/ImageCaption-4279b2b6.js +0 -65
- package/_internal/components/comment-block-b84c4694.js +0 -121
- package/_internal/components/date-picker-a425534c.js +0 -2
- package/_internal/components/date-picker-a425534c.js.map +0 -1
- package/_internal/components/link-preview-7a4a6e4b.js +0 -108
- package/_internal/components/navigation-4fd3917d.js +0 -210
- package/_internal/components/popover-3c4c54bd.js +0 -3
- package/_internal/components/popover-3c4c54bd.js.map +0 -1
- package/_internal/components/post-block-0cfc2206.js +0 -99
- package/_internal/components/select-d46cfe35.js +0 -404
- package/_internal/components/text-289c0526.js +0 -2
- package/_internal/components/text-289c0526.js.map +0 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
1
|
import React__default, { useMemo, useRef } from 'react';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
3
3
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
4
4
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
5
5
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
6
|
-
import { u as useDisableStateProps } from '../useDisableStateProps-
|
|
6
|
+
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
7
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
8
|
import { Theme } from '@lumx/core/js/constants';
|
|
8
|
-
import { InputLabel } from './input-label-
|
|
9
|
-
import { InputHelper } from './input-helper-
|
|
9
|
+
import { InputLabel } from './input-label-2feb0bb0.js';
|
|
10
|
+
import { InputHelper } from './input-helper-64153099.js';
|
|
10
11
|
|
|
11
12
|
const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
|
|
12
13
|
|
|
@@ -42,10 +43,7 @@ const clamp = (value, min, max) => {
|
|
|
42
43
|
return value;
|
|
43
44
|
};
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
* Defines the props of the component.
|
|
47
|
-
*/
|
|
48
|
-
|
|
46
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
49
47
|
/**
|
|
50
48
|
* Component display name.
|
|
51
49
|
*/
|
|
@@ -244,62 +242,70 @@ const Slider = forwardRef((props, ref) => {
|
|
|
244
242
|
document.body.addEventListener('mouseup', handleEnd);
|
|
245
243
|
});
|
|
246
244
|
const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
|
|
247
|
-
return /*#__PURE__*/
|
|
248
|
-
ref: ref
|
|
249
|
-
|
|
245
|
+
return /*#__PURE__*/jsxs("div", {
|
|
246
|
+
ref: ref,
|
|
247
|
+
...forwardedProps,
|
|
250
248
|
className: classNames(className, handleBasicClasses({
|
|
251
249
|
prefix: CLASSNAME,
|
|
252
250
|
theme,
|
|
253
251
|
hasLabel: Boolean(label)
|
|
254
252
|
})),
|
|
255
|
-
onMouseDown: handleMouseDown
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
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
|
+
});
|
|
299
305
|
});
|
|
300
306
|
Slider.displayName = COMPONENT_NAME;
|
|
301
307
|
Slider.className = CLASSNAME;
|
|
302
308
|
Slider.defaultProps = DEFAULT_PROPS;
|
|
303
309
|
|
|
304
310
|
export { Slider, clamp };
|
|
305
|
-
//# sourceMappingURL=slider-
|
|
311
|
+
//# sourceMappingURL=slider-efbfbc45.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider-8094cb5c.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","createElement","_extends","classNames","handleBasicClasses","prefix","hasLabel","Boolean","InputLabel","htmlFor","InputHelper","style","map","idx","type","onKeyDown","undefined","displayName","defaultProps"],"mappings":";;;;;;;;;;AAEA,MAAMA,iBAAiB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGC,cAAK,CAACC,eAAe,GAAGD,cAAK,CAACE,SAAS,CAAA;;AAEjG;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,gBAAgBA,CAACC,EAA2B,EAAuB;AACvF,EAAA,MAAMC,GAAG,GAAGL,cAAK,CAACM,MAAM,CAACF,EAAE,CAAC,CAAA;AAC5BN,EAAAA,iBAAiB,CAAC,MAAM;IACpBO,GAAG,CAACE,OAAO,GAAGH,EAAE,CAAA;AACpB,GAAC,CAAC,CAAA;AACF,EAAA,OAAOJ,cAAK,CAACQ,WAAW,CAAEC,KAAU,IAAKJ,GAAG,CAACE,OAAO,CAACE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;AACpE;;AChBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAGA,CAACC,KAAa,EAAEC,GAAW,EAAEC,GAAW,KAAa;EACtE,IAAIF,KAAK,GAAGC,GAAG,EAAE;AACb,IAAA,OAAOA,GAAG,CAAA;AACd,GAAA;EACA,IAAID,KAAK,GAAGE,GAAG,EAAE;AACb,IAAA,OAAOA,GAAG,CAAA;AACd,GAAA;AACA,EAAA,OAAOF,KAAK,CAAA;AAChB;;ACDA;AACA;AACA;;AA4BA;AACA;AACA;AACA,MAAMG,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;AACxCC,EAAAA,SAAS,EAAE,CAAC;AACZC,EAAAA,KAAK,EAAE,CAAA;AACX,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,uBAAuB,GAAGA,CAACC,OAAe,EAAET,GAAW,EAAEC,GAAW,EAAEK,SAAS,GAAG,CAAC,KACrFI,MAAM,CAAC,CAACV,GAAG,GAAGS,OAAO,IAAIR,GAAG,GAAGD,GAAG,CAAC,EAAEW,OAAO,CAACL,SAAS,CAAC,CAAC,CAAA;;AAE5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,uBAAuB,GAAGA,CAACb,KAAa,EAAEC,GAAW,EAAEC,GAAW,KACpES,MAAM,CAAC,CAACX,KAAK,GAAGC,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,CAAC,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMa,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEtB,GAAG,KAAK;EAC1E,MAAM;IAAEuB,aAAa;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACJ,KAAK,CAAC,CAAA;EACrF,MAAMK,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,SAAS;IACTC,MAAM;IACNC,eAAe;IACfC,EAAE;IACFC,KAAK;IACL3B,GAAG;IACHD,GAAG;IACH6B,IAAI;IACJC,QAAQ;IACRC,WAAW;IACXzB,SAAS,GAAGD,aAAa,CAACC,SAAS;IACnCC,KAAK,GAAGF,aAAa,CAACE,KAAK;AAC3ByB,IAAAA,KAAK,GAAGZ,YAAY;IACpBrB,KAAK;IACL,GAAGkC,cAAAA;AACP,GAAC,GAAGf,UAAU,CAAA;AACd,EAAA,MAAMgB,WAAW,GAAGC,KAAK,EAAE,CAAA;AAC3B,EAAA,MAAMC,QAAQ,GAAGT,EAAE,IAAIO,WAAW,CAAA;AAClC,EAAA,MAAMG,aAAa,GAAGC,OAAO,CAAC,MAAM,CAAA,MAAA,EAASF,QAAQ,CAAA,CAAE,EAAE,CAACA,QAAQ,CAAC,CAAC,CAAA;AACpE,EAAA,MAAMG,SAAS,GAAG7C,MAAM,CAAiB,IAAI,CAAC,CAAA;;AAE9C;AACA,EAAA,MAAM8C,cAAc,GAAGF,OAAO,CAAC,MAAgB;AAC3C,IAAA,IAAI,CAAC/B,KAAK,EAAE,OAAO,EAAE,CAAA;AAErB,IAAA,MAAMkC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAA;IACrB,MAAMC,WAAW,GAAG,CAAC,IAAI,CAACzC,GAAG,GAAGD,GAAG,IAAIO,KAAK,CAAC,CAAA;IAC7C,IAAIoC,GAAG,GAAG,CAAC,CAAA;AACX,IAAA,OAAOA,GAAG,GAAGD,WAAW,GAAG,CAAC,EAAE;AAC1BC,MAAAA,GAAG,IAAID,WAAW,CAAA;AAClBD,MAAAA,SAAS,CAACG,IAAI,CAACD,GAAG,CAAC,CAAA;AACvB,KAAA;AACA,IAAA,OAAOF,SAAS,CAAA;GACnB,EAAE,CAAClC,KAAK,EAAEP,GAAG,EAAEC,GAAG,CAAC,CAAC,CAAA;;AAErB;AACJ;AACA;AACA;AACA;AACA;EACI,MAAM4C,eAAe,GAAIC,YAAoB,IAAa;IACtD,MAAMC,OAAO,GAAGP,cAAc,CAACQ,MAAM,CACjC,CAACC,GAAG,EAAEC,IAAI,KAAK;MACX,MAAMC,IAAI,GAAGC,IAAI,CAACC,GAAG,CAACP,YAAY,GAAGI,IAAI,CAAC,CAAA;AAC1C,MAAA,IAAIC,IAAI,GAAGF,GAAG,CAACK,GAAG,EAAE;QAChB,OAAO;AAAEA,UAAAA,GAAG,EAAEH,IAAI;AAAEI,UAAAA,GAAG,EAAEL,IAAAA;SAAM,CAAA;AACnC,OAAA;AACA,MAAA,OAAOD,GAAG,CAAA;AACd,KAAC,EACD;AAAEK,MAAAA,GAAG,EAAEE,QAAQ;AAAED,MAAAA,GAAG,EAAE,CAAC,CAAA;AAAE,KAC7B,CAAC,CAAA;IACD,OAAOR,OAAO,CAACQ,GAAG,CAAA;GACrB,CAAA;;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;AACI,EAAA,MAAME,eAAe,GAAGA,CAAC5D,KAAuB,EAAE6D,MAAsB,KAAa;IACjF,MAAM;MAAEC,KAAK;AAAEC,MAAAA,IAAAA;AAAK,KAAC,GAAGF,MAAM,CAACG,qBAAqB,EAAE,CAAA;AACtD,IAAA,IAAIpD,OAAO,GAAG,CAACZ,KAAK,CAACiE,KAAK,GAAGF,IAAI,GAAGzE,MAAM,CAAC4E,WAAW,IAAIJ,KAAK,CAAA;IAC/DlD,OAAO,GAAGX,KAAK,CAACW,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAC9B,IAAA,IAAIF,KAAK,EAAE;AACPE,MAAAA,OAAO,GAAGoC,eAAe,CAACpC,OAAO,CAAC,CAAA;AACtC,KAAA;AACA,IAAA,OAAOA,OAAO,CAAA;GACjB,CAAA;;AAED;AACJ;AACA;AACI,EAAA,MAAMuD,UAAU,GAAGzE,gBAAgB,CAAEM,KAAuB,IAAK;IAC7D,MAAM;AAAEF,MAAAA,OAAO,EAAE+D,MAAAA;AAAO,KAAC,GAAGnB,SAAS,CAAA;AACrC,IAAA,IAAI,CAACmB,MAAM,IAAI,CAAC5B,QAAQ,EAAE,OAAA;AAC1B,IAAA,MAAMmC,QAAQ,GAAGR,eAAe,CAAC5D,KAAK,EAAE6D,MAAM,CAAC,CAAA;AAC/C5B,IAAAA,QAAQ,CAACtB,uBAAuB,CAACyD,QAAQ,EAAEjE,GAAG,EAAEC,GAAG,EAAEK,SAAS,CAAC,EAAEuB,IAAI,EAAEhC,KAAK,CAAC,CAAA;AACjF,GAAC,CAAC,CAAA;;AAEF;AACJ;AACA;AACA;AACI,EAAA,MAAMqE,SAAS,GAAG3E,gBAAgB,CAAC,MAAM;IACrC4E,QAAQ,CAACC,IAAI,CAACC,mBAAmB,CAAC,WAAW,EAAEL,UAAU,CAAC,CAAA;IAC1DG,QAAQ,CAACC,IAAI,CAACC,mBAAmB,CAAC,SAAS,EAAEH,SAAS,CAAC,CAAA;IACvDC,QAAQ,CAACC,IAAI,CAACC,mBAAmB,CAAC,WAAW,EAAEL,UAAU,CAAC,CAAA;IAC1DG,QAAQ,CAACC,IAAI,CAACC,mBAAmB,CAAC,UAAU,EAAEH,SAAS,CAAC,CAAA;AAC5D,GAAC,CAAC,CAAA;;AAEF;AACJ;AACA;AACA;AACI,EAAA,MAAMI,UAAU,GAAGA,CAACC,QAAQ,GAAG,KAAK,KAAK;IACrC,MAAMC,UAAU,GAAG5D,uBAAuB,CAACb,KAAK,EAAEC,GAAG,EAAEC,GAAG,CAAC,CAAA;AAC3D,IAAA,IAAIQ,OAAO,GAAGX,KAAK,CAAC0E,UAAU,IAAID,QAAQ,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAC/D,IAAA,IAAIhE,KAAK,EAAE;AACPE,MAAAA,OAAO,GAAG+D,UAAU,GAAGhC,cAAc,CAAC,CAAC,CAAC,IAAI+B,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;AAC9D9D,MAAAA,OAAO,GAAGoC,eAAe,CAACpC,OAAO,CAAC,CAAA;AACtC,KAAA;AACA,IAAA,IAAIqB,QAAQ,EAAE;AACVA,MAAAA,QAAQ,CAACtB,uBAAuB,CAACC,OAAO,EAAET,GAAG,EAAEC,GAAG,EAAEK,SAAS,CAAC,EAAEuB,IAAI,CAAC,CAAA;AACzE,KAAA;GACH,CAAA;;AAED;AACJ;AACA;AACI,EAAA,MAAM4C,aAAa,GAAGlF,gBAAgB,CAAEM,KAA0B,IAAK;AACnE,IAAA,IAAIA,KAAK,CAAC6E,GAAG,KAAK,YAAY,EAAE;AAC5BJ,MAAAA,UAAU,EAAE,CAAA;AAChB,KAAC,MAAM,IAAIzE,KAAK,CAAC6E,GAAG,KAAK,WAAW,EAAE;MAClCJ,UAAU,CAAC,IAAI,CAAC,CAAA;AACpB,KAAA;AACJ,GAAC,CAAC,CAAA;;AAEF;AACJ;AACA;AACI,EAAA,MAAMK,eAAe,GAAGpF,gBAAgB,CAAEM,KAAuB,IAAK;IAClEkC,WAAW,GAAGlC,KAAK,CAAC,CAAA;IAEpB,MAAM;AAAEF,MAAAA,OAAO,EAAE+D,MAAAA;AAAO,KAAC,GAAGnB,SAAS,CAAA;AACrC,IAAA,IAAIvB,aAAa,IAAI,CAAC0C,MAAM,EAAE,OAAA;AAC9B,IAAA,MAAMO,QAAQ,GAAGR,eAAe,CAAC5D,KAAK,EAAE6D,MAAM,CAAC,CAAA;AAC/C,IAAA,IAAI5B,QAAQ,EAAE;AACVA,MAAAA,QAAQ,CAACtB,uBAAuB,CAACyD,QAAQ,EAAEjE,GAAG,EAAEC,GAAG,EAAEK,SAAS,CAAC,EAAEuB,IAAI,EAAEhC,KAAK,CAAC,CAAA;AACjF,KAAA;IAEAsE,QAAQ,CAACC,IAAI,CAACQ,gBAAgB,CAAC,WAAW,EAAEZ,UAAU,CAAC,CAAA;IACvDG,QAAQ,CAACC,IAAI,CAACQ,gBAAgB,CAAC,SAAS,EAAEV,SAAS,CAAC,CAAA;AACxD,GAAC,CAAC,CAAA;AAEF,EAAA,MAAMW,aAAa,GAAG,CAAGjE,EAAAA,uBAAuB,CAACb,KAAK,EAAEC,GAAG,EAAEC,GAAG,CAAC,GAAG,GAAG,CAAG,CAAA,CAAA,CAAA;AAC1E,EAAA,oBACIb,KAAA,CAAA0F,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACItF,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLwC,cAAc,EAAA;AAClBT,IAAAA,SAAS,EAAEwD,UAAU,CACjBxD,SAAS,EACTyD,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE/E,SAAS;MAAE6B,KAAK;MAAEmD,QAAQ,EAAEC,OAAO,CAACxD,KAAK,CAAA;AAAE,KAAC,CAC7E,CAAE;AACFG,IAAAA,WAAW,EAAE4C,eAAAA;AAAgB,GAAA,CAAA,EAE5B/C,KAAK,iBACFxC,KAAA,CAAA0F,aAAA,CAACO,UAAU,EAAA;AAAC1D,IAAAA,EAAE,EAAEU,aAAc;AAACiD,IAAAA,OAAO,EAAElD,QAAS;IAACZ,SAAS,EAAE,CAAGrB,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAC6B,IAAAA,KAAK,EAAEA,KAAAA;GACtFJ,EAAAA,KACO,CACf,EAEAH,MAAM,iBACHrC,KAAA,CAAA0F,aAAA,CAACS,WAAW,EAAA;IAAC/D,SAAS,EAAE,CAAGrB,EAAAA,SAAS,CAAW,QAAA,CAAA;AAAC6B,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EACxDP,MACQ,CAChB,eAEDrC,KAAA,CAAA0F,aAAA,CAAA,KAAA,EAAA;IAAKtD,SAAS,EAAE,GAAGrB,SAAS,CAAA,YAAA,CAAA;AAAe,GAAA,EACtC,CAACuB,eAAe,iBACbtC,KAAA,CAAA0F,aAAA,CAAA,MAAA,EAAA;AAAMtD,IAAAA,SAAS,EAAE,CAAA,EAAGrB,SAAS,CAAA,cAAA,EAAiBA,SAAS,CAAA,kBAAA,CAAA;AAAqB,GAAA,EAAEH,GAAU,CAC3F,eACDZ,KAAA,CAAA0F,aAAA,CAAA,KAAA,EAAA;IAAKtD,SAAS,EAAE,CAAGrB,EAAAA,SAAS,CAAY,SAAA,CAAA;AAACV,IAAAA,GAAG,EAAE8C,SAAAA;GAC1CnD,eAAAA,KAAA,CAAA0F,aAAA,CAAA,KAAA,EAAA;AAAKtD,IAAAA,SAAS,EAAE,CAAA,EAAGrB,SAAS,CAAA,QAAA,EAAWA,SAAS,CAAA,mBAAA,CAAA;AAAsB,GAAE,CAAC,eACzEf,KAAA,CAAA0F,aAAA,CAAA,KAAA,EAAA;AACItD,IAAAA,SAAS,EAAE,CAAA,EAAGrB,SAAS,CAAA,QAAA,EAAWA,SAAS,CAAkB,eAAA,CAAA;AAC7DqF,IAAAA,KAAK,EAAE;AAAE7B,MAAAA,KAAK,EAAEkB,aAAAA;AAAc,KAAA;AAAE,GACnC,CAAC,EACDtE,KAAK,gBACFnB,KAAA,CAAA0F,aAAA,CAAA,KAAA,EAAA;IAAKtD,SAAS,EAAE,GAAGrB,SAAS,CAAA,OAAA,CAAA;GACvBqC,EAAAA,cAAc,CAACiD,GAAG,CAAC,CAACvC,IAAI,EAAEwC,GAAG,kBAC1BtG,KAAA,CAAA0F,aAAA,CAAA,KAAA,EAAA;IACIJ,GAAG,EAAE,CAAQgB,KAAAA,EAAAA,GAAG,CAAG,CAAA;IACnBlE,SAAS,EAAE,CAAGrB,EAAAA,SAAS,CAAS,MAAA,CAAA;AAChCqF,IAAAA,KAAK,EAAE;AAAE5B,MAAAA,IAAI,EAAE,CAAA,EAAGV,IAAI,GAAG,GAAG,CAAA,CAAA,CAAA;AAAI,KAAA;GACnC,CACJ,CACA,CAAC,GACN,IAAI,eACR9D,KAAA,CAAA0F,aAAA,CAAA,QAAA,EAAAC,QAAA,CAAA;AACIY,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,iBAAA,EAAiBtD,aAAc;AAC/BR,IAAAA,IAAI,EAAEA,IAAK;AACXF,IAAAA,EAAE,EAAES,QAAS;IACbZ,SAAS,EAAE,CAAGrB,EAAAA,SAAS,CAAW,QAAA,CAAA;AAClCqF,IAAAA,KAAK,EAAE;AAAE5B,MAAAA,IAAI,EAAEiB,aAAAA;KAAgB;AAC/Be,IAAAA,SAAS,EAAE5E,aAAa,GAAG6E,SAAS,GAAGpB,aAAAA;GACnCxD,EAAAA,kBAAkB,CACzB,CACA,CAAC,EACL,CAACS,eAAe,iBACbtC,KAAA,CAAA0F,aAAA,CAAA,MAAA,EAAA;AAAMtD,IAAAA,SAAS,EAAE,CAAA,EAAGrB,SAAS,CAAA,cAAA,EAAiBA,SAAS,CAAA,kBAAA,CAAA;GAAuBF,EAAAA,GAAU,CAE3F,CACJ,CAAC,CAAA;AAEd,CAAC,EAAC;AACFY,MAAM,CAACiF,WAAW,GAAG5F,cAAc,CAAA;AACnCW,MAAM,CAACW,SAAS,GAAGrB,SAAS,CAAA;AAC5BU,MAAM,CAACkF,YAAY,GAAG1F,aAAa;;;;"}
|
|
1
|
+
{"version":3,"file":"slider-efbfbc45.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,9 +1,10 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends } from '../forwardRef-49d2bb84.js';
|
|
2
1
|
import React__default, { useEffect } from 'react';
|
|
3
|
-
import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from '../Slides-
|
|
4
|
-
export { S as SlideshowItem } from '../Slides-
|
|
2
|
+
import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from '../Slides-b7a67f32.js';
|
|
3
|
+
export { S as SlideshowItem } from '../Slides-b7a67f32.js';
|
|
5
4
|
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
6
5
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
6
|
+
import { f as forwardRef } from '../forwardRef-15f62847.js';
|
|
7
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
8
|
import { Theme } from '@lumx/core/js/constants';
|
|
8
9
|
|
|
9
10
|
/**
|
|
@@ -30,10 +31,6 @@ const useFocusWithin = ({
|
|
|
30
31
|
}, [onFocusIn, element, onFocusOut]);
|
|
31
32
|
};
|
|
32
33
|
|
|
33
|
-
/**
|
|
34
|
-
* Defines the props of the component.
|
|
35
|
-
*/
|
|
36
|
-
|
|
37
34
|
/**
|
|
38
35
|
* Component default props.
|
|
39
36
|
*/
|
|
@@ -98,7 +95,7 @@ const Slideshow = forwardRef((props, ref) => {
|
|
|
98
95
|
onFocusOut: startAutoPlay
|
|
99
96
|
});
|
|
100
97
|
const showControls = slideshowControlsProps && slidesCount > 1;
|
|
101
|
-
return /*#__PURE__*/
|
|
98
|
+
return /*#__PURE__*/jsx(Slides, {
|
|
102
99
|
activeIndex: currentIndex,
|
|
103
100
|
id: slideshowId,
|
|
104
101
|
className: className,
|
|
@@ -112,39 +109,43 @@ const Slideshow = forwardRef((props, ref) => {
|
|
|
112
109
|
ref: mergeRefs(ref, setSlideshow),
|
|
113
110
|
hasControls: showControls,
|
|
114
111
|
slideGroupLabel: slideGroupLabel,
|
|
115
|
-
afterSlides: slideshowControlsProps && slidesCount > 1 ? /*#__PURE__*/
|
|
116
|
-
className: `${Slides.className}__controls
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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
|
+
})
|
|
142
141
|
})
|
|
143
|
-
})
|
|
144
|
-
|
|
142
|
+
}) : undefined,
|
|
143
|
+
...forwardedProps,
|
|
144
|
+
children: children
|
|
145
|
+
});
|
|
145
146
|
});
|
|
146
147
|
Slideshow.displayName = 'Slideshow';
|
|
147
148
|
Slideshow.defaultProps = DEFAULT_PROPS;
|
|
148
149
|
|
|
149
150
|
export { Slides, Slideshow, SlideshowControls };
|
|
150
|
-
//# sourceMappingURL=slideshow-
|
|
151
|
+
//# sourceMappingURL=slideshow-dd312470.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slideshow-2e8cd372.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","createElement","Slides","_extends","mergeRefs","hasControls","afterSlides","parentRef","nextButtonProps","previousButtonProps","playButtonProps","onClick","undefined","paginationItemProps","index","buildSlideShowGroupId","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"slideshow-dd312470.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,17 +1,14 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
1
|
import { Children } from 'react';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
3
3
|
import isEmpty from 'lodash/isEmpty';
|
|
4
4
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
5
5
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
6
6
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
7
|
-
import { u as useDisableStateProps } from '../useDisableStateProps-
|
|
7
|
+
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
8
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
9
|
import { Alignment, Theme } from '@lumx/core/js/constants';
|
|
9
|
-
import { InputLabel } from './input-label-
|
|
10
|
-
import { InputHelper } from './input-helper-
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Defines the props of the component.
|
|
14
|
-
*/
|
|
10
|
+
import { InputLabel } from './input-label-2feb0bb0.js';
|
|
11
|
+
import { InputHelper } from './input-helper-64153099.js';
|
|
15
12
|
|
|
16
13
|
/**
|
|
17
14
|
* Component display name.
|
|
@@ -66,9 +63,9 @@ const Switch = forwardRef((props, ref) => {
|
|
|
66
63
|
onChange(!isChecked, value, name, event);
|
|
67
64
|
}
|
|
68
65
|
};
|
|
69
|
-
return /*#__PURE__*/
|
|
70
|
-
ref: ref
|
|
71
|
-
|
|
66
|
+
return /*#__PURE__*/jsxs("div", {
|
|
67
|
+
ref: ref,
|
|
68
|
+
...forwardedProps,
|
|
72
69
|
className: classNames(className, handleBasicClasses({
|
|
73
70
|
prefix: CLASSNAME,
|
|
74
71
|
isChecked,
|
|
@@ -76,43 +73,50 @@ const Switch = forwardRef((props, ref) => {
|
|
|
76
73
|
position,
|
|
77
74
|
theme,
|
|
78
75
|
isUnchecked: !isChecked
|
|
79
|
-
}))
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
76
|
+
})),
|
|
77
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
78
|
+
className: `${CLASSNAME}__input-wrapper`,
|
|
79
|
+
children: [/*#__PURE__*/jsx("input", {
|
|
80
|
+
type: "checkbox",
|
|
81
|
+
role: "switch",
|
|
82
|
+
id: inputId,
|
|
83
|
+
className: `${CLASSNAME}__input-native`,
|
|
84
|
+
name: name,
|
|
85
|
+
value: value,
|
|
86
|
+
...disabledStateProps,
|
|
87
|
+
readOnly: inputProps.readOnly || isAnyDisabled,
|
|
88
|
+
checked: isChecked,
|
|
89
|
+
"aria-checked": Boolean(isChecked),
|
|
90
|
+
onChange: handleChange,
|
|
91
|
+
"aria-describedby": helper ? `${inputId}-helper` : undefined,
|
|
92
|
+
...inputProps
|
|
93
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
94
|
+
className: `${CLASSNAME}__input-placeholder`,
|
|
95
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
96
|
+
className: `${CLASSNAME}__input-background`
|
|
97
|
+
}), /*#__PURE__*/jsx("div", {
|
|
98
|
+
className: `${CLASSNAME}__input-indicator`
|
|
99
|
+
})]
|
|
100
|
+
})]
|
|
101
|
+
}), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
|
|
102
|
+
className: `${CLASSNAME}__content`,
|
|
103
|
+
children: [/*#__PURE__*/jsx(InputLabel, {
|
|
104
|
+
htmlFor: inputId,
|
|
105
|
+
theme: theme,
|
|
106
|
+
className: `${CLASSNAME}__label`,
|
|
107
|
+
children: children
|
|
108
|
+
}), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
|
|
109
|
+
id: `${inputId}-helper`,
|
|
110
|
+
theme: theme,
|
|
111
|
+
className: `${CLASSNAME}__helper`,
|
|
112
|
+
children: helper
|
|
113
|
+
})]
|
|
114
|
+
})]
|
|
115
|
+
});
|
|
112
116
|
});
|
|
113
117
|
Switch.displayName = COMPONENT_NAME;
|
|
114
118
|
Switch.className = CLASSNAME;
|
|
115
119
|
Switch.defaultProps = DEFAULT_PROPS;
|
|
116
120
|
|
|
117
121
|
export { Switch };
|
|
118
|
-
//# sourceMappingURL=switch-
|
|
122
|
+
//# sourceMappingURL=switch-769a2a04.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch-
|
|
1
|
+
{"version":3,"file":"switch-769a2a04.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { Children, InputHTMLAttributes, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\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';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Defines the props of the component.\n */\nexport interface SwitchProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Helper text. */\n helper?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Native input name property. */\n name?: string;\n /** Position of the switch relative to the label. */\n position?: Extract<Alignment, 'right' | 'left'>;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Switch';\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<SwitchProps> = {\n position: Alignment.left,\n};\n\n/**\n * Switch component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n checked,\n children,\n className,\n helper,\n id,\n isChecked = checked,\n name,\n onChange,\n position = DEFAULT_PROPS.position,\n theme = defaultTheme,\n value,\n inputProps = {},\n ...forwardedProps\n } = otherProps;\n const generatedInputId = useId();\n const inputId = id || generatedInputId;\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isChecked,\n isDisabled: isAnyDisabled,\n position,\n theme,\n isUnchecked: !isChecked,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n name={name}\n value={value}\n {...disabledStateProps}\n readOnly={inputProps.readOnly || isAnyDisabled}\n checked={isChecked}\n aria-checked={Boolean(isChecked)}\n onChange={handleChange}\n aria-describedby={helper ? `${inputId}-helper` : undefined}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n <div className={`${CLASSNAME}__input-indicator`} />\n </div>\n </div>\n\n {Children.count(children) > 0 && (\n <div className={`${CLASSNAME}__content`}>\n <InputLabel htmlFor={inputId} theme={theme} className={`${CLASSNAME}__label`}>\n {children}\n </InputLabel>\n {!isEmpty(helper) && (\n <InputHelper id={`${inputId}-helper`} theme={theme} className={`${CLASSNAME}__helper`}>\n {helper}\n </InputHelper>\n )}\n </div>\n )}\n </div>\n );\n});\nSwitch.displayName = COMPONENT_NAME;\nSwitch.className = CLASSNAME;\nSwitch.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","position","Alignment","left","Switch","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","children","className","helper","id","isChecked","name","onChange","theme","value","inputProps","forwardedProps","generatedInputId","useId","inputId","handleChange","event","_jsxs","classNames","handleBasicClasses","prefix","isDisabled","isUnchecked","_jsx","type","role","readOnly","Boolean","undefined","Children","count","InputLabel","htmlFor","isEmpty","InputHelper","displayName","defaultProps"],"mappings":"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"}
|