@eightshift/ui-components 1.5.0 → 1.6.0

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 (38) hide show
  1. package/dist/{Dialog-DSquJZb-.js → Dialog-BdtBguys.js} +1 -1
  2. package/dist/Heading-DGnF6JDc.js +17 -0
  3. package/dist/List-Bx2anbX-.js +583 -0
  4. package/dist/{RSPContexts-DQtGvvpM.js → RSPContexts-2lR5GG9p.js} +2 -2
  5. package/dist/{Select-49a62830.esm-D8voKavK.js → Select-c7902d94.esm-DtzFQzf-.js} +6 -4
  6. package/dist/assets/style.css +1 -1
  7. package/dist/components/animated-visibility/animated-visibility.js +139 -118
  8. package/dist/components/checkbox/checkbox.js +1 -1
  9. package/dist/components/color-pickers/color-picker.js +18 -11
  10. package/dist/components/color-pickers/solid-color-picker.js +1 -1
  11. package/dist/components/component-toggle/component-toggle.js +44 -4
  12. package/dist/components/draggable/draggable-handle.js +45 -0
  13. package/dist/components/draggable/draggable.js +5138 -96
  14. package/dist/components/draggable-list/draggable-list-item.js +16 -25
  15. package/dist/components/draggable-list/draggable-list.js +54 -86
  16. package/dist/components/expandable/expandable.js +63 -40
  17. package/dist/components/index.js +6 -4
  18. package/dist/components/link-input/link-input.js +2 -2
  19. package/dist/components/menu/menu.js +2 -2
  20. package/dist/components/modal/modal.js +4 -15
  21. package/dist/components/options-panel/options-panel.js +55 -1
  22. package/dist/components/popover/popover.js +1 -1
  23. package/dist/components/repeater/repeater-item.js +76 -27
  24. package/dist/components/repeater/repeater.js +72 -5110
  25. package/dist/components/select/async-multi-select.js +1 -1
  26. package/dist/components/select/async-single-select.js +1 -1
  27. package/dist/components/select/multi-select.js +1 -1
  28. package/dist/components/select/single-select.js +1 -1
  29. package/dist/components/select/styles.js +1 -1
  30. package/dist/icons/jsx-svg.js +1 -1
  31. package/dist/index.js +6 -4
  32. package/dist/{react-jsx-parser.min-CAGfntg1.js → react-jsx-parser.min-sPC96O_U.js} +124 -85
  33. package/dist/{react-select-async.esm-DY-cP0QK.js → react-select-async.esm-CxA8wpeT.js} +1 -1
  34. package/dist/{react-select.esm-DNlXj0hV.js → react-select.esm-CeE7o5M9.js} +1 -1
  35. package/dist/{useMenuTrigger-BbwpSVmh.js → useMenuTrigger-CT2-BFLo.js} +1 -1
  36. package/package.json +14 -14
  37. package/dist/components/draggable/draggable-item.js +0 -66
  38. package/dist/swapy-qb4t7itb.js +0 -3059
@@ -1,5 +1,5 @@
1
1
  import { l as $df56164dff5785e2$export$4338b53315abf666, c as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, e as $bdb11010cef70236$export$f680877a34711e37, j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, n as $ff5963eb1fccf552$export$e08e3b67e392101e, d as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $bdb11010cef70236$export$b4cc09c592e8fdb8, a as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$45fda7c47f93fd48, p as $64fa3d84918910a7$export$6d3443f2c48bfc20, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, q as $64fa3d84918910a7$export$c62b8e45d58ddad9 } from "./utils-Du2x3YVu.js";
2
- import { a as $4e85f108e88277b8$export$d688439359537581 } from "./RSPContexts-DQtGvvpM.js";
2
+ import { $ as $4e85f108e88277b8$export$d688439359537581 } from "./RSPContexts-2lR5GG9p.js";
3
3
  import { b as $dd149f63282afbbf$export$f6211563215e3b37, c as $2a41e45df1593e64$export$d39e1813b3bdd0e1, $ as $fc909762b330b746$export$61c6a8c84e605fb6, d as $44f671af83e7d9e0$export$2de4954e8ae13b9f } from "./tooltip-srrt1p-b.js";
4
4
  import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.js";
