@stenajs-webui/filter 19.0.0-next.11 → 19.0.0-next.13

package/dist/index.es.js

@@ -1,58 +1,65 @@
 (function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode("")),document.head.appendChild(e)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { createContext as L, useContext as E, useCallback as u, useState as M, useReducer as J, useMemo as b } from "react";
-import { Drawer as Q } from "@stenajs-webui/modal";
-import { cssColor as U } from "@stenajs-webui/theme";
-import { Spacing as X, Row as g, Space as O, Heading as Z, Column as P, Box as A, truthyKeysAsList as z } from "@stenajs-webui/core";
-import { FlatButton as H, stenaTimes as _, SecondaryButton as N, stenaSlidersMini as ee, MenuButton as te, Spinner as ne, Banner as re, Chip as D } from "@stenajs-webui/elements";
-import { jsx as o, jsxs as w, Fragment as q } from "react/jsx-runtime";
+import { jsx as o, jsxs as g, Fragment as $ } from "react/jsx-runtime";
+import { createContext as L, useContext as k, useCallback as u, useState as M, useReducer as Q, useMemo as b } from "react";
+import { Drawer as U } from "@stenajs-webui/modal";
+import { cssColor as D } from "@stenajs-webui/theme";
+import { Spacing as X, Row as w, Space as O, Heading as Z, Column as P, Box as A, truthyKeysAsList as q } from "@stenajs-webui/core";
+import { FlatButton as H, stenaTimes as _, SecondaryButton as N, stenaSlidersMini as ee, MenuButton as te, Spinner as ne, Banner as re, Chip as G } from "@stenajs-webui/elements";
 import { upperFirst as ce, lowerCase as oe } from "lodash";
 import { combineReducers as se } from "redux";
-import { reducerIdGate as B, createValueByIdReducer as ie, createEntityReducer as $, reducerIdGateAction as C, createEntityActions as v, createValueByIdActions as R } from "@stenajs-webui/redux";
+import { reducerIdGate as B, createValueByIdReducer as ie, createEntityReducer as z, reducerIdGateAction as C, createEntityActions as v, createValueByIdActions as R } from "@stenajs-webui/redux";
 import ae from "@emotion/styled";
 import { CheckboxWithLabel as le } from "@stenajs-webui/forms";
 import { ChipMultiSelect as de } from "@stenajs-webui/select";
 import { stringsToDateRange as ue, dateRangeToStrings as he, DateRangeCalendar as pe } from "@stenajs-webui/calendar";
