@ztwoint/z-ui 0.1.98 → 0.1.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/components/assets/icons/chain.d.ts +7 -0
  2. package/dist/components/assets/icons/chain.js +44 -0
  3. package/dist/components/assets/icons/descending.d.ts +8 -0
  4. package/dist/components/assets/icons/descending.js +96 -0
  5. package/dist/components/assets/icons/filter-icon.d.ts +6 -0
  6. package/dist/components/assets/icons/filter-icon.js +36 -0
  7. package/dist/components/assets/icons/index.d.ts +3 -0
  8. package/dist/components/column-reorder/column-reorder.hook.js +10 -9
  9. package/dist/components/column-reorder/column-reorder.js +16 -14
  10. package/dist/components/column-reorder/column-reorder.type.d.ts +1 -0
  11. package/dist/components/column-reorder/components/column-item/column-item.hook.d.ts +1 -1
  12. package/dist/components/column-reorder/components/column-item/column-item.hook.js +26 -26
  13. package/dist/components/column-reorder/components/column-item/column-item.js +91 -47
  14. package/dist/components/column-reorder/components/column-item/column-item.type.d.ts +1 -0
  15. package/dist/css/styles/tailwind.css +1 -1
  16. package/dist/index.js +44 -38
  17. package/dist/types/components/assets/icons/chain.d.ts +7 -0
  18. package/dist/types/components/assets/icons/descending.d.ts +8 -0
  19. package/dist/types/components/assets/icons/filter-icon.d.ts +6 -0
  20. package/dist/types/components/assets/icons/index.d.ts +3 -0
  21. package/dist/types/components/column-reorder/column-reorder.type.d.ts +1 -0
  22. package/dist/types/components/column-reorder/components/column-item/column-item.hook.d.ts +1 -1
  23. package/dist/types/components/column-reorder/components/column-item/column-item.type.d.ts +1 -0
  24. package/package.json +1 -1
