@m4l/components 9.54.2-beta-m4lcom-764-device-picker.1 → 9.55.0

package/components/extended/mui/Autocomplete/hooks/useAutocomplete/useAutocomplete.js

@@ -1,13 +1,13 @@
-import { jsx as G } from "@emotion/react/jsx-runtime";
-import { useModuleSkeleton as J } from "@m4l/core";
-import { useValuesAndHandlers as Q } from "../useValuesAndHandlers.js";
-import { useComponentSize as U } from "../../../../../../hooks/useComponentSize/index.js";
-import { useMemo as X, useCallback as j } from "react";
-import { useMultipleChips as Y } from "../useMultipleChips.js";
-import { useEndAdornments as Z } from "../useEndAdornments.js";
-import { renderOption as $ } from "../../subcomponents/renderOptions/index.js";
-import { RenderInputStyled as ee } from "../../slots/AutocompleteSlots.js";
-function me(m) {
+import { jsx as F } from "@emotion/react/jsx-runtime";
+import { useModuleSkeleton as G } from "@m4l/core";
+import { useValuesAndHandlers as J } from "../useValuesAndHandlers.js";
+import { useComponentSize as Q } from "../../../../../../hooks/useComponentSize/index.js";
+import { useMemo as U, useCallback as R } from "react";
+import { useMultipleChips as X } from "../useMultipleChips.js";
+import { useEndAdornments as Y } from "../useEndAdornments.js";
+import { renderOption as Z } from "../../subcomponents/renderOptions/index.js";
+import { RenderInputStyled as $ } from "../../slots/AutocompleteSlots.js";
+function de(m) {
   const {
     size: c,
     variant: a,
@@ -15,67 +15,66 @@ function me(m) {
     multiple: o,
     error: i,
     readOnly: s,
-    startAdornment: N,
-    endAdornment: V,
+    startAdornment: j,
+    endAdornment: N,
     getOptionStartAdornment: h,
     getOptionEndAdornment: u,
     getOptionDescription: f,
-    loading: D,
-    refresh: E,
-    placeholder: z,
-    htmlFor: I
+    loading: V,
+    refresh: D,
+    placeholder: z
   } = m, {
-    open: g,
+    open: I,
     selectedValue: e,
-    inputValue: M,
+    inputValue: E,
     isOptionEqualToValueLocal: p,
-    handleDelete: y,
-    handleRefresh: b,
-    handleChange: v,
-    handleInputChange: w,
-    onCloseLocal: x,
-    onOpenLocal: L,
+    handleDelete: g,
+    handleRefresh: y,
+    handleChange: M,
+    handleInputChange: v,
+    onCloseLocal: w,
+    onOpenLocal: b,
     getOptionLabelLocal: d,
-    checkKeyDown: B,
-    scrollPositionOptionsRef: _
-  } = Q(m), { currentSize: r } = U(c), q = J(), k = !!m.startAdornment, R = !!(o && Array.isArray(e) && e.length > 0), l = X(() => ({
+    checkKeyDown: x,
+    scrollPositionOptionsRef: B
+  } = J(m), { currentSize: r } = Q(c), _ = G(), L = !!m.startAdornment, k = !!(o && Array.isArray(e) && e.length > 0), l = U(() => ({
     size: r,
     variant: a,
     disabled: t,
     multiple: !!o,
     error: i,
     readOnly: s,
-    startAdornment: k,
-    hasChips: R
-  }), [r, a, t, o, i, s, k, R]), A = Y({
+    startAdornment: L,
+    hasChips: k
+  }), [r, a, t, o, i, s, L, k]), A = X({
     selectedValue: e,
     multiple: o,
     adjustedSize: r,
     getOptionLabelLocal: d,
     ownerState: l,
-    handleDelete: y,
+    handleDelete: g,
     disabled: t,
-    startAdornment: N,
+    startAdornment: j,
     getOptionStartAdornment: h,
     getOptionEndAdornment: u,
     getOptionDescription: f
-  }), C = Z({
-    loading: D,
+  }), C = Y({
+    loading: V,
     adjustedSize: r,
     ownerState: l,
-    refresh: E,
-    handleRefresh: b,
+    refresh: D,
+    handleRefresh: y,
     disabled: t,
-    onOpenLocal: L,
-    open: g,
+    onOpenLocal: b,
+    open: I,
     readOnly: s,
     multiple: o,
     selectedValue: e,
     getOptionEndAdornment: u,
-    endAdornment: V
-  }), F = j((S, n) => {
+    endAdornment: N
+  }), q = R((S, n) => {
     const O = o ? Array.isArray(e) && e.some((P) => p(n, P)) : p(n, e);
-    return $(S, {
+    return Z(S, {
       ...typeof n == "object" && n !== null ? n : {},
       label: d(n),
       selected: O,
@@ -92,10 +91,10 @@ function me(m) {
     h,
     u,
     f
-  ]), H = j((S) => {
-    const { InputLabelProps: n, inputProps: O, InputProps: P, ...K } = S, { className: te, ...T } = P, { className: ne, ...W } = O;
-    return /* @__PURE__ */ G(
-      ee,
+  ]), H = R((S) => {
+    const { InputLabelProps: n, inputProps: O, InputProps: P, ...K } = S, { className: ee, ...T } = P, { className: te, ...W } = O;
+    return /* @__PURE__ */ F(
+      $,
       {
         variant: a,
         ownerState: l,
@@ -103,7 +102,7 @@ function me(m) {
           ...n,
           shrink: !0
         },
-        inputProps: { ...W, id: I },
+        inputProps: { ...W },
         error: i,
         ...K,
         autoComplete: "off",
@@ -123,7 +122,6 @@ function me(m) {
   }, [
     a,
     l,
-    I,
     i,
     A,
     C,
@@ -135,24 +133,24 @@ function me(m) {
   return {
     // propiedades de useAutocomplete
     ownerState: l,
-    isSkeleton: q,
+    isSkeleton: _,
     currentSize: r,
-    memoizedRenderOption: F,
+    memoizedRenderOption: q,
     memoizedRenderInput: H,
     // propiedades de useValuesAndHandlers
-    open: g,
+    open: I,
     selectedValue: e,
-    inputValue: M,
+    inputValue: E,
     isOptionEqualToValueLocal: p,
-    handleDelete: y,
-    handleRefresh: b,
-    handleChange: v,
-    handleInputChange: w,
-    onCloseLocal: x,
-    onOpenLocal: L,
+    handleDelete: g,
+    handleRefresh: y,
+    handleChange: M,
+    handleInputChange: v,
+    onCloseLocal: w,
+    onOpenLocal: b,
     getOptionLabelLocal: d,
-    checkKeyDown: B,
-    scrollPositionOptionsRef: _,
+    checkKeyDown: x,
+    scrollPositionOptionsRef: B,
     // propiedades de useMultipleChips
     multipleChips: A,
     // propiedades de useEndAdornments
@@ -160,5 +158,5 @@ function me(m) {
   };
 }
 export {
-  me as useAutocomplete
+  de as useAutocomplete
 };

package/hooks/useChipsOverflow/helpers/calculateLeftoverWidth.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Calculates the width left over after the visible chips, so a consumer can
+ * decide whether the first chip that does not fit is worth painting shrunk or
+ * should go straight into the "More" chip.
+ * Pure function — all measurements are passed in by the caller.
+ * @param availableWidth - Width available for the chips, already excluding the
+ *                         "More" chip and any padding.
+ * @param gap            - Gap between chips in pixels.
+ * @param chipWidths     - Natural width of each chip in display order.
+ * @param visibleCount   - How many chips are painted whole.
+ * @returns The remaining width, its leading gap already discounted.
+ */
+export declare function calculateLeftoverWidth(availableWidth: number, gap: number, chipWidths: number[], visibleCount: number): number;
+//# sourceMappingURL=calculateLeftoverWidth.d.ts.map

package/hooks/useChipsOverflow/helpers/calculateLeftoverWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateLeftoverWidth.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/hooks/useChipsOverflow/helpers/calculateLeftoverWidth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,MAAM,EAAE,EACpB,YAAY,EAAE,MAAM,GACnB,MAAM,CAKR"}

package/hooks/useChipsOverflow/helpers/calculateLeftoverWidth.js

@@ -0,0 +1,7 @@
+function d(i, c, l, n) {
+  const e = l.filter((t) => t > 0).slice(0, n), r = e.reduce((t, s) => t + s, 0);
+  return Math.max(i - r - c * e.length, 0);
+}
+export {
+  d as calculateLeftoverWidth
+};

package/hooks/useChipsOverflow/helpers/index.d.ts

@@ -1,2 +1,3 @@
+export { calculateLeftoverWidth } from './calculateLeftoverWidth';
 export { calculateVisibleChipsCount } from './calculateVisibleChipsCount';
 //# sourceMappingURL=index.d.ts.map

package/hooks/useChipsOverflow/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/hooks/useChipsOverflow/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/hooks/useChipsOverflow/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC"}

package/hooks/useChipsOverflow/useChipsOverflow.d.ts

@@ -22,6 +22,7 @@ export declare function useChipsOverflow<T extends OverflowItem>(filters: T[], o
     visibleFilters: T[];
     overflowFilters: T[];
     measuringFilters: T[];
+    leftoverWidth: number;
     parentRef: import('react').RefObject<HTMLDivElement | null>;
     containerRef: import('react').RefObject<HTMLDivElement | null>;
     setChipRef: (id: OverflowItem["id"], el: HTMLElement | null) => void;

package/hooks/useChipsOverflow/useChipsOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChipsOverflow.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/hooks/useChipsOverflow/useChipsOverflow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAIrE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,YAAY,EACrD,OAAO,EAAE,CAAC,EAAE,EACZ,OAAO,GAAE,uBAA4B;;;;;;qBA8JD,YAAY,CAAC,IAAI,CAAC,MAAM,WAAW,GAAG,IAAI;yBAcvE,WAAW,GAAG,IAAI;wBAalB,WAAW,GAAG,IAAI;wBAYlB,WAAW,GAAG,IAAI;EA4F1B"}
+{"version":3,"file":"useChipsOverflow.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/hooks/useChipsOverflow/useChipsOverflow.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAIrE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,YAAY,EACrD,OAAO,EAAE,CAAC,EAAE,EACZ,OAAO,GAAE,uBAA4B;;;;;;;qBAmKD,YAAY,CAAC,IAAI,CAAC,MAAM,WAAW,GAAG,IAAI;yBAcvE,WAAW,GAAG,IAAI;wBAalB,WAAW,GAAG,IAAI;wBAYlB,WAAW,GAAG,IAAI;EA6F1B"}

package/hooks/useChipsOverflow/useChipsOverflow.js

@@ -1,8 +1,9 @@
-import { useRef as c, useState as U, useEffect as m, useCallback as h, useMemo as q } from "react";
-import { calculateVisibleChipsCount as V } from "./helpers/calculateVisibleChipsCount.js";
-const ee = [];
-function se(t, x = {}) {
-  const { deferMeasurement: f = !1 } = x, v = c(null), b = c(null), C = c(null), M = c(null), W = c(null), R = c(/* @__PURE__ */ new Map()), a = c(/* @__PURE__ */ new Map()), [o, p] = U(null), [S, z] = U(/* @__PURE__ */ new Set()), u = c(null);
+import { useRef as c, useState as b, useEffect as m, useCallback as h, useMemo as z } from "react";
+import { calculateLeftoverWidth as ne } from "./helpers/calculateLeftoverWidth.js";
+import { calculateVisibleChipsCount as B } from "./helpers/calculateVisibleChipsCount.js";
+const re = [];
+function ae(t, G = {}) {
+  const { deferMeasurement: f = !1 } = G, v = c(null), C = c(null), M = c(null), S = c(null), y = c(null), R = c(/* @__PURE__ */ new Map()), a = c(/* @__PURE__ */ new Map()), [o, p] = b(null), [N, A] = b(0), [E, T] = b(/* @__PURE__ */ new Set()), d = c(null);
   m(() => {
     const e = new Set(t.map((r) => r.id));
     for (const r of a.current.keys())
@@ -10,53 +11,53 @@ function se(t, x = {}) {
     t.some((r) => !a.current.has(r.id)) && !f && p(null);
   }, [t, f]);
   const s = h(() => {
-    const e = v.current, n = b.current;
+    const e = v.current, n = C.current;
     if (!e || !n || t.length === 0) {
       p(null);
       return;
     }
     let r = !1;
     if (t.forEach((l) => {
-      const w = R.current.get(l.id);
-      w && w.offsetWidth > 0 && (r = r || !a.current.has(l.id), a.current.set(l.id, w.offsetWidth));
-    }), r && z(new Set(a.current.keys())), !t.every((l) => a.current.has(l.id))) {
-      u.current === null && (u.current = requestAnimationFrame(() => {
-        u.current = null, y.current?.();
+      const W = R.current.get(l.id);
+      W && W.offsetWidth > 0 && (r = r || !a.current.has(l.id), a.current.set(l.id, W.offsetWidth));
+    }), r && T(new Set(a.current.keys())), !t.every((l) => a.current.has(l.id))) {
+      d.current === null && (d.current = requestAnimationFrame(() => {
+        d.current = null, I.current?.();
       }));
       return;
     }
-    const i = getComputedStyle(e), F = getComputedStyle(n), j = parseFloat(i.paddingLeft) || 0, D = parseFloat(i.paddingRight) || 0, H = parseFloat(F.paddingLeft) || 0, J = parseFloat(F.paddingRight) || 0, d = parseFloat(F.gap) || 0, E = e.getBoundingClientRect().width || e.clientWidth;
-    if (E === 0)
+    const i = getComputedStyle(e), F = getComputedStyle(n), K = parseFloat(i.paddingLeft) || 0, Q = parseFloat(i.paddingRight) || 0, X = parseFloat(F.paddingLeft) || 0, Z = parseFloat(F.paddingRight) || 0, u = parseFloat(F.gap) || 0, O = e.getBoundingClientRect().width || e.clientWidth;
+    if (O === 0)
       return;
-    const I = M.current?.offsetWidth ?? 0, K = I > 0 ? I + d : 0, L = W.current?.offsetWidth ?? 0, Q = L > 0 ? L + d : 0, O = E - j - D - H - J - K - Q, P = t.map((l) => a.current.get(l.id) ?? 0);
-    if (V(O, d, P) >= t.length) {
-      p(t.length);
+    const P = S.current?.offsetWidth ?? 0, $ = P > 0 ? P + u : 0, k = y.current?.offsetWidth ?? 0, ee = k > 0 ? k + u : 0, U = O - K - Q - X - Z - $ - ee, w = t.map((l) => a.current.get(l.id) ?? 0);
+    if (B(U, u, w) >= t.length) {
+      p(t.length), A(0);
       return;
     }
-    const k = C.current?.offsetWidth ?? 0, X = k > 0 ? k + d : 0, Z = O - X, $ = V(Z, d, P);
-    p($);
-  }, [t]), y = c(null);
-  y.current = s, m(
+    const q = M.current?.offsetWidth ?? 0, te = q > 0 ? q + u : 0, V = U - te, x = B(V, u, w);
+    p(x), A(ne(V, u, w, x));
+  }, [t]), I = c(null);
+  I.current = s, m(
     () => () => {
-      u.current !== null && cancelAnimationFrame(u.current);
+      d.current !== null && cancelAnimationFrame(d.current);
     },
     []
   );
-  const B = h((e, n) => {
+  const Y = h((e, n) => {
     n ? R.current.set(e, n) : R.current.delete(e);
-  }, []), G = h(
+  }, []), _ = h(
     (e) => {
-      C.current = e, s();
+      M.current = e, s();
     },
     [s]
-  ), N = h(
+  ), j = h(
     (e) => {
-      M.current = e, s();
+      S.current = e, s();
     },
     [s]
-  ), T = h(
+  ), D = h(
     (e) => {
-      W.current = e, s();
+      y.current = e, s();
     },
     [s]
   );
@@ -76,33 +77,34 @@ function se(t, x = {}) {
     });
     return () => cancelAnimationFrame(e);
   }, [t, s]);
-  const g = q(
-    () => f && o !== null ? t.filter((e) => !S.has(e.id)) : ee,
-    [t, f, o, S]
-  ), { visibleFilters: Y, overflowFilters: _ } = q(() => {
+  const g = z(
+    () => f && o !== null ? t.filter((e) => !E.has(e.id)) : re,
+    [t, f, o, E]
+  ), { visibleFilters: H, overflowFilters: J } = z(() => {
     if (g.length === 0)
       return o === null || o >= t.length ? { visibleFilters: t, overflowFilters: [] } : {
         visibleFilters: t.slice(0, o),
         overflowFilters: t.slice(o)
       };
-    const e = new Set(g.map((i) => i.id)), n = t.filter((i) => !e.has(i.id)), r = o === null || o >= n.length ? n : n.slice(0, o), A = new Set(r.map((i) => i.id));
+    const e = new Set(g.map((i) => i.id)), n = t.filter((i) => !e.has(i.id)), r = o === null || o >= n.length ? n : n.slice(0, o), L = new Set(r.map((i) => i.id));
     return {
       visibleFilters: r,
-      overflowFilters: t.filter((i) => !A.has(i.id))
+      overflowFilters: t.filter((i) => !L.has(i.id))
     };
   }, [t, o, g]);
   return {
-    visibleFilters: Y,
-    overflowFilters: _,
+    visibleFilters: H,
+    overflowFilters: J,
     measuringFilters: g,
+    leftoverWidth: N,
     parentRef: v,
-    containerRef: b,
-    setChipRef: B,
-    setMoreChipRef: G,
-    setActionsRef: N,
-    setLeadingRef: T
+    containerRef: C,
+    setChipRef: Y,
+    setMoreChipRef: _,
+    setActionsRef: j,
+    setLeadingRef: D
   };
 }
 export {
-  se as useChipsOverflow
+  ae as useChipsOverflow
 };