@ztwoint/z-ui 0.1.84 → 0.1.86

package/dist/components/table-filter/filters/text.js

@@ -1,47 +1,44 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useEffect as c } from "react";
-import s from "../../assets/icons/x.js";
-import { MagnifierIcon as u } from "../../assets/icons/magnifier-icon.js";
-import { Input as d } from "../../input/input.js";
-const o = [
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import i from "../../assets/icons/x.js";
+import { MagnifierIcon as o } from "../../assets/icons/magnifier-icon.js";
+import { Input as c } from "../../input/input.js";
+const d = [
   { label: "Contains", value: "contains" },
   { label: "Does not equal", value: "notEqual" },
   { label: "Equals", value: "equals" }
-], h = ({ value: t, onChange: a }) => {
-  var i;
-  const n = () => {
-    a({ value: "" });
+], x = ({ value: e, onChange: n }) => {
+  var a;
+  const s = () => {
+    n({ value: "" });
   };
-  return c(() => {
-    t.condition || a({ condition: o[0].value });
-  }, []), /* @__PURE__ */ l("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ e("div", { className: "p-4 relative", children: /* @__PURE__ */ e(
-      d,
+  return /* @__PURE__ */ r("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ t("div", { className: "p-4 relative", children: /* @__PURE__ */ t(
+      c,
       {
-        leftIcon: /* @__PURE__ */ e(u, {}),
+        leftIcon: /* @__PURE__ */ t(o, {}),
         size: "large",
         placeholder: "Search options",
-        value: t.value,
-        rightIcon: t.value ? /* @__PURE__ */ e(s, { onClick: n }) : null,
-        onChange: (r) => a({ value: r.target.value }),
+        value: e == null ? void 0 : e.value,
+        rightIcon: e != null && e.value ? /* @__PURE__ */ t(i, { onClick: s }) : null,
+        onChange: (l) => n({ value: l.target.value }),
         className: ""
       }
     ) }),
-    /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-3", children: t.value && /* @__PURE__ */ l("div", { className: "flex items-center justify-center gap-2 px-3 py-2", children: [
-      /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-xs font-medium uppercase tracking-wide", children: (i = o.find((r) => r.value === t.condition)) == null ? void 0 : i.label }),
-      /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ l("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: [
+    /* @__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: [
+      /* @__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 }),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
+        /* @__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: [
           "“",
-          t.value,
+          e.value,
           "”"
         ] }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "button",
           {
-            onClick: n,
+            onClick: s,
             className: "flex items-center justify-center w-5 h-5 rounded-full bg-surface-neutral-hovered hover:bg-surface-neutral-pressed transition-colors",
             title: "Remove filter",
-            children: /* @__PURE__ */ e(s, { className: "w-3 h-3 text-text-neutral-muted" })
+            children: /* @__PURE__ */ t(i, { className: "w-3 h-3 text-text-neutral-muted" })
           }
         )
       ] })
@@ -49,5 +46,5 @@ const o = [
   ] });
 };
 export {
-  h as default
+  x as default
 };

package/dist/components/table-filter/table-filter-column-button.js

@@ -1,8 +1,8 @@
 import { jsxs as a, jsx as l } from "react/jsx-runtime";
 import * as x from "react";
 import * as p from "@radix-ui/react-popover";
-import { Button as h } from "../button/button.js";
-import { useTableFilterContext as V } from "./table-filter.context.js";
+import { Button as d } from "../button/button.js";
+import { useTableFilterContext as U } from "./table-filter.context.js";
 import q from "./filters/text.js";
 import E from "./filters/boolean.js";
 import G from "./filters/number/number.js";
