@eightshift/ui-components 5.0.10 → 5.1.1

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 (85) hide show
  1. package/dist/{Collection-uTAXq9Br.js → Collection-BRJOMbOa.js} +12 -7
  2. package/dist/{Dialog-CmAxaSUv.js → Dialog-D6EdDPeu.js} +8 -8
  3. package/dist/{useFormValidation-Dy0PXJg5.js → Form-Bnyyv3Im.js} +6 -4
  4. package/dist/{Group-DDPhPPTQ.js → Group-LBogWgyp.js} +2 -2
  5. package/dist/{Input-BmDS8Juy.js → Input-DfSBLhDx.js} +1 -1
  6. package/dist/List-BLeHBkfx.js +590 -0
  7. package/dist/{ListBox-_nDFq8-H.js → ListBox-BY3gwI8c.js} +3 -3
  8. package/dist/Select-BebwUgKB.js +764 -0
  9. package/dist/Separator-CTQWg_HO.js +1111 -0
  10. package/dist/TextField-o2U-uBWv.js +133 -0
  11. package/dist/assets/style-admin.css +264 -150
  12. package/dist/assets/style-editor.css +264 -150
  13. package/dist/assets/style.css +264 -150
  14. package/dist/assets/wp-font-enhancements.css +1 -1
  15. package/dist/assets/wp-ui-enhancements.css +1 -1
  16. package/dist/components/base-control/base-control.js +1 -1
  17. package/dist/components/breakpoint-preview/breakpoint-preview.js +3 -4
  18. package/dist/components/button/button.js +3 -3
  19. package/dist/components/checkbox/checkbox.js +1 -2
  20. package/dist/components/color-pickers/color-picker.js +7 -9
  21. package/dist/components/color-pickers/color-swatch.js +1 -1
  22. package/dist/components/color-pickers/gradient-editor.js +19 -25
  23. package/dist/components/color-pickers/solid-color-picker.js +27 -27
  24. package/dist/components/component-toggle/component-toggle.js +1 -1
  25. package/dist/components/draggable/draggable-handle.js +2 -2
  26. package/dist/components/draggable/draggable.js +5 -5
  27. package/dist/components/draggable-list/draggable-list-item.js +2 -2
  28. package/dist/components/draggable-list/draggable-list.js +5 -5
  29. package/dist/components/expandable/expandable.js +1 -1
  30. package/dist/components/index.js +5 -5
  31. package/dist/components/input-field/input-field.js +14 -129
  32. package/dist/components/item-collection/item-collection.js +1 -1
  33. package/dist/components/link-input/link-input.js +1463 -17
  34. package/dist/components/matrix-align/matrix-align.js +11 -14
  35. package/dist/components/menu/menu.js +4 -8
  36. package/dist/components/modal/modal.js +30 -31
  37. package/dist/components/number-picker/number-picker.js +9 -10
  38. package/dist/components/option-select/option-select.js +140 -156
  39. package/dist/components/placeholders/file-placeholder.js +1 -1
  40. package/dist/components/placeholders/image-placeholder.js +3 -3
  41. package/dist/components/placeholders/media-placeholder.js +2 -2
  42. package/dist/components/popover/popover.js +10 -5
  43. package/dist/components/radio/radio.js +4 -5
  44. package/dist/components/repeater/repeater-item.js +1 -1
  45. package/dist/components/repeater/repeater.js +6 -6
  46. package/dist/components/responsive/mini-responsive.js +45 -47
  47. package/dist/components/responsive/responsive-legacy.js +51 -55
  48. package/dist/components/responsive/responsive.js +47 -49
  49. package/dist/components/responsive-preview/responsive-preview.js +12 -15
  50. package/dist/components/select/async-multi-select.js +4 -4
  51. package/dist/components/select/async-single-select.js +1 -1
  52. package/dist/components/select/multi-select-components.js +1 -1
  53. package/dist/components/select/multi-select.js +4 -4
  54. package/dist/components/select/shared.js +2 -2
  55. package/dist/components/select/single-select.js +1 -1
  56. package/dist/components/select/styles.js +3 -3
  57. package/dist/components/select/v2/async-select.js +216 -158
  58. package/dist/components/select/v2/shared.js +29 -20
  59. package/dist/components/select/v2/single-select.js +203 -851
  60. package/dist/components/slider/column-config-slider.js +2 -2
  61. package/dist/components/slider/slider.js +2 -2
  62. package/dist/components/slider/utils.js +1 -1
  63. package/dist/components/tabs/tabs.js +7 -8
  64. package/dist/components/toggle/switch.js +4 -3
  65. package/dist/components/toggle-button/toggle-button.js +1 -1
  66. package/dist/{default-i18n-CT_oS1Fy.js → default-i18n-OFa3zAyB.js} +5 -9
  67. package/dist/icons/icons.js +141 -141
  68. package/dist/icons/jsx-svg.js +3 -4
  69. package/dist/index.js +4 -4
  70. package/dist/{multi-select-components-Sp-JEFEX.js → multi-select-components-BcKzA24f.js} +3 -3
  71. package/dist/{react-jsx-parser.min-DZCiis5V.js → react-jsx-parser.min-LF707GK8.js} +312 -332
  72. package/dist/useAsyncList-fLtZMvJO.js +420 -0
  73. package/dist/useFilter-BR5z1A4Q.js +50 -0
  74. package/dist/{useListState-9Hq_FiRF.js → useListState-BrZ2XvDS.js} +1 -1
  75. package/dist/{useNumberField-D0u2bh8g.js → useNumberField-y0dLc_6m.js} +2 -2
  76. package/dist/{useSingleSelectListState-DqhemUIh.js → useSingleSelectListState-Bh46cRXs.js} +1 -1
  77. package/dist/utilities/array-helpers.js +4 -7
  78. package/dist/utilities/es-dash.js +21 -3
  79. package/dist/utilities/index.js +2 -1
  80. package/dist/utilities/text-helpers.js +3 -3
  81. package/package.json +9 -9
  82. package/dist/ComboBox-BANSEKnb.js +0 -1915
  83. package/dist/Form-Cq3fu75_.js +0 -5
  84. package/dist/List-CZMUbkFU.js +0 -593
  85. package/dist/Separator-BN3mjL6q.js +0 -332
