@unoff/ui 1.21.0

package/dist/components/inputs/dropdown/Dropdown.d.ts

@@ -0,0 +1,123 @@
+import { default as React } from 'react';
+import { DropdownOption } from '../../../types/list.types';
+import { IconList } from '../../../types/icon.types';
+
+export interface DropdownProps {
+    /**
+     * Unique identifier for the dropdown
+     */
+    id: string;
+    /**
+     * List of options to display in the dropdown
+     */
+    options: Array<DropdownOption>;
+    /**
+     * ID of the currently selected option
+     */
+    selected: string;
+    /**
+     * ID of the container element for portal rendering
+     */
+    containerId?: string;
+    /**
+     * Horizontal alignment of the dropdown
+     * @default 'LEFT'
+     */
+    alignment?: 'RIGHT' | 'LEFT' | 'FILL';
+    /**
+     * Vertical position of helper tooltips
+     * @default 'NONE'
+     */
+    pin?: 'NONE' | 'TOP' | 'BOTTOM';
+    /**
+     * Helper tooltip configuration
+     */
+    helper?: {
+        /** Tooltip content */
+        label: string | React.ReactNode;
+        /** Tooltip position */
+        pin?: 'TOP' | 'BOTTOM';
+        /** Tooltip display type */
+        type?: 'MULTI_LINE' | 'SINGLE_LINE';
+    };
+    /**
+     * Preview tooltip configuration with image
+     */
+    preview?: {
+        /** Preview image URL */
+        image: string;
+        /** Preview text */
+        text: string | React.ReactNode;
+        /** Preview position */
+        pin?: 'TOP' | 'BOTTOM';
+    };
+    /**
+     * Warning tooltip configuration
+     */
+    warning?: {
+        /** Warning message */
+        label: string | React.ReactNode;
+        /** Warning position */
+        pin?: 'TOP' | 'BOTTOM';
+        /** Warning display type */
+        type?: 'MULTI_LINE' | 'SINGLE_LINE';
+    };
+    /**
+     * Reflow configuration for responsive behavior
+     * @default { isEnabled: false, icon: 'adjust' }
+     */
+    shouldReflow?: {
+        /** Whether reflow is enabled */
+        isEnabled: boolean;
+        /** Icon to show when reflowed */
+        icon: IconList;
+    };
+    /**
+     * Whether the dropdown is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the dropdown is blocked
+     * @default false
+     */
+    isBlocked?: boolean;
+    /**
+     * Whether to show a "New" badge
+     * @default false
+     */
+    isNew?: boolean;
+    /**
+     * Handler called when unblock is clicked
+     */
+    onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler;
+}
+export interface DropdownStates {
+    isMenuOpen: boolean;
+    isMenuVisible: boolean;
+    listShouldScroll: boolean;
+    isTooltipVisible: boolean;
+    documentWidth: number;
+}
+export default class Dropdown extends React.Component<DropdownProps, DropdownStates> {
+    private selectMenuRef;
+    private buttonRef;
+    private listRef;
+    private actionsListRef;
+    private menuRef;
+    private subMenuRef;
+    static defaultProps: Partial<DropdownProps>;
+    constructor(props: DropdownProps);
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    handleResize: () => void;
+    onOpenMenu: () => void;
+    setPosition: () => string;
+    handleClickOutside: (e: Event) => void;
+    findSelectedOption: (options: Array<DropdownOption>) => string;
+    Status: () => import("react/jsx-runtime").JSX.Element | undefined;
+    MenuButton: () => import("react/jsx-runtime").JSX.Element;
+    DropdownButton: () => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/inputs/dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/dropdown/Dropdown.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Dropdown.figma.d.ts.map

package/dist/components/inputs/dropdown/Dropdown.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.figma.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/Dropdown.figma.tsx"],"names":[],"mappings":""}

package/dist/components/inputs/dropdown/Dropdown.figma.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import { i as e } from "../../../index_react-CmuCVQet.js";
+import o from "./Dropdown.js";
+e.figma.connect(
+  o,
+  "https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=393:795",
+  {
+    props: {
+      alignment: e.figma.enum("Type", {
+        HUG: "LEFT",
+        STRETCH: "FILL"
+      })
+    },
+    example: (p) => /* @__PURE__ */ t(
+      o,
+      {
+        id: "dropdown-example",
+        options: [
+          { label: "Option 1", value: "opt1", type: "OPTION" },
+          { label: "Option 2", value: "opt2", type: "OPTION" }
+        ],
+        selected: "opt1",
+        alignment: p.alignment
+      }
+    )
+  }
+);
+//# sourceMappingURL=Dropdown.figma.js.map

package/dist/components/inputs/dropdown/Dropdown.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.figma.js","sources":["../../../../src/components/inputs/dropdown/Dropdown.figma.tsx"],"sourcesContent":["import { figma } from '@figma/code-connect'\nimport Dropdown from './Dropdown'\n\nfigma.connect(\n  Dropdown,\n  'https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=393:795',\n  {\n    props: {\n      alignment: figma.enum('Type', {\n        HUG: 'LEFT',\n        STRETCH: 'FILL',\n      }),\n    },\n    example: (props) => (\n      <Dropdown\n        id=\"dropdown-example\"\n        options={[\n          { label: 'Option 1', value: 'opt1', type: 'OPTION' as const },\n          { label: 'Option 2', value: 'opt2', type: 'OPTION' as const },\n        ]}\n        selected=\"opt1\"\n        alignment={props.alignment}\n      />\n    ),\n  }\n)\n"],"names":["figma","Dropdown","props","jsx"],"mappings":";;;AAGAA,EAAAA,MAAM;AAAA,EACJC;AAAA,EACA;AAAA,EACA;AAAA,IACE,OAAO;AAAA,MACL,WAAWD,EAAAA,MAAM,KAAK,QAAQ;AAAA,QAC5B,KAAK;AAAA,QACL,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAAA,IAEH,SAAS,CAACE,MACR,gBAAAC;AAAA,MAACF;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,SAAS;AAAA,UACP,EAAE,OAAO,YAAY,OAAO,QAAQ,MAAM,SAAA;AAAA,UAC1C,EAAE,OAAO,YAAY,OAAO,QAAQ,MAAM,SAAA;AAAA,QAAkB;AAAA,QAE9D,UAAS;AAAA,QACT,WAAWC,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB;AAGN;"}

package/dist/components/inputs/dropdown/Dropdown.js

@@ -0,0 +1,307 @@
+import '../../../assets/Dropdown.css';
+import { jsxs as p, jsx as f } from "react/jsx-runtime";
+import h from "react";
+import R from "../../../styles/texts/texts.module.js";
+import T from "../../tags/tooltip/Tooltip.js";
+import v from "../../tags/icon-chip/IconChip.js";
+import w from "../../tags/chip/Chip.js";
+import M from "../../lists/actions-list/ActionsList.js";
+import { Icon as O } from "../../assets/icon/Icon.js";
+import y from "../../actions/menu/Menu.js";
+import { t as m } from "../../../do-classnames-DSDFCvzy.js";
+class _ extends h.Component {
+  selectMenuRef;
+  buttonRef;
+  listRef;
+  actionsListRef;
+  menuRef;
+  subMenuRef;
+  static defaultProps = {
+    alignment: "LEFT",
+    pin: "NONE",
+    shouldReflow: { isEnabled: !1, icon: "adjust" },
+    isNew: !1,
+    isBlocked: !1,
+    isDisabled: !1
+  };
+  constructor(i) {
+    super(i), this.state = {
+      isMenuOpen: !1,
+      isMenuVisible: !1,
+      listShouldScroll: !1,
+      isTooltipVisible: !1,
+      documentWidth: typeof window < "u" ? window.innerWidth : 1024
+    }, this.selectMenuRef = h.createRef(), this.buttonRef = h.createRef(), this.listRef = h.createRef(), this.actionsListRef = h.createRef(), this.menuRef = h.createRef(), this.subMenuRef = h.createRef(), this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+  componentDidMount = () => {
+    document.addEventListener("mousedown", this.handleClickOutside), window.addEventListener("resize", this.handleResize);
+  };
+  componentWillUnmount = () => {
+    document.removeEventListener("mousedown", this.handleClickOutside), window.removeEventListener("resize", this.handleResize);
+  };
+  // Handlers
+  handleResize = () => {
+    this.setState({ documentWidth: window.innerWidth });
+  };
+  // Direct Actions
+  onOpenMenu = () => {
+    const { containerId: i } = this.props, { isMenuOpen: e } = this.state;
+    this.setState({
+      isMenuOpen: !e
+    }), setTimeout(() => {
+      if (this.listRef.current != null) {
+        const t = this.listRef.current.getBoundingClientRect(), l = this.buttonRef.current?.getBoundingClientRect();
+        let s = 0, o = 0, u = !1, a = !1;
+        if (t.bottom > window.innerHeight && (s = window.innerHeight - t.height - 8, u = !0), t.top < 0 && (s = 8, u = !0), t.right > window.innerWidth && (o = window.innerWidth - t.width - 8, a = !0), t.left < 0 && (o = 8, a = !0), u && (l && (this.listRef.current.style.top = `${s - l.top}px`), this.listRef.current.style.transform = a ? `translate(${o - t.left}px, 0)` : "none"), a && !u && (this.listRef.current.style.transform = `translateX(${o - t.left}px)`), i !== void 0) {
+          const c = document.getElementById(i);
+          if (c) {
+            const n = c.getBoundingClientRect(), r = this.buttonRef.current?.getBoundingClientRect(), d = this.listRef.current.getBoundingClientRect().top - n.top, b = this.listRef.current.getBoundingClientRect().bottom - n.bottom;
+            d < -16 && r && (this.listRef.current.style.top = `${n.top - r.top + 16}px`, this.setState({
+              listShouldScroll: !0
+            }), this.listRef.current.getBoundingClientRect().bottom - n.bottom < -16 && (this.listRef.current.style.bottom = `${r.bottom - n.bottom + 16}px`)), b > -16 && r && (this.listRef.current.style.bottom = `${r.bottom - n.bottom + 16}px`, this.setState({
+              listShouldScroll: !0
+            }), this.listRef.current.getBoundingClientRect().top - n.top > -16 && (this.listRef.current.style.top = `${n.top - r.top + 16}px`)), this.listRef.current.style.visibility = "visible";
+          }
+        }
+        this.setState({ isMenuVisible: !0 });
+      }
+    }, 1);
+  };
+  setPosition = () => {
+    const { options: i, selected: e } = this.props;
+    if (!this.selectMenuRef.current || !this.listRef.current) return "0px";
+    const t = getComputedStyle(this.listRef.current), l = parseInt(
+      t.getPropertyValue("--actions-list-item-height") || "32",
+      10
+    ), s = parseInt(
+      t.getPropertyValue("--actions-list-divider-height") || "1",
+      10
+    ), o = parseInt(
+      t.getPropertyValue("--actions-list-divider-margin-top") || "11",
+      10
+    ), u = parseInt(
+      t.getPropertyValue(
+        "--actions-list-divider-margin-bottom"
+      ) || "8",
+      10
+    );
+    let c = parseInt(
+      t.getPropertyValue("--actions-list-padding-top") || "4",
+      10
+    );
+    for (let n = 0; n < i.length; n++) {
+      const r = i[n];
+      if (r.value === e || r.children?.find((d) => d.value === e) !== void 0)
+        break;
+      r.type === "SEPARATOR" ? c += s + o + u : (r.type === "TITLE" || r.type === "OPTION" || r.type === "GROUP") && (c += l);
+    }
+    return `-${c}px`;
+  };
+  handleClickOutside = (i) => {
+    const e = i.target;
+    e === this.buttonRef.current || e === this.menuRef.current || e === this.subMenuRef.current || e.tagName === "HR" && this.menuRef.current?.contains(e) || e.dataset.role === "GROUP" && this.menuRef.current?.contains(e) ? this.setState({
+      isMenuOpen: !0
+    }) : this.setState({
+      isMenuOpen: !1,
+      isMenuVisible: !1,
+      listShouldScroll: !1
+    });
+  };
+  findSelectedOption = (i) => {
+    const { selected: e } = this.props, t = [];
+    return e.split(", ").forEach((l) => {
+      i.forEach((s) => {
+        s.value === l && t.push(s.label ?? ""), s.children?.find((o) => o.value === l) !== void 0 && t.push(
+          s.children?.find((o) => o.value === l)?.label ?? ""
+        );
+      });
+    }), t.join(", ");
+  };
+  // Template
+  Status = () => {
+    const { warning: i, preview: e, isBlocked: t, isNew: l, onUnblock: s } = this.props;
+    if (i || t || l)
+      return /* @__PURE__ */ p("div", { className: "select-menu__status", children: [
+        i !== void 0 && /* @__PURE__ */ f(
+          v,
+          {
+            iconType: "PICTO",
+            iconName: "warning",
+            text: i.label,
+            pin: i.pin,
+            type: i.type
+          }
+        ),
+        (t || l) && /* @__PURE__ */ f(
+          w,
+          {
+            preview: e,
+            isSolo: !0,
+            action: t ? s : void 0,
+            children: l ? "New" : "Pro"
+          }
+        )
+      ] });
+  };
+  // Templates
+  MenuButton = () => {
+    const {
+      id: i,
+      helper: e,
+      warning: t,
+      options: l,
+      selected: s,
+      pin: o,
+      alignment: u,
+      shouldReflow: a,
+      isBlocked: c
+    } = this.props, n = [];
+    return o === "TOP" || o === "NONE" ? n.push("BOTTOM") : n.push("TOP"), u === "LEFT" || u === "FILL" ? n.push("LEFT") : n.push("RIGHT"), /* @__PURE__ */ f(
+      y,
+      {
+        id: i,
+        options: l,
+        selected: s,
+        alignment: `${n.join("_")}`,
+        icon: a?.icon,
+        helper: e,
+        warning: t,
+        isBlocked: c
+      }
+    );
+  };
+  DropdownButton = () => {
+    const {
+      id: i,
+      alignment: e,
+      options: t,
+      selected: l,
+      helper: s,
+      containerId: o,
+      isDisabled: u,
+      isBlocked: a
+    } = this.props, { isMenuOpen: c, listShouldScroll: n, isTooltipVisible: r } = this.state;
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        id: i,
+        className: m([
+          "select-menu",
+          e === "LEFT" ? "select-menu--left" : e === "RIGHT" ? "select-menu--right" : "select-menu--fill",
+          (u || a) && "select-menu--disabled"
+        ]),
+        ref: this.selectMenuRef,
+        children: [
+          /* @__PURE__ */ p(
+            "button",
+            {
+              role: "combobox",
+              className: m([
+                "select-menu__button",
+                c && "select-menu__button--active"
+              ]),
+              disabled: u || a,
+              "aria-expanded": c ? "true" : "false",
+              ...c && (o === void 0 ? this.state.isMenuVisible : !0) && {
+                "aria-controls": `${i}-menu`
+              },
+              "aria-label": `Select option: ${this.findSelectedOption(t)}`,
+              "aria-haspopup": "menu",
+              onKeyDown: (d) => ((d.key === " " || d.key === "Enter" && !(u || a)) && (this.onOpenMenu(), setTimeout(
+                () => this.actionsListRef.current?.focusFirstMenuItem(),
+                0
+              )), d.key === "Escape" ? d.target.blur() : null),
+              onMouseDown: u || a ? void 0 : this.onOpenMenu,
+              onMouseEnter: () => {
+                s !== void 0 && this.setState({ isTooltipVisible: !0 });
+              },
+              onMouseLeave: () => {
+                s !== void 0 && this.setState({ isTooltipVisible: !1 });
+              },
+              onFocus: () => {
+                s !== void 0 && this.setState({ isTooltipVisible: !0 });
+              },
+              onBlur: () => {
+                s !== void 0 && this.setState({ isTooltipVisible: !1 });
+              },
+              tabIndex: 0,
+              ref: this.buttonRef,
+              children: [
+                /* @__PURE__ */ f(
+                  "span",
+                  {
+                    className: m([
+                      R["type--truncated"],
+                      R.type,
+                      "select-menu__label"
+                    ]),
+                    children: this.findSelectedOption(t)
+                  }
+                ),
+                /* @__PURE__ */ f("span", { className: "select-menu__caret", children: /* @__PURE__ */ f(
+                  O,
+                  {
+                    type: "PICTO",
+                    iconName: "caret-down"
+                  }
+                ) }),
+                r && s !== void 0 && /* @__PURE__ */ f(
+                  T,
+                  {
+                    pin: s?.pin || "BOTTOM",
+                    type: s?.type || "SINGLE_LINE",
+                    children: s?.label
+                  }
+                )
+              ]
+            }
+          ),
+          this.Status(),
+          (() => {
+            const { pin: d } = this.props;
+            return c ? /* @__PURE__ */ f(
+              "div",
+              {
+                className: "floating-menu",
+                id: `${i}-menu`,
+                style: {
+                  position: "absolute",
+                  zIndex: 99,
+                  top: d === "TOP" ? "-4px" : d === "BOTTOM" ? "auto" : this.setPosition(),
+                  bottom: d === "BOTTOM" ? "-4px" : "auto",
+                  right: e === "RIGHT" ? 0 : "auto",
+                  left: e === "LEFT" ? 0 : "auto",
+                  visibility: o === void 0 && this.state.isMenuVisible ? "visible" : "hidden"
+                },
+                ref: this.listRef,
+                children: /* @__PURE__ */ f(
+                  M,
+                  {
+                    options: t,
+                    selected: l,
+                    direction: e?.includes("LEFT") ? "RIGHT" : "LEFT",
+                    shouldScroll: n,
+                    containerId: o,
+                    onCancellation: () => this.setState({ isMenuOpen: !1 }),
+                    ref: this.actionsListRef,
+                    menuRef: this.menuRef,
+                    subMenuRef: this.subMenuRef
+                  }
+                )
+              }
+            ) : null;
+          })()
+        ]
+      }
+    );
+  };
+  // Render
+  render() {
+    const { shouldReflow: i } = this.props, { documentWidth: e } = this.state;
+    return i?.isEnabled && e <= 460 ? this.MenuButton() : this.DropdownButton();
+  }
+}
+export {
+  _ as default
+};
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/inputs/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/inputs/dropdown/Dropdown.tsx"],"sourcesContent":["import React from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport Tooltip from '@components/tags/tooltip/Tooltip'\nimport IconChip from '@components/tags/icon-chip/IconChip'\nimport Chip from '@components/tags/chip/Chip'\nimport ActionsList from '@components/lists/actions-list/ActionsList'\nimport Icon from '@components/assets/icon/Icon'\nimport Menu, { MenuProps } from '@components/actions/menu/Menu'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport type { DropdownOption } from '@tps/list.types'\nimport type { IconList } from '@tps/icon.types'\nimport './dropdown.scss'\n\nexport interface DropdownProps {\n  /**\n   * Unique identifier for the dropdown\n   */\n  id: string\n  /**\n   * List of options to display in the dropdown\n   */\n  options: Array<DropdownOption>\n  /**\n   * ID of the currently selected option\n   */\n  selected: string\n  /**\n   * ID of the container element for portal rendering\n   */\n  containerId?: string\n  /**\n   * Horizontal alignment of the dropdown\n   * @default 'LEFT'\n   */\n  alignment?: 'RIGHT' | 'LEFT' | 'FILL'\n  /**\n   * Vertical position of helper tooltips\n   * @default 'NONE'\n   */\n  pin?: 'NONE' | 'TOP' | 'BOTTOM'\n  /**\n   * Helper tooltip configuration\n   */\n  helper?: {\n    /** Tooltip content */\n    label: string | React.ReactNode\n    /** Tooltip position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Tooltip display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Preview tooltip configuration with image\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Warning tooltip configuration\n   */\n  warning?: {\n    /** Warning message */\n    label: string | React.ReactNode\n    /** Warning position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Warning display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Reflow configuration for responsive behavior\n   * @default { isEnabled: false, icon: 'adjust' }\n   */\n  shouldReflow?: {\n    /** Whether reflow is enabled */\n    isEnabled: boolean\n    /** Icon to show when reflowed */\n    icon: IconList\n  }\n  /**\n   * Whether the dropdown is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether the dropdown is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Handler called when unblock is clicked\n   */\n  onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nexport interface DropdownStates {\n  isMenuOpen: boolean\n  isMenuVisible: boolean\n  listShouldScroll: boolean\n  isTooltipVisible: boolean\n  documentWidth: number\n}\n\nexport default class Dropdown extends React.Component<\n  DropdownProps,\n  DropdownStates\n> {\n  private selectMenuRef: React.RefObject<HTMLDivElement>\n  private buttonRef: React.RefObject<HTMLButtonElement>\n  private listRef: React.RefObject<HTMLDivElement>\n  private actionsListRef: React.RefObject<ActionsList>\n  private menuRef: React.RefObject<HTMLUListElement>\n  private subMenuRef: React.RefObject<HTMLUListElement>\n\n  static defaultProps: Partial<DropdownProps> = {\n    alignment: 'LEFT',\n    pin: 'NONE',\n    shouldReflow: { isEnabled: false, icon: 'adjust' },\n    isNew: false,\n    isBlocked: false,\n    isDisabled: false,\n  }\n\n  constructor(props: DropdownProps) {\n    super(props)\n    this.state = {\n      isMenuOpen: false,\n      isMenuVisible: false,\n      listShouldScroll: false,\n      isTooltipVisible: false,\n      documentWidth: typeof window !== 'undefined' ? window.innerWidth : 1024,\n    }\n    this.selectMenuRef = React.createRef()\n    this.buttonRef = React.createRef()\n    this.listRef = React.createRef()\n    this.actionsListRef = React.createRef()\n    this.menuRef = React.createRef()\n    this.subMenuRef = React.createRef()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  componentDidMount = () => {\n    document.addEventListener('mousedown', this.handleClickOutside)\n    window.addEventListener('resize', this.handleResize)\n  }\n\n  componentWillUnmount = () => {\n    document.removeEventListener('mousedown', this.handleClickOutside)\n    window.removeEventListener('resize', this.handleResize)\n  }\n\n  // Handlers\n  handleResize = () => {\n    this.setState({ documentWidth: window.innerWidth })\n  }\n\n  // Direct Actions\n  onOpenMenu = () => {\n    const { containerId } = this.props\n    const { isMenuOpen } = this.state\n\n    this.setState({\n      isMenuOpen: !isMenuOpen,\n    })\n\n    setTimeout(() => {\n      if (this.listRef.current != null) {\n        const menuRect = this.listRef.current.getBoundingClientRect()\n        const buttonRect = this.buttonRef.current?.getBoundingClientRect()\n\n        let adjustedTop = 0\n        let adjustedLeft = 0\n        let shouldTransformY = false\n        let shouldTransformX = false\n\n        if (menuRect.bottom > window.innerHeight) {\n          adjustedTop = window.innerHeight - menuRect.height - 8\n          shouldTransformY = true\n        }\n        if (menuRect.top < 0) {\n          adjustedTop = 8\n          shouldTransformY = true\n        }\n\n        if (menuRect.right > window.innerWidth) {\n          adjustedLeft = window.innerWidth - menuRect.width - 8\n          shouldTransformX = true\n        }\n        if (menuRect.left < 0) {\n          adjustedLeft = 8\n          shouldTransformX = true\n        }\n\n        if (shouldTransformY) {\n          if (buttonRect)\n            this.listRef.current.style.top = `${adjustedTop - buttonRect.top}px`\n          this.listRef.current.style.transform = shouldTransformX\n            ? `translate(${adjustedLeft - menuRect.left}px, 0)`\n            : 'none'\n        }\n\n        if (shouldTransformX && !shouldTransformY)\n          this.listRef.current.style.transform = `translateX(${adjustedLeft - menuRect.left}px)`\n\n        if (containerId !== undefined) {\n          const containerElement = document.getElementById(containerId)\n          if (containerElement) {\n            const container = containerElement.getBoundingClientRect()\n            const button = this.buttonRef.current?.getBoundingClientRect()\n\n            const diffTop =\n              this.listRef.current.getBoundingClientRect().top - container.top\n            const diffBottom =\n              this.listRef.current.getBoundingClientRect().bottom -\n              container.bottom\n\n            if (diffTop < -16 && button) {\n              this.listRef.current.style.top = `${container.top - button.top + 16}px`\n              this.setState({\n                listShouldScroll: true,\n              })\n\n              const diffBottomV2 =\n                this.listRef.current.getBoundingClientRect().bottom -\n                container.bottom\n\n              if (diffBottomV2 < -16)\n                this.listRef.current.style.bottom = `${\n                  button.bottom - container.bottom + 16\n                }px`\n            }\n\n            if (diffBottom > -16 && button) {\n              this.listRef.current.style.bottom = `${\n                button.bottom - container.bottom + 16\n              }px`\n              this.setState({\n                listShouldScroll: true,\n              })\n\n              const diffTopV2 =\n                this.listRef.current.getBoundingClientRect().top - container.top\n\n              if (diffTopV2 > -16)\n                this.listRef.current.style.top = `${container.top - button.top + 16}px`\n            }\n\n            this.listRef.current.style.visibility = 'visible'\n          }\n        }\n\n        // Rendre le menu visible après positionnement\n        this.setState({ isMenuVisible: true })\n      }\n    }, 1)\n  }\n\n  setPosition = () => {\n    const { options, selected } = this.props\n    if (!this.selectMenuRef.current || !this.listRef.current) return '0px'\n\n    const listComputedStyle = getComputedStyle(this.listRef.current)\n    const itemHeight = parseInt(\n      listComputedStyle.getPropertyValue('--actions-list-item-height') || '32',\n      10\n    )\n    const dividerHeight = parseInt(\n      listComputedStyle.getPropertyValue('--actions-list-divider-height') ||\n        '1',\n      10\n    )\n    const dividerMarginTop = parseInt(\n      listComputedStyle.getPropertyValue('--actions-list-divider-margin-top') ||\n        '11',\n      10\n    )\n    const dividerMarginBottom = parseInt(\n      listComputedStyle.getPropertyValue(\n        '--actions-list-divider-margin-bottom'\n      ) || '8',\n      10\n    )\n\n    const menuPaddingTop = parseInt(\n      listComputedStyle.getPropertyValue('--actions-list-padding-top') || '4',\n      10\n    )\n\n    let totalHeight = menuPaddingTop\n\n    for (let i = 0; i < options.length; i++) {\n      const option = options[i]\n\n      if (\n        option.value === selected ||\n        option.children?.find((child) => child.value === selected) !== undefined\n      )\n        break\n\n      if (option.type === 'SEPARATOR')\n        totalHeight += dividerHeight + dividerMarginTop + dividerMarginBottom\n      else if (\n        option.type === 'TITLE' ||\n        option.type === 'OPTION' ||\n        option.type === 'GROUP'\n      )\n        totalHeight += itemHeight\n    }\n\n    return `-${totalHeight}px`\n  }\n\n  handleClickOutside = (e: Event) => {\n    const target = e.target as HTMLElement\n    if (\n      target === this.buttonRef.current ||\n      target === this.menuRef.current ||\n      target === this.subMenuRef.current ||\n      (target.tagName === 'HR' && this.menuRef.current?.contains(target)) ||\n      (target.dataset.role === 'GROUP' &&\n        this.menuRef.current?.contains(target))\n    )\n      this.setState({\n        isMenuOpen: true,\n      })\n    else\n      this.setState({\n        isMenuOpen: false,\n        isMenuVisible: false,\n        listShouldScroll: false,\n      })\n  }\n\n  findSelectedOption = (options: Array<DropdownOption>): string => {\n    const { selected } = this.props\n    const label: Array<string> = []\n\n    selected.split(', ').forEach((value) => {\n      options.forEach((option) => {\n        if (option.value === value) label.push(option.label ?? '')\n        if (\n          option.children?.find((child) => child.value === value) !== undefined\n        )\n          label.push(\n            option.children?.find((child) => child.value === value)?.label ?? ''\n          )\n      })\n    })\n    return label.join(', ')\n  }\n\n  // Template\n  Status = () => {\n    const { warning, preview, isBlocked, isNew, onUnblock } = this.props\n\n    if (warning || isBlocked || isNew)\n      return (\n        <div className=\"select-menu__status\">\n          {warning !== undefined && (\n            <IconChip\n              iconType=\"PICTO\"\n              iconName=\"warning\"\n              text={warning.label}\n              pin={warning.pin}\n              type={warning.type}\n            />\n          )}\n          {(isBlocked || isNew) && (\n            <Chip\n              preview={preview}\n              isSolo\n              action={isBlocked ? onUnblock : undefined}\n            >\n              {isNew ? 'New' : 'Pro'}\n            </Chip>\n          )}\n        </div>\n      )\n  }\n\n  // Templates\n  MenuButton = () => {\n    const {\n      id,\n      helper,\n      warning,\n      options,\n      selected,\n      pin,\n      alignment,\n      shouldReflow,\n      isBlocked,\n    } = this.props\n\n    const newAlignment = []\n\n    if (pin === 'TOP' || pin === 'NONE') newAlignment.push('BOTTOM')\n    else newAlignment.push('TOP')\n\n    if (alignment === 'LEFT' || alignment === 'FILL') newAlignment.push('LEFT')\n    else newAlignment.push('RIGHT')\n\n    return (\n      <Menu\n        id={id}\n        options={options}\n        selected={selected}\n        alignment={`${newAlignment.join('_')}` as MenuProps['alignment']}\n        icon={shouldReflow?.icon}\n        helper={helper}\n        warning={warning}\n        isBlocked={isBlocked}\n      />\n    )\n  }\n\n  DropdownButton = () => {\n    const {\n      id,\n      alignment,\n      options,\n      selected,\n      helper,\n      containerId,\n      isDisabled,\n      isBlocked,\n    } = this.props\n    const { isMenuOpen, listShouldScroll, isTooltipVisible } = this.state\n\n    return (\n      <div\n        id={id}\n        className={doClassnames([\n          'select-menu',\n          (() => {\n            if (alignment === 'LEFT') return 'select-menu--left'\n            if (alignment === 'RIGHT') return 'select-menu--right'\n            return 'select-menu--fill'\n          })(),\n          (isDisabled || isBlocked) && 'select-menu--disabled',\n        ])}\n        ref={this.selectMenuRef}\n      >\n        <button\n          role=\"combobox\"\n          className={doClassnames([\n            'select-menu__button',\n            isMenuOpen && 'select-menu__button--active',\n          ])}\n          disabled={isDisabled || isBlocked}\n          aria-expanded={isMenuOpen ? 'true' : 'false'}\n          {...(isMenuOpen &&\n            (containerId === undefined ? this.state.isMenuVisible : true) && {\n              'aria-controls': `${id}-menu`,\n            })}\n          aria-label={`Select option: ${this.findSelectedOption(options)}`}\n          aria-haspopup=\"menu\"\n          onKeyDown={(e) => {\n            if (\n              e.key === ' ' ||\n              (e.key === 'Enter' && !(isDisabled || isBlocked))\n            ) {\n              this.onOpenMenu()\n              setTimeout(\n                () => this.actionsListRef.current?.focusFirstMenuItem(),\n                0\n              )\n            }\n            if (e.key === 'Escape') return (e.target as HTMLElement).blur()\n            return null\n          }}\n          onMouseDown={!(isDisabled || isBlocked) ? this.onOpenMenu : undefined}\n          onMouseEnter={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (helper !== undefined) this.setState({ isTooltipVisible: false })\n          }}\n          tabIndex={0}\n          ref={this.buttonRef}\n        >\n          <span\n            className={doClassnames([\n              texts['type--truncated'],\n              texts.type,\n              'select-menu__label',\n            ])}\n          >\n            {this.findSelectedOption(options)}\n          </span>\n          <span className=\"select-menu__caret\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"caret-down\"\n            />\n          </span>\n          {isTooltipVisible && helper !== undefined && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {helper?.label}\n            </Tooltip>\n          )}\n        </button>\n        {this.Status()}\n        {(() => {\n          const { pin } = this.props\n\n          if (isMenuOpen)\n            return (\n              <div\n                className=\"floating-menu\"\n                id={`${id}-menu`}\n                style={{\n                  position: 'absolute',\n                  zIndex: 99,\n                  top:\n                    pin === 'TOP'\n                      ? '-4px'\n                      : pin === 'BOTTOM'\n                        ? 'auto'\n                        : this.setPosition(),\n                  bottom: pin === 'BOTTOM' ? '-4px' : 'auto',\n                  right: alignment === 'RIGHT' ? 0 : 'auto',\n                  left: alignment === 'LEFT' ? 0 : 'auto',\n                  visibility:\n                    containerId === undefined && this.state.isMenuVisible\n                      ? 'visible'\n                      : 'hidden',\n                }}\n                ref={this.listRef}\n              >\n                <ActionsList\n                  options={options}\n                  selected={selected}\n                  direction={alignment?.includes('LEFT') ? 'RIGHT' : 'LEFT'}\n                  shouldScroll={listShouldScroll}\n                  containerId={containerId}\n                  onCancellation={() => this.setState({ isMenuOpen: false })}\n                  ref={this.actionsListRef}\n                  menuRef={this.menuRef}\n                  subMenuRef={this.subMenuRef}\n                />\n              </div>\n            )\n          return null\n        })()}\n      </div>\n    )\n  }\n\n  // Render\n  render() {\n    const { shouldReflow } = this.props\n    const { documentWidth } = this.state\n\n    const isReflowActive = shouldReflow?.isEnabled && documentWidth <= 460\n\n    if (isReflowActive) return this.MenuButton()\n    return this.DropdownButton()\n  }\n}\n"],"names":["Dropdown","React","props","containerId","isMenuOpen","menuRect","buttonRect","adjustedTop","adjustedLeft","shouldTransformY","shouldTransformX","containerElement","container","button","diffTop","diffBottom","options","selected","listComputedStyle","itemHeight","dividerHeight","dividerMarginTop","dividerMarginBottom","totalHeight","i","option","child","e","target","label","value","warning","preview","isBlocked","isNew","onUnblock","jsxs","jsx","IconChip","Chip","id","helper","pin","alignment","shouldReflow","newAlignment","Menu","isDisabled","listShouldScroll","isTooltipVisible","doClassnames","texts","Icon","Tooltip","ActionsList","documentWidth"],"mappings":"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"}

package/dist/components/inputs/dropzone/Dropzone.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+
+interface FileContent {
+    name: string;
+    content: string | ArrayBuffer | null | undefined;
+}
+export interface DropzoneProps {
+    /**
+     * Message to display in the dropzone
+     */
+    message: string;
+    /**
+     * Warning message to show on invalid file type
+     */
+    warningMessage: string;
+    /**
+     * Error message to show on upload failure
+     */
+    errorMessage: string;
+    /**
+     * Call-to-action text for the upload button
+     */
+    cta: string;
+    /**
+     * Array of accepted MIME types
+     * @default ['image/jpeg', 'image/png', 'application/pdf']
+     */
+    acceptedMimeTypes: Array<string>;
+    /**
+     * Whether multiple files can be uploaded
+     */
+    isMultiple: boolean;
+    /**
+     * Whether the dropzone is in loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Whether the dropzone is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the dropzone is blocked
+     * @default false
+     */
+    isBlocked?: boolean;
+    /**
+     * Whether to show a "New" badge
+     * @default false
+     */
+    isNew?: boolean;
+    /**
+     * Callback when files are successfully imported
+     */
+    onImportFiles: (files: Array<FileContent>) => void;
+}
+export interface DropzoneStates {
+    status: 'READY' | 'WAITING' | 'WARNING' | 'ERROR';
+    isLoading: boolean;
+    isDraggedOver: boolean;
+    blackList: Array<string>;
+}
+export default class Dropzone extends React.Component<DropzoneProps, DropzoneStates> {
+    stopLoading: NodeJS.Timeout | undefined;
+    static defaultProps: Partial<DropzoneProps>;
+    constructor(props: DropzoneProps);
+    componentDidUpdate: (prevProps: Readonly<DropzoneProps>) => void;
+    onImport: (validFiles: Array<File>, unValidFiles: Array<File>) => void;
+    onValidFilesViaButton: () => void;
+    onValidFilesViaDrop: (event: React.DragEvent) => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDragEnter: (event: React.DragEvent) => void;
+    onDragLeave: (event: React.DragEvent) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};
+//# sourceMappingURL=Dropzone.d.ts.map

package/dist/components/inputs/dropzone/Dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropzone/Dropzone.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,iBAAiB,CAAA;AAExB,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,CAAA;CACjD;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,cAAc,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAChC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CACnD;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CACzB;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CACnD,aAAa,EACb,cAAc,CACf;IACC,WAAW,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,CAAA;IAEvC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,CAM1C;gBAEW,KAAK,EAAE,aAAa;IAYhC,kBAAkB,cAAe,SAAS,aAAa,CAAC,UAqBvD;IAGD,QAAQ,eAAgB,MAAM,IAAI,CAAC,gBAAgB,MAAM,IAAI,CAAC,UAmC7D;IAED,qBAAqB,aAsBpB;IAED,mBAAmB,UAAW,eAAe,UAiC5C;IAED,UAAU,UAAW,eAAe,UAKnC;IAED,WAAW,UAAW,eAAe,UAKpC;IAED,WAAW,UAAW,eAAe,UAKpC;IAED,MAAM;CAiHP"}