@eightshift/ui-components 4.0.0 → 5.0.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 (144) hide show
  1. package/package.json +101 -101
  2. package/dist/Button-CvzGKGCo.js +0 -185
  3. package/dist/Collection-ddre1L5v.js +0 -2332
  4. package/dist/Color-MV5kBVXr.js +0 -2452
  5. package/dist/ColorSwatch-BqQfVu4L.js +0 -64
  6. package/dist/ComboBox-jQ-dk95U.js +0 -1906
  7. package/dist/Dialog-DX1aiYyE.js +0 -2300
  8. package/dist/FieldError-52GVSGgC.js +0 -42
  9. package/dist/FocusScope-Cri5BFRz.js +0 -831
  10. package/dist/Form-Cq3fu75_.js +0 -5
  11. package/dist/Group-_emcIVxI.js +0 -48
  12. package/dist/Heading-B2153VXe.js +0 -16
  13. package/dist/Hidden-rE6uR-lr.js +0 -41
  14. package/dist/Input-BxpFEIXV.js +0 -133
  15. package/dist/Label-icmbmNdI.js +0 -17
  16. package/dist/List-BYNHbol3.js +0 -593
  17. package/dist/ListBox-mJ4nQaL7.js +0 -581
  18. package/dist/NumberFormatter-DA8u1Ot7.js +0 -140
  19. package/dist/OverlayArrow-BB0CWwdq.js +0 -629
  20. package/dist/RSPContexts-2lR5GG9p.js +0 -14
  21. package/dist/Select-aab027f3.esm--EmXjiL3.js +0 -2469
  22. package/dist/Separator-D9moUgP8.js +0 -322
  23. package/dist/Slider-rz2XRMGm.js +0 -853
  24. package/dist/Text-DVSAPY-K.js +0 -16
  25. package/dist/VisuallyHidden-f9zX67a_.js +0 -48
  26. package/dist/_commonjsHelpers-CUmg6egw.js +0 -6
  27. package/dist/assets/index.css +0 -37
  28. package/dist/assets/style-admin.css +0 -5255
  29. package/dist/assets/style-editor.css +0 -5255
  30. package/dist/assets/style.css +0 -5261
  31. package/dist/assets/wp-font-enhancements.css +0 -8
  32. package/dist/assets/wp-ui-enhancements.css +0 -299
  33. package/dist/components/animated-visibility/animated-visibility.js +0 -105
  34. package/dist/components/base-control/base-control.js +0 -86
  35. package/dist/components/breakpoint-preview/breakpoint-preview.js +0 -161
  36. package/dist/components/button/button.js +0 -387
  37. package/dist/components/checkbox/checkbox.js +0 -320
  38. package/dist/components/color-pickers/color-picker.js +0 -272
  39. package/dist/components/color-pickers/color-swatch.js +0 -58
  40. package/dist/components/color-pickers/gradient-editor.js +0 -534
  41. package/dist/components/color-pickers/solid-color-picker.js +0 -1567
  42. package/dist/components/component-toggle/component-toggle.js +0 -158
  43. package/dist/components/container-panel/container-panel.js +0 -131
  44. package/dist/components/draggable/draggable-context.js +0 -5
  45. package/dist/components/draggable/draggable-handle.js +0 -46
  46. package/dist/components/draggable/draggable.js +0 -6207
  47. package/dist/components/draggable-list/draggable-list-context.js +0 -5
  48. package/dist/components/draggable-list/draggable-list-item.js +0 -77
  49. package/dist/components/draggable-list/draggable-list.js +0 -151
  50. package/dist/components/expandable/expandable.js +0 -342
  51. package/dist/components/index.js +0 -137
  52. package/dist/components/input-field/input-field.js +0 -231
  53. package/dist/components/item-collection/item-collection.js +0 -59
  54. package/dist/components/layout/hstack.js +0 -30
  55. package/dist/components/layout/vstack.js +0 -30
  56. package/dist/components/link-input/link-input.js +0 -293
  57. package/dist/components/matrix-align/matrix-align.js +0 -134
  58. package/dist/components/menu/menu.js +0 -285
  59. package/dist/components/modal/modal.js +0 -305
  60. package/dist/components/notice/notice.js +0 -123
  61. package/dist/components/number-picker/number-picker.js +0 -292
  62. package/dist/components/option-select/option-select.js +0 -264
  63. package/dist/components/options-panel/options-panel.js +0 -158
  64. package/dist/components/placeholders/file-placeholder.js +0 -42
  65. package/dist/components/placeholders/image-placeholder.js +0 -88
  66. package/dist/components/placeholders/media-placeholder.js +0 -63
  67. package/dist/components/popover/popover.js +0 -207
  68. package/dist/components/radio/radio.js +0 -579
  69. package/dist/components/repeater/repeater-context.js +0 -5
  70. package/dist/components/repeater/repeater-item.js +0 -119
  71. package/dist/components/repeater/repeater.js +0 -280
  72. package/dist/components/responsive/mini-responsive.js +0 -498
  73. package/dist/components/responsive/responsive-legacy.js +0 -343
  74. package/dist/components/responsive/responsive.js +0 -580
  75. package/dist/components/responsive-preview/responsive-preview.js +0 -123
  76. package/dist/components/rich-label/rich-label.js +0 -66
  77. package/dist/components/select/async-multi-select.js +0 -157
  78. package/dist/components/select/async-single-select.js +0 -137
  79. package/dist/components/select/custom-select-default-components.js +0 -38
  80. package/dist/components/select/multi-select-components.js +0 -8
  81. package/dist/components/select/multi-select.js +0 -151
  82. package/dist/components/select/react-select-component-wrappers.js +0 -90
  83. package/dist/components/select/shared.js +0 -26
  84. package/dist/components/select/single-select.js +0 -131
  85. package/dist/components/select/styles.js +0 -49
  86. package/dist/components/select/v2/async-select.js +0 -297
  87. package/dist/components/select/v2/shared.js +0 -24
  88. package/dist/components/select/v2/single-select.js +0 -990
  89. package/dist/components/slider/column-config-slider.js +0 -210
  90. package/dist/components/slider/slider.js +0 -343
  91. package/dist/components/slider/utils.js +0 -84
  92. package/dist/components/spacer/spacer.js +0 -97
  93. package/dist/components/tabs/tabs.js +0 -702
  94. package/dist/components/toggle/switch.js +0 -155
  95. package/dist/components/toggle/toggle.js +0 -64
  96. package/dist/components/toggle-button/toggle-button.js +0 -324
  97. package/dist/components/tooltip/tooltip.js +0 -525
  98. package/dist/context-D2KUdwNL.js +0 -92
  99. package/dist/default-i18n-CT_oS1Fy.js +0 -922
  100. package/dist/filterDOMProps-EDDcM64A.js +0 -28
  101. package/dist/icons/block-icon.js +0 -42
  102. package/dist/icons/generic-color-swatch.js +0 -113
  103. package/dist/icons/icons.js +0 -30371
  104. package/dist/icons/index.js +0 -11
  105. package/dist/icons/jsx-svg.js +0 -50
  106. package/dist/index-641ee5b8.esm-BPz6U6sJ.js +0 -3137
  107. package/dist/index-BKGQ6jGS.js +0 -44
  108. package/dist/index-BYHhzLf-.js +0 -444
  109. package/dist/index.js +0 -139
  110. package/dist/lite-DVmmD_-j.js +0 -7
  111. package/dist/modifiers.esm-BuJQPI1X.js +0 -31
  112. package/dist/multi-select-components-BlZZoNXC.js +0 -3744
  113. package/dist/number-GajL10e1.js +0 -36
  114. package/dist/react-jsx-parser.min-DZCiis5V.js +0 -11753
  115. package/dist/react-select-async.esm-CwUoej5h.js +0 -107
  116. package/dist/react-select.esm-DcwYxadV.js +0 -15
  117. package/dist/style-admin.js +0 -1
  118. package/dist/style-editor.js +0 -1
  119. package/dist/style.js +0 -1
  120. package/dist/textSelection-0UUS8Yfg.js +0 -46
  121. package/dist/useButton-BpOKDWEN.js +0 -71
  122. package/dist/useEvent-B0b-6KBr.js +0 -23
  123. package/dist/useFocusRing-CV5l3lf6.js +0 -107
  124. package/dist/useFormReset-C5OggHsw.js +0 -22
  125. package/dist/useFormValidation-DhDNSjws.js +0 -224
  126. package/dist/useHover-DwDr6ozG.js +0 -900
  127. package/dist/useLabel-D7HkNEHT.js +0 -27
  128. package/dist/useLabels-D8cxd1Z8.js +0 -23
  129. package/dist/useListState-UGlN5-7P.js +0 -161
  130. package/dist/useLocalizedStringFormatter-CFP1YZWQ.js +0 -121
  131. package/dist/useNumberField-CEAj7Mrj.js +0 -1204
  132. package/dist/useNumberFormatter-321rAb4J.js +0 -13
  133. package/dist/usePress-DNW8qpY6.js +0 -664
  134. package/dist/useSingleSelectListState-DC0wWTUM.js +0 -38
  135. package/dist/useToggle-BrpmSOB-.js +0 -59
  136. package/dist/useToggleState-CmQX3SoX.js +0 -19
  137. package/dist/utilities/array-helpers.js +0 -56
  138. package/dist/utilities/debounce-throttle.js +0 -123
  139. package/dist/utilities/es-dash.js +0 -376
  140. package/dist/utilities/index.js +0 -27
  141. package/dist/utilities/text-helpers.js +0 -136
  142. package/dist/utils-DkCSC521.js +0 -370
  143. package/dist/wp/wp-font-enhancements.js +0 -1
  144. package/dist/wp/wp-ui-enhancements.js +0 -1
