@ztwoint/z-ui 0.1.105 → 0.1.106

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 (5) hide show
  1. package/dist/components/table-filter/table-filter-button.js +68 -51
  2. package/dist/components/table-filter/table-filter-column-button.js +46 -40
  3. package/dist/components/table-filter/table-filter.type.d.ts +1 -0
  4. package/dist/types/components/table-filter/table-filter.type.d.ts +1 -0
  5. package/package.json +1 -1
package/dist/components/table-filter/table-filter-button.js CHANGED
@@ -1,6 +1,6 @@
1
- import { jsxs as s, jsx as t } from "react/jsx-runtime";
1
+ import { jsxs as r, jsx as t } from "react/jsx-runtime";
2
2
  import * as b from "react";
3
- import * as p from "@radix-ui/react-popover";
3
+ import * as f from "@radix-ui/react-popover";
4
4
  import { Button as y } from "../button/button.js";
5
5
  import { useTableFilterContext as q } from "./table-filter.context.js";
6
6
  import E from "./filters/text.js";
@@ -13,36 +13,36 @@ import { FilterConfirmationDialog as X } from "./close-filter-confirm/filter-con
13
13
  import { hasUnsavedFilterChanges as S } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
14
14
  const ie = () => {
15
15
  var k, A;
16
- const [K, i] = b.useState(!1), c = b.useRef(null), [C, d] = b.useState(!1), {
17
- selectedColumn: o,
16
+ const [K, i] = b.useState(!1), n = b.useRef(null), [C, c] = b.useState(!1), {
17
+ selectedColumn: a,
18
18
  setSelectedColumn: O,
19
19
  getFilterForColumn: P,
20
- hasFilterForColumn: D,
21
- updateColumnFilter: R,
22
- clearAllFilters: T,
20
+ hasFilterForColumn: T,
21
+ updateColumnFilter: D,
22
+ clearAllFilters: R,
23
23
  resetToAppliedFilters: $,
24
24
  applyFilters: z,
25
25
  hasActiveFilters: h,
26
26
  tempFilters: u,
27
- filterSchema: m,
28
- filter: f,
29
- filterComponents: g = {}
27
+ filterSchema: d,
28
+ filter: m,
29
+ filterComponents: x = {}
30
30
  } = q(), B = (e) => {
31
- !e && C ? S(u, f.value) ? i(!0) : d(!1) : d(e);
31
+ !e && C ? S(u, m.value) ? i(!0) : c(!1) : c(e);
32
32
  }, N = () => {
33
- z(), i(!1), d(!1);
33
+ z(), i(!1), c(!1);
34
34
  }, L = () => {
35
- $(), i(!1), d(!1);
35
+ $(), i(!1), c(!1);
36
36
  }, I = () => {
37
37
  i(!1);
38
- }, F = S(u, f.value), l = P(o || ""), V = () => {
39
- if (!o) return null;
40
- const e = m.find((a) => a.filterKey === o), r = {
38
+ }, F = S(u, m.value), l = P(a || ""), V = () => {
39
+ if (!a) return null;
40
+ const e = d.find((o) => o.filterKey === a), s = {
41
41
  boolean: G,
42
42
  string: E,
43
43
  number: J,
44
44
  checkbox: M
45
- }, j = (e == null ? void 0 : e.type) && (g == null ? void 0 : g[e.type]) || r[(e == null ? void 0 : e.type) ?? "string"];
45
+ }, j = (e == null ? void 0 : e.type) && (x == null ? void 0 : x[e.type]) || s[(e == null ? void 0 : e.type) ?? "string"];
46
46
  if (!j)
47
47
  return console.warn(
48
48
  `No filter component found for column "${e == null ? void 0 : e.filterKey}" with type "${e == null ? void 0 : e.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
@@ -55,30 +55,30 @@ const ie = () => {
55
55
  j,
56
56
  {
57
57
  value: U,
58
- onChange: ({ condition: a, value: v }) => R(o, a, v),
59
- filterOptions: e != null && e.options ? Object.entries(e.options).map(([a, v]) => ({
60
- label: a,
61
- value: a,
58
+ onChange: ({ condition: o, value: v }) => D(a, o, v),
59
+ filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, v]) => ({
60
+ label: o,
61
+ value: o,
62
62
  total: v
63
63
  })) : void 0
64
64
  },
65
- o
65
+ a
66
66
  ) }) });
67
- }, H = f.loading || !1;
68
- l && (Array.isArray(l.value) && l.value.length > 0 || (l == null ? void 0 : l.value) !== "") && (c.current = l);
69
- const x = m.find(
67
+ }, H = m.loading || !1;
68
+ l && (Array.isArray(l.value) && l.value.length > 0 || (l == null ? void 0 : l.value) !== "") && (n.current = l);
69
+ const g = d.find(
70
70
  (e) => {
71
- var r;
72
- return e.filterKey == ((r = c.current) == null ? void 0 : r.field);
71
+ var s;
72
+ return e.filterKey == ((s = n.current) == null ? void 0 : s.field);
73
73
  }
74
- ), w = Array.isArray((k = c.current) == null ? void 0 : k.value) ? (A = c.current) == null ? void 0 : A.value.map(
74
+ ), w = Array.isArray((k = n.current) == null ? void 0 : k.value) ? (A = n.current) == null ? void 0 : A.value.map(
75
75
  (e) => {
76
- var r;
77
- return ((r = x == null ? void 0 : x.options) == null ? void 0 : r[e]) || 0;
76
+ var s;
77
+ return ((s = g == null ? void 0 : g.options) == null ? void 0 : s[e]) || 1;
78
78
  }
79
- ) : [1], n = w.reduce((e, r) => e + r, 0);
80
- return /* @__PURE__ */ s(p.Root, { open: C, onOpenChange: B, children: [
81
- /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
79
+ ) : [], p = w.reduce((e, s) => e + s, 0);
80
+ return /* @__PURE__ */ r(f.Root, { open: C, onOpenChange: B, children: [
81
+ /* @__PURE__ */ t(f.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
82
82
  y,
83
83
  {
84
84
  variant: h ? "filled" : "stroke",
@@ -86,52 +86,69 @@ const ie = () => {
86
86
  size: "small",
87
87
  children: [
88
88
  "Filters ",
89
- h && `(${f.value.length})`
89
+ h && `(${m.value.length})`
90
90
  ]
91
91
  }
92
92
  ) }),
93
- /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ s(
94
- p.Content,
93
+ /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ r(
94
+ f.Content,
95
95
  {
96
96
  className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
97
97
  sideOffset: 8,
98
98
  align: "start",
99
99
  children: [
100
- /* @__PURE__ */ s("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
101
- /* @__PURE__ */ s("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
100
+ /* @__PURE__ */ r("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
101
+ /* @__PURE__ */ r("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
102
102
  /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
103
- m.map((e) => /* @__PURE__ */ s(
103
+ d.map((e) => /* @__PURE__ */ r(
104
104
  "button",
105
105
  {
106
106
  onClick: () => O(e.filterKey),
107
- className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${o === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
107
+ className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${a === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
108
108
  children: [
109
- /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
110
- D(e.filterKey) && /* @__PURE__ */ t(Q, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
109
+ /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
110
+ e.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
111
+ e.helperText,
112
+ ": "
113
+ ] }),
114
+ /* @__PURE__ */ t("span", { className: "truncate", children: e.title })
115
+ ] }),
116
+ T(e.filterKey) && /* @__PURE__ */ t(Q, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
111
117
  ]
112
118
  },
113
119
  e.filterKey
114
120
  ))
115
121
  ] }),
116
- /* @__PURE__ */ s("div", { className: "flex-1 flex flex-col relative", children: [
117
- o ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
118
- H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
122
+ /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col relative", children: [
123
+ a ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
124
+ H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
119
125
  /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-transparent rounded-full animate-spin" }),
120
126
  /* @__PURE__ */ t("span", { className: "text-text-body-primary text-sm", children: "Loading options..." })
121
127
  ] }) })
122
128
  ] })
123
129
  ] }),
124
- (!!n || F) && /* @__PURE__ */ s("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
130
+ (!!p || F) && /* @__PURE__ */ r("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
125
131
  w.length > 0 ? /* @__PURE__ */ t(
126
132
  W,
127
133
  {
128
134
  tempFilters: u,
129
- filterSchema: m,
130
- totalCount: n
135
+ filterSchema: d,
136
+ totalCount: p
131
137
  }
132
138
  ) : /* @__PURE__ */ t("div", { className: "w-full" }),
133
- /* @__PURE__ */ s("div", { className: "flex justify-end gap-2", children: [
134
- !!n && /* @__PURE__ */ t(y, { onClick: T, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
139
+ /* @__PURE__ */ r("div", { className: "flex justify-end gap-2", children: [
140
+ /* @__PURE__ */ t(
141
+ y,
142
+ {
143
+ onClick: () => {
144
+ n.current = void 0, R();
145
+ },
146
+ variant: "stroke",
147
+ shade: "neutral",
148
+ size: "small",
149
+ children: "Clear All"
150
+ }
151
+ ),
135
152
  /* @__PURE__ */ t(
136
153
  y,
137
154
  {
@@ -141,7 +158,7 @@ const ie = () => {
141
158
  size: "small",
142
159
  className: "min-w-20",
143
160
  disabled: !F,
144
- children: `Apply ${n ? n.toLocaleString() : ""}`
161
+ children: `Apply ${p ? p.toLocaleString() : ""}`
145
162
  }
146
163
  )
147
164
  ] })
package/dist/components/table-filter/table-filter-column-button.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsxs as s, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as r, jsx as e } from "react/jsx-runtime";
2
2
  import k, { useMemo as K } from "react";
3
3
  import * as d from "@radix-ui/react-popover";
4
- import { Button as f } from "../button/button.js";
4
+ import { Button as u } from "../button/button.js";
5
5
  import { useTableFilterContext as L } from "./table-filter.context.js";
6
6
  import _ from "./filters/text.js";
7
7
  import M from "./filters/boolean.js";
@@ -11,95 +11,101 @@ import E from "../assets/icons/circle-check-filled.js";
11
11
  import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
12
12
  import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
13
13
  import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
14
- const re = ({ filterName: t }) => {
15
- const [O, i] = k.useState(!1), [u, r] = k.useState(!1), {
14
+ const re = ({ filterName: l }) => {
15
+ const [T, i] = k.useState(!1), [f, s] = k.useState(!1), {
16
16
  getFilterForColumn: C,
17
- hasAppliedFilterForColumn: P,
17
+ hasAppliedFilterForColumn: O,
18
18
  updateColumnFilter: g,
19
19
  applyFilters: c,
20
- resetToAppliedFilters: T,
20
+ resetToAppliedFilters: P,
21
21
  filterSchema: j,
22
22
  filterComponents: m = {},
23
23
  tempFilters: v,
24
24
  filter: p
25
- } = L(), $ = (o) => {
26
- !o && u ? A(t, v, p.value) ? i(!0) : r(!1) : r(o);
25
+ } = L(), N = (o) => {
26
+ !o && f ? A(l, v, p.value) ? i(!0) : s(!1) : s(o);
27
+ }, $ = () => {
28
+ c(), i(!1), s(!1);
27
29
  }, D = () => {
28
- c(), i(!1), r(!1);
30
+ P(), i(!1), s(!1);
29
31
  }, R = () => {
30
- T(), i(!1), r(!1);
31
- }, S = () => {
32
32
  i(!1);
33
- }, b = A(t, v, p.value), n = j.find((o) => o.filterKey === t), l = K(
34
- () => C(t),
35
- [t, C]
33
+ }, b = A(l, v, p.value), t = j.find((o) => o.filterKey === l), n = K(
34
+ () => C(l),
35
+ [l, C]
36
36
  );
37
- if (!n)
38
- return console.warn(`Column "${t}" not found in schema`), null;
39
- const z = {
37
+ if (!t)
38
+ return console.warn(`Column "${l}" not found in schema`), null;
39
+ const S = {
40
40
  boolean: M,
41
41
  string: _,
42
42
  number: U,
43
43
  checkbox: q
44
- }, F = n.type && (m == null ? void 0 : m[n.type]) || z[n.type ?? "string"], h = P(t), x = p.loading || !1, y = n.options ? Object.entries(n.options).map(([o, a]) => ({
44
+ }, x = t.type && (m == null ? void 0 : m[t.type]) || S[t.type ?? "string"], h = O(l), F = p.loading || !1, y = t.options ? Object.entries(t.options).map(([o, a]) => ({
45
45
  label: o,
46
46
  value: o,
47
47
  total: a
48
- })) : void 0, w = l ? G(l, y) : void 0, B = l != null && l.value ? Array.isArray(l.value) ? l.value.length : 1 : 0, N = () => {
49
- const o = g(t, "", "");
50
- c(o), r(!1);
48
+ })) : void 0, w = n ? G(n, y) : void 0, z = n != null && n.value ? Array.isArray(n.value) ? n.value.length : 1 : 0, B = () => {
49
+ const o = g(l, "", "");
50
+ c(o), s(!1);
51
51
  }, I = () => {
52
- c(), r(!1);
52
+ c(), s(!1);
53
53
  };
54
- return F ? /* @__PURE__ */ s(d.Root, { open: u, onOpenChange: $, children: [
54
+ return x ? /* @__PURE__ */ r(d.Root, { open: f, onOpenChange: N, children: [
55
55
  /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
56
- f,
56
+ u,
57
57
  {
58
58
  variant: h ? "filled" : "stroke",
59
59
  shade: h ? "brand" : "neutral",
60
60
  size: "small",
61
- children: /* @__PURE__ */ s("span", { className: "flex items-center gap-2", children: [
62
- n.title,
61
+ children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
62
+ /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
63
+ t.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
64
+ t.helperText,
65
+ ": "
66
+ ] }),
67
+ t.title
68
+ ] }),
63
69
  h && /* @__PURE__ */ e(E, { className: "w-4 h-4 text-white flex-shrink-0" }),
64
- x && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin flex-shrink-0" })
70
+ F && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin flex-shrink-0" })
65
71
  ] })
66
72
  }
67
73
  ) }),
68
- /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ s(
74
+ /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ r(
69
75
  d.Content,
70
76
  {
71
77
  className: "w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
72
78
  sideOffset: 8,
73
79
  align: "start",
74
80
  children: [
75
- x ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
81
+ F ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
76
82
  /* @__PURE__ */ e("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-stroke-solid-strong rounded-full animate-spin" }),
77
83
  /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-sm", children: "Loading options..." })
78
84
  ] }) }) : /* @__PURE__ */ e(
79
- F,
85
+ x,
80
86
  {
81
- value: l,
82
- onChange: ({ condition: o, value: a }) => g(t, o, a),
87
+ value: n,
88
+ onChange: ({ condition: o, value: a }) => g(l, o, a),
83
89
  filterOptions: y
84
90
  }
85
91
  ),
86
- (b || !!B) && /* @__PURE__ */ s("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
87
- /* @__PURE__ */ e(f, { onClick: N, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
88
- b && /* @__PURE__ */ e(f, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
92
+ (b || !!z) && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
93
+ /* @__PURE__ */ e(u, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
94
+ b && /* @__PURE__ */ e(u, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
89
95
  ] })
90
96
  ]
91
97
  }
92
98
  ) }),
93
- O && /* @__PURE__ */ e(
99
+ T && /* @__PURE__ */ e(
94
100
  H,
95
101
  {
96
- onClose: S,
97
- onRevertChanges: R,
98
- onApplyChanges: D
102
+ onClose: R,
103
+ onRevertChanges: D,
104
+ onApplyChanges: $
99
105
  }
100
106
  )
101
107
  ] }) : (console.warn(
102
- `No filter component found for column "${n.filterKey}" with type "${n.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
108
+ `No filter component found for column "${t.filterKey}" with type "${t.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
103
109
  ), null);
104
110
  };
105
111
  export {
package/dist/components/table-filter/table-filter.type.d.ts CHANGED
@@ -14,6 +14,7 @@ export type FilterFieldType = 'string' | 'number' | 'boolean' | 'checkbox';
14
14
  export type FilterSchemaField = {
15
15
  filterKey: string;
16
16
  title: string;
17
+ helperText?: string;
17
18
  type: FilterFieldType;
18
19
  options?: Record<string, number>;
19
20
  };
package/dist/types/components/table-filter/table-filter.type.d.ts CHANGED
@@ -14,6 +14,7 @@ export type FilterFieldType = 'string' | 'number' | 'boolean' | 'checkbox';
14
14
  export type FilterSchemaField = {
15
15
  filterKey: string;
16
16
  title: string;
17
+ helperText?: string;
17
18
  type: FilterFieldType;
18
19
  options?: Record<string, number>;
19
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ztwoint/z-ui",
3
- "version": "0.1.105",
3
+ "version": "0.1.106",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",