@ztwoint/z-ui 0.1.46 → 0.1.49

package/dist/components/table/components/table-cell.js

@@ -1,46 +1,55 @@
-import { jsx as l } from "react/jsx-runtime";
-import { TABLE_CSS_CLASSES as r } from "../table.const.js";
-import { TextCell as m } from "./cell/text-cell.js";
-import { NumberCell as h } from "./cell/number-cell.js";
-import { BooleanCell as b } from "./cell/boolean-cell.js";
+import { jsx as t } from "react/jsx-runtime";
+import { TABLE_CSS_CLASSES as s } from "../table.const.js";
+import { NumberCell as S } from "./cell/number-cell.js";
+import { BooleanCell as C } from "./cell/boolean-cell.js";
+import { LinkCell as d } from "./cell/link-cell.js";
+import { DescriptionCell as h } from "./cell/description-cell.js";
+import { AvatarCell as u } from "./cell/avatar-cell.js";
+import { LabelCell as c } from "./cell/label-cell.js";
 import "react";
-import { cn as S } from "../../../lib/utils.js";
-const E = ({
-  value: t,
-  cellType: n,
-  cellRenderer: f,
+import { cn as B } from "../../../lib/utils.js";
+const T = ({
+  value: o,
+  cellType: m,
+  cellRenderer: n,
   record: i,
-  index: C,
+  index: a,
   customCells: e,
-  cell: s
+  cell: b
 }) => {
-  const p = {
-    text: m,
-    number: h,
-    boolean: b,
-    checkbox: m
-  }, a = e == null ? void 0 : e[n];
-  let o;
-  if (f)
-    o = f({ value: t, record: i, index: C });
-  else if (a)
-    o = /* @__PURE__ */ l(a, { value: t, record: i, index: C });
+  const A = {
+    text: c,
+    number: S,
+    boolean: C,
+    checkbox: C,
+    link: d,
+    avatar: u,
+    label: c
+  }, f = e == null ? void 0 : e[m];
+  let r;
+  if (n)
+    r = n({ value: o, record: i, index: a });
+  else if (f)
+    r = /* @__PURE__ */ t(f, { value: o, record: i, index: a });
   else {
-    const c = p[n] ?? m;
-    o = /* @__PURE__ */ l(c, { value: t });
+    const l = A[m] ?? h;
+    if (typeof o == "object" && o !== null && !Array.isArray(o)) {
+      const p = o, L = { value: p.value ?? "", ...p };
+      r = /* @__PURE__ */ t(l, { ...L });
+    } else
+      r = /* @__PURE__ */ t(l, { value: o ?? "" });
   }
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ t(
     "td",
     {
-      className: S(
-        r.cell.default,
-        r.cell.cellHeight[s.cellHeight],
-        r.cell.hasBorder[s.hasBorder ? "true" : "false"]
+      className: B(
+        s.cell.default,
+        s.cell.hasBorder[b.hasBorder ? "true" : "false"]
       ),
-      children: o
+      children: r
     }
   );
 };
 export {
-  E as TableCell
+  T as TableCell
 };

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/filters/boolean.js

@@ -1,63 +1,71 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { useEffect as i } from "react";
-const c = ["equals", "notEqual"], m = ({ value: r, onChange: l }) => {
-  i(() => {
-    r.condition || l({ condition: c[0] });
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useEffect as n } from "react";
+const d = ["equals", "notEqual"], u = ({ value: t, onChange: s }) => {
+  n(() => {
+    t.condition || s({ condition: d[0] });
   }, []);
-  const s = (e, u) => {
-    l(u ? { value: e } : { value: "" });
-  }, n = (e) => {
-    switch (e) {
-      case "equals":
-        return "Equals";
-      case "notEqual":
-        return "Not equal to";
-      default:
-        return e;
-    }
+  const i = (r, a) => {
+    s(a ? { value: r } : { value: "" });
   };
-  return /* @__PURE__ */ t("div", { className: "flex flex-col", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2 p-3", children: [
-    /* @__PURE__ */ a("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ a("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-        /* @__PURE__ */ t(
+  return /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ l("div", { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ l("label", { className: "flex items-center p-3 rounded-lg border border-stroke-solid-light hover:border-stroke-solid-medium hover:bg-gray-50 transition-all duration-200 cursor-pointer group", children: [
+      /* @__PURE__ */ l("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
-            checked: r.value === "true",
-            onChange: (e) => s("true", e.target.checked),
-            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+            checked: t.value === "true",
+            onChange: (r) => i("true", r.target.checked),
+            className: "w-5 h-5 rounded border-2 border-stroke-solid-medium text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
           }
         ),
-        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: "True" })
+        t.value === "true" && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+          }
+        ) }) })
       ] }),
-      /* @__PURE__ */ a("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-        /* @__PURE__ */ t(
+      /* @__PURE__ */ l("div", { className: "ml-3 flex-1", children: [
+        /* @__PURE__ */ l("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-text-neutral-primary", children: "True" }),
+          t.value === "true" && /* @__PURE__ */ e("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800", children: "Selected" })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with true values" })
+      ] })
+    ] }),
+    /* @__PURE__ */ l("label", { className: "flex items-center p-3 rounded-lg border border-stroke-solid-light hover:border-stroke-solid-medium hover:bg-gray-50 transition-all duration-200 cursor-pointer group", children: [
+      /* @__PURE__ */ l("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
           "input",
           {
             type: "checkbox",
-            checked: r.value === "false",
-            onChange: (e) => s("false", e.target.checked),
-            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+            checked: t.value === "false",
+            onChange: (r) => i("false", r.target.checked),
+            className: "w-5 h-5 rounded border-2 border-stroke-solid-medium text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
           }
         ),
-        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: "False" })
+        t.value === "false" && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ l("div", { className: "ml-3 flex-1", children: [
+        /* @__PURE__ */ l("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-text-neutral-primary", children: "False" }),
+          t.value === "false" && /* @__PURE__ */ e("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800", children: "Selected" })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "text-xs text-text-neutral-secondary mt-0.5", children: "Include records with false values" })
       ] })
