@ztwoint/z-ui 0.1.79 → 0.1.80

package/dist/components/column-reorder/column-visibility-select.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface ColumnVisibilitySelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+export declare const ColumnVisibilitySelect: React.FC<ColumnVisibilitySelectProps>;
+export default ColumnVisibilitySelect;

package/dist/components/column-reorder/column-visibility.hook.d.ts

@@ -0,0 +1,24 @@
+import { ColumnType } from './column-reorder.type';
+export type ColumnVisibilityValue = string;
+export interface UseColumnVisibilityOptions {
+    /** Initial map of columnId -> visibility value */
+    initial?: Record<string, ColumnVisibilityValue>;
+    /** Default value to use when a column has no entry */
+    defaultValue?: ColumnVisibilityValue;
+}
+export interface UseColumnVisibilityResult {
+    /** Map of columnId -> visibility setting */
+    settings: Record<string, ColumnVisibilityValue>;
+    /** Read a column's visibility with default fallback */
+    get: (columnId: string) => ColumnVisibilityValue;
+    /** Update a column's visibility */
+    set: (columnId: string, value: ColumnVisibilityValue) => void;
+    /** Bulk set/reset settings (replaces entire state) */
+    setAll: (next: Record<string, ColumnVisibilityValue>) => void;
+}
+/**
+ * Manages per-column visibility settings with sensible defaults.
+ * Keeps UI concerns separate from state management.
+ */
+export declare function useColumnVisibility(columns: ColumnType[], options?: UseColumnVisibilityOptions): UseColumnVisibilityResult;
+export default useColumnVisibility;

package/dist/components/column-reorder/components/column-item/column-item.type.d.ts

@@ -1,4 +1,5 @@
 import { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { ReactNode } from 'react';
 import { ColumnType } from '../../column-reorder.type';
 export type ColumnItemState = {
     type: 'idle';
@@ -15,5 +16,5 @@ export interface ColumnItemProps {
     column: ColumnType;
     index: number;
     onRemove?: (columnId: string) => void;
-    renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => React.ReactNode;
+    renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => ReactNode;
 }

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

@@ -1,9 +1,10 @@
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { useState as i, useEffect as f } from "react";
-import { Virtuoso as y } from "react-virtuoso";
-import { MagnifierIcon as k } from "../../assets/icons/magnifier-icon.js";
+import { Virtuoso as k } from "react-virtuoso";
+import { MagnifierIcon as y } from "../../assets/icons/magnifier-icon.js";
 import S from "../../assets/icons/x.js";
-const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange: d, filterOptions: n = [] }) => {
+import { Z2Checkbox as w } from "../../checkbox/checkbox.js";
+const V = ["includesAny", "includesAll", "excludes"], I = ({ value: r, onChange: d, filterOptions: n = [] }) => {
   const [c, o] = i([]), [u, m] = i(""), [x, h] = i(n), p = (l) => {
     m(l.target.value);
     const e = n.filter(
@@ -12,23 +13,22 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
     h(e);
   };
   f(() => {
-    r.condition || d({ condition: w[0] });
+    r.condition || d({ condition: V[0] });
   }, []), f(() => {
     Array.isArray(r.value) ? o(r.value.filter(Boolean)) : o([]);
   }, [r.value]);
   const b = (l, e) => {
     let a;
-    e ? a = [...c, l] : a = c.filter((C) => C !== l), o(a), d({ value: a });
+    e ? a = [...c, l] : a = c.filter((g) => g !== l), o(a), d({ value: a });
   }, v = () => {
     m(""), h(n);
-  }, g = (l) => c.includes(l), N = (l, e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center py-2 px-3", children: [
+  }, C = (l) => c.includes(l), N = (l, e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center py-2 px-3", children: [
     /* @__PURE__ */ s("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
       /* @__PURE__ */ t(
-        "input",
+        w,
         {
-          type: "checkbox",
-          checked: g(e.value),
-          onChange: (a) => b(e.value, a.target.checked)
+          checked: C(e.value),
+          onCheckedChange: (a) => b(e.value, a === !0)
         }
       ),
       /* @__PURE__ */ t("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: e.label })
@@ -41,7 +41,7 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
   ] });
   return n.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm p-4", children: "No filter options available for this column" }) : /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ s("div", { className: "relative border-b border-stroke-solid-medium", children: [
-      /* @__PURE__ */ t(k, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+      /* @__PURE__ */ t(y, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
       /* @__PURE__ */ t(
         "input",
         {
@@ -54,7 +54,7 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
       u && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: v, children: /* @__PURE__ */ t(S, {}) })
     ] }),
     /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t(
-      y,
+      k,
       {
         data: x,
         itemContent: N,
@@ -66,5 +66,5 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
   ] });
 };
 export {
-  B as default
+  I as default
 };

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

@@ -8,7 +8,7 @@ const u = ({
   const l = d(r, s), n = o(l);
   return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2.5 max-w-md", children: [
     n > 0 && /* @__PURE__ */ e("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: [
-      n,
+      n.toLocaleString(),
       " total"
     ] }),
     /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2.5 max-w-md", children: l.map((t, c) => /* @__PURE__ */ e(m.Fragment, { children: [
