@ztwoint/z-ui 0.1.130 → 0.1.131

package/dist/components/checkbox-filter/checkbox-filter-popover-field.d.ts

@@ -0,0 +1,8 @@
+import { CheckboxFilterProps } from './checkbox-filter.type';
+interface CheckboxFilterPopoverFieldProps extends Omit<CheckboxFilterProps, 'value' | 'onChange'> {
+    placeholder?: string;
+    value?: string[];
+    onChange: (value: string[]) => void;
+}
+export declare const CheckboxFilterPopoverField: React.FC<CheckboxFilterPopoverFieldProps>;
+export {};

package/dist/components/checkbox-filter/checkbox-filter-popover-field.hook.d.ts

@@ -0,0 +1,11 @@
+interface UseCheckboxFilterPopoverFieldProps {
+    placeholder?: string;
+    value?: string | string[];
+}
+export declare const useCheckboxFilterPopoverField: ({ value, placeholder, }: UseCheckboxFilterPopoverFieldProps) => {
+    isOpen: boolean;
+    displayText: string;
+    handleOpenChange: (open: boolean) => void;
+    handleInputClick: () => void;
+};
+export {};

package/dist/components/checkbox-filter/checkbox-filter-popover-field.hook.js

@@ -0,0 +1,23 @@
+import { useState as c } from "react";
+const h = ({
+  value: t,
+  placeholder: n = "Search options"
+}) => {
+  const [r, s] = c(!1), o = (() => {
+    const e = t && Array.isArray(t) ? t.length : 0;
+    return e === 0 ? n : `${n} (${e} selected)`;
+  })();
+  return {
+    isOpen: r,
+    displayText: o,
+    handleOpenChange: (e) => {
+      s(e);
+    },
+    handleInputClick: () => {
+      s(!0);
+    }
+  };
+};
+export {
+  h as useCheckboxFilterPopoverField
+};

package/dist/components/checkbox-filter/checkbox-filter-popover-field.js

@@ -0,0 +1,44 @@
+import { jsx as e } from "react/jsx-runtime";
+import { PopoverCompact as s } from "../primitives/popover-compact/popover-compact.js";
+import { CheckboxFilter as m } from "./checkbox-filter.js";
+import { Input as h } from "../input/input.js";
+import { MagnifierIcon as d } from "../assets/icons/magnifier-icon.js";
+import v from "../assets/icons/chevron-down.js";
+import { useCheckboxFilterPopoverField as g } from "./checkbox-filter-popover-field.hook.js";
+const O = ({
+  value: n,
+  onChange: r,
+  filterOptions: i = [],
+  placeholder: p = "Search options"
+}) => {
+  const { isOpen: t, displayText: l, handleOpenChange: c, handleInputClick: a } = g(
+    {
+      value: n,
+      placeholder: p
+    }
+  );
+  return /* @__PURE__ */ e(s, { trigger: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+    h,
+    {
+      leftIcon: /* @__PURE__ */ e(d, {}),
+      size: "large",
+      placeholder: l,
+      rightIcon: /* @__PURE__ */ e(v, {}),
+      readOnly: !0,
+      onClick: a,
+      className: "cursor-pointer"
+    }
+  ) }), open: t, onOpenChange: c, children: /* @__PURE__ */ e("div", { className: "h-[400px] flex flex-col", children: /* @__PURE__ */ e(
+    m,
+    {
+      value: { value: n },
+      onChange: (o) => {
+        Array.isArray(o.value) ? r(o.value) : o.value !== void 0 && o.value !== null ? r([o.value]) : r([]);
+      },
+      filterOptions: i
+    }
+  ) }) });
+};
+export {
+  O as CheckboxFilterPopoverField
+};

package/dist/components/checkbox-filter/checkbox-filter.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxFilterProps } from './checkbox-filter.type';
+export declare const CheckboxFilter: React.FC<CheckboxFilterProps>;

package/dist/components/checkbox-filter/checkbox-filter.hook.d.ts

