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

package/components/DevicesPicker/DevicesPicker.js

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

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

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

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

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