@stenajs-webui/filter 22.6.2 → 22.7.1

package/dist/index.es.js

@@ -1,29 +1,29 @@
-import { jsx as c, jsxs as M, Fragment as T } from "react/jsx-runtime";
-import { createContext as v, useContext as L, useCallback as u, useState as w, useReducer as W, useMemo as R } from "react";
+import { jsx as c, jsxs as w, Fragment as P } from "react/jsx-runtime";
+import { createContext as M, useContext as k, useCallback as d, useState as R, useReducer as W, useMemo as b } from "react";
 import { DrawerHeader as Y, Drawer as J } from "@stenajs-webui/modal";
 import { cssColor as Q } from "@stenajs-webui/theme";
-import { Column as D, Box as y, Row as O, Space as U, Text as X, truthyKeysAsList as V } from "@stenajs-webui/core";
+import { Column as V, Box as y, Row as D, Space as U, Text as X, truthyKeysAsList as T } from "@stenajs-webui/core";
 import { SecondaryButton as Z, stenaSlidersMini as _, MenuButton as I, Spinner as N, Banner as ee, FlatButton as j, ContentMenuButton as te, stenaClean as ne, Chip as H } from "@stenajs-webui/elements";
-import { upperFirst as re, lowerCase as oe } from "lodash-es";
+import { upperFirst as oe, lowerCase as re } from "lodash-es";
 import { combineReducers as ce } from "redux";
-import { reducerIdGate as B, createValueByIdReducer as se, createEntityReducer as P, reducerIdGateAction as f, createEntityActions as g, createValueByIdActions as b } from "@stenajs-webui/redux";
+import { reducerIdGateAction as C, reducerIdGate as B, createEntityReducer as A, createValueByIdReducer as se, createValueByIdActions as g, createEntityActions as v } from "@stenajs-webui/redux";
 import { Checkbox as ae } from "@stenajs-webui/forms";
 import { ChipMultiSelect as le } from "@stenajs-webui/select";