@@ -0,0 +1,7 @@
1
+ import { SVGProps } from 'react';
2
+ type IconProps = SVGProps<SVGSVGElement> & {
3
+ secondaryfill?: string;
4
+ title?: string;
5
+ };
6
+ declare function Link({ fill, secondaryfill, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
7
+ export default Link;
@@ -0,0 +1,44 @@
1
+ import { jsxs as r, jsx as t } from "react/jsx-runtime";
2
+ function l({
3
+ fill: C = "currentColor",
4
+ secondaryfill: e,
5
+ width: d = "1em",
6
+ height: n = "1em",
7
+ title: L = "badge 13",
8
+ ...o
9
+ }) {
10
+ return e = e || C, /* @__PURE__ */ r(
11
+ "svg",
12
+ {
13
+ height: n,
14
+ width: d,
15
+ viewBox: "0 0 18 18",
16
+ xmlns: "http://www.w3.org/2000/svg",
17
+ ...o,
18
+ children: [
19
+ /* @__PURE__ */ t("title", { children: L }),
20
+ /* @__PURE__ */ r("g", { fill: C, children: [
21
+ /* @__PURE__ */ t(
22
+ "path",
23
+ {
24
+ d: "M9.03166 6.54197C9.22575 6.9079 9.08644 7.36188 8.72052 7.55597C8.47184 7.68787 8.24717 7.85851 8.04832 8.05733C6.96021 9.14544 6.96021 10.9086 8.04832 11.9967L10.2233 14.1717C11.3114 15.2598 13.0746 15.2598 14.1627 14.1717C15.2507 13.0836 15.2608 11.3104 14.1727 10.2223L13.4103 9.45993C13.1174 9.16703 13.1174 8.69216 13.4103 8.39927C13.7032 8.10638 14.178 8.10638 14.4709 8.39927L15.2333 9.16167C16.9072 10.8356 16.9072 13.5484 15.2333 15.2223C13.5594 16.8962 10.8365 16.9062 9.16266 15.2323L6.98766 13.0573C5.31377 11.3834 5.31377 8.67056 6.98766 6.99667C7.29576 6.68747 7.64975 6.42597 8.01766 6.23083C8.38359 6.03674 8.83757 6.17604 9.03166 6.54197Z",
25
+ fill: e,
26
+ fillRule: "evenodd"
27
+ }
28
+ ),
29
+ /* @__PURE__ */ t(
30
+ "path",
31
+ {
32
+ d: "M2.77868 2.76766C4.45257 1.09376 7.16544 1.09376 8.83934 2.76766L11.0143 4.94266C12.6882 6.61655 12.6882 9.32942 11.0143 11.0033C10.7101 11.3075 10.3647 11.5674 9.98433 11.7692C9.6184 11.9633 9.16442 11.824 8.97033 11.458C8.77624 11.0921 8.91554 10.6381 9.28147 10.444C9.53006 10.3122 9.7549 10.1414 9.95368 9.94267C11.0418 8.85455 11.0418 7.09142 9.95368 6.00332L7.77868 3.82832C6.69057 2.74021 4.92744 2.74021 3.83934 3.82832C2.76193 4.90573 2.74775 6.69607 3.82934 7.77766L4.59174 8.54006C4.88463 8.83295 4.88463 9.30782 4.59174 9.60072C4.29884 9.89361 3.82397 9.89361 3.53108 9.60072L2.76868 8.83832C1.10903 7.17867 1.1232 4.42314 2.77868 2.76766Z",
33
+ fill: C,
34
+ fillRule: "evenodd"
35
+ }
36
+ )
37
+ ] })
38
+ ]
39
+ }
40
+ );
41
+ }
42
+ export {
43
+ l as default
44
+ };
@@ -0,0 +1,8 @@
1
+ import { SVGProps } from 'react';
2
+ type IconProps = SVGProps<SVGSVGElement> & {
3
+ secondaryfill?: string;
4
+ strokewidth?: number;
5
+ title?: string;
6
+ };
7
+ declare function DescendingSorting({ fill, secondaryfill, strokewidth, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
8
+ export default DescendingSorting;
@@ -0,0 +1,96 @@
1
+ import { jsxs as i, jsx as n } from "react/jsx-runtime";
2
+ function x({
3
+ fill: e = "currentColor",
4
+ secondaryfill: r,
5
+ strokewidth: o = 1,
6
+ width: t = "1em",
7
+ height: s = "1em",
8
+ title: k = "badge 13",
9
+ ...d
10
+ }) {
11
+ return r = r || e, /* @__PURE__ */ i(
12
+ "svg",
13
+ {
14
+ height: s,
15
+ width: t,
16
+ viewBox: "0 0 18 18",
17
+ xmlns: "http://www.w3.org/2000/svg",
18
+ ...d,
19
+ children: [
20
+ /* @__PURE__ */ n("title", { children: k }),
21
+ /* @__PURE__ */ i("g", { fill: e, children: [
22
+ /* @__PURE__ */ n(
23
+ "polyline",
24
+ {
25
+ fill: "none",
26
+ points: "10.25 12.75 12.75 15.25 15.25 12.75",
27
+ stroke: r,
28
+ strokeLinecap: "round",
29
+ strokeLinejoin: "round",
30
+ strokeWidth: o
31
+ }
32
+ ),
33
+ /* @__PURE__ */ n(
34
+ "line",
35
+ {
36
+ fill: "none",
37
+ stroke: r,
38
+ strokeLinecap: "round",
39
+ strokeLinejoin: "round",
40
+ strokeWidth: o,
41
+ x1: "12.75",
42
+ x2: "12.75",
43
+ y1: "15.25",
44
+ y2: "6.25"
45
+ }
46
+ ),
47
+ /* @__PURE__ */ n(
48
+ "line",
49
+ {
50
+ fill: "none",
51
+ stroke: e,
52
+ strokeLinecap: "round",
53
+ strokeLinejoin: "round",
54
+ strokeWidth: o,
55
+ x1: "2.75",
56
+ x2: "9.25",
57
+ y1: "9.75",
58
+ y2: "9.75"
59
+ }
60
+ ),
61
+ /* @__PURE__ */ n(
62
+ "line",
63
+ {
64
+ fill: "none",
65
+ stroke: e,
66
+ strokeLinecap: "round",
67
+ strokeLinejoin: "round",
68
+ strokeWidth: o,
69
+ x1: "2.75",
70
+ x2: "9.25",
71
+ y1: "6.25",
72
+ y2: "6.25"
73
+ }
74
+ ),
75
+ /* @__PURE__ */ n(
76
+ "line",
77
+ {
78
+ fill: "none",
79
+ stroke: e,
80
+ strokeLinecap: "round",
81
+ strokeLinejoin: "round",
82
+ strokeWidth: o,
83
+ x1: "2.75",
84
+ x2: "12.75",
85
+ y1: "2.75",
86
+ y2: "2.75"
87
+ }
88
+ )
89
+ ] })
90
+ ]
91
+ }
92
+ );
93
+ }
94
+ export {
95
+ x as default
96
+ };
@@ -0,0 +1,6 @@
1
+ import { SVGProps } from 'react';
2
+ type IconProps = SVGProps<SVGSVGElement> & {
3
+ title?: string;
4
+ };
5
+ declare function Filter({ fill, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
6
+ export default Filter;
@@ -0,0 +1,36 @@
1
+ import { jsxs as s, jsx as e } from "react/jsx-runtime";
2
+ function d({
3
+ fill: o = "currentColor",
4
+ width: r = "1em",
5
+ height: n = "1em",
6
+ title: t = "badge 13",
7
+ ...i
8
+ }) {
9
+ return /* @__PURE__ */ s(
10
+ "svg",
11
+ {
12
+ height: n,
13
+ width: r,
14
+ viewBox: "0 0 20 20",
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ ...i,
17
+ children: [
18
+ /* @__PURE__ */ e("title", { children: t }),
19
+ /* @__PURE__ */ e("g", { fill: o, children: /* @__PURE__ */ e(
20
+ "polygon",
21
+ {
22
+ fill: "none",
23
+ points: "4 3 8 9 8 17 12 15 12 9 16 3 4 3",
24
+ stroke: o,
25
+ strokeLinecap: "round",
26
+ strokeLinejoin: "round",
27
+ strokeWidth: "2"
28
+ }
29
+ ) })
30
+ ]
31
+ }
32
+ );
33
+ }
34
+ export {
35
+ d as default
36
+ };
@@ -38,3 +38,6 @@ export { default as Vector3Icon } from './vector_3';
38
38
  export { default as TableCols2Icon } from './table-cols-2';
39
39
  export { default as TriangleWarningIcon } from './triangle-warning';
40
40
  export { default as ArrowLeftIcon } from './arrow-left';
41
+ export { default as FilterIcon } from './filter-icon';
42
+ export { default as DescendingSortingIcon } from './descending';
43
+ export { default as ChainIcon } from './chain';
@@ -9,16 +9,17 @@ import "clsx";
9
9
  import "tailwind-merge";
10
10
  import { isColumnData as s } from "./components/column-item/column-item.util.js";
11
11
  import "../button/button.js";
12
- const $ = ({ columns: e, onReorder: r }) => {
13
- const [t, a] = I(e);
12
+ import "../tooltip/tooltip.js";
13
+ const b = ({ columns: o, onReorder: r }) => {
14
+ const [t, a] = I(o);
14
15
  return p(() => {
15
- a(e);
16
- }, [e]), p(() => C({
17
- canMonitor({ source: o }) {
18
- return s(o.data);
16
+ a(o);
17
+ }, [o]), p(() => C({
18
+ canMonitor({ source: e }) {
19
+ return s(e.data);
19
20
  },
20
- onDrop({ location: o, source: g }) {
21
- const c = o.current.dropTargets[0];
21
+ onDrop({ location: e, source: g }) {
22
+ const c = e.current.dropTargets[0];
22
23
  if (!c)
23
24
  return;
24
25
  const n = g.data, i = c.data;
@@ -43,5 +44,5 @@ const $ = ({ columns: e, onReorder: r }) => {
43
44
  }), [t, r]), { internalColumns: t };
44
45
  };
45
46
  export {
46
- $ as useColumnReorder
47
+ b as useColumnReorder
47
48
  };
@@ -1,30 +1,32 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
2
  import "react";
3
- import { cn as s } from "../../lib/utils.js";
4
- import { ColumnItem as a } from "./components/column-item/column-item.js";
5
- import { useColumnReorder as u } from "./column-reorder.hook.js";
6
- const v = ({
3
+ import { cn as a } from "../../lib/utils.js";
4
+ import { ColumnItem as u } from "./components/column-item/column-item.js";
5
+ import { useColumnReorder as p } from "./column-reorder.hook.js";
6
+ const g = ({
7
7
  columns: e,
8
8
  onReorder: d,
9
9
  onRemove: i,
10
- renderAction: m,
11
- className: t
10
+ renderAction: l,
11
+ className: t,
12
+ disabled: m = !1
12
13
  }) => {
13
- const { internalColumns: l } = u({ columns: e, onReorder: d });
14
+ const { internalColumns: n } = p({ columns: e, onReorder: d });
14
15
  return /* @__PURE__ */ r(
15
16
  "div",
16
17
  {
17
- className: s(
18
- "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden box-shadow-medium-10",
18
+ className: a(
19
+ "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden",
19
20
  t
20
21
  ),
21
- children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: l.map((o, n) => /* @__PURE__ */ r(
22
- a,
22
+ children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: n.map((o, s) => /* @__PURE__ */ r(
23
+ u,
23
24
  {
24
25
  column: o,
25
- index: n,
26
+ index: s,
26
27
  onRemove: i,
27
- renderAction: m
28
+ renderAction: l,
29
+ disabled: m
28
30
  },
29
31
  o.id
30
32
  )) })
@@ -32,5 +34,5 @@ const v = ({
32
34
  );
33
35
  };
34
36
  export {
35
- v as ColumnReOrder
37
+ g as ColumnReOrder
36
38
  };
@@ -10,4 +10,5 @@ export interface ColumnReOrderProps {
10
10
  onRemove?: (columnId: string) => void;
11
11
  renderAction?: (column: ColumnType, onRemove: ((columnId: string) => void) | undefined) => React.ReactNode;
12
12
  className?: string;
13
+ disabled?: boolean;
13
14
  }
@@ -1,7 +1,7 @@
1
1
  import { ColumnType } from '../../column-reorder.type';
2
2
  import { ColumnItemState } from './column-item.type';
3
3
  export declare const idle: ColumnItemState;
4
- export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number) => {
4
+ export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean) => {
5
5
  ref: import('react').RefObject<HTMLDivElement | null>;
6
6
  state: ColumnItemState;
7
7
  };
@@ -1,25 +1,25 @@
1
- import { useRef as f, useState as l, useEffect as u } from "react";
2
- import { dropTargetForElements as D, draggable as c } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
3
- 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";
4
- 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";
5
- import { combine as y } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
6
- import { extractClosestEdge as p, attachClosestEdge as C } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
7
- import { getColumnData as m, isColumnData as w } from "./column-item.util.js";
8
- const a = { type: "idle" }, k = (n, s) => {
9
- const i = f(null), [d, r] = l(a);
10
- return u(() => {
11
- const o = i.current;
12
- if (o)
13
- return y(
14
- c({
1
+ import { useRef as l, useState as u, useEffect as D } from "react";
2
+ import { dropTargetForElements as c, draggable as v } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
3
+ 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";
4
+ 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";
5
+ import { combine as C } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
6
+ import { extractClosestEdge as m, attachClosestEdge as w } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
7
+ import { getColumnData as f, isColumnData as S } from "./column-item.util.js";
8
+ const a = { type: "idle" }, A = (n, s, i = !1) => {
9
+ const p = l(null), [d, r] = u(a);
10
+ return D(() => {
11
+ const o = p.current;
12
+ if (!(!o || i))
13
+ return C(
14
+ v({
15
15
  element: o,
16
16
  getInitialData() {
17
- return m(n, s);
17
+ return f(n, s);
18
18
  },
19
19
  onGenerateDragPreview({ nativeSetDragImage: e }) {
20
- v({
20
+ E({
21
21
  nativeSetDragImage: e,
22
- getOffset: E({
22
+ getOffset: y({
23
23
  x: "16px",
24
24
  y: "0px"
25
25
  }),
@@ -35,14 +35,14 @@ const a = { type: "idle" }, k = (n, s) => {
35
35
  r(a);
36
36
  }
37
37
  }),
38
- D({
38
+ c({
39
39
  element: o,
40
40
  canDrop({ source: e }) {
41
- return e.element === o ? !1 : w(e.data);
41
+ return e.element === o ? !1 : S(e.data);
42
42
  },
43
43
  getData({ input: e }) {
44
- const t = m(n, s);
45
- return C(t, {
44
+ const t = f(n, s);
45
+ return w(t, {
46
46
  element: o,
47
47
  input: e,
48
48
  allowedEdges: ["top", "bottom"]
@@ -52,11 +52,11 @@ const a = { type: "idle" }, k = (n, s) => {
52
52
  return !0;
53
53
  },
54
54
  onDragEnter({ self: e }) {
55
- const t = p(e.data);
55
+ const t = m(e.data);
56
56
  r({ type: "is-dragging-over", closestEdge: t });
57
57
  },
58
58
  onDrag({ self: e }) {
59
- const t = p(e.data);
59
+ const t = m(e.data);
60
60
  r((g) => g.type === "is-dragging-over" && g.closestEdge === t ? g : { type: "is-dragging-over", closestEdge: t });
61
61
  },
62
62
  onDragLeave() {
@@ -67,12 +67,12 @@ const a = { type: "idle" }, k = (n, s) => {
67
67
  }
68
68
  })
69
69
  );
70
- }, [n, s]), {
71
- ref: i,
70
+ }, [n, s, i]), {
71
+ ref: p,
72
72
  state: d
73
73
  };
74
74
  };
75
75
  export {
76
76
  a as idle,
77
- k as useColumnItemDragAndDrop
77
+ A as useColumnItemDragAndDrop
78
78
  };
@@ -1,84 +1,128 @@
1
- import { jsxs as i, Fragment as g, jsx as e } from "react/jsx-runtime";
2
- import { createPortal as p } from "react-dom";
3
- import "react";
4
- import { cn as l } from "../../../../lib/utils.js";
5
- import { useColumnItemDragAndDrop as f } from "./column-item.hook.js";
6
- import { Button as h } from "../../../button/button.js";
7
- import { Minus as x } from "../../../assets/icons/minus.js";
8
- import { parseColumnLabel as c } from "./column-item.util.js";
9
- import d from "../../../assets/icons/drag-handle.js";
10
- const b = {
1
+ import { jsxs as l, Fragment as f, jsx as e } from "react/jsx-runtime";
2
+ import { useRef as x, useState as h, useEffect as b } from "react";
3
+ import { createPortal as N } from "react-dom";
4
+ import { cn as u } from "../../../../lib/utils.js";
5
+ import { useColumnItemDragAndDrop as v } from "./column-item.hook.js";
6
+ import { Button as y } from "../../../button/button.js";
7
+ import { Minus as w } from "../../../assets/icons/minus.js";
8
+ import { parseColumnLabel as p } from "./column-item.util.js";
9
+ import g from "../../../assets/icons/drag-handle.js";
10
+ import { Z2Tooltip as k } from "../../../tooltip/tooltip.js";
11
+ const L = {
11
12
  "is-dragging": "opacity-40",
12
13
  "is-dragging-over": "bg-background-neutral-medium"
13
- }, N = ({
14
+ }, d = ({ text: t, className: s, tooltipMessage: r }) => {
15
+ const i = x(null), [o, m] = h(!1);
16
+ b(() => {
17
+ const n = () => {
18
+ if (i.current) {
19
+ const c = i.current;
20
+ m(c.scrollWidth > c.clientWidth);
21
+ }
22
+ };
23
+ return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
24
+ }, [t]);
25
+ const a = /* @__PURE__ */ e("span", { ref: i, className: u("truncate min-w-0", s), children: t });
26
+ return o && r ? /* @__PURE__ */ e(k, { message: r, side: "top", children: a }) : a;
27
+ }, T = ({
14
28
  edge: t,
15
- isFirstElement: r = !1
29
+ isFirstElement: s = !1
16
30
  }) => /* @__PURE__ */ e(
17
31
  "div",
18
32
  {
19
- className: l(
33
+ className: u(
20
34
  "absolute left-0 right-0 h-0.5 bg-blue-500",
21
- t === "top" ? r ? "top-0" : "top-[-3px]" : "bottom-0"
35
+ t === "top" ? s ? "top-0" : "top-[-3px]" : "bottom-0"
22
36
  )
23
37
  }
24
38
  );
25
- function v({ column: t }) {
26
- const { groupLabel: r, fieldLabel: a } = c(t);
27
- return /* @__PURE__ */ i("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
28
- /* @__PURE__ */ e(d, {}),
39
+ function E({ column: t }) {
40
+ const { groupLabel: s, fieldLabel: r } = p(t);
41
+ return /* @__PURE__ */ l("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
42
+ /* @__PURE__ */ e(g, {}),
29
43
  /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5 ", children: t.icon }),
30
- /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
31
- /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary truncate", children: r }),
32
- /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
33
- /* @__PURE__ */ e("span", { className: "text-text-neutral-primary truncate", children: a })
44
+ /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
45
+ /* @__PURE__ */ e(
46
+ d,
47
+ {
48
+ text: s,
49
+ className: "text-text-neutral-secondary",
50
+ tooltipMessage: `Group: ${s}`
51
+ }
52
+ ),
53
+ /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
54
+ /* @__PURE__ */ e(
55
+ d,
56
+ {
57
+ text: r,
58
+ className: "text-text-neutral-primary",
59
+ tooltipMessage: `Field: ${r}`
60
+ }
61
+ )
34
62
  ] })
35
63
  ] });
36
64
  }
37
- const F = ({
65
+ const S = ({
38
66
  column: t,
39
- index: r,
40
- onRemove: a,
41
- renderAction: n
67
+ index: s,
68
+ onRemove: r,
69
+ renderAction: i,
70
+ disabled: o = !1
42
71
  }) => {
43
- const { ref: o, state: s } = f(t, r), { groupLabel: m, fieldLabel: u } = c(t);
44
- return /* @__PURE__ */ i(g, { children: [
45
- /* @__PURE__ */ i("div", { className: "relative border-b-0.5", children: [
46
- /* @__PURE__ */ i(
72
+ const { ref: m, state: a } = v(t, s, o), { groupLabel: n, fieldLabel: c } = p(t);
73
+ return /* @__PURE__ */ l(f, { children: [
74
+ /* @__PURE__ */ l("div", { className: "relative border-b-0.5", children: [
75
+ /* @__PURE__ */ l(
47
76
  "div",
48
77
  {
49
78
  "data-column-id": t.id,
50
- ref: o,
51
- className: l(
52
- "flex items-center gap-2 p-1 pl-3 bg-background-neutral-default cursor-grab hover:bg-background-neutral-medium transition-colors",
53
- b[s.type] ?? ""
79
+ ref: m,
80
+ className: u(
81
+ "flex items-center gap-2 p-1 pl-3 bg-background-neutral-default transition-colors",
82
+ o ? "cursor-default opacity-60" : "cursor-grab hover:bg-background-neutral-medium",
83
+ L[a.type] ?? ""
54
84
  ),
55
85
  children: [
56
- /* @__PURE__ */ e(d, {}),
86
+ !o && /* @__PURE__ */ e(g, {}),
57
87
  /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
58
- /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
59
- /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary truncate", children: m }),
60
- /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
61
- /* @__PURE__ */ e("span", { className: "text-text-neutral-primary truncate", children: u })
88
+ /* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
89
+ /* @__PURE__ */ e(
90
+ d,
91
+ {
92
+ text: n,
93
+ className: "text-text-neutral-secondary",
94
+ tooltipMessage: `Group: ${n}`
95
+ }
96
+ ),
97
+ /* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
98
+ /* @__PURE__ */ e(
99
+ d,
100
+ {
101
+ text: c,
102
+ className: "text-text-neutral-primary",
103
+ tooltipMessage: `Field: ${c}`
104
+ }
105
+ )
62
106
  ] }),
63
- /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: n ? n(t, a) : /* @__PURE__ */ e(
64
- h,
107
+ /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: i ? i(t, r) : /* @__PURE__ */ e(
108
+ y,
65
109
  {
66
- onClick: () => a == null ? void 0 : a(t.id),
110
+ onClick: () => r == null ? void 0 : r(t.id),
67
111
  variant: "ghost",
68
112
  shade: "neutral",
69
113
  size: "medium",
70
- leftIcon: /* @__PURE__ */ e(x, { className: "w-4 h-4" })
114
+ leftIcon: /* @__PURE__ */ e(w, { className: "w-4 h-4" })
71
115
  }
72
116
  ) })
73
117
  ]
74
118
  }
75
119
  ),
76
- s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(N, { edge: s.closestEdge, isFirstElement: r === 0 })
120
+ a.type === "is-dragging-over" && a.closestEdge && /* @__PURE__ */ e(T, { edge: a.closestEdge, isFirstElement: s === 0 })
77
121
  ] }),
78
- s.type === "preview" && p(/* @__PURE__ */ e(v, { column: t }), s.container)
122
+ a.type === "preview" && N(/* @__PURE__ */ e(E, { column: t }), a.container)
79
123
  ] });
80
124
  };
81
125
  export {
82
- F as ColumnItem,
83
- F as default
126
+ S as ColumnItem,
127
+ S as default
84
128
  };
@@ -17,4 +17,5 @@ export interface ColumnItemProps {
17
17
  index: number;
18
18
  onRemove?: (columnId: string) => void;
19
19
  renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => ReactNode;
20
+ disabled?: boolean;
20
21
  }