@ztwoint/z-ui 0.1.47 → 0.1.50

package/dist/components/select/z2-select.js

@@ -1,105 +1,161 @@
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-select";
-import { ChevronDownIcon as n, ChevronUpIcon as d } from "lucide-react";
-import { cn as c } from "../../lib/utils.js";
+import * as a from "@radix-ui/react-select";
+import { ChevronDownIcon as i, ChevronUpIcon as d } from "lucide-react";
+import { cn as l } from "../../lib/utils.js";
 import u from "../assets/icons/circle-check-filled.js";
-function N({ ...e }) {
-  return /* @__PURE__ */ t(r.Root, { "data-slot": "select", ...e });
+function h({ ...e }) {
+  return /* @__PURE__ */ t(a.Root, { "data-slot": "select", ...e });
 }
-function x({
+function b({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Group,
+    a.Group,
     {
       "data-slot": "select-group",
-      className: c("z2-select-group", e),
-      ...l
+      className: l(
+        // layout
+        "flex w-full flex-col items-start gap-1 relative rounded-none",
+        e
+      ),
+      ...s
     }
   );
 }
-function S({
+function g({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Value,
+    a.Value,
     {
       "data-slot": "select-value",
-      className: c(e, "z2-select-value"),
-      ...l
+      className: l(
+        // layout + text alignment
+        "w-full self-center items-start text-left flex gap-1",
+        e
+      ),
+      ...s
     }
   );
 }
-function g({
+function w({
   className: e,
-  size: l = "default",
-  children: s,
-  ...a
+  size: s = "default",
+  children: r,
+  ...n
 }) {
   return /* @__PURE__ */ o(
-    r.Trigger,
+    a.Trigger,
     {
       "data-slot": "select-trigger",
-      "data-size": l,
-      className: c("z2-select-trigger", e),
-      ...a,
+      "data-size": s,
+      className: l(
+        // base layout
+        "h-7.5 flex items-center justify-center w-full self-stretch transition-all cursor-pointer",
+        "gap-[6px] p-2 rounded-md",
+        // size variants
+        "data-[size=sm]:gap-1 data-[size=sm]:p-[6px]",
+        "data-[size=sm]:h-6.5",
+        //text
+        "leading-none-medium-sm text-text-neutral-primary",
+        "hover:text-text-neutral-secondary",
+        "focus:text-text-neutral-secondary",
+        "data-[state=open]:text-text-neutral-secondary",
+        "data-[disabled]:text-text-neutral-muted",
+        // focus reset
+        "focus:outline-none outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring-default",
+        // surface + stroke (default)
+        "bg-input-surface-default box-shadow-button-default",
+        // hover
+        "hover:bg-input-surface-hover",
+        "hover:box-shadow-button-default-hover",
+        // focus
+        "focus:bg-input-surface-pressed",
+        "focus:box-shadow-button-default-pressed",
+        // open
+        "data-[state=open]:bg-input-surface-pressed",
+        "data-[state=open]:box-shadow-button-default-pressed",
+        // disabled
+        "data-[disabled]:bg-input-surface-disabled data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
+        e
+      ),
+      ...n,
       children: [
-        s,
-        /* @__PURE__ */ t(r.Icon, { asChild: !0, children: /* @__PURE__ */ t(n, { className: "z2-trigger-icon" }) })
+        r,
+        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(i, { className: "shrink-0 w-[14px] h-[14px] aspect-square text-text-neutral-muted" }) })
       ]
     }
   );
 }
-function z({
+function v({
   className: e,
-  children: l,
-  position: s = "popper",
-  ...a
+  children: s,
+  position: r = "popper",
+  ...n
 }) {
-  return /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(
-    r.Content,
+  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ t(
+    a.Content,
     {
       "data-slot": "select-content",
-      className: c("z2-select-content", e),
+      className: l(
+        "min-w-[var(--radix-select-trigger-width)] flex flex-col items-start p-1 rounded-xl",
+        // background stack (overlay on top + base)
+        "bg-dropdown-surface",
+        // elevation + hairline stroke
+        "box-shadow-medium-10",
+        e
+      ),
       sideOffset: 10,
-      position: s,
-      ...a,
-      children: /* @__PURE__ */ t(r.Viewport, { className: "!w-full ", children: l })
+      position: r,
+      ...n,
+      children: /* @__PURE__ */ t(a.Viewport, { className: "!w-full ", children: s })
     }
   ) });
 }
-function Z({
+function N({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Label,
+    a.Label,
     {
       "data-slot": "select-label",
-      className: c("z2-select-label", e),
-      ...l
+      className: l(
+        "flex items-center gap-1 self-stretch text-text-neutral-secondary",
+        "px-2 pt-2 pb-1",
+        "leading-none-medium-sm",
+        e
+      ),
+      ...s
     }
   );
 }
-function b({ className: e, children: l, leftIcon: s, label: a, ...i }) {
+function S({ className: e, children: s, leftIcon: r, label: n, ...c }) {
   return /* @__PURE__ */ o(
-    r.Item,
+    a.Item,
     {
       "data-slot": "select-item",
-      className: c("z2-select-item", e),
-      ...i,
+      className: l(
+        "border-none w-full relative self-stretch flex items-center justify-between gap-2 cursor-pointer outline-none rounded-md",
+        "data-[disabled]:pointer-events-none",
+        "p-2",
+        // hover/active surface
+        "data-[state=active]:surface-neutral-focused hover:surface-neutral-focused",
+        e
+      ),
+      ...c,
       children: [
-        /* @__PURE__ */ t(r.ItemText, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "z2-select-item-text", children: [
-          s && /* @__PURE__ */ t("div", { className: "flex w-[14px] h-[14px] items-center justify-center", children: s }),
-          /* @__PURE__ */ t("div", { className: "flex-1 overflow-hidden text-ellipsis text-[14px] font-[450] leading-[100%] tracking-[-0.2px] ", children: l || a })
+        /* @__PURE__ */ t(a.ItemText, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "flex items-center justify-center gap-2 flex-1 overflow-hidden text-ellipsis leading-none-medium-sm", children: [
+          r && /* @__PURE__ */ t("div", { className: "flex w-3.5 h-3.5 items-center justify-center", children: r }),
+          /* @__PURE__ */ t("div", { className: "flex-1 overflow-hidden text-ellipsis leading-none-medium-sm", children: s || n })
         ] }) }),
         /* @__PURE__ */ t(
-          r.ItemIndicator,
+          a.ItemIndicator,
           {
             "data-slot": "select-item-indicator",
-            className: "z2-select-item-indicator",
+            className: "flex w-[14px] h-[14px] items-center justify-center",
             children: /* @__PURE__ */ t(u, { className: "w-4 h-4" })
           }
         )
@@ -107,59 +163,56 @@ function b({ className: e, children: l, leftIcon: s, label: a, ...i }) {
     }
   );
 }
-function v({
+function y({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.Separator,
+    a.Separator,
     {
       "data-slot": "select-separator",
-      className: c(
-        "border-t-[0.5px] border-solid border-[color(display-p3_0.9059_0.9059_0.9059)] my-0 -mx-1",
-        e
-      ),
-      ...l
+      className: l("border-t-[1px] border-solid border-stroke-solid-light my-1 mx-1", e),
+      ...s
     }
   );
 }
-function w({
+function Z({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.ScrollUpButton,
+    a.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: c("flex cursor-default items-center justify-center py-1", e),
-      ...l,
+      className: l("flex cursor-default items-center justify-center py-1", e),
+      ...s,
       children: /* @__PURE__ */ t(d, { className: "size-4" })
     }
   );
 }
-function C({
+function j({
   className: e,
-  ...l
+  ...s
 }) {
   return /* @__PURE__ */ t(
-    r.ScrollDownButton,
+    a.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: c("flex cursor-default items-center justify-center py-1", e),
-      ...l,
-      children: /* @__PURE__ */ t(n, { className: "size-4" })
+      className: l("flex cursor-default items-center justify-center py-1", e),
+      ...s,
+      children: /* @__PURE__ */ t(i, { className: "size-4" })
     }
   );
 }
 export {
-  N as Z2Select,
-  z as Z2SelectContent,
-  x as Z2SelectGroup,
-  b as Z2SelectItem,
-  Z as Z2SelectLabel,
-  C as Z2SelectScrollDownButton,
-  w as Z2SelectScrollUpButton,
-  v as Z2SelectSeparator,
-  g as Z2SelectTrigger,
-  S as Z2SelectValue
+  h as Z2Select,
+  v as Z2SelectContent,
+  b as Z2SelectGroup,
+  S as Z2SelectItem,
+  N as Z2SelectLabel,
+  j as Z2SelectScrollDownButton,
+  Z as Z2SelectScrollUpButton,
+  y as Z2SelectSeparator,
+  w as Z2SelectTrigger,
+  g as Z2SelectValue
 };

package/dist/components/table/components/table-filter/close-filter-confirm/filter-confirmation-dialog.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface FilterConfirmationDialogProps {
+    onClose: () => void;
+    onKeepChanges: () => void;
+    onRevertChanges: () => void;
+    onApplyChanges: () => void;
+    hasUnsavedChanges: boolean;
+}
+export declare const FilterConfirmationDialog: React.FC<FilterConfirmationDialogProps>;
+export {};

package/dist/components/table/components/table-filter/close-filter-confirm/filter-confirmation-dialog.js

@@ -0,0 +1,33 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { Button as l } from "../../../../button/button.js";
+import { Z2Dialog as s, Z2DialogContent as d, Z2DialogHeader as h, Z2DialogTitle as c, Z2DialogDescription as g, Z2DialogFooter as m } from "../../../../dialog/dialog.js";
+const v = ({
+  onClose: r,
+  onKeepChanges: i,
+  onRevertChanges: o,
+  onApplyChanges: a,
+  hasUnsavedChanges: t
+}) => t ? /* @__PURE__ */ e(s, { open: !0, onOpenChange: r, children: /* @__PURE__ */ n(d, { className: "max-w-md p-4 rounded-2xl", children: [
+  /* @__PURE__ */ n(h, { children: [
+    /* @__PURE__ */ n("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ e(c, { children: "Unsaved Filter Changes" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          "aria-label": "Close",
+          className: "ml-4 p-2 text-xl leading-none font-bold bg-transparent border-none shadow-none hover:bg-gray-100 min-w-0 min-h-0",
+          onClick: i,
+          children: "×"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(g, { children: "You have unsaved filter changes. Would you like to keep these changes or revert to the previous state?" })
+  ] }),
+  /* @__PURE__ */ n(m, { children: [
+    /* @__PURE__ */ e(l, { onClick: o, variant: "stroke", shade: "danger", size: "small", children: "Discard" }),
+    /* @__PURE__ */ e(l, { onClick: a, variant: "filled", shade: "brand", size: "small", children: "Apply Changes" })
+  ] })
+] }) }) : null;
+export {
+  v as FilterConfirmationDialog
+};

package/dist/components/table/components/table-filter/close-filter-confirm/filter-confirmation-dialog.utils.d.ts

@@ -0,0 +1,13 @@
+import { FilterRule } from '../../../table.type';
+/**
+ * Compares two filter arrays to determine if they are different
+ */
+export declare const areFiltersEqual: (filters1: FilterRule[], filters2: FilterRule[]) => boolean;
+/**
+ * Checks if there are unsaved changes by comparing temporary filters with applied filters
+ */
+export declare const hasUnsavedFilterChanges: (tempFilters: FilterRule[], appliedFilters: FilterRule[]) => boolean;
+/**
+ * Checks if there are unsaved changes for a specific column filter
+ */
+export declare const hasUnsavedFilterChangesForColumn: (columnName: string, tempFilters: FilterRule[], appliedFilters: FilterRule[]) => boolean;

package/dist/components/table/components/table-filter/close-filter-confirm/filter-confirmation-dialog.utils.js

@@ -0,0 +1,20 @@
+const v = (l, n) => {
+  if (l.length !== n.length)
+    return !1;
+  const u = [...l].sort((e, t) => e.field.localeCompare(t.field)), r = [...n].sort((e, t) => e.field.localeCompare(t.field));
+  return u.every((e, t) => {
+    const a = r[t];
+    return e.field !== a.field || e.condition !== a.condition ? !1 : Array.isArray(e.value) && Array.isArray(a.value) ? e.value.length !== a.value.length ? !1 : e.value.every((i, s) => i === a.value[s]) : Array.isArray(e.value) || Array.isArray(a.value) ? !1 : e.value === a.value;
+  });
+}, o = (l, n) => {
+  const u = l.filter((r) => Array.isArray(r.value) ? r.value.length > 0 : r.value !== "");
+  return !v(u, n);
+}, f = (l, n, u) => {
+  const r = n.find((a) => a.field === l), e = u.find((a) => a.field === l);
+  return !r || !(Array.isArray(r.value) ? r.value.length > 0 : r.value !== "") ? !1 : !e || r.condition !== e.condition ? !0 : Array.isArray(r.value) && Array.isArray(e.value) ? r.value.length !== e.value.length ? !0 : !r.value.every((a, i) => a === e.value[i]) : Array.isArray(r.value) || Array.isArray(e.value) ? !0 : r.value !== e.value;
+};
+export {
+  v as areFiltersEqual,
+  o as hasUnsavedFilterChanges,
+  f as hasUnsavedFilterChangesForColumn
+};

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

@@ -1,113 +1,134 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as x from "react";
-import { Button as d } from "../../../button/button.js";
-import { useTableFilterContext as z } from "./table-filter.context.js";
-import S from "./filters/text.js";
-import B from "./filters/boolean.js";
-import D from "./filters/number/number.js";
-import I from "./filters/checkbox.js";
-import R from "../../../assets/icons/circle-check-filled.js";
-import { SelectedFiltersDisplay as P } from "./selected-filters-display/selected-filters-display.js";
-import { useClickOutside as V } from "../../../../hooks/useClickOutside.js";
-import { createFilterDisplayItems as q, calculateTotalCount as E } from "./selected-filters-display/selected-filters-display.utils.js";
-const Z = () => {
-  const [m, o] = x.useState(!1), p = x.useRef(null), {
+import * as h from "react";
+import { Button as u } from "../../../button/button.js";
+import { useTableFilterContext as P } from "./table-filter.context.js";
+import U from "./filters/text.js";
+import V from "./filters/boolean.js";
+import q from "./filters/number/number.js";
+import E from "./filters/checkbox.js";
+import G from "../../../assets/icons/circle-check-filled.js";
+import { SelectedFiltersDisplay as H } from "./selected-filters-display/selected-filters-display.js";
+import { useClickOutside as J } from "../../../../hooks/useClickOutside.js";
+import { createFilterDisplayItems as L, calculateTotalCount as M } from "./selected-filters-display/selected-filters-display.utils.js";
+import { FilterConfirmationDialog as Q } from "./close-filter-confirm/filter-confirmation-dialog.js";
+import { hasUnsavedFilterChanges as y } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+const ie = () => {
+  const [i, o] = h.useState(!1), [C, a] = h.useState(!1), x = h.useRef(null), {
     selectedColumn: r,
-    setSelectedColumn: b,
-    getFilterForColumn: y,
-    hasFilterForColumn: v,
-    updateColumnFilter: F,
-    clearAllFilters: k,
-    applyFilters: N,
-    hasActiveFilters: i,
-    filterableFields: g,
-    tempFilters: u,
-    schema: a,
-    filter: C,
-    filterComponents: n = {}
-  } = z();
-  V(p, () => o(!1));
-  const w = () => {
-    N(), o(!1);
-  }, T = q(u, a), f = E(T), j = () => {
+    setSelectedColumn: F,
+    getFilterForColumn: k,
+    hasFilterForColumn: N,
+    updateColumnFilter: w,
+    clearAllFilters: T,
+    resetToAppliedFilters: A,
+    applyFilters: D,
+    hasActiveFilters: c,
+    filterableFields: j,
+    tempFilters: n,
+    schema: m,
+    filter: d,
+    filterComponents: p = {}
+  } = P();
+  J(x, () => {
+    y(n, d.value) && i ? a(!0) : o(!1);
+  });
+  const v = () => {
+    D(), o(!1);
+  }, S = () => {
+    a(!1), o(!1);
+  }, O = () => {
+    A(), a(!1), o(!1);
+  }, R = () => {
+    a(!1);
+  }, $ = L(n, m), b = M($), z = () => {
     if (!r) return null;
-    const e = a.find((c) => c.key === r), A = {
-      boolean: B,
-      text: S,
-      number: D,
-      checkbox: I
-    }, h = (e == null ? void 0 : e.cellType) && (n == null ? void 0 : n[e.cellType]) || A[(e == null ? void 0 : e.cellType) ?? "text"];
-    if (!h)
+    const e = m.find((f) => f.key === r), B = {
+      boolean: V,
+      text: U,
+      number: q,
+      checkbox: E
+    }, g = (e == null ? void 0 : e.cellType) && (p == null ? void 0 : p[e.cellType]) || B[(e == null ? void 0 : e.cellType) ?? "text"];
+    if (!g)
       return console.warn(
         `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
       ), null;
-    const s = y(r), O = {
+    const s = k(r), I = {
       condition: (s == null ? void 0 : s.condition) || "",
       value: (s == null ? void 0 : s.value) || ""
     };
     return /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t(
-      h,
+      g,
       {
-        value: O,
-        onChange: ({ condition: c, value: $ }) => F(r, c, $),
+        value: I,
+        onChange: ({ condition: f, value: K }) => w(r, f, K),
         filterOptions: e == null ? void 0 : e.filterOptions
       }
     ) }) }) });
   };
-  return /* @__PURE__ */ l("div", { className: "relative", ref: p, children: [
+  return /* @__PURE__ */ l("div", { className: "relative", ref: x, children: [
     /* @__PURE__ */ l(
-      d,
+      u,
       {
         onClick: (e) => {
-          e.stopPropagation(), o(!m);
+          e.stopPropagation(), o(!i);
         },
-        variant: i ? "filled" : "stroke",
-        shade: i ? "brand" : "neutral",
+        variant: c ? "filled" : "stroke",
+        shade: c ? "brand" : "neutral",
         size: "small",
         children: [
           "Filter ",
-          i && `(${C.value.length})`
+          c && `(${d.value.length})`
         ]
       }
     ),
-    m && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
+    i && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
       /* @__PURE__ */ l("div", { className: "flex min-h-[442px]", children: [
         /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5", children: [
           /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
-          g.map((e) => /* @__PURE__ */ l(
+          j.map((e) => /* @__PURE__ */ l(
             "button",
             {
-              onClick: () => b(e.key),
+              onClick: () => F(e.key),
               className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors rounded-lg ${r === e.key ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
               children: [
                 /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                v(e.key) && /* @__PURE__ */ t(R, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                N(e.key) && /* @__PURE__ */ t(G, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
               ]
             },
             e.key
           ))
         ] }),
-        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? j() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? z() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
       ] }),
-      !!f && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[71px]", children: [
-        /* @__PURE__ */ t(P, { selectedFilters: u, schema: a }),
+      !!b && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[71px]", children: [
+        /* @__PURE__ */ t(H, { selectedFilters: n, schema: m }),
         /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ t(d, { onClick: k, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          /* @__PURE__ */ t(u, { onClick: T, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
           /* @__PURE__ */ t(
-            d,
+            u,
             {
-              onClick: w,
+              onClick: v,
               variant: "filled",
               shade: "neutral",
               size: "small",
-              children: `Apply ${f || ""}`
+              children: `Apply ${b || ""}`
             }
           )
         ] })
       ] })
-    ] })
+    ] }),
+    C && /* @__PURE__ */ t(
+      Q,
+      {
+        onClose: R,
+        onKeepChanges: S,
+        onRevertChanges: O,
+        onApplyChanges: v,
+        hasUnsavedChanges: y(n, d.value)
+      }
+    )
   ] });
 };
 export {
-  Z as TableFilterButton
+  ie as TableFilterButton
 };