@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,332 +0,0 @@
1
- import { l as $cc38e7bd3fc7b213$export$2bb74740c4e19def, m as $feb5ffebff200149$export$c3d8340acf92597f, i as $ae20dd8cbca75726$export$d6daf82dcd84e87c, n as $c5a24bc478652b5f$export$1005530eda016c13, d as $e1995378a142960e$export$18af5c7a9e9b3664 } from "./Collection-uTAXq9Br.js";
2
- import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-BbYZoHvX.js";
3
- import React__default, { useMemo, createContext } from "react";
4
- import { a as $64fa3d84918910a7$export$29f1550f4b0d4415 } from "./utils-CZt7LCbO.js";
5
- import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.js";
6
- function $62d8ded9296f3872$export$cfa2225e87938781(node, checkForOverflow) {
7
- let scrollableNode = node;
8
- if ($cc38e7bd3fc7b213$export$2bb74740c4e19def(scrollableNode, checkForOverflow)) scrollableNode = scrollableNode.parentElement;
9
- while (scrollableNode && !$cc38e7bd3fc7b213$export$2bb74740c4e19def(scrollableNode, checkForOverflow)) scrollableNode = scrollableNode.parentElement;
10
- return scrollableNode || document.scrollingElement || document.documentElement;
11
- }
12
- let $325a3faab7a68acd$var$cache = /* @__PURE__ */ new Map();
13
- function $325a3faab7a68acd$export$a16aca283550c30d(options) {
14
- let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
15
- let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : "");
16
- if ($325a3faab7a68acd$var$cache.has(cacheKey)) return $325a3faab7a68acd$var$cache.get(cacheKey);
17
- let formatter = new Intl.Collator(locale, options);
18
- $325a3faab7a68acd$var$cache.set(cacheKey, formatter);
19
- return formatter;
20
- }
21
- class $657e4dc4a6e88df0$export$8f5ed9ff9f511381 {
22
- getItemRect(key) {
23
- let container = this.ref.current;
24
- if (!container) return null;
25
- let item = key != null ? $feb5ffebff200149$export$c3d8340acf92597f(this.ref, key) : null;
26
- if (!item) return null;
27
- let containerRect = container.getBoundingClientRect();
28
- let itemRect = item.getBoundingClientRect();
29
- return {
30
- x: itemRect.left - containerRect.left + container.scrollLeft,
31
- y: itemRect.top - containerRect.top + container.scrollTop,
32
- width: itemRect.width,
33
- height: itemRect.height
34
- };
35
- }
36
- getContentSize() {
37
- let container = this.ref.current;
38
- var _container_scrollWidth, _container_scrollHeight;
39
- return {
40
- width: (_container_scrollWidth = container === null || container === void 0 ? void 0 : container.scrollWidth) !== null && _container_scrollWidth !== void 0 ? _container_scrollWidth : 0,
41
- height: (_container_scrollHeight = container === null || container === void 0 ? void 0 : container.scrollHeight) !== null && _container_scrollHeight !== void 0 ? _container_scrollHeight : 0
42
- };
43
- }
44
- getVisibleRect() {
45
- let container = this.ref.current;
46
- var _container_scrollLeft, _container_scrollTop, _container_offsetWidth, _container_offsetHeight;
47
- return {
48
- x: (_container_scrollLeft = container === null || container === void 0 ? void 0 : container.scrollLeft) !== null && _container_scrollLeft !== void 0 ? _container_scrollLeft : 0,
49
- y: (_container_scrollTop = container === null || container === void 0 ? void 0 : container.scrollTop) !== null && _container_scrollTop !== void 0 ? _container_scrollTop : 0,
50
- width: (_container_offsetWidth = container === null || container === void 0 ? void 0 : container.offsetWidth) !== null && _container_offsetWidth !== void 0 ? _container_offsetWidth : 0,
51
- height: (_container_offsetHeight = container === null || container === void 0 ? void 0 : container.offsetHeight) !== null && _container_offsetHeight !== void 0 ? _container_offsetHeight : 0
52
- };
53
- }
54
- constructor(ref) {
55
- this.ref = ref;
56
- }
57
- }
58
- class $2a25aae57d74318e$export$a05409b8bb224a5a {
59
- isDisabled(item) {
60
- var _item_props;
61
- return this.disabledBehavior === "all" && (((_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.isDisabled) || this.disabledKeys.has(item.key));
62
- }
63
- findNextNonDisabled(key, getNext) {
64
- let nextKey = key;
65
- while (nextKey != null) {
66
- let item = this.collection.getItem(nextKey);
67
- if ((item === null || item === void 0 ? void 0 : item.type) === "item" && !this.isDisabled(item)) return nextKey;
68
- nextKey = getNext(nextKey);
69
- }
70
- return null;
71
- }
72
- getNextKey(key) {
73
- let nextKey = key;
74
- nextKey = this.collection.getKeyAfter(nextKey);
75
- return this.findNextNonDisabled(nextKey, (key2) => this.collection.getKeyAfter(key2));
76
- }
77
- getPreviousKey(key) {
78
- let nextKey = key;
79
- nextKey = this.collection.getKeyBefore(nextKey);
80
- return this.findNextNonDisabled(nextKey, (key2) => this.collection.getKeyBefore(key2));
81
- }
82
- findKey(key, nextKey, shouldSkip) {
83
- let tempKey = key;
84
- let itemRect = this.layoutDelegate.getItemRect(tempKey);
85
- if (!itemRect || tempKey == null) return null;
86
- let prevRect = itemRect;
87
- do {
88
- tempKey = nextKey(tempKey);
89
- if (tempKey == null) break;
90
- itemRect = this.layoutDelegate.getItemRect(tempKey);
91
- } while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
92
- return tempKey;
93
- }
94
- isSameRow(prevRect, itemRect) {
95
- return prevRect.y === itemRect.y || prevRect.x !== itemRect.x;
96
- }
97
- isSameColumn(prevRect, itemRect) {
98
- return prevRect.x === itemRect.x || prevRect.y !== itemRect.y;
99
- }
100
- getKeyBelow(key) {
101
- if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (key2) => this.getNextKey(key2), this.isSameRow);
102
- else return this.getNextKey(key);
103
- }
104
- getKeyAbove(key) {
105
- if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (key2) => this.getPreviousKey(key2), this.isSameRow);
106
- else return this.getPreviousKey(key);
107
- }
108
- getNextColumn(key, right) {
109
- return right ? this.getPreviousKey(key) : this.getNextKey(key);
110
- }
111
- getKeyRightOf(key) {
112
- let layoutDelegateMethod = this.direction === "ltr" ? "getKeyRightOf" : "getKeyLeftOf";
113
- if (this.layoutDelegate[layoutDelegateMethod]) {
114
- key = this.layoutDelegate[layoutDelegateMethod](key);
115
- return this.findNextNonDisabled(key, (key2) => this.layoutDelegate[layoutDelegateMethod](key2));
116
- }
117
- if (this.layout === "grid") {
118
- if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "rtl");
119
- else return this.findKey(key, (key2) => this.getNextColumn(key2, this.direction === "rtl"), this.isSameColumn);
120
- } else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "rtl");
121
- return null;
122
- }
123
- getKeyLeftOf(key) {
124
- let layoutDelegateMethod = this.direction === "ltr" ? "getKeyLeftOf" : "getKeyRightOf";
125
- if (this.layoutDelegate[layoutDelegateMethod]) {
126
- key = this.layoutDelegate[layoutDelegateMethod](key);
127
- return this.findNextNonDisabled(key, (key2) => this.layoutDelegate[layoutDelegateMethod](key2));
128
- }
129
- if (this.layout === "grid") {
130
- if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "ltr");
131
- else return this.findKey(key, (key2) => this.getNextColumn(key2, this.direction === "ltr"), this.isSameColumn);
132
- } else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "ltr");
133
- return null;
134
- }
135
- getFirstKey() {
136
- let key = this.collection.getFirstKey();
137
- return this.findNextNonDisabled(key, (key2) => this.collection.getKeyAfter(key2));
138
- }
139
- getLastKey() {
140
- let key = this.collection.getLastKey();
141
- return this.findNextNonDisabled(key, (key2) => this.collection.getKeyBefore(key2));
142
- }
143
- getKeyPageAbove(key) {
144
- let menu = this.ref.current;
145
- let itemRect = this.layoutDelegate.getItemRect(key);
146
- if (!itemRect) return null;
147
- if (menu && !$cc38e7bd3fc7b213$export$2bb74740c4e19def(menu)) return this.getFirstKey();
148
- let nextKey = key;
149
- if (this.orientation === "horizontal") {
150
- let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
151
- while (itemRect && itemRect.x > pageX && nextKey != null) {
152
- nextKey = this.getKeyAbove(nextKey);
153
- itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
154
- }
155
- } else {
156
- let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
157
- while (itemRect && itemRect.y > pageY && nextKey != null) {
158
- nextKey = this.getKeyAbove(nextKey);
159
- itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
160
- }
161
- }
162
- return nextKey !== null && nextKey !== void 0 ? nextKey : this.getFirstKey();
163
- }
164
- getKeyPageBelow(key) {
165
- let menu = this.ref.current;
166
- let itemRect = this.layoutDelegate.getItemRect(key);
167
- if (!itemRect) return null;
168
- if (menu && !$cc38e7bd3fc7b213$export$2bb74740c4e19def(menu)) return this.getLastKey();
169
- let nextKey = key;
170
- if (this.orientation === "horizontal") {
171
- let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
172
- while (itemRect && itemRect.x < pageX && nextKey != null) {
173
- nextKey = this.getKeyBelow(nextKey);
174
- itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
175
- }
176
- } else {
177
- let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height);
178
- while (itemRect && itemRect.y < pageY && nextKey != null) {
179
- nextKey = this.getKeyBelow(nextKey);
180
- itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
181
- }
182
- }
183
- return nextKey !== null && nextKey !== void 0 ? nextKey : this.getLastKey();
184
- }
185
- getKeyForSearch(search, fromKey) {
186
- if (!this.collator) return null;
187
- let collection = this.collection;
188
- let key = fromKey || this.getFirstKey();
189
- while (key != null) {
190
- let item = collection.getItem(key);
191
- if (!item) return null;
192
- let substring = item.textValue.slice(0, search.length);
193
- if (item.textValue && this.collator.compare(substring, search) === 0) return key;
194
- key = this.getNextKey(key);
195
- }
196
- return null;
197
- }
198
- constructor(...args) {
199
- if (args.length === 1) {
200
- let opts = args[0];
201
- this.collection = opts.collection;
202
- this.ref = opts.ref;
203
- this.collator = opts.collator;
204
- this.disabledKeys = opts.disabledKeys || /* @__PURE__ */ new Set();
205
- this.disabledBehavior = opts.disabledBehavior || "all";
206
- this.orientation = opts.orientation || "vertical";
207
- this.direction = opts.direction;
208
- this.layout = opts.layout || "stack";
209
- this.layoutDelegate = opts.layoutDelegate || new $657e4dc4a6e88df0$export$8f5ed9ff9f511381(opts.ref);
210
- } else {
211
- this.collection = args[0];
212
- this.disabledKeys = args[1];
213
- this.ref = args[2];
214
- this.collator = args[3];
215
- this.layout = "stack";
216
- this.orientation = "vertical";
217
- this.disabledBehavior = "all";
218
- this.layoutDelegate = new $657e4dc4a6e88df0$export$8f5ed9ff9f511381(this.ref);
219
- }
220
- if (this.layout === "stack" && this.orientation === "vertical") {
221
- this.getKeyLeftOf = void 0;
222
- this.getKeyRightOf = void 0;
223
- }
224
- }
225
- }
226
- function $982254629710d113$export$b95089534ab7c1fd(props) {
227
- let { selectionManager, collection, disabledKeys, ref, keyboardDelegate, layoutDelegate } = props;
228
- let collator = $325a3faab7a68acd$export$a16aca283550c30d({
229
- usage: "search",
230
- sensitivity: "base"
231
- });
232
- let disabledBehavior = selectionManager.disabledBehavior;
233
- let delegate = useMemo(() => keyboardDelegate || new $2a25aae57d74318e$export$a05409b8bb224a5a({
234
- collection,
235
- disabledKeys,
236
- disabledBehavior,
237
- ref,
238
- collator,
239
- layoutDelegate
240
- }), [
241
- keyboardDelegate,
242
- layoutDelegate,
243
- collection,
244
- disabledKeys,
245
- ref,
246
- collator,
247
- disabledBehavior
248
- ]);
249
- let { collectionProps } = $ae20dd8cbca75726$export$d6daf82dcd84e87c({
250
- ...props,
251
- ref,
252
- selectionManager,
253
- keyboardDelegate: delegate
254
- });
255
- return {
256
- listProps: collectionProps
257
- };
258
- }
259
- const $453cc9f0df89c0a5$var$cache = /* @__PURE__ */ new WeakMap();
260
- function $453cc9f0df89c0a5$export$77d5aafae4e095b2(collection) {
261
- let count = $453cc9f0df89c0a5$var$cache.get(collection);
262
- if (count != null) return count;
263
- let counter = 0;
264
- let countItems = (items) => {
265
- for (let item of items) {
266
- if (item.type === "section") countItems($c5a24bc478652b5f$export$1005530eda016c13(item, collection));
267
- else if (item.type === "item") counter++;
268
- }
269
- };
270
- countItems(collection);
271
- $453cc9f0df89c0a5$var$cache.set(collection, counter);
272
- return counter;
273
- }
274
- function $f4b273590fab9f93$export$52210f68a14655d0(props) {
275
- let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
276
- labelable: true
277
- });
278
- let ariaOrientation;
279
- if (props.orientation === "vertical") ariaOrientation = "vertical";
280
- if (props.elementType !== "hr") return {
281
- separatorProps: {
282
- ...domProps,
283
- role: "separator",
284
- "aria-orientation": ariaOrientation
285
- }
286
- };
287
- return {
288
- separatorProps: domProps
289
- };
290
- }
291
- const $d2f53cda644affe3$export$65d2a03b8800d6e3 = /* @__PURE__ */ createContext(null);
292
- const $72a5793c14baf454$export$e0e4026c12a8bdbb = /* @__PURE__ */ createContext({});
293
- const $72a5793c14baf454$export$8b251419efc915eb = /* @__PURE__ */ $e1995378a142960e$export$18af5c7a9e9b3664("header", function Header(props, ref) {
294
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $72a5793c14baf454$export$e0e4026c12a8bdbb);
295
- return /* @__PURE__ */ React__default.createElement("header", {
296
- className: "react-aria-Header",
297
- ...props,
298
- ref
299
- }, props.children);
300
- });
301
- const $431f98aba6844401$export$6615d83f6de245ce = /* @__PURE__ */ createContext({});
302
- const $431f98aba6844401$export$1ff3c3f08ae963c0 = /* @__PURE__ */ $e1995378a142960e$export$18af5c7a9e9b3664("separator", function Separator(props, ref) {
303
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $431f98aba6844401$export$6615d83f6de245ce);
304
- let { elementType, orientation, style, className, slot, ...otherProps } = props;
305
- let Element = elementType || "hr";
306
- if (Element === "hr" && orientation === "vertical") Element = "div";
307
- let { separatorProps } = $f4b273590fab9f93$export$52210f68a14655d0({
308
- ...otherProps,
309
- elementType,
310
- orientation
311
- });
312
- return /* @__PURE__ */ React__default.createElement(Element, {
313
- ...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props),
314
- ...separatorProps,
315
- style,
316
- className: className !== null && className !== void 0 ? className : "react-aria-Separator",
317
- ref,
318
- slot: slot || void 0
319
- });
320
- });
321
- export {
322
- $72a5793c14baf454$export$8b251419efc915eb as $,
323
- $431f98aba6844401$export$1ff3c3f08ae963c0 as a,
324
- $62d8ded9296f3872$export$cfa2225e87938781 as b,
325
- $982254629710d113$export$b95089534ab7c1fd as c,
326
- $453cc9f0df89c0a5$export$77d5aafae4e095b2 as d,
327
- $d2f53cda644affe3$export$65d2a03b8800d6e3 as e,
328
- $325a3faab7a68acd$export$a16aca283550c30d as f,
329
- $2a25aae57d74318e$export$a05409b8bb224a5a as g,
330
- $431f98aba6844401$export$6615d83f6de245ce as h,
331
- $72a5793c14baf454$export$e0e4026c12a8bdbb as i
332
- };