@m4l/components 0.1.20 → 0.1.22

package/components/CommonActions/components/ActionCancel/{index.3775989f.js → index.7b862bd3.js}

@@ -1,5 +1,5 @@
 import { useModuleDictionary as n } from "@m4l/core";
-import { B as r } from "../../../mui_extended/Button/index.16591787.js";
+import { B as r } from "../../../mui_extended/Button/index.6df3e958.js";
 import { jsx as i } from "react/jsx-runtime";
 const m = (o) => {
   const {

package/components/CommonActions/components/ActionFormCancel/{index.d69d9e0f.js → index.b59a0011.js}

@@ -2,9 +2,9 @@ import { useFormContext as f, useFormState as p } from "react-hook-form";
 import { useNavigate as C } from "react-router-dom";
 import { useModuleDictionary as g, useModuleSkeleton as d } from "@m4l/core";
 import { Skeleton as k } from "@mui/material";
-import { B as _ } from "../../../mui_extended/Button/index.16591787.js";
+import { B as _ } from "../../../mui_extended/Button/index.6df3e958.js";
 import { useCallback as v } from "react";
-import { u as h } from "../../../../hooks/useModal/index.8201ccec.js";
+import { u as h } from "../../../../hooks/useModal/index.34cc1e55.js";
 import { jsx as r } from "react/jsx-runtime";
 function A(n) {
   const {

package/components/CommonActions/components/ActionIntro/{index.ca7b6952.js → index.35c8757f.js}

@@ -1,5 +1,5 @@
 import { useModuleDictionary as r } from "@m4l/core";
-import { B as n } from "../../../mui_extended/Button/index.16591787.js";
+import { B as n } from "../../../mui_extended/Button/index.6df3e958.js";
 import { jsx as i } from "react/jsx-runtime";
 const e = (o) => {
   const {

package/components/CommonActions/components/Actions/{index.a908e4b9.js → index.edceed6b.js}

@@ -6,16 +6,16 @@ import "@mui/material/Button";
 import "react-hook-form";
 import "react-router-dom";
 import { useState as W, useMemo as w, forwardRef as st, useRef as B, useImperativeHandle as rt, useEffect as at, useCallback as j } from "react";
-import "../../../../contexts/ModalContext/index.699767c7.js";
+import "../../../../contexts/ModalContext/index.33dc1be9.js";
 import "@mui/lab";
 import { I as y } from "../../../mui_extended/IconButton/index.4b5ce8b5.js";
-import { u as I, a as lt, O as ct } from "../../../DataGrid/index.5cbf0dd8.js";
-import { P as dt } from "../../../mui_extended/Pager/index.80c2f8a0.js";
+import { u as I, a as lt, O as ct } from "../../../DataGrid/index.cd4fff69.js";
+import { P as dt } from "../../../mui_extended/Pager/index.b072df6b.js";
 import { D as pt } from "../../../../react-data-grid.d46d625e.js";
-import { u as gt } from "../../../../hooks/useModal/index.8201ccec.js";
-import { A as ft } from "../ActionCancel/index.3775989f.js";
-import { A as ut } from "../ActionIntro/index.ca7b6952.js";
-import { P as mt } from "../../../mui_extended/Popover/index.305f2ea5.js";
+import { u as gt } from "../../../../hooks/useModal/index.34cc1e55.js";
+import { A as ft } from "../ActionCancel/index.7b862bd3.js";
+import { A as ut } from "../ActionIntro/index.35c8757f.js";
+import { P as mt } from "../../../mui_extended/Popover/index.d708b699.js";
 import { I as N } from "../../../Icon/index.f569765b.js";
 import { useResponsiveDesktop as ht } from "@m4l/graphics";
 const _t = p("div")(({

package/components/DataGrid/{index.5cbf0dd8.js → index.cd4fff69.js}

@@ -6,9 +6,9 @@ import { HTML5Backend as ge } from "react-dnd-html5-backend";
 import { SvgIcon as B, Checkbox as fe, InputBase as he, Skeleton as pe } from "@mui/material";
 import { jsx as d, jsxs as Q } from "react/jsx-runtime";
 import { voidFunction as I, useModuleDictionary as we, useModuleSkeleton as me } from "@m4l/core";
-import { A as ye, a as Ce } from "../CommonActions/components/Actions/index.a908e4b9.js";
-import { g as be, d as ve } from "../ModalDialog/index.16024a4e.js";
-import { g as xe, d as Re } from "../mui_extended/Pager/index.80c2f8a0.js";
+import { A as ye, a as Ce } from "../CommonActions/components/Actions/index.edceed6b.js";
+import { g as be, d as ve } from "../ModalDialog/index.e1f31e50.js";
+import { g as xe, d as Re } from "../mui_extended/Pager/index.b072df6b.js";
 const Se = A("div")(() => ({
   display: "flex",
   flexDirection: "column",

package/components/DynamicFilter/{index.8a571617.js → index.4d3c60b4.js}

@@ -4,7 +4,8 @@ import { useRef as me, useState as S, useMemo as E, useCallback as _, useEffect
 import { useModuleDictionary as $, useHostTools as z, useEnvironment as j, voidFunction as V, useFlagsPresent as He } from "@m4l/core";
 import * as C from "yup";
 import { useFormContext as B, useWatch as ge } from "react-hook-form";
-import { R } from "../hook-form/RHFAutocomplete/index.b7f11146.js";
+import { R } from "../hook-form/RHFAutocomplete/index.ee3d9b3c.js";
+import "lodash/debounce";
 import { jsx as r, jsxs as w, Fragment as A } from "react/jsx-runtime";
 import "../hook-form/RHFCheckbox/index.6a40e25f.js";
 import { alpha as Ke, styled as be, Skeleton as Fe, MenuItem as ze, useTheme as Ye, Popper as Ge } from "@mui/material";
@@ -12,25 +13,25 @@ import { R as ee } from "../hook-form/RHFDateTime/index.5ed774e3.js";
 import "@mui/x-date-pickers";
 import { R as Y } from "../hook-form/RHFTextField/index.bab2a2cf.js";
 import { I as he } from "../Icon/index.f569765b.js";
-import "../hook-form/RHFPeriod/index.e17b1c72.js";
+import "../hook-form/RHFPeriod/index.fc3af81f.js";
 import "../ErrorLabel/index.c8615f16.js";
-import "../Period/index.497b8df4.js";
-import { L as Ue, b as Je, g as Qe } from "../CommonActions/components/Actions/index.a908e4b9.js";
+import "../Period/index.ba6c0e11.js";
+import { L as Ue, b as Je, g as Qe } from "../CommonActions/components/Actions/index.edceed6b.js";
 import "@mui/material/Button";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.699767c7.js";
+import "../../contexts/ModalContext/index.33dc1be9.js";
 import "@mui/lab";
-import "../../lodash.e09401f0.js";
+import "lodash/isString";
 import "react-dropzone";
 import "../Image/index.c9da2d5a.js";
-import "../hook-form/RHFUpload/index.cbf11b68.js";
+import "../hook-form/RHFUpload/index.56e2e277.js";
 import { I as G } from "../mui_extended/IconButton/index.4b5ce8b5.js";
 import "simplebar/dist/simplebar.min.css";
-import { F as te } from "../mui_extended/Button/index.16591787.js";
-import { P as Xe } from "../mui_extended/Popover/index.305f2ea5.js";
-import { R as Ze } from "../contexts/RHFormContext/index.f8241292.js";
-import { A as et } from "../CommonActions/components/ActionCancel/index.3775989f.js";
-import { A as tt } from "../CommonActions/components/ActionIntro/index.ca7b6952.js";
+import { F as te } from "../mui_extended/Button/index.6df3e958.js";
+import { P as Xe } from "../mui_extended/Popover/index.d708b699.js";
+import { R as Ze } from "../contexts/RHFormContext/index.33dba822.js";
+import { A as et } from "../CommonActions/components/ActionCancel/index.7b862bd3.js";
+import { A as tt } from "../CommonActions/components/ActionIntro/index.35c8757f.js";
 import { useResponsiveDesktop as rt } from "@m4l/graphics";
 const re = h("div")(({
   theme: e
@@ -1101,7 +1102,7 @@ const jt = h("div")(({
   width: "100%",
   display: "flex",
   justifyContent: "space-between"
-})), xr = (e) => {
+})), Ir = (e) => {
   const t = rt();
   return He(["dictionary_loaded"]) ? /* @__PURE__ */ r(St, {
     ...e,
@@ -1123,10 +1124,10 @@ const jt = h("div")(({
     })
   }) : /* @__PURE__ */ r(A, {});
 };
-function Ir() {
+function wr() {
   return ["dynamic_filter"].concat(Qe());
 }
-const wr = {
+const Cr = {
   dynamic_filter: {
     filter_tooltip: "Search",
     operator_b: "between",
@@ -1149,8 +1150,8 @@ const wr = {
   }
 };
 export {
-  xr as D,
-  wr as d,
-  Ir as g,
+  Ir as D,
+  Cr as d,
+  wr as g,
   T as u
 };

package/components/ModalDialog/{index.16024a4e.js → index.e1f31e50.js}

@@ -1,6 +1,6 @@
 import { Dialog as b, IconButton as w, Paper as v } from "@mui/material";
 import { c as D } from "../../react-draggable.20e95c61.js";
-import { u as $ } from "../../hooks/useModal/index.8201ccec.js";
+import { u as $ } from "../../hooks/useModal/index.34cc1e55.js";
 import { styled as s } from "@mui/material/styles";
 import { a as x } from "../../utils/index.214d9542.js";
 import { R as M } from "../Resizeable/index.45995d2b.js";
@@ -8,7 +8,7 @@ import { useResponsiveDesktop as H } from "@m4l/graphics";
 import { useEnvironment as I } from "@m4l/core";
 import { I as C } from "../Icon/index.f569765b.js";
 import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { b as W, g as _ } from "../CommonActions/components/Actions/index.a908e4b9.js";
+import { b as W, g as _ } from "../CommonActions/components/Actions/index.edceed6b.js";
 const j = s(b)(() => ({})), k = s("div")(({ theme: o }) => ({
   display: "flex",
   flexDirection: "column",

package/components/ObjectLogs/{index.ac2bfa48.js → index.9c43ba69.js}

@@ -1,14 +1,14 @@
 import { useState as _, useEffect as f, useCallback as d, useMemo as $ } from "react";
 import { useNetwork as k, useModuleDictionary as y, useEnvironment as h, usePaginate as O } from "@m4l/core";
 import { styled as g } from "@mui/material/styles";
-import { D as R, g as I } from "../DataGrid/index.5cbf0dd8.js";
+import { D as R, g as I } from "../DataGrid/index.cd4fff69.js";
 import { D as L } from "../formatters/DateFormatter/index.08d8823b.js";
 import { Tooltip as G, IconButton as M } from "@mui/material";
 import { R as S } from "../../react-json-view.f56a7f8e.js";
 import { jsx as t, jsxs as A } from "react/jsx-runtime";
-import { u as T } from "../../hooks/useModal/index.8201ccec.js";
+import { u as T } from "../../hooks/useModal/index.34cc1e55.js";
 import { I as u } from "../Icon/index.f569765b.js";
-import { D as E, g as K } from "../DynamicFilter/index.8a571617.js";
+import { D as E, g as K } from "../DynamicFilter/index.4d3c60b4.js";
 const q = g("div")(() => ({
   height: "100%",
   width: "100%",

package/components/Period/{index.497b8df4.js → index.ba6c0e11.js}

@@ -3,11 +3,11 @@ import { styled as a, Skeleton as d, Autocomplete as $, TextField as x } from "@
 import { useMemo as D } from "react";
 import { I as v } from "../Icon/index.f569765b.js";
 import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { g as O } from "../CommonActions/components/Actions/index.a908e4b9.js";
+import { g as O } from "../CommonActions/components/Actions/index.edceed6b.js";
 import "@mui/material/Button";
 import "react-hook-form";
 import "react-router-dom";
-import "../../contexts/ModalContext/index.699767c7.js";
+import "../../contexts/ModalContext/index.33dc1be9.js";
 import "@mui/lab";
 const S = a("div")(({
   theme: t,

package/components/contexts/RHFormContext/{index.f8241292.js → index.33dba822.js}

@@ -4,31 +4,31 @@ import { o as n } from "../../../node_modules.168cb897.js";
 import { styled as c } from "@mui/material/styles";
 import { jsx as l } from "react/jsx-runtime";
 const h = c("form")(({
-  theme: e
+  theme: r
 }) => ({
   display: "flex",
-  marginBottom: e.spacing(1),
+  marginBottom: r.spacing(1),
   flexDirection: "column",
   width: "100%",
   overflow: "auto",
-  maxWidth: e.stretch ? "unset" : "900px",
-  padding: e.spacing(3)
+  maxWidth: r.stretch ? "unset" : "900px",
+  padding: r.spacing(3)
 }));
-function P(e) {
+function P(r) {
   const {
     children: d,
     onSubmit: i,
     values: s,
     validationSchema: u,
     statusLoad: o = "ready"
-  } = e, r = f({
+  } = r, e = f({
     resolver: n(u),
     defaultValues: s
   });
   return t(() => {
-    if (console.log("useEffect FormProvider reload_values_provider===", o), o === "reload_values_provider") {
+    if (console.log("useEffect FormProvider reload_values_provider===", o, s, e), o === "reload_values_provider") {
       Object.keys(s).forEach((a) => {
-        r.setValue(a, s[a], {
+        e.setValue(a, s[a], {
           shouldValidate: !1,
           shouldDirty: !1,
           shouldTouch: !1
@@ -36,17 +36,17 @@ function P(e) {
       });
       return;
     }
-  }, [r, o, s]), t(() => {
-    o === "ready" && (console.log("useEffect FormProvider Ready", o), r.setValue("statusLoad", "ready", {
+  }, [e, o, s]), t(() => {
+    o === "ready" && (console.log("useEffect FormProvider Ready", o), e.setValue("statusLoad", "ready", {
       shouldValidate: !1,
       shouldDirty: !1,
       shouldTouch: !1
     }));
   }, [o]), /* @__PURE__ */ l(m, {
-    ...r,
+    ...e,
     children: /* @__PURE__ */ l(h, {
       id: "formProvider",
-      onSubmit: r.handleSubmit(i),
+      onSubmit: e.handleSubmit(i),
       children: d
     })
   });

package/components/hook-form/RHFAutocomplete/index.ee3d9b3c.js

@@ -0,0 +1,171 @@
+import { useModuleDictionary as K, useModuleSkeleton as U } from "@m4l/core";
+import { useFormContext as z, Controller as B } from "react-hook-form";
+import { Skeleton as y, Autocomplete as G, TextField as N, CircularProgress as J } from "@mui/material";
+import { styled as d } from "@mui/material/styles";
+import { I as v } from "../../Image/index.c9da2d5a.js";
+import { useMemo as Q, useState as F, useEffect as X } from "react";
+import { jsxs as O, jsx as n, Fragment as Y } from "react/jsx-runtime";
+const Z = d("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+})), ee = d("div")(({
+  theme: t
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: t.spacing(2),
+  alignItems: "center",
+  height: `${t.spacing(4.5)}`,
+  border: `1px solid ${t.palette.divider}`,
+  borderRadius: `${t.spacing(1)}`,
+  padding: `0 ${t.spacing(2)}`,
+  [t.breakpoints.down("md")]: {
+    width: "100%"
+  }
+})), te = d("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  },
+  "& .m4l_image": {
+    marginLeft: t.spacing(1.5)
+  }
+})), oe = d("li")(({
+  theme: t
+}) => ({
+  "& .m4l_image": {
+    marginRight: t.spacing(1.5)
+  }
+}));
+function ne(t, l, c) {
+  return function(s, g) {
+    return /* @__PURE__ */ O(oe, {
+      ...s,
+      children: [/* @__PURE__ */ n(v, {
+        src: t(g),
+        width: l,
+        height: c
+      }), s.key]
+    });
+  };
+}
+function de(t) {
+  const {
+    name: l,
+    getOptionLabel: c,
+    isOptionEqualToValue: x,
+    label: s,
+    skeletonWidth: g = 100,
+    skeletonHeight: P = "18px",
+    options: W,
+    disabled: E,
+    getOptionUrlImage: p,
+    imageWidth: C = "24px",
+    imageHeight: I = "24px",
+    onOpen: b,
+    onClose: T,
+    loading: L,
+    onChangeOption: w,
+    onChangeFilterParmsLocal: a,
+    ...H
+  } = t, {
+    getLabel: k
+  } = K(), M = U(), {
+    control: $
+  } = z(), A = Q(() => p !== void 0, [p]), [q, S] = F(!1), V = (e, o) => {
+    S(!1), T && T(e, o);
+  }, j = (e) => {
+    S(!0), b && b(e);
+  }, m = (e) => e == null ? "" : c(e), _ = (e) => e == null || p === void 0 ? "" : p(e), D = (e, o) => o == null || e === null ? !1 : x(e, o);
+  return M ? /* @__PURE__ */ n(Z, {
+    children: /* @__PURE__ */ O(ee, {
+      children: [/* @__PURE__ */ n(y, {
+        variant: "text",
+        width: g,
+        height: P
+      }, "sk1"), /* @__PURE__ */ n(y, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }, "sk2")]
+    })
+  }) : /* @__PURE__ */ n(B, {
+    name: l,
+    control: $,
+    render: ({
+      field: {
+        onChange: e,
+        value: o
+      },
+      fieldState: {
+        error: R
+      }
+    }) => {
+      const [u, f] = F(m(o));
+      return X(() => {
+        !q && o === null && u !== "" && f("");
+      }, [o]), console.log("Render AC", l, u, typeof u, o), /* @__PURE__ */ n(te, {
+        className: "m4l_rhf_autocomplete",
+        children: /* @__PURE__ */ n(G, {
+          autoComplete: !0,
+          autoSelect: !a,
+          options: W,
+          getOptionLabel: m,
+          inputValue: u,
+          clearOnBlur: !1,
+          onInputChange: (i, r, h) => {
+            console.debug("******onInputChange*", r, h), h === "input" ? (f(r), a && a(r, h)) : e(null);
+          },
+          isOptionEqualToValue: D,
+          disableClearable: !0,
+          value: o || null,
+          onOpen: j,
+          onClose: V,
+          onChange: (i, r) => {
+            console.log("onChange  optiion*", r), w && w(r), f(m(r)), e(r);
+          },
+          filterOptions: a ? (i) => i : void 0,
+          loading: L,
+          loadingText: k("rhf_autocomplete.loading_options"),
+          disabled: E,
+          noOptionsText: k("rhf_autocomplete.no_options"),
+          renderOption: A ? ne(_, C, I) : void 0,
+          renderInput: (i) => (console.log("renderInput parms", l, i.inputProps.value), /* @__PURE__ */ n(N, {
+            ...i,
+            label: s,
+            fullWidth: !0,
+            SelectProps: {
+              native: !0
+            },
+            InputProps: {
+              ...i.InputProps,
+              startAdornment: A && o ? /* @__PURE__ */ n(v, {
+                src: _(o),
+                width: C,
+                height: I
+              }, "ImageTextField") : null,
+              endAdornment: /* @__PURE__ */ O(Y, {
+                children: [L ? /* @__PURE__ */ n(J, {
+                  color: "inherit",
+                  size: 20
+                }) : null, i.InputProps.endAdornment]
+              })
+            },
+            autoComplete: "off",
+            error: !!R,
+            helperText: R?.message,
+            ...H
+          }))
+        })
+      });
+    }
+  });
+}
+export {
+  de as R
+};

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AutocompleteCloseReason, TextFieldProps } from '@mui/material';
+import { AutocompleteCloseReason, AutocompleteInputChangeReason, TextFieldProps } from '@mui/material';
 export declare type GetOptionString<T> = (option: T | null) => string;
 export declare type RHFAutocompleteProps<T> = {
     name: string;
@@ -15,4 +15,6 @@ export declare type RHFAutocompleteProps<T> = {
     loading?: boolean;
     onOpen?: (event: React.SyntheticEvent) => void;
     onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
+    onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
+    onChangeOption?: (newValue: T) => void;
 } & TextFieldProps;

package/components/hook-form/RHFAutocompleteAsync/index.3b3da5f6.js

@@ -0,0 +1,73 @@
+import { useState as o, useCallback as H, useEffect as p } from "react";
+import { useNetwork as N, getPropertyByString as k } from "@m4l/core";
+import { useFormContext as w } from "react-hook-form";
+import x from "lodash/debounce";
+import { R as S } from "../RHFAutocomplete/index.ee3d9b3c.js";
+import { jsx as I } from "react/jsx-runtime";
+function J(O) {
+  const {
+    name: d,
+    endPoint: t,
+    timeout: g = 5e3,
+    parms: s,
+    resultField: F = "data",
+    isRemote: A = !0,
+    onChangeFilterParms: n,
+    ...C
+  } = O;
+  w();
+  const {
+    networkOperation: P
+  } = N(), [h, r] = o([]), [a, m] = o(!1), [l, c] = o(!1), [u, i] = o(!0), [f, R] = o({}), y = H(x((e) => {
+    console.debug("setCanLoadOptions", !0), i(!0), console.log("New parms:", e), R(e);
+  }, 300), []), L = (e) => {
+    n && y(n(e));
+  };
+  return p(() => {
+    console.log("useEffect RHFAutocompleteAsync Parms", s, t), r([]), i(!0);
+  }, [s, t]), p(() => {
+    let e = !0;
+    if (console.log("useEffect RHFAutocompleteAsync", a, l, u), !(!a || l)) {
+      if (!u) {
+        console.log("****NO LOAD OPTIONS***");
+        return;
+      }
+      return c(!0), r([]), i(!1), P({
+        method: "GET",
+        endPoint: t,
+        timeout: g,
+        parms: {
+          ...s,
+          ...f
+        },
+        isRemote: A
+      }).then((b) => {
+        if (e) {
+          const E = k(b, F);
+          r(E);
+        }
+      }).catch(() => {
+        console.error("OJOOOO ");
+      }).finally(() => {
+        e && c(!1);
+      }), () => {
+        e = !1, c(!1);
+      };
+    }
+  }, [a, s, f, t]), /* @__PURE__ */ I(S, {
+    name: d,
+    loading: l,
+    options: h,
+    onChangeFilterParmsLocal: n ? L : void 0,
+    onOpen: () => {
+      m(!0);
+    },
+    onClose: () => {
+      m(!1);
+    },
+    ...C
+  });
+}
+export {
+  J as R
+};

package/components/hook-form/RHFAutocompleteAsync/types.d.ts

@@ -5,4 +5,5 @@ export declare type RHFAutocompleteAsyncProps<T> = {
     parms?: Record<string, any>;
     resultField?: string;
     isRemote?: boolean;
-} & Omit<RHFAutocompleteProps<T>, 'options'>;
+    onChangeFilterParms?: (newValue: string) => Record<string, any>;
+} & Omit<RHFAutocompleteProps<T>, 'options' | 'onChangeSearchInput'>;

package/components/hook-form/RHFPeriod/{index.e17b1c72.js → index.fc3af81f.js}

@@ -1,7 +1,7 @@
 import { styled as m } from "@mui/material";
 import { useFormContext as a, Controller as l } from "react-hook-form";
 import { E as f } from "../../ErrorLabel/index.c8615f16.js";
-import { P as p } from "../../Period/index.497b8df4.js";
+import { P as p } from "../../Period/index.ba6c0e11.js";
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 const d = m("div")(({
   theme: e