@eightshift/ui-components 5.1.4 → 5.2.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 (114) hide show
  1. package/dist/{Button-DH22t_SM.js → Button-RTwMSBs-.js} +20 -26
  2. package/dist/{Collection-BRJOMbOa.js → Collection-D_KhdLDC.js} +40 -23
  3. package/dist/{Color-CNqKeT8D.js → Color-WxFE7lQB.js} +2 -2
  4. package/dist/{ColorSwatch-Dt3lRApA.js → ColorSwatch-xVS3rMYS.js} +9 -7
  5. package/dist/{Dialog-D6EdDPeu.js → Dialog-Xf6AsnV-.js} +86 -62
  6. package/dist/{FieldError-DHrSdE_Q.js → FieldError-B8BgFmIQ.js} +2 -2
  7. package/dist/{FocusScope-BEPI2m7u.js → FocusScope-BnwM-e8R.js} +24 -22
  8. package/dist/{Form-Bnyyv3Im.js → Form-BeMxJA29.js} +13 -3
  9. package/dist/{Input-DfSBLhDx.js → Group-C4cXobNT.js} +56 -11
  10. package/dist/{Heading-ba38ScjJ.js → Heading-bh1HU5HH.js} +1 -1
  11. package/dist/{Label-JS_ob-kh.js → Label-DWVaNd2E.js} +1 -1
  12. package/dist/{List-BLeHBkfx.js → List-CwJTORxj.js} +1 -1
  13. package/dist/{ListBox-BY3gwI8c.js → ListBox-BeC97FZ4.js} +62 -38
  14. package/dist/{OverlayArrow-BUfV-5P3.js → OverlayArrow-EZ0v_ljk.js} +6 -6
  15. package/dist/{Select-BebwUgKB.js → Select-DEQf8ZWI.js} +96 -58
  16. package/dist/{Select-aab027f3.esm-BKIJGje-.js → Select-ef7c0426.esm-D6WOCaYm.js} +11 -6
  17. package/dist/{Separator-CTQWg_HO.js → Separator-Fl7qSeN-.js} +37 -20
  18. package/dist/{Slider-uOPcIpqS.js → Slider-BQFSEhvk.js} +28 -21
  19. package/dist/{Text-BuJgePCv.js → Text-AxKZjtFm.js} +1 -1
  20. package/dist/{TextField-o2U-uBWv.js → TextField-x_eEa_qR.js} +20 -10
  21. package/dist/{VisuallyHidden-BYi0pekx.js → VisuallyHidden-D9s7FTtC.js} +2 -2
  22. package/dist/assets/style-admin.css +227 -3
  23. package/dist/assets/style-editor.css +227 -3
  24. package/dist/assets/style.css +227 -3
  25. package/dist/components/base-control/base-control.js +1 -1
  26. package/dist/components/button/button.js +11 -10
  27. package/dist/components/checkbox/checkbox.js +17 -12
  28. package/dist/components/color-pickers/color-picker.js +1 -1
  29. package/dist/components/color-pickers/color-swatch.js +3 -3
  30. package/dist/components/color-pickers/gradient-editor.js +3 -2
  31. package/dist/components/color-pickers/solid-color-picker.js +85 -49
  32. package/dist/components/component-toggle/component-toggle.js +2 -1
  33. package/dist/components/draggable/draggable-handle.js +1 -1
  34. package/dist/components/draggable/draggable.js +191 -170
  35. package/dist/components/draggable-list/draggable-list-item.js +1 -1
  36. package/dist/components/draggable-list/draggable-list.js +2 -2
  37. package/dist/components/expandable/expandable.js +18 -18
  38. package/dist/components/index.js +5 -1
  39. package/dist/components/input-field/input-field.js +3 -3
  40. package/dist/components/item-collection/item-collection.js +1 -1
  41. package/dist/components/link-input/link-input.js +45 -34
  42. package/dist/components/matrix-align/matrix-align.js +1 -1
  43. package/dist/components/menu/menu.js +3 -3
  44. package/dist/components/modal/modal.js +39 -13
  45. package/dist/components/number-picker/number-picker.js +15 -13
  46. package/dist/components/option-select/option-select.js +1 -1
  47. package/dist/components/options-panel/options-panel.js +1 -1
  48. package/dist/components/placeholders/file-placeholder.js +1 -1
  49. package/dist/components/popover/popover.js +2 -2
  50. package/dist/components/radio/radio.js +45 -22
  51. package/dist/components/repeater/repeater-item.js +1 -1
  52. package/dist/components/repeater/repeater.js +2 -2
  53. package/dist/components/responsive/mini-responsive.js +3 -2
  54. package/dist/components/responsive/responsive-legacy.js +2 -1
  55. package/dist/components/responsive/responsive.js +2 -1
  56. package/dist/components/responsive-preview/responsive-preview.js +1 -1
  57. package/dist/components/select/async-multi-select.js +3 -3
  58. package/dist/components/select/async-single-select.js +2 -2
  59. package/dist/components/select/custom-select-default-components.js +1 -1
  60. package/dist/components/select/multi-select-components.js +1 -1
  61. package/dist/components/select/multi-select.js +3 -3
  62. package/dist/components/select/react-select-component-wrappers.js +1 -1
  63. package/dist/components/select/shared.js +19 -1
  64. package/dist/components/select/single-select.js +2 -2
  65. package/dist/components/select/v2/async-multi-select.js +432 -0
  66. package/dist/components/select/v2/async-select.js +25 -14
  67. package/dist/components/select/v2/multi-select.js +403 -0
  68. package/dist/components/select/v2/shared.js +44 -8
  69. package/dist/components/select/v2/single-select.js +10 -10
  70. package/dist/components/slider/column-config-slider.js +3 -3
  71. package/dist/components/slider/slider.js +3 -3
  72. package/dist/components/slider/utils.js +2 -1
  73. package/dist/components/tabs/tabs.js +33 -23
  74. package/dist/components/toggle/switch.js +11 -8
  75. package/dist/components/toggle/toggle.js +1 -1
  76. package/dist/components/toggle-button/toggle-button.js +14 -8
  77. package/dist/components/tooltip/tooltip.js +9 -7
  78. package/dist/{context-BbYZoHvX.js → context-DMOmz986.js} +1 -1
  79. package/dist/{default-i18n-OFa3zAyB.js → default-i18n-DY6EfUSA.js} +21 -284
  80. package/dist/filterDOMProps-D2C6R0DK.js +71 -0
  81. package/dist/icons/icons.js +1 -1
  82. package/dist/{index-641ee5b8.esm-BPU8rMZr.js → index-641ee5b8.esm-Bu-mgopl.js} +1 -1
  83. package/dist/{index-CFozsmNS.js → index-CBHA_HDD.js} +3 -1
  84. package/dist/{index-BljRBEr_.js → index-Dq3gT5pW.js} +1 -1
  85. package/dist/index.js +4 -0
  86. package/dist/{multi-select-components-BcKzA24f.js → multi-select-components-rCCyCaKO.js} +1 -1
  87. package/dist/{number-CHmNj-oR.js → number-7sOvrqo0.js} +7 -2
  88. package/dist/{react-select-async.esm-D937XTWW.js → react-select-async.esm-XYrsKYb2.js} +3 -3
  89. package/dist/{react-select.esm-Ciai3aKf.js → react-select.esm-CCSPY6XR.js} +3 -3
  90. package/dist/sprintf-DmNrJSYG.js +51 -0
  91. package/dist/{textSelection-8DpK8fJl.js → textSelection-D5tWX1rJ.js} +1 -1
  92. package/dist/{useAsyncList-fLtZMvJO.js → useAsyncList-ZqaIH2gh.js} +1 -1
  93. package/dist/{useButton-lRcWnvOB.js → useButton-BtJSiQi3.js} +13 -5
  94. package/dist/useDragAndDrop-CddFteYC.js +3917 -0
  95. package/dist/{useEvent-ICdlokG-.js → useEvent-BifIGnVS.js} +1 -1
  96. package/dist/{useFilter-BR5z1A4Q.js → useFilter-Cl2ggwwq.js} +1 -1
  97. package/dist/{useFocusRing-Bv0UJQl8.js → useFocusRing-D5BfOWag.js} +3 -3
  98. package/dist/{useFormReset-D2YaWRIA.js → useFormReset-yV9VVy9R.js} +3 -4
  99. package/dist/{useHover-C2SkI1Fn.js → useHover-44IApaa2.js} +67 -34
  100. package/dist/{useLabel-BPCd5c7-.js → useLabel-C8umX0gk.js} +2 -2
  101. package/dist/{useLabels-B7-lUnAF.js → useLabels-Cdxi6JSa.js} +1 -1
  102. package/dist/{useListState-BrZ2XvDS.js → useListState-BSkHuB7-.js} +1 -1
  103. package/dist/{useLocalizedStringFormatter-C9GO0IDB.js → useLocalizedStringFormatter-eaZiN2tE.js} +1 -1
  104. package/dist/{useNumberField-y0dLc_6m.js → useNumberField-JhWPy1JY.js} +23 -16
  105. package/dist/{useNumberFormatter-CZ9QUnRt.js → useNumberFormatter-BCmkV-7c.js} +1 -1
  106. package/dist/{usePress-DWBuejBp.js → usePress-BnrkvZ7e.js} +20 -5
  107. package/dist/{useSingleSelectListState-Bh46cRXs.js → useSingleSelectListState-CzJFsSHr.js} +2 -2
  108. package/dist/{useToggle-yGuUBU7q.js → useToggle-OaIBlwRu.js} +21 -8
  109. package/dist/{useToggleState-ibcBUHnB.js → useToggleState-BF8hvidm.js} +5 -1
  110. package/dist/{utils-CZt7LCbO.js → utils-cvK1vxO7.js} +9 -7
  111. package/package.json +18 -18
  112. package/dist/Group-LBogWgyp.js +0 -48
  113. package/dist/_commonjsHelpers-CUmg6egw.js +0 -6
  114. package/dist/filterDOMProps-EDDcM64A.js +0 -28
