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

package/components/DevicesPicker/DevicesPicker.styles.js

@@ -3,9 +3,9 @@ import { getTypographyStyles as p } from "../../utils/getTypographyStyles.js";
 import { BUTTON_CLASSES as c } from "../extended/mui/Button/constants.js";
 import { SWITCH_CLASSES as n } from "../extended/mui/Switch/constants.js";
 import { CHECKABLE_LIST_CLASSES as o } from "../CheckableList/constants.js";
-import { DEVICES_PICKER_WIDTH as d, DEVICES_PICKER_PANEL_WIDTH as g, DEVICES_PICKER_PANEL_LIST_HEIGHT as t, DEVICES_PICKER_SKELETON as b, DEVICES_PICKER_SELECTED_LIST_WIDTH as v, DEVICES_PICKER_CLASSES as s } from "./constants.js";
-import { getSizeStyles as a } from "../../utils/getSizeStyles/getSizeStyles.js";
-const m = {
+import { DEVICES_PICKER_WIDTH as d, DEVICES_PICKER_CARD_MAX_WIDTH as g, DEVICES_PICKER_CARD_MIN_HEIGHT as v, DEVICES_PICKER_PANEL_WIDTH as b, DEVICES_PICKER_PANEL_LIST_HEIGHT as t, DEVICES_PICKER_SKELETON as S, DEVICES_PICKER_SELECTED_LIST_WIDTH as f, DEVICES_PICKER_CLASSES as a } from "./constants.js";
+import { getSizeStyles as s } from "../../utils/getSizeStyles/getSizeStyles.js";
+const y = {
   /**
    * root: Full-width wrapper. The overflow measurement reads its width, so it
    * must not depend on how many cards are currently painted.
@@ -51,7 +51,14 @@ const m = {
    */
   deviceCardWrapper: () => ({
     display: "inline-flex",
-    flexShrink: 0
+    flexShrink: 0,
+    // Un alias largo se comía el renglón entero y dejaba a las demás cards
+    // reducidas a su icono, así que aquí se topa y el texto trunca.
+    maxWidth: g,
+    [`& .${a.deviceCard}`]: {
+      maxWidth: "100%",
+      minWidth: 0
+    }
   }),
   /**
    * measuringLayer: Holds the cards whose width is still unknown. It is taken
@@ -75,7 +82,7 @@ const m = {
     display: "inline-flex",
     flexShrink: 1,
     minWidth: 0,
-    [`& .${s.deviceCard}`]: {
+    [`& .${a.deviceCard}`]: {
       flexShrink: 1,
       minWidth: 0
     }
@@ -88,8 +95,8 @@ const m = {
   cardsContainer: ({ theme: e }) => ({
     display: "flex",
     alignItems: "center",
-    // Abraza las cards en lugar de estirarse: si se estira, el +N se va al
-    // borde y deja un hueco que parece sitio libre sin serlo.
+    // Abraza las cards: el hueco que sobre queda entre ellas y el +N, que se
+    // ancla a la derecha junto al chevron.
     flex: "0 1 auto",
     minWidth: 0,
     overflow: "hidden",
@@ -116,7 +123,7 @@ const m = {
     padding: e.vars.size.baseSpacings.sp1,
     borderRadius: e.vars.size.borderRadius.r2,
     backgroundColor: e.vars.palette.chips.default.contained.backgroundColor,
-    ...a(e, "medium", "container", (i) => ({
+    ...s(e, "medium", "container", (i) => ({
       width: i,
       height: i
     }))
@@ -135,6 +142,13 @@ const m = {
    */
   overflowToggle: ({ theme: e, ownerState: i }) => ({
     flexShrink: 0,
+    // Vive con el chevron, en el extremo derecho del trigger, no pegado a la
+    // última card. El chevron cede su propio margen automático: con dos, flex
+    // reparte el sobrante entre ambos y el +N se queda a medio camino.
+    marginLeft: "auto",
+    [`& + .${a.chevronButton}`]: {
+      marginLeft: 0
+    },
     alignSelf: "stretch",
     height: "auto",
     "&&": {
@@ -176,6 +190,7 @@ const m = {
     alignItems: "center",
     flexShrink: 0,
     width: "auto",
+    minHeight: v,
     gap: e.vars.size.baseSpacings["sp1-5"],
     padding: `${e.vars.size.baseSpacings.sp1} ${e.vars.size.baseSpacings["sp1-5"]}`
   }),
@@ -188,7 +203,7 @@ const m = {
     justifyContent: "center",
     flexShrink: 0,
     borderRadius: e.vars.size.borderRadius.r1,
-    ...a(e, "medium", "container", (i) => ({
+    ...s(e, "medium", "container", (i) => ({
       width: i,
       height: i
     }))
@@ -228,7 +243,7 @@ const m = {
    */
   deviceCardRemove: ({ theme: e, ownerState: i }) => ({
     flexShrink: 0,
-    ...a(e, i?.size || "medium", "base", (r) => ({
+    ...s(e, i?.size || "medium", "base", (r) => ({
       width: r,
       height: r
     }))
@@ -238,7 +253,7 @@ const m = {
    * the height follows the content and the list scrolls inside.
    */
   panel: ({ theme: e }) => ({
-    width: g,
+    width: b,
     display: "flex",
     flexDirection: "column",
     borderRadius: e.vars.size.borderRadius.r3,
@@ -383,7 +398,7 @@ const m = {
    * toggle. It is the only way to reach the cards that do not fit.
    */
   selectedList: ({ theme: e }) => ({
-    width: v,
+    width: f,
     display: "flex",
     flexDirection: "column",
     borderRadius: e.vars.size.borderRadius.r3,
@@ -428,9 +443,9 @@ const m = {
     padding: e.vars.size.baseSpacings.sp2,
     // Aquí sí hay sitio para el texto entero: el recorte es cosa del trigger,
     // donde la card compite por el ancho de la fila.
-    [`&& .${s.deviceCardName},
-      && .${s.deviceCardSubtitle},
-      && .${s.deviceCardId}`]: {
+    [`&& .${a.deviceCardName},
+      && .${a.deviceCardSubtitle},
+      && .${a.deviceCardId}`]: {
       whiteSpace: "normal",
       overflowWrap: "anywhere",
       textOverflow: "clip"
@@ -456,7 +471,7 @@ const m = {
     "&&.MuiSkeleton-root": {
       borderRadius: e.vars.size.borderRadius.r2,
       backgroundColor: e.vars.palette.skeleton.default,
-      ...a(e, i?.size || "medium", "container", (r) => ({
+      ...s(e, i?.size || "medium", "container", (r) => ({
         width: r,
         height: r
       }))
@@ -469,7 +484,7 @@ const m = {
   skeletonLine: ({ theme: e }) => ({
     flexShrink: 0,
     "&&.MuiSkeleton-root": {
-      width: b.textLineWidth,
+      width: S.textLineWidth,
       height: e.vars.size.baseSpacings["sp2-5"],
       borderRadius: e.vars.size.borderRadius.r4,
       backgroundColor: e.vars.palette.skeleton.default
@@ -483,7 +498,7 @@ const m = {
     "&&.MuiSkeleton-root": {
       borderRadius: e.vars.size.borderRadius.r4,
       backgroundColor: e.vars.palette.skeleton.default,
-      ...a(e, i?.size || "medium", "base", (r) => ({
+      ...s(e, i?.size || "medium", "base", (r) => ({
         width: r,
         height: r
       }))
@@ -491,5 +506,5 @@ const m = {
   })
 };
 export {
-  m as devicesPickerStyles
+  y as devicesPickerStyles
 };

package/components/DevicesPicker/constants.d.ts

@@ -67,8 +67,19 @@ export declare const DEVICES_PICKER_SKELETON: {
  */
 export declare const DEVICES_PICKER_ASYNC_ONLY_KEYS: readonly ["endPoint", "timeout", "parms", "resultField", "isRemote", "isExternalUrl", "responseToCamelCase", "shouldFetch"];
 /**
- * Placeholder shown when a device has no subtitle, so every card keeps the
- * same height.
+ * Fixed height of a selected device card, so a device without a plate keeps
+ * the same height as one with it. Taken from the master's three-line Item.
  */
-export declare const DEVICES_PICKER_EMPTY_VALUE = "--";
+export declare const DEVICES_PICKER_CARD_MIN_HEIGHT = 56;
+/**
+ * Widest a selected device card can get inside the trigger. The card that does
+ * not fit whole is excluded: it already truncates against the leftover space.
+ */
+export declare const DEVICES_PICKER_CARD_MAX_WIDTH = 200;
+/**
+ * Narrowest the card that does not fit whole may get before it stops being
+ * painted: below this it only shows the icon and the remove action, which
+ * identifies no device. It is reported by the +N toggle instead.
+ */
+export declare const DEVICES_PICKER_PARTIAL_CARD_MIN_WIDTH = 150;
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DevicesPicker/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,sBAAsB,2pBAGlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAQxC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,kCAAkC,MAAM,CAAC;AAEtD;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,MAAM,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,YAAY,CAAC;AAEzD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB;IACpC,0EAA0E;;IAE1E,uDAAuD;;IAEvD,wDAAwD;;CAEhD,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;IAClC,sEAAsE;;CAE9D,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,8BAA8B,6HASjC,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,0BAA0B,OAAO,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/DevicesPicker/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,sBAAsB,2pBAGlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAQxC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,kCAAkC,MAAM,CAAC;AAEtD;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,MAAM,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,YAAY,CAAC;AAEzD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB;IACpC,0EAA0E;;IAE1E,uDAAuD;;IAEvD,wDAAwD;;CAEhD,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;IAClC,sEAAsE;;CAE9D,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,8BAA8B,6HASjC,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,8BAA8B,KAAK,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,qCAAqC,MAAM,CAAC"}

package/components/DevicesPicker/constants.js

@@ -1,16 +1,16 @@
 import { getComponentClasses as E } from "../../utils/getComponentSlotRoot.js";
 import { DevicesPickerSlots as _ } from "./slots/DevicesPickerEnum.js";
-const I = "M4LDevicesPicker", e = E(
+const I = "M4LDevicesPicker", o = E(
   I,
   _
-), o = 440, s = 31, S = 320, n = 320, D = 320, P = "default", c = {
+), s = 440, e = 31, D = 320, S = 320, n = 320, P = "default", R = {
   /** Name + plate: bodyStandard (16.5) + microSlim (15) + 12 of padding. */
   twoLines: 44,
   /** Name + plate + id: adds a second microSlim line. */
   threeLines: 60,
   /** Collapsible group header, a single bodyDens line. */
   group: 36
-}, i = {
+}, c = {
   /** Ghost text bar width, taken from the master's Skeleton variant. */
   textLineWidth: 140
 }, K = [
@@ -22,18 +22,20 @@ const I = "M4LDevicesPicker", e = E(
   "isExternalUrl",
   "responseToCamelCase",
   "shouldFetch"
-], R = "--";
+], T = 56, i = 200, r = 150;
 export {
   K as DEVICES_PICKER_ASYNC_ONLY_KEYS,
-  e as DEVICES_PICKER_CLASSES,
+  i as DEVICES_PICKER_CARD_MAX_WIDTH,
+  T as DEVICES_PICKER_CARD_MIN_HEIGHT,
+  o as DEVICES_PICKER_CLASSES,
   P as DEVICES_PICKER_DEFAULT_GROUP_ID,
-  R as DEVICES_PICKER_EMPTY_VALUE,
-  s as DEVICES_PICKER_ICON_SIZE,
+  e as DEVICES_PICKER_ICON_SIZE,
   I as DEVICES_PICKER_KEY_COMPONENT,
-  D as DEVICES_PICKER_PANEL_LIST_HEIGHT,
-  S as DEVICES_PICKER_PANEL_WIDTH,
-  c as DEVICES_PICKER_ROW_HEIGHT,
-  n as DEVICES_PICKER_SELECTED_LIST_WIDTH,
-  i as DEVICES_PICKER_SKELETON,
-  o as DEVICES_PICKER_WIDTH
+  n as DEVICES_PICKER_PANEL_LIST_HEIGHT,
+  D as DEVICES_PICKER_PANEL_WIDTH,
+  r as DEVICES_PICKER_PARTIAL_CARD_MIN_WIDTH,
+  R as DEVICES_PICKER_ROW_HEIGHT,
+  S as DEVICES_PICKER_SELECTED_LIST_WIDTH,
+  c as DEVICES_PICKER_SKELETON,
+  s as DEVICES_PICKER_WIDTH
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DeviceCard.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DeviceCard/DeviceCard.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAuEhD"}
+{"version":3,"file":"DeviceCard.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DeviceCard/DeviceCard.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAyEhD"}

package/components/DevicesPicker/subcomponents/DeviceCard/DeviceCard.js

@@ -1,49 +1,49 @@
-import { jsxs as t, jsx as a } from "@emotion/react/jsx-runtime";
+import { jsxs as r, jsx as a } from "@emotion/react/jsx-runtime";
 import { ActionsCloseSmOutlined as p } from "@m4l/icons";
-import { DEVICES_PICKER_CLASSES as e, DEVICES_PICKER_EMPTY_VALUE as y } from "../../constants.js";
-import { DeviceCardStyled as D, DeviceCardIconStyled as I, DeviceCardContentStyled as u, DeviceCardNameStyled as E, DeviceCardSubtitleStyled as N, DeviceCardIdStyled as h, DeviceCardRemoveStyled as x } from "../../slots/DevicesPickerSlots.js";
-function _(r) {
+import { DEVICES_PICKER_CLASSES as e } from "../../constants.js";
+import { DeviceCardStyled as y, DeviceCardIconStyled as u, DeviceCardContentStyled as D, DeviceCardNameStyled as I, DeviceCardSubtitleStyled as N, DeviceCardIdStyled as h, DeviceCardRemoveStyled as x } from "../../slots/DevicesPickerSlots.js";
+function P(c) {
   const {
-    name: c,
-    subtitle: o,
+    name: o,
+    subtitle: d,
     deviceId: l,
-    icon: d,
+    icon: t,
     disableRemove: s = !1,
     onRemove: n,
     dataTestid: i,
     variant: m = "outlined",
     ...v
-  } = r, C = (S) => {
+  } = c, C = (S) => {
     S.stopPropagation(), n?.();
   };
-  return /* @__PURE__ */ t(
-    D,
+  return /* @__PURE__ */ r(
+    y,
     {
       ...v,
       variant: m,
       className: e.deviceCard,
       "data-testid": i,
       children: [
-        d && /* @__PURE__ */ a(I, { className: e.deviceCardIcon, children: d }),
-        /* @__PURE__ */ t(u, { className: e.deviceCardContent, children: [
+        t && /* @__PURE__ */ a(u, { className: e.deviceCardIcon, children: t }),
+        /* @__PURE__ */ r(D, { className: e.deviceCardContent, children: [
           /* @__PURE__ */ a(
-            E,
+            I,
             {
               className: e.deviceCardName,
               variant: "bodyStandard",
               color: "text.primary",
               ellipsis: !0,
-              children: c
+              children: o
             }
           ),
-          /* @__PURE__ */ a(
+          d && /* @__PURE__ */ a(
             N,
             {
               className: e.deviceCardSubtitle,
               variant: "microSlim",
               color: "text.secondary",
               ellipsis: !0,
-              children: o || y
+              children: d
             }
           ),
           /* @__PURE__ */ a(
@@ -73,5 +73,5 @@ function _(r) {
   );
 }
 export {
-  _ as DeviceCard
+  P as DeviceCard
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DevicesPanel.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DevicesPanel/DevicesPanel.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,oDA0IpD"}
+{"version":3,"file":"DevicesPanel.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DevicesPanel/DevicesPanel.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,oDAgJpD"}

package/components/DevicesPicker/subcomponents/DevicesPanel/DevicesPanel.js

@@ -1,35 +1,35 @@
-import { jsxs as r, Fragment as v, jsx as t } from "@emotion/react/jsx-runtime";
+import { jsxs as r, Fragment as $, jsx as t } from "@emotion/react/jsx-runtime";
 import { useMemo as f, useCallback as p } from "react";
-import { useModuleDictionary as x } from "@m4l/core";
-import { DEVICES_PICKER_CLASSES as e, DEVICES_PICKER_EMPTY_VALUE as A, DEVICES_PICKER_ROW_HEIGHT as c } from "../../constants.js";
+import { useModuleDictionary as E } from "@m4l/core";
+import { DEVICES_PICKER_CLASSES as e, DEVICES_PICKER_ROW_HEIGHT as c } from "../../constants.js";
 import { DICCTIONARY as m } from "../../dictionary.js";
-import { RowNameStyled as H, RowSubtitleStyled as $, RowIdStyled as G, GroupRowStyled as T, GroupLabelStyled as V, GroupBadgeStyled as k, PanelStyled as B, PanelHeaderStyled as K, PanelSwitchStyled as u, PanelListStyled as M } from "../../slots/DevicesPickerSlots.js";
-function W(S) {
+import { RowNameStyled as x, RowSubtitleStyled as H, RowIdStyled as A, GroupRowStyled as G, GroupLabelStyled as T, GroupBadgeStyled as k, PanelStyled as B, PanelHeaderStyled as j, PanelSwitchStyled as u, PanelListStyled as K } from "../../slots/DevicesPickerSlots.js";
+function Y(S) {
   const {
-    groups: n,
-    items: d,
+    groups: d,
+    items: n,
     selectedIds: g,
     onSelectionChange: b,
     multiple: w,
-    loading: I = !1,
-    searchable: y = !0,
+    loading: y = !1,
+    searchable: I = !0,
     onSearchChange: C,
     size: s = "medium",
     showDepartments: h,
     showIds: o,
-    canShowDepartments: _,
-    canShowIds: D,
-    onToggleDepartments: E,
-    onToggleIds: R
-  } = S, { getLabel: i } = x(), P = f(
-    () => n?.reduce((a, l) => a + l.items.length, 0) ?? d?.length ?? 0,
-    [n, d]
+    canShowDepartments: D,
+    canShowIds: R,
+    onToggleDepartments: _,
+    onToggleIds: N
+  } = S, { getLabel: i } = E(), v = f(
+    () => d?.reduce((a, l) => a + l.items.length, 0) ?? n?.length ?? 0,
+    [d, n]
   ), L = p(
     ({ item: a }) => {
       const l = a.metadata?.subtitle;
-      return /* @__PURE__ */ r(v, { children: [
+      return /* @__PURE__ */ r($, { children: [
         /* @__PURE__ */ t(
-          H,
+          x,
           {
             "data-testid": `${e.rowName}-${a.id}`,
             variant: "bodyStandard",
@@ -37,9 +37,17 @@ function W(S) {
             children: a.label
           }
         ),
-        /* @__PURE__ */ t($, { variant: "microSlim", color: "text.secondary", children: l || A }),
+        l && /* @__PURE__ */ t(
+          H,
+          {
+            "data-testid": `${e.rowSubtitle}-${a.id}`,
+            variant: "microSlim",
+            color: "text.secondary",
+            children: l
+          }
+        ),
         o && /* @__PURE__ */ t(
-          G,
+          A,
           {
             "data-testid": `${e.rowId}-${a.id}`,
             variant: "microSlim",
@@ -50,9 +58,9 @@ function W(S) {
       ] });
     },
     [o]
-  ), N = p(
-    ({ group: a, totalCount: l }) => /* @__PURE__ */ r(T, { className: e.groupRow, children: [
-      /* @__PURE__ */ t(V, { variant: "captionDens", children: a.label }),
+  ), P = p(
+    ({ group: a, totalCount: l }) => /* @__PURE__ */ r(G, { className: e.groupRow, children: [
+      /* @__PURE__ */ t(T, { variant: "captionDens", children: a.label }),
       /* @__PURE__ */ t(
         k,
         {
@@ -68,7 +76,7 @@ function W(S) {
   );
   return /* @__PURE__ */ r(B, { className: e.panel, "data-testid": e.panel, children: [
     /* @__PURE__ */ r(
-      K,
+      j,
       {
         className: e.panelHeader,
         "data-testid": e.panelHeader,
@@ -81,8 +89,8 @@ function W(S) {
               labelPlacement: "start",
               size: s,
               checked: h,
-              disabled: !_,
-              onChange: E
+              disabled: !D,
+              onChange: _
             }
           ),
           /* @__PURE__ */ t(
@@ -93,41 +101,41 @@ function W(S) {
               labelPlacement: "start",
               size: s,
               checked: o,
-              disabled: !D,
-              onChange: R
+              disabled: !R,
+              onChange: N
             }
           )
         ]
       }
     ),
     /* @__PURE__ */ t(
-      M,
+      K,
       {
         className: e.panelList,
         "data-testid": e.panelList,
-        groups: n,
-        items: d,
+        groups: d,
+        items: n,
         value: g,
         onChange: b,
         multiple: w,
-        loading: I,
-        searchable: y,
+        loading: y,
+        searchable: I,
         onSearchChange: C,
         size: s,
         width: "100%",
         measureImmediately: !0,
         selectAll: h,
         selectAllLabel: i(m.label_select_all),
-        selectAllCount: P,
+        selectAllCount: v,
         itemRowHeight: o ? c.threeLines : c.twoLines,
         groupRowHeight: c.group,
         expandAllGroups: !0,
         renderItem: L,
-        renderGroup: N
+        renderGroup: P
       }
     )
   ] });
 }
 export {
-  W as DevicesPanel
+  Y as DevicesPanel
 };

package/components/datagrids/views/CardsView/CardsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardsView.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/datagrids/views/CardsView/CardsView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAUrC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAMzC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,SAAS,MAAM,GAAG,MAAM,EACvE,KAAK,EAAE,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,2DAyO/C"}
+{"version":3,"file":"CardsView.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/datagrids/views/CardsView/CardsView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAUrC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAUzC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,SAAS,MAAM,GAAG,MAAM,EACvE,KAAK,EAAE,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,2DAyO/C"}

package/components/extended/mui/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,GAAG,EAEJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAiJ5C,eAAO,MAAM,YAAY,EAAwC,CAAC,CAAC,EAAE,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,EACnH,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAA;CAAE,KAC1F,GAAG,CAAC,OAAO,CAAC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,GAAG,EAEJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAoJ5C,eAAO,MAAM,YAAY,EAAwC,CAAC,CAAC,EAAE,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,EACnH,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAA;CAAE,KAC1F,GAAG,CAAC,OAAO,CAAC"}

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

@@ -2,13 +2,13 @@ import { jsx as o } from "@emotion/react/jsx-runtime";
 import { forwardRef as K, useCallback as i } from "react";
 import { useAutocomplete as j } from "./hooks/useAutocomplete/useAutocomplete.js";
 import { AUTOCOMPLETE_CLASSES as B } from "./constants.js";
-import F from "clsx";
-import { PopperComponent as U } from "./subcomponents/PopperComponent/PopperComponent.js";
-import { PaperComponent as _ } from "./subcomponents/PaperComponent/PaperComponent.js";
-import { SkeletonAutocompleteStyled as v, AutocompleteRootStyled as G } from "./slots/AutocompleteSlots.js";
-import { NoOptionsText as H } from "./subcomponents/NoOptionsText/NoOptionsText.js";
-import { LoadingText as J } from "./subcomponents/LoadingText/LoadingText.js";
-function Q(l, d) {
+import U from "clsx";
+import { PopperComponent as _ } from "./subcomponents/PopperComponent/PopperComponent.js";
+import { PaperComponent as v } from "./subcomponents/PaperComponent/PaperComponent.js";
+import { SkeletonAutocompleteStyled as G, AutocompleteRootStyled as H } from "./slots/AutocompleteSlots.js";
+import { NoOptionsText as J } from "./subcomponents/NoOptionsText/NoOptionsText.js";
+import { LoadingText as Q } from "./subcomponents/LoadingText/LoadingText.js";
+function X(l, d) {
   const {
     options: f,
     disabled: C,
@@ -18,86 +18,88 @@ function Q(l, d) {
     multiple: m,
     className: O,
     menuMinWidth: h,
-    minWidth: g
+    minWidth: g,
+    htmlFor: P
   } = l, {
     // useAutocomplete values
     ownerState: t,
-    isSkeleton: P,
-    memoizedRenderOption: S,
-    memoizedRenderInput: T,
+    isSkeleton: S,
+    memoizedRenderOption: T,
+    memoizedRenderInput: V,
     // useValuesAndHandlers values
-    open: V,
-    selectedValue: w,
-    inputValue: x,
-    isOptionEqualToValueLocal: A,
-    handleChange: z,
-    handleInputChange: I,
-    onCloseLocal: y,
-    onOpenLocal: E,
+    open: w,
+    selectedValue: x,
+    inputValue: A,
+    isOptionEqualToValueLocal: z,
+    handleChange: I,
+    handleInputChange: y,
+    onCloseLocal: E,
+    onOpenLocal: M,
     getOptionLabelLocal: n,
-    checkKeyDown: M,
+    checkKeyDown: R,
     scrollPositionOptionsRef: s
-  } = j(l), u = h ?? g, R = i((e) => /* @__PURE__ */ o(
-    U,
+  } = j(l), u = h ?? g, k = i((e) => /* @__PURE__ */ o(
+    _,
     {
       ...e,
       currentSize: t.size,
       menuMinWidth: u
     }
-  ), [t.size, u]), k = i((e) => /* @__PURE__ */ o(
-    _,
+  ), [t.size, u]), W = i((e) => /* @__PURE__ */ o(
+    v,
     {
       ...e,
       scrollPositionOptionsRef: s
     }
-  ), [s]), W = i((e, b) => {
+  ), [s]), b = i((e, D) => {
     if (p)
       return e;
-    const r = b.inputValue.trim().toLowerCase();
+    const r = D.inputValue.trim().toLowerCase();
     return r ? e.filter((c) => {
-      const D = c, N = n(c).toLowerCase(), q = a?.(D)?.toLowerCase() ?? "";
-      return N.includes(r) || q.includes(r);
+      const N = c, q = n(c).toLowerCase(), F = a?.(N)?.toLowerCase() ?? "";
+      return q.includes(r) || F.includes(r);
     }) : e;
   }, [a, n, p]);
-  return P ? /* @__PURE__ */ o(
-    v,
+  return S ? /* @__PURE__ */ o(
+    G,
     {
       ownerState: t
     }
   ) : /* @__PURE__ */ o(
-    G,
+    H,
     {
       ownerState: t,
+      id: P,
       multiple: m,
-      onKeyDown: M,
+      onKeyDown: R,
       ref: d,
       forcePopupIcon: !1,
-      className: F(O, m && B.multiple),
+      className: U(O, m && B.multiple),
       autoSelect: !1,
       options: f,
       getOptionLabel: n,
       clearOnBlur: !1,
-      PopperComponent: R,
-      PaperComponent: k,
-      isOptionEqualToValue: A,
-      value: w,
-      inputValue: x,
-      onOpen: E,
-      onClose: y,
-      open: V,
-      onInputChange: I,
-      onChange: z,
+      PopperComponent: k,
+      PaperComponent: W,
+      isOptionEqualToValue: z,
+      value: x,
+      inputValue: A,
+      onOpen: M,
+      onClose: E,
+      open: w,
+      onInputChange: y,
+      onChange: I,
       loading: L,
-      loadingText: /* @__PURE__ */ o(J, {}),
+      loadingText: /* @__PURE__ */ o(Q, {}),
       disabled: C,
-      noOptionsText: /* @__PURE__ */ o(H, {}),
-      filterOptions: W,
-      renderOption: S,
-      renderInput: T
+      noOptionsText: /* @__PURE__ */ o(J, {}),
+      filterOptions: b,
+      renderOption: T,
+      renderInput: V
     }
   );
 }
-const le = K(Q);
+const pe = K(X);
 export {
-  le as Autocomplete
+  pe as Autocomplete
 };

package/components/extended/mui/Autocomplete/hooks/useAutocomplete/useAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/extended/mui/Autocomplete/hooks/useAutocomplete/useAutocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAUxE;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,QAAQ,SAAS,OAAO,GAAG,SAAS,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,QAAQ,CAAC;;;;wCAqFrD,GAAG,UAAU,GAAG;kCA0BtB,GAAG;;;;;;;;;;;;;;;;EA0ErD"}
+{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/extended/mui/Autocomplete/hooks/useAutocomplete/useAutocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAUxE;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,QAAQ,SAAS,OAAO,GAAG,SAAS,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,QAAQ,CAAC;;;;wCAoFrD,GAAG,UAAU,GAAG;kCA4BtB,GAAG;;;;;;;;;;;;;;;;EAyErD"}