-    ] }),
-    /* @__PURE__ */ t(
-      "select",
-      {
-        value: r.condition,
-        onChange: (e) => l({ condition: e.target.value }),
-        className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm mb-3",
-        children: c.map((e) => /* @__PURE__ */ t("option", { value: e, children: n(e) }, e))
-      }
-    ),
-    r.value && /* @__PURE__ */ a("div", { className: "mt-3 p-2 bg-surface-neutral-muted rounded text-sm", children: [
-      /* @__PURE__ */ t("div", { className: "text-text-neutral-muted mb-1", children: "Selected:" }),
-      /* @__PURE__ */ t("div", { className: "text-text-neutral-primary", children: r.value === "true" ? "True" : "False" })
     ] })
   ] }) });
 };
 export {
-  m as default
+  u as default
 };

package/dist/components/table/components/table-filter/selected-filters-display/selected-filters-display.utils.js

@@ -1,26 +1,26 @@
-const a = (r, n) => {
-  if (!(!n || n.length === 0))
-    if (Array.isArray(r.value)) {
-      const t = n.filter(
-        (u) => r.value.includes(u.value)
-      ).reduce((u, o) => u + (o.total || 0), 0);
-      return t > 0 ? t : void 0;
-    } else {
-      const e = n.find((t) => t.value === r.value);
-      return e == null ? void 0 : e.total;
-    }
-}, l = (r, n) => r.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "").map((e) => {
-  const t = n.find((o) => o.key === e.field), u = a(e, t == null ? void 0 : t.filterOptions);
+const o = (n, u) => {
+  if (!u || u.length === 0) return n.value !== "" ? 1 : 0;
+  if (Array.isArray(n.value)) {
+    const t = u.filter(
+      (r) => n.value.includes(r.value)
+    ).reduce((r, a) => r + (a.total || 0), 0);
+    return t > 0 ? t : void 0;
+  } else {
+    const e = u.find((t) => t.value === n.value);
+    return e == null ? void 0 : e.total;
+  }
+}, l = (n, u) => n.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "").map((e) => {
+  const t = u.find((a) => a.key === e.field), r = o(e, t == null ? void 0 : t.filterOptions);
   return {
     field: e.field,
     fieldTitle: (t == null ? void 0 : t.title) || e.field,
     value: e.value,
     condition: e.condition,
-    count: u
+    count: r
   };
-}), c = (r) => r.reduce((n, e) => n + (e.count || 0), 0);
+}), c = (n) => n.reduce((u, e) => u + (e.count || 1), 0);
 export {
   c as calculateTotalCount,
   l as createFilterDisplayItems,
-  a as getFilterCount
+  o as getFilterCount
 };

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

