@unoff/ui 1.21.0

package/dist/components/lists/members-list/MembersList.js

@@ -0,0 +1,117 @@
+import '../../../assets/MembersList.css';
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import d from "react";
+import p from "../../../styles/texts/texts.module.js";
+import o from "../../tags/tooltip/Tooltip.js";
+import u from "../../slots/simple-item/SimpleItem.js";
+import f from "../../assets/avatar/Avatar.js";
+class x extends d.Component {
+  static defaultProps = {
+    isInverted: !1
+  };
+  constructor(s) {
+    super(s), this.state = {
+      activeTooltipIndex: null,
+      isMembersListVisible: !1
+    };
+  }
+  render() {
+    const { members: s, numberOfAvatarsDisplayed: i, isInverted: r } = this.props, { activeTooltipIndex: m, isMembersListVisible: n } = this.state;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: `members-list ${r ? "members-list--inverted" : ""}`,
+        role: "list",
+        children: [
+          s.slice(0, i).map((e, l) => {
+            const c = r ? l + 1 : i - l;
+            return /* @__PURE__ */ a(
+              "div",
+              {
+                className: "members-list__member",
+                role: "listitem",
+                style: { zIndex: c },
+                onMouseEnter: () => this.setState({
+                  activeTooltipIndex: l
+                }),
+                onMouseLeave: () => this.setState({
+                  activeTooltipIndex: null
+                }),
+                children: [
+                  /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: "members-list__avatar",
+                      role: "presentation",
+                      children: /* @__PURE__ */ t(
+                        "img",
+                        {
+                          src: e.avatar,
+                          alt: e.fullName,
+                          role: "img",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  ),
+                  m === l && /* @__PURE__ */ t(o, { children: e.fullName })
+                ]
+              },
+              e.fullName
+            );
+          }),
+          s.slice(i).length > 0 && /* @__PURE__ */ a(
+            "div",
+            {
+              className: "members-list__remaining",
+              role: "listitem",
+              onMouseEnter: () => this.setState({ isMembersListVisible: !0 }),
+              onMouseLeave: () => this.setState({ isMembersListVisible: !1 }),
+              children: [
+                /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: p.type,
+                    "aria-hidden": "true",
+                    children: [
+                      "+",
+                      s.slice(i).length
+                    ]
+                  }
+                ),
+                n && /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: "members-list__list",
+                    role: "list",
+                    children: s.slice(i).map((e) => /* @__PURE__ */ t(
+                      u,
+                      {
+                        leftPartSlot: /* @__PURE__ */ t(
+                          f,
+                          {
+                            avatar: e.avatar,
+                            fullName: e.fullName,
+                            isAccented: !0
+                          },
+                          e.fullName
+                        ),
+                        isTransparent: !0,
+                        alignment: "CENTER"
+                      },
+                      e.fullName
+                    ))
+                  }
+                ) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  x as default
+};
+//# sourceMappingURL=MembersList.js.map

package/dist/components/lists/members-list/MembersList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MembersList.js","sources":["../../../../src/components/lists/members-list/MembersList.tsx"],"sourcesContent":["import React from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport Tooltip from '@components/tags/tooltip/Tooltip'\nimport SimpleItem from '@components/slots/simple-item/SimpleItem'\nimport Avatar from '@components/assets/avatar/Avatar'\nimport './members-list.scss'\n\nexport interface MembersListProps {\n  /**\n   * Array of member information\n   */\n  members: Array<{\n    /** Avatar image URL */\n    avatar: string\n    /** Full name of the member */\n    fullName: string\n  }>\n  /**\n   * Maximum number of avatars to display\n   */\n  numberOfAvatarsDisplayed: number\n  /**\n   * Whether to use inverted color scheme\n   * @default false\n   */\n  isInverted?: boolean\n}\n\nexport interface MembersListState {\n  activeTooltipIndex: number | null\n  isMembersListVisible: boolean\n}\n\nexport default class MembersList extends React.Component<\n  MembersListProps,\n  MembersListState\n> {\n  static defaultProps: Partial<MembersListProps> = {\n    isInverted: false,\n  }\n\n  constructor(props: MembersListProps) {\n    super(props)\n    this.state = {\n      activeTooltipIndex: null,\n      isMembersListVisible: false,\n    }\n  }\n\n  render() {\n    const { members, numberOfAvatarsDisplayed, isInverted } = this.props\n    const { activeTooltipIndex, isMembersListVisible } = this.state\n\n    return (\n      <div\n        className={`members-list ${isInverted ? 'members-list--inverted' : ''}`}\n        role=\"list\"\n      >\n        {members.slice(0, numberOfAvatarsDisplayed).map((member, index) => {\n          const zIndex = isInverted\n            ? index + 1\n            : numberOfAvatarsDisplayed - index\n\n          return (\n            <div\n              key={member.fullName}\n              className=\"members-list__member\"\n              role=\"listitem\"\n              style={{ zIndex }}\n              onMouseEnter={() =>\n                this.setState({\n                  activeTooltipIndex: index,\n                })\n              }\n              onMouseLeave={() =>\n                this.setState({\n                  activeTooltipIndex: null,\n                })\n              }\n            >\n              <div\n                className=\"members-list__avatar\"\n                role=\"presentation\"\n              >\n                <img\n                  src={member.avatar}\n                  alt={member.fullName}\n                  role=\"img\"\n                  aria-hidden=\"true\"\n                />\n              </div>\n              {activeTooltipIndex === index && (\n                <Tooltip>{member.fullName}</Tooltip>\n              )}\n            </div>\n          )\n        })}\n        {members.slice(numberOfAvatarsDisplayed).length > 0 && (\n          <div\n            className=\"members-list__remaining\"\n            role=\"listitem\"\n            onMouseEnter={() => this.setState({ isMembersListVisible: true })}\n            onMouseLeave={() => this.setState({ isMembersListVisible: false })}\n          >\n            <span\n              className={texts.type}\n              aria-hidden=\"true\"\n            >\n              +{members.slice(numberOfAvatarsDisplayed).length}\n            </span>\n            {isMembersListVisible && (\n              <Tooltip>\n                <div\n                  className=\"members-list__list\"\n                  role=\"list\"\n                >\n                  {members.slice(numberOfAvatarsDisplayed).map((member) => (\n                    <SimpleItem\n                      key={member.fullName}\n                      leftPartSlot={\n                        <Avatar\n                          key={member.fullName}\n                          avatar={member.avatar}\n                          fullName={member.fullName}\n                          isAccented\n                        />\n                      }\n                      isTransparent\n                      alignment=\"CENTER\"\n                    />\n                  ))}\n                </div>\n              </Tooltip>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["MembersList","React","props","members","numberOfAvatarsDisplayed","isInverted","activeTooltipIndex","isMembersListVisible","jsxs","member","index","zIndex","jsx","Tooltip","texts","SimpleItem","Avatar"],"mappings":"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"}

package/dist/components/lists/sortable-list/SortableList.d.ts

@@ -0,0 +1,103 @@
+import { default as React } from 'react';
+
+interface SelectedColor {
+    id: string | undefined;
+    position: number;
+}
+interface DefaultData {
+    id: string;
+}
+interface HoveredColor extends SelectedColor {
+    hasGuideAbove: boolean;
+    hasGuideBelow: boolean;
+}
+export interface SortableListProps<T = DefaultData> {
+    /**
+     * Array of data items
+     */
+    data: Array<T>;
+    /**
+     * Array of primary content nodes
+     */
+    primarySlot: Array<React.ReactNode>;
+    /**
+     * Array of secondary content configurations
+     */
+    secondarySlot?: Array<{
+        /** Title for the secondary content */
+        title: string;
+        /** Content node */
+        node: React.ReactNode;
+    }>;
+    /**
+     * Array of action button nodes
+     */
+    actionsSlot?: Array<React.ReactNode>;
+    /**
+     * Content to display when list is empty
+     */
+    emptySlot?: React.ReactNode;
+    /**
+     * Helper texts for buttons
+     */
+    helpers?: {
+        /** Helper for remove button */
+        remove?: string;
+        /** Helper for more options button */
+        more?: string;
+    };
+    /**
+     * Whether the list is scrollable
+     * @default false
+     */
+    isScrollable?: boolean;
+    /**
+     * Whether to show a top border on scroll
+     * @default false
+     */
+    isTopBorderEnabled?: boolean;
+    /**
+     * Whether the list can be empty
+     * @default true
+     */
+    canBeEmpty?: boolean;
+    /**
+     * Whether the list is blocked
+     * @default false
+     */
+    isBlocked?: boolean;
+    /**
+     * Change handler when list is reordered
+     */
+    onChangeSortableList: (data: Array<T>) => void;
+    /**
+     * Remove item handler
+     */
+    onRemoveItem: React.MouseEventHandler<Element> & React.KeyboardEventHandler<Element>;
+    /**
+     * Refold options handler
+     */
+    onRefoldOptions: () => void;
+}
+export interface SortableListStates {
+    selectedElement: SelectedColor;
+    hoveredElement: HoveredColor;
+    hasTopBorder: boolean;
+}
+export default class SortableList<T extends DefaultData> extends React.Component<SortableListProps<T>, SortableListStates> {
+    private listRef;
+    static defaultProps: Partial<SortableListProps>;
+    constructor(props: SortableListProps<T>);
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    handleClickOutside: (e: Event) => void;
+    orderHandler: () => void;
+    selectionHandler: React.MouseEventHandler<HTMLLIElement> & React.MouseEventHandler<Element> & React.FocusEventHandler<HTMLInputElement>;
+    dragHandler: (id: string | undefined, hasGuideAbove: boolean, hasGuideBelow: boolean, position: number) => void;
+    dropOutsideHandler: (e: React.DragEvent<HTMLLIElement>) => void;
+    removeHandler: (e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
+    onScroll: (e: React.UIEvent<HTMLUListElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};
+//# sourceMappingURL=SortableList.d.ts.map

package/dist/components/lists/sortable-list/SortableList.d.ts.map

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

package/dist/components/lists/sortable-list/SortableList.js

@@ -0,0 +1,148 @@
+import '../../../assets/SortableList.css';
+import { jsx as u } from "react/jsx-runtime";
+import g from "react";
+import { t as S } from "../../../do-classnames-DSDFCvzy.js";
+import b from "../draggable-item/DraggableItem.js";
+class C extends g.Component {
+  listRef;
+  static defaultProps = {
+    isScrollable: !1,
+    isTopBorderEnabled: !1,
+    canBeEmpty: !0,
+    isBlocked: !1
+  };
+  constructor(e) {
+    super(e), this.state = {
+      selectedElement: {
+        id: void 0,
+        position: 0
+      },
+      hoveredElement: {
+        id: void 0,
+        hasGuideAbove: !1,
+        hasGuideBelow: !1,
+        position: 0
+      },
+      hasTopBorder: !1
+    }, this.listRef = g.createRef(), this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+  // Lifecycle
+  componentDidMount = () => document.addEventListener("mousedown", this.handleClickOutside);
+  componentWillUnmount = () => document.removeEventListener("mousedown", this.handleClickOutside);
+  handleClickOutside = (e) => {
+    this.listRef.current !== null && (!this.listRef.current.contains(e.target) || e.target === this.listRef.current) && this.setState({
+      selectedElement: {
+        id: void 0,
+        position: 0
+      }
+    });
+  };
+  // Handlers
+  orderHandler = () => {
+    const { onChangeSortableList: e, data: s } = this.props, { selectedElement: o, hoveredElement: l } = this.state, i = o, t = l, r = s.map((d) => d);
+    let n;
+    const h = r.findIndex(
+      (d) => d.id === i.id
+    ), [m] = r.splice(h, 1);
+    t.hasGuideAbove && t.position > i.position ? n = t.position - 1 : t.hasGuideBelow && t.position > i.position || t.hasGuideAbove && t.position < i.position ? n = t.position : t.hasGuideBelow && t.position < i.position ? n = t.position + 1 : n = t.position, r.splice(n, 0, m), e(r);
+  };
+  selectionHandler = (e) => {
+    const s = e.currentTarget, o = e.target;
+    return o.tagName === "INPUT" || o.tagName === "BUTTON" || o.tagName === "TEXTAREA" ? this.setState({
+      selectedElement: {
+        id: void 0,
+        position: 0
+      }
+    }) : this.setState({
+      selectedElement: {
+        id: s.dataset.id,
+        position: parseFloat(s.dataset.position ?? "0")
+      }
+    });
+  };
+  dragHandler = (e, s, o, l) => {
+    this.setState({
+      hoveredElement: {
+        id: e,
+        hasGuideAbove: s,
+        hasGuideBelow: o,
+        position: l
+      }
+    });
+  };
+  dropOutsideHandler = (e) => {
+    const s = e.target, o = s.parentNode ?? s, l = (o.parentNode?.parentNode).scrollTop, i = o.offsetTop, t = i + o.clientHeight;
+    e.pageY + l < i ? this.orderHandler() : e.pageY + l > t && this.orderHandler();
+  };
+  removeHandler = (e) => {
+    const { onChangeSortableList: s, data: o } = this.props, l = o.map((r) => r);
+    let i;
+    const t = e.currentTarget.closest(".draggable-item");
+    t !== null ? i = t.getAttribute("data-id") : i = null, s(l.filter((r) => r.id !== i));
+  };
+  // Direct Actions
+  onScroll = (e) => {
+    const { isTopBorderEnabled: s } = this.props;
+    e.preventDefault(), e.currentTarget.scrollTop > 0 && s ? this.setState({ hasTopBorder: !0 }) : this.setState({ hasTopBorder: !1 });
+  };
+  // Render
+  render() {
+    const {
+      data: e,
+      canBeEmpty: s,
+      isBlocked: o,
+      primarySlot: l,
+      secondarySlot: i,
+      actionsSlot: t,
+      emptySlot: r,
+      helpers: n,
+      isScrollable: h,
+      onRemoveItem: m,
+      onRefoldOptions: d
+    } = this.props, { selectedElement: f, hoveredElement: c, hasTopBorder: v } = this.state;
+    return e.length === 0 && s ? /* @__PURE__ */ u("div", { className: "sortable-list", children: r }) : /* @__PURE__ */ u(
+      "ul",
+      {
+        className: S([
+          "sortable-list",
+          h && "sortable-list--scrollable",
+          v && "sortable-list--top-border"
+        ]),
+        onScroll: this.onScroll,
+        ref: this.listRef,
+        children: e.map((a, p) => /* @__PURE__ */ u(
+          b,
+          {
+            id: a.id,
+            index: p,
+            canBeRemoved: e.length > 1 && !o || s && !o,
+            primarySlot: l[p],
+            secondarySlot: i ? i[p] : void 0,
+            actionsSlot: t ? t[p] : void 0,
+            selected: f.id === a.id,
+            helpers: {
+              remove: n?.remove,
+              more: n?.more
+            },
+            guideAbove: c.id === a.id ? c.hasGuideAbove : !1,
+            guideBelow: c.id === a.id ? c.hasGuideBelow : !1,
+            isBlocked: o,
+            onCancelSelection: this.selectionHandler,
+            onRefoldOptions: d,
+            onChangeOrder: this.orderHandler,
+            onRemove: m,
+            onChangeSelection: this.selectionHandler,
+            onDragChange: this.dragHandler,
+            onDropOutside: this.orderHandler,
+            "aria-selected": f.id === a.id
+          },
+          a.id
+        ))
+      }
+    );
+  }
+}
+export {
+  C as default
+};
+//# sourceMappingURL=SortableList.js.map

package/dist/components/lists/sortable-list/SortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.js","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport DraggableItem from '../draggable-item/DraggableItem'\nimport './sortable-list.scss'\n\ninterface SelectedColor {\n  id: string | undefined\n  position: number\n}\n\ninterface DefaultData {\n  id: string\n}\n\ninterface HoveredColor extends SelectedColor {\n  hasGuideAbove: boolean\n  hasGuideBelow: boolean\n}\n\nexport interface SortableListProps<T = DefaultData> {\n  /**\n   * Array of data items\n   */\n  data: Array<T>\n  /**\n   * Array of primary content nodes\n   */\n  primarySlot: Array<React.ReactNode>\n  /**\n   * Array of secondary content configurations\n   */\n  secondarySlot?: Array<{\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }>\n  /**\n   * Array of action button nodes\n   */\n  actionsSlot?: Array<React.ReactNode>\n  /**\n   * Content to display when list is empty\n   */\n  emptySlot?: React.ReactNode\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether the list is scrollable\n   * @default false\n   */\n  isScrollable?: boolean\n  /**\n   * Whether to show a top border on scroll\n   * @default false\n   */\n  isTopBorderEnabled?: boolean\n  /**\n   * Whether the list can be empty\n   * @default true\n   */\n  canBeEmpty?: boolean\n  /**\n   * Whether the list is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Change handler when list is reordered\n   */\n  onChangeSortableList: (data: Array<T>) => void\n  /**\n   * Remove item handler\n   */\n  onRemoveItem: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions: () => void\n}\n\nexport interface SortableListStates {\n  selectedElement: SelectedColor\n  hoveredElement: HoveredColor\n  hasTopBorder: boolean\n}\n\nexport default class SortableList<\n  T extends DefaultData,\n> extends React.Component<SortableListProps<T>, SortableListStates> {\n  private listRef: React.RefObject<HTMLUListElement>\n\n  static defaultProps: Partial<SortableListProps> = {\n    isScrollable: false,\n    isTopBorderEnabled: false,\n    canBeEmpty: true,\n    isBlocked: false,\n  }\n\n  constructor(props: SortableListProps<T>) {\n    super(props)\n    this.state = {\n      selectedElement: {\n        id: undefined,\n        position: 0,\n      },\n      hoveredElement: {\n        id: undefined,\n        hasGuideAbove: false,\n        hasGuideBelow: false,\n        position: 0,\n      },\n      hasTopBorder: false,\n    }\n    this.listRef = React.createRef()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  // Lifecycle\n  componentDidMount = () =>\n    document.addEventListener('mousedown', this.handleClickOutside)\n\n  componentWillUnmount = () =>\n    document.removeEventListener('mousedown', this.handleClickOutside)\n\n  handleClickOutside = (e: Event) => {\n    if (this.listRef.current !== null)\n      if (\n        !this.listRef.current.contains(e.target as HTMLElement) ||\n        e.target === this.listRef.current\n      )\n        this.setState({\n          selectedElement: {\n            id: undefined,\n            position: 0,\n          },\n        })\n  }\n\n  // Handlers\n  orderHandler = () => {\n    const { onChangeSortableList, data } = this.props\n    const { selectedElement, hoveredElement } = this.state\n\n    const source: SelectedColor = selectedElement,\n      target: HoveredColor = hoveredElement,\n      duplicatedData = data.map((el) => el)\n\n    let position: number\n    const sourceIndex = duplicatedData.findIndex(\n      (item) => item.id === source.id\n    )\n\n    const [removedElement] = duplicatedData.splice(sourceIndex, 1)\n\n    if (target.hasGuideAbove && target.position > source.position)\n      position = target.position - 1\n    else if (target.hasGuideBelow && target.position > source.position)\n      position = target.position\n    else if (target.hasGuideAbove && target.position < source.position)\n      position = target.position\n    else if (target.hasGuideBelow && target.position < source.position)\n      position = target.position + 1\n    else position = target.position\n\n    duplicatedData.splice(position, 0, removedElement)\n\n    onChangeSortableList(duplicatedData)\n  }\n\n  selectionHandler: React.MouseEventHandler<HTMLLIElement> &\n    React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const item = e.currentTarget as HTMLElement\n    const target = e.target as HTMLElement\n\n    if (\n      target.tagName === 'INPUT' ||\n      target.tagName === 'BUTTON' ||\n      target.tagName === 'TEXTAREA'\n    )\n      return this.setState({\n        selectedElement: {\n          id: undefined,\n          position: 0,\n        },\n      })\n\n    return this.setState({\n      selectedElement: {\n        id: item.dataset.id,\n        position: parseFloat(item.dataset.position ?? '0'),\n      },\n    })\n  }\n\n  dragHandler = (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => {\n    this.setState({\n      hoveredElement: {\n        id: id,\n        hasGuideAbove: hasGuideAbove,\n        hasGuideBelow: hasGuideBelow,\n        position: position,\n      },\n    })\n  }\n\n  dropOutsideHandler = (e: React.DragEvent<HTMLLIElement>) => {\n    const target = e.target,\n      parent: ParentNode =\n        (target as HTMLElement).parentNode ?? (target as HTMLElement),\n      scrollY: number = (parent.parentNode?.parentNode as HTMLElement)\n        .scrollTop,\n      parentRefTop: number = (parent as HTMLElement).offsetTop,\n      parentRefBottom: number =\n        parentRefTop + (parent as HTMLElement).clientHeight\n\n    if (e.pageY + scrollY < parentRefTop) this.orderHandler()\n    else if (e.pageY + scrollY > parentRefBottom) this.orderHandler()\n  }\n\n  removeHandler = (\n    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n  ) => {\n    const { onChangeSortableList, data } = this.props\n    const duplicatedData = data.map((el) => el)\n    let id: string | null\n    const element: HTMLElement | null = (\n      e.currentTarget as HTMLElement\n    ).closest('.draggable-item')\n\n    element !== null ? (id = element.getAttribute('data-id')) : (id = null)\n\n    onChangeSortableList(duplicatedData.filter((item) => item.id !== id))\n  }\n\n  // Direct Actions\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const { isTopBorderEnabled } = this.props\n\n    e.preventDefault()\n    if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled)\n      this.setState({ hasTopBorder: true })\n    else this.setState({ hasTopBorder: false })\n  }\n\n  // Render\n  render() {\n    const {\n      data,\n      canBeEmpty,\n      isBlocked,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      emptySlot,\n      helpers,\n      isScrollable,\n      onRemoveItem,\n      onRefoldOptions,\n    } = this.props\n    const { selectedElement, hoveredElement, hasTopBorder } = this.state\n\n    if (data.length === 0 && canBeEmpty)\n      return <div className=\"sortable-list\">{emptySlot}</div>\n    return (\n      <ul\n        className={doClassnames([\n          'sortable-list',\n          isScrollable && 'sortable-list--scrollable',\n          hasTopBorder && 'sortable-list--top-border',\n        ])}\n        onScroll={this.onScroll}\n        ref={this.listRef}\n      >\n        {data.map((item, index) => (\n          <DraggableItem\n            key={item.id}\n            id={item.id}\n            index={index}\n            canBeRemoved={\n              (data.length > 1 && !isBlocked) || (canBeEmpty && !isBlocked)\n            }\n            primarySlot={primarySlot[index]}\n            secondarySlot={secondarySlot ? secondarySlot[index] : undefined}\n            actionsSlot={actionsSlot ? actionsSlot[index] : undefined}\n            selected={selectedElement.id === item.id}\n            helpers={{\n              remove: helpers?.remove,\n              more: helpers?.more,\n            }}\n            guideAbove={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideAbove\n                : false\n            }\n            guideBelow={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideBelow\n                : false\n            }\n            isBlocked={isBlocked}\n            onCancelSelection={this.selectionHandler}\n            onRefoldOptions={onRefoldOptions}\n            onChangeOrder={this.orderHandler}\n            onRemove={onRemoveItem}\n            onChangeSelection={this.selectionHandler}\n            onDragChange={this.dragHandler}\n            onDropOutside={this.orderHandler}\n            aria-selected={selectedElement.id === item.id}\n          />\n        ))}\n      </ul>\n    )\n  }\n}\n"],"names":["SortableList","React","props","onChangeSortableList","data","selectedElement","hoveredElement","source","target","duplicatedData","el","position","sourceIndex","item","removedElement","id","hasGuideAbove","hasGuideBelow","parent","scrollY","parentRefTop","parentRefBottom","element","isTopBorderEnabled","canBeEmpty","isBlocked","primarySlot","secondarySlot","actionsSlot","emptySlot","helpers","isScrollable","onRemoveItem","onRefoldOptions","hasTopBorder","jsx","doClassnames","index","DraggableItem"],"mappings":"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"}

package/dist/components/lists/tabs/Tabs.d.ts

@@ -0,0 +1,48 @@
+import { IconList } from '../../../types/icon.types';
+
+export interface TabsProps {
+    /**
+     * Array of tab configurations
+     */
+    tabs: Array<{
+        /** Tab label */
+        label: string;
+        /** Unique tab ID */
+        id: string;
+        /** Optional icon */
+        icon?: {
+            type: 'PICTO' | 'LETTER';
+            name: IconList;
+        };
+        /** Whether tab has been updated */
+        isUpdated: boolean;
+        /** Whether to show a "New" badge */
+        isNew?: boolean;
+    }>;
+    /**
+     * ID of the active tab
+     */
+    active: string;
+    /**
+     * Layout direction
+     * @default 'HORIZONTAL'
+     */
+    direction?: 'HORIZONTAL' | 'VERTICAL';
+    /**
+     * Whether tabs should use flex layout
+     * @default false
+     */
+    isFlex?: boolean;
+    /**
+     * Maximum number of tabs to display before collapsing into menu
+     * @default 3
+     */
+    maxVisibleTabs?: number;
+    /**
+     * Click handler
+     */
+    action: React.MouseEventHandler & React.KeyboardEventHandler;
+}
+declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Tabs;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/lists/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAO1C,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;QACV,gBAAgB;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,oBAAoB;QACpB,EAAE,EAAE,MAAM,CAAA;QACV,oBAAoB;QACpB,IAAI,CAAC,EAAE;YACL,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;YACxB,IAAI,EAAE,QAAQ,CAAA;SACf,CAAA;QACD,mCAAmC;QACnC,SAAS,EAAE,OAAO,CAAA;QAClB,oCAAoC;QACpC,KAAK,CAAC,EAAE,OAAO,CAAA;KAChB,CAAC,CAAA;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;CAC7D;AAED,QAAA,MAAM,IAAI,UAAW,SAAS,mDA2K7B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/lists/tabs/Tabs.figma.d.ts

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

package/dist/components/lists/tabs/Tabs.figma.d.ts.map

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

package/dist/components/lists/tabs/Tabs.figma.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import { i } from "../../../index_react-CmuCVQet.js";
+import e from "./Tabs.js";
+i.figma.connect(
+  e,
+  "https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=651:383",
+  {
+    props: {
+      direction: i.figma.enum("direction", {
+        HORIZONTAL: "HORIZONTAL",
+        VERTICAL: "VERTICAL"
+      }),
+      isFlex: i.figma.boolean("isFlex")
+    },
+    example: (a) => /* @__PURE__ */ t(
+      e,
+      {
+        tabs: [
+          { label: "Tab 1", id: "tab1", isUpdated: !1 },
+          { label: "Tab 2", id: "tab2", isUpdated: !1 }
+        ],
+        active: "tab1",
+        direction: a.direction,
+        isFlex: a.isFlex,
+        action: () => {
+        }
+      }
+    )
+  }
+);
+//# sourceMappingURL=Tabs.figma.js.map

package/dist/components/lists/tabs/Tabs.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.figma.js","sources":["../../../../src/components/lists/tabs/Tabs.figma.tsx"],"sourcesContent":["import { figma } from '@figma/code-connect'\nimport Tabs from './Tabs'\n\nfigma.connect(\n  Tabs,\n  'https://www.figma.com/design/QlBdsfEcaUsGBzqA20xbNi/Unoff?node-id=651:383',\n  {\n    props: {\n      direction: figma.enum('direction', {\n        HORIZONTAL: 'HORIZONTAL',\n        VERTICAL: 'VERTICAL',\n      }),\n      isFlex: figma.boolean('isFlex'),\n    },\n    example: (props) => (\n      <Tabs\n        tabs={[\n          { label: 'Tab 1', id: 'tab1', isUpdated: false },\n          { label: 'Tab 2', id: 'tab2', isUpdated: false },\n        ]}\n        active=\"tab1\"\n        direction={props.direction}\n        isFlex={props.isFlex}\n        action={() => {}}\n      />\n    ),\n  }\n)\n"],"names":["figma","Tabs","props","jsx"],"mappings":";;;AAGAA,EAAAA,MAAM;AAAA,EACJC;AAAA,EACA;AAAA,EACA;AAAA,IACE,OAAO;AAAA,MACL,WAAWD,EAAAA,MAAM,KAAK,aAAa;AAAA,QACjC,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA,CACX;AAAA,MACD,QAAQA,EAAAA,MAAM,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAEhC,SAAS,CAACE,MACR,gBAAAC;AAAA,MAACF;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,UACJ,EAAE,OAAO,SAAS,IAAI,QAAQ,WAAW,GAAA;AAAA,UACzC,EAAE,OAAO,SAAS,IAAI,QAAQ,WAAW,GAAA;AAAA,QAAM;AAAA,QAEjD,QAAO;AAAA,QACP,WAAWC,EAAM;AAAA,QACjB,QAAQA,EAAM;AAAA,QACd,QAAQ,MAAM;AAAA,QAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB;AAGN;"}