@@ -0,0 +1,403 @@
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { _ as __ } from "../../../default-i18n-DY6EfUSA.js";
3
+ import { BaseControl } from "../../base-control/base-control.js";
4
+ import { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-Fl7qSeN-.js";
5
+ import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-RTwMSBs-.js";
6
+ import { g as $de32f1b87079253c$export$2e1e1122cf0cba88, e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-Xf6AsnV-.js";
7
+ import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Group-C4cXobNT.js";
8
+ import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
9
+ import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4, b as $612b8eb6cb90e02d$export$62ed72bc21f6b8a6 } from "../../../ListBox-BeC97FZ4.js";
10
+ import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-AxKZjtFm.js";
11
+ import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6 } from "../../../useDragAndDrop-CddFteYC.js";
12
+ import { useRef, cloneElement } from "react";
13
+ import { icons } from "../../../icons/icons.js";
14
+ import "../../../react-jsx-parser.min-LF707GK8.js";
15
+ import { OptionItemBase } from "./shared.js";
16
+ import { RichLabel } from "../../rich-label/rich-label.js";
17
+ import { c as clsx } from "../../../utils-cvK1vxO7.js";
18
+ import { getValue, moveArrayItem } from "../shared.js";
19
+ import { truncateEnd } from "../../../utilities/text-helpers.js";
20
+ import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-Cl2ggwwq.js";
21
+ /**
22
+ * Multi-select menu.
23
+ *
24
+ * @component
25
+ * @param {Object} props - Component props.
26
+ * @param {string} [props.icon] - Icon of the component.
27
+ * @param {string} [props.help] - Help text of the component.
28
+ * @param {string} [props.label] - Label of the component.
29
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
30
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
31
+ * @param {string} [props.subtitle] - Subtitle of the component.
32
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
33
+ * @param {string|{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
34
+ * @param {Function} props.onChange - Function to call when the value changes.
35
+ * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
36
+ * @param {boolean} [props.clearable] - Whether the select is clearable.
37
+ * @param {boolean} [props.disabled] - Whether the select is disabled.
38
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
39
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
40
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
41
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
42
+ * @param {string} [props.className] - Classes to pass to the select menu.
43
+ * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
44
+ * @param {boolean} [props.searchable] - If `true`, the menu will allow searching through the options.
45
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
46
+ *
47
+ * @returns {JSX.Element} The SelectNext component.
48
+ *
49
+ * @example
50
+ * const [value, setValue] = useState(null);
51
+ *
52
+ * const options = [
53
+ * { label: 'Option 1', value: 'option-1' },
54
+ * { label: 'Option 2', value: 'option-2' },
55
+ * { label: 'Option 3', value: 'option-3' },
56
+ * ];
57
+ *
58
+ * <__MultiSelectNext
59
+ * label='Select items'
60
+ * options={loadOptions}
61
+ * value={value}
62
+ * onChange={setValue}
63
+ * />
64
+ *
65
+ * @preserve
66
+ */
67
+ const __MultiSelectNext = (props) => {
68
+ const {
69
+ icon,
70
+ help,
71
+ label,
72
+ inline,
73
+ actions,
74
+ subtitle,
75
+ value,
76
+ onChange,
77
+ options,
78
+ simpleValue = false,
79
+ disabled = false,
80
+ clearable = false,
81
+ placeholder = __("Select...", "eightshift-ui-components"),
82
+ customMenuOption,
83
+ customValueDisplay,
84
+ customDropdownArrow,
85
+ className,
86
+ noMinWidth = false,
87
+ searchable,
88
+ hidden,
89
+ ...rest
90
+ } = props;
91
+ const ref = useRef();
92
+ const { contains } = $bb77f239b46e8c72$export$3274cf84b703fff({ sensitivity: "base" });
93
+ const currentValue = getValue(simpleValue, value, options);
94
+ const handleSelectionChange = (selected) => {
95
+ if (selected === null || selected === void 0) {
96
+ onChange(null);
97
+ return;
98
+ }
99
+ if (selected.size === 0) {
100
+ onChange(simpleValue ? "" : []);
101
+ return;
102
+ }
103
+ if (simpleValue) {
104
+ onChange([...selected]);
105
+ return;
106
+ }
107
+ const selectedValues = [...selected]?.map((item) => {
108
+ const option = options.find((option2) => option2.value === item);
109
+ if (!option) {
110
+ return null;
111
+ }
112
+ return {
113
+ ...option
114
+ };
115
+ })?.filter(Boolean);
116
+ onChange(selectedValues);
117
+ };
118
+ const selectedItems = new Set(currentValue?.map((item) => item?.value ?? item ?? null).filter(Boolean));
119
+ let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
120
+ getItems: (keys) => [...keys].map((key) => ({ "text/plain": key, text: currentValue.find((item) => item.value === key)?.label ?? key })),
121
+ onReorder(e) {
122
+ handleSelectionChange(new Set(moveArrayItem(selectedItems, [...e.keys][0], e.target.key, e.target.dropPosition)));
123
+ },
124
+ renderDragPreview(items) {
125
+ return /* @__PURE__ */ jsxs("div", { className: "es:bg-accent-700 es:rounded-md es:px-1.5 es:py-0.5 es:text-white es:translate-x-7 es:translate-y-6", children: [
126
+ truncateEnd(items[0]["text"], 20),
127
+ items.length > 1 && /* @__PURE__ */ jsx("span", { className: "badge", children: items.length })
128
+ ] });
129
+ },
130
+ renderDropIndicator(target) {
131
+ return /* @__PURE__ */ jsx(
132
+ $612b8eb6cb90e02d$export$62ed72bc21f6b8a6,
133
+ {
134
+ target,
135
+ className: "es:w-0.75 es:h-5.5 es:rounded-md es:transition es:inset-ring-0 es:drop-target:bg-accent-600 es:bg-accent-700/30 es:any-focus:outline-hidden es:any-focus:inset-ring-0"
136
+ }
137
+ );
138
+ },
139
+ isDisabled: disabled || selectedItems.size < 2
140
+ });
141
+ if (hidden) {
142
+ return null;
143
+ }
144
+ return /* @__PURE__ */ jsx(
145
+ BaseControl,
146
+ {
147
+ label,
148
+ icon,
149
+ subtitle,
150
+ actions,
151
+ help,
152
+ inline,
153
+ labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
154
+ ...rest,
155
+ children: /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
156
+ /* @__PURE__ */ jsxs(
157
+ $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
158
+ {
159
+ "aria-label": __("Select items", "eightshift-ui-components"),
160
+ className: clsx(
161
+ "es:group",
162
+ "es:relative es:flex es:items-center es:gap-1 es:py-0.75 es:pl-0.75 es:pr-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
163
+ "es:min-h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
164
+ "es:inset-ring es:inset-ring-secondary-100",
165
+ "es:any-focus:outline-hidden",
166
+ !noMinWidth && "es:min-w-48",
167
+ !inline && "es:w-full",
168
+ disabled && "es:select-none es:shadow-none!",
169
+ "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",
170
+ className
171
+ ),
172
+ ref,
173
+ children: [
174
+ /* @__PURE__ */ jsx(
175
+ $eed445e0843c11d0$export$41f133550aa26f48,
176
+ {
177
+ "aria-label": __("Selected items", "eightshift-ui-components"),
178
+ layout: "grid",
179
+ items: currentValue,
180
+ selectionMode: "none",
181
+ dependencies: [currentValue],
182
+ className: "es:peer es:w-full es:flex es:items-center es:flex-wrap es:gap-0.75 es:has-dragging:inset-ring-1 es:has-dragging:inset-ring-accent-500/10 es:rounded-md es:transition es:leading-tight",
183
+ renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: "es:text-secondary-500 es:pl-1.5 es:flex es:items-center", children: placeholder }),
184
+ dragAndDropHooks,
185
+ children: (item) => /* @__PURE__ */ jsxs(
186
+ $eed445e0843c11d0$export$a11e76429ed99b4,
187
+ {
188
+ id: item?.value,
189
+ textValue: item?.label,
190
+ className: clsx(
191
+ "es:inset-ring es:inset-ring-secondary-200/30 es:h-7 es:bg-secondary-100 es:focus-visible:inset-ring-accent-500 es:dragging:cursor-grabbing es:focus:outline-hidden es:py-1 es:px-1.5 es:rounded-7 es:dragging:inset-ring-accent-600/20 es:dragging:bg-transparent es:dragging:text-accent-600/40 es:transition es:flex es:items-center es:gap-1",
192
+ !disabled && selectedItems.size >= 2 && "es:cursor-move"
193
+ ),
194
+ children: [
195
+ customValueDisplay && customValueDisplay(truncateEnd(item?.label, 20), item),
196
+ !customValueDisplay && /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", children: truncateEnd(item?.label, 20) })
197
+ ]
198
+ }
199
+ )
200
+ }
201
+ ),
202
+ /* @__PURE__ */ jsxs("div", { className: "es:shrink-0 es:ml-auto es:peer-has-dragging:hidden", children: [
203
+ !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
204
+ className: "es:shrink-0 es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
205
+ }),
206
+ customDropdownArrow && /* @__PURE__ */ jsx(
207
+ "div",
208
+ {
209
+ "aria-hidden": "true",
210
+ className: "es:shrink-0 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
211
+ children: customDropdownArrow
212
+ }
213
+ )
214
+ ] })
215
+ ]
216
+ }
217
+ ),
218
+ /* @__PURE__ */ jsxs(
219
+ $07b14b47974efb58$export$5b6b19405a83ff9d,
220
+ {
221
+ "aria-label": __("Items", "eightshift-ui-components"),
222
+ className: ({ isEntering, isExiting }) => clsx(
223
+ "es:flex es:w-76 es:min-w-9 es:max-w-76 es:flex-col es:-hidden es:rounded-2xl es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-xl es:inset-ring es:inset-ring-secondary-100",
224
+ "es:any-focus:outline-hidden",
225
+ "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
226
+ "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
227
+ "es:placement-left:origin-right es:placement-right:origin-left",
228
+ isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
229
+ isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
230
+ isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
231
+ isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]"
232
+ ),
233
+ placement: "bottom left",
234
+ maxHeight: 300,
235
+ triggerRef: ref,
236
+ children: [
237
+ searchable && /* @__PURE__ */ jsxs($d2f53cda644affe3$export$2f2b9559550c7bbc, { filter: contains, children: [
238
+ /* @__PURE__ */ jsxs(
239
+ $440f4836bcb56932$export$b94867ecbd698f21,
240
+ {
241
+ "aria-label": __("Search", "eightshift-ui-components"),
242
+ className: "es:flex es:items-center es:bg-secondary-100 es:m-2 es:rounded-lg es:relative es:placeholder:text-secondary-500",
243
+ autoFocus: true,
244
+ children: [
245
+ /* @__PURE__ */ jsx(
246
+ $3985021b0ad6602f$export$f5b8910cec6cf069,
247
+ {
248
+ placeholder: __("Search...", "eightshift-ui-components"),
249
+ className: "es:peer es:size-full es:h-9 es:outline-hidden es:px-2.5 es:shadow-none es:text-sm es:py-0 es:[&::-webkit-search-cancel-button]:hidden"
250
+ }
251
+ ),
252
+ /* @__PURE__ */ jsx(
253
+ $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
254
+ {
255
+ "aria-label": __("Clear", "eightshift-ui-components"),
256
+ className: clsx(
257
+ "es:absolute es:right-2 es:top-0 es:bottom-0 es:my-auto",
258
+ "es:flex es:size-6 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",
259
+ "es:peer-placeholder-shown:opacity-0"
260
+ ),
261
+ children: icons.clearAlt
262
+ }
263
+ )
264
+ ]
265
+ }
266
+ ),
267
+ /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
268
+ /* @__PURE__ */ jsx(
269
+ $eed445e0843c11d0$export$41f133550aa26f48,
270
+ {
271
+ "aria-label": __("Items", "eightshift-ui-components"),
272
+ selectedKeys: selectedItems,
273
+ selectionMode: "multiple",
274
+ selectionBehavior: "toggle",
275
+ className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:min-h-16", options?.length > 0 && "es:overflow-y-auto"),
276
+ items: options,
277
+ onSelectionChange: handleSelectionChange,
278
+ escapeKeyBehavior: "none",
279
+ renderEmptyState: () => /* @__PURE__ */ jsx(
280
+ RichLabel,
281
+ {
282
+ icon: icons.searchEmpty,
283
+ label: __("No results", "eightshift-ui-components"),
284
+ subtitle: __("Try a different search term", "eightshift-ui-components"),
285
+ className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
286
+ iconClassName: "es:text-accent-700 es:icon:size-7!",
287
+ noColor: true
288
+ }
289
+ ),
290
+ children: (item) => {
291
+ let icon2 = item?.icon ?? null;
292
+ if (typeof item?.icon === "string") {
293
+ icon2 = icons?.[item.icon] ?? null;
294
+ }
295
+ return /* @__PURE__ */ jsxs(
296
+ OptionItemBase,
297
+ {
298
+ id: item.value,
299
+ className: item?.className,
300
+ selectIndicator: true,
301
+ children: [
302
+ customMenuOption && customMenuOption(item),
303
+ !customMenuOption && /* @__PURE__ */ jsx(
304
+ RichLabel,
305
+ {
306
+ icon: icon2,
307
+ label: item?.label,
308
+ subtitle: item?.subtitle
309
+ }
310
+ )
311
+ ]
312
+ }
313
+ );
314
+ }
315
+ }
316
+ )
317
+ ] }),
318
+ !searchable && /* @__PURE__ */ jsx(
319
+ $eed445e0843c11d0$export$41f133550aa26f48,
320
+ {
321
+ "aria-label": __("Items", "eightshift-ui-components"),
322
+ autoFocus: true,
323
+ selectionMode: "multiple",
324
+ selectionBehavior: "toggle",
325
+ selectedKeys: selectedItems,
326
+ onSelectionChange: handleSelectionChange,
327
+ className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:overflow-y-auto",
328
+ items: options,
329
+ escapeKeyBehavior: "none",
330
+ renderEmptyState: () => /* @__PURE__ */ jsx(
331
+ RichLabel,
332
+ {
333
+ icon: icons.searchEmpty,
334
+ label: __("No results", "eightshift-ui-components"),
335
+ subtitle: __("Try a different search term", "eightshift-ui-components"),
336
+ className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200",
337
+ iconClassName: "es:text-accent-700 es:icon:size-7!",
338
+ noColor: true
339
+ }
340
+ ),
341
+ children: (item) => {
342
+ let icon2 = item?.icon ?? null;
343
+ if (typeof item?.icon === "string") {
344
+ icon2 = icons?.[item.icon] ?? null;
345
+ }
346
+ return /* @__PURE__ */ jsxs(
347
+ OptionItemBase,
348
+ {
349
+ id: item.value,
350
+ className: item?.className,
351
+ selectIndicator: true,
352
+ children: [
353
+ customMenuOption && customMenuOption(item),
354
+ !customMenuOption && /* @__PURE__ */ jsx(
355
+ RichLabel,
356
+ {
357
+ icon: icon2,
358
+ label: item?.label,
359
+ subtitle: item?.subtitle
360
+ }
361
+ )
362
+ ]
363
+ }
364
+ );
365
+ }
366
+ }
367
+ ),
368
+ clearable && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
369
+ /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
370
+ /* @__PURE__ */ jsx(
371
+ $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
372
+ {
373
+ slot: "close",
374
+ onPress: () => handleSelectionChange([]),
375
+ className: clsx(
376
+ "es:flex es:h-10 es:m-1 es:select-none es:items-center es:gap-1 es:rounded-xl es:px-2 es:py-1.5 es:transition es:scroll-m-1",
377
+ "es:any-focus:outline-hidden es:overflow-clip",
378
+ "es:not-selected:hover:bg-secondary-100 es:not-selected:hover:outline-hidden",
379
+ "es:selected:bg-accent-600/15 es:selected:text-accent-950",
380
+ "es:selected:focus-visible:inset-ring es:selected:focus-visible:inset-ring-accent-600/30",
381
+ "es:not-selected:focus-visible:bg-secondary-100 es:not-selected:focus-visible:outline-hidden",
382
+ "es:active:bg-accent-700/15"
383
+ ),
384
+ children: /* @__PURE__ */ jsx(
385
+ RichLabel,
386
+ {
387
+ icon: icons.clearAlt,
388
+ label: __("Clear selection", "eightshift-ui-components")
389
+ }
390
+ )
391
+ }
392
+ )
393
+ ] })
394
+ ]
395
+ }
396
+ )
397
+ ] })
398
+ }
399
+ );
400
+ };
401
+ export {
402
+ __MultiSelectNext
403
+ };
@@ -1,15 +1,19 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-BY3gwI8c.js";
3
- import { c as clsx } from "../../../utils-CZt7LCbO.js";
4
- const OptionItemBase = (props) => /* @__PURE__ */ jsxs(
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-BeC97FZ4.js";
3
+ import { c as clsx } from "../../../utils-cvK1vxO7.js";
4
+ import { icons } from "../../../icons/icons.js";
5
+ import "react";
6
+ import "../../../react-jsx-parser.min-LF707GK8.js";
7
+ import { AnimatedVisibility } from "../../animated-visibility/animated-visibility.js";
8
+ const OptionItemBase = (props) => /* @__PURE__ */ jsx(
5
9
  $eed445e0843c11d0$export$a11e76429ed99b4,
6
10
  {
7
11
  ...props,
8
12
  textValue: props?.value?.label,
9
13
  className: "es:group es:any-focus:outline-hidden es:motion-preset-slide-down es:motion-ease-spring-bouncy es:motion-duration-200",
10
- children: [
14
+ children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
11
15
  props.extraPre,
12
- /* @__PURE__ */ jsx(
16
+ /* @__PURE__ */ jsxs(
13
17
  "div",
14
18
  {
15
19
  className: clsx(
@@ -21,11 +25,43 @@ const OptionItemBase = (props) => /* @__PURE__ */ jsxs(
21
25
  "es:group-not-selected:group-focus-visible:bg-secondary-100 es:group-not-selected:group-focus-visible:outline-hidden",
22
26
  "es:group-active:bg-accent-700/15"
23
27
  ),
24
- children: props.children
28
+ children: [
29
+ props.children,
30
+ props.selectIndicator && /* @__PURE__ */ jsx(
31
+ "div",
32
+ {
33
+ className: clsx(
34
+ "es:size-5 es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1 es:*:row-start-1 es:*:col-start-1",
35
+ "es:transition es:cursor-pointer",
36
+ "es:bg-radial es:border es:rounded-md",
37
+ "es:shadow-xs es:inset-ring es:inset-shadow-xs",
38
+ "es:any-focus:outline-hidden es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
39
+ !isSelected && "es:group-focus-visible:border-accent-500",
40
+ !isSelected && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
41
+ !isSelected && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
42
+ !isSelected && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
43
+ isSelected && "es:text-white es:from-accent-500 es:to-accent-600",
44
+ isSelected && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
45
+ isSelected && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
46
+ "es:ml-auto"
47
+ ),
48
+ children: /* @__PURE__ */ jsx(
49
+ AnimatedVisibility,
50
+ {
51
+ transition: "scaleRotateFade",
52
+ visible: isSelected,
53
+ className: "es:transition-none es:icon:size-3 es:icon:stroke-3",
54
+ noInitial: true,
55
+ children: icons.check
56
+ }
57
+ )
58
+ }
59
+ )
60
+ ]
25
61
  }
26
62
  ),
27
63
  props.extraAfter
28
- ]
64
+ ] })
29
65
  }
30
66
  );