@@ -0,0 +1,11 @@
+import { FilterOption } from '../table-filter/table-filter.type';
+import { CheckboxFilterProps } from './checkbox-filter.type';
+export declare const useCheckboxFilter: ({ value, onChange, filterOptions }: CheckboxFilterProps) => {
+    selectedValues: string[];
+    searchValue: string;
+    filteredOptions: FilterOption[];
+    onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleCheckboxChange: (optionValue: string, checked: boolean) => void;
+    onClearSearch: () => void;
+    isSelected: (optionValue: string) => boolean;
+};

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

@@ -0,0 +1,31 @@
+import { useState as o, useEffect as u } from "react";
+const k = ({ value: s, onChange: d, filterOptions: a = [] }) => {
+  const [c, l] = o([]), [C, h] = o(""), [S, r] = o(a);
+  return u(() => {
+    s && Array.isArray(s.value) ? l(s.value.filter(Boolean) ?? []) : l([]);
+  }, [s]), u(() => {
+    r(a);
+  }, [a]), {
+    selectedValues: c,
+    searchValue: C,
+    filteredOptions: S,
+    onSearchChange: (e) => {
+      h(e.target.value);
+      const n = a.filter(
+        (t) => t.label.toLowerCase().includes(e.target.value.toLowerCase())
+      );
+      r(n);
+    },
+    handleCheckboxChange: (e, n) => {
+      let t;
+      n ? t = [...c, e] : t = c.filter((i) => i !== e), l(t), d({ value: t });
+    },
+    onClearSearch: () => {
+      h(""), r(a);
+    },
+    isSelected: (e) => c.includes(e)
+  };
+};
+export {
+  k as useCheckboxFilter
+};

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

@@ -0,0 +1,64 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { Virtuoso as x } from "react-virtuoso";
+import { MagnifierIcon as p } from "../assets/icons/magnifier-icon.js";
+import f from "../assets/icons/x.js";
+import { Z2Checkbox as b } from "../checkbox/checkbox.js";
+import { useCheckboxFilter as C } from "./checkbox-filter.hook.js";
+const w = ({
+  value: n,
+  onChange: s,
+  filterOptions: a = []
+}) => {
+  const {
+    searchValue: r,
+    filteredOptions: o,
+    onSearchChange: i,
+    handleCheckboxChange: c,
+    onClearSearch: m,
+    isSelected: d
+  } = C({ value: n, onChange: s, filterOptions: a }), h = (N, t) => /* @__PURE__ */ l("div", { className: "flex justify-between items-center py-2 px-3", children: [
+    /* @__PURE__ */ l("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+      /* @__PURE__ */ e(
+        b,
+        {
+          checked: d(t.value),
+          onCheckedChange: (u) => c(t.value, u === !0)
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: t.label })
+    ] }),
+    t.total && /* @__PURE__ */ l("span", { className: "text-text-neutral-muted text-sm", children: [
+      "[",
+      t.total,
+      "]"
+    ] })
+  ] });
+  return a.length === 0 ? /* @__PURE__ */ e("div", { className: "text-text-neutral-muted text-sm p-4", children: "No filter options available for this column" }) : /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ l("div", { className: "relative border-b border-stroke-solid-medium", children: [
+      /* @__PURE__ */ e(p, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          placeholder: "Search options",
+          value: r,
+          onChange: i,
+          className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-8 leading-none-medium-sm w-full"
+        }
+      ),
+      r && /* @__PURE__ */ e("span", { className: "absolute right-3 top-3.5", onClick: m, children: /* @__PURE__ */ e(f, {}) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(
+      x,
+      {
+        data: o,
+        itemContent: h,
+        className: "h-full min-h-60",
+        style: { height: "100%" },
+        overscan: 5
+      }
+    ) })
+  ] });
+};
+export {
+  w as CheckboxFilter
+};

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

@@ -0,0 +1,2 @@
+import { FilterComponentProps } from '../table-filter/table-filter.type';
+export type CheckboxFilterProps = FilterComponentProps;

