@ztwoint/z-ui 0.1.125 → 0.1.127

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 (85) hide show
  1. package/dist/components/dynamic-table/z2-table-pagination.js +22 -15
  2. package/dist/components/primitives/chart-card/builders/chart-builder-factory.js +17 -0
  3. package/dist/components/{chart-card → primitives/chart-card}/chart-card.js +2 -2
  4. package/dist/components/primitives/chart-card/config/colors.js +39 -0
  5. package/dist/components/primitives/popconfirm/popconfirm.const.d.ts +20 -0
  6. package/dist/components/primitives/popconfirm/popconfirm.const.js +22 -0
  7. package/dist/components/primitives/popconfirm/popconfirm.d.ts +4 -0
  8. package/dist/components/primitives/popconfirm/popconfirm.hook.d.ts +14 -0
  9. package/dist/components/primitives/popconfirm/popconfirm.hook.js +32 -0
  10. package/dist/components/primitives/popconfirm/popconfirm.js +78 -0
  11. package/dist/components/primitives/popconfirm/popconfirm.type.d.ts +24 -0
  12. package/dist/components/primitives/popconfirm/popconfirm.utils.d.ts +3 -0
  13. package/dist/components/primitives/popconfirm/popconfirm.utils.js +6 -0
  14. package/dist/components/primitives/select-compact/select-compact.js +17 -0
  15. package/dist/components/{table-card → primitives/table-card}/table-card.type.d.ts +3 -3
  16. package/dist/components/table/components/cell/avatar-cell.js +4 -4
  17. package/dist/components/table/table-provider.js +4 -4
  18. package/dist/components/table-filter/table-filter.context.js +3 -12
  19. package/dist/css/styles/tailwind.css +1 -1
  20. package/dist/index.d.ts +4 -3
  21. package/dist/index.js +346 -362
  22. package/dist/types/components/primitives/popconfirm/popconfirm.const.d.ts +20 -0
  23. package/dist/types/components/primitives/popconfirm/popconfirm.d.ts +4 -0
  24. package/dist/types/components/primitives/popconfirm/popconfirm.hook.d.ts +14 -0
  25. package/dist/types/components/primitives/popconfirm/popconfirm.type.d.ts +24 -0
  26. package/dist/types/components/primitives/popconfirm/popconfirm.utils.d.ts +3 -0
  27. package/dist/types/components/{table-card → primitives/table-card}/table-card.type.d.ts +4 -4
  28. package/dist/types/index.d.ts +4 -3
  29. package/package.json +1 -1
  30. package/dist/components/chart-card/builders/chart-builder-factory.js +0 -23
  31. package/dist/components/chart-card/config/colors.js +0 -49
  32. package/dist/components/select-compact/select-compact.js +0 -17
  33. package/dist/components/table-card/table-card.js +0 -215
  34. package/dist/components/table-filter/close-filter-confirm/filter-confirmation-dialog.js +0 -20
  35. package/dist/components/table-filter/close-filter-confirm/filter-confirmation-dialog.utils.js +0 -20
  36. package/dist/components/table-filter/filters/boolean.js +0 -67
  37. package/dist/components/table-filter/filters/checkbox.js +0 -70
  38. package/dist/components/table-filter/filters/number/filter-input-field.js +0 -38
  39. package/dist/components/table-filter/filters/number/number.hook.js +0 -33
  40. package/dist/components/table-filter/filters/number/number.js +0 -55
  41. package/dist/components/table-filter/filters/text.js +0 -50
  42. package/dist/components/table-filter/index.js +0 -11
  43. package/dist/components/table-filter/selected-filters-display/selected-filters-display.js +0 -31
  44. package/dist/components/table-filter/selected-filters-display/selected-filters-display.utils.js +0 -23
  45. package/dist/components/table-filter/table-filter-button.js +0 -181
  46. package/dist/components/table-filter/table-filter-column-button.js +0 -113
  47. package/dist/components/table-filter/table-filter-provider.js +0 -32
  48. package/dist/components/table-filter/table-filter.hook.js +0 -72
  49. package/dist/components/table-filter/table-filter.utils.js +0 -12
  50. /package/dist/components/{chart-card → primitives/chart-card}/builders/bar-chart-builder.d.ts +0 -0
  51. /package/dist/components/{chart-card → primitives/chart-card}/builders/bar-chart-builder.js +0 -0
  52. /package/dist/components/{chart-card → primitives/chart-card}/builders/chart-builder-factory.d.ts +0 -0
  53. /package/dist/components/{chart-card → primitives/chart-card}/builders/line-chart-builder.d.ts +0 -0
  54. /package/dist/components/{chart-card → primitives/chart-card}/builders/line-chart-builder.js +0 -0
  55. /package/dist/components/{chart-card → primitives/chart-card}/builders/pie-chart-builder.d.ts +0 -0
  56. /package/dist/components/{chart-card → primitives/chart-card}/builders/pie-chart-builder.js +0 -0
  57. /package/dist/components/{chart-card → primitives/chart-card}/chart-card-states.d.ts +0 -0
  58. /package/dist/components/{chart-card → primitives/chart-card}/chart-card-states.js +0 -0
  59. /package/dist/components/{chart-card → primitives/chart-card}/chart-card.config.types.d.ts +0 -0
  60. /package/dist/components/{chart-card → primitives/chart-card}/chart-card.d.ts +0 -0
  61. /package/dist/components/{chart-card → primitives/chart-card}/chart-card.types.d.ts +0 -0
  62. /package/dist/components/{chart-card → primitives/chart-card}/config/colors.d.ts +0 -0
  63. /package/dist/components/{chart-card → primitives/chart-card}/config/defaults.d.ts +0 -0
  64. /package/dist/components/{chart-card → primitives/chart-card}/config/defaults.js +0 -0
  65. /package/dist/components/{chart-card → primitives/chart-card}/index.d.ts +0 -0
  66. /package/dist/components/{chart-card → primitives/chart-card}/validators/config-validator.d.ts +0 -0
  67. /package/dist/components/{chart-card → primitives/chart-card}/validators/config-validator.js +0 -0
  68. /package/dist/components/{select-compact → primitives/select-compact}/select-compact.d.ts +0 -0
  69. /package/dist/components/{table-card → primitives/table-card}/index.d.ts +0 -0
  70. /package/dist/components/{table-card → primitives/table-card}/table-card.d.ts +0 -0
  71. /package/dist/types/components/{chart-card → primitives/chart-card}/builders/bar-chart-builder.d.ts +0 -0
  72. /package/dist/types/components/{chart-card → primitives/chart-card}/builders/chart-builder-factory.d.ts +0 -0
  73. /package/dist/types/components/{chart-card → primitives/chart-card}/builders/line-chart-builder.d.ts +0 -0
  74. /package/dist/types/components/{chart-card → primitives/chart-card}/builders/pie-chart-builder.d.ts +0 -0
  75. /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card-states.d.ts +0 -0
  76. /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card.config.types.d.ts +0 -0
  77. /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card.d.ts +0 -0
  78. /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card.types.d.ts +0 -0
  79. /package/dist/types/components/{chart-card → primitives/chart-card}/config/colors.d.ts +0 -0
  80. /package/dist/types/components/{chart-card → primitives/chart-card}/config/defaults.d.ts +0 -0
  81. /package/dist/types/components/{chart-card → primitives/chart-card}/index.d.ts +0 -0
  82. /package/dist/types/components/{chart-card → primitives/chart-card}/validators/config-validator.d.ts +0 -0
  83. /package/dist/types/components/{select-compact → primitives/select-compact}/select-compact.d.ts +0 -0
  84. /package/dist/types/components/{table-card → primitives/table-card}/index.d.ts +0 -0
  85. /package/dist/types/components/{table-card → primitives/table-card}/table-card.d.ts +0 -0