-const Se = ({
-  onRequestClose: e,
-  header: t = "Filter",
-  contentRight: n
-}) => /* @__PURE__ */ o(X, {
-  children: /* @__PURE__ */ w(g, {
-    justifyContent: "space-between",
-    alignItems: "center",
-    height: "48px",
-    children: [/* @__PURE__ */ w(g, {
-      children: [/* @__PURE__ */ o(O, {
-        num: 3
-      }), /* @__PURE__ */ o(Z, {
-        variant: "h4",
-        children: t
-      })]
-    }), /* @__PURE__ */ w(g, {
-      gap: 1,
-      children: [n, /* @__PURE__ */ o(H, {
-        leftIcon: _,
-        onClick: e,
-        variant: "danger"
-      }), /* @__PURE__ */ o(O, {
-        num: 0.5
-      })]
-    })]
-  })
-}), G = L(null), W = () => {
-  const e = E(G);
+const Se = ({ onRequestClose: e, header: t = "Filter", contentRight: n }) => /* @__PURE__ */ o(
+  X,
+  {
+    position: "sticky",
+    top: 0,
+    background: D("--lhds-color-ui-50"),
+    zIndex: 100,
+    children: /* @__PURE__ */ g(
+      w,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        height: "48px",
+        children: [
+          /* @__PURE__ */ g(w, { children: [
+            /* @__PURE__ */ o(O, { num: 3 }),
+            /* @__PURE__ */ o(Z, { variant: "h4", children: t })
+          ] }),
+          /* @__PURE__ */ g(w, { gap: 1, children: [
+            n,
+            /* @__PURE__ */ o(
+              H,
+              {
+                leftIcon: _,
+                onClick: e,
+                variant: "danger"
+              }
+            ),
+            /* @__PURE__ */ o(O, { num: 0.5 })
+          ] })
+        ]
+      }
+    )
+  }
+), W = L(null), I = () => {
+  const e = k(W);
   if (!e)
     throw new Error(
       "Missing search filter context, wrap components with SearchFilterContext component."
     );
   return e;
 }, K = L(null), F = () => {
-  const e = E(K);
+  const e = k(K);
   if (!e)
     throw new Error("Missing search filter dispatch context.");
   return e;
 }, Y = L(null), x = () => {
-  const e = E(Y);
+  const e = k(Y);
   if (!e)
     throw new Error("Missing search filter actions context.");
   return e;
@@ -63,32 +70,38 @@ const Se = ({
   ...r
 }) => {
   const {
-    settings: {
-      open: c
-    }
-  } = W(), s = F(), i = x(), l = u(() => {
+    settings: { open: c }
+  } = I(), s = F(), i = x(), l = u(() => {
     s(i.closeFilters());
   }, [i, s]);
-  return /* @__PURE__ */ o(Q, {
-    isOpen: c,
-    onRequestClose: l,
-    ...r,
-    children: /* @__PURE__ */ w(P, {
-      height: "100%",
-      borderRadius: "var(--swui-border-radius)",
-      background: U("--lhds-color-ui-50"),
-      children: [/* @__PURE__ */ o(Se, {
-        onRequestClose: l,
-        header: t,
-        contentRight: n
-      }), /* @__PURE__ */ o(A, {
-        spacing: 1,
-        indent: 1,
-        gap: 1,
-        children: e
-      })]
-    })
-  });
+  return /* @__PURE__ */ o(
+    U,
+    {
+      floating: !0,
+      isOpen: c,
+      onRequestClose: l,
+      ...r,
+      children: /* @__PURE__ */ g(
+        P,
+        {
+          height: "100%",
+          borderRadius: "var(--swui-border-radius)",
+          background: D("--lhds-color-ui-50"),
+          children: [
+            /* @__PURE__ */ o(
+              Se,
+              {
+                onRequestClose: l,
+                header: t,
+                contentRight: n
+              }
+            ),
+            /* @__PURE__ */ o(A, { spacing: 1, indent: 1, gap: 1, children: e })
+          ]
+        }
+      )
+    }
+  );
 }, Ge = ({
   label: e = "Filters",
   leftIcon: t = ee
@@ -96,11 +109,14 @@ const Se = ({
   const n = F(), r = x(), c = u(() => {
     n(r.openFilters());
   }, [r, n]);
-  return /* @__PURE__ */ o(N, {
-    label: e,
-    leftIcon: t,
-    onClick: c
-  });
+  return /* @__PURE__ */ o(
+    N,
+    {
+      label: e,
+      leftIcon: t,
+      onClick: c
+    }
+  );
 }, T = function({
   sectionId: t,
   label: n,
@@ -113,51 +129,49 @@ const Se = ({
   contentRight: S
 }) {
   var j;
-  const a = W(), m = F(), f = x(), h = (j = a.expandedSections.values[t]) != null ? j : !1, k = u(() => {
+  const a = I(), m = F(), f = x(), h = (j = a.expandedSections.values[t]) != null ? j : !1, E = u(() => {
     m(f.setSectionExpanded(t, !h));
   }, [f, m, h, t]), y = n != null ? n : me(t);
-  return /* @__PURE__ */ w(q, {
-    children: [/* @__PURE__ */ o(te, {
-      label: y,
-      leftIcon: p,
-      expandable: !0,
-      expanded: h,
-      selected: h,
-      onClick: k,
-      right: S,
-      children: r ? /* @__PURE__ */ o(g, {
-        spacing: !0,
-        justifyContent: "center",
-        flex: 1,
-        children: /* @__PURE__ */ o(ne, {
-          size: "small"
-        })
-      }) : c ? /* @__PURE__ */ o(re, {
-        variant: "error",
-        text: c,
-        contentRight: s ? /* @__PURE__ */ o(H, {
-          label: "Retry",
-          onClick: s
-        }) : null
-      }) : l
-    }), h && /* @__PURE__ */ o(O, {})]
-  });
+  return /* @__PURE__ */ g($, { children: [
+    /* @__PURE__ */ o(
+      te,
+      {
+        label: y,
+        leftIcon: p,
+        expandable: !0,
+        expanded: h,
+        selected: h,
+        onClick: E,
+        right: S,
+        children: r ? /* @__PURE__ */ o(w, { spacing: !0, justifyContent: "center", flex: 1, children: /* @__PURE__ */ o(ne, { size: "small" }) }) : c ? /* @__PURE__ */ o(
+          re,
+          {
+            variant: "error",
+            text: c,
+            contentRight: s ? /* @__PURE__ */ o(H, { label: "Retry", onClick: s }) : null
+          }
+        ) : l
+      }
+    ),
+    h && /* @__PURE__ */ o(O, {})
+  ] });
 }, me = (e) => ce(oe(e)), We = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ o(P, {
-  style: {
-    marginTop: "auto"
-  },
-  justifyContent: "center",
-  spacing: 2,
-  indent: !0,
-  shadow: "popover",
-  zIndex: 1,
-  ...t,
-  children: e
-}), I = L(null), Ke = () => {
-  const e = E(I);
+}) => /* @__PURE__ */ o(
+  P,
+  {
+    style: { marginTop: "auto" },
+    justifyContent: "center",
+    spacing: 2,
+    indent: !0,
+    shadow: "popover",
+    zIndex: 1,
+    ...t,
+    children: e
+  }
+), J = L(null), Ie = () => {
+  const e = k(J);
   if (!e)
     throw new Error(
       "Missing search filter context, wrap components with SearchFilterContext component."
@@ -169,19 +183,13 @@ const Se = ({
   actions: r,
   children: c
 }) {
-  return /* @__PURE__ */ o(K.Provider, {
-    value: n,
-    children: /* @__PURE__ */ o(Y.Provider, {
-      value: r,
-      children: /* @__PURE__ */ o(G.Provider, {
-        value: t,
-        children: /* @__PURE__ */ o(I.Provider, {
-          value: t.formModel,
-          children: c
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ o(
+    K.Provider,
+    {
+      value: n,
+      children: /* @__PURE__ */ o(Y.Provider, { value: r, children: /* @__PURE__ */ o(W.Provider, { value: t, children: /* @__PURE__ */ o(J.Provider, { value: t.formModel, children: c }) }) })
+    }
+  );
 }, fe = (e) => ({
   settings: {
     open: !1
@@ -195,11 +203,11 @@ const Se = ({
   ),
   formModel: B(
     d(e, "formModel"),
-    $(t.formModel)
+    z(t.formModel)
   ),
   settings: B(
     d(e, "settings"),
-    $(t.settings)
+    z(t.settings)
   )
 }), xe = (e, t) => ({
   openFilters: () => C(
@@ -246,45 +254,42 @@ const Se = ({
       "local",
       e.formModel
     )
-  ), [r, c] = J(t, e);
+  ), [r, c] = Q(t, e);
   return {
     actions: n,
     state: r,
     dispatch: c
   };
-}, Ye = function({
+}, Ke = function({
   initialFormModel: t,
   children: n
 }) {
-  const {
-    state: r,
-    actions: c,
-    dispatch: s
-  } = ge(fe(t));
-  return /* @__PURE__ */ o(Ce, {
-    state: r,
-    actions: c,
-    dispatch: s,
-    children: n
-  });
+  const { state: r, actions: c, dispatch: s } = ge(
+    fe(t)
+  );
+  return /* @__PURE__ */ o(Ce, { state: r, actions: c, dispatch: s, children: n });
 }, V = ae.div`
   padding: calc(var(--swui-metrics-spacing) / 2)
     calc(var(--swui-metrics-indent) / 2);
-`, Ie = ({
+`, Ye = ({
   children: e,
   disableClearAllButton: t = !1
 }) => {
-  const n = F(), r = x(), c = u(() => n(r.clearFormModel()), [r, n]);
-  return /* @__PURE__ */ w(g, {
-    flexWrap: "wrap",
-    children: [e, !t && /* @__PURE__ */ o(V, {
-      children: /* @__PURE__ */ o(H, {
+  const n = F(), r = x(), c = u(
+    () => n(r.clearFormModel()),
+    [r, n]
+  );
+  return /* @__PURE__ */ g(w, { flexWrap: "wrap", children: [
+    e,
+    !t && /* @__PURE__ */ o(V, { children: /* @__PURE__ */ o(
+      H,
+      {
         size: "small",
         label: "Clear all",
         onClick: c
-      })
-    })]
-  });
+      }
+    ) })
+  ] });
 }, we = function({
   label: t,
   sectionId: n
@@ -292,54 +297,45 @@ const Se = ({
   const r = F(), c = x(), s = u(() => {
     r(c.clearExpandedSections()), r(c.expandSection(n)), r(c.openFilters());
   }, [c, r, n]);
-  return /* @__PURE__ */ o(V, {
-    children: /* @__PURE__ */ o(D, {
-      label: t,
-      variant: "secondary",
-      onClick: s
-    })
-  });
+  return /* @__PURE__ */ o(V, { children: /* @__PURE__ */ o(G, { label: t, variant: "secondary", onClick: s }) });
 }, ve = function({
   sectionId: t,
   label: n,
   value: r,
   onClickRemove: c
 }) {
-  const s = F(), i = x(), l = u((a) => s(i.setFormModelFields(a)), [s, i]), p = u(() => {
-    c == null || c({
-      value: r,
-      setFormModelFields: l
-    });
+  const s = F(), i = x(), l = u(
+    (a) => s(i.setFormModelFields(a)),
+    [s, i]
+  ), p = u(() => {
+    c == null || c({ value: r, setFormModelFields: l });
   }, [c, l, r]), S = u(() => {
     s(i.clearExpandedSections()), s(i.expandSection(t)), s(i.openFilters());
   }, [i, s, t]);
-  return /* @__PURE__ */ o(V, {
-    children: /* @__PURE__ */ o(D, {
+  return /* @__PURE__ */ o(V, { children: /* @__PURE__ */ o(
+    G,
+    {
       label: n != null ? n : t,
       onClick: S,
       onClickRemove: c ? p : void 0
-    })
-  });
+    }
+  ) });
 }, Je = function({
   sectionId: t,
   chips: n,
   emptyChipLabel: r,
   onClickRemoveOnChip: c
 }) {
-  return n != null && n.length ? /* @__PURE__ */ o(q, {
-    children: n.map(({
-      label: s,
-      value: i
-    }) => /* @__PURE__ */ o(ve, {
+  return n != null && n.length ? /* @__PURE__ */ o($, { children: n.map(({ label: s, value: i }) => /* @__PURE__ */ o(
+    ve,
+    {
       label: s != null ? s : t,
       sectionId: t,
       onClickRemove: c,
       value: i
-    }, i))
-  }) : r ? /* @__PURE__ */ o(we, {
-    sectionId: t,
-    label: r
-  }) : null;
+    },
+    i
+  )) }) : r ? /* @__PURE__ */ o(we, { sectionId: t, label: r }) : null;
 }, Qe = (e, t, n) => ({
   chips: Re(
     e[t],
@@ -349,7 +345,7 @@ const Se = ({
     e,
     t
   )
-}), Re = (e, t) => z(e).map((n) => {
+}), Re = (e, t) => q(e).map((n) => {
   var c;
   const r = t == null ? void 0 : t.find((s) => s.value === n);
   return { value: n, label: (c = r == null ? void 0 : r.label) != null ? c : n };
@@ -363,48 +359,42 @@ const Se = ({
   value: t,
   onValueChange: n,
   ...r
-}) => /* @__PURE__ */ o(T, {
-  disableContentPadding: !0,
-  ...r,
-  children: /* @__PURE__ */ o(P, {
-    maxHeight: "400px",
-    overflowY: "auto",
-    flex: 1,
-    gap: 1,
-    spacing: 1,
-    children: e == null ? void 0 : e.map((c) => /* @__PURE__ */ o(g, {
-      alignItems: "center",
-      children: /* @__PURE__ */ o(le, {
-        tabIndex: -1,
-        value: t == null ? void 0 : t[c.value],
-        label: c.label,
-        onValueChange: (s) => n == null ? void 0 : n({
-          ...t,
-          [c.value]: s
-        })
-      })
-    }, c.value))
-  })
-}), Xe = ({
+}) => /* @__PURE__ */ o(T, { disableContentPadding: !0, ...r, children: /* @__PURE__ */ o(P, { maxHeight: "400px", overflowY: "auto", flex: 1, gap: 1, spacing: 1, children: e == null ? void 0 : e.map((c) => /* @__PURE__ */ o(w, { alignItems: "center", children: /* @__PURE__ */ o(
+  le,
+  {
+    tabIndex: -1,
+    value: t == null ? void 0 : t[c.value],
+    label: c.label,
+    onValueChange: (s) => n == null ? void 0 : n({
+      ...t,
+      [c.value]: s
+    })
+  }
+) }, c.value)) }) }), Xe = ({
   options: e,
   value: t,
   noneSelectedLabel: n,
   onValueChange: r,
   ...c
 }) => {
-  const [s, i] = M(""), l = b(() => t ? z(t).map((a) => {
-    var f;
-    const m = e == null ? void 0 : e.find((h) => h.value === a);
-    return {
-      value: a,
-      label: (f = m == null ? void 0 : m.label) != null ? f : a
-    };
-  }) : [], [e, t]), p = b(() => e == null ? void 0 : e.filter((a) => a.value.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1 || a.label.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1), [e, s]), S = u((a) => {
-    r == null || r(be(a));
-  }, [r]);
-  return /* @__PURE__ */ o(T, {
-    ...c,
-    children: /* @__PURE__ */ o(de, {
+  const [s, i] = M(""), l = b(
+    () => t ? q(t).map((a) => {
+      var f;
+      const m = e == null ? void 0 : e.find((h) => h.value === a);
+      return { value: a, label: (f = m == null ? void 0 : m.label) != null ? f : a };
+    }) : [],
+    [e, t]
+  ), p = b(() => e == null ? void 0 : e.filter(
+    (a) => a.value.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1 || a.label.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1
+  ), [e, s]), S = u(
+    (a) => {
+      r == null || r(be(a));
+    },
+    [r]
+  );
+  return /* @__PURE__ */ o(T, { ...c, children: /* @__PURE__ */ o(
+    de,
+    {
       options: p,
       value: l,
       onValueChange: S,
@@ -412,20 +402,20 @@ const Se = ({
       noneSelectedLabel: n,
       onInputChange: i,
       closeMenuOnSelect: !1
-    })
-  });
+    }
+  ) });
 }, be = (e) => e.reduce((t, n) => (t[n.value] = !0, t), {}), Ze = (e, t, n) => ({
   chips: Le(
     e[t],
     e[n]
   ),
-  onClickRemoveOnChip: Ee(
+  onClickRemoveOnChip: ke(
     t,
     n
   )
 }), Le = (e, t) => !e && !t ? [] : [
   { value: "dateRange", label: `${e != null ? e : ""} - ${t != null ? t : ""}` }
-], Ee = (e, t) => ({ setFormModelFields: n }) => {
+], ke = (e, t) => ({ setFormModelFields: n }) => {
   n({
     [e]: void 0,
     [t]: void 0
@@ -452,34 +442,35 @@ const Se = ({
   leftIcon: i,
   ...l
 }) => {
-  const p = F(), S = x(), a = b(() => ({
-    dispatch: p,
-    actions: S
-  }), [S, p]), [m, f] = M("startDate"), h = b(() => ue(e), [e]), k = u((y) => {
-    t(he(y), a);
-  }, [t, a]);
-  return /* @__PURE__ */ o(T, {
-    label: s,
-    leftIcon: i,
-    sectionId: n,
-    contentRight: r,
-    disableContentPadding: c,
-    children: /* @__PURE__ */ o(A, {
-      flex: 1,
-      alignItems: "center",
-      children: /* @__PURE__ */ o(A, {
-        background: "white",
-        indent: !0,
-        children: /* @__PURE__ */ o(pe, {
+  const p = F(), S = x(), a = b(
+    () => ({ dispatch: p, actions: S }),
+    [S, p]
+  ), [m, f] = M("startDate"), h = b(() => ue(e), [e]), E = u(
+    (y) => {
+      t(he(y), a);
+    },
+    [t, a]
+  );
+  return /* @__PURE__ */ o(
+    T,
+    {
+      label: s,
+      leftIcon: i,
+      sectionId: n,
+      contentRight: r,
+      disableContentPadding: c,
+      children: /* @__PURE__ */ o(A, { flex: 1, alignItems: "center", children: /* @__PURE__ */ o(A, { background: "white", indent: !0, children: /* @__PURE__ */ o(
+        pe,
+        {
           setFocusedInput: f,
           focusedInput: m,
           value: h,
-          onValueChange: k,
+          onValueChange: E,
           ...l
-        })
-      })
-    })
-  });
+        }
+      ) }) })
+    }
+  );
 };
 export {
   Xe as ChipMultiSelectSection,
@@ -488,15 +479,15 @@ export {
   Y as SearchFilterActionsContext,
   Ge as SearchFilterButton,
   ve as SearchFilterChip,
-  Ie as SearchFilterChips,
+  Ye as SearchFilterChips,
   Ce as SearchFilterContext,
   K as SearchFilterDispatchContext,
   qe as SearchFilterDrawer,
-  Ye as SearchFilterLocalStateContext,
-  I as SearchFilterModelContext,
+  Ke as SearchFilterLocalStateContext,
+  J as SearchFilterModelContext,
   Se as SearchFilterPanelHeader,
   T as SearchFilterSection,
-  G as SearchFilterStateContext,
+  W as SearchFilterStateContext,
   Je as SectionChips,
   Ue as SimpleCheckboxListSection,
   We as StickyFooter,
@@ -506,7 +497,7 @@ export {
   Ze as createChipsPropsForDateRange,
   _e as createDateRangeSectionProps,
   Me as createOnClickRemoveOnChipForBooleanRecord,
-  Ee as createOnClickRemoveOnChipForDateRange,
+  ke as createOnClickRemoveOnChipForDateRange,
   xe as createSearchFilterActions,
   fe as createSearchFilterInitialState,
   Fe as createSearchFilterReducer,
@@ -515,7 +506,7 @@ export {
   ge as useLocalSearchFilterState,
   x as useSearchFilterActions,
   F as useSearchFilterDispatch,
-  Ke as useSearchFilterModel,
-  W as useSearchFilterState
+  Ie as useSearchFilterModel,
+  I as useSearchFilterState
 };
 //# sourceMappingURL=index.es.js.map