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

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

@@ -0,0 +1,77 @@
+import { jsxs as t, 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) {
+  const {
+    name: c,
+    subtitle: o,
+    deviceId: l,
+    icon: d,
+    disableRemove: s = !1,
+    onRemove: n,
+    dataTestid: i,
+    variant: m = "outlined",
+    ...v
+  } = r, C = (S) => {
+    S.stopPropagation(), n?.();
+  };
+  return /* @__PURE__ */ t(
+    D,
+    {
+      ...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: [
+          /* @__PURE__ */ a(
+            E,
+            {
+              className: e.deviceCardName,
+              variant: "bodyStandard",
+              color: "text.primary",
+              ellipsis: !0,
+              children: c
+            }
+          ),
+          /* @__PURE__ */ a(
+            N,
+            {
+              className: e.deviceCardSubtitle,
+              variant: "microSlim",
+              color: "text.secondary",
+              ellipsis: !0,
+              children: o || y
+            }
+          ),
+          /* @__PURE__ */ a(
+            h,
+            {
+              className: e.deviceCardId,
+              variant: "microSlim",
+              color: "text.secondary",
+              ellipsis: !0,
+              children: `ID ${l}`
+            }
+          )
+        ] }),
+        !s && /* @__PURE__ */ a(
+          x,
+          {
+            className: e.deviceCardRemove,
+            dataTestId: i ? `${i}-remove` : void 0,
+            icon: /* @__PURE__ */ a(p, {}),
+            variant: "text",
+            size: "small",
+            onClick: C
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  _ as DeviceCard
+};

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

@@ -0,0 +1,3 @@
+export * from './DeviceCard';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DeviceCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { CardProps } from '../../../Card/types';
+/**
+ * Props of the DeviceCard subcomponent.
+ * Extends the system Card contract: the card is the Card itself, this
+ * subcomponent only fills its internal slot with the device content.
+ * `children` is omitted because that slot is owned by the card.
+ */
+export interface DeviceCardProps extends Omit<CardProps, 'children'> {
+    /**
+     * Device name, rendered as the first line.
+     */
+    name: string;
+    /**
+     * Device plate/alias, rendered as the second line when present.
+     */
+    subtitle?: string;
+    /**
+     * Device id, rendered as the third line.
+     * Named `deviceId` because `id` is already the DOM attribute inherited
+     * from the Card.
+     */
+    deviceId: string | number;
+    /**
+     * Icon rendered at the start of the card.
+     */
+    icon?: ReactNode;
+    /**
+     * Hides the remove action; used in single-selection contexts, where the
+     * selection is replaced instead of removed one by one.
+     */
+    disableRemove?: boolean;
+    /**
+     * Removes this device from the selection.
+     */
+    onRemove?: () => void;
+    /**
+     * Custom data-testid for testing purposes.
+     */
+    dataTestid?: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DeviceCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

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

@@ -0,0 +1,11 @@
+import { DevicesPanelProps } from './types';
+/**
+ * Selection panel of the DevicesPicker.
+ *
+ * Holds the two column switches, the search field and the CheckableList.
+ * Rows and group headers are rendered through the CheckableList render props,
+ * which replace only the content area and keep its checkbox/radio and chevron
+ * in place — exactly the anatomy the design asks for.
+ */
+export declare function DevicesPanel(props: DevicesPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DevicesPanel.d.ts.map

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

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

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

@@ -0,0 +1,133 @@
+import { jsxs as r, Fragment as v, 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 { 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) {
+  const {
+    groups: d,
+    items: n,
+    selectedIds: g,
+    onSelectionChange: b,
+    multiple: w,
+    loading: I = !1,
+    searchable: y = !0,
+    onSearchChange: C,
+    size: s = "medium",
+    showDepartments: h,
+    showIds: o,
+    canShowDepartments: _,
+    canShowIds: D,
+    onToggleDepartments: E,
+    onToggleIds: R
+  } = S, { getLabel: i } = x(), P = 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: [
+        /* @__PURE__ */ t(
+          H,
+          {
+            "data-testid": `${e.rowName}-${a.id}`,
+            variant: "bodyStandard",
+            color: "text.primary",
+            children: a.label
+          }
+        ),
+        /* @__PURE__ */ t($, { variant: "microSlim", color: "text.secondary", children: l || A }),
+        o && /* @__PURE__ */ t(
+          G,
+          {
+            "data-testid": `${e.rowId}-${a.id}`,
+            variant: "microSlim",
+            color: "text.secondary",
+            children: `ID: ${a.metadata?.deviceId ?? a.id}`
+          }
+        )
+      ] });
+    },
+    [o]
+  ), N = p(
+    ({ group: a, totalCount: l }) => /* @__PURE__ */ r(T, { className: e.groupRow, children: [
+      /* @__PURE__ */ t(V, { variant: "bodyDens", children: a.label }),
+      /* @__PURE__ */ t(
+        k,
+        {
+          ownerState: { color: a.color },
+          className: e.groupBadge,
+          "data-testid": `${e.groupBadge}-${a.id}`,
+          variant: "bodyDens",
+          children: l
+        }
+      )
+    ] }),
+    []
+  );
+  return /* @__PURE__ */ r(B, { className: e.panel, "data-testid": e.panel, children: [
+    /* @__PURE__ */ r(
+      K,
+      {
+        className: e.panelHeader,
+        "data-testid": e.panelHeader,
+        children: [
+          /* @__PURE__ */ t(
+            u,
+            {
+              className: e.panelSwitch,
+              label: i(m.label_show_departments),
+              labelPlacement: "start",
+              size: s,
+              checked: h,
+              disabled: !_,
+              onChange: E
+            }
+          ),
+          /* @__PURE__ */ t(
+            u,
+            {
+              className: e.panelSwitch,
+              label: i(m.label_show_ids),
+              labelPlacement: "start",
+              size: s,
+              checked: o,
+              disabled: !D,
+              onChange: R
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      M,
+      {
+        className: e.panelList,
+        "data-testid": e.panelList,
+        groups: d,
+        items: n,
+        value: g,
+        onChange: b,
+        multiple: w,
+        loading: I,
+        searchable: y,
+        onSearchChange: C,
+        size: s,
+        width: "100%",
+        measureImmediately: !0,
+        selectAll: h,
+        selectAllLabel: i(m.label_select_all),
+        selectAllCount: P,
+        itemRowHeight: o ? c.threeLines : c.twoLines,
+        groupRowHeight: c.group,
+        expandAllGroups: !0,
+        renderItem: L,
+        renderGroup: N
+      }
+    )
+  ] });
+}
+export {
+  W as DevicesPanel
+};

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

@@ -0,0 +1,3 @@
+export * from './DevicesPanel';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DevicesPanel/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,68 @@
+import { Sizes } from '@m4l/styles';
+import { CheckableListGroup, CheckableListItem } from '../../../CheckableList/types';
+/**
+ * Props of the DevicesPanel subcomponent.
+ */
+export interface DevicesPanelProps {
+    /**
+     * Collapsible groups; undefined renders a flat list.
+     */
+    groups?: CheckableListGroup[];
+    /**
+     * Flat items; undefined when the list is grouped.
+     */
+    items?: CheckableListItem[];
+    /**
+     * Ids currently selected.
+     */
+    selectedIds: (string | number)[];
+    /**
+     * Reports the new selection.
+     */
+    onSelectionChange: (selectedIds: (string | number)[]) => void;
+    /**
+     * Multiple selection; drives checkbox versus radio in the rows.
+     */
+    multiple: boolean;
+    /**
+     * Devices are still loading.
+     */
+    loading?: boolean;
+    /**
+     * Renders the search field.
+     */
+    searchable?: boolean;
+    /**
+     * Forwards the search text so the picker can issue a remote query.
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * Size of the panel controls.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * "Ver departamentos" switch is on.
+     */
+    showDepartments: boolean;
+    /**
+     * "Ver ID" switch is on.
+     */
+    showIds: boolean;
+    /**
+     * At least one device has a department, so the switch is offered.
+     */
+    canShowDepartments: boolean;
+    /**
+     * At least one device has an id, so the switch is offered.
+     */
+    canShowIds: boolean;
+    /**
+     * Toggles the "Ver departamentos" switch.
+     */
+    onToggleDepartments: () => void;
+    /**
+     * Toggles the "Ver ID" switch.
+     */
+    onToggleIds: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DevicesPanel/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAErF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B;;OAEG;IACH,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC;;OAEG;IACH,iBAAiB,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC9D;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB"}

package/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/DevicesPickerSkeleton.d.ts

@@ -0,0 +1,10 @@
+import { DevicesPickerSkeletonProps } from './types';
+/**
+ * Loading state of the trigger.
+ *
+ * The master draws a single row — the icon box, one text bar and the chevron —
+ * with the same geometry as the placeholder, so the layout does not jump when
+ * the devices arrive. Nothing is interactive until there is data.
+ */
+export declare function DevicesPickerSkeleton(props: DevicesPickerSkeletonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DevicesPickerSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevicesPickerSkeleton.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/DevicesPickerSkeleton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,oDAwBtE"}

package/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/DevicesPickerSkeleton.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as n } from "@emotion/react/jsx-runtime";
+import { DEVICES_PICKER_CLASSES as t } from "../../constants.js";
+import { SkeletonCardStyled as l, SkeletonIconStyled as s, SkeletonLineStyled as c, SkeletonChevronStyled as i } from "../../slots/DevicesPickerSlots.js";
+function d(r) {
+  const { size: o = "medium" } = r, e = { size: o };
+  return /* @__PURE__ */ a(l, { ownerState: e, className: t.skeletonCard, children: [
+    /* @__PURE__ */ n(
+      s,
+      {
+        ownerState: e,
+        className: t.skeletonIcon,
+        variant: "rectangular"
+      }
+    ),
+    /* @__PURE__ */ n(
+      c,
+      {
+        ownerState: e,
+        className: t.skeletonLine,
+        variant: "rectangular"
+      }
+    ),
+    /* @__PURE__ */ n(
+      i,
+      {
+        ownerState: e,
+        className: t.skeletonChevron,
+        variant: "rectangular"
+      }
+    )
+  ] });
+}
+export {
+  d as DevicesPickerSkeleton
+};

package/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DevicesPickerSkeleton';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC"}

package/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/types.d.ts

@@ -0,0 +1,11 @@
+import { Sizes } from '@m4l/styles';
+/**
+ * Props of the DevicesPickerSkeleton subcomponent.
+ */
+export interface DevicesPickerSkeletonProps {
+    /**
+     * Size of the ghost elements, aligned with the picker size.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/DevicesPickerSkeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C"}

package/components/DevicesPicker/subcomponents/SelectedDevicesList/SelectedDevicesList.d.ts

@@ -0,0 +1,11 @@
+import { DevicePickerOption } from '../../types';
+import { SelectedDevicesListProps } from './types';
+/**
+ * List of every selected device, opened from the +N toggle.
+ *
+ * It is the only way to reach the cards that do not fit in the trigger, so it
+ * always lists the whole selection — not just the hidden ones — and each row
+ * can be removed from here.
+ */
+export declare function SelectedDevicesList<T extends DevicePickerOption = DevicePickerOption>(props: SelectedDevicesListProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectedDevicesList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedDevicesList.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/SelectedDevicesList/SelectedDevicesList.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EACnF,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,oDAsDnC"}

package/components/DevicesPicker/subcomponents/SelectedDevicesList/SelectedDevicesList.js

@@ -0,0 +1,61 @@
+import { jsxs as s, jsx as i } from "@emotion/react/jsx-runtime";
+import { Icon as p, Typography as L } from "@m4l/base";
+import { useModuleDictionary as S } from "@m4l/core";
+import { ConectivityDispositiveOutlined as y } from "@m4l/icons";
+import { DEVICES_PICKER_CLASSES as e } from "../../constants.js";
+import { DICCTIONARY as u } from "../../dictionary.js";
+import { SelectedListStyled as I, SelectedListHeaderStyled as C, SelectedListTitleStyled as f, SelectedListCountStyled as D, SelectedListItemsStyled as b } from "../../slots/DevicesPickerSlots.js";
+import { DeviceCard as h } from "../DeviceCard/DeviceCard.js";
+function O(o) {
+  const {
+    devices: l,
+    getOptionLabel: r,
+    getDeviceSubtitle: c,
+    getDeviceIcon: d,
+    onRemove: a,
+    titleIcon: n
+  } = o, { getLabel: m } = S();
+  return /* @__PURE__ */ s(
+    I,
+    {
+      className: e.selectedList,
+      "data-testid": e.selectedList,
+      children: [
+        /* @__PURE__ */ s(C, { className: e.selectedListHeader, children: [
+          /* @__PURE__ */ s(f, { className: e.selectedListTitle, children: [
+            n ?? /* @__PURE__ */ i(p, { src: /* @__PURE__ */ i(y, {}), color: "text.secondary" }),
+            /* @__PURE__ */ i(L, { variant: "bodyStandard", color: "text.secondary", ellipsis: !0, children: m(u.label_selected_title) })
+          ] }),
+          /* @__PURE__ */ i(
+            D,
+            {
+              className: e.selectedListCount,
+              "data-testid": e.selectedListCount,
+              label: `${l.length}`,
+              color: "primary",
+              variant: "contained",
+              size: "small",
+              opacity: !0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i(b, { className: e.selectedListItems, children: l.map((t) => /* @__PURE__ */ i(
+          h,
+          {
+            deviceId: t.id,
+            name: r(t),
+            subtitle: c(t),
+            icon: d?.(t),
+            variant: "text",
+            onRemove: () => a(t),
+            dataTestid: `${e.selectedListItems}-${t.id}`
+          },
+          t.id
+        )) })
+      ]
+    }
+  );
+}
+export {
+  O as SelectedDevicesList
+};

package/components/DevicesPicker/subcomponents/SelectedDevicesList/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SelectedDevicesList';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/DevicesPicker/subcomponents/SelectedDevicesList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/SelectedDevicesList/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/DevicesPicker/subcomponents/SelectedDevicesList/types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { DevicePickerOption } from '../../types';
+/**
+ * Props of the SelectedDevicesList subcomponent.
+ */
+export interface SelectedDevicesListProps<T = DevicePickerOption> {
+    /**
+     * Devices currently selected, including the ones hidden in the trigger.
+     */
+    devices: T[];
+    /**
+     * Resolves the first line of each row.
+     */
+    getOptionLabel: (option: T) => string;
+    /**
+     * Resolves the second line of each row.
+     */
+    getDeviceSubtitle: (option: T) => string | undefined;
+    /**
+     * Resolves the icon of each row.
+     */
+    getDeviceIcon?: (option: T) => ReactNode;
+    /**
+     * Removes one device from the selection.
+     */
+    onRemove: (device: T) => void;
+    /**
+     * Icon rendered at the start of the header, before the title.
+     */
+    titleIcon?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/DevicesPicker/subcomponents/SelectedDevicesList/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/DevicesPicker/subcomponents/SelectedDevicesList/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,kBAAkB;IAC9D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;OAEG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC;;OAEG;IACH,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAC;IACzC;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}