@unoff/ui 1.21.0

package/dist/components/lists/actions-item/ActionsItem.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+
+export interface ActionsItemProps {
+    /**
+     * Unique identifier for the item
+     */
+    id: string;
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Name/title of the item
+     */
+    name: string;
+    /**
+     * Status indicator configuration
+     */
+    indicator?: {
+        /** Label text */
+        label: string;
+        /** Status state */
+        status: 'ACTIVE' | 'INACTIVE';
+    };
+    /**
+     * Description text
+     */
+    description: string;
+    /**
+     * Additional description text
+     */
+    subdescription: string;
+    /**
+     * Additional content slot
+     */
+    complementSlot?: React.ReactNode;
+    /**
+     * User information to display
+     */
+    user?: {
+        /** User avatar URL */
+        avatar?: string;
+        /** User name */
+        name: string;
+    };
+    /**
+     * Action buttons slot
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Whether the item is clickable
+     * @default false
+     */
+    isInteractive?: boolean;
+    /**
+     * Click handler
+     */
+    action?: React.MouseEventHandler<HTMLLIElement> & React.KeyboardEventHandler<HTMLLIElement>;
+}
+export default class ActionsItem extends React.Component<ActionsItemProps> {
+    static defaultProps: Partial<ActionsItemProps>;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=ActionsItem.d.ts.map

package/dist/components/lists/actions-item/ActionsItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/actions-item/ActionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,iBAAiB;QACjB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;KAC9B,CAAA;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,sBAAsB;QACtB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gBAAgB;QAChB,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,GAC7C,KAAK,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAA;CAC5C;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACxE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAE7C;IAED,MAAM;CAyFP"}

package/dist/components/lists/actions-item/ActionsItem.js

@@ -0,0 +1,115 @@
+import '../../../assets/ActionsItem.css';
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import u from "react";
+import a from "../../../styles/texts/texts.module.js";
+import y from "../../tags/chip/Chip.js";
+import N from "../../assets/thumbnail/Thumbnail.js";
+import _ from "../../assets/avatar/Avatar.js";
+import { t as n } from "../../../do-classnames-DSDFCvzy.js";
+class C extends u.Component {
+  static defaultProps = {
+    isInteractive: !1
+  };
+  render() {
+    const {
+      id: v,
+      src: c,
+      name: l,
+      indicator: r,
+      description: h,
+      subdescription: f,
+      complementSlot: m,
+      user: s,
+      actionsSlot: d,
+      isInteractive: t,
+      action: p
+    } = this.props;
+    return /* @__PURE__ */ o(
+      "li",
+      {
+        className: n([
+          "actions-item",
+          t && "actions-item--interactive"
+        ]),
+        "data-id": v,
+        "aria-label": l,
+        tabIndex: t ? 0 : -1,
+        onMouseDown: t ? p : void 0,
+        onKeyDown: (i) => {
+          (i.key === " " || i.key === "Enter") && t && p?.(i), i.key === "Escape" && t && i.target.blur();
+        },
+        children: [
+          c !== void 0 && /* @__PURE__ */ e(
+            "div",
+            {
+              className: "actions-item__asset",
+              role: "presentation",
+              children: /* @__PURE__ */ e(N, { src: c })
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: "actions-item__content",
+              role: "group",
+              children: [
+                /* @__PURE__ */ o("div", { children: [
+                  /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: n([a.type, a["type--large"]]),
+                      role: "heading",
+                      "aria-level": 2,
+                      children: [
+                        l,
+                        r !== void 0 && /* @__PURE__ */ e(y, { state: r.status, children: r.label })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e("div", { className: a.type, children: h }),
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: n([a.type, a["type--secondary"]]),
+                      style: {
+                        marginTop: "2px"
+                      },
+                      children: f
+                    }
+                  )
+                ] }),
+                m !== void 0 && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "actions-item__complement",
+                    role: "complementary",
+                    children: m
+                  }
+                ),
+                s !== void 0 && /* @__PURE__ */ e(
+                  _,
+                  {
+                    avatar: s.avatar,
+                    fullName: s.name
+                  }
+                )
+              ]
+            }
+          ),
+          d !== void 0 && /* @__PURE__ */ e(
+            "div",
+            {
+              className: "actions-item__actions",
+              role: "group",
+              children: d
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  C as default
+};
+//# sourceMappingURL=ActionsItem.js.map

package/dist/components/lists/actions-item/ActionsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsItem.js","sources":["../../../../src/components/lists/actions-item/ActionsItem.tsx"],"sourcesContent":["import React from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Thumbnail from '@components/assets/thumbnail/Thumbnail'\nimport Avatar from '@components/assets/avatar/Avatar'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './actions-item.scss'\n\nexport interface ActionsItemProps {\n  /**\n   * Unique identifier for the item\n   */\n  id: string\n  /**\n   * Image source URL\n   */\n  src?: string\n  /**\n   * Name/title of the item\n   */\n  name: string\n  /**\n   * Status indicator configuration\n   */\n  indicator?: {\n    /** Label text */\n    label: string\n    /** Status state */\n    status: 'ACTIVE' | 'INACTIVE'\n  }\n  /**\n   * Description text\n   */\n  description: string\n  /**\n   * Additional description text\n   */\n  subdescription: string\n  /**\n   * Additional content slot\n   */\n  complementSlot?: React.ReactNode\n  /**\n   * User information to display\n   */\n  user?: {\n    /** User avatar URL */\n    avatar?: string\n    /** User name */\n    name: string\n  }\n  /**\n   * Action buttons slot\n   */\n  actionsSlot?: React.ReactNode\n  /**\n   * Whether the item is clickable\n   * @default false\n   */\n  isInteractive?: boolean\n  /**\n   * Click handler\n   */\n  action?: React.MouseEventHandler<HTMLLIElement> &\n    React.KeyboardEventHandler<HTMLLIElement>\n}\n\nexport default class ActionsItem extends React.Component<ActionsItemProps> {\n  static defaultProps: Partial<ActionsItemProps> = {\n    isInteractive: false,\n  }\n\n  render() {\n    const {\n      id,\n      src,\n      name,\n      indicator,\n      description,\n      subdescription,\n      complementSlot,\n      user,\n      actionsSlot,\n      isInteractive,\n      action,\n    } = this.props\n    return (\n      <li\n        className={doClassnames([\n          'actions-item',\n          isInteractive && 'actions-item--interactive',\n        ])}\n        data-id={id}\n        aria-label={name}\n        tabIndex={isInteractive ? 0 : -1}\n        onMouseDown={isInteractive ? action : undefined}\n        onKeyDown={(e) => {\n          if ((e.key === ' ' || e.key === 'Enter') && isInteractive) action?.(e)\n          if (e.key === 'Escape' && isInteractive)\n            (e.target as HTMLElement).blur()\n        }}\n      >\n        {src !== undefined && (\n          <div\n            className=\"actions-item__asset\"\n            role=\"presentation\"\n          >\n            <Thumbnail src={src} />\n          </div>\n        )}\n        <div\n          className=\"actions-item__content\"\n          role=\"group\"\n        >\n          <div>\n            <div\n              className={doClassnames([texts.type, texts['type--large']])}\n              role=\"heading\"\n              aria-level={2}\n            >\n              {name}\n              {indicator !== undefined && (\n                <Chip state={indicator.status}>{indicator.label}</Chip>\n              )}\n            </div>\n            <div className={texts.type}>{description}</div>\n            <div\n              className={doClassnames([texts.type, texts['type--secondary']])}\n              style={{\n                marginTop: '2px',\n              }}\n            >\n              {subdescription}\n            </div>\n          </div>\n          {complementSlot !== undefined && (\n            <div\n              className=\"actions-item__complement\"\n              role=\"complementary\"\n            >\n              {complementSlot}\n            </div>\n          )}\n          {user !== undefined && (\n            <Avatar\n              avatar={user.avatar}\n              fullName={user.name}\n            />\n          )}\n        </div>\n        {actionsSlot !== undefined && (\n          <div\n            className=\"actions-item__actions\"\n            role=\"group\"\n          >\n            {actionsSlot}\n          </div>\n        )}\n      </li>\n    )\n  }\n}\n"],"names":["ActionsItem","React","id","src","name","indicator","description","subdescription","complementSlot","user","actionsSlot","isInteractive","action","jsxs","doClassnames","e","jsx","Thumbnail","texts","Chip","Avatar"],"mappings":";;;;;;;AAmEA,MAAqBA,UAAoBC,EAAM,UAA4B;AAAA,EACzE,OAAO,eAA0C;AAAA,IAC/C,eAAe;AAAA,EAAA;AAAA,EAGjB,SAAS;AACP,UAAM;AAAA,MACJ,IAAAC;AAAA,MACA,KAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,IACE,KAAK;AACT,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa;AAAA,UACtB;AAAA,UACAH,KAAiB;AAAA,QAAA,CAClB;AAAA,QACD,WAAST;AAAA,QACT,cAAYE;AAAA,QACZ,UAAUO,IAAgB,IAAI;AAAA,QAC9B,aAAaA,IAAgBC,IAAS;AAAA,QACtC,WAAW,CAACG,MAAM;AAChB,WAAKA,EAAE,QAAQ,OAAOA,EAAE,QAAQ,YAAYJ,SAAwBI,CAAC,GACjEA,EAAE,QAAQ,YAAYJ,KACvBI,EAAE,OAAuB,KAAA;AAAA,QAC9B;AAAA,QAEC,UAAA;AAAA,UAAAZ,MAAQ,UACP,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA,gBAAAA,EAACC,KAAU,KAAAd,EAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGzB,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA;AAAA,gBAAA,gBAAAA,EAAC,OAAA,EACC,UAAA;AAAA,kBAAA,gBAAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWC,EAAa,CAACI,EAAM,MAAMA,EAAM,aAAa,CAAC,CAAC;AAAA,sBAC1D,MAAK;AAAA,sBACL,cAAY;AAAA,sBAEX,UAAA;AAAA,wBAAAd;AAAA,wBACAC,MAAc,UACb,gBAAAW,EAACG,GAAA,EAAK,OAAOd,EAAU,QAAS,YAAU,MAAA,CAAM;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAGpD,gBAAAW,EAAC,OAAA,EAAI,WAAWE,EAAM,MAAO,UAAAZ,GAAY;AAAA,kBACzC,gBAAAU;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWF,EAAa,CAACI,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC;AAAA,sBAC9D,OAAO;AAAA,wBACL,WAAW;AAAA,sBAAA;AAAA,sBAGZ,UAAAX;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACH,GACF;AAAA,gBACCC,MAAmB,UAClB,gBAAAQ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,MAAK;AAAA,oBAEJ,UAAAR;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGJC,MAAS,UACR,gBAAAO;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBACC,QAAQX,EAAK;AAAA,oBACb,UAAUA,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGHC,MAAgB,UACf,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/lists/actions-list/ActionsList.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+import { DropdownOption } from '../../../types/list.types';
+
+export interface ActionsListProps {
+    /**
+     * List of options to display
+     */
+    options: Array<DropdownOption>;
+    /**
+     * ID of the currently selected option
+     */
+    selected?: string;
+    /**
+     * Direction for submenu expansion
+     * @default 'RIGHT'
+     */
+    direction?: 'LEFT' | 'RIGHT';
+    /**
+     * Whether the list should be scrollable
+     * @default false
+     */
+    shouldScroll?: boolean;
+    /**
+     * ID of the container element
+     */
+    containerId?: string;
+    /**
+     * Preview tooltip configuration
+     */
+    preview?: {
+        /** Preview image URL */
+        image: string;
+        /** Preview text */
+        text: string | React.ReactNode;
+        /** Preview position */
+        pin?: 'TOP' | 'BOTTOM';
+    };
+    /**
+     * Callback when the list is cancelled
+     * @default () => null
+     */
+    onCancellation?: () => void;
+    /**
+     * Ref to the menu element
+     */
+    menuRef?: React.RefObject<HTMLUListElement>;
+    /**
+     * Ref to the submenu element
+     */
+    subMenuRef?: React.RefObject<HTMLUListElement>;
+}
+export interface ActionsListStates {
+    openedGroup: string;
+    listScrollOffset: number;
+    listScrollAmount: number;
+    listClientHeight?: number;
+    shift: number;
+    isVisible: boolean;
+}
+export default class ActionsList extends React.Component<ActionsListProps, ActionsListStates> {
+    private scrollInterval;
+    private subMenuContainerRef;
+    static defaultProps: Partial<ActionsListProps>;
+    constructor(props: ActionsListProps);
+    componentDidUpdate(prevProps: Readonly<ActionsListProps>, prevState: Readonly<ActionsListStates>): void;
+    focusFirstMenuItem: () => void;
+    focusFirstSubMenuItem: () => void;
+    onScroll: (e: React.UIEvent<HTMLUListElement>) => void;
+    startScrolling: (direction: 'UP' | 'DOWN') => void;
+    stopScrolling: () => void;
+    SubMenu: (options: Array<DropdownOption> | undefined) => import("react/jsx-runtime").JSX.Element;
+    MenuTitle: (option: DropdownOption, index: number) => import("react/jsx-runtime").JSX.Element;
+    MenuSeparator: (index: number) => import("react/jsx-runtime").JSX.Element;
+    MenuOption: (option: DropdownOption, index: number) => import("react/jsx-runtime").JSX.Element;
+    MenuGroup: (option: DropdownOption, index: number) => import("react/jsx-runtime").JSX.Element;
+    MenuSubOption: (option: DropdownOption, index: number) => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=ActionsList.d.ts.map

package/dist/components/lists/actions-list/ActionsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAKhD,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,wBAAwB;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC9B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;KACvB,CAAA;IACD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CACtD,gBAAgB,EAChB,iBAAiB,CAClB;IACC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAI7C;gBAEW,KAAK,EAAE,gBAAgB;IAcnC,kBAAkB,CAChB,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,EACrC,SAAS,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IA8BxC,kBAAkB,aAYjB;IAED,qBAAqB,aAYpB;IAED,QAAQ,MAAO,aAAa,CAAC,gBAAgB,CAAC,UAU7C;IAED,cAAc,cAAe,IAAI,GAAG,MAAM,UAiBzC;IAED,aAAa,aAKZ;IAGD,OAAO,YAAa,MAAM,cAAc,CAAC,GAAG,SAAS,6CAgDpD;IAED,SAAS,WAAY,cAAc,SAAS,MAAM,6CAmBjD;IAED,aAAa,UAAW,MAAM,6CAS7B;IAED,UAAU,WAAY,cAAc,SAAS,MAAM,6CA6DlD;IAED,SAAS,WAAY,cAAc,SAAS,MAAM,6CAqDjD;IAED,aAAa,WAAY,cAAc,SAAS,MAAM,6CA8DrD;IAED,MAAM;CA8FP"}

package/dist/components/lists/actions-list/ActionsList.js

@@ -0,0 +1,384 @@
+import '../../../assets/ActionsList.css';
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import b from "react";
+import _ from "../../../styles/texts/texts.module.js";
+import k from "../../tags/chip/Chip.js";
+import { Icon as v } from "../../assets/icon/Icon.js";
+import { t as u } from "../../../do-classnames-DSDFCvzy.js";
+class I extends b.Component {
+  scrollInterval;
+  subMenuContainerRef;
+  static defaultProps = {
+    direction: "RIGHT",
+    shouldScroll: !1,
+    onCancellation: () => null
+  };
+  constructor(e) {
+    super(e), this.state = {
+      openedGroup: "EMPTY",
+      listScrollOffset: 0,
+      listScrollAmount: 1,
+      listClientHeight: 1,
+      shift: 0,
+      isVisible: !0
+    }, this.scrollInterval = null, this.subMenuContainerRef = b.createRef();
+  }
+  componentDidUpdate(e, s) {
+    const { shouldScroll: l } = this.props, { openedGroup: c } = this.state, i = document.getElementsByClassName(
+      "select-menu__menu"
+    )[0];
+    if (e.shouldScroll !== l && this.setState({
+      listScrollOffset: i.scrollTop,
+      listScrollAmount: i.scrollHeight - i.clientHeight,
+      listClientHeight: i.clientHeight
+    }), s.openedGroup !== c) {
+      const t = this.subMenuContainerRef.current;
+      if (t) {
+        const r = t.getBoundingClientRect();
+        r.x < 0 && this.setState({ shift: -r.x + 8 }), r.x + r.width > window.innerWidth && this.setState({
+          shift: window.innerWidth - r.x - r.width - 8
+        }), this.setState({ isVisible: !0 });
+      }
+    }
+  }
+  // Direct Actions
+  focusFirstMenuItem = () => {
+    const { menuRef: e } = this.props;
+    setTimeout(() => {
+      const s = e?.current;
+      if (s) {
+        const l = s.querySelector(
+          'li[tabindex="0"]:not([data-is-blocked="true"])'
+        );
+        l && l.focus();
+      }
+    }, 0);
+  };
+  focusFirstSubMenuItem = () => {
+    const { subMenuRef: e } = this.props;
+    setTimeout(() => {
+      const s = e?.current;
+      if (s) {
+        const l = s.querySelector(
+          'li[tabindex="0"]:not([data-is-blocked="true"])'
+        );
+        l && l.focus();
+      }
+    }, 0);
+  };
+  onScroll = (e) => {
+    const s = e.target;
+    this.setState({
+      listScrollOffset: s.scrollTop,
+      listScrollAmount: s.scrollHeight - s.clientHeight
+    }), s.scrollTop === 0 && this.stopScrolling(), s.scrollTop === s.scrollHeight - s.clientHeight && this.stopScrolling();
+  };
+  startScrolling = (e) => {
+    const s = document.getElementsByClassName("select-menu__menu")[0], l = () => {
+      s && (e === "UP" && s.scrollTop > 0 ? s.scrollTop -= 4 : e === "DOWN" && s.scrollTop < s.scrollHeight - s.clientHeight && (s.scrollTop += 4), this.scrollInterval = requestAnimationFrame(l));
+    };
+    this.scrollInterval = requestAnimationFrame(l);
+  };
+  stopScrolling = () => {
+    this.scrollInterval && (cancelAnimationFrame(this.scrollInterval), this.scrollInterval = null);
+  };
+  // Template
+  SubMenu = (e) => {
+    const { subMenuRef: s } = this.props, { shift: l, isVisible: c } = this.state;
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: "select-menu__submenu",
+        role: "menu",
+        style: {
+          visibility: c ? "visible" : "hidden"
+        },
+        "aria-hidden": !c,
+        ref: this.subMenuContainerRef,
+        children: /* @__PURE__ */ n(
+          "ul",
+          {
+            className: "select-menu__menu select-menu__menu--active",
+            ref: s,
+            role: "menu",
+            style: {
+              transform: `translateX(${l}px)`
+            },
+            children: e?.map((i, t) => {
+              const r = i.isActive !== void 0 ? i.isActive : !0, o = i.isBlocked !== void 0 ? i.isBlocked : !1, a = i.isNew !== void 0 ? i.isNew : !1, d = i.children !== void 0 ? i.children : [], f = d.filter(
+                (m) => m.isActive !== !1
+              );
+              if (r && f.length > 0)
+                return this.MenuGroup(
+                  { ...i, isActive: r, isBlocked: o, isNew: a, children: d },
+                  t
+                );
+              if (r && f.length === 0)
+                return this.MenuSubOption(
+                  { ...i, isActive: r, isBlocked: o, isNew: a, children: d },
+                  t
+                );
+            })
+          }
+        )
+      }
+    );
+  };
+  MenuTitle = (e, s) => /* @__PURE__ */ n(
+    "li",
+    {
+      "data-role": "TITLE",
+      className: u([
+        "select-menu__item",
+        "select-menu__item--disabled"
+      ]),
+      "aria-disabled": "true",
+      children: /* @__PURE__ */ n(
+        "span",
+        {
+          className: u([_.type, "select-menu__item__label"]),
+          "aria-hidden": "true",
+          children: e.label
+        }
+      )
+    },
+    `menu-option-${s}`
+  );
+  MenuSeparator = (e) => /* @__PURE__ */ n(
+    "li",
+    {
+      "data-role": "SEPARATOR",
+      children: /* @__PURE__ */ n("hr", {})
+    },
+    `menu-separator-${e}`
+  );
+  MenuOption = (e, s) => {
+    const { selected: l, preview: c, onCancellation: i } = this.props;
+    return /* @__PURE__ */ p(
+      "li",
+      {
+        className: u([
+          "select-menu__item",
+          l?.split(", ").filter((t) => t === e.value).length === 1 && "select-menu__item--selected",
+          e.isBlocked && "select-menu__item--blocked"
+        ]),
+        "data-value": e.value,
+        "data-is-blocked": e.isBlocked,
+        "data-feature": e.feature,
+        "data-role": "OPTION",
+        tabIndex: e.isBlocked ? -1 : 0,
+        "aria-current": l?.split(", ").filter((t) => t === e.value).length === 1 ? "true" : void 0,
+        "aria-disabled": e.isBlocked,
+        onKeyDown: (t) => (t.stopPropagation(), (t.key === " " || t.key === "Enter") && !e.isBlocked && (e.action && e.action(t), i?.()), t.key === "Escape" && i?.(), null),
+        onMouseDown: (t) => {
+          e.isBlocked || e.action?.(t), i?.();
+        },
+        onFocus: () => null,
+        onBlur: () => null,
+        children: [
+          l?.split(", ").filter((t) => t === e.value).length === 1 && /* @__PURE__ */ n("span", { className: "select-menu__item__tick", children: /* @__PURE__ */ n(
+            v,
+            {
+              type: "PICTO",
+              iconName: "check"
+            }
+          ) }),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: u([_.type, "select-menu__item__label"]),
+              children: e.label
+            }
+          ),
+          (e.isBlocked || e.isNew) && /* @__PURE__ */ n(k, { preview: c, children: e.isNew ? "New" : "Pro" })
+        ]
+      },
+      `menu-option-${s}`
+    );
+  };
+  MenuGroup = (e, s) => {
+    const { preview: l, onCancellation: c } = this.props, { openedGroup: i } = this.state;
+    return /* @__PURE__ */ p(
+      "li",
+      {
+        className: u([
+          "select-menu__item",
+          e.isBlocked && " select-menu__item--blocked"
+        ]),
+        style: {
+          zIndex: i === e.value ? 2 : "auto"
+        },
+        "data-is-blocked": e.isBlocked,
+        "data-role": "GROUP",
+        tabIndex: e.isBlocked ? -1 : 0,
+        "aria-disabled": e.isBlocked,
+        "aria-haspopup": "true",
+        onKeyDown: (t) => (t.stopPropagation(), (t.key === " " || t.key === "Enter") && !e.isBlocked ? this.setState(
+          { openedGroup: e.value ?? "EMPTY" },
+          () => this.focusFirstSubMenuItem()
+        ) : (t.key === "Escape" && c?.(), null)),
+        onMouseEnter: () => this.setState({ openedGroup: e.value ?? "EMPTY" }),
+        onMouseLeave: () => this.setState({ openedGroup: "EMPTY" }),
+        onFocus: () => null,
+        onBlur: () => null,
+        children: [
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: u([_.type, "select-menu__item__label"]),
+              children: e.label
+            }
+          ),
+          (e.isBlocked || e.isNew) && /* @__PURE__ */ n(k, { preview: l, children: e.isNew ? "New" : "Pro" }),
+          /* @__PURE__ */ n("span", { className: "select-menu__item__caret", children: /* @__PURE__ */ n(
+            v,
+            {
+              type: "PICTO",
+              iconName: "caret-right"
+            }
+          ) }),
+          i === e.value && this.SubMenu(e.children)
+        ]
+      },
+      `menu-group-${s}`
+    );
+  };
+  MenuSubOption = (e, s) => {
+    const { selected: l, preview: c, onCancellation: i } = this.props;
+    return /* @__PURE__ */ p(
+      "li",
+      {
+        className: u([
+          "select-menu__item",
+          l?.split(", ").filter((t) => t === e.value).length === 1 && "select-menu__item--selected",
+          e.isBlocked && "select-menu__item--blocked"
+        ]),
+        "data-value": e.value,
+        "data-is-blocked": e.isBlocked,
+        "data-feature": e.feature,
+        "data-role": "OPTION",
+        tabIndex: e.isBlocked ? -1 : 0,
+        "aria-current": l?.split(", ").filter((t) => t === e.value).length === 1 ? "true" : void 0,
+        "aria-disabled": e.isBlocked,
+        onKeyDown: (t) => (t.stopPropagation(), (t.key === " " || t.key === "Enter") && !e.isBlocked && (e.action && e.action(t), i?.()), t.key === "Escape" && this.setState(
+          { openedGroup: "EMPTY" },
+          () => this.focusFirstMenuItem()
+        ), null),
+        onMouseDown: e.isBlocked ? void 0 : e.action,
+        children: [
+          l?.split(", ").filter((t) => t === e.value).length === 1 && /* @__PURE__ */ n("span", { className: "select-menu__item__tick", children: /* @__PURE__ */ n(
+            v,
+            {
+              type: "PICTO",
+              iconName: "check"
+            }
+          ) }),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: u([
+                _["type--small"],
+                _.type,
+                "select-menu__item__label"
+              ]),
+              children: e.label
+            }
+          ),
+          (e.isBlocked || e.isNew) && /* @__PURE__ */ n(k, { preview: c, children: e.isNew ? "New" : "Pro" })
+        ]
+      },
+      `menu-suboption-${s}`
+    );
+  };
+  render() {
+    const { options: e, direction: s, shouldScroll: l, menuRef: c } = this.props, { listScrollOffset: i, listScrollAmount: t } = this.state;
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        className: "select-menu",
+        style: {
+          height: l ? "100%" : "auto"
+        },
+        children: [
+          l && i !== 0 && t !== 0 && /* @__PURE__ */ n(
+            "div",
+            {
+              className: "select-menu__spot select-menu__spot--top",
+              onMouseEnter: () => this.startScrolling("UP"),
+              onMouseLeave: this.stopScrolling,
+              children: /* @__PURE__ */ n(
+                v,
+                {
+                  type: "PICTO",
+                  iconName: "chevron-up"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ n(
+            "ul",
+            {
+              className: u([
+                "select-menu__menu",
+                "select-menu__menu--active",
+                s === "RIGHT" ? "select-menu__menu--right" : "select-menu__menu--left",
+                l && "select-menu__menu--scrolling"
+              ]),
+              onScroll: this.onScroll,
+              ref: c,
+              children: e?.map((r, o) => {
+                const a = r.isActive !== void 0 ? r.isActive : !0, d = r.isBlocked !== void 0 ? r.isBlocked : !1, f = r.isNew !== void 0 ? r.isNew : !1, m = r.children !== void 0 ? r.children : [];
+                if (a && r.type === "SEPARATOR")
+                  return this.MenuSeparator(o);
+                if (a && r.type === "TITLE")
+                  return this.MenuTitle(r, o);
+                if (a && r.type === "OPTION")
+                  return this.MenuOption(
+                    { ...r, isActive: a, isBlocked: d, isNew: f, children: m },
+                    o
+                  );
+                if (a && r.type === "GROUP" && m) {
+                  const h = m.filter(
+                    (N) => N.isActive !== !1
+                  );
+                  return h.length > 1 ? this.MenuGroup(
+                    { ...r, isActive: a, isBlocked: d, isNew: f, children: m },
+                    o
+                  ) : h.length === 1 ? this.MenuOption(
+                    {
+                      ...h[0],
+                      isActive: h[0].isActive,
+                      isBlocked: h[0].isBlocked,
+                      isNew: h[0].isNew
+                    },
+                    o
+                  ) : null;
+                }
+                return null;
+              })
+            }
+          ),
+          l && t !== i && t !== 0 && /* @__PURE__ */ n(
+            "div",
+            {
+              className: "select-menu__spot select-menu__spot--bottom",
+              onMouseEnter: () => this.startScrolling("DOWN"),
+              onMouseLeave: this.stopScrolling,
+              children: /* @__PURE__ */ n(
+                v,
+                {
+                  type: "PICTO",
+                  iconName: "chevron-down"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  I as default
+};
+//# sourceMappingURL=ActionsList.js.map