@eightshift/ui-components 0.0.1 → 0.0.3

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

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BLcVbhiO.js";
-import { $ as $72e60046c03fbe42$export$54fe942636b6416d, b as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-BZPXp3_O.js";
-import { B as Button } from "../../button-BkkdyHfJ.js";
+import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BN0TEda-.js";
+import { b as $72e60046c03fbe42$export$54fe942636b6416d, a as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-CzpWxJsS.js";
+import { B as Button } from "../../button-idVI4jmd.js";
 import { icons } from "../../icons/icons.js";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { Expandable } from "../expandable/expandable.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { useRef } from "react";
 import { useCellEditMode } from "../../hooks/use-cell-edit-mode.js";
@@ -20,8 +20,9 @@ import { useCellEditMode } from "../../hooks/use-cell-edit-mode.js";
  * @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 {bool} [props.expandDisabled] - If `true`, the item cannot be expanded.
  *
- * @returns {JSX.Element} The ButtonGroup component.
+ * @returns {JSX.Element} The RepeaterItem component.
  *
  * @see {@link Repeater} for usage example.
  *
@@ -37,6 +38,7 @@ const RepeaterItem = (props) => {
     className,
     actions,
     textValue,
+    expandDisabled,
     ...rest
   } = props;
   let a11yLabel = textValue;
@@ -54,43 +56,48 @@ const RepeaterItem = (props) => {
       {
         "aria-label": ariaLabel ?? a11yLabel,
         textValue: a11yLabel,
-        className: classnames(
+        className: clsx(
           "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"
         ),
         ...rest,
-        children: ({ selectionMode, allowsDragging, isDragging }) => /* @__PURE__ */ jsx(
-          Expandable,
-          {
-            disabled: selectionMode === "multiple",
-            icon: /* @__PURE__ */ jsxs(Fragment, { children: [
-              selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { slot: "selection" }),
-              selectionMode === "none" && icon
-            ] }),
-            label: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-1", children: label }),
-            subtitle,
-            labelClassName: className,
-            className: classnames(isDragging && "es-uic-opacity-25"),
-            onOpenChange: (isOpen) => setCanReorder(!isOpen),
-            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-              selectionMode === "none" && allowsDragging && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  size: "small",
-                  className: "es-uic-h-6 es-uic-w-4 !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")
-                }
-              ),
-              actions
-            ] }),
-            noFocusHandling: true,
-            ...preventProps,
-            children
+        children: ({ selectionMode, allowsDragging, isDragging }) => {
+          let itemIcon = null;
+          if (selectionMode === "multiple") {
+            itemIcon = /* @__PURE__ */ jsx(Checkbox, { slot: "selection" });
+          } else if (selectionMode === "none") {
+            itemIcon = icon;
           }
-        )
+          return /* @__PURE__ */ jsx(
+            Expandable,
+            {
+              disabled: expandDisabled || selectionMode === "multiple",
+              icon: itemIcon,
+              label: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-1", children: label }),
+              subtitle,
+              labelClassName: className,
+              className: clsx(isDragging && "es-uic-opacity-25"),
+              onOpenChange: (isOpen) => setCanReorder(!isOpen),
+              actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+                selectionMode === "none" && allowsDragging && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    className: "es-uic-h-6 es-uic-w-4 !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")
+                  }
+                ),
+                actions
+              ] }),
+              noFocusHandling: true,
+              ...preventProps,
+              children
+            }
+          );
+        }
       }
     );
   } });
