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

package/package.json

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

package/components/DevicesPicker/DevicesPicker.d.ts

@@ -1,14 +0,0 @@
-import { DevicePickerOption, DevicesPickerProps } from './types';
-/**
- * DevicesPicker: device selector with a card-based trigger and a grouped
- * selection panel.
- *
- * It reuses the AutocompleteAsync engine (same reducer and `useFetchOptions`)
- * so the fetch contract — lazy first load, param changes, abort — behaves
- * exactly like the async autocomplete, while rendering its own UI.
- *
- * The trigger hugs its content: it shows the cards that fit and reports the
- * rest through the +N toggle instead of clipping them silently.
- */
-export declare function DevicesPicker<T extends DevicePickerOption = DevicePickerOption>(props: DevicesPickerProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DevicesPicker.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}

package/components/DevicesPicker/DevicesPicker.js

@@ -1,343 +0,0 @@
-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) {
-  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,
-    getDeviceIcon: S,
-    onChangeFilterParms: M
-  } = ee;
-  if (s && M)
-    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,
-    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),
-    [D]
-  ), h = l(
-    (e) => S ? S(e) : Ee(ao, {
-      src: Ue(z, e.deviceIcon?.iconId),
-      width: H,
-      height: H,
-      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
-  }), {
-    visibleFilters: j,
-    overflowFilters: T,
-    measuringFilters: u,
-    parentRef: Ie,
-    containerRef: we,
-    setChipRef: K,
-    setMoreChipRef: Oe,
-    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));
-    return {
-      visibleCards: j,
-      partialCard: t,
-      hiddenCards: T.filter((a) => a.id !== t?.id)
-    };
-  }, [j, T, u]), V = l((e) => {
-    e?.stopPropagation(), O(!1), W((t) => {
-      const a = !t;
-      return a ? B() : g(), a;
-    });
-  }, [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,
-    panelOpen: d,
-    listOpen: $,
-    error: me,
-    disabled: _,
-    loading: Y,
-    hasSelection: f.length > 0
-  };
-  return x ? /* @__PURE__ */ o(
-    J,
-    {
-      ownerState: v,
-      className: q(k, r.root),
-      "data-testid": F,
-      children: /* @__PURE__ */ o(ro, { size: c })
-    }
-  ) : /* @__PURE__ */ C(Pe, { children: [
-    /* @__PURE__ */ o(
-      J,
-      {
-        ref: Ie,
-        ownerState: v,
-        className: q(k, r.root),
-        "data-testid": F,
-        children: /* @__PURE__ */ C(
-          Ye,
-          {
-            ref: w,
-            ownerState: v,
-            className: r.trigger,
-            onClick: V,
-            children: [
-              f.length === 0 ? /* @__PURE__ */ C(
-                Ze,
-                {
-                  className: r.placeholderContainer,
-                  children: [
-                    /* @__PURE__ */ o(qe, { className: r.placeholderIcon, children: /* @__PURE__ */ o(ke, { src: /* @__PURE__ */ o(Fe, {}), color: "text.secondary" }) }),
-                    /* @__PURE__ */ o(
-                      He,
-                      {
-                        className: r.placeholder,
-                        variant: "bodyStandard",
-                        color: "text.disabled",
-                        children: ue ?? I(E.label_placeholder)
-                      }
-                    )
-                  ]
-                }
-              ) : /* @__PURE__ */ C(
-                Je,
-                {
-                  ref: we,
-                  className: r.cardsContainer,
-                  children: [
-                    Re.map((e) => /* @__PURE__ */ o(
-                      Q,
-                      {
-                        ref: (t) => K(e.id, t),
-                        className: r.deviceCardWrapper,
-                        children: /* @__PURE__ */ o(
-                          L,
-                          {
-                            deviceId: e.id,
-                            name: m(e),
-                            subtitle: p(e),
-                            icon: h(e),
-                            disableRemove: !s,
-                            onRemove: () => R(e),
-                            onClick: N,
-                            dataTestid: `${r.deviceCard}-${e.id}`
-                          }
-                        )
-                      },
-                      e.id
-                    )),
-                    n && // No lleva ref de medición a propósito: su ancho natural ya se
-                    // cacheó en la pasada inicial y aquí sale encogido, así que
-                    // registrarlo corrompería el cálculo del overflow.
-                    /* @__PURE__ */ o(
-                      Qe,
-                      {
-                        className: r.partialCardWrapper,
-                        children: /* @__PURE__ */ o(
-                          L,
-                          {
-                            deviceId: n.id,
-                            name: m(n),
-                            subtitle: p(n),
-                            icon: h(n),
-                            disableRemove: !s,
-                            onRemove: () => R(n),
-                            onClick: N,
-                            dataTestid: `${r.deviceCard}-${n.id}`
-                          }
-                        )
-                      },
-                      n.id
-                    )
-                  ]
-                }
-              ),
-              u.length > 0 && /* @__PURE__ */ o(
-                Xe,
-                {
-                  className: r.measuringLayer,
-                  "aria-hidden": !0,
-                  children: u.map((e) => /* @__PURE__ */ o(
-                    Q,
-                    {
-                      ref: (t) => K(e.id, t),
-                      className: r.deviceCardWrapper,
-                      children: /* @__PURE__ */ o(
-                        L,
-                        {
-                          deviceId: e.id,
-                          name: m(e),
-                          subtitle: p(e),
-                          icon: h(e),
-                          disableRemove: !s
-                        }
-                      )
-                    },
-                    e.id
-                  ))
-                }
-              ),
-              pe && U.length > 0 && /* @__PURE__ */ o(
-                eo,
-                {
-                  ref: Oe,
-                  ownerState: v,
-                  className: r.overflowToggle,
-                  dataTestId: r.overflowToggle,
-                  variant: "contained",
-                  color: "default",
-                  size: c,
-                  label: `+${U.length}`,
-                  onToggle: N
-                }
-              ),
-              /* @__PURE__ */ o(
-                oo,
-                {
-                  ref: ye,
-                  className: r.chevronButton,
-                  dataTestId: r.chevronButton,
-                  icon: d ? /* @__PURE__ */ o(Ae, {}) : /* @__PURE__ */ o(Me, {}),
-                  variant: "text",
-                  size: c,
-                  disabled: _ || Y,
-                  "aria-label": I(E.label_open_panel),
-                  onClick: V
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ o(
-      X,
-      {
-        open: d,
-        anchorEl: w.current,
-        onClose: P,
-        arrowType: "no-arrow",
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        children: /* @__PURE__ */ o(
-          to,
-          {
-            groups: De,
-            items: Se,
-            selectedIds: Ce,
-            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
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ o(
-      X,
-      {
-        open: $,
-        anchorEl: w.current,
-        onClose: Te,
-        arrowType: "no-arrow",
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: -3, horizontal: "right" },
-        children: /* @__PURE__ */ o(
-          no,
-          {
-            devices: f,
-            getOptionLabel: m,
-            getDeviceSubtitle: p,
-            getDeviceIcon: h,
-            onRemove: R
-          }
-        )
-      }
-    )
-  ] });
-}
-export {
-  Eo as DevicesPicker
-};

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

@@ -1,3 +0,0 @@
-import { DevicesPickerStyles } from './types';
-export declare const devicesPickerStyles: DevicesPickerStyles;
-//# sourceMappingURL=DevicesPicker.styles.d.ts.map

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

@@ -1 +0,0 @@
-{"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,mBAuejC,CAAC"}