@akanjs/ui 1.0.14 → 1.0.16

package/DraggableList.d.ts

@@ -17,11 +17,14 @@ interface Cursor {
 interface ItemProps {
     value: any;
     children: ReactNode;
+    className?: string;
+    cursorClassName?: string;
     removable?: boolean;
+    removeClassName?: string;
 }
 export declare const DraggableList: {
     <V>({ className, mode, children, onChange, onRemove }: DragListProps<V>): import("react/jsx-runtime").JSX.Element;
     Cursor({ className, children }: Cursor): import("react/jsx-runtime").JSX.Element;
-    Item: ({ value, children, removable }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value, children, className, cursorClassName, removable, removeClassName }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/cjs/DraggableList.js

@@ -55,7 +55,8 @@ const DragList = ({ className, mode = "vertical", children, onChange, onRemove }
     fn(
       order.current,
       new Array(children.length).fill(0),
-      new Array(children.length).fill(0)
+      new Array(children.length).fill(0),
+      children.length
     )
   );
   const bind = (0, import_react.useGesture)({
@@ -81,10 +82,14 @@ const DragList = ({ className, mode = "vertical", children, onChange, onRemove }
       const curRow = (0, import_lodash.default)(centerIdx, 0, children.length - 1);
       const newOrder = (0, import_lodash_move.default)(order.current, originIdx, curRow);
       const newClientHeights = (0, import_lodash_move.default)([...clientLengths.current], originIdx, curRow);
-      void api.start(fn(newOrder, clientLengths.current, newClientHeights, active, originIdx, movement));
+      void api.start(
+        fn(newOrder, clientLengths.current, newClientHeights, children.length, active, originIdx, movement)
+      );
       if (!active) {
         const draggedValue = children[originIdx].props.value;
-        void api.start(fn(order.current, clientLengths.current, newClientHeights, active, originIdx, movement, true));
+        void api.start(
+          fn(order.current, clientLengths.current, newClientHeights, children.length, active, originIdx, movement, true)
+        );
         onChange(
           children.map((_, index) => children[newOrder[index]].props.value),
           draggedValue,
@@ -93,7 +98,7 @@ const DragList = ({ className, mode = "vertical", children, onChange, onRemove }
       }
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)(`flex gap-0`, { "flex-col": mode === "vertical" }, className), children: springs.map(({ zIndex, shadow, movement, scale }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)(`isolate flex gap-0`, { "flex-col": mode === "vertical" }, className), children: springs.map(({ zIndex, shadow, movement, scale }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ui.animated.div,
     {
       ref: (el) => {
@@ -133,15 +138,15 @@ DragList.Cursor = ({ className, children }) => {
     }
   );
 };
-const Item = ({ value, children, removable = false }) => {
+const Item = ({ value, children, className, cursorClassName, removable = false, removeClassName }) => {
   const { onRemove } = useDragList();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DraggableList.Cursor, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_md.MdDragIndicator, { className: "text-xl" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex w-full items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DraggableList.Cursor, { className: cursorClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_md.MdDragIndicator, { className: "text-xl" }) }),
     children,
     removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
-        className: "btn btn-xs btn-error btn-square btn-outline",
+        className: (0, import_client.clsx)("btn btn-xs btn-error btn-square btn-outline", removeClassName),
         onClick: () => {
           onRemove(value);
         },
@@ -151,18 +156,18 @@ const Item = ({ value, children, removable = false }) => {
   ] }) });
 };
 DragList.Item = Item;
-const fn = (order, heights, newHeights, active = false, originalIndex = 0, movement = 0, finished = false) => (index) => {
+const fn = (order, heights, newHeights, total, active = false, originalIndex = 0, movement = 0, finished = false) => (index) => {
   return active && index === originalIndex ? {
     movement,
     scale: 1.01,
-    zIndex: 1,
+    zIndex: total + 1,
     // shadow: 15,
     immediate: (key) => key === "zIndex",
     config: (key) => key === "y" ? import_web.config.stiff : import_web.config.default
   } : {
     movement: index === originalIndex ? newHeights.slice(0, order.indexOf(index)).reduce((a, b) => a + b, 0) - heights.slice(0, index).reduce((a, b) => a + b, 0) : order.indexOf(index) === index ? 0 : order.indexOf(index) > index ? heights[originalIndex] : -heights[originalIndex],
     scale: 1,
-    zIndex: 0,
+    zIndex: total - index,
     shadow: 0,
     immediate: finished
   };

package/esm/DraggableList.js

@@ -23,7 +23,8 @@ const DragList = ({ className, mode = "vertical", children, onChange, onRemove }
     fn(
       order.current,
       new Array(children.length).fill(0),
-      new Array(children.length).fill(0)
+      new Array(children.length).fill(0),
+      children.length
     )
   );
   const bind = useGesture({
@@ -49,10 +50,14 @@ const DragList = ({ className, mode = "vertical", children, onChange, onRemove }
       const curRow = clamp(centerIdx, 0, children.length - 1);
       const newOrder = swap(order.current, originIdx, curRow);
       const newClientHeights = swap([...clientLengths.current], originIdx, curRow);
-      void api.start(fn(newOrder, clientLengths.current, newClientHeights, active, originIdx, movement));
+      void api.start(
+        fn(newOrder, clientLengths.current, newClientHeights, children.length, active, originIdx, movement)
+      );
       if (!active) {
         const draggedValue = children[originIdx].props.value;
-        void api.start(fn(order.current, clientLengths.current, newClientHeights, active, originIdx, movement, true));
+        void api.start(
+          fn(order.current, clientLengths.current, newClientHeights, children.length, active, originIdx, movement, true)
+        );
         onChange(
           children.map((_, index) => children[newOrder[index]].props.value),
           draggedValue,
@@ -61,7 +66,7 @@ const DragList = ({ className, mode = "vertical", children, onChange, onRemove }
       }
     }
   });
-  return /* @__PURE__ */ jsx("div", { className: clsx(`flex gap-0`, { "flex-col": mode === "vertical" }, className), children: springs.map(({ zIndex, shadow, movement, scale }, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: clsx(`isolate flex gap-0`, { "flex-col": mode === "vertical" }, className), children: springs.map(({ zIndex, shadow, movement, scale }, i) => /* @__PURE__ */ jsx(
     animated.div,
     {
       ref: (el) => {
@@ -101,15 +106,15 @@ DragList.Cursor = ({ className, children }) => {
     }
   );
 };
-const Item = ({ value, children, removable = false }) => {
+const Item = ({ value, children, className, cursorClassName, removable = false, removeClassName }) => {
   const { onRemove } = useDragList();
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
-    /* @__PURE__ */ jsx(DraggableList.Cursor, { children: /* @__PURE__ */ jsx(MdDragIndicator, { className: "text-xl" }) }),
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: clsx("flex w-full items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(DraggableList.Cursor, { className: cursorClassName, children: /* @__PURE__ */ jsx(MdDragIndicator, { className: "text-xl" }) }),
     children,
     removable && /* @__PURE__ */ jsx(
       "button",
       {
-        className: "btn btn-xs btn-error btn-square btn-outline",
+        className: clsx("btn btn-xs btn-error btn-square btn-outline", removeClassName),
         onClick: () => {
           onRemove(value);
         },
@@ -119,18 +124,18 @@ const Item = ({ value, children, removable = false }) => {
   ] }) });
 };
 DragList.Item = Item;
-const fn = (order, heights, newHeights, active = false, originalIndex = 0, movement = 0, finished = false) => (index) => {
+const fn = (order, heights, newHeights, total, active = false, originalIndex = 0, movement = 0, finished = false) => (index) => {
   return active && index === originalIndex ? {
     movement,
     scale: 1.01,
-    zIndex: 1,
+    zIndex: total + 1,
     // shadow: 15,
     immediate: (key) => key === "zIndex",
     config: (key) => key === "y" ? config.stiff : config.default
   } : {
     movement: index === originalIndex ? newHeights.slice(0, order.indexOf(index)).reduce((a, b) => a + b, 0) - heights.slice(0, index).reduce((a, b) => a + b, 0) : order.indexOf(index) === index ? 0 : order.indexOf(index) > index ? heights[originalIndex] : -heights[originalIndex],
     scale: 1,
-    zIndex: 0,
+    zIndex: total - index,
     shadow: 0,
     immediate: finished
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/ui",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "sourceType": "module",
   "publishConfig": {
     "access": "public"