@konstructio/ui 0.1.2-alpha.73 → 0.1.2-alpha.75

package/dist/components/Filter/Filter.js

@@ -1,29 +1,31 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cn as m } from "../../utils/index.js";
-import { filterVariants as l } from "./Filter.variants.js";
-import { BadgeMultiSelect as p } from "./components/BadgeDropdown/BadgeMultiSelect.js";
-import { TextMultiSelect as a } from "./components/TextMultiSelect/TextMultiSelect.js";
-import { DateFilterDropdown as n } from "./components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as d } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { TimeFilterDropdown as f } from "./components/TimeFilterDropdown/TimeFilterDropdown.js";
-import { ResetButton as D } from "./components/ResetButton/ResetButton.js";
+import { jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../utils/index.js";
+import { filterVariants as p } from "./Filter.variants.js";
+import { FilterProvider as a } from "./contexts/filter.provider.js";
+import { BadgeMultiSelect as n } from "./components/BadgeDropdown/BadgeMultiSelect.js";
+import { TextMultiSelect as d } from "./components/TextMultiSelect/TextMultiSelect.js";
+import { DateFilterDropdown as f } from "./components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as c } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { TimeFilterDropdown as D } from "./components/TimeFilterDropdown/TimeFilterDropdown.js";
+import { ResetButton as s } from "./components/ResetButton/ResetButton.js";
 const t = ({
   className: e,
   theme: o = "civo",
-  children: r
-}) => /* @__PURE__ */ i("div", { className: m(l({ className: e })), "data-theme": o, children: r });
+  children: i,
+  closeOnApply: m = !0
+}) => /* @__PURE__ */ r(a, { closeOnApply: m, children: /* @__PURE__ */ r("div", { className: l(p({ className: e })), "data-theme": o, children: i }) });
 t.displayName = "KonstructFilter";
-t.BadgeMultiSelect = p;
-t.TextMultiSelect = a;
-t.DateFilterDropdown = n;
-t.DateRangeFilterDropdown = d;
-t.TimeFilterDropdown = f;
-t.ResetButton = D;
+t.BadgeMultiSelect = n;
+t.TextMultiSelect = d;
+t.DateFilterDropdown = f;
+t.DateRangeFilterDropdown = c;
+t.TimeFilterDropdown = D;
+t.ResetButton = s;
 export {
-  p as BadgeMultiSelect,
-  n as DateFilterDropdown,
-  d as DateRangeFilterDropdown,
+  n as BadgeMultiSelect,
+  f as DateFilterDropdown,
+  c as DateRangeFilterDropdown,
   t as Filter,
-  a as TextMultiSelect,
-  f as TimeFilterDropdown
+  d as TextMultiSelect,
+  D as TimeFilterDropdown
 };

package/dist/components/Filter/Filter.types.d.ts

@@ -14,6 +14,12 @@ export type Option = {
     label: string;
     /** Visual variant for the badge */
     variant?: BadgeProps['variant'];
+    /** Icon displayed on the left of the badge */
+    leftIcon?: BadgeProps['leftIcon'];
+    /** Icon displayed on the right of the badge */
+    rightIcon?: BadgeProps['rightIcon'];
+    /** Show loading spinner in the badge */
+    loading?: BadgeProps['loading'];
 };
 /**
  * Props for the Filter component.
@@ -41,6 +47,8 @@ export type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildre
     className?: string;
     /** Theme override for this component */
     theme?: Theme;