5
5
  import { d as $ae1eeba8b9eafd08$export$5165eccb35aaadb5 } from "./usePress-Cs8K7gKw.js";
@@ -0,0 +1,17 @@
1
+ import { $ as $4e85f108e88277b8$export$d688439359537581 } from "./RSPContexts-2lR5GG9p.js";
2
+ import { a as $64fa3d84918910a7$export$29f1550f4b0d4415 } from "./utils-Du2x3YVu.js";
3
+ import React__default, { forwardRef } from "react";
4
+ function $5cb03073d3f54797$var$Heading(props, ref) {
5
+ [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$d688439359537581);
6
+ let { children, level = 3, className, ...domProps } = props;
7
+ let Element = `h${level}`;
8
+ return /* @__PURE__ */ React__default.createElement(Element, {
9
+ ...domProps,
10
+ ref,
11
+ className: className !== null && className !== void 0 ? className : "react-aria-Heading"
12
+ }, children);
13
+ }
14
+ const $5cb03073d3f54797$export$a8a3e93435678ff9 = /* @__PURE__ */ forwardRef($5cb03073d3f54797$var$Heading);
15
+ export {
16
+ $5cb03073d3f54797$export$a8a3e93435678ff9 as $
17
+ };
@@ -0,0 +1,583 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
+ import * as React from "react";
5
+ import { r as reactDomExports } from "./index-BTCzc3zb.js";
6
+ function arrayMove(array, from, to) {
7
+ array = array.slice();
8
+ array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
9
+ return array;
10
+ }
11
+ function arrayRemove(array, index) {
12
+ array = array.slice();
13
+ array.splice(index, 1);
14
+ return array;
15
+ }
16
+ function getTranslateOffset(element) {
17
+ const style = window.getComputedStyle(element);
18
+ return Math.max(parseInt(style["margin-top"], 10), parseInt(style["margin-bottom"], 10)) + element.getBoundingClientRect().height;
19
+ }
20
+ function isTouchEvent(event) {
21
+ return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length;
22
+ }
23
+ function transformItem(element, offsetY = 0, offsetX = 0) {
24
+ if (!element)
25
+ return;
26
+ if (offsetY === null || offsetX === null) {
27
+ element.style.removeProperty("transform");
28
+ return;
29
+ }
30
+ element.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
31
+ }
32
+ function setItemTransition(element, duration, timing) {
33
+ if (element) {
34
+ element.style["transition"] = `transform ${duration}ms${timing ? ` ${timing}` : ""}`;
35
+ }
36
+ }
37
+ function binarySearch(array, targetValue) {
38
+ let min = 0;
39
+ let max = array.length - 1;
40
+ let guess;
41
+ while (min <= max) {
42
+ guess = Math.floor((max + min) / 2);
43
+ if (!array[guess + 1] || array[guess] <= targetValue && array[guess + 1] >= targetValue) {
44
+ return guess;
45
+ } else if (array[guess] < targetValue && array[guess + 1] < targetValue) {
46
+ min = guess + 1;
47
+ } else {
48
+ max = guess - 1;
49
+ }
50
+ }
51
+ return -1;
52
+ }
53
+ const schd = (fn) => {
54
+ let lastArgs = [];
55
+ let frameId = null;
56
+ const wrapperFn = (...args) => {
57
+ lastArgs = args;
58
+ if (frameId) {
59
+ return;
60
+ }
61
+ frameId = requestAnimationFrame(() => {
62
+ frameId = null;
63
+ fn(...lastArgs);
64
+ });
65
+ };
66
+ wrapperFn.cancel = () => {
67
+ if (frameId) {
68
+ cancelAnimationFrame(frameId);
69
+ }
70
+ };
71
+ return wrapperFn;
72
+ };
73
+ function checkIfInteractive(target, rootElement) {
74
+ const DISABLED_ELEMENTS = [
75
+ "input",
76
+ "textarea",
77
+ "select",
78
+ "option",
79
+ "optgroup",
80
+ "video",
81
+ "audio",
82
+ "button",
83
+ "a"
84
+ ];
85
+ const DISABLED_ROLES = [
86
+ "button",
87
+ "link",
88
+ "checkbox",
89
+ "radio",
90
+ "switch",
91
+ "tab"
92
+ ];
93
+ while (target !== rootElement) {
94
+ if (target.getAttribute("data-movable-handle")) {
95
+ return false;
96
+ }
97
+ if (DISABLED_ELEMENTS.includes(target.tagName.toLowerCase())) {
98
+ return true;
99
+ }
100
+ const role = target.getAttribute("role");
101
+ if (role && DISABLED_ROLES.includes(role.toLowerCase())) {
102
+ return true;
103
+ }
104
+ if (target.tagName.toLowerCase() === "label" && target.hasAttribute("for")) {
105
+ return true;
106
+ }
107
+ if (target.tagName)
108
+ target = target.parentElement;
109
+ }
110
+ return false;
111
+ }
112
+ const AUTOSCROLL_ACTIVE_OFFSET = 200;
113
+ const AUTOSCROLL_SPEED_RATIO = 10;
114
+ const AUTOSCROLL_DELTA_THRESHOLD = 10;
115
+ class List extends React.Component {
116
+ constructor(props) {
117
+ super(props);
118
+ __publicField(this, "listRef", React.createRef());
119
+ __publicField(this, "ghostRef", React.createRef());
120
+ __publicField(this, "topOffsets", []);
121
+ __publicField(this, "itemTranslateOffsets", []);
122
+ __publicField(this, "initialYOffset", 0);
123
+ __publicField(this, "lastScroll", 0);
124
+ __publicField(this, "lastYOffset", 0);
125
+ __publicField(this, "lastListYOffset", 0);
126
+ __publicField(this, "dropTimeout");
127
+ __publicField(this, "needle", -1);
128
+ __publicField(this, "afterIndex", -2);
129
+ __publicField(this, "state", {
130
+ itemDragged: -1,
131
+ itemDraggedOutOfBounds: -1,
132
+ selectedItem: -1,
133
+ initialX: 0,
134
+ initialY: 0,
135
+ targetX: 0,
136
+ targetY: 0,
137
+ targetHeight: 0,
138
+ targetWidth: 0,
139
+ liveText: "",
140
+ scrollingSpeed: 0,
141
+ scrollWindow: false
142
+ });
143
+ __publicField(this, "schdOnMouseMove");
144
+ __publicField(this, "schdOnTouchMove");
145
+ __publicField(this, "schdOnEnd");
146
+ __publicField(this, "doScrolling", () => {
147
+ const { scrollingSpeed, scrollWindow } = this.state;
148
+ const listEl = this.listRef.current;
149
+ window.requestAnimationFrame(() => {
150
+ if (scrollWindow) {
151
+ window.scrollTo(window.pageXOffset, window.pageYOffset + scrollingSpeed * 1.5);
152
+ } else {
153
+ listEl.scrollTop += scrollingSpeed;
154
+ }
155
+ if (scrollingSpeed !== 0) {
156
+ this.doScrolling();
157
+ }
158
+ });
159
+ });
160
+ __publicField(this, "getChildren", () => {
161
+ if (this.listRef && this.listRef.current) {
162
+ return Array.from(this.listRef.current.children);
163
+ }
164
+ console.warn("No items found in the List container. Did you forget to pass & spread the `props` param in renderList?");
165
+ return [];
166
+ });
167
+ __publicField(this, "calculateOffsets", () => {
168
+ this.topOffsets = this.getChildren().map((item) => item.getBoundingClientRect().top);
169
+ this.itemTranslateOffsets = this.getChildren().map((item) => getTranslateOffset(item));
170
+ });
171
+ __publicField(this, "getTargetIndex", (e) => {
172
+ return this.getChildren().findIndex((child) => child === e.target || child.contains(e.target));
173
+ });
174
+ __publicField(this, "onMouseOrTouchStart", (e) => {
175
+ if (this.dropTimeout && this.state.itemDragged > -1) {
176
+ window.clearTimeout(this.dropTimeout);
177
+ this.finishDrop();
178
+ }
179
+ const isTouch = isTouchEvent(e);
180
+ if (!isTouch && e.button !== 0)
181
+ return;
182
+ const index = this.getTargetIndex(e);
183
+ if (index === -1 || this.props.disabled || // @ts-ignore
184
+ this.props.values[index] && this.props.values[index].disabled) {
185
+ if (this.state.selectedItem !== -1) {
186
+ this.setState({ selectedItem: -1 });
187
+ this.finishDrop();
188
+ }
189
+ return;
190
+ }
191
+ const listItemTouched = this.getChildren()[index];
192
+ const handle = listItemTouched.querySelector("[data-movable-handle]");
193
+ if (handle && !handle.contains(e.target)) {
194
+ return;
195
+ }
196
+ if (checkIfInteractive(e.target, listItemTouched)) {
197
+ return;
198
+ }
199
+ e.preventDefault();
200
+ this.props.beforeDrag && this.props.beforeDrag({
201
+ elements: this.getChildren(),
202
+ index
203
+ });
204
+ if (isTouch) {
205
+ const opts = { passive: false };
206
+ listItemTouched.style.touchAction = "none";
207
+ document.addEventListener("touchend", this.schdOnEnd, opts);
208
+ document.addEventListener("touchmove", this.schdOnTouchMove, opts);
209
+ document.addEventListener("touchcancel", this.schdOnEnd, opts);
210
+ } else {
211
+ document.addEventListener("mousemove", this.schdOnMouseMove);
212
+ document.addEventListener("mouseup", this.schdOnEnd);
213
+ const listItemDragged = this.getChildren()[this.state.itemDragged];
214
+ if (listItemDragged && listItemDragged.style) {
215
+ listItemDragged.style.touchAction = "";
216
+ }
217
+ }
218
+ this.onStart(listItemTouched, isTouch ? e.touches[0].clientX : e.clientX, isTouch ? e.touches[0].clientY : e.clientY, index);
219
+ });
220
+ __publicField(this, "getYOffset", () => {
221
+ const listScroll = this.listRef.current ? this.listRef.current.scrollTop : 0;
222
+ return window.pageYOffset + listScroll;
223
+ });
224
+ __publicField(this, "onStart", (target, clientX, clientY, index) => {
225
+ if (this.state.selectedItem > -1) {
226
+ this.setState({ selectedItem: -1 });
227
+ this.needle = -1;
228
+ }
229
+ const targetRect = target.getBoundingClientRect();
230
+ const targetStyles = window.getComputedStyle(target);
231
+ this.calculateOffsets();
232
+ this.initialYOffset = this.getYOffset();
233
+ this.lastYOffset = window.pageYOffset;
234
+ this.lastListYOffset = this.listRef.current.scrollTop;
235
+ this.setState({
236
+ itemDragged: index,
237
+ targetX: targetRect.left - parseInt(targetStyles["margin-left"], 10),
238
+ targetY: targetRect.top - parseInt(targetStyles["margin-top"], 10),
239
+ targetHeight: targetRect.height,
240
+ targetWidth: targetRect.width,
241
+ initialX: clientX,
242
+ initialY: clientY
243
+ });
244
+ });
245
+ __publicField(this, "onMouseMove", (e) => {
246
+ e.cancelable && e.preventDefault();
247
+ this.onMove(e.clientX, e.clientY);
248
+ });
249
+ __publicField(this, "onTouchMove", (e) => {
250
+ e.cancelable && e.preventDefault();
251
+ this.onMove(e.touches[0].clientX, e.touches[0].clientY);
252
+ });
253
+ __publicField(this, "onWheel", (e) => {
254
+ if (this.state.itemDragged < 0)
255
+ return;
256
+ this.lastScroll = this.listRef.current.scrollTop += e.deltaY;
257
+ this.moveOtherItems();
258
+ });
259
+ __publicField(this, "onMove", (clientX, clientY) => {
260
+ if (this.state.itemDragged === -1)
261
+ return null;
262
+ transformItem(this.ghostRef.current, clientY - this.state.initialY, this.props.lockVertically ? 0 : clientX - this.state.initialX);
263
+ this.autoScrolling(clientY, clientY - this.state.initialY);
264
+ this.moveOtherItems();
265
+ });
266
+ __publicField(this, "moveOtherItems", () => {
267
+ const targetRect = this.ghostRef.current.getBoundingClientRect();
268
+ const itemVerticalCenter = targetRect.top + targetRect.height / 2;
269
+ const offset = getTranslateOffset(this.getChildren()[this.state.itemDragged]);
270
+ const currentYOffset = this.getYOffset();
271
+ if (this.initialYOffset !== currentYOffset) {
272
+ this.topOffsets = this.topOffsets.map((offset2) => offset2 - (currentYOffset - this.initialYOffset));
273
+ this.initialYOffset = currentYOffset;
274
+ }
275
+ if (this.isDraggedItemOutOfBounds() && this.props.removableByMove) {
276
+ this.afterIndex = this.topOffsets.length + 1;
277
+ } else {
278
+ this.afterIndex = binarySearch(this.topOffsets, itemVerticalCenter);
279
+ }
280
+ this.animateItems(this.afterIndex === -1 ? 0 : this.afterIndex, this.state.itemDragged, offset);
281
+ });
282
+ __publicField(this, "autoScrolling", (clientY, delta) => {
283
+ const { top, bottom, height } = this.listRef.current.getBoundingClientRect();
284
+ const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
285
+ if (bottom > viewportHeight && viewportHeight - clientY < AUTOSCROLL_ACTIVE_OFFSET && delta > AUTOSCROLL_DELTA_THRESHOLD) {
286
+ this.setState({
287
+ scrollingSpeed: Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (viewportHeight - clientY)) / AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
288
+ scrollWindow: true
289
+ });
290
+ } else if (top < 0 && clientY < AUTOSCROLL_ACTIVE_OFFSET && delta < -AUTOSCROLL_DELTA_THRESHOLD) {
291
+ this.setState({
292
+ scrollingSpeed: Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - clientY) / -AUTOSCROLL_SPEED_RATIO), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
293
+ scrollWindow: true
294
+ });
295
+ } else {
296
+ if (this.state.scrollWindow && this.state.scrollingSpeed !== 0) {
297
+ this.setState({ scrollingSpeed: 0, scrollWindow: false });
298
+ }
299
+ if (height + 20 < this.listRef.current.scrollHeight) {
300
+ let scrollingSpeed = 0;
301
+ if (clientY - top < AUTOSCROLL_ACTIVE_OFFSET && delta < -AUTOSCROLL_DELTA_THRESHOLD) {
302
+ scrollingSpeed = Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (clientY - top)) / -AUTOSCROLL_SPEED_RATIO), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
303
+ } else if (bottom - clientY < AUTOSCROLL_ACTIVE_OFFSET && delta > AUTOSCROLL_DELTA_THRESHOLD) {
304
+ scrollingSpeed = Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (bottom - clientY)) / AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
305
+ }
306
+ if (this.state.scrollingSpeed !== scrollingSpeed) {
307
+ this.setState({ scrollingSpeed });
308
+ }
309
+ }
310
+ }
311
+ });
312
+ __publicField(this, "animateItems", (needle, movedItem, offset, animateMovedItem = false) => {
313
+ this.getChildren().forEach((item, i) => {
314
+ setItemTransition(item, this.props.transitionDuration);
315
+ if (movedItem === i && animateMovedItem) {
316
+ if (movedItem === needle) {
317
+ return transformItem(item, null);
318
+ }
319
+ transformItem(item, movedItem < needle ? this.itemTranslateOffsets.slice(movedItem + 1, needle + 1).reduce((a, b) => a + b, 0) : this.itemTranslateOffsets.slice(needle, movedItem).reduce((a, b) => a + b, 0) * -1);
320
+ } else if (movedItem < needle && i > movedItem && i <= needle) {
321
+ transformItem(item, -offset);
322
+ } else if (i < movedItem && movedItem > needle && i >= needle) {
323
+ transformItem(item, offset);
324
+ } else {
325
+ transformItem(item, null);
326
+ }
327
+ });
328
+ });
329
+ __publicField(this, "isDraggedItemOutOfBounds", () => {
330
+ const initialRect = this.getChildren()[this.state.itemDragged].getBoundingClientRect();
331
+ const targetRect = this.ghostRef.current.getBoundingClientRect();
332
+ if (Math.abs(initialRect.left - targetRect.left) > targetRect.width) {
333
+ if (this.state.itemDraggedOutOfBounds === -1) {
334
+ this.setState({ itemDraggedOutOfBounds: this.state.itemDragged });
335
+ }
336
+ return true;
337
+ }
338
+ if (this.state.itemDraggedOutOfBounds > -1) {
339
+ this.setState({ itemDraggedOutOfBounds: -1 });
340
+ }
341
+ return false;
342
+ });
343
+ __publicField(this, "onEnd", (e) => {
344
+ e.cancelable && e.preventDefault();
345
+ document.removeEventListener("mousemove", this.schdOnMouseMove);
346
+ document.removeEventListener("touchmove", this.schdOnTouchMove);
347
+ document.removeEventListener("mouseup", this.schdOnEnd);
348
+ document.removeEventListener("touchup", this.schdOnEnd);
349
+ document.removeEventListener("touchcancel", this.schdOnEnd);
350
+ const removeItem = this.props.removableByMove && this.isDraggedItemOutOfBounds();
351
+ if (!removeItem && this.props.transitionDuration > 0 && this.afterIndex !== -2) {
352
+ schd(() => {
353
+ setItemTransition(this.ghostRef.current, this.props.transitionDuration, "cubic-bezier(.2,1,.1,1)");
354
+ if (this.afterIndex < 1 && this.state.itemDragged === 0) {
355
+ transformItem(this.ghostRef.current, 0, 0);
356
+ } else {
357
+ transformItem(
358
+ this.ghostRef.current,
359
+ // compensate window scroll
360
+ -(window.pageYOffset - this.lastYOffset) + // compensate container scroll
361
+ -(this.listRef.current.scrollTop - this.lastListYOffset) + (this.state.itemDragged < this.afterIndex ? this.itemTranslateOffsets.slice(this.state.itemDragged + 1, this.afterIndex + 1).reduce((a, b) => a + b, 0) : this.itemTranslateOffsets.slice(this.afterIndex < 0 ? 0 : this.afterIndex, this.state.itemDragged).reduce((a, b) => a + b, 0) * -1),
362
+ 0
363
+ );
364
+ }
365
+ })();
366
+ }
367
+ this.dropTimeout = window.setTimeout(this.finishDrop, removeItem || this.afterIndex === -2 ? 0 : this.props.transitionDuration);
368
+ });
369
+ __publicField(this, "finishDrop", () => {
370
+ const removeItem = this.props.removableByMove && this.isDraggedItemOutOfBounds();
371
+ if (removeItem || this.afterIndex > -2 && this.state.itemDragged !== this.afterIndex) {
372
+ this.props.onChange({
373
+ oldIndex: this.state.itemDragged,
374
+ newIndex: removeItem ? -1 : Math.max(this.afterIndex, 0),
375
+ targetRect: this.ghostRef.current.getBoundingClientRect()
376
+ });
377
+ }
378
+ this.getChildren().forEach((item) => {
379
+ setItemTransition(item, 0);
380
+ transformItem(item, null);
381
+ item.style.touchAction = "";
382
+ });
383
+ this.setState({ itemDragged: -1, scrollingSpeed: 0 });
384
+ this.afterIndex = -2;
385
+ if (this.lastScroll > 0) {
386
+ this.listRef.current.scrollTop = this.lastScroll;
387
+ this.lastScroll = 0;
388
+ }
389
+ });
390
+ __publicField(this, "onKeyDown", (e) => {
391
+ const selectedItem = this.state.selectedItem;
392
+ const index = this.getTargetIndex(e);
393
+ if (checkIfInteractive(e.target, e.currentTarget)) {
394
+ return;
395
+ }
396
+ if (index === -1)
397
+ return;
398
+ if (e.key === " ") {
399
+ e.preventDefault();
400
+ if (selectedItem === index) {
401
+ if (selectedItem !== this.needle) {
402
+ this.getChildren().forEach((item) => {
403
+ setItemTransition(item, 0);
404
+ transformItem(item, null);
405
+ });
406
+ this.props.onChange({
407
+ oldIndex: selectedItem,
408
+ newIndex: this.needle,
409
+ targetRect: this.getChildren()[this.needle].getBoundingClientRect()
410
+ });
411
+ this.getChildren()[this.needle].focus();
412
+ }
413
+ this.setState({
414
+ selectedItem: -1,
415
+ liveText: this.props.voiceover.dropped(selectedItem + 1, this.needle + 1)
416
+ });
417
+ this.needle = -1;
418
+ } else {
419
+ this.setState({
420
+ selectedItem: index,
421
+ liveText: this.props.voiceover.lifted(index + 1)
422
+ });
423
+ this.needle = index;
424
+ this.calculateOffsets();
425
+ }
426
+ }
427
+ if ((e.key === "ArrowDown" || e.key === "j") && selectedItem > -1 && this.needle < this.props.values.length - 1) {
428
+ e.preventDefault();
429
+ const offset = getTranslateOffset(this.getChildren()[selectedItem]);
430
+ this.needle++;
431
+ this.animateItems(this.needle, selectedItem, offset, true);
432
+ this.setState({
433
+ liveText: this.props.voiceover.moved(this.needle + 1, false)
434
+ });
435
+ }
436
+ if ((e.key === "ArrowUp" || e.key === "k") && selectedItem > -1 && this.needle > 0) {
437
+ e.preventDefault();
438
+ const offset = getTranslateOffset(this.getChildren()[selectedItem]);
439
+ this.needle--;
440
+ this.animateItems(this.needle, selectedItem, offset, true);
441
+ this.setState({
442
+ liveText: this.props.voiceover.moved(this.needle + 1, true)
443
+ });
444
+ }
445
+ if (e.key === "Escape" && selectedItem > -1) {
446
+ this.getChildren().forEach((item) => {
447
+ setItemTransition(item, 0);
448
+ transformItem(item, null);
449
+ });
450
+ this.setState({
451
+ selectedItem: -1,
452
+ liveText: this.props.voiceover.canceled(selectedItem + 1)
453
+ });
454
+ this.needle = -1;
455
+ }
456
+ if ((e.key === "Tab" || e.key === "Enter") && selectedItem > -1) {
457
+ e.preventDefault();
458
+ }
459
+ });
460
+ this.schdOnMouseMove = schd(this.onMouseMove);
461
+ this.schdOnTouchMove = schd(this.onTouchMove);
462
+ this.schdOnEnd = schd(this.onEnd);
463
+ }
464
+ componentDidMount() {
465
+ this.calculateOffsets();
466
+ document.addEventListener("touchstart", this.onMouseOrTouchStart, {
467
+ passive: false,
468
+ capture: false
469
+ });
470
+ document.addEventListener("mousedown", this.onMouseOrTouchStart);
471
+ }
472
+ componentDidUpdate(_prevProps, prevState) {
473
+ if (prevState.scrollingSpeed !== this.state.scrollingSpeed && prevState.scrollingSpeed === 0) {
474
+ this.doScrolling();
475
+ }
476
+ }
477
+ componentWillUnmount() {
478
+ document.removeEventListener("touchstart", this.onMouseOrTouchStart);
479
+ document.removeEventListener("mousedown", this.onMouseOrTouchStart);
480
+ if (this.dropTimeout) {
481
+ window.clearTimeout(this.dropTimeout);
482
+ }
483
+ this.schdOnMouseMove.cancel();
484
+ this.schdOnTouchMove.cancel();
485
+ this.schdOnEnd.cancel();
486
+ }
487
+ render() {
488
+ const baseStyle = {
489
+ userSelect: "none",
490
+ WebkitUserSelect: "none",
491
+ MozUserSelect: "none",
492
+ msUserSelect: "none",
493
+ boxSizing: "border-box",
494
+ position: "relative"
495
+ };
496
+ const ghostStyle = {
497
+ ...baseStyle,
498
+ top: this.state.targetY,
499
+ left: this.state.targetX,
500
+ width: this.state.targetWidth,
501
+ height: this.state.targetHeight,
502
+ position: "fixed",
503
+ marginTop: 0
504
+ };
505
+ return React.createElement(
506
+ React.Fragment,
507
+ null,
508
+ this.props.renderList({
509
+ children: this.props.values.map((value, index) => {
510
+ const isHidden = index === this.state.itemDragged;
511
+ const isSelected = index === this.state.selectedItem;
512
+ const isDisabled = Boolean(this.props.disabled || this.props.values[index] && typeof this.props.values[index] === "object" && // @ts-expect-error value doesn't necessarily have a `disabled` property
513
+ this.props.values[index].disabled);
514
+ const props = {
515
+ key: index,
516
+ tabIndex: isDisabled ? -1 : 0,
517
+ "aria-roledescription": this.props.voiceover.item(index + 1),
518
+ onKeyDown: this.onKeyDown,
519
+ style: {
520
+ ...baseStyle,
521
+ visibility: isHidden ? "hidden" : void 0,
522
+ zIndex: isSelected ? 5e3 : 0
523
+ }
524
+ };
525
+ return this.props.renderItem({
526
+ value,
527
+ props,
528
+ index,
529
+ isDragged: false,
530
+ isSelected,
531
+ isOutOfBounds: false,
532
+ isDisabled
533
+ });
534
+ }),
535
+ isDragged: this.state.itemDragged > -1,
536
+ props: {
537
+ ref: this.listRef
538
+ }
539
+ }),
540
+ this.state.itemDragged > -1 && reactDomExports.createPortal(this.props.renderItem({
541
+ value: this.props.values[this.state.itemDragged],
542
+ props: {
543
+ ref: this.ghostRef,
544
+ style: ghostStyle,
545
+ onWheel: this.onWheel
546
+ },
547
+ index: this.state.itemDragged,
548
+ isDragged: true,
549
+ isSelected: false,
550
+ isDisabled: false,
551
+ isOutOfBounds: this.state.itemDraggedOutOfBounds > -1
552
+ }), this.props.container || document.body),
553
+ React.createElement("div", { "aria-live": "assertive", role: "log", "aria-atomic": "true", style: {
554
+ position: "absolute",
555
+ width: "1px",
556
+ height: "1px",
557
+ margin: "-1px",
558
+ border: "0px",
559
+ padding: "0px",
560
+ overflow: "hidden",
561
+ clip: "rect(0px, 0px, 0px, 0px)",
562
+ clipPath: "inset(100%)"
563
+ } }, this.state.liveText)
564
+ );
565
+ }
566
+ }
567
+ __publicField(List, "defaultProps", {
568
+ transitionDuration: 300,
569
+ lockVertically: false,
570
+ removableByMove: false,
571
+ voiceover: {
572
+ item: (position) => `You are currently at a draggable item at position ${position}. Press space bar to lift.`,
573
+ lifted: (position) => `You have lifted item at position ${position}. Press j to move down, k to move up, space bar to drop and escape to cancel.`,
574
+ moved: (position, up) => `You have moved the lifted item ${up ? "up" : "down"} to position ${position}. Press j to move down, k to move up, space bar to drop and escape to cancel.`,
575
+ dropped: (from, to) => `You have dropped the item. It has moved from position ${from} to ${to}.`,
576
+ canceled: (position) => `You have cancelled the movement. The item has returned to its starting position of ${position}.`
577
+ }
578
+ });
579
+ export {
580
+ List as L,
581
+ arrayRemove as a,
582
+ arrayMove as b
583
+ };
@@ -6,8 +6,8 @@ const $4e85f108e88277b8$export$717b2c0a523a0b53 = createContext(null);
6
6
  createContext(null);