@@ -1,33 +0,0 @@
1
- import { useState as e, useEffect as h } from "react";
2
- const b = ({ value: t, onChange: o }) => {
3
- const [r, n] = e(""), [d, c] = e(""), [f, s] = e(""), A = r ? "specific" : d ? "atLeast" : f ? "noMoreThan" : null;
4
- return h(() => {
5
- (t == null ? void 0 : t.condition) === "=" && (t != null && t.value) ? (n(t == null ? void 0 : t.value), c(""), s("")) : (t == null ? void 0 : t.condition) === ">" && (t != null && t.value) ? (c(t.value), n(""), s("")) : (t == null ? void 0 : t.condition) === "<" && (t != null && t.value) && (s(t.value), n(""), c(""));
6
- }, [t == null ? void 0 : t.condition, t == null ? void 0 : t.value]), {
7
- specificAmount: r,
8
- atLeast: d,
9
- noMoreThan: f,
10
- activeField: A,
11
- handleSpecificAmountChange: (i) => {
12
- n(i), i ? (c(""), s(""), o({ condition: "=", value: i })) : o({ condition: "", value: "" });
13
- },
14
- handleAtLeastChange: (i) => {
15
- c(i), i ? (n(""), s(""), o({ condition: ">", value: i })) : o({ condition: "", value: "" });
16
- },
17
- handleNoMoreThanChange: (i) => {
18
- s(i), i ? (n(""), c(""), o({ condition: "<", value: i })) : o({ condition: "", value: "" });
19
- },
20
- resetSpecificAmount: () => {
21
- n(""), o({ condition: "", value: "" });
22
- },
23
- resetAtLeast: () => {
24
- c(""), o({ condition: "", value: "" });
25
- },
26
- resetNoMoreThan: () => {
27
- s(""), o({ condition: "", value: "" });
28
- }
29
- };
30
- };
31
- export {
32
- b as useNumberFilter
33
- };
@@ -1,55 +0,0 @@
1
- import { jsxs as m, jsx as a } from "react/jsx-runtime";
2
- import { useNumberFilter as f } from "./number.hook.js";
3
- import { FilterInputField as t } from "./filter-input-field.js";
4
- const C = ({ value: o, onChange: l }) => {
5
- const {
6
- specificAmount: n,
7
- atLeast: r,
8
- noMoreThan: s,
9
- activeField: e,
10
- handleSpecificAmountChange: i,
11
- handleAtLeastChange: c,
12
- handleNoMoreThanChange: h,
13
- resetSpecificAmount: p,
14
- resetAtLeast: u,
15
- resetNoMoreThan: d
16
- } = f({ value: o, onChange: l });
17
- return /* @__PURE__ */ m("div", { className: "flex flex-col gap-4 p-4", children: [
18
- /* @__PURE__ */ a(
19
- t,
20
- {
21
- label: "Specific",
22
- operator: "=",
23
- value: n,
24
- onChange: i,
25
- onReset: p,
26
- disabled: e !== null && e !== "specific"
27
- }
28
- ),
29
- /* @__PURE__ */ a(
30
- t,
31
- {
32
- label: "At least...",
33
- operator: "≥",
34
- value: r,
35
- onChange: c,
36
- onReset: u,
37
- disabled: e !== null && e !== "atLeast"
38
- }
39
- ),
40
- /* @__PURE__ */ a(
41
- t,
42
- {
43
- label: "No more than...",
44
- operator: "≤",
45
- value: s,
46
- onChange: h,
47
- onReset: d,
48
- disabled: e !== null && e !== "noMoreThan"
49
- }
50
- )
51
- ] });
52
- };
53
- export {
54
- C as default
55
- };
@@ -1,50 +0,0 @@
1
- import { jsxs as r, jsx as t } from "react/jsx-runtime";
2
- import i from "../../assets/icons/x.js";
3
- import { MagnifierIcon as o } from "../../assets/icons/magnifier-icon.js";
4
- import { Input as c } from "../../input/input.js";
5
- const d = [
6
- { label: "Contains", value: "contains" },
7
- { label: "Does not equal", value: "notEqual" },
8
- { label: "Equals", value: "equals" }
9
- ], x = ({ value: e, onChange: n }) => {
10
- var a;
11
- const s = () => {
12
- n({ value: "" });
13
- };
14
- return /* @__PURE__ */ r("div", { className: "flex flex-col gap-3", children: [
15
- /* @__PURE__ */ t("div", { className: "p-4 relative", children: /* @__PURE__ */ t(
16
- c,
17
- {
18
- leftIcon: /* @__PURE__ */ t(o, {}),
19
- size: "large",
20
- placeholder: "Search options",
21
- value: e == null ? void 0 : e.value,
22
- rightIcon: e != null && e.value ? /* @__PURE__ */ t(i, { onClick: s }) : null,
23
- onChange: (l) => n({ value: l.target.value }),
24
- className: ""
25
- }
26
- ) }),
27
- /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 p-3", children: !!(e != null && e.value) && /* @__PURE__ */ r("div", { className: "flex items-center justify-center gap-2 px-3 py-2", children: [
28
- /* @__PURE__ */ t("span", { className: "text-text-neutral-muted text-xs font-medium uppercase tracking-wide", children: (a = d.find((l) => l.value === (e == null ? void 0 : e.condition))) == null ? void 0 : a.label }),
29
- /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
30
- /* @__PURE__ */ r("span", { className: "text-text-neutral-primary text-sm font-medium px-2 py-1 bg-surface-neutral-default rounded border border-stroke-solid-medium", children: [
31
- "“",
32
- e.value,
33
- "”"
34
- ] }),
35
- /* @__PURE__ */ t(
36
- "button",
37
- {
38
- onClick: s,
39
- className: "flex items-center justify-center w-5 h-5 rounded-full bg-surface-neutral-hovered hover:bg-surface-neutral-pressed transition-colors",
40
- title: "Remove filter",
41
- children: /* @__PURE__ */ t(i, { className: "w-3 h-3 text-text-neutral-muted" })
42
- }
43
- )
44
- ] })
45
- ] }) })
46
- ] });
47
- };
48
- export {
49
- x as default
50
- };
@@ -1,11 +0,0 @@
1
- import { TableFilterProvider as o } from "./table-filter-provider.js";
2
- import { TableFilterButton as r } from "./table-filter-button.js";
3
- import { TableFilterColumnButton as e } from "./table-filter-column-button.js";
4
- import { useTableFilterContext as F } from "./table-filter.context.js";
5
- const t = o;
6
- t.FilterButton = r;
7
- t.FilterColumnButton = e;
8
- export {
9
- t as Filter,
10
- F as useTableFilterContext
11
- };
@@ -1,31 +0,0 @@
1
- import { jsxs as e, jsx as a, Fragment as c } from "react/jsx-runtime";
2
- import * as d from "react";
3
- import { getAppliedOptions as i } from "./selected-filters-display.utils.js";
4
- const p = ({
5
- totalCount: l,
6
- tempFilters: r,
7
- filterSchema: s
8
- }) => {
9
- const n = i(r, s);
10
- return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2.5 max-w-md", children: [
11
- l > 0 && /* @__PURE__ */ e("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: [
12
- l.toLocaleString(),
13
- " total"
14
- ] }),
15
- /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2.5 max-w-md", children: n.map((t, m) => /* @__PURE__ */ e(d.Fragment, { children: [
16
- /* @__PURE__ */ a("div", { className: "inline-flex items-center text-text-neutral-secondary rounded-md leading-none-regular-sm", children: /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: [
17
- t.name,
18
- " ",
19
- t.total !== void 0 && /* @__PURE__ */ e(c, { children: [
20
- "[",
21
- /* @__PURE__ */ a("span", { className: "text-text-neutral-secondary", children: t.total.toLocaleString() }),
22
- "]"
23
- ] })
24
- ] }) }),
25
- m < n.length - 1 && /* @__PURE__ */ a("span", { className: "text-text-neutral-muted", children: "•" })
26
- ] }, t.name)) })
27
- ] });
28
- };
29
- export {
30
- p as SelectedFiltersDisplay
31
- };
@@ -1,23 +0,0 @@
1
- const u = (e, n) => e.map(({ field: r, value: t }) => {
2
- var o;
3
- const a = (o = n.find(({ filterKey: s }) => s === r)) == null ? void 0 : o.options;
4
- return !a || !Array.isArray(t) ? [] : t.map((s) => ({
5
- name: s,
6
- total: a[s]
7
- }));
8
- }).flat(), l = (e, n) => {
9
- if (!n || n.length === 0) return e.value !== "" ? 1 : 0;
10
- if (Array.isArray(e.value)) {
11
- const t = n.filter(
12
- (a) => e.value.includes(a.value)
13
- ).reduce((a, o) => a + (o.total || 0), 0);
14
- return t > 0 ? t : void 0;
15
- } else {
16
- const r = n.find((t) => t.value === e.value);
17
- return r == null ? void 0 : r.total;
18
- }
19
- };
20
- export {
21
- u as getAppliedOptions,
22
- l as getFilterCount
23
- };
@@ -1,181 +0,0 @@
1
- import { jsxs as r, jsx as t } from "react/jsx-runtime";
2
- import * as b from "react";
3
- import * as f from "@radix-ui/react-popover";
4
- import { Button as y } from "../button/button.js";
5
- import { useTableFilterContext as q } from "./table-filter.context.js";
6
- import E from "./filters/text.js";
7
- import G from "./filters/boolean.js";
8
- import J from "./filters/number/number.js";
9
- import M from "./filters/checkbox.js";
10
- import Q from "../assets/icons/circle-check-filled.js";
11
- import { SelectedFiltersDisplay as W } from "./selected-filters-display/selected-filters-display.js";
12
- import { FilterConfirmationDialog as X } from "./close-filter-confirm/filter-confirmation-dialog.js";
13
- import { hasUnsavedFilterChanges as S } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
14
- const ie = () => {
15
- var k, A;
16
- const [K, i] = b.useState(!1), n = b.useRef(null), [C, c] = b.useState(!1), {
17
- selectedColumn: a,
18
- setSelectedColumn: O,
19
- getFilterForColumn: P,
20
- hasFilterForColumn: T,
21
- updateColumnFilter: D,
22
- clearAllFilters: R,
23
- resetToAppliedFilters: $,
24
- applyFilters: z,
25
- hasActiveFilters: h,
26
- tempFilters: u,
27
- filterSchema: d,
28
- filter: m,
29
- filterComponents: x = {}
30
- } = q(), B = (e) => {
31
- !e && C ? S(u, m.value) ? i(!0) : c(!1) : c(e);
32
- }, N = () => {
33
- z(), i(!1), c(!1);
34
- }, L = () => {
35
- $(), i(!1), c(!1);
36
- }, I = () => {
37
- i(!1);
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
- boolean: G,
42
- string: E,
43
- number: J,
44
- checkbox: M
45
- }, j = (e == null ? void 0 : e.type) && (x == null ? void 0 : x[e.type]) || s[(e == null ? void 0 : e.type) ?? "string"];
46
- if (!j)
47
- return console.warn(
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".`
49
- ), null;
50
- const U = {
51
- condition: (l == null ? void 0 : l.condition) || "",
52
- value: (l == null ? void 0 : l.value) || ""
53
- };
54
- return /* @__PURE__ */ t("div", { className: "flex-1 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
55
- j,
56
- {
57
- value: U,
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
- total: v
63
- })) : void 0
64
- },
65
- a
66
- ) }) });
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
- (e) => {
71
- var s;
72
- return e.filterKey == ((s = n.current) == null ? void 0 : s.field);
73
- }
74
- ), w = Array.isArray((k = n.current) == null ? void 0 : k.value) ? (A = n.current) == null ? void 0 : A.value.map(
75
- (e) => {
76
- var s;
77
- return ((s = g == null ? void 0 : g.options) == null ? void 0 : s[e]) || 1;
78
- }
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
- y,
83
- {
84
- variant: h ? "filled" : "stroke",
85
- shade: h ? "brand" : "neutral",
86
- size: "small",
87
- children: [
88
- "Filters ",
89
- h && `(${m.value.length})`
90
- ]
91
- }
92
- ) }),
93
- /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ r(
94
- f.Content,
95
- {
96
- className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
97
- sideOffset: 8,
98
- align: "start",
99
- 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
- /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
103
- d.map((e) => /* @__PURE__ */ r(
104
- "button",
105
- {
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 ${a === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
108
- children: [
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" })
117
- ]
118
- },
119
- e.filterKey
120
- ))
121
- ] }),
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: [
125
- /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-transparent rounded-full animate-spin" }),
126
- /* @__PURE__ */ t("span", { className: "text-text-body-primary text-sm", children: "Loading options..." })
127
- ] }) })
128
- ] })
129
- ] }),
130
- (!!p || F) && /* @__PURE__ */ r("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
131
- w.length > 0 ? /* @__PURE__ */ t(
132
- W,
133
- {
134
- tempFilters: u,
135
- filterSchema: d,
136
- totalCount: p
137
- }
138
- ) : /* @__PURE__ */ t("div", { className: "w-full" }),
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
- ),
152
- /* @__PURE__ */ t(
153
- y,
154
- {
155
- onClick: N,
156
- variant: "filled",
157
- shade: "neutral",
158
- size: "small",
159
- className: "min-w-20",
160
- disabled: !F,
161
- children: `Apply ${p ? p.toLocaleString() : ""}`
162
- }
163
- )
164
- ] })
165
- ] })
166
- ]
167
- }
168
- ) }),
169
- K && /* @__PURE__ */ t(
170
- X,
171
- {
172
- onClose: I,
173
- onRevertChanges: L,
174
- onApplyChanges: N
175
- }
176
- )
177
- ] });
178
- };
179
- export {
180
- ie as TableFilterButton
181
- };
@@ -1,113 +0,0 @@
1
- import { jsxs as r, jsx as e } from "react/jsx-runtime";
2
- import k, { useMemo as K } from "react";
3
- import * as d from "@radix-ui/react-popover";
4
- import { Button as u } from "../button/button.js";
5
- import { useTableFilterContext as L } from "./table-filter.context.js";
6
- import _ from "./filters/text.js";
7
- import M from "./filters/boolean.js";
8
- import U from "./filters/number/number.js";
9
- import q from "./filters/checkbox.js";
10
- import E from "../assets/icons/circle-check-filled.js";
11
- import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
12
- import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
13
- import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
14
- const re = ({ filterName: n }) => {
15
- const [T, a] = k.useState(!1), [f, s] = k.useState(!1), {
16
- getFilterForColumn: C,
17
- hasAppliedFilterForColumn: O,
18
- updateColumnFilter: g,
19
- applyFilters: c,
20
- resetToAppliedFilters: P,
21
- filterSchema: j,
22
- filterComponents: m = {},
23
- tempFilters: v,
24
- filter: p
25
- } = L(), N = (o) => {
26
- !o && f ? A(n, v, p.value) ? a(!0) : s(!1) : s(o);
27
- }, $ = () => {
28
- c(), a(!1), s(!1);
29
- }, D = () => {
30
- P(), a(!1), s(!1);
31
- }, R = () => {
32
- a(!1);
33
- }, x = A(n, v, p.value), t = j.find((o) => o.filterKey === n), l = K(
34
- () => C(n),
35
- [n, C]
36
- );
37
- if (!t)
38
- return console.warn(`Column "${n}" not found in schema`), null;
39
- const S = {
40
- boolean: M,
41
- string: _,
42
- number: U,
43
- checkbox: q
44
- }, b = t.type && (m == null ? void 0 : m[t.type]) || S[t.type ?? "string"], h = O(n), F = p.loading || !1, y = t.options ? Object.entries(t.options).map(([o, i]) => ({
45
- label: o,
46
- value: o,
47
- total: i
48
- })) : void 0, w = l ? G(l, y) : void 0, z = l != null && l.value ? Array.isArray(l.value) ? l.value.length : 1 : 0, B = () => {
49
- const o = g(n, "", "");
50
- c(o), s(!1);
51
- }, I = () => {
52
- c(), s(!1);
53
- };
54
- return b ? /* @__PURE__ */ r(d.Root, { open: f, onOpenChange: N, children: [
55
- /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
56
- u,
57
- {
58
- variant: h ? "filled" : "stroke",
59
- shade: h ? "brand" : "neutral",
60
- size: "small",
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
- ] }),
69
- h && /* @__PURE__ */ e(E, { className: "w-4 h-4 text-white flex-shrink-0" }),
70
- F && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-text-brand-secondary rounded-full animate-spin flex-shrink-0" })
71
- ] })
72
- }
73
- ) }),
74
- /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ r(
75
- d.Content,
76
- {
77
- className: "w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
78
- sideOffset: 8,
79
- align: "start",
80
- 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: [
82
- /* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
83
- /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-sm", children: "Loading options..." })
84
- ] }) }) : /* @__PURE__ */ e(
85
- b,
86
- {
87
- value: l,
88
- onChange: ({ condition: o, value: i }) => g(n, o, i),
89
- filterOptions: y
90
- }
91
- ),
92
- (x || !!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
- x && /* @__PURE__ */ e(u, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
95
- ] })
96
- ]
97
- }
98
- ) }),
99
- T && /* @__PURE__ */ e(
100
- H,
101
- {
102
- onClose: R,
103
- onRevertChanges: D,
104
- onApplyChanges: $
105
- }
106
- )
107
- ] }) : (console.warn(
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".`
109
- ), null);
110
- };
111
- export {
112
- re as TableFilterColumnButton
113
- };
@@ -1,32 +0,0 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import a from "./table-filter.hook.js";
3
- import { TableFilterContext as u } from "./table-filter.context.js";
4
- const c = ({
5
- children: r,
6
- filterComponents: t = {},
7
- filterSchema: e,
8
- filter: o
9
- }) => {
10
- const l = a({
11
- filterSchema: e,
12
- filter: o || {
13
- value: [],
14
- onChange: () => {
15
- },
16
- onFilterClick: void 0,
17
- loading: !1
18
- }
19
- });
20
- if (!o)
21
- return null;
22
- const n = {
23
- ...l,
24
- filterSchema: e,
25
- filter: o,
26
- filterComponents: t
27
- };
28
- return /* @__PURE__ */ i(u.Provider, { value: n, children: r });
29
- };
30
- export {
31
- c as TableFilterProvider
32
- };
@@ -1,72 +0,0 @@
1
- import i, { useEffect as k } from "react";
2
- import { removeInvalidFilterOptions as E } from "./table-filter.utils.js";
3
- const w = ({ filter: r, filterSchema: a }) => {
4
- const [v, F] = i.useState(null), [n, u] = i.useState(r.value);
5
- k(() => {
6
- u((t) => E(t, a));
7
- }, [a]);
8
- const f = i.useCallback(
9
- (t) => {
10
- if (F(t), t && r.onFilterClick) {
11
- const e = n.filter((l) => Array.isArray(l.value) ? l.value.length > 0 : l.value !== "");
12
- r.onFilterClick(e, t);
13
- }
14
- },
15
- [r, n]
16
- );
17
- i.useEffect(() => {
18
- !v && a.length > 0 && F(a[0].filterKey);
19
- }, [v, a]);
20
- const c = (t) => n.find((e) => e.field === t), p = (t) => {
21
- const e = c(t);
22
- return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
23
- }, A = (t) => r.value.find((e) => e.field === t), C = (t) => {
24
- const e = A(t);
25
- return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
26
- }, g = (t, e, l) => {
27
- const d = n.findIndex((s) => s.field === t);
28
- let o = [];
29
- if (d >= 0)
30
- o = n.map(
31
- (s, T) => T === d ? {
32
- ...s,
33
- ...e !== void 0 ? { condition: e } : {},
34
- ...l !== void 0 ? { value: l } : {}
35
- } : s
36
- );
37
- else {
38
- const s = {
39
- field: t,
40
- ...e ? { condition: e } : {},
41
- value: l || ""
42
- };
43
- o = [...n, s];
44
- }
45
- return u(o), o;
46
- }, m = () => {
47
- u([]);
48
- }, y = () => {
49
- u(r.value);
50
- }, h = (t) => {
51
- const e = (t || n).filter((l) => Array.isArray(l.value) ? l.value.length > 0 : l.value !== "");
52
- r.onChange(e);
53
- }, x = r.value.length > 0;
54
- return i.useEffect(() => {
55
- u(r.value);
56
- }, [r.value]), {
57
- selectedColumn: v,
58
- setSelectedColumn: f,
59
- getFilterForColumn: c,
60
- hasFilterForColumn: p,
61
- hasAppliedFilterForColumn: C,
62
- updateColumnFilter: g,
63
- clearAllFilters: m,
64
- resetToAppliedFilters: y,
65
- applyFilters: h,
66
- hasActiveFilters: x,
67
- tempFilters: n
68
- };
69
- };
70
- export {
71
- w as default
72
- };
@@ -1,12 +0,0 @@
1
- const l = (t, i) => {
2
- const s = i.map((e) => e.filterKey);
3
- return t.filter((e) => {
4
- const n = i.find((r) => r.filterKey === e.field);
5
- return n ? (Array.isArray(e.value) && (e.value = e.value.filter(
6
- (r) => Object.entries(n.options || {}).some(([a]) => a === r)
7
- )), s.includes(e.field)) : !1;
8
- });
9
- };
10
- export {
11
- l as removeInvalidFilterOptions
12
- };