@m4l/components 9.80.0 → 9.80.1-beta-docs-autocomplete-async-with-add-mf-sync.1

package/components/extended/mui/AutocompleteAsync/AutocompleteAsync.js

@@ -1,53 +1,67 @@
-import { jsx as P } from "@emotion/react/jsx-runtime";
-import S from "lodash-es/debounce";
-import { useRef as b, useReducer as L, useCallback as s, useMemo as Y, useEffect as _ } from "react";
+import { jsx as A, jsxs as T } from "@emotion/react/jsx-runtime";
+import D from "lodash-es/debounce";
+import { forwardRef as H, useRef as y, useReducer as Q, useCallback as f, useEffect as R, useMemo as K } from "react";
 import { actionsType as i } from "./types.js";
-import { autocompleteAsyncReducer as j, getInitialStateAutocompleteAsync as x } from "./reducer/AutocompleteAsyncReducer.js";
-import { useFetchOptions as N } from "./hooks/useFetchOptions.js";
-import { ASYNC_ONLY_KEYS as T } from "./constants.js";
-import { AutocompleteAsyncRootStyled as I } from "./slots/AutocompleteAsyncSlots.js";
-function q(l) {
+import { autocompleteAsyncReducer as V, getInitialStateAutocompleteAsync as z } from "./reducer/AutocompleteAsyncReducer.js";
+import { useFetchOptions as G } from "./hooks/useFetchOptions.js";
+import { useAutocompleteAdd as J } from "./hooks/useAutocompleteAdd.js";
+import { AutocompleteAddRoot as W, AutocompleteAddRow as X, AutocompleteAddInput as Z, AutocompleteAddStatusText as $ } from "./slots/addStyled.js";
+import { ASYNC_ONLY_KEYS as ee } from "./constants.js";
+import { AutocompleteAsyncRootStyled as te } from "./slots/AutocompleteAsyncSlots.js";
+function oe(p, b) {
   const {
-    endPoint: p,
-    timeout: u = 5e3,
-    parms: a,
-    resultField: f = "data",
-    isRemote: d = !0,
-    isExternalUrl: h = !1,
-    onChangeFilterParms: t,
-    responseToCamelCase: y,
-    multiple: C,
-    shouldFetch: o
-  } = l, m = b(""), E = Object.fromEntries(
-    Object.entries(l).filter(([e]) => !T.includes(e))
-  ), [c, n] = L(
-    j(t),
-    x({ parms: a, onChangeFilterParms: t })
+    add: E,
+    endPoint: x,
+    timeout: I = 5e3,
+    parms: C,
+    resultField: j = "data",
+    isRemote: B = !0,
+    isExternalUrl: N = !1,
+    onChangeFilterParms: o,
+    responseToCamelCase: Y,
+    multiple: h,
+    shouldFetch: e,
+    resetKey: m,
+    retainSelectedOptions: F = !!E,
+    value: c,
+    isOptionEqualToValue: g
+  } = p, l = J(p), d = l.refreshKey, u = y(""), _ = Object.fromEntries(
+    Object.entries(p).filter(([t]) => !ee.includes(t))
+  ), [s, n] = Q(
+    V(o),
+    z({ parms: C, onChangeFilterParms: o })
   );
-  if (C && t)
+  if (h && o)
     throw new Error(
       "multiple cannot be enabled when onChangeFilterParms is defined; define the filter in parms if needed."
     );
-  N({
-    state: c,
+  G({
+    state: s,
     dispatch: n,
-    endPoint: p,
-    timeout: u,
-    isExternalUrl: h,
-    parms: a,
-    responseToCamelCase: y,
-    isRemote: d,
-    resultField: f
+    endPoint: x,
+    timeout: I,
+    isExternalUrl: N,
+    parms: C,
+    responseToCamelCase: Y,
+    isRemote: B,
+    resultField: j
   });
-  const F = s(() => n({ type: i.REFRESH }), []), A = s(() => {
-    const e = !o || o(m.current);
-    n({ type: i.OPEN, noFetch: !e });
-  }, [o]), R = s(() => n({ type: i.CLOSE }), []), r = Y(
-    () => S(
-      (e) => {
+  const v = f(() => n({ type: i.REFRESH }), []), S = y(d);
+  R(() => {
+    S.current !== d && (S.current = d, n({
+      type: i.INVALIDATE,
+      noFetch: !!(e && !e(u.current))
+    }));
+  }, [d, e]);
+  const w = f(() => {
+    const t = !e || e(u.current);
+    n({ type: i.OPEN, noFetch: !t });
+  }, [e]), q = f(() => n({ type: i.CLOSE }), []), r = K(
+    () => D(
+      (t) => {
         n({
           type: i.SET_QUERY_PARAMS,
-          payload: e
+          payload: t
         });
       },
       300,
@@ -55,31 +69,48 @@ function q(l) {
     ),
     [n]
   );
-  _(
+  R(
     () => () => {
       r.cancel();
     },
     [r]
   );
-  const g = s(
-    (e, O) => {
-      m.current = e, t && O === "input" && (!o || o(e)) && r(t(e));
+  const O = y(m);
+  R(() => {
+    O.current !== m && (O.current = m, r.cancel(), n({
+      type: i.RESET,
+      noFetch: !!(e && !e(u.current)),
+      queryParams: o?.(u.current)
+    }));
+  }, [m, e, o, r]);
+  const M = f(
+    (t, a) => {
+      u.current = t, o && a === "input" && (!e || e(t) ? r(o(t)) : r.cancel());
     },
-    [t, r, o]
-  );
-  return /* @__PURE__ */ P(
-    I,
+    [o, r, e]
+  ), U = K(() => !F || s.options.length === 0 ? s.options : (h ? Array.isArray(c) ? c : [] : c == null ? [] : [c]).reduce((a, L) => a.some((k) => g(k, L)) ? a : [...a, L], s.options), [s.options, h, c, g, F]), P = /* @__PURE__ */ A(
+    te,
     {
-      ...E,
-      loading: c.loading,
-      options: c.options,
-      onChangeFilterParmsLocal: t ? g : void 0,
-      refresh: F,
-      onOpen: A,
-      onClose: R
+      ..._,
+      inputRef: b ?? p.inputRef,
+      onChange: l.onChange,
+      loading: s.loading,
+      options: U,
+      onChangeFilterParmsLocal: o ? M : void 0,
+      refresh: v,
+      onOpen: w,
+      onClose: q
     }
   );
+  return E ? /* @__PURE__ */ T(W, { children: [
+    /* @__PURE__ */ T(X, { children: [
+      /* @__PURE__ */ A(Z, { children: P }),
+      l.addButton
+    ] }),
+    l.status && /* @__PURE__ */ A($, { role: "status", "aria-live": "polite", children: l.status })
+  ] }) : P;
 }
+const de = H(oe);
 export {
-  q as AutocompleteAsync
+  de as AutocompleteAsync
 };

package/components/extended/mui/AutocompleteAsync/constants.d.ts

@@ -1,3 +1,4 @@
+import { AutocompleteAddStatus } from './types';
 import { AutocompleteAsyncSlots } from './slots/AutocompleteAsyncEnum';
 /**
  * Key to identify the AutocompleteAsync component in the design system.
@@ -9,5 +10,7 @@ export declare const AUTOCOMPLETE_ASYNC_COMBINED_CLASSES: {
     root: AutocompleteAsyncSlots.root;
 };
 export declare const AUTOCOMPLETE_ASYNC_CLASSES: Record<"root", string>;
-export declare const ASYNC_ONLY_KEYS: readonly ["endPoint", "timeout", "parms", "resultField", "isRemote", "isExternalUrl", "responseToCamelCase", "onChangeFilterParms", "shouldFetch"];
+export declare const ASYNC_ONLY_KEYS: readonly ["add", "endPoint", "timeout", "parms", "resultField", "isRemote", "isExternalUrl", "responseToCamelCase", "onChangeFilterParms", "shouldFetch", "refreshKey", "resetKey", "retainSelectedOptions"];
+export declare const AUTOCOMPLETE_ADD_MESSAGES: Record<AutocompleteAddStatus, string>;
+export declare const AUTOCOMPLETE_ADD_RECENT_OPERATIONS = 32;
 //# sourceMappingURL=constants.d.ts.map

package/components/extended/mui/AutocompleteAsync/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAyC,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE9G;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,yBAAyB,CAAC;AAEvE,eAAO,MAAM,mCAAmC;;CAG/C,CAAC;AAEF,eAAO,MAAM,0BAA0B,wBAGtC,CAAC;AAEF,eAAO,MAAM,eAAe,oJAUlB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,EAAyC,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE9G;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,yBAAyB,CAAC;AAEvE,eAAO,MAAM,mCAAmC;;CAG/C,CAAC;AAEF,eAAO,MAAM,0BAA0B,wBAGtC,CAAC;AAEF,eAAO,MAAM,eAAe,8MAclB,CAAC;AAGX,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAM3E,CAAC;AAEF,eAAO,MAAM,kCAAkC,KAAK,CAAC"}

package/components/extended/mui/AutocompleteAsync/constants.js

@@ -1,14 +1,15 @@
 import { getComponentClasses as e } from "../../../../utils/getComponentSlotRoot.js";
-import { AutocompleteAsyncComplementaryClasses as o, AutocompleteAsyncSlots as t } from "./slots/AutocompleteAsyncEnum.js";
-const s = "M4LAutocompleteAsync", m = {
-  ...t,
-  ...o
+import { AutocompleteAsyncComplementaryClasses as t, AutocompleteAsyncSlots as o } from "./slots/AutocompleteAsyncEnum.js";
+const n = "M4LAutocompleteAsync", r = {
+  ...o,
+  ...t
 };
 e(
-  s,
-  m
+  n,
+  r
 );
-const l = [
+const c = [
+  "add",
   "endPoint",
   "timeout",
   "parms",
@@ -17,10 +18,21 @@ const l = [
   "isExternalUrl",
   "responseToCamelCase",
   "onChangeFilterParms",
-  "shouldFetch"
-];
+  "shouldFetch",
+  "refreshKey",
+  "resetKey",
+  "retainSelectedOptions"
+], l = {
+  pending: "Waiting for the new record.",
+  created: "Record created.",
+  cancelled: "Creation cancelled.",
+  unavailable: "Record created. Refresh the options to select it when available.",
+  error: "Could not complete this action. Try again."
+}, i = 32;
 export {
-  l as ASYNC_ONLY_KEYS,
-  m as AUTOCOMPLETE_ASYNC_COMBINED_CLASSES,
-  s as AUTOCOMPLETE_ASYNC_KEY_COMPONENT
+  c as ASYNC_ONLY_KEYS,
+  l as AUTOCOMPLETE_ADD_MESSAGES,
+  i as AUTOCOMPLETE_ADD_RECENT_OPERATIONS,
+  r as AUTOCOMPLETE_ASYNC_COMBINED_CLASSES,
+  n as AUTOCOMPLETE_ASYNC_KEY_COMPONENT
 };

package/components/extended/mui/AutocompleteAsync/hooks/useAutocompleteAdd.d.ts

@@ -0,0 +1,9 @@
+import { AutocompleteAsyncProps } from '../types';
+/** Manage optional creation, correlated invalidation and focus within the existing async selector. */
+export declare function useAutocompleteAdd<T>(props: AutocompleteAsyncProps<T>): {
+    refreshKey: string | undefined;
+    onChange: (event: import('../..').AutocompleteValueChangeEvent<T> | undefined, value: T | T[] | null, reason: import('@mui/material').AutocompleteChangeReason) => void;
+    addButton: import("@emotion/react/jsx-runtime").JSX.Element | null;
+    status: string | undefined;
+};
+//# sourceMappingURL=useAutocompleteAdd.d.ts.map

package/components/extended/mui/AutocompleteAsync/hooks/useAutocompleteAdd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocompleteAdd.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/hooks/useAutocompleteAdd.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAyB,sBAAsB,EAA0B,MAAM,UAAU,CAAC;AAEtG,sGAAsG;AACtG,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC;;;;;EAkIrE"}

package/components/extended/mui/AutocompleteAsync/hooks/useAutocompleteAdd.js

@@ -0,0 +1,97 @@
+import { jsx as p } from "@emotion/react/jsx-runtime";
+import { deepEqual as w } from "fast-equals";
+import { useRef as d, useState as O, useCallback as _, useEffect as h } from "react";
+import { AutocompleteAddButton as q } from "../AutocompleteAddButton.js";
+import { AUTOCOMPLETE_ADD_RECENT_OPERATIONS as M, AUTOCOMPLETE_ADD_MESSAGES as R } from "../constants.js";
+function B(r) {
+  const { add: o, resetKey: s, refreshKey: a } = r, f = d(r);
+  f.current = r;
+  const u = d({ value: r.value, version: 0 });
+  w(u.current.value, r.value) || (u.current = { value: r.value, version: u.current.version + 1 });
+  const l = d(null), v = d(null), b = d(!1), [y, m] = O(!1), [g, c] = O(), [C, k] = O({ resetKey: s, key: a }), i = d(new Set(a ? [a] : [])), A = _((e) => {
+    i.current.has(e) || (i.current.add(e), i.current.size > M && i.current.delete(i.current.values().next().value), k({ resetKey: f.current.resetKey, key: e }));
+  }, []);
+  h(() => {
+    m(!1), c(void 0);
+    const e = f.current.refreshKey;
+    return i.current = new Set(e ? [e] : []), k((t) => t.resetKey === s && t.key === e ? t : { resetKey: s, key: e }), () => {
+      l.current?.controller.abort(), l.current = null;
+    };
+  }, [s]), h(() => {
+    a && A(a);
+  }, [a, A]), h(() => {
+    !y && b.current && (b.current = !1, v.current?.isConnected && v.current.focus());
+  }, [y]);
+  const S = async () => {
+    if (!o || r.disabled || r.readOnly || o.disabled || l.current)
+      return;
+    const e = {
+      controller: new AbortController(),
+      selectionVersion: u.current.version,
+      resetKey: s
+    };
+    l.current = e, m(!0), c("pending");
+    try {
+      const t = await o.action({ requestId: crypto.randomUUID(), signal: e.controller.signal });
+      if (l.current !== e || e.controller.signal.aborted)
+        return;
+      const n = f.current;
+      if (n.resetKey !== e.resetKey)
+        return;
+      if (t.status === "cancelled") {
+        c("cancelled");
+        return;
+      }
+      if (A(t.operationId), c(t.option === null ? "unavailable" : "created"), t.option === null || n.add?.selectCreated === !1 || n.disabled || n.readOnly || u.current.version !== e.selectionVersion)
+        return;
+      const E = t.option, K = Array.isArray(n.value) ? n.value : [], P = n.multiple ? K.some((T) => n.isOptionEqualToValue(T, E)) ? K : [...K, E] : E;
+      try {
+        n.onChange({ target: { value: P } }, P, "selectOption");
+      } catch {
+        c("unavailable");
+      }
+    } catch (t) {
+      if (l.current !== e || e.controller.signal.aborted)
+        return;
+      c("error");
+      try {
+        o.onError?.(t);
+      } catch {
+      }
+    } finally {
+      l.current === e && (l.current = null, b.current = !0, m(!1));
+    }
+  }, D = (e, t, n) => {
+    u.current.version += 1, r.onChange(e, t, n);
+  };
+  return {
+    // Without creation, preserve every legacy refresh-key change, including a cleared key.
+    refreshKey: o && C.resetKey === s ? C.key : a,
+    onChange: D,
+    addButton: o && !r.readOnly ? /* @__PURE__ */ p(
+      q,
+      {
+        buttonRef: v,
+        type: "button",
+        tooltip: o.label,
+        "aria-label": o.label,
+        "aria-busy": y,
+        disabled: r.disabled || o.disabled || y,
+        size: r.size,
+        onMouseDown: (e) => {
+          e.stopPropagation();
+        },
+        onKeyDown: (e) => {
+          (e.key === "Enter" || e.key === " ") && e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.stopPropagation(), S();
+        }
+      }
+    ) : null,
+    status: g ? o?.messages?.[g] ?? R[g] : void 0
+  };
+}
+export {
+  B as useAutocompleteAdd
+};

package/components/extended/mui/AutocompleteAsync/hooks/useFetchOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/hooks/useFetchOptions.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG7D;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,QAqFhE"}
+{"version":3,"file":"useFetchOptions.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/hooks/useFetchOptions.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG7D;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,QAyFhE"}

package/components/extended/mui/AutocompleteAsync/hooks/useFetchOptions.js

@@ -1,62 +1,63 @@
-import { useRef as h, useEffect as F } from "react";
-import { actionsType as n } from "../types.js";
-import { useNetwork as A, getPropertyByString as P } from "@m4l/core";
-function b(C) {
+import { useRef as o, useEffect as C } from "react";
+import { actionsType as a } from "../types.js";
+import { useNetwork as P, getPropertyByString as S } from "@m4l/core";
+function w(O) {
   const {
-    state: t,
-    dispatch: r,
-    endPoint: a,
-    timeout: i,
-    isExternalUrl: s,
-    parms: o,
-    responseToCamelCase: c,
-    isRemote: u,
-    resultField: f = "data"
-  } = C, { networkOperation: l } = A(), e = h(null), p = h(t.fireFetchCount);
-  F(() => {
-    r({ type: n.SET_PARAMS, payload: o });
-  }, [o, r]), F(() => {
-    let y = !1;
-    if (p.current !== t.fireFetchCount)
-      return p.current = t.fireFetchCount, t.fireFetchCount > 0 && (e.current && e.current.abort(), e.current = new AbortController(), l({
+    state: r,
+    dispatch: e,
+    endPoint: s,
+    timeout: c,
+    isExternalUrl: i,
+    parms: u,
+    responseToCamelCase: p,
+    isRemote: f,
+    resultField: l = "data"
+  } = O, { networkOperation: m } = P(), y = o(m);
+  y.current = m;
+  const t = o(null), h = o(r.fireFetchCount);
+  C(() => {
+    e({ type: a.SET_PARAMS, payload: u });
+  }, [u, e]), C(() => {
+    let n = !1;
+    if (h.current !== r.fireFetchCount)
+      return h.current = r.fireFetchCount, r.fireFetchCount > 0 && (t.current && t.current.abort(), t.current = new AbortController(), y.current({
         method: "GET",
-        endPoint: a,
-        timeout: i,
-        isExternalUrl: s,
-        parms: { ...o, ...t.queryParams },
-        responseToCamelCase: c,
-        isRemote: u,
-        signal: e.current.signal
-      }).then((O) => {
-        if (y)
+        endPoint: s,
+        timeout: c,
+        isExternalUrl: i,
+        parms: { ...r.parms, ...r.queryParams },
+        responseToCamelCase: p,
+        isRemote: f,
+        signal: t.current.signal
+      }).then((d) => {
+        if (n)
           return;
-        const m = P(O, f), d = Array.isArray(m) ? m : [];
-        r({
-          type: n.FINISH_LOAD_OPTIONS,
-          payload: { options: d }
+        const F = S(d, l), A = Array.isArray(F) ? F : [];
+        e({
+          type: a.FINISH_LOAD_OPTIONS,
+          payload: { options: A }
         });
       }).catch(() => {
-        r({
-          type: n.FINISH_LOAD_OPTIONS,
+        n || e({
+          type: a.FINISH_LOAD_OPTIONS,
           payload: {}
         });
       })), () => {
-        y = !0, e.current && e.current.abort();
+        n = !0, t.current && t.current.abort();
       };
   }, [
-    r,
-    a,
+    e,
     s,
-    u,
-    l,
-    o,
-    c,
+    i,
     f,
-    t.fireFetchCount,
-    t.queryParams,
-    i
+    r.parms,
+    p,
+    l,
+    r.fireFetchCount,
+    r.queryParams,
+    c
   ]);
 }
 export {
-  b as useFetchOptions
+  w as useFetchOptions
 };

package/components/extended/mui/AutocompleteAsync/index.d.ts

@@ -1,5 +1,5 @@
 export { AutocompleteAsync } from './AutocompleteAsync';
-export type { AutocompleteAsyncProps } from './types';
+export type { AutocompleteAsyncProps, AutocompleteAddContext, AutocompleteAddResult, AutocompleteAddAction } from './types';
 export { useFetchOptions } from './hooks/useFetchOptions';
 export { autocompleteAsyncReducer, getInitialStateAutocompleteAsync } from './reducer/AutocompleteAsyncReducer';
 export { actionsType } from './types';

package/components/extended/mui/AutocompleteAsync/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;AAChH,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAC5H,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;AAChH,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/components/extended/mui/AutocompleteAsync/reducer/AutocompleteAsyncReducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteAsyncReducer.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/reducer/AutocompleteAsyncReducer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,uBAAuB,EAEvB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAElB,KAAK,oBAAoB,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,gCAAgC,CAAC,CAAC,EAChD,KAAK,EAAE,oBAAoB,GAC1B,sBAAsB,CAAC,CAAC,CAAC,CAU3B;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EACxC,mBAAmB,CAAC,EAAE,mBAAmB,IAGvC,OAAO,sBAAsB,CAAC,CAAC,CAAC,EAChC,QAAQ,uBAAuB,CAAC,CAAC,CAAC,KACjC,sBAAsB,CAAC,CAAC,CAAC,CAgE7B"}
+{"version":3,"file":"AutocompleteAsyncReducer.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/reducer/AutocompleteAsyncReducer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,uBAAuB,EAEvB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAElB,KAAK,oBAAoB,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,gCAAgC,CAAC,CAAC,EAChD,KAAK,EAAE,oBAAoB,GAC1B,sBAAsB,CAAC,CAAC,CAAC,CAU3B;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EACxC,mBAAmB,CAAC,EAAE,mBAAmB,IAGvC,OAAO,sBAAsB,CAAC,CAAC,CAAC,EAChC,QAAQ,uBAAuB,CAAC,CAAC,CAAC,KACjC,sBAAsB,CAAC,CAAC,CAAC,CAsF7B"}

package/components/extended/mui/AutocompleteAsync/reducer/AutocompleteAsyncReducer.js

@@ -1,64 +1,86 @@
 import { deepEqual as i } from "fast-equals";
-import { actionsType as u } from "../types.js";
-function t(o) {
+import { actionsType as o } from "../types.js";
+function s(u) {
   return {
     fireFetchCount: 0,
     options: [],
-    parms: o.parms,
+    parms: u.parms,
     loading: !1,
-    queryParams: o.onChangeFilterParms ? o.onChangeFilterParms("") : {},
+    queryParams: u.onChangeFilterParms ? u.onChangeFilterParms("") : {},
     isOpen: !1,
     firstOpen: !0
   };
 }
-function a(o) {
-  return (r, e) => {
-    switch (e.type) {
-      case u.REFRESH:
+function l(u) {
+  return (r, n) => {
+    switch (n.type) {
+      case o.REFRESH:
         return {
           ...r,
+          loading: !0,
           fireFetchCount: r.fireFetchCount + 1
         };
-      case u.SET_PARAMS:
-        if (i(r.parms, e.payload))
+      case o.INVALIDATE: {
+        const e = r.isOpen && !n.noFetch;
+        return {
+          ...r,
+          firstOpen: !e,
+          loading: e || r.loading,
+          fireFetchCount: r.fireFetchCount + (e ? 1 : 0)
+        };
+      }
+      case o.RESET: {
+        const e = r.isOpen && !n.noFetch;
+        return {
+          ...r,
+          options: [],
+          queryParams: n.queryParams ?? r.queryParams,
+          firstOpen: !e,
+          loading: e,
+          fireFetchCount: e ? r.fireFetchCount + 1 : 0
+        };
+      }
+      case o.SET_PARAMS:
+        if (i(r.parms, n.payload))
           return r;
         {
-          const n = o ? o("") : r.queryParams;
+          const e = u ? u("") : r.queryParams;
           return {
             ...r,
-            parms: e.payload,
+            parms: n.payload,
             fireFetchCount: 0,
             firstOpen: !0,
             options: [],
-            queryParams: n
+            queryParams: e
           };
         }
-      case u.SET_QUERY_PARAMS:
-        return i(r.queryParams, e.payload) ? r : {
+      case o.SET_QUERY_PARAMS:
+        return i(r.queryParams, n.payload) ? r : {
           ...r,
-          queryParams: e.payload,
+          queryParams: n.payload,
+          loading: !0,
           fireFetchCount: r.fireFetchCount + 1
         };
-      case u.FINISH_LOAD_OPTIONS: {
-        const n = e.payload?.options ?? r.options, p = e.payload?.options ? r.firstOpen : !0;
+      case o.FINISH_LOAD_OPTIONS: {
+        const e = n.payload?.options ?? r.options, f = n.payload?.options ? r.firstOpen : !0;
         return {
           ...r,
-          options: n,
+          options: e,
           loading: !1,
-          firstOpen: p
+          firstOpen: f
         };
       }
-      case u.OPEN: {
-        const n = r.firstOpen && !e.noFetch;
+      case o.OPEN: {
+        const e = r.firstOpen && !n.noFetch;
         return {
           ...r,
           isOpen: !0,
-          fireFetchCount: n ? r.fireFetchCount + 1 : r.fireFetchCount,
-          firstOpen: n ? !1 : r.firstOpen,
-          loading: n ? !0 : r.loading
+          fireFetchCount: e ? r.fireFetchCount + 1 : r.fireFetchCount,
+          firstOpen: e ? !1 : r.firstOpen,
+          loading: e ? !0 : r.loading
         };
       }
-      case u.CLOSE:
+      case o.CLOSE:
         return {
           ...r,
           isOpen: !1
@@ -69,6 +91,6 @@ function a(o) {
   };
 }
 export {
-  a as autocompleteAsyncReducer,
-  t as getInitialStateAutocompleteAsync
+  l as autocompleteAsyncReducer,
+  s as getInitialStateAutocompleteAsync
 };

package/components/extended/mui/AutocompleteAsync/slots/addStyled.d.ts

@@ -0,0 +1,6 @@
+export declare const AutocompleteAddRoot: import('@emotion/styled').StyledComponent<Omit<import('../..').StackProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const AutocompleteAddRow: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AutocompleteAddInput: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AutocompleteAddIconContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const AutocompleteAddStatusText: import('@emotion/styled').StyledComponent<Omit<import('@m4l/base').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+//# sourceMappingURL=addStyled.d.ts.map

package/components/extended/mui/AutocompleteAsync/slots/addStyled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addStyled.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/AutocompleteAsync/slots/addStyled.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,wNAAgD,CAAC;AAEjF,eAAO,MAAM,kBAAkB,6NAM5B,CAAC;AACJ,eAAO,MAAM,oBAAoB,6NAAiD,CAAC;AAEnF,eAAO,MAAM,4BAA4B,+NAA4D,CAAC;AACtG,eAAO,MAAM,yBAAyB,kOAEnC,CAAC"}

package/components/extended/mui/AutocompleteAsync/slots/addStyled.js

@@ -0,0 +1,19 @@
+import { styled as t } from "@mui/material/styles";
+import { Stack as e } from "../../Stack/Stack.js";
+import { Typography as i } from "../../Typography/Typography.js";
+const s = t(e)({ width: "100%", minWidth: 0 }), m = t("div")(({ theme: o }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: o.vars.size.baseSpacings.sp1,
+  width: "100%",
+  minWidth: 0
+})), c = t("div")({ flex: "1 1 0%", minWidth: 0 }), a = t("span")({ display: "inline-flex", flexShrink: 0 }), l = t(i)(({ theme: o }) => ({
+  marginTop: o.spacing(0.5)
+}));
+export {
+  a as AutocompleteAddIconContainer,
+  c as AutocompleteAddInput,
+  s as AutocompleteAddRoot,
+  m as AutocompleteAddRow,
+  l as AutocompleteAddStatusText
+};