@@ -1,990 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { _ as __ } from "../../../default-i18n-CT_oS1Fy.js";
3
- import { BaseControl } from "../../base-control/base-control.js";
4
- import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-CvzGKGCo.js";
5
- import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-icmbmNdI.js";
6
- import { b as $eed445e0843c11d0$export$7ff8f37d2d81a48d, c as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-mJ4nQaL7.js";
7
- import { o as $168583247155ddda$export$dc9c12ed27dd1b49, l as $de32f1b87079253c$export$d2f961adcb0afbe, p as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-DX1aiYyE.js";
8
- import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, p as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a, c as clsx } from "../../../utils-DkCSC521.js";
9
- import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../../FieldError-52GVSGgC.js";
10
- import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../../Form-Cq3fu75_.js";
11
- import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../../Text-DVSAPY-K.js";
12
- import { o as $fb3050f43d946246$export$e32c88dfddc6e1d8, e as $e1995378a142960e$export$bf788dd355e3a401 } from "../../../Collection-ddre1L5v.js";
13
- import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../../filterDOMProps-EDDcM64A.js";
14
- import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, f as $9daab02d461809db$export$683480f191c0e3ea } from "../../../OverlayArrow-BB0CWwdq.js";
15
- import React__default, { useMemo, useRef, useState, forwardRef, createContext, useContext, useCallback, cloneElement } from "react";
16
- import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../../useLocalizedStringFormatter-CFP1YZWQ.js";
17
- import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../../useFormValidation-DhDNSjws.js";
18
- import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../../useSingleSelectListState-DC0wWTUM.js";
19
- import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../../useFocusRing-CV5l3lf6.js";
20
- import { e as $325a3faab7a68acd$export$a16aca283550c30d, f as $2a25aae57d74318e$export$a05409b8bb224a5a } from "../../../Separator-D9moUgP8.js";
21
- import { p as $507fabe10e71c6fb$export$8397ddfc504fdb9a } from "../../../useHover-DwDr6ozG.js";
22
- import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../../useFormReset-C5OggHsw.js";
23
- import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../../VisuallyHidden-f9zX67a_.js";
24
- import { icons } from "../../../icons/icons.js";
25
- import "../../../react-jsx-parser.min-DZCiis5V.js";
26
- import { OptionItemBase } from "./shared.js";
27
- import { RichLabel } from "../../rich-label/rich-label.js";
28
- const $58aed456727eb0f3$export$703601b7e90536f8 = /* @__PURE__ */ new WeakMap();
29
- function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
30
- let { keyboardDelegate, isDisabled, isRequired, name, validationBehavior = "aria" } = props;
31
- let collator = $325a3faab7a68acd$export$a16aca283550c30d({
32
- usage: "search",
33
- sensitivity: "base"
34
- });
35
- let delegate = useMemo(() => keyboardDelegate || new $2a25aae57d74318e$export$a05409b8bb224a5a(state.collection, state.disabledKeys, ref, collator), [
36
- keyboardDelegate,
37
- state.collection,
38
- state.disabledKeys,
39
- collator
40
- ]);
41
- let { menuTriggerProps, menuProps } = $168583247155ddda$export$dc9c12ed27dd1b49({
42
- isDisabled,
43
- type: "listbox"
44
- }, state, ref);
45
- let onKeyDown = (e) => {
46
- switch (e.key) {
47
- case "ArrowLeft": {
48
- var _delegate_getKeyAbove, _delegate_getFirstKey;
49
- e.preventDefault();
50
- let key = state.selectedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, state.selectedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
51
- if (key) state.setSelectedKey(key);
52
- break;
53
- }
54
- case "ArrowRight": {
55
- var _delegate_getKeyBelow, _delegate_getFirstKey1;
56
- e.preventDefault();
57
- let key = state.selectedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, state.selectedKey) : (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate);
58
- if (key) state.setSelectedKey(key);
59
- break;
60
- }
61
- }
62
- };
63
- let { typeSelectProps } = $fb3050f43d946246$export$e32c88dfddc6e1d8({
64
- keyboardDelegate: delegate,
65
- selectionManager: state.selectionManager,
66
- onTypeSelect(key) {
67
- state.setSelectedKey(key);
68
- }
69
- });
70
- let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
71
- let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d({
72
- ...props,
73
- labelElementType: "span",
74
- isInvalid,
75
- errorMessage: props.errorMessage || validationErrors
76
- });
77
- typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
78
- delete typeSelectProps.onKeyDownCapture;
79
- let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
80
- labelable: true
81
- });
82
- let triggerProps = $3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, menuTriggerProps, fieldProps);
83
- let valueId = $bdb11010cef70236$export$f680877a34711e37();
84
- $58aed456727eb0f3$export$703601b7e90536f8.set(state, {
85
- isDisabled,
86
- isRequired,
87
- name,
88
- validationBehavior
89
- });
90
- return {
91
- labelProps: {
92
- ...labelProps,
93
- onClick: () => {
94
- if (!props.isDisabled) {
95
- var _ref_current;
96
- (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
97
- $507fabe10e71c6fb$export$8397ddfc504fdb9a("keyboard");
98
- }
99
- }
100
- },
101
- triggerProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
102
- ...triggerProps,
103
- isDisabled,
104
- onKeyDown: $ff5963eb1fccf552$export$e08e3b67e392101e(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
105
- onKeyUp: props.onKeyUp,
106
- "aria-labelledby": [
107
- valueId,
108
- triggerProps["aria-labelledby"],
109
- triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null
110
- ].filter(Boolean).join(" "),
111
- onFocus(e) {
112
- if (state.isFocused) return;
113
- if (props.onFocus) props.onFocus(e);
114
- if (props.onFocusChange) props.onFocusChange(true);
115
- state.setFocused(true);
116
- },
117
- onBlur(e) {
118
- if (state.isOpen) return;
119
- if (props.onBlur) props.onBlur(e);
120
- if (props.onFocusChange) props.onFocusChange(false);
121
- state.setFocused(false);
122
- }
123
- }),
124
- valueProps: {
125
- id: valueId
126
- },
127
- menuProps: {
128
- ...menuProps,
129
- autoFocus: state.focusStrategy || true,
130
- shouldSelectOnPressUp: true,
131
- shouldFocusOnHover: true,
132
- disallowEmptySelection: true,
133
- linkBehavior: "selection",
134
- onBlur: (e) => {
135
- if (e.currentTarget.contains(e.relatedTarget)) return;
136
- if (props.onBlur) props.onBlur(e);
137
- if (props.onFocusChange) props.onFocusChange(false);
138
- state.setFocused(false);
139
- },
140
- "aria-labelledby": [
141
- fieldProps["aria-labelledby"],
142
- triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
143
- ].filter(Boolean).join(" ")
144
- },
145
- descriptionProps,
146
- errorMessageProps,
147
- isInvalid,
148
- validationErrors,
149
- validationDetails
150
- };
151
- }
152
- function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
153
- let data = $58aed456727eb0f3$export$703601b7e90536f8.get(state) || {};
154
- let { autoComplete, name = data.name, isDisabled = data.isDisabled } = props;
155
- let { validationBehavior, isRequired } = data;
156
- let { visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab();
157
- $99facab73266f662$export$5add1d006293d136(props.selectRef, state.selectedKey, state.setSelectedKey);
158
- $e93e671b31057976$export$b8473d3665f3a75a({
159
- validationBehavior,
160
- focus: () => {
161
- var _triggerRef_current;
162
- return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
163
- }
164
- }, state, props.selectRef);
165
- var _state_selectedKey;
166
- return {
167
- containerProps: {
168
- ...visuallyHiddenProps,
169
- "aria-hidden": true,
170
- // @ts-ignore
171
- ["data-react-aria-prevent-focus"]: true,
172
- // @ts-ignore
173
- ["data-a11y-ignore"]: "aria-hidden-focus"
174
- },
175
- inputProps: {
176
- style: {
177
- display: "none"
178
- }
179
- },
180
- selectProps: {
181
- tabIndex: -1,
182
- autoComplete,
183
- disabled: isDisabled,
184
- required: validationBehavior === "native" && isRequired,
185
- name,
186
- value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : void 0,
187
- onChange: (e) => state.setSelectedKey(e.target.value)
188
- }
189
- };
190
- }
191
- function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
192
- let { state, triggerRef, label, name, isDisabled } = props;
193
- let selectRef = useRef(null);
194
- let { containerProps, selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1({
195
- ...props,
196
- selectRef
197
- }, state, triggerRef);
198
- var _state_selectedKey;
199
- if (state.collection.size <= 300) return /* @__PURE__ */ React__default.createElement("div", {
200
- ...containerProps,
201
- "data-testid": "hidden-select-container"
202
- }, /* @__PURE__ */ React__default.createElement("label", null, label, /* @__PURE__ */ React__default.createElement("select", {
203
- ...selectProps,
204
- ref: selectRef
205
- }, /* @__PURE__ */ React__default.createElement("option", null), [
206
- ...state.collection.getKeys()
207
- ].map((key) => {
208
- let item = state.collection.getItem(key);
209
- if (item && item.type === "item") return /* @__PURE__ */ React__default.createElement("option", {
210
- key: item.key,
211
- value: item.key
212
- }, item.textValue);
213
- }))));
214
- else if (name) return /* @__PURE__ */ React__default.createElement("input", {
215
- type: "hidden",
216
- autoComplete: selectProps.autoComplete,
217
- name,
218
- disabled: isDisabled,
219
- value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
220
- });
221
- return null;
222
- }
223
- function $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props) {
224
- let triggerState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
225
- let [focusStrategy, setFocusStrategy] = useState(null);
226
- let listState = $a0d645289fe9b86b$export$e7f05e985daf4b5f({
227
- ...props,
228
- onSelectionChange: (key) => {
229
- if (props.onSelectionChange != null) props.onSelectionChange(key);
230
- triggerState.close();
231
- validationState.commitValidation();
232
- }
233
- });
234
- let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
235
- ...props,
236
- value: listState.selectedKey
237
- });
238
- let [isFocused, setFocused] = useState(false);
239
- return {
240
- ...validationState,
241
- ...listState,
242
- ...triggerState,
243
- focusStrategy,
244
- open(focusStrategy2 = null) {
245
- if (listState.collection.size !== 0) {
246
- setFocusStrategy(focusStrategy2);
247
- triggerState.open();
248
- }
249
- },
250
- toggle(focusStrategy2 = null) {
251
- if (listState.collection.size !== 0) {
252
- setFocusStrategy(focusStrategy2);
253
- triggerState.toggle();
254
- }
255
- },
256
- isFocused,
257
- setFocused
258
- };
259
- }
260
- var $e038a7e7a6d81989$exports = {};
261
- $e038a7e7a6d81989$exports = {
262
- "colorSwatchPicker": `تغييرات الألوان`,
263
- "dropzoneLabel": `DropZone`,
264
- "selectPlaceholder": `حدد عنصرًا`,
265
- "tableResizer": `أداة تغيير الحجم`
266
- };
267
- var $0ec14741b0133644$exports = {};
268
- $0ec14741b0133644$exports = {
269
- "colorSwatchPicker": `Цветови мостри`,
270
- "dropzoneLabel": `DropZone`,
271
- "selectPlaceholder": `Изберете предмет`,
272
- "tableResizer": `Преоразмерител`
273
- };
274
- var $642f7badf2405784$exports = {};
275
- $642f7badf2405784$exports = {
276
- "colorSwatchPicker": `Vzorky barev`,
277
- "dropzoneLabel": `Místo pro přetažení`,
278
- "selectPlaceholder": `Vyberte položku`,
279
- "tableResizer": `Změna velikosti`
280
- };
281
- var $30cee8d2535734ec$exports = {};
282
- $30cee8d2535734ec$exports = {
283
- "colorSwatchPicker": `Farveprøver`,
284
- "dropzoneLabel": `DropZone`,
285
- "selectPlaceholder": `Vælg et element`,
286
- "tableResizer": `Størrelsesændring`
287
- };
288
- var $c302d0504fca332a$exports = {};
289
- $c302d0504fca332a$exports = {
290
- "colorSwatchPicker": `Farbfelder`,
291
- "dropzoneLabel": `Ablegebereich`,
292
- "selectPlaceholder": `Element wählen`,
293
- "tableResizer": `Größenanpassung`
294
- };
295
- var $0d0703f2bd7e421c$exports = {};
296
- $0d0703f2bd7e421c$exports = {
297
- "colorSwatchPicker": `Χρωματικά δείγματα`,
298
- "dropzoneLabel": `DropZone`,
299
- "selectPlaceholder": `Επιλέξτε ένα αντικείμενο`,
300
- "tableResizer": `Αλλαγή μεγέθους`
301
- };
302
- var $cafa55beb2fc5ef3$exports = {};
303
- $cafa55beb2fc5ef3$exports = {
304
- "selectPlaceholder": `Select an item`,
305
- "tableResizer": `Resizer`,
306
- "dropzoneLabel": `DropZone`,
307
- "colorSwatchPicker": `Color swatches`
308
- };
309
- var $18ac2ceede598103$exports = {};
310
- $18ac2ceede598103$exports = {
311
- "colorSwatchPicker": `Muestras de colores`,
312
- "dropzoneLabel": `DropZone`,
313
- "selectPlaceholder": `Seleccionar un artículo`,
314
- "tableResizer": `Cambiador de tamaño`
315
- };
316
- var $718705a15b8a633a$exports = {};
317
- $718705a15b8a633a$exports = {
318
- "colorSwatchPicker": `Värvinäidised`,
319
- "dropzoneLabel": `DropZone`,
320
- "selectPlaceholder": `Valige üksus`,
321
- "tableResizer": `Suuruse muutja`
322
- };
323
- var $bf36dae9ecc81ce0$exports = {};
324
- $bf36dae9ecc81ce0$exports = {
325
- "colorSwatchPicker": `Värimallit`,
326
- "dropzoneLabel": `DropZone`,
327
- "selectPlaceholder": `Valitse kohde`,
328
- "tableResizer": `Koon muuttaja`
329
- };
330
- var $0b4828edb010b855$exports = {};
331
- $0b4828edb010b855$exports = {
332
- "colorSwatchPicker": `Échantillons de couleurs`,
333
- "dropzoneLabel": `DropZone`,
334
- "selectPlaceholder": `Sélectionner un élément`,
335
- "tableResizer": `Redimensionneur`
336
- };
337
- var $0030f210b040e540$exports = {};
338
- $0030f210b040e540$exports = {
339
- "colorSwatchPicker": `דוגמיות צבע`,
340
- "dropzoneLabel": `DropZone`,
341
- "selectPlaceholder": `בחר פריט`,
342
- "tableResizer": `שינוי גודל`
343
- };
344
- var $1f0ebacf5a0c0fa1$exports = {};
345
- $1f0ebacf5a0c0fa1$exports = {
346
- "colorSwatchPicker": `Uzorci boja`,
347
- "dropzoneLabel": `Zona spuštanja`,
348
- "selectPlaceholder": `Odaberite stavku`,
349
- "tableResizer": `Promjena veličine`
350
- };
351
- var $3a706ba61f3d6bba$exports = {};
352
- $3a706ba61f3d6bba$exports = {
353
- "colorSwatchPicker": `Színtárak`,
354
- "dropzoneLabel": `DropZone`,
355
- "selectPlaceholder": `Válasszon ki egy elemet`,
356
- "tableResizer": `Átméretező`
357
- };
358
- var $0d17809e74607796$exports = {};
359
- $0d17809e74607796$exports = {
360
- "colorSwatchPicker": `Campioni di colore`,
361
- "dropzoneLabel": `Zona di rilascio`,
362
- "selectPlaceholder": `Seleziona un elemento`,
363
- "tableResizer": `Ridimensionamento`
364
- };
365
- var $65a71f9a56f1398f$exports = {};
366
- $65a71f9a56f1398f$exports = {
367
- "colorSwatchPicker": `カラースウォッチ`,
368
- "dropzoneLabel": `ドロップゾーン`,
369
- "selectPlaceholder": `項目を選択`,
370
- "tableResizer": `サイズ変更ツール`
371
- };
372
- var $e5efad074a74abef$exports = {};
373
- $e5efad074a74abef$exports = {
374
- "colorSwatchPicker": `색상 견본`,
375
- "dropzoneLabel": `드롭 영역`,
376
- "selectPlaceholder": `항목 선택`,
377
- "tableResizer": `크기 조정기`
378
- };
379
- var $d70c2a849e55c607$exports = {};
380
- $d70c2a849e55c607$exports = {
381
- "colorSwatchPicker": `Spalvų pavyzdžiai`,
382
- "dropzoneLabel": `„DropZone“`,
383
- "selectPlaceholder": `Pasirinkite elementą`,
384
- "tableResizer": `Dydžio keitiklis`
385
- };
386
- var $009bbbb440d0e907$exports = {};
387
- $009bbbb440d0e907$exports = {
388
- "colorSwatchPicker": `Krāsu paraugi`,
389
- "dropzoneLabel": `DropZone`,
390
- "selectPlaceholder": `Izvēlēties vienumu`,
391
- "tableResizer": `Izmēra mainītājs`
392
- };
393
- var $9366fe642464ee83$exports = {};
394
- $9366fe642464ee83$exports = {
395
- "colorSwatchPicker": `Fargekart`,
396
- "dropzoneLabel": `Droppsone`,
397
- "selectPlaceholder": `Velg et element`,
398
- "tableResizer": `Størrelsesendrer`
399
- };
400
- var $62f9bc1f98ea21de$exports = {};
401
- $62f9bc1f98ea21de$exports = {
402
- "colorSwatchPicker": `kleurstalen`,
403
- "dropzoneLabel": `DropZone`,
404
- "selectPlaceholder": `Selecteer een item`,
405
- "tableResizer": `Resizer`
406
- };
407
- var $4ec2e5b6623b1b76$exports = {};
408
- $4ec2e5b6623b1b76$exports = {
409
- "colorSwatchPicker": `Próbki kolorów`,
410
- "dropzoneLabel": `Strefa upuszczania`,
411
- "selectPlaceholder": `Wybierz element`,
412
- "tableResizer": `Zmiana rozmiaru`
413
- };
414
- var $e25098e26647cc04$exports = {};
415
- $e25098e26647cc04$exports = {
416
- "colorSwatchPicker": `Amostras de cores`,
417
- "dropzoneLabel": `DropZone`,
418
- "selectPlaceholder": `Selecione um item`,
419
- "tableResizer": `Redimensionador`
420
- };
421
- var $dd39c57d242c8156$exports = {};
422
- $dd39c57d242c8156$exports = {
423
- "colorSwatchPicker": `Amostras de cores`,
424
- "dropzoneLabel": `DropZone`,
425
- "selectPlaceholder": `Selecione um item`,
426
- "tableResizer": `Redimensionador`
427
- };
428
- var $3b4c1ba5afd57b35$exports = {};
429
- $3b4c1ba5afd57b35$exports = {
430
- "colorSwatchPicker": `Specimene de culoare`,
431
- "dropzoneLabel": `Zonă de plasare`,
432
- "selectPlaceholder": `Selectați un element`,
433
- "tableResizer": `Instrument de redimensionare`
434
- };
435
- var $a455b2cda79eb746$exports = {};
436
- $a455b2cda79eb746$exports = {
437
- "colorSwatchPicker": `Цветовые образцы`,
438
- "dropzoneLabel": `DropZone`,
439
- "selectPlaceholder": `Выберите элемент`,
440
- "tableResizer": `Средство изменения размера`
441
- };
442
- var $b983ca1383d5b960$exports = {};
443
- $b983ca1383d5b960$exports = {
444
- "colorSwatchPicker": `Vzorkovníky farieb`,
445
- "dropzoneLabel": `DropZone`,
446
- "selectPlaceholder": `Vyberte položku`,
447
- "tableResizer": `Nástroj na zmenu veľkosti`
448
- };
449
- var $32a515ef673b0655$exports = {};
450
- $32a515ef673b0655$exports = {
451
- "colorSwatchPicker": `Barvne palete`,
452
- "dropzoneLabel": `DropZone`,
453
- "selectPlaceholder": `Izberite element`,
454
- "tableResizer": `Spreminjanje velikosti`
455
- };
456
- var $89434176ab35446b$exports = {};
457
- $89434176ab35446b$exports = {
458
- "colorSwatchPicker": `Uzorci boje`,
459
- "dropzoneLabel": `DropZone`,
460
- "selectPlaceholder": `Izaberite stavku`,
461
- "tableResizer": `Promena veličine`
462
- };
463
- var $727da781aca847f9$exports = {};
464
- $727da781aca847f9$exports = {
465
- "colorSwatchPicker": `Färgrutor`,
466
- "dropzoneLabel": `DropZone`,
467
- "selectPlaceholder": `Välj en artikel`,
468
- "tableResizer": `Storleksändrare`
469
- };
470
- var $fcd2d84b9a2d489c$exports = {};
471
- $fcd2d84b9a2d489c$exports = {
472
- "colorSwatchPicker": `Renk örnekleri`,
473
- "dropzoneLabel": `Bırakma Bölgesi`,
474
- "selectPlaceholder": `Bir öğe seçin`,
475
- "tableResizer": `Yeniden boyutlandırıcı`
476
- };
477
- var $2422ac328687ee23$exports = {};
478
- $2422ac328687ee23$exports = {
479
- "colorSwatchPicker": `Зразки кольорів`,
480
- "dropzoneLabel": `DropZone`,
481
- "selectPlaceholder": `Виберіть елемент`,
482
- "tableResizer": `Засіб змінення розміру`
483
- };
484
- var $c9a532d1c973af61$exports = {};
485
- $c9a532d1c973af61$exports = {
486
- "colorSwatchPicker": `颜色色板`,
487
- "dropzoneLabel": `放置区域`,
488
- "selectPlaceholder": `选择一个项目`,
489
- "tableResizer": `尺寸调整器`
490
- };
491
- var $34de119f14549a4b$exports = {};
492
- $34de119f14549a4b$exports = {
493
- "colorSwatchPicker": `色票`,
494
- "dropzoneLabel": `放置區`,
495
- "selectPlaceholder": `選取項目`,
496
- "tableResizer": `大小調整器`
497
- };
498
- var $df39c1238ae2b5f3$exports = {};
499
- $df39c1238ae2b5f3$exports = {
500
- "ar-AE": $e038a7e7a6d81989$exports,
501
- "bg-BG": $0ec14741b0133644$exports,
502
- "cs-CZ": $642f7badf2405784$exports,
503
- "da-DK": $30cee8d2535734ec$exports,
504
- "de-DE": $c302d0504fca332a$exports,
505
- "el-GR": $0d0703f2bd7e421c$exports,
506
- "en-US": $cafa55beb2fc5ef3$exports,
507
- "es-ES": $18ac2ceede598103$exports,
508
- "et-EE": $718705a15b8a633a$exports,
509
- "fi-FI": $bf36dae9ecc81ce0$exports,
510
- "fr-FR": $0b4828edb010b855$exports,
511
- "he-IL": $0030f210b040e540$exports,
512
- "hr-HR": $1f0ebacf5a0c0fa1$exports,
513
- "hu-HU": $3a706ba61f3d6bba$exports,
514
- "it-IT": $0d17809e74607796$exports,
515
- "ja-JP": $65a71f9a56f1398f$exports,
516
- "ko-KR": $e5efad074a74abef$exports,
517
- "lt-LT": $d70c2a849e55c607$exports,
518
- "lv-LV": $009bbbb440d0e907$exports,
519
- "nb-NO": $9366fe642464ee83$exports,
520
- "nl-NL": $62f9bc1f98ea21de$exports,
521
- "pl-PL": $4ec2e5b6623b1b76$exports,
522
- "pt-BR": $e25098e26647cc04$exports,
523
- "pt-PT": $dd39c57d242c8156$exports,
524
- "ro-RO": $3b4c1ba5afd57b35$exports,
525
- "ru-RU": $a455b2cda79eb746$exports,
526
- "sk-SK": $b983ca1383d5b960$exports,
527
- "sl-SI": $32a515ef673b0655$exports,
528
- "sr-SP": $89434176ab35446b$exports,
529
- "sv-SE": $727da781aca847f9$exports,
530
- "tr-TR": $fcd2d84b9a2d489c$exports,
531
- "uk-UA": $2422ac328687ee23$exports,
532
- "zh-CN": $c9a532d1c973af61$exports,
533
- "zh-TW": $34de119f14549a4b$exports
534
- };
535
- function $parcel$interopDefault(a) {
536
- return a && a.__esModule ? a.default : a;
537
- }
538
- const $82d7e5349645de74$export$7540cee5be7dc19b = /* @__PURE__ */ createContext(null);
539
- const $82d7e5349645de74$export$ef445b55be0601bd = /* @__PURE__ */ createContext(null);
540
- const $82d7e5349645de74$export$ef9b1a59e592288f = /* @__PURE__ */ forwardRef(function Select(props, ref) {
541
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $82d7e5349645de74$export$7540cee5be7dc19b);
542
- let { children, isDisabled = false, isInvalid = false, isRequired = false } = props;
543
- let content = useMemo(() => typeof children === "function" ? children({
544
- isOpen: false,
545
- isDisabled,
546
- isInvalid,
547
- isRequired,
548
- isFocused: false,
549
- isFocusVisible: false,
550
- defaultChildren: null
551
- }) : children, [
552
- children,
553
- isDisabled,
554
- isInvalid,
555
- isRequired
556
- ]);
557
- return /* @__PURE__ */ React__default.createElement($e1995378a142960e$export$bf788dd355e3a401, {
558
- content
559
- }, (collection) => /* @__PURE__ */ React__default.createElement($82d7e5349645de74$var$SelectInner, {
560
- props,
561
- collection,
562
- selectRef: ref
563
- }));
564
- });
565
- function $82d7e5349645de74$var$SelectInner({ props, selectRef: ref, collection }) {
566
- let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
567
- var _props_validationBehavior, _ref;
568
- let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
569
- let state = $2bc3a590c5373a4e$export$5159ec8b34d4ec12({
570
- ...props,
571
- collection,
572
- children: void 0,
573
- validationBehavior
574
- });
575
- let { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
576
- within: true
577
- });
578
- let buttonRef = useRef(null);
579
- let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
580
- let { labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, ...validation } = $58aed456727eb0f3$export$e64b2f635402ca43({
581
- ...$64fa3d84918910a7$export$ef03459518577ad4(props),
582
- label,
583
- validationBehavior
584
- }, state, buttonRef);
585
- let [buttonWidth, setButtonWidth] = useState(null);
586
- let onResize = useCallback(() => {
587
- if (buttonRef.current) setButtonWidth(buttonRef.current.offsetWidth + "px");
588
- }, [
589
- buttonRef
590
- ]);
591
- $9daab02d461809db$export$683480f191c0e3ea({
592
- ref: buttonRef,
593
- onResize
594
- });
595
- let renderPropsState = useMemo(() => ({
596
- isOpen: state.isOpen,
597
- isFocused: state.isFocused,
598
- isFocusVisible,
599
- isDisabled: props.isDisabled || false,
600
- isInvalid: validation.isInvalid || false,
601
- isRequired: props.isRequired || false
602
- }), [
603
- state.isOpen,
604
- state.isFocused,
605
- isFocusVisible,
606
- props.isDisabled,
607
- validation.isInvalid,
608
- props.isRequired
609
- ]);
610
- let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
611
- ...props,
612
- values: renderPropsState,
613
- defaultClassName: "react-aria-Select"
614
- });
615
- let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
616
- delete DOMProps.id;
617
- let scrollRef = useRef(null);
618
- return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
619
- values: [
620
- [
621
- $82d7e5349645de74$export$7540cee5be7dc19b,
622
- props
623
- ],
624
- [
625
- $82d7e5349645de74$export$ef445b55be0601bd,
626
- state
627
- ],
628
- [
629
- $82d7e5349645de74$export$f8f745c04421623f,
630
- valueProps
631
- ],
632
- [
633
- $01b77f81d0f07f68$export$75b6ee27786ba447,
634
- {
635
- ...labelProps,
636
- ref: labelRef,
637
- elementType: "span"
638
- }
639
- ],
640
- [
641
- $d2b4bc8c273e7be6$export$24d547caef80ccd1,
642
- {
643
- ...triggerProps,
644
- ref: buttonRef,
645
- isPressed: state.isOpen
646
- }
647
- ],
648
- [
649
- $de32f1b87079253c$export$d2f961adcb0afbe,
650
- state
651
- ],
652
- [
653
- $07b14b47974efb58$export$9b9a0cd73afb7ca4,
654
- {
655
- trigger: "Select",
656
- triggerRef: buttonRef,
657
- scrollRef,
658
- placement: "bottom start",
659
- style: {
660
- "--trigger-width": buttonWidth
661
- },
662
- "aria-labelledby": menuProps["aria-labelledby"]
663
- }
664
- ],
665
- [
666
- $eed445e0843c11d0$export$7ff8f37d2d81a48d,
667
- {
668
- ...menuProps,
669
- ref: scrollRef
670
- }
671
- ],
672
- [
673
- $eed445e0843c11d0$export$7c5906fe4f1f2af2,
674
- state
675
- ],
676
- [
677
- $514c0188e459b4c0$export$9afb8bc826b033ea,
678
- {
679
- slots: {
680
- description: descriptionProps,
681
- errorMessage: errorMessageProps
682
- }
683
- }
684
- ],
685
- [
686
- $ee014567cb39d3f0$export$ff05c3ac10437e03,
687
- validation
688
- ]
689
- ]
690
- }, /* @__PURE__ */ React__default.createElement("div", {
691
- ...DOMProps,
692
- ...renderProps,
693
- ...focusProps,
694
- ref,
695
- slot: props.slot || void 0,
696
- "data-focused": state.isFocused || void 0,
697
- "data-focus-visible": isFocusVisible || void 0,
698
- "data-open": state.isOpen || void 0,
699
- "data-disabled": props.isDisabled || void 0,
700
- "data-invalid": validation.isInvalid || void 0,
701
- "data-required": props.isRequired || void 0
702
- }), /* @__PURE__ */ React__default.createElement($bdd25dc72710631f$export$cbd84cdb2e668835, {
703
- autoComplete: props.autoComplete,
704
- state,
705
- triggerRef: buttonRef,
706
- label,
707
- name: props.name,
708
- isDisabled: props.isDisabled
709
- }));
710
- }
711
- const $82d7e5349645de74$export$f8f745c04421623f = /* @__PURE__ */ createContext(null);
712
- const $82d7e5349645de74$export$e288731fd71264f0 = /* @__PURE__ */ forwardRef(function SelectValue(props, ref) {
713
- var _state_selectedItem, _state_selectedItem1;
714
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $82d7e5349645de74$export$f8f745c04421623f);
715
- let state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
716
- let { placeholder } = $64fa3d84918910a7$export$fabf2dc03a41866e($82d7e5349645de74$export$7540cee5be7dc19b);
717
- let selectedItem = state.selectedKey != null ? state.collection.getItem(state.selectedKey) : null;
718
- let rendered = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.props.children;
719
- if (typeof rendered === "function") {
720
- let fn = rendered;
721
- rendered = fn({
722
- isHovered: false,
723
- isPressed: false,
724
- isSelected: false,
725
- isFocused: false,
726
- isFocusVisible: false,
727
- isDisabled: false,
728
- selectionMode: "single",
729
- selectionBehavior: "toggle"
730
- });
731
- }
732
- let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($df39c1238ae2b5f3$exports), "react-aria-components");
733
- var _ref, _state_selectedItem_value, _state_selectedItem_textValue;
734
- let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
735
- ...props,
736
- defaultChildren: (_ref = rendered !== null && rendered !== void 0 ? rendered : placeholder) !== null && _ref !== void 0 ? _ref : stringFormatter.format("selectPlaceholder"),
737
- defaultClassName: "react-aria-SelectValue",
738
- values: {
739
- selectedItem: (_state_selectedItem_value = (_state_selectedItem = state.selectedItem) === null || _state_selectedItem === void 0 ? void 0 : _state_selectedItem.value) !== null && _state_selectedItem_value !== void 0 ? _state_selectedItem_value : null,
740
- selectedText: (_state_selectedItem_textValue = (_state_selectedItem1 = state.selectedItem) === null || _state_selectedItem1 === void 0 ? void 0 : _state_selectedItem1.textValue) !== null && _state_selectedItem_textValue !== void 0 ? _state_selectedItem_textValue : null,
741
- isPlaceholder: !selectedItem
742
- }
743
- });
744
- let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
745
- return /* @__PURE__ */ React__default.createElement("span", {
746
- ref,
747
- ...DOMProps,
748
- ...renderProps,
749
- "data-placeholder": !selectedItem || void 0
750
- }, /* @__PURE__ */ React__default.createElement($514c0188e459b4c0$export$9afb8bc826b033ea.Provider, {
751
- value: void 0
752
- }, renderProps.children));
753
- });
754
- /**
755
- * Select menu.
756
- *
757
- * @component
758
- * @param {Object} props - Component props.
759
- * @param {string} [props.icon] - Icon of the component.
760
- * @param {string} [props.help] - Help text of the component.
761
- * @param {string} [props.label] - Label of the component.
762
- * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
763
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
764
- * @param {string} [props.subtitle] - Subtitle of the component.
765
- * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
766
- * @param {string|{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
767
- * @param {Function} props.onChange - Function to call when the value changes.
768
- * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
769
- * @param {boolean} [props.clearable] - Whether the select is clearable.
770
- * @param {boolean} [props.disabled] - Whether the select is disabled.
771
- * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
772
- * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
773
- * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
774
- * @param {string} [props.className] - Classes to pass to the select menu.
775
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
776
- *
777
- * @returns {JSX.Element} The __ExperimentalSelect component.
778
- *
779
- * @example
780
- * const [value, setValue] = useState(null);
781
- *
782
- * const options = [
783
- * { label: 'Option 1', value: 'option-1' },
784
- * { label: 'Option 2', value: 'option-2' },
785
- * { label: 'Option 3', value: 'option-3' },
786
- * ];
787
- *
788
- * <__ExperimentalSelect
789
- * label='Select items'
790
- * options={loadOptions}
791
- * value={value}
792
- * onChange={setValue}
793
- * />
794
- *
795
- * @preserve
796
- */
797
- const __ExperimentalSelect = (props) => {
798
- const {
799
- icon,
800
- help,
801
- label,
802
- inline,
803
- actions,
804
- subtitle,
805
- value,
806
- onChange,
807
- options,
808
- simpleValue = false,
809
- disabled = false,
810
- clearable = false,
811
- placeholder,
812
- customMenuOption,
813
- customValueDisplay,
814
- className,
815
- hidden
816
- } = props;
817
- const ref = useRef();
818
- if (hidden) {
819
- return null;
820
- }
821
- const currentValue = (value == null ? void 0 : value.value) ?? value ?? null;
822
- return /* @__PURE__ */ jsx(
823
- $82d7e5349645de74$export$ef9b1a59e592288f,
824
- {
825
- selectedKey: currentValue,
826
- onSelectionChange: (selected) => {
827
- if (selected === null || selected === void 0) {
828
- onChange(null);
829
- return;
830
- }
831
- if (simpleValue) {
832
- onChange(selected);
833
- return;
834
- }
835
- const item = options.find((item2) => item2.value === selected);
836
- if (!item) {
837
- onChange(null);
838
- return;
839
- }
840
- if (item && "id" in item) {
841
- delete item.id;
842
- }
843
- onChange(item);
844
- },
845
- placeholder,
846
- children: /* @__PURE__ */ jsxs(
847
- BaseControl,
848
- {
849
- label,
850
- icon,
851
- subtitle,
852
- actions,
853
- help,
854
- inline,
855
- labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
856
- children: [
857
- /* @__PURE__ */ jsxs(
858
- "div",
859
- {
860
- className: clsx(
861
- "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
862
- "es:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
863
- "es:any-focus:outline-hidden",
864
- !inline && "es:w-full",
865
- disabled && "es:select-none",
866
- "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50"
867
- ),
868
- ref,
869
- children: [
870
- /* @__PURE__ */ jsxs(
871
- $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
872
- {
873
- className: clsx(
874
- "es:group es:h-6 es:w-full es:rounded-sm es:p-1 es:text-sm es:transition",
875
- "es:flex es:grow es:items-center",
876
- "es:any-focus:outline-hidden",
877
- disabled && "es:bg-transparent es:text-secondary-400 es:selection:bg-transparent es:selection:text-transparent",
878
- currentValue && !clearable && "es:pr-6",
879
- !currentValue && "es:text-secondary-400"
880
- ),
881
- children: [
882
- /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ defaultChildren, isPlaceholder, selectedItem }) => {
883
- var _a;
884
- if (!isPlaceholder && currentValue && customValueDisplay) {
885
- return customValueDisplay(selectedItem);
886
- }
887
- if (!isPlaceholder && currentValue && customMenuOption) {
888
- let icon2 = (selectedItem == null ? void 0 : selectedItem.icon) ?? null;
889
- if (typeof (selectedItem == null ? void 0 : selectedItem.icon) === "string") {
890
- icon2 = ((_a = icons) == null ? void 0 : _a[selectedItem.icon]) ?? null;
891
- }
892
- return /* @__PURE__ */ jsx(
893
- RichLabel,
894
- {
895
- icon: icon2,
896
- label: selectedItem == null ? void 0 : selectedItem.label,
897
- subtitle: selectedItem.subtitle
898
- }
899
- );
900
- }
901
- return defaultChildren;
902
- } }),
903
- /* @__PURE__ */ jsx(
904
- "div",
905
- {
906
- className: clsx("es:absolute es:bottom-0 es:right-1 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
907
- "aria-hidden": "true",
908
- children: cloneElement(icons.dropdownCaretAlt, {
909
- className: "es:w-5.5 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
910
- })
911
- }
912
- )
913
- ]
914
- }
915
- ),
916
- clearable && /* @__PURE__ */ jsx(SelectClearButton, {})
917
- ]
918
- }
919
- ),
920
- /* @__PURE__ */ jsx(
921
- $07b14b47974efb58$export$5b6b19405a83ff9d,
922
- {
923
- className: ({ isEntering, isExiting }) => clsx(
924
- "es:flex es:min-w-9 es:max-w-80 es:flex-col es:overflow-x-hidden es:rounded-lg es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-lg",
925
- "es:any-focus:outline-hidden",
926
- isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
927
- isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200"
928
- ),
929
- placement: "bottom left",
930
- triggerRef: ref,
931
- children: /* @__PURE__ */ jsx(
932
- $eed445e0843c11d0$export$41f133550aa26f48,
933
- {
934
- className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden",
935
- items: options,
936
- children: (item) => {
937
- var _a;
938
- let icon2 = (item == null ? void 0 : item.icon) ?? null;
939
- if (typeof (item == null ? void 0 : item.icon) === "string") {
940
- icon2 = ((_a = icons) == null ? void 0 : _a[item.icon]) ?? null;
941
- }
942
- return /* @__PURE__ */ jsxs(
943
- OptionItemBase,
944
- {
945
- id: item.value,
946
- className: item == null ? void 0 : item.className,
947
- children: [
948
- customMenuOption && customMenuOption(item),
949
- !customMenuOption && /* @__PURE__ */ jsx(
950
- RichLabel,
951
- {
952
- icon: icon2,
953
- label: item == null ? void 0 : item.label,
954
- subtitle: item.subtitle
955
- }
956
- )
957
- ]
958
- }
959
- );
960
- }
961
- }
962
- )
963
- }
964
- )
965
- ]
966
- }
967
- )
968
- }
969
- );
970
- };
971
- const SelectClearButton = () => {
972
- const state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
973
- const isEmpty = (state == null ? void 0 : state.selectedKey) === null;
974
- return /* @__PURE__ */ jsx(
975
- $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
976
- {
977
- "aria-label": __("Clear value", "eightshift-ui-components"),
978
- className: clsx(
979
- "es:mr-6 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
980
- isEmpty ? "es:hidden" : "es:flex"
981
- ),
982
- onPress: () => state == null ? void 0 : state.setSelectedKey(null),
983
- slot: null,
984
- children: icons.clearAlt
985
- }
986
- );
987
- };
988
- export {
989
- __ExperimentalSelect
990
- };