@ztwoint/z-ui 0.1.127 → 0.1.129

package/dist/components/column-reorder/column-reorder.hook.js

@@ -5,20 +5,22 @@ import { reorderWithEdge as D } from "../../node_modules/@atlaskit/pragmatic-dra
 import { triggerPostMoveFlash as S } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop-flourish/dist/esm/trigger-post-move-flash.js";
 import { flushSync as T } from "react-dom";
 import "react/jsx-runtime";
+import "lucide-react";
 import "clsx";
 import "tailwind-merge";
 import { isColumnData as s } from "./components/column-item/column-item.util.js";
 import "../button/button.js";
-const $ = ({ columns: e, onReorder: r }) => {
-  const [t, a] = I(e);
+import "../input/input.js";
+const j = ({ columns: o, onReorder: r }) => {
+  const [t, a] = I(o);
   return p(() => {
-    a(e);
-  }, [e]), p(() => C({
-    canMonitor({ source: o }) {
-      return s(o.data);
+    a(o);
+  }, [o]), p(() => C({
+    canMonitor({ source: e }) {
+      return s(e.data);
     },
-    onDrop({ location: o, source: g }) {
-      const c = o.current.dropTargets[0];
+    onDrop({ location: e, source: g }) {
+      const c = e.current.dropTargets[0];
       if (!c)
         return;
       const n = g.data, i = c.data;
@@ -43,5 +45,5 @@ const $ = ({ columns: e, onReorder: r }) => {
   }), [t, r]), { internalColumns: t };
 };
 export {
-  $ as useColumnReorder
+  j as useColumnReorder
 };

package/dist/components/column-reorder/column-reorder.js

@@ -1,38 +1,42 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { cn as a } from "../../lib/utils.js";
-import { ColumnItem as u } from "./components/column-item/column-item.js";
-import { useColumnReorder as p } from "./column-reorder.hook.js";
-const g = ({
-  columns: e,
+import { cn as f } from "../../lib/utils.js";
+import { ColumnItem as p } from "./components/column-item/column-item.js";
+import { useColumnReorder as c } from "./column-reorder.hook.js";
+const C = ({
+  columns: o,
   onReorder: d,
   onRemove: i,
-  renderAction: l,
-  className: t,
-  disabled: m = !1
+  onEdit: l,
+  renderAction: t,
+  className: m,
+  disabled: n = !1,
+  editable: s = !1
 }) => {
-  const { internalColumns: n } = p({ columns: e, onReorder: d });
+  const { internalColumns: a } = c({ columns: o, onReorder: d });
   return /* @__PURE__ */ r(
     "div",
     {
-      className: a(
+      className: f(
         "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden",
-        t
+        m
       ),
-      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: n.map((o, s) => /* @__PURE__ */ r(
-        u,
+      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: a.map((e, u) => /* @__PURE__ */ r(
+        p,
         {
-          column: o,
-          index: s,
+          column: e,
+          index: u,
           onRemove: i,
-          renderAction: l,
-          disabled: m
+          onEdit: l,
+          renderAction: t,
+          disabled: n,
+          editable: s
         },
-        o.id
+        e.id
       )) })
     }
   );
 };
 export {
-  g as ColumnReOrder
+  C as ColumnReOrder
 };

package/dist/components/column-reorder/column-reorder.type.d.ts

@@ -3,12 +3,15 @@ export type ColumnType = {
     id: string;
     label: [string, string];
     icon: React.ReactNode;
+    editedLabel?: string;
 };
 export interface ColumnReOrderProps {
     columns: ColumnType[];
     onReorder?: (reorderedColumns: ColumnType[]) => void;
     onRemove?: (columnId: string) => void;
+    onEdit?: (columnId: string, newLabel: string) => void;
     renderAction?: (column: ColumnType, onRemove: ((columnId: string) => void) | undefined) => React.ReactNode;
     className?: string;
     disabled?: boolean;
+    editable?: boolean;
 }

package/dist/components/column-reorder/components/column-item/column-item.hook.d.ts

@@ -1,7 +1,18 @@
+import { default as React } from 'react';
 import { ColumnType } from '../../column-reorder.type';
 import { ColumnItemState } from './column-item.type';
 export declare const idle: ColumnItemState;
-export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean) => {
-    ref: import('react').RefObject<HTMLDivElement | null>;
+export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean, onEdit?: (columnId: string, newLabel: string) => void) => {
+    ref: React.RefObject<HTMLDivElement | null>;
     state: ColumnItemState;
+    isEditing: boolean;
+    editValue: string;
+    setEditValue: React.Dispatch<React.SetStateAction<string>>;
+    handleEditClick: () => void;
+    handleSave: () => void;
+    handleCancel: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    groupLabel: string;
+    fieldLabel: string;
+    fullLabel: string;
 };

package/dist/components/column-reorder/components/column-item/column-item.hook.js

@@ -1,49 +1,57 @@
-import { useRef as l, useState as u, useEffect as D } from "react";
-import { dropTargetForElements as c, draggable as v } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
-import { setCustomNativeDragPreview as E } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js";
-import { pointerOutsideOfPreview as y } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js";
-import { combine as C } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
-import { extractClosestEdge as m, attachClosestEdge as w } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
-import { getColumnData as f, isColumnData as S } from "./column-item.util.js";
-const a = { type: "idle" }, A = (n, s, i = !1) => {
-  const p = l(null), [d, r] = u(a);
-  return D(() => {
-    const o = p.current;
-    if (!(!o || i))
-      return C(
-        v({
-          element: o,
+import { useRef as k, useState as p, useEffect as I } from "react";
+import { dropTargetForElements as x, draggable as O } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
+import { setCustomNativeDragPreview as P } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js";
+import { pointerOutsideOfPreview as V } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js";
+import { combine as $ } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
+import { extractClosestEdge as v, attachClosestEdge as A } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
+import { parseColumnLabel as F, getColumnData as C, isColumnData as G } from "./column-item.util.js";
+const n = { type: "idle" }, B = (o, i, m = !1, g) => {
+  const c = k(null), [b, a] = p(n), [h, l] = p(!1), [s, d] = p(""), { groupLabel: u, fieldLabel: D } = F(o), w = `${u} / ${D}`, L = () => {
+    l(!0), d(o.editedLabel || "");
+  }, y = () => {
+    (s.length > 0 && s.trim() || s === "") && (g == null || g(o.id, s.trim())), l(!1);
+  }, E = () => {
+    l(!1), d("");
+  }, S = (t) => {
+    t.key === "Enter" ? y() : t.key === "Escape" && E();
+  };
+  return I(() => {
+    const t = c.current;
+    if (!(!t || m))
+      return $(
+        O({
+          element: t,
           getInitialData() {
-            return f(n, s);
+            return C(o, i);
           },
           onGenerateDragPreview({ nativeSetDragImage: e }) {
-            E({
+            P({
               nativeSetDragImage: e,
-              getOffset: y({
+              getOffset: V({
                 x: "16px",
                 y: "0px"
               }),
-              render({ container: t }) {
-                r({ type: "preview", container: t });
+              render({ container: r }) {
+                a({ type: "preview", container: r });
               }
             });
           },
           onDragStart() {
-            r({ type: "is-dragging" });
+            a({ type: "is-dragging" });
           },
           onDrop() {
-            r(a);
+            a(n);
           }
         }),
-        c({
-          element: o,
+        x({
+          element: t,
           canDrop({ source: e }) {
-            return e.element === o ? !1 : S(e.data);
+            return e.element === t ? !1 : G(e.data);
           },
           getData({ input: e }) {
-            const t = f(n, s);
-            return w(t, {
-              element: o,
+            const r = C(o, i);
+            return A(r, {
+              element: t,
               input: e,
               allowedEdges: ["top", "bottom"]
             });
@@ -52,27 +60,37 @@ const a = { type: "idle" }, A = (n, s, i = !1) => {
             return !0;
           },
           onDragEnter({ self: e }) {
-            const t = m(e.data);
-            r({ type: "is-dragging-over", closestEdge: t });
+            const r = v(e.data);
+            a({ type: "is-dragging-over", closestEdge: r });
           },
           onDrag({ self: e }) {
-            const t = m(e.data);
-            r((g) => g.type === "is-dragging-over" && g.closestEdge === t ? g : { type: "is-dragging-over", closestEdge: t });
+            const r = v(e.data);
+            a((f) => f.type === "is-dragging-over" && f.closestEdge === r ? f : { type: "is-dragging-over", closestEdge: r });
           },
           onDragLeave() {
-            r(a);
+            a(n);
           },
           onDrop() {
-            r(a);
+            a(n);
           }
         })
       );
-  }, [n, s, i]), {
-    ref: p,
-    state: d
+  }, [o, i, m]), {
+    ref: c,
+    state: b,
+    isEditing: h,
+    editValue: s,
+    setEditValue: d,
+    handleEditClick: L,
+    handleSave: y,
+    handleCancel: E,
+    handleKeyDown: S,
+    groupLabel: u,
+    fieldLabel: D,
+    fullLabel: w
   };
 };
 export {
-  a as idle,
-  A as useColumnItemDragAndDrop
+  n as idle,
+  B as useColumnItemDragAndDrop
 };

package/dist/components/column-reorder/components/column-item/column-item.js

@@ -1,87 +1,153 @@
-import { jsxs as l, Fragment as f, jsx as e } from "react/jsx-runtime";
-import { createPortal as x } from "react-dom";
+import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { createPortal as E } from "react-dom";
+import { Check as j, Pen as z } from "lucide-react";
 import "react";
-import { cn as c } from "../../../../lib/utils.js";
-import { useColumnItemDragAndDrop as h } from "./column-item.hook.js";
-import { Button as b } from "../../../button/button.js";
-import N from "../../../assets/icons/x.js";
-import { parseColumnLabel as g } from "./column-item.util.js";
-import u from "../../../assets/icons/drag-handle.js";
-const y = {
+import { cn as m } from "../../../../lib/utils.js";
+import { useColumnItemDragAndDrop as F } from "./column-item.hook.js";
+import { Button as i } from "../../../button/button.js";
+import { Input as P } from "../../../input/input.js";
+import f from "../../../assets/icons/x.js";
+import p from "../../../assets/icons/drag-handle.js";
+import { parseColumnLabel as K } from "./column-item.util.js";
+const S = {
   "is-dragging": "opacity-40",
   "is-dragging-over": "bg-background-neutral-medium"
-}, i = ({ text: t, className: r }) => /* @__PURE__ */ e("span", { className: c("truncate min-w-0", r), children: t }), k = ({
+}, n = ({ text: t, className: r }) => /* @__PURE__ */ e("span", { className: m("truncate min-w-0", r), children: t }), T = ({
   edge: t,
   isFirstElement: r = !1
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: c(
+    className: m(
       "absolute left-0 right-0 h-0.5 bg-blue-500",
       t === "top" ? r ? "top-0" : "top-[-3px]" : "bottom-0"
     )
   }
 );
-function v({ column: t }) {
-  const { groupLabel: r, fieldLabel: a } = g(t);
-  return /* @__PURE__ */ l("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
-    /* @__PURE__ */ e(u, {}),
+function V({ column: t }) {
+  const { groupLabel: r, fieldLabel: l } = K(t);
+  return /* @__PURE__ */ a("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
+    /* @__PURE__ */ e(p, {}),
     /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5 ", children: t.icon }),
-    /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
-      /* @__PURE__ */ e(i, { text: r, className: "text-text-neutral-secondary" }),
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
+      /* @__PURE__ */ e(n, { text: r, className: "text-text-neutral-secondary" }),
       /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
-      /* @__PURE__ */ e(i, { text: a, className: "text-text-neutral-primary" })
+      /* @__PURE__ */ e(n, { text: l, className: "text-text-neutral-primary" })
     ] })
   ] });
 }
-const T = ({
+const U = ({
   column: t,
   index: r,
-  onRemove: a,
+  onRemove: l,
+  onEdit: x,
   renderAction: o,
-  disabled: n = !1
+  disabled: c = !1,
+  editable: N = !1
 }) => {
-  const { ref: p, state: s } = h(t, r, n), { groupLabel: d, fieldLabel: m } = g(t);
-  return /* @__PURE__ */ l(f, { children: [
-    /* @__PURE__ */ l("div", { className: "relative border-b-0.5", children: [
-      /* @__PURE__ */ l(
+  const {
+    ref: b,
+    state: s,
+    isEditing: u,
+    editValue: v,
+    setEditValue: k,
+    handleEditClick: w,
+    handleSave: y,
+    handleCancel: C,
+    handleKeyDown: I,
+    groupLabel: g,
+    fieldLabel: h,
+    fullLabel: L
+  } = F(t, r, c, x);
+  return /* @__PURE__ */ a(d, { children: [
+    /* @__PURE__ */ a("div", { className: "relative border-b-0.5", children: [
+      /* @__PURE__ */ a(
         "div",
         {
           "data-column-id": t.id,
-          ref: p,
-          title: `${d} / ${m}`,
-          className: c(
+          ref: b,
+          title: `${g} / ${h}`,
+          className: m(
             "flex items-center gap-2 p-1 pl-3 bg-background-neutral-default transition-colors",
-            n ? "cursor-default" : "cursor-grab hover:bg-background-neutral-medium",
-            y[s.type] ?? ""
+            c ? "cursor-default" : "cursor-grab hover:bg-background-neutral-medium",
+            S[s.type] ?? ""
           ),
           children: [
-            !n && /* @__PURE__ */ e(u, {}),
-            /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
-            /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
-              /* @__PURE__ */ e(i, { text: d, className: "text-text-neutral-secondary" }),
-              /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
-              /* @__PURE__ */ e(i, { text: m, className: "text-text-neutral-primary" })
+            !c && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(p, {}) }),
+            u ? /* @__PURE__ */ e(d, { children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+              /* @__PURE__ */ e(
+                P,
+                {
+                  size: "small",
+                  value: v,
+                  onChange: (D) => k(D.target.value),
+                  onKeyDown: I,
+                  placeholder: L,
+                  className: "flex-1",
+                  autoFocus: !0
+                }
+              ),
+              /* @__PURE__ */ e(
+                i,
+                {
+                  onClick: y,
+                  variant: "ghost",
+                  shade: "neutral",
+                  size: "medium",
+                  leftIcon: /* @__PURE__ */ e(j, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ] }) }) : /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 min-w-0", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
+                /* @__PURE__ */ a("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
+                  /* @__PURE__ */ e(n, { text: g, className: "text-text-neutral-secondary" }),
+                  /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
+                  /* @__PURE__ */ e(n, { text: h, className: "text-text-neutral-primary" })
+                ] })
+              ] }),
+              t.editedLabel && /* @__PURE__ */ e("span", { className: "leading-none-regular-sm text-text-neutral-secondary truncate min-w-0", children: t.editedLabel })
             ] }),
-            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: o ? o(t, a) : /* @__PURE__ */ e(
-              b,
+            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: u ? /* @__PURE__ */ e(
+              i,
               {
-                onClick: () => a == null ? void 0 : a(t.id),
+                onClick: C,
                 variant: "ghost",
                 shade: "neutral",
                 size: "medium",
-                leftIcon: /* @__PURE__ */ e(N, { className: "w-4 h-4" })
+                leftIcon: /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5" })
               }
-            ) })
+            ) : /* @__PURE__ */ a(d, { children: [
+              N && /* @__PURE__ */ e(
+                i,
+                {
+                  onClick: w,
+                  variant: "ghost",
+                  shade: "neutral",
+                  size: "medium",
+                  leftIcon: /* @__PURE__ */ e(z, { className: "w-3.5 h-3.5" })
+                }
+              ),
+              o ? o(t, l) : /* @__PURE__ */ e(
+                i,
+                {
+                  onClick: () => l == null ? void 0 : l(t.id),
+                  variant: "ghost",
+                  shade: "neutral",
+                  size: "medium",
+                  leftIcon: /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ] }) })
           ]
         }
       ),
-      s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(k, { edge: s.closestEdge, isFirstElement: r === 0 })
+      s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(T, { edge: s.closestEdge, isFirstElement: r === 0 })
     ] }),
-    s.type === "preview" && x(/* @__PURE__ */ e(v, { column: t }), s.container)
+    s.type === "preview" && E(/* @__PURE__ */ e(V, { column: t }), s.container)
   ] });
 };
 export {
-  T as ColumnItem,
-  T as default
+  U as ColumnItem,
+  U as default
 };

package/dist/components/column-reorder/components/column-item/column-item.type.d.ts

@@ -16,6 +16,8 @@ export interface ColumnItemProps {
     column: ColumnType;
     index: number;
     onRemove?: (columnId: string) => void;
+    onEdit?: (columnId: string, newLabel: string) => void;
     renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => ReactNode;
     disabled?: boolean;
+    editable?: boolean;
 }