@@ -100,7 +107,7 @@ const Checkbox = (props) => {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: classnames(
+        className: clsx(
           "es-uic-flex es-uic-size-5.5 es-uic-items-center es-uic-justify-center es-uic-rounded-md es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
           isSelected && "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white"
         ),

package/dist/components/repeater/repeater.js

@@ -1,15 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $72e60046c03fbe42$export$54fe942636b6416d, a as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-BZPXp3_O.js";
-import { b as $d8f176866e6dc039$export$2cfc5be7a55829f6, c as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-w9gDaJkV.js";
-import { B as Button, a as ButtonGroup } from "../../button-BkkdyHfJ.js";
+import { b as $72e60046c03fbe42$export$54fe942636b6416d, $ as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-CzpWxJsS.js";
+import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6, a as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-D3Vr4vvC.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { B as Button, a as ButtonGroup } from "../../button-idVI4jmd.js";
 import { icons } from "../../icons/icons.js";
-import { useId, useState, useEffect } from "react";
-import { classnames } from "../../utilities/classnames.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { useId, useState } from "react";
 import { BaseControl } from "../base-control/base-control.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
-import { $ as $0d86e9c8f07f9a7b$export$762f73dccccd255d } from "../../useListData-BelKu4kx.js";
+import { arrayMoveMultiple } from "../../utilities/array-helpers.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "../../useListState-BRsq7O1C.js";
 /**
  * A component that allows re-ordering a list of items with additional sub-options.
  *
@@ -20,8 +21,7 @@ import { $ as $0d86e9c8f07f9a7b$export$762f73dccccd255d } from "../../useListDat
  * @param {string} [props.subtitle] - Subtitle to display.
  * @param {string} [props.help] - Help text to display below the input.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
- * @param {Object[]<string, any>} props.items - Data to display in the repeater.
- * @param {string} [props.itemLabelProp] - Property of an item to use as the label when re-ordering items.
+ * @param {Object<string, any>[]} props.items - Data to display in the repeater.
  * @param {boolean} [props.hideEmptyState] - If `true`, the empty state will not be displayed when there are no items.
  * @param {Object<string, any>} [props.addDefaultItem] - Additional properties to add to a new item.
  * @param {boolean} [props.addDisabled] - If `true`, the add button is disabled.
@@ -29,6 +29,9 @@ import { $ as $0d86e9c8f07f9a7b$export$762f73dccccd255d } from "../../useListDat
  * @param {Function} [props.onAfterItemAdd] - Function to run after an item is added.
  * @param {Function} [props.onAfterItemRemove] - Function to run after an item is removed.
  * @param {Number} [props.minItems] - The minimum number of items that must be present. If there are less items than this, deleting items will be disabled.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {JSX.Element} [props.addButton] - If provided, overrides the default add button. `(props: { addItem: (additional: Object<string, any>?) => void, disabled: Boolean }) => JSX.Element`.
+ * @param {string} [props.className] - Classes to pass to the item wrapper.
  *
  * @returns {JSX.Element} The Repeater component.
  *
@@ -63,9 +66,8 @@ const Repeater = (props) => {
   const itemIdBase = useId("repeater-item-");
   const {
     children,
-    onChange,
-    items,
-    itemLabelProp,
+    onChange: rawOnChange,
+    items: rawItems,
     "aria-label": ariaLabel,
     icon,
     label,
@@ -78,25 +80,65 @@ const Repeater = (props) => {
     onAfterItemAdd,
     onAfterItemRemove,
     minItems,
+    addButton,
+    className,
+    hidden,
     ...rest
   } = props;
-  const list = $0d86e9c8f07f9a7b$export$762f73dccccd255d({
-    initialItems: items == null ? void 0 : items.map((item, i) => ({ id: item.id ?? `${itemIdBase}${i}`, ...item })),
-    getKey: ({ id }) => id
-  });
   const [selectable, setSelectable] = useState(false);
   const [canDelete, setCanDelete] = useState(false);
   const [canReorder, setCanReorder] = useState(true);
+  const items = rawItems.map((item, i) => ({
+    key: item.key ?? `${itemIdBase}-${i}`,
+    ...item
+  }));
+  const rawList = $e72dd72e1c76a225$export$2f645645f7bca764({
+    items,
+    selectionMode: selectable ? "multiple" : "none"
+  });
+  const onChange = (items2) => {
+    const currentItems = [...items2];
+    currentItems.forEach((item) => delete item.key);
+    rawOnChange(currentItems);
+  };
+  const list = {
+    items,
+    selectedKeys: rawList.selectionManager.selectedKeys,
+    setSelectedKeys: (keys) => rawList.selectionManager.setSelectedKeys(keys),
+    getKey: ({ key }) => items.find((item) => item.key === key),
+    getItem: (key) => items.find((item) => item.key === key),
+    update: (key, newValue) => {
+      const index = [...items].findIndex((item) => item.key === key);
+      items[index] = { ...items[index], ...newValue };
+      onChange(items);
+    },
+    move: (sourceKey, targetKeys) => {
+      const sourceIndex = items.findIndex((item) => item.key === sourceKey);
+      const targetIndices = [...targetKeys].map((key) => items.findIndex((item) => item.key === key));
+      onChange(arrayMoveMultiple(items, targetIndices, sourceIndex));
+    },
+    insert: (targetKey, ...newItems) => {
+      const targetIndex = items.findIndex((item) => item.key === targetKey);
+      const newItemsWithKeys = newItems.map((item) => ({ ...item, id: `${itemIdBase}${items.length + 1}` }));
+      onChange([...items.slice(0, targetIndex), ...newItemsWithKeys, ...items.slice(targetIndex)]);
+    },
+    removeSelectedItems: () => {
+      const keys = rawList.selectionManager.selectedKeys;
+      const newItems = items.filter((item) => !keys.has(item.key));
+      onChange(newItems);
+    },
+    append: (item) => {
+      onChange([...items, item]);
+    }
+  };
   let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
     isDisabled: selectable || !canReorder,
-    getItems: (keys) => [...keys].map((key) => ({
-      "text/plain": list.getItem(key)[itemLabelProp] ?? __("New item", "eightshift-ui-components")
-    })),
+    getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).id })),
     onReorder(e) {
       if (e.target.dropPosition === "before") {
-        list.moveBefore(e.target.key, e.keys);
+        list.move(e.target.key, e.keys);
       } else if (e.target.dropPosition === "after") {
-        list.moveAfter(e.target.key, e.keys);
+        list.move(e.target.key, e.keys);
       }
     },
     renderDropIndicator(target) {
@@ -104,41 +146,17 @@ const Repeater = (props) => {
         $d8f176866e6dc039$export$62ed72bc21f6b8a6,
         {
           target,
-          className: ({ isDropTarget }) => classnames(
+          className: ({ isDropTarget }) => clsx(
             "es-uic-h-10 es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-transition",
             isDropTarget ? "es-uic-border-teal-500 es-uic-bg-teal-500/5" : "es-uic-border-dashed"
           )
         }
       );
-    },
-    renderDragPreview(items2) {
-      let label2 = items2[0]["text/plain"];
-      if (!label2 || label2 === "") {
-        label2 = __("New item", "eightshift-ui-components");
-      }
-      return /* @__PURE__ */ jsx("div", { className: "es-uic-rounded-md es-uic-bg-teal-500 es-uic-px-1.5 es-uic-py-1 es-uic-text-xs es-uic-text-white es-uic-shadow-lg es-uic-shadow-teal-500/30", children: label2 });
-    },
-    async onInsert(e) {
-      let items2 = await Promise.all(
-        e.items.map(async (item) => {
-          let name = item.kind === "text" ? await item.getText("text/plain") : item.name;
-          return { id: Math.random(), name };
-        })
-      );
-      if (e.target.dropPosition === "before") {
-        list.insertBefore(e.target.key, ...items2);
-      } else if (e.target.dropPosition === "after") {
-        list.insertAfter(e.target.key, ...items2);
-      }
     }
   });
-  useEffect(() => {
-    const items2 = list.items.map((item) => {
-      const { id, ...rest2 } = item;
-      return rest2;
-    });
-    onChange(items2);
-  }, [list.items]);
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     BaseControl,
     {
@@ -158,9 +176,7 @@ const Repeater = (props) => {
               {
                 onPress: () => {
                   var _a;
-                  const removedItems = [
-                    ...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((key) => list.getItem(key))) ?? []
-                  ];
+                  const removedItems = [...((_a = list == null ? void 0 : list.selectedKeys.keys()) == null ? void 0 : _a.map((key) => list.getItem(key))) ?? []];
                   list.removeSelectedItems();
                   setSelectable(false);
                   setCanDelete(false);
@@ -179,7 +195,7 @@ const Repeater = (props) => {
           }
         ),
         /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-          /* @__PURE__ */ jsx(
+          !addButton && /* @__PURE__ */ jsx(
             Button,
             {
               onPress: () => {
@@ -195,6 +211,16 @@ const Repeater = (props) => {
               disabled: addDisabled || selectable
             }
           ),
+          addButton && addButton({
+            addItem: (additional = {}) => {
+              const newItem = { id: `${itemIdBase}${list.items.length + 1}`, ...addDefaultItem, ...additional };
+              list.append(newItem);
+              if (onAfterItemAdd) {
+                onAfterItemAdd(newItem);
+              }
+            },
+            disabled: addDisabled || selectable
+          }),
           /* @__PURE__ */ jsx(
             ToggleButton,
             {
@@ -226,16 +252,16 @@ const Repeater = (props) => {
           items: list.items.map((item, index) => ({
             ...item,
             updateData: (newValue) => {
-              list.update(item.id, { ...list.getItem(item.id), ...newValue });
+              list.update(item.key, { ...list.getItem(item.key), ...newValue });
             },
             itemIndex: index,
-            deleteItem: () => list.remove(item.id),
+            deleteItem: () => list.remove(item.key),
             canReorder,
             setCanReorder
           })),
           dragAndDropHooks,
           renderEmptyState: () => hideEmptyState ? null : /* @__PURE__ */ jsx("div", { className: "es-uic-rounded-md es-uic-border es-uic-border-dashed es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-text-gray-400", children: __("No items", "eightshift-ui-components") }),
-          className: "es-uic-space-y-1.5",
+          className,
           ...rest,
           children
         }

package/dist/components/responsive/responsive-legacy.js

@@ -1,12 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { D as DecorativeTooltip } from "../../tooltip-CkCndvTI.js";
-import { classnames } from "../../utilities/classnames.js";
-import { _ as __, s as sprintf } from "../../default-i18n-BhE-OUmt.js";
+import { D as DecorativeTooltip } from "../../tooltip-T6H9uF-Z.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/text-helpers.js";
 import { icons } from "../../icons/icons.js";
-import { B as Button } from "../../button-BkkdyHfJ.js";
+import { B as Button } from "../../button-idVI4jmd.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -43,6 +43,7 @@ import { BaseControl } from "../base-control/base-control.js";
  * @param {boolean} [props.inline] - If `true`, the default breakpoint is shown inline with the label. In the expanded state, all breakpoints are shown below the label.
  * @param {Object<string, number>} [props.breakpointData] - Breakpoints to use. `{ [breakpoint: string]: number }`.
  * @param {string[]} [props.breakpoints] - Breakpoints to use. `{ [breakpoint: string]: number }`.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ResponsiveLegacy component.
  *
@@ -89,13 +90,17 @@ const ResponsiveLegacy = (props) => {
     children,
     inline,
     breakpointData,
-    breakpoints: rawBreakpoints = Object.keys(breakpointData).toReversed()
+    breakpoints: rawBreakpoints = Object.keys(breakpointData).toReversed(),
+    hidden
   } = props;
   const inheritValue = allowUndefined ? void 0 : rawInheritValue;
   const [detailsVisible, setDetailsVisible] = useState(false);
   const breakpoints = rawBreakpoints.slice(1);
   const globalOverride = breakpoints.find((breakpoint) => (value == null ? void 0 : value[attribute[breakpoint]]) !== inheritValue);
   const defaultBreakpoint = rawBreakpoints[0];
+  if (hidden) {
+    return null;
+  }
   const DefaultTooltip = () => {
     var _a, _b;
     return /* @__PURE__ */ jsx(
@@ -136,7 +141,7 @@ const ResponsiveLegacy = (props) => {
             }
           ) })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-8 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-200 es-uic-p-0.5 es-uic-text-gray-950 [&>svg]:es-uic-size-4", children: icons[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
+        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-border-teal-500/10 es-uic-bg-teal-50 es-uic-p-0.5 es-uic-text-teal-800 es-uic-shadow-sm es-uic-shadow-teal-600/25 [&>svg]:es-uic-size-5", children: icons[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
       }
     );
   };
@@ -179,13 +184,13 @@ const ResponsiveLegacy = (props) => {
         !inline && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classnames(
+            className: clsx(
               "es-uic-grid es-uic-items-center es-uic-gap-x-2 es-uic-transition-[grid-template-columns,_margin-block-end] es-uic-duration-150",
-              detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_2rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+              detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: classnames(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
+              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
                 breakpoint: defaultBreakpoint,
                 currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
                 options,
@@ -286,9 +291,9 @@ const ResponsiveLegacy = (props) => {
                         children: /* @__PURE__ */ jsx(
                           "div",
                           {
-                            className: classnames(
-                              "es-uic-flex es-uic-size-8 es-uic-shrink-0 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-100 es-uic-p-0.5 es-uic-text-gray-800",
-                              value[attribute[breakpoint]] === inheritValue && "[&>svg]:es-uic-opacity-25"
+                            className: clsx(
+                              "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-shadow-sm es-uic-transition-colors [&>svg]:es-uic-size-5",
+                              value[attribute[breakpoint]] === inheritValue ? "es-uic-border-gray-200 es-uic-bg-gray-50 es-uic-text-gray-700" : "es-uic-border-gray-100 es-uic-bg-white es-uic-text-gray-500"
                             ),
                             children: (_e = icons) == null ? void 0 : _e[`screen${upperFirst(breakpoint)}`]
                           }