@eightshift/ui-components 1.4.6 → 1.5.0

package/dist/components/base-control/base-control.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-D8qh3_U7.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-CdwRBXol.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**

package/dist/components/button/button.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-uYE9D_E3.js";
-import { g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-B4IdLYb8.js";
-import { b as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-CVd6C65L.js";
+import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CYX0D6At.js";
+import { j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-Du2x3YVu.js";
+import { a as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-B5L3qI3N.js";
 import React__default, { useState, useRef, forwardRef, createContext } from "react";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Bon2Gyx5.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-kCEA3M_y.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { T as Tooltip } from "../../tooltip-C9mg1CP5.js";
+import { T as Tooltip } from "../../tooltip-srrt1p-b.js";
 import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;

package/dist/components/checkbox/checkbox.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { $ as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-DQtGvvpM.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-B4IdLYb8.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-Du2x3YVu.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useEffect, useRef, forwardRef, useContext, createContext } from "react";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$dad6ae84456c676a, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-DC5jbhBW.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-CJp2Fh_L.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-B4--Ski0.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DsxEaA2J.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-PMGZgZ9-.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DD480kAb.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$dad6ae84456c676a, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-DAan_XbC.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-Cn2nQUNS.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-Dj0JhD9W.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-rz8eyzby.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-xMzk3syC.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DsMLX-RC.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";

package/dist/components/color-pickers/color-swatch.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Bev-9Vbr.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-KQxgp5tS.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BNX2quma.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-BxJIrC6b.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 /**

package/dist/components/color-pickers/gradient-editor.js

@@ -6,7 +6,7 @@ import { icons } from "../../icons/icons.js";
 import { SolidColorPicker } from "./solid-color-picker.js";
 import { Slider } from "../slider/slider.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Bev-9Vbr.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BNX2quma.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Spacer } from "../spacer/spacer.js";

package/dist/components/color-pickers/solid-color-picker.js

@@ -1,26 +1,26 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { forwardRef, useContext, createContext, useMemo, useRef, useState, useCallback } from "react";
 import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-DQtGvvpM.js";
-import { b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-B4IdLYb8.js";
+import { b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-Du2x3YVu.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DsxEaA2J.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, m as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, v as $c87311424ea30a05$export$a11b0059900ceec8 } from "../../focusSafely-PMGZgZ9-.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-KQxgp5tS.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-rz8eyzby.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, m as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, v as $c87311424ea30a05$export$a11b0059900ceec8 } from "../../focusSafely-xMzk3syC.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-BxJIrC6b.js";
 import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-CHmNj-oR.js";
-import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-DS7-670U.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-JaBafrnV.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BCPbwfnH.js";
-import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-BFKHuYS9.js";
-import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-D8a63VhT.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Bon2Gyx5.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-CVIIVTgz.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-DD480kAb.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-CBPJ4Xx8.js";
-import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CaS4qmLb.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-yZgqvhXc.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-D8qh3_U7.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-DC5jbhBW.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-BVFqhboT.js";
+import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-D5Bit8i8.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-DmsOywGg.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-fUHUaaR6.js";
+import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-Bu2Ovohk.js";
+import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-Dkj8Slw3.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-kCEA3M_y.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-m03yY3xi.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-DsMLX-RC.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ClB3-XvF.js";
+import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BoNEjaXM.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BqW0M3HN.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-CdwRBXol.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-DAan_XbC.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-CpmU88xz.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { _ as __ } from "../../default-i18n-BqWys-1G.js";

package/dist/components/component-toggle/component-toggle.js

@@ -108,6 +108,7 @@ const ComponentToggle = (props) => {
         }
       ),
       disabled: !useComponent || expandButtonDisabled,
+      noFocusHandling: true,
       children: !expandButtonDisabled && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
     }
   );

package/dist/components/draggable/draggable-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const DraggableContext = createContext();
+export {
+  DraggableContext
+};

package/dist/components/draggable/draggable-item.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import "../../default-i18n-BqWys-1G.js";
+import { DraggableContext } from "./draggable-context.js";
+import { useContext } from "react";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-CAGfntg1.js";
+/**
+ * A Draggable item.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the container.
+ *
+ * @returns {JSX.Element} The DraggableList component.
+ *
+ * @see {@link DraggableList} for usage example.
+ *
+ * @preserve
+ */
+const DraggableItem = (props) => {
+  const { children, className, ...rest } = props;
+  const { itemId } = useContext(DraggableContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-swapy-item": itemId,
+      className,
+      ...rest,
+      children
+    }
+  );
+};
+/**
+ * A Draggable item handle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the handle.
+ *
+ * @returns {JSX.Element} The DraggableItemHandle component.
+ *
+ * @example
+ * <DraggableItemHandle />
+ *
+ * @preserve
+ */
+const DraggableItemHandle = (props) => {
+  const { className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-swapy-handle": true,
+      className: clsx(
+        "es-uic-w-fit es-uic-cursor-pointer es-uic-rounded es-uic-border es-uic-border-gray-100 es-uic-bg-white es-uic-py-0.5 es-uic-text-gray-400 [&>svg]:es-uic-size-4",
+        className
+      ),
+      ...rest,
+      children: children ?? icons.reorderGrabberV
+    }
+  );
+};
+export {
+  DraggableItem,
+  DraggableItemHandle
+};

package/dist/components/draggable/draggable.js

@@ -0,0 +1,159 @@
+import { jsx } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState, useEffect } from "react";
+import "../../default-i18n-BqWys-1G.js";
+import { j as je } from "../../swapy-qb4t7itb.js";
+import { DraggableContext } from "./draggable-context.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+const fixIds = (items, itemIdBase) => {
+  return items.map((item, i) => ({
+    ...item,
+    id: (item == null ? void 0 : item.id) ?? `${itemIdBase}-${i}`
+  }));
+};
+/**
+ * A component that allows re-ordering items freely.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object<string, any>[]} props.items - Data to display in the list.
+ * @param {Function} props.onChange - Function to run when the items change.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {boolean} [props.noReorder] - If `true`, item reordering is disabled.
+ * @param {string} [props.className] - Classes to pass to the component.
+ * @param {string} [props.slotClassName] - Classes to pass to the item container slot.
+ *
+ * @returns {JSX.Element} The Draggable component.
+ *
+ * @example
+ * <Draggable
+ * 	items={items}
+ * 	onChange={setItems}
+ * >
+ * 	{(item) => {
+ * 		const { title, updateData } = item;
+ *
+ * 		return (
+ * 			<DraggableItem
+ * 				label={title ?? 'New item'}
+ * 				icon={icons.myIcon}
+ * 			>
+ * 				<InputField
+ * 					label='Title'
+ * 					type='text'
+ * 					value={title}
+ * 					onChange={(value) => updateData({ title: value })}
+ * 				/>
+ * 			</DraggableItem>
+ * 		);
+ * 	}}
+ * </Draggable>
+ *
+ * @preserve
+ */
+const Draggable = (props) => {
+  const itemIdBase = useId("draggable-list-item-");
+  const {
+    children,
+    items: rawItems,
+    onChange,
+    noReorder,
+    className,
+    slotClassName,
+    hidden,
+    ...rest
+  } = props;
+  const items = useMemo(() => fixIds(rawItems, itemIdBase), [rawItems]);
+  const ref = useRef(null);
+  const swapyRef = useRef(null);
+  const [slotItemsMap, setSlotItemsMap] = useState([
+    ...items.map((item) => ({
+      slotId: item.id,
+      itemId: item.id
+    }))
+  ]);
+  const slottedItems = useMemo(
+    () => slotItemsMap.map(({ slotId, itemId }) => ({
+      slotId,
+      itemId,
+      item: items.find((item) => item.id === itemId)
+    })),
+    [items, slotItemsMap]
+  );
+  useEffect(() => {
+    var _a;
+    const newItems = items.filter((item) => !slotItemsMap.some((slotItem) => slotItem.itemId === item.id)).map((item) => ({
+      slotId: item.id,
+      itemId: item.id
+    }));
+    const withoutRemovedItems = slotItemsMap.filter((slotItem) => items.some((item) => item.id === slotItem.itemId) || !slotItem.itemId);
+    const updatedSlotItemsMap = [...withoutRemovedItems, ...newItems];
+    setSlotItemsMap(updatedSlotItemsMap);
+    (_a = swapyRef.current) == null ? void 0 : _a.setData({ array: updatedSlotItemsMap });
+  }, [items]);
+  useEffect(() => {
+    const container = ref == null ? void 0 : ref.current;
+    swapyRef.current = je(container, {
+      manualSwap: true
+    });
+    swapyRef.current.onSwap(({ data }) => {
+      var _a;
+      const tweakedItems = data.array.filter(({ itemId }) => itemId !== null).map(({ itemId }) => items.find((item) => (item == null ? void 0 : item.id) === itemId));
+      onChange(tweakedItems);
+      (_a = swapyRef.current) == null ? void 0 : _a.setData({ array: data.array });
+      setSlotItemsMap(data.array);
+    });
+    return () => {
+      var _a;
+      (_a = swapyRef.current) == null ? void 0 : _a.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    (_a = swapyRef == null ? void 0 : swapyRef.current) == null ? void 0 : _a.enable(!noReorder);
+  }, [noReorder]);
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      ref,
+      ...rest,
+      children: slottedItems.map(({ itemId, slotId, item }, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "es-uic-transition-colors data-[swapy-highlighted]:es-uic-rounded-md data-[swapy-highlighted]:es-uic-outline-dashed data-[swapy-highlighted]:es-uic-outline-1 data-[swapy-highlighted]:es-uic-outline-teal-500/50",
+            slotClassName
+          ),
+          "data-swapy-slot": slotId,
+          children: item && /* @__PURE__ */ jsx(
+            DraggableContext.Provider,
+            {
+              value: { itemId },
+              children: children({
+                ...item,
+                updateData: (newValue) => {
+                  onChange(items.map((i) => i.id === itemId ? { ...i, ...newValue } : i));
+                },
+                itemIndex: index,
+                deleteItem: () => {
+                  onChange(items.filter((i) => i.id !== item.id));
+                  if (item.onAfterItemRemove) {
+                    onAfterItemRemove(item);
+                  }
+                }
+              })
+            },
+            itemId
+          )
+        },
+        slotId
+      ))
+    }
+  );
+};
+export {
+  Draggable
+};