-import { stringsToDateRange as ie, dateRangeToStrings as de, DateRangeCalendar as ue } from "@stenajs-webui/calendar";
-const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, header: e }), $ = v(null), z = () => {
-  const e = L($);
+import { stringsToDateRange as ie, dateRangeToStrings as ue, DateRangeCalendar as de } from "@stenajs-webui/calendar";
+const pe = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, header: e }), $ = M(null), z = () => {
+  const e = k($);
   if (!e)
     throw new Error(
       "Missing search filter context, wrap components with SearchFilterContext component."
     );
   return e;
-}, q = v(null), F = () => {
-  const e = L(q);
+}, q = M(null), f = () => {
+  const e = k(q);
   if (!e)
     throw new Error("Missing search filter dispatch context.");
   return e;
-}, G = v(null), x = () => {
-  const e = L(G);
+}, G = M(null), F = () => {
+  const e = k(G);
   if (!e)
     throw new Error("Missing search filter actions context.");
   return e;
@@ -31,29 +31,29 @@ const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, head
   children: e,
   header: t,
   headerContentRight: n,
-  ...r
+  ...o
 }) => {
   const {
-    settings: { open: o }
-  } = z(), s = F(), a = x(), i = u(() => {
+    settings: { open: r }
+  } = z(), s = f(), a = F(), i = d(() => {
     s(a.closeFilters());
   }, [a, s]);
   return /* @__PURE__ */ c(
     J,
     {
       floating: !0,
-      isOpen: o,
+      isOpen: r,
       onRequestClose: i,
-      ...r,
-      children: /* @__PURE__ */ M(
-        D,
+      ...o,
+      children: /* @__PURE__ */ w(
+        V,
         {
           height: "100%",
           borderRadius: "var(--swui-border-radius)",
           background: Q("--lhds-color-ui-50"),
           children: [
             /* @__PURE__ */ c(
-              he,
+              pe,
               {
                 onRequestClose: i,
                 header: t,
@@ -70,59 +70,59 @@ const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, head
   label: e = "Filters",
   leftIcon: t = _
 }) => {
-  const n = F(), r = x(), o = u(() => {
-    n(r.openFilters());
-  }, [r, n]);
+  const n = f(), o = F(), r = d(() => {
+    n(o.openFilters());
+  }, [o, n]);
   return /* @__PURE__ */ c(
     Z,
     {
       label: e,
       leftIcon: t,
-      onClick: o
+      onClick: r
     }
   );
-}, A = function({
+}, O = function({
   sectionId: t,
   label: n,
-  loading: r,
-  error: o,
+  loading: o,
+  error: r,
   onRetry: s,
   disableContentPadding: a,
   children: i,
-  leftIcon: h,
-  contentRight: p
+  leftIcon: p,
+  contentRight: h
 }) {
-  const l = z(), S = F(), m = x(), C = l.expandedSections.values[t] ?? !1, E = u(() => {
-    S(m.setSectionExpanded(t, !C));
-  }, [m, S, C, t]), k = n ?? pe(t);
-  return /* @__PURE__ */ M(T, { children: [
+  const l = z(), m = f(), x = F(), S = l.expandedSections.values[t] ?? !1, L = d(() => {
+    m(x.setSectionExpanded(t, !S));
+  }, [x, m, S, t]), E = n ?? he(t);
+  return /* @__PURE__ */ w(P, { children: [
     /* @__PURE__ */ c(
       I,
       {
-        label: k,
-        leftIcon: h,
+        label: E,
+        leftIcon: p,
         expandable: !0,
-        expanded: C,
-        selected: C,
-        onClick: E,
-        right: p,
-        children: r ? /* @__PURE__ */ c(O, { spacing: !0, justifyContent: "center", flex: 1, children: /* @__PURE__ */ c(N, { size: "small" }) }) : o ? /* @__PURE__ */ c(
+        expanded: S,
+        selected: S,
+        onClick: L,
+        right: h,
+        children: o ? /* @__PURE__ */ c(D, { spacing: !0, justifyContent: "center", flex: 1, children: /* @__PURE__ */ c(N, { size: "small" }) }) : r ? /* @__PURE__ */ c(
           ee,
           {
             variant: "error",
-            text: o,
+            text: r,
             contentRight: s ? /* @__PURE__ */ c(j, { label: "Retry", onClick: s }) : null
           }
         ) : i
       }
     ),
-    C && /* @__PURE__ */ c(U, {})
+    S && /* @__PURE__ */ c(U, {})
   ] });
-}, pe = (e) => re(oe(e)), Ge = ({
+}, he = (e) => oe(re(e)), Ge = ({
   children: e,
   ...t
 }) => /* @__PURE__ */ c(
-  D,
+  V,
   {
     style: { marginTop: "auto" },
     justifyContent: "center",
@@ -133,115 +133,115 @@ const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, head
     ...t,
     children: e
   }
-), K = v(null), Ke = () => {
-  const e = L(K);
+), K = M(null), Ke = () => {
+  const e = k(K);
   if (!e)
     throw new Error(
       "Missing search filter context, wrap components with SearchFilterContext component."
     );
   return e;
-}, Se = function({
+}, Ce = function({
   state: t,
   dispatch: n,
-  actions: r,
-  children: o
+  actions: o,
+  children: r
 }) {
   return /* @__PURE__ */ c(
     q.Provider,
     {
       value: n,
-      children: /* @__PURE__ */ c(G.Provider, { value: r, children: /* @__PURE__ */ c($.Provider, { value: t, children: /* @__PURE__ */ c(K.Provider, { value: t.formModel, children: o }) }) })
+      children: /* @__PURE__ */ c(G.Provider, { value: o, children: /* @__PURE__ */ c($.Provider, { value: t, children: /* @__PURE__ */ c(K.Provider, { value: t.formModel, children: r }) }) })
     }
   );
-}, fe = (e) => ({
+}, Se = (e) => ({
   settings: {
     open: !1
   },
   formModel: e,
   expandedSections: { values: {} }
-}), Ce = (e, t) => ce({
+}), fe = (e, t) => ce({
   expandedSections: B(
-    d(e, "expandedSections"),
+    u(e, "expandedSections"),
     se(t.expandedSections)
   ),
   formModel: B(
-    d(e, "formModel"),
-    P(t.formModel)
+    u(e, "formModel"),
+    A(t.formModel)
   ),
   settings: B(
-    d(e, "settings"),
-    P(t.settings)
+    u(e, "settings"),
+    A(t.settings)
   )
 }), Fe = (e, t) => ({
-  openFilters: () => f(
-    d(e, "settings"),
-    g().setEntityFields({
+  openFilters: () => C(
+    u(e, "settings"),
+    v().setEntityFields({
       open: !0
     })
   ),
-  closeFilters: () => f(
-    d(e, "settings"),
-    g().setEntityFields({
+  closeFilters: () => C(
+    u(e, "settings"),
+    v().setEntityFields({
       open: !1
     })
   ),
-  setFormModelFields: (n) => f(
-    d(e, "formModel"),
-    g().setEntityFields(n)
+  setFormModelFields: (n) => C(
+    u(e, "formModel"),
+    v().setEntityFields(n)
   ),
-  clearFormModel: () => f(
-    d(e, "formModel"),
-    g().setEntity(t)
+  clearFormModel: () => C(
+    u(e, "formModel"),
+    v().setEntity(t)
   ),
-  expandSection: (n) => f(
-    d(e, "expandedSections"),
-    b().setValue(n, !0)
+  expandSection: (n) => C(
+    u(e, "expandedSections"),
+    g().setValue(n, !0)
   ),
-  collapseSection: (n) => f(
-    d(e, "expandedSections"),
-    b().setValue(n, !1)
+  collapseSection: (n) => C(
+    u(e, "expandedSections"),
+    g().setValue(n, !1)
   ),
-  setSectionExpanded: (n, r) => f(
-    d(e, "expandedSections"),
-    b().setValue(n, r)
+  setSectionExpanded: (n, o) => C(
+    u(e, "expandedSections"),
+    g().setValue(n, o)
   ),
-  clearExpandedSections: () => f(
-    d(e, "expandedSections"),
-    b().clearAllValues()
+  clearExpandedSections: () => C(
+    u(e, "expandedSections"),
+    g().clearAllValues()
   )
-}), d = (e, t) => `${e}.${t}`, xe = (e) => {
-  const [t] = w(
-    () => Ce("local", e)
-  ), [n] = w(
+}), u = (e, t) => `${e}.${t}`, me = (e) => {
+  const [t] = R(
+    () => fe("local", e)
+  ), [n] = R(
     () => Fe(
       "local",
       e.formModel
     )
-  ), [r, o] = W(t, e);
+  ), [o, r] = W(t, e);
   return {
     actions: n,
-    state: r,
-    dispatch: o
+    state: o,
+    dispatch: r
   };
 }, We = function({
   initialFormModel: t,
   children: n
 }) {
-  const { state: r, actions: o, dispatch: s } = xe(
-    fe(t)
+  const { state: o, actions: r, dispatch: s } = me(
+    Se(t)
   );
-  return /* @__PURE__ */ c(Se, { state: r, actions: o, dispatch: s, children: n });
-}, me = ({
+  return /* @__PURE__ */ c(Ce, { state: o, actions: r, dispatch: s, children: n });
+}, xe = ({
   label: e,
   ...t
-}) => /* @__PURE__ */ c(te, { children: /* @__PURE__ */ M(O, { gap: 2, alignItems: "center", justifyContent: "flex-start", children: [
+}) => /* @__PURE__ */ c(te, { children: /* @__PURE__ */ w(D, { gap: 2, alignItems: "center", justifyContent: "flex-start", children: [
   /* @__PURE__ */ c(ae, { ...t }),
   /* @__PURE__ */ c(X, { children: e })
 ] }) }), ge = ({
   children: e,
   maxHeight: t
 }) => /* @__PURE__ */ c(
-  D,
+  V,
   {
     maxHeight: t,
     overflowY: t ? "auto" : void 0,
@@ -252,11 +252,11 @@ const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, head
   children: e,
   disableClearAllButton: t = !1
 }) => {
-  const n = F(), r = x(), o = u(
-    () => n(r.clearFormModel()),
-    [r, n]
+  const n = f(), o = F(), r = d(
+    () => n(o.clearFormModel()),
+    [o, n]
   );
-  return /* @__PURE__ */ M(O, { flexWrap: "wrap", alignItems: "center", gap: !0, children: [
+  return /* @__PURE__ */ w(D, { flexWrap: "wrap", alignItems: "center", gap: !0, children: [
     e,
     !t && /* @__PURE__ */ c(
       j,
@@ -264,134 +264,134 @@ const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, head
         size: "small",
         leftIcon: ne,
         label: "Clear",
-        onClick: o
+        onClick: r
       }
     )
   ] });
-}, be = function({
+}, ve = function({
   label: t,
   sectionId: n
 }) {
-  const r = F(), o = x(), s = u(() => {
-    r(o.clearExpandedSections()), r(o.expandSection(n)), r(o.openFilters());
-  }, [o, r, n]);
+  const o = f(), r = F(), s = d(() => {
+    o(r.clearExpandedSections()), o(r.expandSection(n)), o(r.openFilters());
+  }, [r, o, n]);
   return /* @__PURE__ */ c(H, { label: t, variant: "secondary", onClick: s });
-}, we = function({
+}, Re = function({
   sectionId: t,
   label: n,
-  value: r,
-  onClickRemove: o
+  value: o,
+  onClickRemove: r
 }) {
-  const s = F(), a = x(), i = u(
+  const s = f(), a = F(), i = d(
     (l) => s(a.setFormModelFields(l)),
     [s, a]
-  ), h = u(() => {
-    o == null || o({ value: r, setFormModelFields: i });
-  }, [o, i, r]), p = u(() => {
+  ), p = d(() => {
+    r?.({ value: o, setFormModelFields: i });
+  }, [r, i, o]), h = d(() => {
     s(a.clearExpandedSections()), s(a.expandSection(t)), s(a.openFilters());
   }, [a, s, t]);
   return /* @__PURE__ */ c(
     H,
     {
       label: n ?? t,
-      onClick: p,
-      onClickRemove: o ? h : void 0
+      onClick: h,
+      onClickRemove: r ? p : void 0
     }
   );
 }, Je = function({
   sectionId: t,
   chips: n,
-  emptyChipLabel: r,
-  onClickRemoveOnChip: o
+  emptyChipLabel: o,
+  onClickRemoveOnChip: r
 }) {
-  return n != null && n.length ? /* @__PURE__ */ c(T, { children: n.map(({ label: s, value: a }) => /* @__PURE__ */ c(
-    we,
+  return n?.length ? /* @__PURE__ */ c(P, { children: n.map(({ label: s, value: a }) => /* @__PURE__ */ c(
+    Re,
     {
       label: s ?? t,
       sectionId: t,
-      onClickRemove: o,
+      onClickRemove: r,
       value: a
     },
     a
-  )) }) : r ? /* @__PURE__ */ c(be, { sectionId: t, label: r }) : null;
+  )) }) : o ? /* @__PURE__ */ c(ve, { sectionId: t, label: o }) : null;
 }, Qe = (e, t, n) => ({
-  chips: Re(
+  chips: be(
     e[t],
     n
   ),
-  onClickRemoveOnChip: Me(
+  onClickRemoveOnChip: we(
     e,
     t
   )
-}), Re = (e, t) => V(e).map((n) => {
-  const r = t == null ? void 0 : t.find((o) => o.value === n);
-  return { value: n, label: (r == null ? void 0 : r.label) ?? n };
-}), Me = (e, t) => ({ setFormModelFields: n, value: r }) => {
-  const o = { ...e[t] };
-  o[r] = !1, n({
-    [t]: o
+}), be = (e, t) => T(e).map((n) => {
+  const o = t?.find((r) => r.value === n);
+  return { value: n, label: o?.label ?? n };
+}), we = (e, t) => ({ setFormModelFields: n, value: o }) => {
+  const r = { ...e[t] };
+  r[o] = !1, n({
+    [t]: r
   });
 }, Ue = ({
   options: e,
   value: t,
   onValueChange: n,
-  ...r
-}) => /* @__PURE__ */ c(A, { disableContentPadding: !0, ...r, children: /* @__PURE__ */ c(ge, { maxHeight: "400px", children: e == null ? void 0 : e.map((o) => /* @__PURE__ */ c(
-  me,
+  ...o
+}) => /* @__PURE__ */ c(O, { disableContentPadding: !0, ...o, children: /* @__PURE__ */ c(ge, { maxHeight: "400px", children: e?.map((r) => /* @__PURE__ */ c(
+  xe,
   {
-    value: t == null ? void 0 : t[o.value],
-    label: o.label,
-    onValueChange: (s) => n == null ? void 0 : n({
+    value: t?.[r.value],
+    label: r.label,
+    onValueChange: (s) => n?.({
       ...t,
-      [o.value]: s
+      [r.value]: s
     })
   },
-  o.value
+  r.value
 )) }) }), Xe = ({
   options: e,
   value: t,
   noneSelectedLabel: n,
-  onValueChange: r,
-  ...o
+  onValueChange: o,
+  ...r
 }) => {
-  const [s, a] = w(""), i = R(
-    () => t ? V(t).map((l) => {
-      const S = e == null ? void 0 : e.find((m) => m.value === l);
-      return { value: l, label: (S == null ? void 0 : S.label) ?? l };
+  const [s, a] = R(""), i = b(
+    () => t ? T(t).map((l) => {
+      const m = e?.find((x) => x.value === l);
+      return { value: l, label: m?.label ?? l };
     }) : [],
     [e, t]
-  ), h = R(() => e == null ? void 0 : e.filter(
+  ), p = b(() => e?.filter(
     (l) => l.value.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1 || l.label.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1
-  ), [e, s]), p = u(
+  ), [e, s]), h = d(
     (l) => {
-      r == null || r(ve(l));
+      o?.(Me(l));
     },
-    [r]
+    [o]
   );
-  return /* @__PURE__ */ c(A, { ...o, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ c(O, { ...r, children: /* @__PURE__ */ c(
     le,
     {
-      options: h,
+      options: p,
       value: i,
-      onValueChange: p,
+      onValueChange: h,
       inputValue: s,
       noneSelectedLabel: n,
       onInputChange: a,
       closeMenuOnSelect: !1
     }
   ) });
-}, ve = (e) => e.reduce((t, n) => (t[n.value] = !0, t), {}), Ze = (e, t, n) => ({
-  chips: Le(
+}, Me = (e) => e.reduce((t, n) => (t[n.value] = !0, t), {}), Ze = (e, t, n) => ({
+  chips: ke(
     e[t],
     e[n]
   ),
-  onClickRemoveOnChip: Ee(
+  onClickRemoveOnChip: Le(
     t,
     n
   )
-}), Le = (e, t) => !e && !t ? [] : [
+}), ke = (e, t) => !e && !t ? [] : [
   { value: "dateRange", label: `${e ?? ""} - ${t ?? ""}` }
-], Ee = (e, t) => ({ setFormModelFields: n }) => {
+], Le = (e, t) => ({ setFormModelFields: n }) => {
   n({
     [e]: void 0,
     [t]: void 0
@@ -402,47 +402,47 @@ const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, head
     endDate: e[n]
   },
   /* eslint-disable @typescript-eslint/no-explicit-any */
-  onValueChange: (r, { dispatch: o, actions: s }) => {
+  onValueChange: (o, { dispatch: r, actions: s }) => {
     const a = {
-      [t]: r.startDate,
-      [n]: r.endDate
+      [t]: o.startDate,
+      [n]: o.endDate
     };
-    o(s.setFormModelFields(a));
+    r(s.setFormModelFields(a));
   }
 }), Ie = ({
   value: e,
   onValueChange: t,
   sectionId: n,
-  contentRight: r,
-  disableContentPadding: o,
+  contentRight: o,
+  disableContentPadding: r,
   label: s,
   leftIcon: a,
   ...i
 }) => {
-  const h = F(), p = x(), l = R(
-    () => ({ dispatch: h, actions: p }),
-    [p, h]
-  ), [S, m] = w("startDate"), C = R(() => ie(e), [e]), E = u(
-    (k) => {
-      t(de(k), l);
+  const p = f(), h = F(), l = b(
+    () => ({ dispatch: p, actions: h }),
+    [h, p]
+  ), [m, x] = R("startDate"), S = b(() => ie(e), [e]), L = d(
+    (E) => {
+      t(ue(E), l);
     },
     [t, l]
   );
   return /* @__PURE__ */ c(
-    A,
+    O,
     {
       label: s,
       leftIcon: a,
       sectionId: n,
-      contentRight: r,
-      disableContentPadding: o,
+      contentRight: o,
+      disableContentPadding: r,
       children: /* @__PURE__ */ c(y, { flex: 1, alignItems: "center", children: /* @__PURE__ */ c(y, { background: "white", indent: !0, children: /* @__PURE__ */ c(
-        ue,
+        de,
         {
-          setFocusedInput: m,
-          focusedInput: S,
-          value: C,
-          onValueChange: E,
+          setFocusedInput: x,
+          focusedInput: m,
+          value: S,
+          onValueChange: L,
           ...i
         }
       ) }) })
@@ -452,39 +452,39 @@ const he = ({ header: e = "Filter", ...t }) => /* @__PURE__ */ c(Y, { ...t, head
 export {
   Xe as ChipMultiSelectSection,
   Ie as DateRangeCalendarSection,
-  be as EmptyChip,
-  me as FilterCheckbox,
+  ve as EmptyChip,
+  xe as FilterCheckbox,
   ge as FilterCheckboxList,
   G as SearchFilterActionsContext,
   qe as SearchFilterButton,
-  we as SearchFilterChip,
+  Re as SearchFilterChip,
   Ye as SearchFilterChips,
-  Se as SearchFilterContext,
+  Ce as SearchFilterContext,
   q as SearchFilterDispatchContext,
   ze as SearchFilterDrawer,
   We as SearchFilterLocalStateContext,
   K as SearchFilterModelContext,
-  he as SearchFilterPanelHeader,
-  A as SearchFilterSection,
+  pe as SearchFilterPanelHeader,
+  O as SearchFilterSection,
   $ as SearchFilterStateContext,
   Je as SectionChips,
   Ue as SimpleCheckboxListSection,
   Ge as StickyFooter,
-  Re as createChipsForBooleanRecord,
-  Le as createChipsForDateRange,
+  be as createChipsForBooleanRecord,
+  ke as createChipsForDateRange,
   Qe as createChipsPropsForBooleanRecord,
   Ze as createChipsPropsForDateRange,
   _e as createDateRangeSectionProps,
-  Me as createOnClickRemoveOnChipForBooleanRecord,
-  Ee as createOnClickRemoveOnChipForDateRange,
+  we as createOnClickRemoveOnChipForBooleanRecord,
+  Le as createOnClickRemoveOnChipForDateRange,
   Fe as createSearchFilterActions,
-  fe as createSearchFilterInitialState,
-  Ce as createSearchFilterReducer,
-  pe as formatColumnIdToHeaderCellLabel,
-  d as getReducerIdFor,
-  xe as useLocalSearchFilterState,
-  x as useSearchFilterActions,
-  F as useSearchFilterDispatch,
+  Se as createSearchFilterInitialState,
+  fe as createSearchFilterReducer,
+  he as formatColumnIdToHeaderCellLabel,
+  u as getReducerIdFor,
+  me as useLocalSearchFilterState,
+  F as useSearchFilterActions,
+  f as useSearchFilterDispatch,
   Ke as useSearchFilterModel,
   z as useSearchFilterState
 };