@eightshift/ui-components 1.0.2 → 1.0.3

package/dist/components/repeater/repeater.js

@@ -8,7 +8,7 @@ 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 { fixIds, arrayMoveMultiple } from "../../utilities/array-helpers.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";
 /**
@@ -67,7 +67,8 @@ const Repeater = (props) => {
   const itemIdBase = useId("repeater-item-");
   const {
     children,
-    items,
+    onChange: rawOnChange,
+    items: rawItems,
     "aria-label": ariaLabel,
     icon,
     label,
@@ -77,7 +78,6 @@ const Repeater = (props) => {
     hideEmptyState,
     addDefaultItem = {},
     addDisabled,
-    onChange,
     onAfterItemAdd,
     onAfterItemRemove,
     minItems,
@@ -90,7 +90,15 @@ const Repeater = (props) => {
   const [selectable, setSelectable] = useState(false);
   const [canDelete, setCanDelete] = useState(false);
   const [canReorder, setCanReorder] = useState(true);
-  fixIds(items, onChange, "key");
+  const onChange = (items2) => {
+    const currentItems = [...items2];
+    currentItems.forEach((item) => delete item.id);
+    rawOnChange(currentItems);
+  };
+  const items = rawItems.map((item, i) => ({
+    id: item.id ?? `${itemIdBase}-${i}`,
+    ...item
+  }));
   const rawList = $e72dd72e1c76a225$export$2f645645f7bca764({
     items,
     selectionMode: selectable ? "multiple" : "none"
@@ -98,27 +106,27 @@ const Repeater = (props) => {
   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);
+    setSelectedKeys: (ids) => rawList.selectionManager.setSelectedKeys(ids),
+    getKey: ({ id }) => items.find((item) => item.id === id),
+    getItem: (id) => items.find((item) => item.id === id),
+    update: (id, newValue) => {
+      const index = [...items].findIndex((item) => item.id === id);
       items[index] = { ...items[index], ...newValue };
       onChange(items);
     },
     move: (sourceKey, targetKeys, direction = "before") => {
-      const sourceIndex = items.findIndex((item) => item.key === sourceKey);
-      const targetIndices = [...targetKeys].map((key) => items.findIndex((item) => item.key === key));
+      const sourceIndex = items.findIndex((item) => item.id === sourceKey);
+      const targetIndices = [...targetKeys].map((id) => items.findIndex((item) => item.id === id));
       onChange(arrayMoveMultiple(items, targetIndices, sourceIndex, direction));
     },
     insert: (targetKey, ...newItems) => {
-      const targetIndex = items.findIndex((item) => item.key === targetKey);
+      const targetIndex = items.findIndex((item) => item.id === 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));
+      const ids = rawList.selectionManager.selectedKeys;
+      const newItems = items.filter((item) => !ids.has(item.id));
       onChange(newItems);
     },
     append: (item) => {
@@ -127,8 +135,9 @@ const Repeater = (props) => {
   };
   let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
     isDisabled: selectable || !canReorder,
-    getItems: (keys) => [...keys].map((key) => ({ "text/plain": list.getItem(key).id })),
+    getItems: (ids) => [...ids].map((id) => ({ "text/plain": list.getItem(id).id })),
     onReorder(e) {
+      console.log(e);
       if (e.target.dropPosition === "before") {
         list.move(e.target.key, e.keys);
       } else if (e.target.dropPosition === "after") {
@@ -170,7 +179,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((id) => list.getItem(id))) ?? []];
                   list.removeSelectedItems();
                   setSelectable(false);
                   setCanDelete(false);
@@ -246,10 +255,10 @@ const Repeater = (props) => {
           items: list.items.map((item, index) => ({
             ...item,
             updateData: (newValue) => {
-              list.update(item.key, { ...list.getItem(item.key), ...newValue });
+              list.update(item.id, { ...list.getItem(item.id), ...newValue });
             },
             itemIndex: index,
-            deleteItem: () => list.remove(item.key),
+            deleteItem: () => list.remove(item.id),
             canReorder,
             setCanReorder
           })),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",