@@ -17,7 +17,7 @@ const u = ({
         " ",
         t.count !== void 0 && /* @__PURE__ */ e(i, { children: [
           "[",
-          /* @__PURE__ */ a("span", { className: "text-text-neutral-secondary", children: t.count }),
+          /* @__PURE__ */ a("span", { className: "text-text-neutral-secondary", children: t.count.toLocaleString() }),
           "]"
         ] })
       ] }) }),

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

@@ -1,15 +1,15 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as F from "react";
-import * as m from "@radix-ui/react-popover";
+import * as d from "@radix-ui/react-popover";
 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";
-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 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 L from "./filters/text.js";
+import U from "./filters/boolean.js";
+import V from "./filters/number/number.js";
+import q from "./filters/checkbox.js";
+import E from "../assets/icons/circle-check-filled.js";
+import { SelectedFiltersDisplay as G } from "./selected-filters-display/selected-filters-display.js";
+import { createFilterDisplayItems as J, 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 N } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
 const ne = () => {
@@ -17,34 +17,34 @@ const ne = () => {
     selectedColumn: r,
     setSelectedColumn: k,
     getFilterForColumn: K,
-    hasFilterForColumn: j,
-    updateColumnFilter: A,
-    clearAllFilters: D,
-    resetToAppliedFilters: O,
-    applyFilters: P,
-    hasActiveFilters: d,
+    hasFilterForColumn: S,
+    updateColumnFilter: j,
+    clearAllFilters: A,
+    resetToAppliedFilters: D,
+    applyFilters: O,
+    hasActiveFilters: h,
     tempFilters: i,
     filterSchema: c,
-    filter: h,
-    filterComponents: p = {}
-  } = H(), S = (e) => {
-    !e && g ? N(i, h.value) ? a(!0) : n(!1) : n(e);
+    filter: p,
+    filterComponents: f = {}
+  } = H(), P = (e) => {
+    !e && g ? N(i, p.value) ? a(!0) : n(!1) : n(e);
   }, v = () => {
-    P(), a(!1), n(!1);
+    O(), a(!1), n(!1);
   }, T = () => {
     a(!1), n(!1);
   }, $ = () => {
-    O(), a(!1), n(!1);
+    D(), a(!1), n(!1);
   }, R = () => {
     a(!1);
-  }, b = N(i, h.value), z = L(i, c), f = M(z), B = () => {
+  }, b = N(i, p.value), z = J(i, c), m = M(z), B = () => {
     if (!r) return null;
     const e = c.find((o) => o.filterKey === r), y = {
-      boolean: V,
-      string: U,
-      number: q,
-      checkbox: E
-    }, C = (e == null ? void 0 : e.type) && (p == null ? void 0 : p[e.type]) || y[(e == null ? void 0 : e.type) ?? "string"];
+      boolean: U,
+      string: L,
+      number: V,
+      checkbox: q
+    }, C = (e == null ? void 0 : e.type) && (f == null ? void 0 : f[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".`
@@ -57,7 +57,7 @@ const ne = () => {
       C,
       {
         value: I,
-        onChange: ({ condition: o, value: u }) => A(r, o, u),
+        onChange: ({ condition: o, value: u }) => j(r, o, u),
         filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, u]) => ({
           label: o,
           value: o,
@@ -67,21 +67,21 @@ const ne = () => {
       r
     ) }) });
   };
-  return /* @__PURE__ */ l(m.Root, { open: g, onOpenChange: S, children: [
-    /* @__PURE__ */ t(m.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ l(d.Root, { open: g, onOpenChange: P, children: [
+    /* @__PURE__ */ t(d.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
       x,
       {
-        variant: d ? "filled" : "stroke",
-        shade: d ? "brand" : "neutral",
+        variant: h ? "filled" : "stroke",
+        shade: h ? "brand" : "neutral",
         size: "small",
         children: [
           "Filters ",
-          d && `(${h.value.length})`
+          h && `(${p.value.length})`
         ]
       }
     ) }),
-    /* @__PURE__ */ t(m.Portal, { children: /* @__PURE__ */ l(
-      m.Content,
+    /* @__PURE__ */ t(d.Portal, { children: /* @__PURE__ */ l(
+      d.Content,
       {
         className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
         sideOffset: 8,
@@ -97,7 +97,7 @@ const ne = () => {
                   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 }),
-                    j(e.filterKey) && /* @__PURE__ */ t(G, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                    S(e.filterKey) && /* @__PURE__ */ t(E, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
                   ]
                 },
                 e.filterKey
@@ -105,10 +105,10 @@ 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" }) })
           ] }),
-          (!!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 }),
+          (!!m || b) && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
+            /* @__PURE__ */ t(G, { selectedFilters: i, schema: c }),
             /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-              !!f && /* @__PURE__ */ t(x, { onClick: D, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+              !!m && /* @__PURE__ */ t(x, { onClick: A, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
               /* @__PURE__ */ t(
                 x,
                 {
@@ -118,7 +118,7 @@ const ne = () => {
                   size: "small",
                   className: "min-w-20",
                   disabled: !b,
-                  children: `Apply ${f || ""}`
+                  children: `Apply ${m ? m.toLocaleString() : ""}`
                 }
               )
             ] })