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

package/components/DevicesPicker/DevicesPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevicesPicker.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DevicesPicker/DevicesPicker.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAAE,kBAAkB,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE1F;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAC7E,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,oDAkX7B"}
+{"version":3,"file":"DevicesPicker.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DevicesPicker/DevicesPicker.tsx"],"names":[],"mappings":"AA0CA,OAAO,EAAE,kBAAkB,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE1F;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAC7E,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,oDAwX7B"}

package/components/DevicesPicker/DevicesPicker.js

@@ -1,200 +1,201 @@
-import { jsx as o, jsxs as C, Fragment as Pe } from "@emotion/react/jsx-runtime";
-import { useRef as Ne, useState as Z, useCallback as l, createElement as Ee, useMemo as Le } from "react";
-import q from "clsx";
-import { useModuleDictionary as _e, useEnvironment as xe } from "@m4l/core";
-import { Icon as ke } from "@m4l/base";
-import { ConectivityDispositiveOutlined as Fe, ArrowChevronMdUpOutlined as Ae, ArrowChevronMdDownOutlined as Me } from "@m4l/icons";
-import { useDevicesAsyncOptions as ze } from "./hooks/useDevicesAsyncOptions.js";
-import { useDeviceGroups as We } from "./hooks/useDeviceGroups.js";
-import { useDevicesSelection as $e } from "./hooks/useDevicesSelection.js";
-import { usePanelColumns as Ge } from "./hooks/usePanelColumns.js";
-import { resolveDeviceGroup as Be } from "./helpers/resolveDeviceGroup.js";
-import { DEVICES_PICKER_ICON_SIZE as H, DEVICES_PICKER_CLASSES as r } from "./constants.js";
-import { DICCTIONARY as E } from "./dictionary.js";
-import { resolveDeviceTitle as je, resolveDeviceSubtitle as Ke } from "../../helpers/resolveDeviceLabels/resolveDeviceLabels.js";
-import { resolveDeviceIconSrc as Ue } from "../../helpers/resolveDeviceIconSrc/resolveDeviceIconSrc.js";
-import { useChipsOverflow as Ve } from "../../hooks/useChipsOverflow/useChipsOverflow.js";
-import { RootStyled as J, TriggerStyled as Ye, PlaceholderContainerStyled as Ze, PlaceholderIconStyled as qe, PlaceholderStyled as He, CardsContainerStyled as Je, DeviceCardWrapperStyled as Q, PartialCardWrapperStyled as Qe, MeasuringLayerStyled as Xe, OverflowToggleStyled as eo, ChevronButtonStyled as oo } from "./slots/DevicesPickerSlots.js";
-import { DevicesPickerSkeleton as ro } from "./subcomponents/DevicesPickerSkeleton/DevicesPickerSkeleton.js";
-import { DevicesPanel as to } from "./subcomponents/DevicesPanel/DevicesPanel.js";
-import { SelectedDevicesList as no } from "./subcomponents/SelectedDevicesList/SelectedDevicesList.js";
-import { Image as ao } from "../Image/Image.js";
-import { DeviceCard as L } from "./subcomponents/DeviceCard/DeviceCard.js";
-import { Popover as X } from "../extended/mui/Popover/Popover.js";
-function Eo(ee) {
+import { jsx as o, jsxs as C, Fragment as Le } from "@emotion/react/jsx-runtime";
+import { useRef as _e, useState as J, useCallback as i, createElement as Ae, useMemo as xe } from "react";
+import Q from "clsx";
+import { useModuleDictionary as ke, useEnvironment as Fe } from "@m4l/core";
+import { Icon as Me } from "@m4l/base";
+import { ConectivityDispositiveOutlined as We, ArrowChevronMdUpOutlined as ze, ArrowChevronMdDownOutlined as $e } from "@m4l/icons";
+import { useDevicesAsyncOptions as Ge } from "./hooks/useDevicesAsyncOptions.js";
+import { useDeviceGroups as Be } from "./hooks/useDeviceGroups.js";
+import { useDevicesSelection as Ke } from "./hooks/useDevicesSelection.js";
+import { usePanelColumns as Ve } from "./hooks/usePanelColumns.js";
+import { resolveDeviceGroup as je } from "./helpers/resolveDeviceGroup.js";
+import { DEVICES_PICKER_ICON_SIZE as X, DEVICES_PICKER_PARTIAL_CARD_MIN_WIDTH as Ue, DEVICES_PICKER_CLASSES as t } from "./constants.js";
+import { DICCTIONARY as _ } from "./dictionary.js";
+import { resolveDeviceTitle as He, resolveDeviceSubtitle as Ye } from "../../helpers/resolveDeviceLabels/resolveDeviceLabels.js";
+import { resolveDeviceIconSrc as Ze } from "../../helpers/resolveDeviceIconSrc/resolveDeviceIconSrc.js";
+import { useChipsOverflow as qe } from "../../hooks/useChipsOverflow/useChipsOverflow.js";
+import { RootStyled as ee, TriggerStyled as Je, PlaceholderContainerStyled as Qe, PlaceholderIconStyled as Xe, PlaceholderStyled as eo, CardsContainerStyled as oo, DeviceCardWrapperStyled as oe, PartialCardWrapperStyled as to, MeasuringLayerStyled as ro, OverflowToggleStyled as no, ChevronButtonStyled as ao } from "./slots/DevicesPickerSlots.js";
+import { DevicesPickerSkeleton as io } from "./subcomponents/DevicesPickerSkeleton/DevicesPickerSkeleton.js";
+import { DevicesPanel as lo } from "./subcomponents/DevicesPanel/DevicesPanel.js";
+import { SelectedDevicesList as so } from "./subcomponents/SelectedDevicesList/SelectedDevicesList.js";
+import { Image as co } from "../Image/Image.js";
+import { DeviceCard as A } from "./subcomponents/DeviceCard/DeviceCard.js";
+import { Popover as te } from "../extended/mui/Popover/Popover.js";
+function xo(re) {
   const {
-    endPoint: oe,
-    timeout: re,
-    parms: te,
-    resultField: ne,
-    isRemote: ae,
-    isExternalUrl: ie,
-    responseToCamelCase: le,
-    shouldFetch: se,
-    value: ce,
-    onChange: de,
-    multiple: s = !0,
-    disabled: _ = !1,
-    loading: x = !1,
-    error: me = !1,
-    size: c = "medium",
-    showOverflowToggle: pe = !0,
-    showDepartments: he,
-    showIds: ge,
-    searchable: fe = !0,
-    placeholder: ue,
-    className: k,
-    dataTestid: F,
-    getOptionLabel: b,
-    getDeviceGroup: A = Be,
-    getDeviceSubtitle: D,
+    endPoint: ne,
+    timeout: ae,
+    parms: ie,
+    resultField: le,
+    isRemote: se,
+    isExternalUrl: de,
+    responseToCamelCase: ce,
+    shouldFetch: me,
+    value: pe,
+    onChange: he,
+    multiple: l = !0,
+    disabled: x = !1,
+    loading: k = !1,
+    error: ge = !1,
+    size: s = "medium",
+    showOverflowToggle: fe = !0,
+    showDepartments: ve,
+    showIds: ue,
+    searchable: Ce = !0,
+    placeholder: De,
+    className: F,
+    dataTestid: M,
+    getOptionLabel: D,
+    getDeviceGroup: W = je,
+    getDeviceSubtitle: I,
     getDeviceIcon: S,
-    onChangeFilterParms: M
-  } = ee;
-  if (s && M)
+    onChangeFilterParms: z
+  } = re;
+  if (l && z)
     throw new Error(
       "multiple cannot be enabled when onChangeFilterParms is defined; define the filter in parms if needed."
     );
-  const { getLabel: I } = _e(), { hostApiRemote: z } = xe(), w = Ne(null), [d, W] = Z(!1), [$, O] = Z(!1), {
-    options: y,
-    loading: G,
-    onOpen: B,
+  const { getLabel: b } = ke(), { hostApiRemote: $ } = Fe(), w = _e(null), [d, G] = J(!1), [B, O] = J(!1), {
+    options: P,
+    loading: K,
+    onOpen: V,
     onClose: g,
-    onSearchChange: ve
-  } = ze({
-    endPoint: oe,
-    timeout: re,
-    parms: te,
-    resultField: ne,
-    isRemote: ae,
-    isExternalUrl: ie,
-    responseToCamelCase: le,
-    shouldFetch: se,
-    onChangeFilterParms: M
-  }), m = l(
-    (e) => b ? b(e) : je(e),
-    [b]
-  ), p = l(
-    (e) => D ? D(e) : Ke(e),
+    onSearchChange: Ie
+  } = Ge({
+    endPoint: ne,
+    timeout: ae,
+    parms: ie,
+    resultField: le,
+    isRemote: se,
+    isExternalUrl: de,
+    responseToCamelCase: ce,
+    shouldFetch: me,
+    onChangeFilterParms: z
+  }), c = i(
+    (e) => D ? D(e) : He(e),
     [D]
-  ), h = l(
-    (e) => S ? S(e) : Ee(ao, {
-      src: Ue(z, e.deviceIcon?.iconId),
-      width: H,
-      height: H,
+  ), m = i(
+    (e) => I ? I(e) : Ye(e),
+    [I]
+  ), p = i(
+    (e) => S ? S(e) : Ae(co, {
+      src: Ze($, e.deviceIcon?.iconId),
+      width: X,
+      height: X,
       enableIntersectionObserver: !1
     }),
-    [S, z]
-  ), { selectedIds: Ce, selectedDevices: f, handleSelectionChange: be, handleRemove: R } = $e({ value: ce, options: y, multiple: s, onChange: de }), i = Ge({
-    options: y,
-    showDepartments: he,
-    showIds: ge,
-    getDeviceGroup: A
-  }), { groups: De, items: Se } = We({
-    options: y,
-    grouped: i.showDepartments,
-    getDeviceGroup: A,
-    defaultGroupLabel: I(E.label_default_department),
-    getOptionLabel: m,
-    getDeviceSubtitle: p,
-    getDeviceIcon: h
+    [S, $]
+  ), { selectedIds: Se, selectedDevices: f, handleSelectionChange: be, handleRemove: R } = Ke({ value: pe, options: P, multiple: l, onChange: he }), a = Ve({
+    options: P,
+    showDepartments: ve,
+    showIds: ue,
+    getDeviceGroup: W
+  }), { groups: we, items: Oe } = Be({
+    options: P,
+    grouped: a.showDepartments,
+    getDeviceGroup: W,
+    defaultGroupLabel: b(_.label_default_department),
+    getOptionLabel: c,
+    getDeviceSubtitle: m,
+    getDeviceIcon: p
   }), {
-    visibleFilters: j,
-    overflowFilters: T,
-    measuringFilters: u,
-    parentRef: Ie,
-    containerRef: we,
-    setChipRef: K,
-    setMoreChipRef: Oe,
+    visibleFilters: T,
+    overflowFilters: y,
+    measuringFilters: v,
+    leftoverWidth: j,
+    parentRef: Pe,
+    containerRef: Re,
+    setChipRef: U,
+    setMoreChipRef: Te,
     setActionsRef: ye
-  } = Ve(f, { deferMeasurement: !0 }), { visibleCards: Re, partialCard: n, hiddenCards: U } = Le(() => {
-    const e = new Set(u.map((a) => a.id)), t = T.find((a) => !e.has(a.id));
+  } = qe(f, { deferMeasurement: !0 }), { visibleCards: Ee, partialCard: n, hiddenCards: H } = xe(() => {
+    const e = new Set(v.map((h) => h.id)), r = y.find((h) => !e.has(h.id)), q = j >= Ue || T.length === 0 ? r : void 0;
     return {
-      visibleCards: j,
-      partialCard: t,
-      hiddenCards: T.filter((a) => a.id !== t?.id)
+      visibleCards: T,
+      partialCard: q,
+      hiddenCards: y.filter((h) => h.id !== q?.id)
     };
-  }, [j, T, u]), V = l((e) => {
-    e?.stopPropagation(), O(!1), W((t) => {
-      const a = !t;
-      return a ? B() : g(), a;
+  }, [T, y, v, j]), Y = i((e) => {
+    e?.stopPropagation(), O(!1), G((r) => {
+      const L = !r;
+      return L ? V() : g(), L;
     });
-  }, [B, g]), P = l(() => {
-    W(!1), g();
-  }, [g]), N = l((e) => {
-    e?.stopPropagation(), d && P(), O((t) => !t);
-  }, [d, P]), Te = l(() => O(!1), []), Y = x || G, v = {
-    size: c,
+  }, [V, g]), E = i(() => {
+    G(!1), g();
+  }, [g]), N = i((e) => {
+    e?.stopPropagation(), d && E(), O((r) => !r);
+  }, [d, E]), Ne = i(() => O(!1), []), Z = k || K, u = {
+    size: s,
     panelOpen: d,
-    listOpen: $,
-    error: me,
-    disabled: _,
-    loading: Y,
+    listOpen: B,
+    error: ge,
+    disabled: x,
+    loading: Z,
     hasSelection: f.length > 0
   };
-  return x ? /* @__PURE__ */ o(
-    J,
+  return k ? /* @__PURE__ */ o(
+    ee,
     {
-      ownerState: v,
-      className: q(k, r.root),
-      "data-testid": F,
-      children: /* @__PURE__ */ o(ro, { size: c })
+      ownerState: u,
+      className: Q(F, t.root),
+      "data-testid": M,
+      children: /* @__PURE__ */ o(io, { size: s })
     }
-  ) : /* @__PURE__ */ C(Pe, { children: [
+  ) : /* @__PURE__ */ C(Le, { children: [
     /* @__PURE__ */ o(
-      J,
+      ee,
       {
-        ref: Ie,
-        ownerState: v,
-        className: q(k, r.root),
-        "data-testid": F,
+        ref: Pe,
+        ownerState: u,
+        className: Q(F, t.root),
+        "data-testid": M,
         children: /* @__PURE__ */ C(
-          Ye,
+          Je,
           {
             ref: w,
-            ownerState: v,
-            className: r.trigger,
-            onClick: V,
+            ownerState: u,
+            className: t.trigger,
+            onClick: Y,
             children: [
               f.length === 0 ? /* @__PURE__ */ C(
-                Ze,
+                Qe,
                 {
-                  className: r.placeholderContainer,
+                  className: t.placeholderContainer,
                   children: [
-                    /* @__PURE__ */ o(qe, { className: r.placeholderIcon, children: /* @__PURE__ */ o(ke, { src: /* @__PURE__ */ o(Fe, {}), color: "text.secondary" }) }),
+                    /* @__PURE__ */ o(Xe, { className: t.placeholderIcon, children: /* @__PURE__ */ o(Me, { src: /* @__PURE__ */ o(We, {}), color: "text.secondary" }) }),
                     /* @__PURE__ */ o(
-                      He,
+                      eo,
                       {
-                        className: r.placeholder,
+                        className: t.placeholder,
                         variant: "bodyStandard",
                         color: "text.disabled",
-                        children: ue ?? I(E.label_placeholder)
+                        children: De ?? b(_.label_placeholder)
                       }
                     )
                   ]
                 }
               ) : /* @__PURE__ */ C(
-                Je,
+                oo,
                 {
-                  ref: we,
-                  className: r.cardsContainer,
+                  ref: Re,
+                  className: t.cardsContainer,
                   children: [
-                    Re.map((e) => /* @__PURE__ */ o(
-                      Q,
+                    Ee.map((e) => /* @__PURE__ */ o(
+                      oe,
                       {
-                        ref: (t) => K(e.id, t),
-                        className: r.deviceCardWrapper,
+                        ref: (r) => U(e.id, r),
+                        className: t.deviceCardWrapper,
                         children: /* @__PURE__ */ o(
-                          L,
+                          A,
                           {
                             deviceId: e.id,
-                            name: m(e),
-                            subtitle: p(e),
-                            icon: h(e),
-                            disableRemove: !s,
+                            name: c(e),
+                            subtitle: m(e),
+                            icon: p(e),
+                            disableRemove: !l,
                             onRemove: () => R(e),
                             onClick: N,
-                            dataTestid: `${r.deviceCard}-${e.id}`
+                            dataTestid: `${t.deviceCard}-${e.id}`
                           }
                         )
                       },
@@ -204,20 +205,20 @@ function Eo(ee) {
                     // cacheó en la pasada inicial y aquí sale encogido, así que
                     // registrarlo corrompería el cálculo del overflow.
                     /* @__PURE__ */ o(
-                      Qe,
+                      to,
                       {
-                        className: r.partialCardWrapper,
+                        className: t.partialCardWrapper,
                         children: /* @__PURE__ */ o(
-                          L,
+                          A,
                           {
                             deviceId: n.id,
-                            name: m(n),
-                            subtitle: p(n),
-                            icon: h(n),
-                            disableRemove: !s,
+                            name: c(n),
+                            subtitle: m(n),
+                            icon: p(n),
+                            disableRemove: !l,
                             onRemove: () => R(n),
                             onClick: N,
-                            dataTestid: `${r.deviceCard}-${n.id}`
+                            dataTestid: `${t.deviceCard}-${n.id}`
                           }
                         )
                       },
@@ -226,24 +227,24 @@ function Eo(ee) {
                   ]
                 }
               ),
-              u.length > 0 && /* @__PURE__ */ o(
-                Xe,
+              v.length > 0 && /* @__PURE__ */ o(
+                ro,
                 {
-                  className: r.measuringLayer,
+                  className: t.measuringLayer,
                   "aria-hidden": !0,
-                  children: u.map((e) => /* @__PURE__ */ o(
-                    Q,
+                  children: v.map((e) => /* @__PURE__ */ o(
+                    oe,
                     {
-                      ref: (t) => K(e.id, t),
-                      className: r.deviceCardWrapper,
+                      ref: (r) => U(e.id, r),
+                      className: t.deviceCardWrapper,
                       children: /* @__PURE__ */ o(
-                        L,
+                        A,
                         {
                           deviceId: e.id,
-                          name: m(e),
-                          subtitle: p(e),
-                          icon: h(e),
-                          disableRemove: !s
+                          name: c(e),
+                          subtitle: m(e),
+                          icon: p(e),
+                          disableRemove: !l
                         }
                       )
                     },
@@ -251,32 +252,32 @@ function Eo(ee) {
                   ))
                 }
               ),
-              pe && U.length > 0 && /* @__PURE__ */ o(
-                eo,
+              fe && H.length > 0 && /* @__PURE__ */ o(
+                no,
                 {
-                  ref: Oe,
-                  ownerState: v,
-                  className: r.overflowToggle,
-                  dataTestId: r.overflowToggle,
+                  ref: Te,
+                  ownerState: u,
+                  className: t.overflowToggle,
+                  dataTestId: t.overflowToggle,
                   variant: "contained",
                   color: "default",
-                  size: c,
-                  label: `+${U.length}`,
+                  size: s,
+                  label: `+${H.length}`,
                   onToggle: N
                 }
               ),
               /* @__PURE__ */ o(
-                oo,
+                ao,
                 {
                   ref: ye,
-                  className: r.chevronButton,
-                  dataTestId: r.chevronButton,
-                  icon: d ? /* @__PURE__ */ o(Ae, {}) : /* @__PURE__ */ o(Me, {}),
+                  className: t.chevronButton,
+                  dataTestId: t.chevronButton,
+                  icon: d ? /* @__PURE__ */ o(ze, {}) : /* @__PURE__ */ o($e, {}),
                   variant: "text",
-                  size: c,
-                  disabled: _ || Y,
-                  "aria-label": I(E.label_open_panel),
-                  onClick: V
+                  size: s,
+                  disabled: x || Z,
+                  "aria-label": b(_.label_open_panel),
+                  onClick: Y
                 }
               )
             ]
@@ -285,52 +286,52 @@ function Eo(ee) {
       }
     ),
     /* @__PURE__ */ o(
-      X,
+      te,
       {
         open: d,
         anchorEl: w.current,
-        onClose: P,
+        onClose: E,
         arrowType: "no-arrow",
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
         children: /* @__PURE__ */ o(
-          to,
+          lo,
           {
-            groups: De,
-            items: Se,
-            selectedIds: Ce,
+            groups: we,
+            items: Oe,
+            selectedIds: Se,
             onSelectionChange: be,
-            multiple: s,
-            loading: G,
-            searchable: fe,
-            onSearchChange: ve,
-            size: c,
-            showDepartments: i.showDepartments,
-            showIds: i.showIds,
-            canShowDepartments: i.canShowDepartments,
-            canShowIds: i.canShowIds,
-            onToggleDepartments: i.toggleDepartments,
-            onToggleIds: i.toggleIds
+            multiple: l,
+            loading: K,
+            searchable: Ce,
+            onSearchChange: Ie,
+            size: s,
+            showDepartments: a.showDepartments,
+            showIds: a.showIds,
+            canShowDepartments: a.canShowDepartments,
+            canShowIds: a.canShowIds,
+            onToggleDepartments: a.toggleDepartments,
+            onToggleIds: a.toggleIds
           }
         )
       }
     ),
     /* @__PURE__ */ o(
-      X,
+      te,
       {
-        open: $,
+        open: B,
         anchorEl: w.current,
-        onClose: Te,
+        onClose: Ne,
         arrowType: "no-arrow",
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: -3, horizontal: "right" },
         children: /* @__PURE__ */ o(
-          no,
+          so,
           {
             devices: f,
-            getOptionLabel: m,
-            getDeviceSubtitle: p,
-            getDeviceIcon: h,
+            getOptionLabel: c,
+            getDeviceSubtitle: m,
+            getDeviceIcon: p,
             onRemove: R
           }
         )
@@ -339,5 +340,5 @@ function Eo(ee) {
   ] });
 }
 export {
-  Eo as DevicesPicker
+  xo as DevicesPicker
 };

package/components/DevicesPicker/DevicesPicker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevicesPicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DevicesPicker/DevicesPicker.styles.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,mBAAmB,EAAE,mBAwejC,CAAC"}
+{"version":3,"file":"DevicesPicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DevicesPicker/DevicesPicker.styles.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,mBAAmB,EAAE,mBAufjC,CAAC"}