package/dist/components/checkbox-filter/index.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxFilter } from './checkbox-filter';
+import { CheckboxFilterPopoverField } from './checkbox-filter-popover-field';
+declare const CheckboxFilterComponent: typeof CheckboxFilter & {
+    PopoverField: typeof CheckboxFilterPopoverField;
+};
+export { CheckboxFilterComponent as CheckboxFilter };
+export type { CheckboxFilterProps } from './checkbox-filter.type';

package/dist/components/checkbox-filter/index.js

@@ -0,0 +1,7 @@
+import { CheckboxFilter as o } from "./checkbox-filter.js";
+import { CheckboxFilterPopoverField as e } from "./checkbox-filter-popover-field.js";
+const r = o;
+r.PopoverField = e;
+export {
+  r as CheckboxFilter
+};

package/dist/components/primitives/popover-compact/index.d.ts

@@ -0,0 +1,2 @@
+export { PopoverCompact } from './popover-compact';
+export type { PopoverCompactProps } from './popover-compact';

package/dist/components/primitives/popover-compact/popover-compact.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface PopoverCompactProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contentClassName?: string;
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    width?: string;
+}
+export declare function PopoverCompact({ trigger, children, open: controlledOpen, onOpenChange: controlledOnOpenChange, contentClassName, sideOffset, align, width, }: PopoverCompactProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/primitives/popover-compact/popover-compact.js

@@ -0,0 +1,30 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useState as g } from "react";
+import * as e from "@radix-ui/react-popover";
+function x({
+  trigger: t,
+  children: s,
+  open: r,
+  onOpenChange: i,
+  contentClassName: a,
+  sideOffset: l = 8,
+  align: d = "start",
+  width: p = "w-80"
+}) {
+  const [c, h] = g(!1), n = r !== void 0, m = n ? r : c, f = n ? i : h;
+  return /* @__PURE__ */ u(e.Root, { open: m, onOpenChange: f, children: [
+    /* @__PURE__ */ o(e.Trigger, { asChild: !0, children: t }),
+    /* @__PURE__ */ o(e.Portal, { children: /* @__PURE__ */ o(
+      e.Content,
+      {
+        className: `${p} bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg z-50 ${a || ""}`,
+        sideOffset: l,
+        align: d,
+        children: s
+      }
+    ) })
+  ] });
+}
+export {
+  x as PopoverCompact
+};

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

@@ -18,6 +18,7 @@ import "../../collapsible-side-nav-bar/popover/popover.js";
 import "react-country-flag";
 import "classnames";
 import "@radix-ui/react-checkbox";
+import "../../checkbox-filter/index.js";
 import "@radix-ui/react-dialog";
 import "../../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
@@ -27,6 +28,7 @@ import "../../input/input.js";
 import "../../nav-header/nav-header.js";
 import "../../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
+import "@radix-ui/react-popover";
 import "../../stepper/stepper.js";
 import "../../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
@@ -41,7 +43,6 @@ import "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/
 import "@radix-ui/react-slot";
 import "../../radio/z2-radio.js";
 import "../../segmented-control/item.js";
-import "@radix-ui/react-popover";
 import "../popconfirm/popconfirm.js";
 import "../../dynamic-table/z2-table.js";
 import "../../dynamic-table/z2-table-context.js";
@@ -56,7 +57,7 @@ import "../../z2map/components/map-controls.js";
 import "../../z2map/components/map-zoom-control.js";
 import "../../z2map/components/map-style-control.js";
 import "../../table/table.context.js";
-const Dt = ({
+const Gt = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -212,5 +213,5 @@ const Dt = ({
   ] });
 };
 export {
-  Dt as default
+  Gt as default
 };

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

@@ -17,6 +17,7 @@ import "../../../collapsible-side-nav-bar/popover/popover.js";
 import "react-country-flag";
 import "classnames";
 import "@radix-ui/react-checkbox";
+import "../../../checkbox-filter/index.js";
 import "@radix-ui/react-dialog";
 import "../../../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
@@ -25,6 +26,7 @@ import "../../../input/input.js";
 import "../../../nav-header/nav-header.js";
 import "../../../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
