@ztwoint/z-ui 0.1.98 → 0.1.99

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

@@ -9,16 +9,17 @@ 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 "../tooltip/tooltip.js";
+const b = ({ 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 +44,5 @@ const $ = ({ columns: e, onReorder: r }) => {
   }), [t, r]), { internalColumns: t };
 };
 export {
-  $ as useColumnReorder
+  b as useColumnReorder
 };

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

@@ -1,30 +1,32 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { cn as s } from "../../lib/utils.js";
-import { ColumnItem as a } from "./components/column-item/column-item.js";
-import { useColumnReorder as u } from "./column-reorder.hook.js";
-const v = ({
+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,
   onReorder: d,
   onRemove: i,
-  renderAction: m,
-  className: t
+  renderAction: l,
+  className: t,
+  disabled: m = !1
 }) => {
-  const { internalColumns: l } = u({ columns: e, onReorder: d });
+  const { internalColumns: n } = p({ columns: e, onReorder: d });
   return /* @__PURE__ */ r(
     "div",
     {
-      className: s(
-        "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden box-shadow-medium-10",
+      className: a(
+        "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden",
         t
       ),
-      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: l.map((o, n) => /* @__PURE__ */ r(
-        a,
+      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: n.map((o, s) => /* @__PURE__ */ r(
+        u,
         {
           column: o,
-          index: n,
+          index: s,
           onRemove: i,
-          renderAction: m
+          renderAction: l,
+          disabled: m
         },
         o.id
       )) })
@@ -32,5 +34,5 @@ const v = ({
   );
 };
 export {
-  v as ColumnReOrder
+  g as ColumnReOrder
 };

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

@@ -10,4 +10,5 @@ export interface ColumnReOrderProps {
     onRemove?: (columnId: string) => void;
     renderAction?: (column: ColumnType, onRemove: ((columnId: string) => void) | undefined) => React.ReactNode;
     className?: string;
+    disabled?: boolean;
 }

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

@@ -1,7 +1,7 @@
 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) => {
+export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean) => {
     ref: import('react').RefObject<HTMLDivElement | null>;
     state: ColumnItemState;
 };

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

@@ -1,25 +1,25 @@
-import { useRef as f, useState as l, useEffect as u } from "react";
-import { dropTargetForElements as D, draggable as c } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
-import { setCustomNativeDragPreview as v } 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 E } 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 y } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
-import { extractClosestEdge as p, attachClosestEdge as C } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
-import { getColumnData as m, isColumnData as w } from "./column-item.util.js";
-const a = { type: "idle" }, k = (n, s) => {
-  const i = f(null), [d, r] = l(a);
-  return u(() => {
-    const o = i.current;
-    if (o)
-      return y(
-        c({
+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,
           getInitialData() {
-            return m(n, s);
+            return f(n, s);
           },
           onGenerateDragPreview({ nativeSetDragImage: e }) {
-            v({
+            E({
               nativeSetDragImage: e,
-              getOffset: E({
+              getOffset: y({
                 x: "16px",
                 y: "0px"
               }),
@@ -35,14 +35,14 @@ const a = { type: "idle" }, k = (n, s) => {
             r(a);
           }
         }),
-        D({
+        c({
           element: o,
           canDrop({ source: e }) {
-            return e.element === o ? !1 : w(e.data);
+            return e.element === o ? !1 : S(e.data);
           },
           getData({ input: e }) {
-            const t = m(n, s);
-            return C(t, {
+            const t = f(n, s);
+            return w(t, {
               element: o,
               input: e,
               allowedEdges: ["top", "bottom"]
@@ -52,11 +52,11 @@ const a = { type: "idle" }, k = (n, s) => {
             return !0;
           },
           onDragEnter({ self: e }) {
-            const t = p(e.data);
+            const t = m(e.data);
             r({ type: "is-dragging-over", closestEdge: t });
           },
           onDrag({ self: e }) {
-            const t = p(e.data);
+            const t = m(e.data);
             r((g) => g.type === "is-dragging-over" && g.closestEdge === t ? g : { type: "is-dragging-over", closestEdge: t });
           },
           onDragLeave() {
@@ -67,12 +67,12 @@ const a = { type: "idle" }, k = (n, s) => {
           }
         })
       );
-  }, [n, s]), {
-    ref: i,
+  }, [n, s, i]), {
+    ref: p,
     state: d
   };
 };
 export {
   a as idle,
-  k as useColumnItemDragAndDrop
+  A as useColumnItemDragAndDrop
 };

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

@@ -1,84 +1,128 @@
-import { jsxs as i, Fragment as g, jsx as e } from "react/jsx-runtime";
-import { createPortal as p } from "react-dom";
-import "react";
-import { cn as l } from "../../../../lib/utils.js";
-import { useColumnItemDragAndDrop as f } from "./column-item.hook.js";
-import { Button as h } from "../../../button/button.js";
-import { Minus as x } from "../../../assets/icons/minus.js";
-import { parseColumnLabel as c } from "./column-item.util.js";
-import d from "../../../assets/icons/drag-handle.js";
-const b = {
+import { jsxs as l, Fragment as f, jsx as e } from "react/jsx-runtime";
+import { useRef as x, useState as h, useEffect as b } from "react";
+import { createPortal as N } from "react-dom";
+import { cn as u } from "../../../../lib/utils.js";
+import { useColumnItemDragAndDrop as v } from "./column-item.hook.js";
+import { Button as y } from "../../../button/button.js";
+import { Minus as w } from "../../../assets/icons/minus.js";
+import { parseColumnLabel as p } from "./column-item.util.js";
+import g from "../../../assets/icons/drag-handle.js";
+import { Z2Tooltip as k } from "../../../tooltip/tooltip.js";
+const L = {
   "is-dragging": "opacity-40",
   "is-dragging-over": "bg-background-neutral-medium"
-}, N = ({
+}, d = ({ text: t, className: s, tooltipMessage: r }) => {
+  const i = x(null), [o, m] = h(!1);
+  b(() => {
+    const n = () => {
+      if (i.current) {
+        const c = i.current;
+        m(c.scrollWidth > c.clientWidth);
+      }
+    };
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, [t]);
+  const a = /* @__PURE__ */ e("span", { ref: i, className: u("truncate min-w-0", s), children: t });
+  return o && r ? /* @__PURE__ */ e(k, { message: r, side: "top", children: a }) : a;
+}, T = ({
   edge: t,
-  isFirstElement: r = !1
+  isFirstElement: s = !1
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: l(
+    className: u(
       "absolute left-0 right-0 h-0.5 bg-blue-500",
-      t === "top" ? r ? "top-0" : "top-[-3px]" : "bottom-0"
+      t === "top" ? s ? "top-0" : "top-[-3px]" : "bottom-0"
     )
   }
 );
-function v({ column: t }) {
-  const { groupLabel: r, fieldLabel: a } = c(t);
-  return /* @__PURE__ */ i("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
-    /* @__PURE__ */ e(d, {}),
+function E({ column: t }) {
+  const { groupLabel: s, fieldLabel: r } = p(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(g, {}),
     /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5 ", children: t.icon }),
-    /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
-      /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary  truncate", children: r }),
-      /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
-      /* @__PURE__ */ e("span", { className: "text-text-neutral-primary truncate", children: a })
+    /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
+      /* @__PURE__ */ e(
+        d,
+        {
+          text: s,
+          className: "text-text-neutral-secondary",
+          tooltipMessage: `Group: ${s}`
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
+      /* @__PURE__ */ e(
+        d,
+        {
+          text: r,
+          className: "text-text-neutral-primary",
+          tooltipMessage: `Field: ${r}`
+        }
+      )
     ] })
   ] });
 }
-const F = ({
+const S = ({
   column: t,
-  index: r,
-  onRemove: a,
-  renderAction: n
+  index: s,
+  onRemove: r,
+  renderAction: i,
+  disabled: o = !1
 }) => {
-  const { ref: o, state: s } = f(t, r), { groupLabel: m, fieldLabel: u } = c(t);
-  return /* @__PURE__ */ i(g, { children: [
-    /* @__PURE__ */ i("div", { className: "relative border-b-0.5", children: [
-      /* @__PURE__ */ i(
+  const { ref: m, state: a } = v(t, s, o), { groupLabel: n, fieldLabel: c } = p(t);
+  return /* @__PURE__ */ l(f, { children: [
+    /* @__PURE__ */ l("div", { className: "relative border-b-0.5", children: [
+      /* @__PURE__ */ l(
         "div",
         {
           "data-column-id": t.id,
-          ref: o,
-          className: l(
-            "flex items-center gap-2 p-1 pl-3 bg-background-neutral-default cursor-grab hover:bg-background-neutral-medium transition-colors",
-            b[s.type] ?? ""
+          ref: m,
+          className: u(
+            "flex items-center gap-2 p-1 pl-3 bg-background-neutral-default transition-colors",
+            o ? "cursor-default opacity-60" : "cursor-grab hover:bg-background-neutral-medium",
+            L[a.type] ?? ""
           ),
           children: [
-            /* @__PURE__ */ e(d, {}),
+            !o && /* @__PURE__ */ e(g, {}),
             /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
-            /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
-              /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary  truncate", children: m }),
-              /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
-              /* @__PURE__ */ e("span", { className: "text-text-neutral-primary   truncate", children: u })
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
+              /* @__PURE__ */ e(
+                d,
+                {
+                  text: n,
+                  className: "text-text-neutral-secondary",
+                  tooltipMessage: `Group: ${n}`
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
+              /* @__PURE__ */ e(
+                d,
+                {
+                  text: c,
+                  className: "text-text-neutral-primary",
+                  tooltipMessage: `Field: ${c}`
+                }
+              )
             ] }),
-            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: n ? n(t, a) : /* @__PURE__ */ e(
-              h,
+            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: i ? i(t, r) : /* @__PURE__ */ e(
+              y,
               {
-                onClick: () => a == null ? void 0 : a(t.id),
+                onClick: () => r == null ? void 0 : r(t.id),
                 variant: "ghost",
                 shade: "neutral",
                 size: "medium",
-                leftIcon: /* @__PURE__ */ e(x, { className: "w-4 h-4" })
+                leftIcon: /* @__PURE__ */ e(w, { className: "w-4 h-4" })
               }
             ) })
           ]
         }
       ),
-      s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(N, { edge: s.closestEdge, isFirstElement: r === 0 })
+      a.type === "is-dragging-over" && a.closestEdge && /* @__PURE__ */ e(T, { edge: a.closestEdge, isFirstElement: s === 0 })
     ] }),
-    s.type === "preview" && p(/* @__PURE__ */ e(v, { column: t }), s.container)
+    a.type === "preview" && N(/* @__PURE__ */ e(E, { column: t }), a.container)
   ] });
 };
 export {
-  F as ColumnItem,
-  F as default
+  S as ColumnItem,
+  S as default
 };

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

@@ -17,4 +17,5 @@ export interface ColumnItemProps {
     index: number;
     onRemove?: (columnId: string) => void;
     renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => ReactNode;
+    disabled?: boolean;
 }