@m4l/components 9.38.0 → 9.39.0

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -1,196 +1,215 @@
-import { jsxs as M, jsx as f, Fragment as ye } from "@emotion/react/jsx-runtime";
-import { useEnvironment as ve, useModuleDictionary as De } from "@m4l/core";
-import { useState as S, useRef as w, useMemo as m, useCallback as a, useReducer as Te } from "react";
-import { DynamicFilter as Ae } from "../../components/DynamicFilter/DynamicFilter.js";
-import { DynamicSort as Ie } from "../../components/DynamicSort/DynamicSort.js";
-import { ToggleIconButton as se } from "../../components/extended/mui/ToggleIconButton/ToggleIconButton.js";
-import { getPropDataTestId as H } from "../../test/getNameDataTestId.js";
-import { COOKIE_APPLIED_FILTERS as x, COOKIE_APPLIED_SORTS as E, M4LDYNAMIC_KEY_FILTER_AND_SORT as N } from "./constants.js";
-import { ICON_PATH_FILTER as _e, ICON_PATH_SORT as be, ASSETS as Re } from "./icons.js";
-import { DynamicFilterAndSortSlots as V } from "./slots/DynamicFilterAndSortEnum.js";
-import { StackLeftActionsStyled as ke, StackRightActionsStyled as we, ActionRefreshStyled as le, StackCustomHeaderStyled as xe } from "./slots/DynamicFilterAndSortSlots.js";
-import { deepEqual as ae } from "fast-equals";
-import { getPurgedCookie as ce } from "./helpers.js";
-import { useWindowToolsMF as Ee } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
-import { DICCTIONARY as $e } from "../../components/DynamicFilter/dictionary.js";
-const Ge = (ue) => {
+import { jsxs as H, jsx as f, Fragment as De } from "@emotion/react/jsx-runtime";
+import { useEnvironment as be, useModuleDictionary as Te } from "@m4l/core";
+import { useState as g, useRef as F, useCallback as l, useEffect as _e, useMemo as h, useReducer as Ie } from "react";
+import { DynamicFilter as Oe } from "../../components/DynamicFilter/DynamicFilter.js";
+import { DynamicSort as ke } from "../../components/DynamicSort/DynamicSort.js";
+import { ToggleIconButton as ue } from "../../components/extended/mui/ToggleIconButton/ToggleIconButton.js";
+import { getPropDataTestId as V } from "../../test/getNameDataTestId.js";
+import { COOKIE_APPLIED_FILTERS as $, COOKIE_APPLIED_SORTS as P, M4LDYNAMIC_KEY_FILTER_AND_SORT as z, STACK_NARROW_BREAKPOINT_PX as Ee } from "./constants.js";
+import { ICON_PATH_FILTER as xe, ICON_PATH_SORT as $e, ASSETS as Pe } from "./icons.js";
+import { DynamicFilterAndSortSlots as Y } from "./slots/DynamicFilterAndSortEnum.js";
+import { StackLeftActionsStyled as Ke, StackRightActionsStyled as Le, ActionRefreshStyled as fe, SeparatorStyled as Ne, StackCustomHeaderStyled as Me } from "./slots/DynamicFilterAndSortSlots.js";
+import { deepEqual as me } from "fast-equals";
+import { getPurgedCookie as de } from "./helpers.js";
+import { useWindowToolsMF as Be } from "../../components/WindowBase/hooks/useWindowToolsMF/index.js";
+import { DICCTIONARY as He } from "../../components/DynamicFilter/dictionary.js";
+import { Divider as Ve } from "../../components/extended/mui/Divider/Divider.js";
+const ot = (ge) => {
   const {
     fields: o,
     sorts: r,
-    onChangeFilterSort: d,
-    dataTestId: g,
-    withAllField: B,
-    rightActions: Y,
-    initialFilterToggleed: fe = !0,
-    initialSortToggleed: me = !0,
-    prefixCookie: s,
-    setCookie: p,
-    getCookie: j,
-    filterSortAutomatic: u = !0,
-    visibleRefresh: $ = !1,
-    withExternalRefresh: q
-  } = ue, { host_static_assets: C, environment_assets: F } = ve(), [c, y] = S(() => ({
-    filter: fe,
-    sort: me
-  })), [v] = S(() => ce(
-    j?.(
-      s ? `${s}_${x}` : x
+    onChangeFilterSort: S,
+    dataTestId: p,
+    withAllField: j,
+    rightActions: q,
+    initialFilterToggleed: he = !0,
+    initialSortToggleed: Se = !0,
+    prefixCookie: c,
+    setCookie: y,
+    getCookie: W,
+    filterSortAutomatic: m = !0,
+    visibleRefresh: K = !1,
+    withExternalRefresh: U
+  } = ge, { host_static_assets: v, environment_assets: R } = be(), [i, A] = g(() => ({
+    filter: he,
+    sort: Se
+  })), [w] = g(() => de(
+    W?.(
+      c ? `${c}_${$}` : $
     )
-  )), [D] = S(() => ce(
-    j?.(
-      s ? `${s}_${E}` : E
+  )), [D] = g(() => de(
+    W?.(
+      c ? `${c}_${P}` : P
     )
-  )), T = w(0), l = w(null), i = w(null), [A, O] = S(!1), [I, P] = S(!1), { toast: U } = Ee(), { getLabel: W } = De(), [L, _] = S(() => ({
-    filter: v?.length === 0,
+  )), b = F(0), a = F(null), s = F(null), [T, pe] = g(!1), L = F(null), C = F(null), X = l((e) => {
+    if (L.current?.disconnect(), C.current !== null && (cancelAnimationFrame(C.current), C.current = null), !e || typeof ResizeObserver > "u")
+      return;
+    const t = (d) => pe(d > 0 && d < Ee);
+    t(e.getBoundingClientRect().width), C.current = requestAnimationFrame(
+      () => t(e.getBoundingClientRect().width)
+    );
+    const u = new ResizeObserver((d) => {
+      t(d[0]?.contentRect.width ?? 0);
+    });
+    u.observe(e), L.current = u;
+  }, []);
+  _e(
+    () => () => {
+      L.current?.disconnect(), C.current !== null && cancelAnimationFrame(C.current);
+    },
+    []
+  );
+  const [_, N] = g(!1), [I, M] = g(!1), { toast: G } = Be(), { getLabel: J } = Te(), [B, O] = g(() => ({
+    filter: w?.length === 0,
     sort: D?.length === 0
-  })), de = m(
-    () => c.filter || c.sort,
-    [c]
-  ), b = `${C}/${F}/${Re.refresh}`, n = w({
-    eventFilters: { filters: v, rawFilters: [] },
+  })), Ce = h(
+    () => i.filter || i.sort,
+    [i]
+  ), k = `${v}/${R}/${Pe.refresh}`, n = F({
+    eventFilters: { filters: w, rawFilters: [] },
     eventSorts: { sorts: D, rawSorts: [] }
-  }), z = (e) => {
-    y((t) => ({ ...t, [e]: !t[e] }));
-  }, R = a(() => {
+  }), Q = (e) => {
+    A((t) => ({ ...t, [e]: !t[e] }));
+  }, E = l(() => {
     if (o.some((e) => e.presence === "fixed")) {
       const e = n.current?.eventFilters?.filters;
       return !(!e || e.length === 0);
     }
     return !0;
-  }, [n, o]), [G, J] = Te(
+  }, [n, o]), [Z, ee] = Ie(
     (e, t) => ({ ...e, [t]: !e[t] }),
     { filters: !1, sorts: !1 }
-  ), Q = a(() => {
-    O(!0);
-  }, [O]), X = a(
+  ), te = l(() => {
+    N(!0);
+  }, [N]), re = l(
     (e, t) => {
-      _((h) => ({ ...h, filter: e.length === 0 })), n.current?.eventFilters?.filters && !ae(n.current?.eventFilters?.filters, e) && p?.(
-        s ? `${s}_${x}` : x,
+      O((u) => ({ ...u, filter: e.length === 0 })), n.current?.eventFilters?.filters && !me(n.current?.eventFilters?.filters, e) && y?.(
+        c ? `${c}_${$}` : $,
         "window",
         e
       ), n.current = {
         ...n.current,
         eventFilters: { filters: e, rawFilters: t }
-      }, (T.current > 0 || T.current === 0 && !r) && d(n.current), T.current++, J("filters"), O(!1);
+      }, (b.current > 0 || b.current === 0 && !r) && S(n.current), b.current++, ee("filters"), N(!1);
     },
-    [d, s, p, _, r]
-  ), Z = a(() => {
-    P(!0);
-  }, [P]), ee = a(
+    [S, c, y, O, r]
+  ), ne = l(() => {
+    M(!0);
+  }, [M]), ie = l(
     (e, t) => {
-      _((h) => ({ ...h, sort: e.length === 0 })), n.current?.eventSorts?.sorts && !ae(n.current?.eventSorts?.sorts, e) && p?.(
-        s ? `${s}_${E}` : E,
+      O((u) => ({ ...u, sort: e.length === 0 })), n.current?.eventSorts?.sorts && !me(n.current?.eventSorts?.sorts, e) && y?.(
+        c ? `${c}_${P}` : P,
         "window",
         e
       ), n.current = {
         ...n.current,
         eventSorts: { sorts: e, rawSorts: t }
-      }, R() ? d(n.current) : T.current++, P(!1), J("sorts");
+      }, E() ? S(n.current) : b.current++, M(!1), ee("sorts");
     },
     [
-      d,
-      s,
-      p,
-      _,
-      R
+      S,
+      c,
+      y,
+      O,
+      E
     ]
-  ), k = a(() => {
-    u ? R() ? d(n.current) : U(
-      { title: W($e.error_invalid_filters_before) },
+  ), x = l(() => {
+    m ? E() ? S(n.current) : G(
+      { title: J(He.error_invalid_filters_before) },
       { type: "error" }
-    ) : (l.current && l.current.fireOnChangeFilter(), i.current && i.current.fireOnChangeSort());
+    ) : (a.current && a.current.fireOnChangeFilter(), s.current && s.current.fireOnChangeSort());
   }, [
-    u,
-    W,
-    R,
-    d,
-    U
-  ]), ge = m(
-    () => /* @__PURE__ */ M(
-      ke,
+    m,
+    J,
+    E,
+    S,
+    G
+  ]), Fe = h(
+    () => /* @__PURE__ */ H(
+      Ke,
       {
         direction: "row",
-        ...H(
-          N,
-          V.stackLeftActions,
-          g
+        ...V(
+          z,
+          Y.stackLeftActions,
+          p
         ),
         children: [
           o && o.length > 0 && /* @__PURE__ */ f(
-            se,
+            ue,
             {
               badgeProps: {
                 variant: "dot",
-                invisible: L.filter,
+                invisible: B.filter,
                 color: "primary"
               },
-              icon: `${C}/${F}/${_e}`,
-              isToggled: c.filter,
-              onToggle: () => z("filter")
+              icon: `${v}/${R}/${xe}`,
+              isToggled: i.filter,
+              onToggle: () => Q("filter")
             }
           ),
           r && r.length > 0 && /* @__PURE__ */ f(
-            se,
+            ue,
             {
               badgeProps: {
                 variant: "dot",
-                invisible: L.sort,
+                invisible: B.sort,
                 color: "primary"
               },
-              icon: `${C}/${F}/${be}`,
-              isToggled: c.sort,
-              onToggle: () => z("sort")
+              icon: `${v}/${R}/${$e}`,
+              isToggled: i.sort,
+              onToggle: () => Q("sort")
             }
           )
         ]
       }
     ),
     [
-      c,
-      L,
-      C,
-      F,
-      g,
+      i,
+      B,
+      v,
+      R,
+      p,
       o,
       r
     ]
-  ), he = m(
-    () => /* @__PURE__ */ M(
-      we,
+  ), ye = h(
+    () => /* @__PURE__ */ H(
+      Le,
       {
         direction: "row",
-        ...H(
-          N,
-          V.stackRightActions,
-          g
+        ...V(
+          z,
+          Y.stackRightActions,
+          p
         ),
         children: [
           /* @__PURE__ */ f(
-            le,
+            fe,
             {
               ownerState: {
-                isDirty: A || I,
-                automatic: u
+                isDirty: _ || I,
+                automatic: m
               },
-              icon: b,
+              icon: k,
               "aria-label": "refresh",
-              onClick: k,
+              onClick: x,
               variant: "outline"
             }
           ),
-          Y
+          q
         ]
       }
     ),
-    [g, A, I, u, b, k, Y]
-  ), te = a(() => i.current ? i.current.getCurrentSorts() : [], [i]), re = a(
+    [p, _, I, m, k, x, q]
+  ), oe = l(() => s.current ? s.current.getCurrentSorts() : [], [s]), se = l(
     (e) => {
-      if (i.current) {
-        const t = r?.find((K) => K.name === e.columnKey), h = t?.presence === "fixed";
+      if (s.current) {
+        const t = r?.find((d) => d.name === e.columnKey), u = t?.presence === "fixed";
         switch (e.action) {
           case "add": {
-            const K = {
-              id: i.current.getNewId(),
+            const d = {
+              id: s.current.getNewId(),
               field: {
                 name: e.columnKey,
                 type: t?.type || "string",
@@ -198,108 +217,121 @@ const Ge = (ue) => {
                 label: e.label
               },
               isSet: !0,
-              fixed: h,
+              fixed: u,
               fieldType: t?.type || "string",
               operator: e.direction
             };
-            y((Fe) => ({ ...Fe, sort: !0 })), i.current.addExternalSort(K);
+            A((we) => ({ ...we, sort: !0 })), s.current.addExternalSort(d);
             break;
           }
           case "remove":
-            h || i.current.removeExternalSort(
+            u || s.current.removeExternalSort(
               e.columnKey
             );
             break;
         }
       }
     },
-    [i, r]
-  ), ne = a(
+    [s, r]
+  ), le = l(
     (e) => {
-      if (l.current)
+      if (a.current)
         switch (e.action) {
           case "add":
-            y((t) => ({ ...t, filter: !0 })), l.current.addExternalFilter(e.columnKey);
+            A((t) => ({ ...t, filter: !0 })), a.current.addExternalFilter(e.columnKey);
             break;
           case "openPopoverMenuFields":
-            y((t) => ({ ...t, filter: !0 })), l.current.openPopoverMenuFields();
+            A((t) => ({ ...t, filter: !0 })), a.current.openPopoverMenuFields();
             break;
           default:
             return;
         }
     },
-    [l]
-  ), oe = a(() => l.current ? l.current.getCurrentFilters() : [], [l]), ie = m(
-    () => /* @__PURE__ */ M(ye, { children: [
+    [a]
+  ), ce = l(() => a.current ? a.current.getCurrentFilters() : [], [a]), ae = h(
+    () => /* @__PURE__ */ H(De, { children: [
       /* @__PURE__ */ f(
-        Ae,
+        Oe,
         {
-          ref: l,
-          visibleRefresh: $,
-          automatic: u,
+          ref: a,
+          visibleRefresh: K,
+          automatic: m,
           fields: o,
-          initialAppliedFilters: v,
-          onChangeFilters: X,
-          withAllField: B,
-          onDirty: Q
+          initialAppliedFilters: w,
+          onChangeFilters: re,
+          withAllField: j,
+          onDirty: te
         }
       ),
       r ? /* @__PURE__ */ f(
-        Ie,
+        ke,
         {
-          ref: i,
-          visibleRefresh: $,
-          automatic: u,
+          ref: s,
+          visibleRefresh: K,
+          automatic: m,
           fields: r,
           initialAppliedSorts: D,
-          onChangeSorts: ee,
-          onDirty: Z
+          onChangeSorts: ie,
+          onDirty: ne,
+          leadingSeparator: /* @__PURE__ */ f(
+            Ne,
+            {
+              ownerState: {
+                showDynamicFilter: i.filter,
+                showDynamicSort: i.sort,
+                isNarrow: T
+              },
+              children: /* @__PURE__ */ f(Ve, { orientation: "vertical", customVariant: "solid" })
+            }
+          )
         }
       ) : null,
-      q && /* @__PURE__ */ f(
-        le,
+      U && /* @__PURE__ */ f(
+        fe,
         {
           ownerState: {
-            automatic: u,
-            isDirty: A || I
+            automatic: m,
+            isDirty: _ || I
           },
-          icon: b,
+          icon: k,
           "aria-label": "refresh",
-          onClick: k
+          onClick: x
         }
       )
     ] }),
-    [$, u, o, v, X, B, Q, r, D, ee, Z, q, A, I, b, k]
-  ), Se = m(
+    [K, m, o, w, re, j, te, r, D, ie, ne, U, _, I, k, x, i, T]
+  ), ve = h(
     () => /* @__PURE__ */ f(
-      xe,
+      Me,
       {
+        ref: X,
         direction: "row",
         ownerState: {
-          showDynamicFilter: c.filter,
-          showDynamicSort: c.sort
+          showDynamicFilter: i.filter,
+          showDynamicSort: i.sort,
+          isNarrow: T
         },
-        ...H(
-          N,
-          V.stackCustomHeader,
-          g
+        ...V(
+          z,
+          Y.stackCustomHeader,
+          p
         ),
-        children: ie
+        children: ae
       }
     ),
-    [c, g, ie]
-  ), pe = m(() => {
+    [i, p, ae, T, X]
+  ), Re = h(() => {
     if (!(!r || r.length === 0))
       return {
         sortsColumns: r.map((e) => e.name),
-        sortsApplied: te().map((e) => ({
+        sortsApplied: oe().map((e) => ({
           columnKey: e.field.name,
           removable: !e.fixed,
           direction: e.operator
         })),
-        onChange: re
+        onChange: se
       };
-  }, [r, G.sorts, te, re]), Ce = m(() => {
+  }, [r, Z.sorts, oe, se]), Ae = h(() => {
     if (!(!o || o.length === 0))
       return {
         filterColumns: o.map((e) => ({
@@ -307,22 +339,22 @@ const Ge = (ue) => {
           multiple: e.multiple || !1,
           skipColumnValidation: e.skipColumnValidation || !1
         })),
-        filtersApplied: oe().map((e) => ({
+        filtersApplied: ce().map((e) => ({
           columnKey: e.field.name,
           isValid: e.isSet
         })),
-        onChange: ne
+        onChange: le
       };
-  }, [o, G.filters, oe, ne]);
+  }, [o, Z.filters, ce, le]);
   return {
-    leftActions: ge,
-    rightActions: he,
-    visibleCustomHeader: de,
-    customHeaderComponent: Se,
-    externalSortSettings: pe,
-    externalFilterSettings: Ce
+    leftActions: Fe,
+    rightActions: ye,
+    visibleCustomHeader: Ce,
+    customHeaderComponent: ve,
+    externalSortSettings: Re,
+    externalFilterSettings: Ae
   };
 };
 export {
-  Ge as useDynamicFilterAndSort
+  ot as useDynamicFilterAndSort
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.38.0",
+  "version": "9.39.0",
   "publishConfig": {
     "access": "public"
   },
@@ -52,24 +52,24 @@
     "@hookform/resolvers": "2.9.11",
     "nprogress": "0.2.0",
     "react-transition-group": "4.4.5",
-    "react-rnd": "10.5.2",
-    "@mui/x-date-pickers": "6.20.2",
-    "react-dropzone": "14.4.1",
     "react-color": "2.19.3",
     "react-draggable": "4.5.0",
     "react-spinners": "0.13.8",
+    "react-dropzone": "14.4.1",
+    "@mui/x-date-pickers": "6.20.2",
+    "react-rnd": "10.5.2",
     "chart.js": "4.5.1",
     "chartjs-chart-error-bars": "4.4.5",
     "qrcode.react": "3.2.0",
-    "simplebar-react": "3.2.6",
-    "react-simple-code-editor": "0.14.1",
-    "react-resizable-panels": "2.1.9",
     "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
+    "react-simple-code-editor": "0.14.1",
+    "react-resizable-panels": "2.1.9",
+    "simplebar-react": "3.2.6",
     "date-fns": "2.30.0",
-    "react-resizable": "3.1.3",
     "react-window": "1.8.11",
+    "react-resizable": "3.1.3",
     "@tanstack/react-virtual": "3.13.23"
   }
 }