+import "@radix-ui/react-popover";
 import "../../../stepper/stepper.js";
 import "../../../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
@@ -41,7 +43,6 @@ import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledg
 import "@radix-ui/react-slot";
 import "../../../radio/z2-radio.js";
 import "../../../segmented-control/item.js";
-import "@radix-ui/react-popover";
 import "../../../primitives/popconfirm/popconfirm.js";
 import "../../../dynamic-table/z2-table.js";
 import "../../../dynamic-table/z2-table-context.js";
@@ -55,7 +56,7 @@ import "../../../z2map/components/map-pin-content.js";
 import "../../../z2map/components/map-controls.js";
 import "../../../z2map/components/map-zoom-control.js";
 import "../../../z2map/components/map-style-control.js";
-const ft = ({
+const ut = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -93,5 +94,5 @@ const ft = ({
   }
 );
 export {
-  ft as AvatarCell
+  ut as AvatarCell
 };

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

@@ -24,6 +24,7 @@ import "../collapsible-side-nav-bar/popover/popover.js";
 import "react-country-flag";
 import "classnames";
 import "@radix-ui/react-checkbox";
+import "../checkbox-filter/index.js";
 import "@radix-ui/react-dialog";
 import "../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
@@ -32,6 +33,7 @@ import "../input/input.js";
 import "../nav-header/nav-header.js";
 import "../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
+import "@radix-ui/react-popover";
 import "../stepper/stepper.js";
 import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
@@ -46,7 +48,6 @@ import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dis
 import "@radix-ui/react-slot";
 import "../radio/z2-radio.js";
 import "../segmented-control/item.js";
-import "@radix-ui/react-popover";
 import "../primitives/popconfirm/popconfirm.js";
 import "../dynamic-table/z2-table.js";
 import "../dynamic-table/z2-table-context.js";

package/dist/components/table-filter/filters/index.d.ts

@@ -1,4 +1,3 @@
 export * from './text';
 export * from './boolean';
 export * from './number';
-export * from './checkbox';

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

@@ -6,7 +6,7 @@ import { useTableFilterContext as q } from "./table-filter.context.js";
 import E from "./filters/text.js";
 import G from "./filters/boolean.js";
 import J from "./filters/number/number.js";
-import M from "./filters/checkbox.js";
+import { CheckboxFilter as M } from "../checkbox-filter/index.js";
 import Q from "../assets/icons/circle-check-filled.js";
 import { SelectedFiltersDisplay as W } from "./selected-filters-display/selected-filters-display.js";
 import { FilterConfirmationDialog as X } from "./close-filter-confirm/filter-confirmation-dialog.js";
@@ -15,7 +15,7 @@ import { NumberBadge as Y } from "../number-badge/number-badge.js";
 const de = () => {
   var w, A;
   const [K, c] = b.useState(!1), n = b.useRef(null), [C, d] = b.useState(!1), {
-    selectedColumn: a,
+    selectedColumn: o,
     setSelectedColumn: O,
     getFilterForColumn: P,
     hasFilterForColumn: T,
@@ -36,9 +36,9 @@ const de = () => {
     B(), c(!1), d(!1);
   }, I = () => {
     c(!1);
-  }, F = S(u, h.value), r = P(a || ""), V = () => {
-    if (!a) return null;
-    const e = m.find((o) => o.filterKey === a), s = {
+  }, F = S(u, h.value), r = P(o || ""), V = () => {
+    if (!o) return null;
+    const e = m.find((a) => a.filterKey === o), s = {
       boolean: G,
       string: E,
       number: J,
@@ -56,14 +56,14 @@ const de = () => {
       j,
       {
         value: U,
-        onChange: ({ condition: o, value: v }) => D(a, o, v),
-        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, v]) => ({
-          label: o,
-          value: o,
+        onChange: ({ condition: a, value: v }) => D(o, a, v),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([a, v]) => ({
+          label: a,
+          value: a,
           total: v
         })) : void 0
       },
-      a
+      o
     ) }) });
   }, H = h.loading || !1;
   r && (Array.isArray(r.value) && r.value.length > 0 || (r == null ? void 0 : r.value) !== "") && (n.current = r);
@@ -105,7 +105,7 @@ const de = () => {
                 "button",
                 {
                   onClick: () => O(e.filterKey),
-                  className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${a === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
+                  className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${o === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
                   children: [
                     /* @__PURE__ */ l("span", { className: "flex items-center gap-1", children: [
                       e.helperText && /* @__PURE__ */ l("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
@@ -121,7 +121,7 @@ const de = () => {
               ))
             ] }),
             /* @__PURE__ */ l("div", { className: "flex-1 flex flex-col relative", children: [
-              a ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
+              o ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
               H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-3", children: [
                 /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-transparent rounded-full animate-spin" }),
                 /* @__PURE__ */ t("span", { className: "text-text-body-primary text-sm", children: "Loading options..." })

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

@@ -1,18 +1,18 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import k, { useMemo as K } from "react";
+import w, { useMemo as K } from "react";
 import * as d from "@radix-ui/react-popover";
 import { Button as f } from "../button/button.js";
 import { useTableFilterContext as L } from "./table-filter.context.js";
 import _ from "./filters/text.js";
 import M from "./filters/boolean.js";
 import U from "./filters/number/number.js";
-import q from "./filters/checkbox.js";
+import { CheckboxFilter as q } from "../checkbox-filter/index.js";
 import { getFilterCount as E } from "./selected-filters-display/selected-filters-display.utils.js";
 import { FilterConfirmationDialog as G } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
 import { NumberBadge as H } from "../number-badge/number-badge.js";
 const le = ({ filterName: n }) => {
-  const [T, a] = k.useState(!1), [C, s] = k.useState(!1), {
+  const [T, a] = w.useState(!1), [C, s] = w.useState(!1), {
     getFilterForColumn: g,
     hasAppliedFilterForColumn: O,
     updateColumnFilter: b,
@@ -41,11 +41,11 @@ const le = ({ filterName: n }) => {
     string: _,
     number: U,
     checkbox: q
-  }, F = o.type && (m == null ? void 0 : m[o.type]) || R[o.type ?? "string"], u = O(n), y = p.loading || !1, w = o.options ? Object.entries(o.options).map(([t, i]) => ({
+  }, F = o.type && (m == null ? void 0 : m[o.type]) || R[o.type ?? "string"], u = O(n), y = p.loading || !1, k = o.options ? Object.entries(o.options).map(([t, i]) => ({
     label: t,
     value: t,
     total: i
-  })) : void 0, h = r ? E(r, w) : void 0, S = r != null && r.value ? Array.isArray(r.value) ? r.value.length : 1 : 0, z = () => {
+  })) : void 0, h = r ? E(r, k) : void 0, S = r != null && r.value ? Array.isArray(r.value) ? r.value.length : 1 : 0, z = () => {
     const t = b(n, "", "");
     c(t), s(!1);
   }, I = () => {
@@ -86,7 +86,7 @@ const le = ({ filterName: n }) => {
             {
               value: r,
               onChange: ({ condition: t, value: i }) => b(n, t, i),
-              filterOptions: w
+              filterOptions: k
             }
           ),
           (x || !!S) && /* @__PURE__ */ l("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/button/button';
 export * from './components/collapsible-side-nav-bar';
 export * from './components/country-flags/country-flags';
 export * from './components/checkbox/checkbox';
+export * from './components/checkbox-filter';
 export * from './components/dialog/dialog';
 export * from './components/dropdown/z2-dropdown';
 export * from './components/dropdown-menu/z2-dropdown-menu';
@@ -11,6 +12,7 @@ export * from './components/input/input';
 export * from './components/nav-header';
 export * from './components/select/z2-select';
 export * from './components/primitives/select-compact/select-compact';
+export * from './components/primitives/popover-compact';
 export * from './components/stepper';
 export * from './components/stepper-item/stepper-item';
 export * from './components/tab/tab';