@@ -11,63 +11,60 @@ import J from "../assets/icons/circle-check-filled.js";
 import { getFilterCount as L } from "./selected-filters-display/selected-filters-display.utils.js";
 import { FilterConfirmationDialog as M } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChangesForColumn as w } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const le = ({ filterName: n }) => {
-  const [k, r] = x.useState(!1), [f, s] = x.useState(!1), {
+const ne = ({ filterName: t }) => {
+  const [k, s] = x.useState(!1), [f, r] = x.useState(!1), {
     getFilterForColumn: A,
     hasAppliedFilterForColumn: O,
     updateColumnFilter: u,
     applyFilters: c,
     resetToAppliedFilters: P,
     filterSchema: T,
-    filterComponents: d = {},
+    filterComponents: m = {},
     tempFilters: C,
     filter: g
-  } = V(), $ = (o) => {
-    !o && f ? w(n, C, g.value) ? r(!0) : s(!1) : s(o);
+  } = U(), $ = (e) => {
+    !e && f ? w(t, C, g.value) ? s(!0) : r(!1) : r(e);
   }, j = () => {
-    c(), r(!1), s(!1);
+    c(), s(!1), r(!1);
   }, D = () => {
-    r(!1), s(!1);
+    s(!1), r(!1);
   }, K = () => {
-    P(), r(!1), s(!1);
+    P(), s(!1), r(!1);
   }, R = () => {
-    r(!1);
-  }, v = w(n, C, g.value), t = T.find((o) => o.filterKey === n);
-  if (!t)
-    return console.warn(`Column "${n}" not found in schema`), null;
+    s(!1);
+  }, F = w(t, C, g.value), o = T.find((e) => e.filterKey === t);
+  if (!o)
+    return console.warn(`Column "${t}" not found in schema`), null;
   const S = {
     boolean: E,
     string: q,
     number: G,
     checkbox: H
-  }, F = t.type && (d == null ? void 0 : d[t.type]) || S[t.type ?? "string"];
-  if (!F)
+  }, v = o.type && (m == null ? void 0 : m[o.type]) || S[o.type ?? "string"];
+  if (!v)
     return console.warn(
-      `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".`
+      `No filter component found for column "${o.filterKey}" with type "${o.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
     ), null;
-  const e = A(n), m = O(n), b = t.options ? Object.entries(t.options).map(([o, i]) => ({
-    label: o,
-    value: o,
+  const n = A(t), h = O(t), b = o.options ? Object.entries(o.options).map(([e, i]) => ({
+    label: e,
+    value: e,
     total: i
-  })) : void 0, y = e ? L(e, b) : void 0, z = e != null && e.value ? Array.isArray(e.value) ? e.value.length : 1 : 0, B = {
-    condition: (e == null ? void 0 : e.condition) || "",
-    value: (e == null ? void 0 : e.value) || ""
+  })) : void 0, y = n ? L(n, b) : void 0, z = n != null && n.value ? Array.isArray(n.value) ? n.value.length : 1 : 0, B = () => {
+    const e = u(t, "", "");
+    c(e), r(!1);
   }, I = () => {
-    const o = u(n, "", "");
-    c(o), s(!1);
-  }, U = () => {
-    c(), s(!1);
+    c(), r(!1);
   };
   return /* @__PURE__ */ a(p.Root, { open: f, onOpenChange: $, children: [
     /* @__PURE__ */ l(p.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
-      h,
+      d,
       {
-        variant: m ? "filled" : "stroke",
-        shade: m ? "brand" : "neutral",
+        variant: h ? "filled" : "stroke",
+        shade: h ? "brand" : "neutral",
         size: "small",
         children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
-          t.title,
-          m && /* @__PURE__ */ l(J, { className: "w-4 h-4 text-white flex-shrink-0" })
+          o.title,
+          h && /* @__PURE__ */ l(J, { className: "w-4 h-4 text-white flex-shrink-0" })
         ] })
       }
     ) }),
@@ -79,16 +76,16 @@ const le = ({ filterName: n }) => {
         align: "start",
         children: [
           /* @__PURE__ */ l(
-            F,
+            v,
             {
-              value: B,
-              onChange: ({ condition: o, value: i }) => u(n, o, i),
+              value: n,
+              onChange: ({ condition: e, value: i }) => u(t, e, i),
               filterOptions: b
             }
           ),
-          (v || !!z) && /* @__PURE__ */ a("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-            /* @__PURE__ */ l(h, { onClick: I, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-            v && /* @__PURE__ */ l(h, { onClick: U, variant: "filled", shade: "neutral", size: "small", children: `Apply${y !== void 0 ? ` ${y}` : ""}` })
+          (F || !!z) && /* @__PURE__ */ a("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+            /* @__PURE__ */ l(d, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+            F && /* @__PURE__ */ l(d, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${y !== void 0 ? ` ${y}` : ""}` })
           ] })
         ]
       }
@@ -105,5 +102,5 @@ const le = ({ filterName: n }) => {
   ] });
 };
 export {
-  le as TableFilterColumnButton
+  ne as TableFilterColumnButton
 };

package/dist/components/table-filter/table-filter-provider.js