+    /** Whether to close the filter dropdown automatically when Apply is clicked. Defaults to true. */
+    closeOnApply?: boolean;
 };
 /**
  * Filter compound component type with sub-components.

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.hook.d.ts

@@ -1,12 +1,14 @@
 import { Option } from '../../Filter.types';
 import { BadgeMultiSelectProps, SelectedOptions } from './BadgeMultiSelect.types';
-export declare const useBadgeMultiSelect: ({ onApply, }: Pick<BadgeMultiSelectProps, "onApply">) => {
+export declare const useBadgeMultiSelect: ({ onApply, options, }: Pick<BadgeMultiSelectProps, "onApply" | "options">) => {
     isOpen: boolean;
+    isAllSelected: boolean;
     selectedCount: SelectedOptions[];
     selectedOptions: SelectedOptions[];
     wrapperRef: import('react').RefObject<HTMLDivElement | null>;
     handleApplyOptions: () => void;
     handleOpen: () => void;
     handleResetOptions: () => void;
+    handleSelectAll: (allOptions: Option[], checked: boolean) => void;
     handleSelectOption: (option: Option, checked: boolean) => void;
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.hook.js

@@ -1,21 +1,23 @@
-import { useId as b, useRef as C, useState as u, useEffect as m, useCallback as o, useMemo as w } from "react";
-import { FilterEvent as p, sendOpenFilterEvent as S } from "../../events/index.js";
-const k = ({
-  onApply: l
+import { useId as L, useRef as F, useState as m, useEffect as p, useCallback as d, useMemo as v } from "react";
+import { FilterEvent as O, sendOpenFilterEvent as k } from "../../events/index.js";
+import { useFilterContext as x } from "../../contexts/filter.hook.js";
+const B = ({
+  onApply: l,
+  options: a = []
 }) => {
-  const r = b(), a = C(null), [f, d] = u(!1), [s, i] = u([]);
-  m(() => {
+  const { closeOnApply: r } = x(), c = L(), u = F(null), [g, o] = m(!1), [n, i] = m([]);
+  p(() => {
     const e = new AbortController();
     return document.addEventListener(
-      p.OPEN,
+      O.OPEN,
       (t) => {
-        t.detail !== r && d(!1);
+        t.detail !== c && o(!1);
       },
       {
         signal: e.signal
       }
     ), document.addEventListener(
-      p.RESET,
+      O.RESET,
       () => {
         i([]), l?.([]);
       },
@@ -25,43 +27,55 @@ const k = ({
     ), () => {
       e.abort();
     };
-  }, [r, l]);
-  const v = o(
-    () => d((e) => (e || (S(r), i(
-      (t) => t.filter((n) => n.isApplied)
+  }, [c, l]);
+  const E = d(
+    () => o((e) => (e || (k(c), i(
+      (t) => t.filter((s) => s.isApplied)
     )), !e)),
-    [r, d]
-  ), c = o(() => d(!1), []), E = o(
+    [c, o]
+  ), f = d(() => o(!1), []), h = d(
     (e, t) => {
       i(t ? [
-        ...s,
+        ...n,
         { ...e, isApplied: !1 }
-      ] : s.map((n) => n.id === e.id ? { ...n, isRemoved: !0 } : n));
+      ] : n.map((s) => s.id === e.id ? { ...s, isRemoved: !0 } : s));
     },
-    [i, s]
-  ), O = o(() => {
-    i([]), l?.([]);
-  }, [l]), g = o(() => {
-    const e = s?.filter((t) => !t.isRemoved).map((t) => ({ ...t, isApplied: !0 }));
+    [i, n]
+  ), R = d(() => {
+    i([]), l?.([]), r && o(!1);
+  }, [r, l]), A = d(() => {
+    const e = n?.filter((t) => !t.isRemoved).map((t) => ({ ...t, isApplied: !0 }));
     i(e), l?.(
       e.map(
-        ({ isApplied: t, isRemoved: n, ...R }) => R
+        ({ isApplied: t, isRemoved: s, ...w }) => w
       )
-    );
-  }, [l, s, i]), h = w(
-    () => s.filter((e) => e.isApplied),
-    [s]
+    ), r && o(!1);
+  }, [r, l, n, i]), C = v(
+    () => n.filter((e) => e.isApplied),
+    [n]
+  ), S = v(
+    () => a.length > 0 && a.every(
+      (e) => n.some((t) => t.id === e.id && !t.isRemoved)
+    ),
+    [a, n]
+  ), b = d(
+    (e, t) => {
+      t && i(
+        e.map((s) => ({ ...s, isApplied: !1 }))
+      );
+    },
+    []
   );
-  return m(() => {
-    const e = new AbortController(), t = (n) => {
-      a.current?.contains(n.target) || c();
+  return p(() => {
+    const e = new AbortController(), t = (s) => {
+      u.current?.contains(s.target) || f();
     };
     return document.addEventListener("mousedown", t, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
       () => {
-        document.hidden && c();
+        document.hidden && f();
       },
       {
         signal: e.signal
@@ -69,17 +83,19 @@ const k = ({
     ), () => {
       e.abort();
     };
-  }, [c, a]), {
-    isOpen: f,
-    selectedCount: h,
-    selectedOptions: s,
-    wrapperRef: a,
-    handleApplyOptions: g,
-    handleOpen: v,
-    handleResetOptions: O,
-    handleSelectOption: E
+  }, [f, u]), {
+    isOpen: g,
+    isAllSelected: S,
+    selectedCount: C,
+    selectedOptions: n,
+    wrapperRef: u,
+    handleApplyOptions: A,
+    handleOpen: E,
+    handleResetOptions: R,
+    handleSelectAll: b,
+    handleSelectOption: h
   };
 };
 export {
-  k as useBadgeMultiSelect
+  B as useBadgeMultiSelect
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

@@ -1,50 +1,54 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Badge as o } from "../../../Badge/Badge.js";
-import { Button as m } from "../../../Button/Button.js";
-import { Checkbox as k } from "../../../Checkbox/Checkbox.js";
-import { filterButtonIconVariants as C, filterButtonVariants as y } from "../../Filter.variants.js";
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { Badge as c } from "../../../Badge/Badge.js";
+import { Button as h } from "../../../Button/Button.js";
+import { Checkbox as f } from "../../../Checkbox/Checkbox.js";
+import { filterButtonIconVariants as B, filterButtonVariants as O } from "../../Filter.variants.js";
 import { cn as r } from "../../../../utils/index.js";
-import { useBadgeMultiSelect as N } from "./BadgeMultiSelect.hook.js";
-import { C as B } from "../../../../chevron-down-BBFYYzZq.js";
-const $ = ({
-  options: n,
+import { useBadgeMultiSelect as A } from "./BadgeMultiSelect.hook.js";
+import { C as I } from "../../../../chevron-down-BBFYYzZq.js";
+const q = ({
+  options: t,
   label: p,
   position: i = "left",
-  onApply: f
+  onApply: g,
+  showSelectAll: u = !0,
+  selectAllLabel: b = "All"
 }) => {
   const {
-    wrapperRef: h,
-    isOpen: l,
-    selectedOptions: u,
-    selectedCount: c,
-    handleOpen: g,
-    handleResetOptions: b,
-    handleApplyOptions: x,
-    handleSelectOption: v
-  } = N({ onApply: f });
-  return n.length === 0 ? null : /* @__PURE__ */ t("div", { ref: h, className: "relative", children: [
-    /* @__PURE__ */ t(
+    wrapperRef: x,
+    isOpen: d,
+    isAllSelected: s,
+    selectedOptions: v,
+    selectedCount: m,
+    handleOpen: k,
+    handleResetOptions: C,
+    handleApplyOptions: N,
+    handleSelectAll: y,
+    handleSelectOption: S
+  } = A({ onApply: g, options: t });
+  return t.length === 0 ? null : /* @__PURE__ */ a("div", { ref: x, className: "relative", children: [
+    /* @__PURE__ */ a(
       "button",
       {
-        className: r(y(), {
-          "text-slate-700 dark:text-metal-50": l
+        className: r(O(), {
+          "text-slate-700 dark:text-metal-50": d
         }),
-        onClick: g,
+        onClick: k,
         children: [
           p,
-          c.length > 0 && /* @__PURE__ */ e(o, { label: c.length.toString() }),
-          /* @__PURE__ */ e(
-            B,
+          m.length > 0 && /* @__PURE__ */ l(c, { label: m.length.toString() }),
+          /* @__PURE__ */ l(
+            I,
             {
-              className: r(C(), {
-                "rotate-180 text-blue-600 dark:text-aurora-500": l
+              className: r(B(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": d
               })
             }
           )
         ]
       }
     ),
-    l && /* @__PURE__ */ t(
+    d && /* @__PURE__ */ a(
       "div",
       {
         className: r(
@@ -67,24 +71,46 @@ const $ = ({
           }
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "px-6 py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: n.map((a) => {
-            const s = !!u.find(
-              (d) => d.id === a.id
-            );
-            return /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ e(
-                k,
+          /* @__PURE__ */ l("div", { className: "px-6 py-4", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+            u && /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+              /* @__PURE__ */ l(
+                f,
                 {
                   defaultChecked: s,
-                  "data-label": a.id,
-                  onChange: (d) => v(a, d)
+                  onChange: (e) => y(t, e)
                 },
-                `${a.id}-${s}`
+                `select-all-${s}`
               ),
-              /* @__PURE__ */ e(o, { label: a.label, variant: a.variant })
-            ] }, a.id);
-          }) }) }),
-          /* @__PURE__ */ t(
+              /* @__PURE__ */ l(c, { label: b })
+            ] }),
+            t.map((e) => {
+              const o = !!v.find(
+                (n) => n.id === e.id
+              );
+              return /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+                /* @__PURE__ */ l(
+                  f,
+                  {
+                    defaultChecked: o,
+                    "data-label": e.id,
+                    onChange: (n) => S(e, n)
+                  },
+                  `${e.id}-${o}`
+                ),
+                /* @__PURE__ */ l(
+                  c,
+                  {
+                    label: e.label,
+                    variant: e.variant,
+                    leftIcon: e.leftIcon,
+                    rightIcon: e.rightIcon,
+                    loading: e.loading
+                  }
+                )
+              ] }, e.id);
+            })
+          ] }) }),
+          /* @__PURE__ */ a(
             "div",
             {
               className: r(
@@ -99,16 +125,16 @@ const $ = ({
                 "dark:border-metal-700"
               ),
               children: [
-                /* @__PURE__ */ e(
-                  m,
+                /* @__PURE__ */ l(
+                  h,
                   {
                     variant: "secondary",
                     appearance: "compact",
-                    onClick: b,
+                    onClick: C,
                     children: "Reset"
                   }
                 ),
-                /* @__PURE__ */ e(m, { appearance: "compact", onClick: x, children: "Apply" })
+                /* @__PURE__ */ l(h, { appearance: "compact", onClick: N, children: "Apply" })
               ]
             }
           )
@@ -118,5 +144,5 @@ const $ = ({
   ] });
 };
 export {
-  $ as BadgeMultiSelect
+  q as BadgeMultiSelect
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.types.d.ts

@@ -8,4 +8,6 @@ export type BadgeMultiSelectProps = {
     options: Option[];
     position?: 'left' | 'right';
     onApply?: (selectedOptions: Option[]) => void;
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
 };

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.js

@@ -1,31 +1,32 @@
-import { useRef as w, useId as S, useState as m, useMemo as C, useCallback as s, useEffect as f } from "react";
-import { sendOpenFilterEvent as y, FilterEvent as E } from "../../events/index.js";
-import { getLocale as F } from "../../utils/index.js";
-const N = ({
+import { useRef as C, useId as S, useState as f, useMemo as y, useCallback as r, useEffect as E } from "react";
+import { sendOpenFilterEvent as F, FilterEvent as v } from "../../events/index.js";
+import { getLocale as R } from "../../utils/index.js";
+import { useFilterContext as k } from "../../contexts/filter.hook.js";
+const A = ({
   onApply: n,
-  countryCode: v = "US"
+  countryCode: g = "US"
 }) => {
-  const i = w(null), t = S(), [h, a] = m(!1), [r, l] = m(), [g, c] = m(), p = C(
-    () => g?.toLocaleDateString(F(v), {
+  const { closeOnApply: a } = k(), i = C(null), t = S(), [h, o] = f(!1), [l, c] = f(), [p, d] = f(), D = y(
+    () => p?.toLocaleDateString(R(g), {
       day: "numeric",
       month: "short",
       year: "numeric"
     }),
-    [g, v]
-  ), D = s(
-    () => a((e) => (e || y(t), !e)),
+    [p, g]
+  ), b = r(
+    () => o((e) => (e || F(t), !e)),
     [t]
-  ), b = s(() => {
-    c(r), n?.(r);
-  }, [n, r]), L = s((e) => l(e), []), d = s(() => a(!1), []), O = s(() => {
-    l(void 0), c(void 0), n?.();
-  }, [n]);
-  return f(() => {
+  ), O = r(() => {
+    d(l), n?.(l), a && o(!1);
+  }, [a, n, l]), L = r((e) => c(e), []), u = r(() => o(!1), []), w = r(() => {
+    c(void 0), d(void 0), n?.(), a && o(!1);
+  }, [a, n]);
+  return E(() => {
     const e = new AbortController();
     return document.addEventListener(
-      E.OPEN,
-      ((o) => {
-        o.detail !== t && a(!1);
+      v.OPEN,
+      ((s) => {
+        s.detail !== t && o(!1);
       }),
       {
         signal: e.signal
@@ -33,20 +34,20 @@ const N = ({
     ), () => {
       e.abort();
     };
-  }, [t]), f(() => {
+  }, [t]), E(() => {
     const e = new AbortController();
     return document.addEventListener(
-      E.OPEN,
-      (o) => {
-        o.detail !== t && a(!1);
+      v.OPEN,
+      (s) => {
+        s.detail !== t && o(!1);
       },
       {
         signal: e.signal
       }
     ), document.addEventListener(
-      E.RESET,
+      v.RESET,
       () => {
-        l(void 0), c(void 0), n?.();
+        c(void 0), d(void 0), n?.();
       },
       {
         signal: e.signal
@@ -54,16 +55,16 @@ const N = ({
     ), () => {
       e.abort();
     };
-  }, [t, n]), f(() => {
-    const e = new AbortController(), o = (u) => {
-      i.current?.contains(u.target) || d();
+  }, [t, n]), E(() => {
+    const e = new AbortController(), s = (m) => {
+      i.current?.contains(m.target) || u();
     };
-    return document.addEventListener("mousedown", o, {
+    return document.addEventListener("mousedown", s, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
       () => {
-        document.hidden && d();
+        document.hidden && u();
       },
       {
         signal: e.signal
@@ -71,18 +72,18 @@ const N = ({
     ), () => {
       e.abort();
     };
-  }, [d, i]), {
+  }, [u, i]), {
     id: t,
-    appliedDay: p,
+    appliedDay: D,
     isOpen: h,
-    selectedDay: r,
+    selectedDay: l,
     wrapperRef: i,
-    handleApply: b,
-    handleOpen: D,
+    handleApply: O,
+    handleOpen: b,
     handleSelect: L,
-    handleReset: O
+    handleReset: w
   };
 };
 export {
-  N as useDateFilterDropdown
+  A as useDateFilterDropdown
 };

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.hook.js

@@ -1,40 +1,41 @@
-import { useRef as w, useId as S, useState as u, useMemo as D, useCallback as s, useEffect as g } from "react";
-import { sendOpenFilterEvent as F, FilterEvent as v } from "../../events/index.js";
-import { getLocale as k } from "../../utils/index.js";
-const x = ({
+import { useRef as F, useId as S, useState as u, useMemo as D, useCallback as a, useEffect as p } from "react";
+import { sendOpenFilterEvent as k, FilterEvent as v } from "../../events/index.js";
+import { getLocale as x } from "../../utils/index.js";
+import { useFilterContext as I } from "../../contexts/filter.hook.js";
+const P = ({
   defaultRange: h,
   onApply: t,
   countryCode: E = "US"
 }) => {
-  const d = w(null), o = S(), [R, a] = u(!1), [i, l] = u(
+  const { closeOnApply: i } = I(), d = F(null), o = S(), [R, s] = u(!1), [l, c] = u(
     h
-  ), [n, c] = u(), p = D(() => {
+  ), [n, f] = u(), C = D(() => {
     if (!n?.from) return;
-    const e = (r) => r.toLocaleDateString(k(E), {
+    const e = (r) => r.toLocaleDateString(x(E), {
       day: "numeric",
       month: "short"
     });
     return n.to ? `${e(n.from)} - ${e(n.to)}` : e(n.from);
-  }, [n]), b = s(
-    () => a((e) => (e || F(o), !e)),
+  }, [n]), O = a(
+    () => s((e) => (e || k(o), !e)),
     [o]
-  ), C = s(() => {
+  ), b = a(() => {
     const e = {
-      from: i?.from,
-      to: i?.to
+      from: l?.from,
+      to: l?.to
     };
-    c(e), t?.(e), a(!1);
-  }, [t, i]), L = s((e) => {
-    l({ from: e.from, to: e.to });
-  }, []), m = s(() => a(!1), []), O = s(() => {
-    l(void 0), c(void 0), t?.();
-  }, [t]);
-  return g(() => {
+    f(e), t?.(e), i && s(!1);
+  }, [i, t, l]), L = a((e) => {
+    c({ from: e.from, to: e.to });
+  }, []), m = a(() => s(!1), []), w = a(() => {
+    c(void 0), f(void 0), t?.(), i && s(!1);
+  }, [i, t]);
+  return p(() => {
     const e = new AbortController();
     return document.addEventListener(
       v.OPEN,
       (r) => {
-        r.detail !== o && a(!1);
+        r.detail !== o && s(!1);
       },
       {
         signal: e.signal
@@ -42,7 +43,7 @@ const x = ({
     ), document.addEventListener(
       v.RESET,
       () => {
-        l(void 0), c(void 0), t?.();
+        c(void 0), f(void 0), t?.();
       },
       {
         signal: e.signal
@@ -50,9 +51,9 @@ const x = ({
     ), () => {
       e.abort();
     };
-  }, [o, t]), g(() => {
-    const e = new AbortController(), r = (f) => {
-      d.current?.contains(f.target) || m();
+  }, [o, t]), p(() => {
+    const e = new AbortController(), r = (g) => {
+      d.current?.contains(g.target) || m();
     };
     return document.addEventListener("mousedown", r, {
       signal: e.signal
@@ -69,16 +70,16 @@ const x = ({
     };
   }, [m, d]), {
     id: o,
-    appliedRange: p,
+    appliedRange: C,
     isOpen: R,
-    selectedRange: i,
+    selectedRange: l,
     wrapperRef: d,
-    handleApply: C,
-    handleOpen: b,
+    handleApply: b,
+    handleOpen: O,
     handleRangeChange: L,
-    handleReset: O
+    handleReset: w
   };
 };
 export {
-  x as useDateRangeFilterDropdown
+  P as useDateRangeFilterDropdown
 };