31
67
  export {
@@ -1,20 +1,20 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { _ as __ } from "../../../default-i18n-OFa3zAyB.js";
2
+ import { _ as __ } from "../../../default-i18n-DY6EfUSA.js";
3
3
  import { BaseControl } from "../../base-control/base-control.js";
4
- import { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-CTQWg_HO.js";
5
- import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-DH22t_SM.js";
6
- import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-DfSBLhDx.js";
7
- import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-JS_ob-kh.js";
8
- import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BY3gwI8c.js";
9
- import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-D6EdDPeu.js";
10
- import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-BebwUgKB.js";
4
+ import { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-Fl7qSeN-.js";
5
+ import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-RTwMSBs-.js";
6
+ import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Group-C4cXobNT.js";
7
+ import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
8
+ import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BeC97FZ4.js";
9
+ import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-Xf6AsnV-.js";
10
+ import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-DEQf8ZWI.js";
11
11
  import { useRef, cloneElement, useContext } from "react";
12
12
  import { icons } from "../../../icons/icons.js";
13
13
  import "../../../react-jsx-parser.min-LF707GK8.js";
14
14
  import { OptionItemBase } from "./shared.js";
15
15
  import { RichLabel } from "../../rich-label/rich-label.js";
16
- import { c as clsx } from "../../../utils-CZt7LCbO.js";
17
- import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-BR5z1A4Q.js";
16
+ import { c as clsx } from "../../../utils-cvK1vxO7.js";
17
+ import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-Cl2ggwwq.js";
18
18
  /**
19
19
  * Select menu.
20
20
  *
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
3
- import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
4
- import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-uOPcIpqS.js";
2
+ import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
3
+ import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
4
+ import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-BQFSEhvk.js";
5
5
  import { BaseControl } from "../base-control/base-control.js";
6
6
  import { icons } from "../../icons/icons.js";
7
7
  import { getColumnConfigOutputText } from "./utils.js";
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-CZt7LCbO.js";
3
- import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-JS_ob-kh.js";
4
- import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-uOPcIpqS.js";
2
+ import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-cvK1vxO7.js";
3
+ import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-DWVaNd2E.js";
4
+ import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-BQFSEhvk.js";
5
5
  import { BaseControl } from "../base-control/base-control.js";
6
6
  import { c as clsx } from "../../lite-DVmmD_-j.js";
7
7
  import { NumberPicker } from "../number-picker/number-picker.js";
@@ -1,4 +1,5 @@
1
- import { _ as __, s as sprintf, a as _n } from "../../default-i18n-OFa3zAyB.js";
1
+ import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
2
+ import { _ as __, a as _n } from "../../default-i18n-DY6EfUSA.js";
2
3
  /**
3
4
  * Generates an array of markers based on the provided minimum and maximum values and step.
4
5
  * If the step is less than 10, only markers divisible by 5 and 10 are included.