@@ -1,103 +1,134 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as f from "react";
-import { Button as c } from "../../../button/button.js";
-import { useTableFilterContext as O } from "./table-filter.context.js";
-import z from "./filters/text.js";
-import S from "./filters/boolean.js";
-import $ from "./filters/number/number.js";
-import B 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 D } from "../../../../hooks/useClickOutside.js";
-const Q = () => {
-  const [d, o] = f.useState(!1), m = f.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: h,
-    getFilterForColumn: x,
-    hasFilterForColumn: b,
-    updateColumnFilter: v,
-    clearAllFilters: y,
-    applyFilters: F,
-    hasActiveFilters: i,
-    filterableFields: k,
-    tempFilters: N,
-    schema: p,
-    filter: g,
-    filterComponents: n = {}
-  } = O();
-  D(m, () => o(!1));
-  const w = () => {
-    F(), o(!1);
-  }, C = () => {
+    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 = p.find((a) => a.key === r), T = {
-      boolean: S,
-      text: z,
-      number: $,
-      checkbox: B
-    }, u = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || T[(e == null ? void 0 : e.cellType) || "text"];
-    if (!u)
+    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 = x(r), j = {
+    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(
-      u,
+      g,
       {
-        value: j,
-        onChange: ({ condition: a, value: A }) => v(r, a, A),
+        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: m, children: [
+  return /* @__PURE__ */ l("div", { className: "relative", ref: x, children: [
     /* @__PURE__ */ l(
-      c,
+      u,
       {
         onClick: (e) => {
-          e.stopPropagation(), o(!d);
+          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 && `(${g.value.length})`
+          c && `(${d.value.length})`
         ]
       }
     ),
-    d && /* @__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" }) }),
-          k.map((e) => /* @__PURE__ */ l(
+          j.map((e) => /* @__PURE__ */ l(
             "button",
             {
-              onClick: () => h(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 }),
-                b(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 ? C() : /* @__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" }) })
       ] }),
-      /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium", children: [
-        /* @__PURE__ */ t(P, { selectedFilters: N, schema: p }),
+      !!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(c, { onClick: y, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-          /* @__PURE__ */ t(c, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+          /* @__PURE__ */ t(u, { onClick: T, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          /* @__PURE__ */ t(
+            u,
+            {
+              onClick: v,
+              variant: "filled",
+              shade: "neutral",
+              size: "small",
+              children: `Apply ${b || ""}`
+            }
+          )
         ] })
       ] })
-    ] })
+    ] }),
+    C && /* @__PURE__ */ t(
+      Q,
+      {
+        onClose: R,
+        onKeepChanges: S,
+        onRevertChanges: O,
+        onApplyChanges: v,
+        hasUnsavedChanges: y(n, d.value)
+      }
+    )
   ] });
 };
 export {
-  Q as TableFilterButton
+  ie as TableFilterButton
 };