@@ -1,5 +0,0 @@
1
- import { createContext } from "react";
2
- const $d3e0e05bdfcf66bd$export$c24727297075ec6a = /* @__PURE__ */ createContext(null);
3
- export {
4
- $d3e0e05bdfcf66bd$export$c24727297075ec6a as $
5
- };
@@ -1,593 +0,0 @@
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-CFozsmNS.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
- if (!target || !rootElement)
94
- return false;
95
- while (target !== rootElement) {
96
- if (target.getAttribute("data-movable-handle")) {
97
- return false;
98
- }
99
- if (DISABLED_ELEMENTS.includes(target.tagName.toLowerCase())) {
100
- return true;
101
- }
102
- const role = target.getAttribute("role");
103
- if (role && DISABLED_ROLES.includes(role.toLowerCase())) {
104
- return true;
105
- }
106
- if (target.tagName.toLowerCase() === "label" && target.hasAttribute("for")) {
107
- return true;
108
- }
109
- if (target.tagName)
110
- target = target.parentElement;
111
- }
112
- return false;
113
- }
114
- const AUTOSCROLL_ACTIVE_OFFSET = 200;
115
- const AUTOSCROLL_SPEED_RATIO = 10;
116
- const AUTOSCROLL_DELTA_THRESHOLD = 10;
117
- class List extends React.Component {
118
- constructor(props) {
119
- super(props);
120
- __publicField(this, "listRef", React.createRef());
121
- __publicField(this, "ghostRef", React.createRef());
122
- __publicField(this, "topOffsets", []);
123
- __publicField(this, "itemTranslateOffsets", []);
124
- __publicField(this, "initialYOffset", 0);
125
- __publicField(this, "lastScroll", 0);
126
- __publicField(this, "lastYOffset", 0);
127
- __publicField(this, "lastListYOffset", 0);
128
- __publicField(this, "dropTimeout");
129
- __publicField(this, "needle", -1);
130
- __publicField(this, "afterIndex", -2);
131
- __publicField(this, "state", {
132
- itemDragged: -1,
133
- itemDraggedOutOfBounds: -1,
134
- selectedItem: -1,
135
- initialX: 0,
136
- initialY: 0,
137
- targetX: 0,
138
- targetY: 0,
139
- targetHeight: 0,
140
- targetWidth: 0,
141
- liveText: "",
142
- scrollingSpeed: 0,
143
- scrollWindow: false
144
- });
145
- __publicField(this, "schdOnMouseMove");
146
- __publicField(this, "schdOnTouchMove");
147
- __publicField(this, "schdOnEnd");
148
- __publicField(this, "doScrolling", () => {
149
- const { scrollingSpeed, scrollWindow } = this.state;
150
- const listEl = this.listRef.current;
151
- window.requestAnimationFrame(() => {
152
- if (scrollWindow) {
153
- window.scrollTo(window.pageXOffset, window.pageYOffset + scrollingSpeed * 1.5);
154
- } else {
155
- listEl.scrollTop += scrollingSpeed;
156
- }
157
- if (scrollingSpeed !== 0) {
158
- this.doScrolling();
159
- }
160
- });
161
- });
162
- __publicField(this, "getChildren", () => {
163
- if (this.listRef && this.listRef.current) {
164
- return Array.from(this.listRef.current.children);
165
- }
166
- console.warn("No items found in the List container. Did you forget to pass & spread the `props` param in renderList?");
167
- return [];
168
- });
169
- __publicField(this, "calculateOffsets", () => {
170
- this.topOffsets = this.getChildren().map((item) => item.getBoundingClientRect().top);
171
- this.itemTranslateOffsets = this.getChildren().map((item) => getTranslateOffset(item));
172
- });
173
- __publicField(this, "getTargetIndex", (e) => {
174
- return this.getChildren().findIndex((child) => child === e.target || child.contains(e.target));
175
- });
176
- __publicField(this, "onMouseOrTouchStart", (e) => {
177
- if (this.dropTimeout && this.state.itemDragged > -1) {
178
- window.clearTimeout(this.dropTimeout);
179
- this.finishDrop();
180
- }
181
- const isTouch = isTouchEvent(e);
182
- if (!isTouch && e.button !== 0)
183
- return;
184
- const index = this.getTargetIndex(e);
185
- if (index === -1 || this.props.disabled || // @ts-ignore
186
- this.props.values[index] && this.props.values[index].disabled) {
187
- if (this.state.selectedItem !== -1) {
188
- this.setState({ selectedItem: -1 });
189
- this.finishDrop();
190
- }
191
- return;
192
- }
193
- const listItemTouched = this.getChildren()[index];
194
- const handle = listItemTouched.querySelector("[data-movable-handle]");
195
- if (handle && !handle.contains(e.target)) {
196
- return;
197
- }
198
- if (checkIfInteractive(e.target, listItemTouched)) {
199
- return;
200
- }
201
- e.preventDefault();
202
- this.props.beforeDrag && this.props.beforeDrag({
203
- elements: this.getChildren(),
204
- index
205
- });
206
- if (isTouch) {
207
- const opts = { passive: false };
208
- listItemTouched.style.touchAction = "none";
209
- document.addEventListener("touchend", this.schdOnEnd, opts);
210
- document.addEventListener("touchmove", this.schdOnTouchMove, opts);
211
- document.addEventListener("touchcancel", this.schdOnEnd, opts);
212
- } else {
213
- document.addEventListener("mousemove", this.schdOnMouseMove);
214
- document.addEventListener("mouseup", this.schdOnEnd);
215
- const listItemDragged = this.getChildren()[this.state.itemDragged];
216
- if (listItemDragged && listItemDragged.style) {
217
- listItemDragged.style.touchAction = "";
218
- }
219
- }
220
- this.onStart(listItemTouched, isTouch ? e.touches[0].clientX : e.clientX, isTouch ? e.touches[0].clientY : e.clientY, index);
221
- });
222
- __publicField(this, "getYOffset", () => {
223
- const listScroll = this.listRef.current ? this.listRef.current.scrollTop : 0;
224
- return window.pageYOffset + listScroll;
225
- });
226
- __publicField(this, "onStart", (target, clientX, clientY, index) => {
227
- if (this.state.selectedItem > -1) {
228
- this.setState({ selectedItem: -1 });
229
- this.needle = -1;
230
- }
231
- const targetRect = target.getBoundingClientRect();
232
- const targetStyles = window.getComputedStyle(target);
233
- this.calculateOffsets();
234
- this.initialYOffset = this.getYOffset();
235
- this.lastYOffset = window.pageYOffset;
236
- this.lastListYOffset = this.listRef.current.scrollTop;
237
- this.setState({
238
- itemDragged: index,
239
- targetX: targetRect.left - parseInt(targetStyles["margin-left"], 10),
240
- targetY: targetRect.top - parseInt(targetStyles["margin-top"], 10),
241
- targetHeight: targetRect.height,
242
- targetWidth: targetRect.width,
243
- initialX: clientX,
244
- initialY: clientY
245
- });
246
- });
247
- __publicField(this, "onMouseMove", (e) => {
248
- e.cancelable && e.preventDefault();
249
- this.onMove(e.clientX, e.clientY);
250
- });
251
- __publicField(this, "onTouchMove", (e) => {
252
- e.cancelable && e.preventDefault();
253
- this.onMove(e.touches[0].clientX, e.touches[0].clientY);
254
- });
255
- __publicField(this, "onWheel", (e) => {
256
- if (this.state.itemDragged < 0)
257
- return;
258
- this.lastScroll = this.listRef.current.scrollTop += e.deltaY;
259
- this.moveOtherItems();
260
- });
261
- __publicField(this, "onMove", (clientX, clientY) => {
262
- if (this.state.itemDragged === -1)
263
- return null;
264
- transformItem(this.ghostRef.current, clientY - this.state.initialY, this.props.lockVertically ? 0 : clientX - this.state.initialX);
265
- this.autoScrolling(clientY, clientY - this.state.initialY);
266
- this.moveOtherItems();
267
- });
268
- __publicField(this, "moveOtherItems", () => {
269
- const targetRect = this.ghostRef.current.getBoundingClientRect();
270
- const itemVerticalCenter = targetRect.top + targetRect.height / 2;
271
- const offset = getTranslateOffset(this.getChildren()[this.state.itemDragged]);
272
- const currentYOffset = this.getYOffset();
273
- if (this.initialYOffset !== currentYOffset) {
274
- this.topOffsets = this.topOffsets.map((offset2) => offset2 - (currentYOffset - this.initialYOffset));
275
- this.initialYOffset = currentYOffset;
276
- }
277
- if (this.isDraggedItemOutOfBounds() && this.props.removableByMove) {
278
- this.afterIndex = this.topOffsets.length + 1;
279
- } else {
280
- this.afterIndex = binarySearch(this.topOffsets, itemVerticalCenter);
281
- }
282
- this.animateItems(this.afterIndex === -1 ? 0 : this.afterIndex, this.state.itemDragged, offset);
283
- });
284
- __publicField(this, "autoScrolling", (clientY, delta) => {
285
- const { top, bottom, height } = this.listRef.current.getBoundingClientRect();
286
- const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
287
- if (bottom > viewportHeight && viewportHeight - clientY < AUTOSCROLL_ACTIVE_OFFSET && delta > AUTOSCROLL_DELTA_THRESHOLD) {
288
- this.setState({
289
- scrollingSpeed: Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (viewportHeight - clientY)) / AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
290
- scrollWindow: true
291
- });
292
- } else if (top < 0 && clientY < AUTOSCROLL_ACTIVE_OFFSET && delta < -10) {
293
- this.setState({
294
- scrollingSpeed: Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - clientY) / -10), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
295
- scrollWindow: true
296
- });
297
- } else {
298
- if (this.state.scrollWindow && this.state.scrollingSpeed !== 0) {
299
- this.setState({ scrollingSpeed: 0, scrollWindow: false });
300
- }
301
- if (height + 20 < this.listRef.current.scrollHeight) {
302
- let scrollingSpeed = 0;
303
- if (clientY - top < AUTOSCROLL_ACTIVE_OFFSET && delta < -10) {
304
- scrollingSpeed = Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (clientY - top)) / -10), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
305
- } else if (bottom - clientY < AUTOSCROLL_ACTIVE_OFFSET && delta > AUTOSCROLL_DELTA_THRESHOLD) {
306
- scrollingSpeed = Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (bottom - clientY)) / AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
307
- }
308
- if (this.state.scrollingSpeed !== scrollingSpeed) {
309
- this.setState({ scrollingSpeed });
310
- }
311
- }
312
- }
313
- });
314
- __publicField(this, "animateItems", (needle, movedItem, offset, animateMovedItem = false) => {
315
- this.getChildren().forEach((item, i) => {
316
- setItemTransition(item, this.props.transitionDuration);
317
- if (movedItem === i && animateMovedItem) {
318
- if (movedItem === needle) {
319
- return transformItem(item, null);
320
- }
321
- 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);
322
- } else if (movedItem < needle && i > movedItem && i <= needle) {
323
- transformItem(item, -offset);
324
- } else if (i < movedItem && movedItem > needle && i >= needle) {
325
- transformItem(item, offset);
326
- } else {
327
- transformItem(item, null);
328
- }
329
- });
330
- });
331
- __publicField(this, "isDraggedItemOutOfBounds", () => {
332
- const initialRect = this.getChildren()[this.state.itemDragged].getBoundingClientRect();
333
- const targetRect = this.ghostRef.current.getBoundingClientRect();
334
- if (Math.abs(initialRect.left - targetRect.left) > targetRect.width) {
335
- if (this.state.itemDraggedOutOfBounds === -1) {
336
- this.setState({ itemDraggedOutOfBounds: this.state.itemDragged });
337
- }
338
- return true;
339
- }
340
- if (this.state.itemDraggedOutOfBounds > -1) {
341
- this.setState({ itemDraggedOutOfBounds: -1 });
342
- }
343
- return false;
344
- });
345
- __publicField(this, "onEnd", (e) => {
346
- e.cancelable && e.preventDefault();
347
- document.removeEventListener("mousemove", this.schdOnMouseMove);
348
- document.removeEventListener("touchmove", this.schdOnTouchMove);
349
- document.removeEventListener("mouseup", this.schdOnEnd);
350
- document.removeEventListener("touchup", this.schdOnEnd);
351
- document.removeEventListener("touchcancel", this.schdOnEnd);
352
- const removeItem = this.props.removableByMove && this.isDraggedItemOutOfBounds();
353
- if (!removeItem && this.props.transitionDuration > 0 && this.afterIndex !== -2) {
354
- schd(() => {
355
- setItemTransition(this.ghostRef.current, this.props.transitionDuration, "cubic-bezier(.2,1,.1,1)");
356
- if (this.afterIndex < 1 && this.state.itemDragged === 0) {
357
- transformItem(this.ghostRef.current, 0, 0);
358
- } else {
359
- transformItem(
360
- this.ghostRef.current,
361
- // compensate window scroll
362
- -(window.pageYOffset - this.lastYOffset) + // compensate container scroll
363
- -(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),
364
- 0
365
- );
366
- }
367
- })();
368
- }
369
- this.dropTimeout = window.setTimeout(this.finishDrop, removeItem || this.afterIndex === -2 ? 0 : this.props.transitionDuration);
370
- });
371
- __publicField(this, "finishDrop", () => {
372
- const removeItem = this.props.removableByMove && this.isDraggedItemOutOfBounds();
373
- const oldIndex = this.state.itemDragged;
374
- const hasChanged = this.afterIndex > -2 && oldIndex !== this.afterIndex;
375
- const newIndex = hasChanged ? removeItem ? -1 : Math.max(this.afterIndex, 0) : oldIndex;
376
- if (removeItem || hasChanged) {
377
- this.props.onChange({
378
- oldIndex,
379
- newIndex,
380
- targetRect: this.ghostRef.current.getBoundingClientRect()
381
- });
382
- }
383
- this.props.afterDrag && this.props.afterDrag({
384
- elements: this.getChildren(),
385
- oldIndex,
386
- newIndex
387
- });
388
- this.getChildren().forEach((item) => {
389
- setItemTransition(item, 0);
390
- transformItem(item, null);
391
- item.style.touchAction = "";
392
- });
393
- this.setState({ itemDragged: -1, scrollingSpeed: 0 });
394
- this.afterIndex = -2;
395
- if (this.lastScroll > 0) {
396
- this.listRef.current.scrollTop = this.lastScroll;
397
- this.lastScroll = 0;
398
- }
399
- });
400
- __publicField(this, "onKeyDown", (e) => {
401
- const selectedItem = this.state.selectedItem;
402
- const index = this.getTargetIndex(e);
403
- if (checkIfInteractive(e.target, e.currentTarget)) {
404
- return;
405
- }
406
- if (index === -1)
407
- return;
408
- if (e.key === " ") {
409
- e.preventDefault();
410
- if (selectedItem === index) {
411
- if (selectedItem !== this.needle) {
412
- this.getChildren().forEach((item) => {
413
- setItemTransition(item, 0);
414
- transformItem(item, null);
415
- });
416
- this.props.onChange({
417
- oldIndex: selectedItem,
418
- newIndex: this.needle,
419
- targetRect: this.getChildren()[this.needle].getBoundingClientRect()
420
- });
421
- this.getChildren()[this.needle].focus();
422
- }
423
- this.setState({
424
- selectedItem: -1,
425
- liveText: this.props.voiceover.dropped(selectedItem + 1, this.needle + 1)
426
- });
427
- this.needle = -1;
428
- } else {
429
- this.setState({
430
- selectedItem: index,
431
- liveText: this.props.voiceover.lifted(index + 1)
432
- });
433
- this.needle = index;
434
- this.calculateOffsets();
435
- }
436
- }
437
- if ((e.key === "ArrowDown" || e.key === "j") && selectedItem > -1 && this.needle < this.props.values.length - 1) {
438
- e.preventDefault();
439
- const offset = getTranslateOffset(this.getChildren()[selectedItem]);
440
- this.needle++;
441
- this.animateItems(this.needle, selectedItem, offset, true);
442
- this.setState({
443
- liveText: this.props.voiceover.moved(this.needle + 1, false)
444
- });
445
- }
446
- if ((e.key === "ArrowUp" || e.key === "k") && selectedItem > -1 && this.needle > 0) {
447
- e.preventDefault();
448
- const offset = getTranslateOffset(this.getChildren()[selectedItem]);
449
- this.needle--;
450
- this.animateItems(this.needle, selectedItem, offset, true);
451
- this.setState({
452
- liveText: this.props.voiceover.moved(this.needle + 1, true)
453
- });
454
- }
455
- if (e.key === "Escape" && selectedItem > -1) {
456
- this.getChildren().forEach((item) => {
457
- setItemTransition(item, 0);
458
- transformItem(item, null);
459
- });
460
- this.setState({
461
- selectedItem: -1,
462
- liveText: this.props.voiceover.canceled(selectedItem + 1)
463
- });
464
- this.needle = -1;
465
- }
466
- if ((e.key === "Tab" || e.key === "Enter") && selectedItem > -1) {
467
- e.preventDefault();
468
- }
469
- });
470
- this.schdOnMouseMove = schd(this.onMouseMove);
471
- this.schdOnTouchMove = schd(this.onTouchMove);
472
- this.schdOnEnd = schd(this.onEnd);
473
- }
474
- componentDidMount() {
475
- this.calculateOffsets();
476
- document.addEventListener("touchstart", this.onMouseOrTouchStart, {
477
- passive: false,
478
- capture: false
479
- });
480
- document.addEventListener("mousedown", this.onMouseOrTouchStart);
481
- }
482
- componentDidUpdate(_prevProps, prevState) {
483
- if (prevState.scrollingSpeed !== this.state.scrollingSpeed && prevState.scrollingSpeed === 0) {
484
- this.doScrolling();
485
- }
486
- }
487
- componentWillUnmount() {
488
- document.removeEventListener("touchstart", this.onMouseOrTouchStart);
489
- document.removeEventListener("mousedown", this.onMouseOrTouchStart);
490
- if (this.dropTimeout) {
491
- window.clearTimeout(this.dropTimeout);
492
- }
493
- this.schdOnMouseMove.cancel();
494
- this.schdOnTouchMove.cancel();
495
- this.schdOnEnd.cancel();
496
- }
497
- render() {
498
- const baseStyle = {
499
- userSelect: "none",
500
- WebkitUserSelect: "none",
501
- MozUserSelect: "none",
502
- msUserSelect: "none",
503
- boxSizing: "border-box",
504
- position: "relative"
505
- };
506
- const ghostStyle = {
507
- ...baseStyle,
508
- top: this.state.targetY,
509
- left: this.state.targetX,
510
- width: this.state.targetWidth,
511
- height: this.state.targetHeight,
512
- position: "fixed",
513
- marginTop: 0
514
- };
515
- return React.createElement(
516
- React.Fragment,
517
- null,
518
- this.props.renderList({
519
- children: this.props.values.map((value, index) => {
520
- const isHidden = index === this.state.itemDragged;
521
- const isSelected = index === this.state.selectedItem;
522
- 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
523
- this.props.values[index].disabled);
524
- const props = {
525
- key: index,
526
- tabIndex: isDisabled ? -1 : 0,
527
- "aria-roledescription": this.props.voiceover.item(index + 1),
528
- onKeyDown: this.onKeyDown,
529
- style: {
530
- ...baseStyle,
531
- visibility: isHidden ? "hidden" : void 0,
532
- zIndex: isSelected ? 5e3 : 0
533
- }
534
- };
535
- return this.props.renderItem({
536
- value,
537
- props,
538
- index,
539
- isDragged: false,
540
- isSelected,
541
- isOutOfBounds: false,
542
- isDisabled
543
- });
544
- }),
545
- isDragged: this.state.itemDragged > -1,
546
- props: {
547
- ref: this.listRef
548
- }
549
- }),
550
- this.state.itemDragged > -1 && reactDomExports.createPortal(this.props.renderItem({
551
- value: this.props.values[this.state.itemDragged],
552
- props: {
553
- ref: this.ghostRef,
554
- style: ghostStyle,
555
- onWheel: this.onWheel
556
- },
557
- index: this.state.itemDragged,
558
- isDragged: true,
559
- isSelected: false,
560
- isDisabled: false,
561
- isOutOfBounds: this.state.itemDraggedOutOfBounds > -1
562
- }), this.props.container || document.body),
563
- React.createElement("div", { "aria-live": "assertive", role: "log", "aria-atomic": "true", style: {
564
- position: "absolute",
565
- width: "1px",
566
- height: "1px",
567
- margin: "-1px",
568
- border: "0px",
569
- padding: "0px",
570
- overflow: "hidden",
571
- clip: "rect(0px, 0px, 0px, 0px)",
572
- clipPath: "inset(100%)"
573
- } }, this.state.liveText)
574
- );
575
- }
576
- }
577
- __publicField(List, "defaultProps", {
578
- transitionDuration: 300,
579
- lockVertically: false,
580
- removableByMove: false,
581
- voiceover: {
582
- item: (position) => `You are currently at a draggable item at position ${position}. Press space bar to lift.`,
583
- 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.`,
584
- 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.`,
585
- dropped: (from, to) => `You have dropped the item. It has moved from position ${from} to ${to}.`,
586
- canceled: (position) => `You have cancelled the movement. The item has returned to its starting position of ${position}.`
587
- }
588
- });
589
- export {
590
- List as L,
591
- arrayRemove as a,
592
- arrayMove as b
593
- };