@ztwoint/z-ui 0.1.77 → 0.1.78

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

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { Table as r } from "../table/table-provider.js";
 import "react";
 import { cn as d } from "../../lib/utils.js";
@@ -31,7 +31,7 @@ import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
 import { Filter as p } from "../table-filter/index.js";
-import q from "../assets/icons/octagon-warning-Copy.js";
+import S from "../assets/icons/octagon-warning-Copy.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
@@ -39,16 +39,16 @@ import "react-dom";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
 import "../table/table.context.js";
-const we = ({
-  dataSource: f,
+const fe = ({
+  dataSource: w,
   schema: B,
-  loading: H,
-  emptyMessage: k,
-  className: T,
+  loading: b,
+  emptyMessage: H,
+  className: j,
   rounded: i = !0,
   bordered: n = !0,
-  showHeader: P = !0,
-  headerClassName: _,
+  showHeader: g = !0,
+  headerClassName: k,
   search: m,
   filter: t,
   headerLeftContent: h,
@@ -58,40 +58,38 @@ const we = ({
     className: "",
     stickyHeader: !0
   },
-  showFooter: g = !0,
-  footerClassName: j,
+  showFooter: P = !0,
+  footerClassName: T,
   pagination: o,
   paginationInfo: c,
-  paginationQuickJumper: s,
+  paginationQuickJumper: a,
   error: x = !1,
-  dataSourceError: R = !1,
-  freeze: S = !1
+  dataSourceError: _ = !1
 }) => {
-  var F;
+  var f;
   if (x)
-    return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ e(q, { className: "mt-1.5" }),
-      /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(S, { className: "mt-1.5" }),
+      /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ e("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
         /* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again later" }),
         typeof x == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: x })
       ] })
     ] }) });
-  const C = s && s.totalPage && s.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!c || C, v = m || t || h || u, b = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
-  return /* @__PURE__ */ a("div", { className: d("flex flex-col overflow-hidden relative", T), children: [
-    S && /* @__PURE__ */ e("div", { className: "absolute top-0 inset-0 w-full h-full cursor-not-allowed bg-white/50" }),
-    /* @__PURE__ */ a(r, { dataSource: f, schema: B, loading: H, emptyMessage: k, children: [
-      P && v && /* @__PURE__ */ a(
+  const N = a && a.totalPage && a.totalPage >= 2, v = o && o.totalPage && o.totalPage >= 2 || !!c || N, C = m || t || h || u, R = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
+  return /* @__PURE__ */ s("div", { className: d("flex flex-col overflow-hidden relative", j), children: [
+    /* @__PURE__ */ s(r, { dataSource: w, schema: B, emptyMessage: H, children: [
+      g && C && /* @__PURE__ */ s(
         r.Header,
         {
           className: d(
             "flex-shrink-0",
             n && "border-stroke-solid-medium border-1 border-b-0",
             i && "rounded-t-xl",
-            _
+            k
           ),
           children: [
-            /* @__PURE__ */ a(r.HeaderContent, { children: [
+            /* @__PURE__ */ s(r.HeaderContent, { children: [
               h && h,
               m && /* @__PURE__ */ e(
                 r.Search,
@@ -105,7 +103,7 @@ const we = ({
                   className: m.className
                 }
               ),
-              t && /* @__PURE__ */ a(
+              t && /* @__PURE__ */ s(
                 p,
                 {
                   filterSchema: t.filterSchema,
@@ -115,8 +113,8 @@ const we = ({
                     })
                   },
                   children: [
-                    b && /* @__PURE__ */ e(p.FilterButton, {}),
-                    (F = t == null ? void 0 : t.quickFilters) == null ? void 0 : F.map((w) => /* @__PURE__ */ e(p.FilterColumnButton, { filterName: w }, w))
+                    R && /* @__PURE__ */ e(p.FilterButton, {}),
+                    (f = t == null ? void 0 : t.quickFilters) == null ? void 0 : f.map((F) => /* @__PURE__ */ e(p.FilterColumnButton, { filterName: F }, F))
                   ]
                 }
               )
@@ -128,14 +126,14 @@ const we = ({
       /* @__PURE__ */ e(
         r.Body,
         {
-          dataSourceError: R,
+          dataSourceError: _,
           cell: l == null ? void 0 : l.cell,
           sort: l == null ? void 0 : l.sort,
           className: d(
             "flex-1 min-h-0",
             n && "border-stroke-solid-light border-1",
-            i && !(P && v) && "rounded-t-xl",
-            i && !(g && N) && "rounded-b-xl",
+            i && !(g && C) && "rounded-t-xl",
+            i && !(P && v) && "rounded-b-xl",
             n && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
             n && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
             l == null ? void 0 : l.className
@@ -143,14 +141,14 @@ const we = ({
           stickyHeader: l == null ? void 0 : l.stickyHeader
         }
       ),
-      g && N && /* @__PURE__ */ a(
+      P && v && /* @__PURE__ */ s(
         r.Footer,
         {
           className: d(
             "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
             n && "border",
             i && "rounded-b-xl",
-            j
+            T
           ),
           children: [
             c ? /* @__PURE__ */ e(r.FooterContent, { children: /* @__PURE__ */ e(
@@ -161,16 +159,16 @@ const we = ({
                 currentPage: c.currentPage,
                 itemsPerPage: c.itemsPerPage
               }
-            ) }) : s || o ? /* @__PURE__ */ e(r.FooterContent, { children: null }) : null,
-            (s || o) && /* @__PURE__ */ a(r.FooterContent, { children: [
-              C && /* @__PURE__ */ e(
+            ) }) : a || o ? /* @__PURE__ */ e(r.FooterContent, { children: null }) : null,
+            (a || o) && /* @__PURE__ */ s(r.FooterContent, { children: [
+              N && /* @__PURE__ */ e(
                 r.PaginationQuickJumper,
                 {
-                  currentPage: s.currentPage,
-                  totalPage: s.totalPage,
-                  onChange: s.onChange || (() => {
+                  currentPage: a.currentPage,
+                  totalPage: a.totalPage,
+                  onChange: a.onChange || (() => {
                   }),
-                  disabled: s.disabled
+                  disabled: a.disabled
                 }
               ),
               o && /* @__PURE__ */ e(
@@ -187,9 +185,13 @@ const we = ({
           ]
         }
       )
-    ] })
+    ] }),
+    b && /* @__PURE__ */ e("div", { className: "absolute top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
+      /* @__PURE__ */ e("p", { className: "text-text-neutral-primary font-medium", children: "Loading..." })
+    ] }) })
   ] });
 };
 export {
-  we as default
+  fe as default
 };

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

@@ -1,7 +1,7 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as y from "react";
+import * as F from "react";
 import * as m from "@radix-ui/react-popover";
-import { Button as u } from "../button/button.js";
+import { Button as x } from "../button/button.js";
 import { useTableFilterContext as H } from "./table-filter.context.js";
 import U from "./filters/text.js";
 import V from "./filters/boolean.js";
@@ -11,65 +11,65 @@ import G from "../assets/icons/circle-check-filled.js";
 import { SelectedFiltersDisplay as J } from "./selected-filters-display/selected-filters-display.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 C } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+import { hasUnsavedFilterChanges as N } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
 const ne = () => {
-  const [F, a] = y.useState(!1), [x, n] = y.useState(!1), {
+  const [w, a] = F.useState(!1), [g, n] = F.useState(!1), {
     selectedColumn: r,
-    setSelectedColumn: N,
-    getFilterForColumn: w,
-    hasFilterForColumn: k,
-    updateColumnFilter: K,
-    clearAllFilters: j,
-    resetToAppliedFilters: A,
-    applyFilters: D,
+    setSelectedColumn: k,
+    getFilterForColumn: K,
+    hasFilterForColumn: j,
+    updateColumnFilter: A,
+    clearAllFilters: D,
+    resetToAppliedFilters: O,
+    applyFilters: P,
     hasActiveFilters: d,
     tempFilters: i,
     filterSchema: c,
     filter: h,
     filterComponents: p = {}
-  } = H(), O = (e) => {
-    !e && x ? C(i, h.value) ? a(!0) : n(!1) : n(e);
-  }, g = () => {
-    D(), a(!1), n(!1);
-  }, P = () => {
-    a(!1), n(!1);
-  }, S = () => {
-    A(), a(!1), n(!1);
+  } = H(), S = (e) => {
+    !e && g ? N(i, h.value) ? a(!0) : n(!1) : n(e);
+  }, v = () => {
+    P(), a(!1), n(!1);
   }, T = () => {
+    a(!1), n(!1);
+  }, $ = () => {
+    O(), a(!1), n(!1);
+  }, R = () => {
     a(!1);
-  }, $ = C(i, h.value), R = L(i, c), z = M(R), B = () => {
+  }, b = N(i, h.value), z = L(i, c), f = M(z), B = () => {
     if (!r) return null;
-    const e = c.find((o) => o.filterKey === r), v = {
+    const e = c.find((o) => o.filterKey === r), y = {
       boolean: V,
       string: U,
       number: q,
       checkbox: E
-    }, b = (e == null ? void 0 : e.type) && (p == null ? void 0 : p[e.type]) || v[(e == null ? void 0 : e.type) ?? "string"];
-    if (!b)
+    }, C = (e == null ? void 0 : e.type) && (p == null ? void 0 : p[e.type]) || y[(e == null ? void 0 : e.type) ?? "string"];
+    if (!C)
       return console.warn(
         `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".`
       ), null;
-    const s = w(r), I = {
+    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 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
-      b,
+      C,
       {
         value: I,
-        onChange: ({ condition: o, value: f }) => K(r, o, f),
-        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, f]) => ({
+        onChange: ({ condition: o, value: u }) => A(r, o, u),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, u]) => ({
           label: o,
           value: o,
-          total: f
+          total: u
         })) : void 0
       },
       r
     ) }) });
   };
-  return /* @__PURE__ */ l(m.Root, { open: x, onOpenChange: O, children: [
+  return /* @__PURE__ */ l(m.Root, { open: g, onOpenChange: S, children: [
     /* @__PURE__ */ t(m.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
-      u,
+      x,
       {
         variant: d ? "filled" : "stroke",
         shade: d ? "brand" : "neutral",
@@ -93,11 +93,11 @@ const ne = () => {
               c.map((e) => /* @__PURE__ */ l(
                 "button",
                 {
-                  onClick: () => N(e.filterKey),
+                  onClick: () => k(e.filterKey),
                   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.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
                   children: [
                     /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                    k(e.filterKey) && /* @__PURE__ */ t(G, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                    j(e.filterKey) && /* @__PURE__ */ t(G, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
                   ]
                 },
                 e.filterKey
@@ -105,19 +105,19 @@ const ne = () => {
             ] }),
             /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? B() : /* @__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 min-h-[73px]", children: [
+          (!!f || b) && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
             /* @__PURE__ */ t(J, { selectedFilters: i, schema: c }),
             /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-              /* @__PURE__ */ t(u, { onClick: j, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-              /* @__PURE__ */ t(
-                u,
+              !!f && /* @__PURE__ */ t(x, { onClick: D, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+              !!b && /* @__PURE__ */ t(
+                x,
                 {
-                  onClick: g,
+                  onClick: v,
                   variant: "filled",
                   shade: "neutral",
                   size: "small",
                   className: "min-w-20",
-                  children: `Apply ${z || ""}`
+                  children: `Apply ${f || ""}`
                 }
               )
             ] })
@@ -125,13 +125,13 @@ const ne = () => {
         ]
       }
     ) }),
-    F && /* @__PURE__ */ t(
+    w && /* @__PURE__ */ t(
       Q,
       {
-        onClose: T,
-        onKeepChanges: P,
-        onRevertChanges: S,
-        onApplyChanges: g
+        onClose: R,
+        onKeepChanges: T,
+        onRevertChanges: $,
+        onApplyChanges: v
       }
     )
   ] });