7
7
  const $4e85f108e88277b8$export$d688439359537581 = createContext({});
8
8
  export {
9
- $4e85f108e88277b8$export$b085522c77523c51 as $,
10
- $4e85f108e88277b8$export$d688439359537581 as a,
9
+ $4e85f108e88277b8$export$d688439359537581 as $,
10
+ $4e85f108e88277b8$export$b085522c77523c51 as a,
11
11
  $4e85f108e88277b8$export$ebe63fadcdce34ed as b,
12
12
  $4e85f108e88277b8$export$44644b8a16031b5b as c,
13
13
  $4e85f108e88277b8$export$717b2c0a523a0b53 as d
@@ -1310,10 +1310,12 @@ var Select = /* @__PURE__ */ function(_Component) {
1310
1310
  var lastSelectedValue = selectValue[selectValue.length - 1];
1311
1311
  var newValueArray = selectValue.slice(0, selectValue.length - 1);
1312
1312
  var newValue = valueTernary(isMulti, newValueArray, newValueArray[0] || null);
1313
- _this.onChange(newValue, {
1314
- action: "pop-value",
1315
- removedValue: lastSelectedValue
1316
- });
1313
+ if (lastSelectedValue) {
1314
+ _this.onChange(newValue, {
1315
+ action: "pop-value",
1316
+ removedValue: lastSelectedValue
1317
+ });
1318
+ }
1317
1319
  };
1318
1320
  _this.getFocusedOptionId = function(focusedOption) {
1319
1321
  return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);