package/dist/components/draggable-list/draggable-list-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const DraggableListContext = createContext();
+export {
+  DraggableListContext
+};

package/dist/components/draggable-list/draggable-list-item.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-PBJsm70G.js";
-import { Button } from "../button/button.js";
-import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-BqWys-1G.js";
+import "../../default-i18n-BqWys-1G.js";
 import { RichLabel } from "../rich-label/rich-label.js";
+import { DraggableListContext } from "./draggable-list-context.js";
+import { useContext } from "react";
 /**
  * A DraggableList item.
  *
@@ -15,7 +14,8 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @param {string} [props.subtitle] - Subtitle to display.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
  * @param {string} [props.textValue] - The text value of the item.
- * @param {string} [props.className] - Classes to pass to the item.
+ * @param {string} [props.className] - Classes to pass to the label.
+ * @param {string} [props.containerClassName] - Classes to pass to the item container.
  *
  * @returns {JSX.Element} The DraggableList component.
  *
@@ -24,51 +24,63 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @preserve
  */
 const DraggableListItem = (props) => {
-  const { children, icon, label, subtitle, "aria-label": ariaLabel, className, textValue, ...rest } = props;
-  let a11yLabel = textValue;
-  if ((label == null ? void 0 : label.length) > 0) {
-    a11yLabel = label;
-  }
-  if (a11yLabel === "" || !a11yLabel) {
-    a11yLabel = __("New item", "eightshift-ui-components");
-  }
+  const { children, icon, label, subtitle, className, containerClassName, ...rest } = props;
+  const { labelAsHandle } = useContext(DraggableListContext);
+  const labelElement = /* @__PURE__ */ jsx(
+    RichLabel,
+    {
+      hidden: !(icon || label || subtitle),
+      icon,
+      label,
+      subtitle,
+      className,
+      fullWidth: true
+    }
+  );
   return /* @__PURE__ */ jsxs(
-    $72e60046c03fbe42$export$e96fc9a8407faa6b,
+    "div",
     {
-      "aria-label": ariaLabel ?? a11yLabel,
-      textValue: a11yLabel,
       className: clsx(
         "es-uic-flex es-uic-min-h-7 es-uic-items-center es-uic-gap-1 es-uic-rounded-lg es-uic-transition",
-        "focus:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
+        "focus:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+        containerClassName
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(
-          RichLabel,
-          {
-            icon,
-            label,
-            subtitle,
-            className,
-            fullWidth: true
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            className: "es-uic-ml-auto es-uic-h-6 es-uic-w-4 es-uic-shrink-0 !es-uic-text-gray-500 es-uic-opacity-5 focus:!es-uic-opacity-100",
-            slot: "drag",
-            type: "ghost",
-            icon: icons.reorderGrabberV,
-            tooltip: __("Re-order", "eightshift-ui-components")
-          }
-        ),
+        labelAsHandle && /* @__PURE__ */ jsx("div", { "data-swapy-handle": true, children: labelElement }),
+        !labelAsHandle && labelElement,
         children
       ]
     }
   );
 };
+/**
+ * A Draggable item handle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the handle.
+ *
+ * @returns {JSX.Element} The DraggableListItemHandle component.
+ *
+ * @example
+ * <DraggableListItemHandle />
+ *
+ * @preserve
+ */
+const DraggableListItemHandle = (props) => {
+  const { className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-swapy-handle": true,
+      className: className ?? 'es-uic-relative es-uic-h-6 es-uic-w-2 es-uic-cursor-pointer es-uic-items-center es-uic-justify-center es-uic-self-center es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-transition after:es-uic-absolute after:es-uic-inset-0 after:es-uic-m-auto after:es-uic-h-4 after:es-uic-w-px after:es-uic-bg-gray-200 after:es-uic-transition after:es-uic-content-[""] hover:es-uic-border-teal-500 hover:es-uic-bg-teal-400 hover:after:es-uic-bg-teal-500',
+      ...rest,
+      children
+    }
+  );
+};
 export {
-  DraggableListItem
+  DraggableListItem,
+  DraggableListItemHandle
 };