@@ -1,27 +1,27 @@
-import { jsx as u } from "react/jsx-runtime";
-import i from "./table-filter.hook.js";
-import { TableFilterContext as a } from "./table-filter.context.js";
-const v = ({
+import { jsx as i } from "react/jsx-runtime";
+import a from "./table-filter.hook.js";
+import { TableFilterContext as u } from "./table-filter.context.js";
+const c = ({
   children: r,
   filterComponents: t = {},
   filterSchema: e,
   filter: o
 }) => {
-  const l = i({
+  const n = a({
     filterSchema: e,
     filter: o || { value: [], onChange: () => {
-    } }
+    }, onDynamicChange: void 0 }
   });
   if (!o)
     return null;
-  const n = {
-    ...l,
+  const l = {
+    ...n,
     filterSchema: e,
     filter: o,
     filterComponents: t
   };
-  return /* @__PURE__ */ u(a.Provider, { value: n, children: r });
+  return /* @__PURE__ */ i(u.Provider, { value: l, children: r });
 };
 export {
-  v as TableFilterProvider
+  c as TableFilterProvider
 };

package/dist/components/table-filter/table-filter.hook.js

@@ -1,59 +1,63 @@
-import i from "react";
-const E = ({ filter: l, filterSchema: o }) => {
-  const [d, c] = i.useState(null), [n, s] = i.useState(l.value);
-  i.useEffect(() => {
-    !d && o.length > 0 && c(o[0].filterKey);
-  }, [d, o]);
-  const f = (t) => n.find((e) => e.field === t), p = (t) => {
-    const e = f(t);
+import o from "react";
+const w = ({ filter: n, filterSchema: c }) => {
+  const [v, d] = o.useState(null), [l, i] = o.useState(n.value);
+  o.useEffect(() => {
+    !v && c.length > 0 && d(c[0].filterKey);
+  }, [v, c]);
+  const F = (t) => l.find((e) => e.field === t), p = (t) => {
+    const e = F(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
-  }, A = (t) => l.value.find((e) => e.field === t), m = (t) => {
-    const e = A(t);
+  }, g = (t) => n.value.find((e) => e.field === t), m = (t) => {
+    const e = g(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
-  }, g = (t, e, r) => {
-    const F = n.findIndex((a) => a.field === t);
+  }, y = (t, e, a) => {
+    const f = l.findIndex((r) => r.field === t);
     let u = [];
-    if (F >= 0)
-      u = n.map(
-        (v, T) => T === F ? {
-          ...v,
+    if (f >= 0)
+      u = l.map(
+        (s, x) => x === f ? {
+          ...s,
           ...e !== void 0 ? { condition: e } : {},
-          ...r !== void 0 ? { value: r } : {}
-        } : v
+          ...a !== void 0 ? { value: a } : {}
+        } : s
       );
     else {
-      const a = {
+      const r = {
         field: t,
         ...e ? { condition: e } : {},
-        value: r || ""
+        value: a || ""
       };
-      u = [...n, a];
+      u = [...l, r];
     }
-    return s(u), u;
-  }, C = () => {
-    s([]);
+    if (i(u), n.onDynamicChange) {
+      const r = u.filter((s) => Array.isArray(s.value) ? s.value.length > 0 : s.value !== "");
+      n.onDynamicChange(r);
+    }
+    return u;
   }, h = () => {
-    s(l.value);
-  }, y = (t) => {
-    const e = (t || n).filter((r) => Array.isArray(r.value) ? r.value.length > 0 : r.value !== "");
-    l.onChange(e);
-  }, x = l.value.length > 0;
-  return i.useEffect(() => {
-    s(l.value);
-  }, [l.value]), {
-    selectedColumn: d,
-    setSelectedColumn: c,
-    getFilterForColumn: f,
+    i([]), n.onDynamicChange && n.onDynamicChange([]);
+  }, C = () => {
+    i(n.value), n.onDynamicChange && n.onDynamicChange(n.value);
+  }, A = (t) => {
+    const e = (t || l).filter((a) => Array.isArray(a.value) ? a.value.length > 0 : a.value !== "");
+    n.onChange(e);
+  }, D = n.value.length > 0;
+  return o.useEffect(() => {
+    i(n.value);
+  }, [n.value]), {
+    selectedColumn: v,
+    setSelectedColumn: d,
+    getFilterForColumn: F,
     hasFilterForColumn: p,
     hasAppliedFilterForColumn: m,
-    updateColumnFilter: g,
-    clearAllFilters: C,
-    resetToAppliedFilters: h,
-    applyFilters: y,
-    hasActiveFilters: x,
-    tempFilters: n
+    updateColumnFilter: y,
+    clearAllFilters: h,
+    resetToAppliedFilters: C,
+    applyFilters: A,
+    hasActiveFilters: D,
+    tempFilters: l
   };
 };
 export {
-  E as default
+  w as default
 };

package/dist/components/table-filter/table-filter.type.d.ts

@@ -21,6 +21,7 @@ export type FilterSchema = FilterSchemaField[];
 export type TableFilter = {
     value: FilterRule[];
     onChange: (filters: FilterRule[]) => void;
+    onDynamicChange?: (filters: FilterRule[]) => void;
 };
 export interface TableFilterProps {
     filterSchema: FilterSchema;
@@ -32,9 +33,9 @@ export type FilterComponentProps = {
         condition?: string;
         value?: string | string[];
     }) => void;
-    value: {
+    value?: {
         condition?: string;
-        value: string | string[];
+        value?: string | string[];
     };
     filterOptions?: FilterOption[];
 };

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export * from './components/text-preset/text-preset';
 export * from './components/column-reorder';
 export * from './components/tree-checkbox-select';
 export * from './components/breadcrumb/z2-breadcrumb';
+export * from './components/radio/z2-radio';
 export * from './components/assets/icons';
 export * from './lib/theme.hook';
 export * from './lib/utils';