@sberbusiness/triplex-next 1.34.0 → 1.35.0

package/components/Button/ButtonDropdown.js

@@ -1,187 +1,221 @@
-import { Button as M } from "./Button.js";
+import { Button } from "./Button.js";
 import "./ButtonBase.js";
 import "./ButtonIcon.js";
-import { jsx as t, jsxs as x, Fragment as U } from "react/jsx-runtime";
-import Z, { useRef as I, useState as q, createElement as B } from "react";
-import { c as w, u as F } from "../../chunks/vendor-D5cfSbgz.js";
-import { DotshorizontalStrokeSrvIcon32 as V, DotshorizontalStrokeSrvIcon24 as J, DotshorizontalStrokeSrvIcon20 as Q, CaretdownStrokeSrvIcon24 as X, CaretdownStrokeSrvIcon20 as $, CaretdownStrokeSrvIcon16 as oo } from "@sberbusiness/icons-next";
-import { ButtonDropdownExtended as y } from "./ButtonDropdownExtended.js";
-import { EButtonDotsTheme as N, EButtonTheme as d } from "./enums.js";
-import { isKey as D } from "../../utils/keyboard.js";
-import { DropdownListContext as to } from "../Dropdown/DropdownListContext.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useRef, useState, createElement } from "react";
+import { c as clsx, u as uniqueId } from "../../chunks/vendor-Bco_z_Yi.js";
+import { DotshorizontalStrokeSrvIcon32, DotshorizontalStrokeSrvIcon24, DotshorizontalStrokeSrvIcon20, CaretdownStrokeSrvIcon24, CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
+import { ButtonDropdownExtended } from "./ButtonDropdownExtended.js";
+import { EButtonDotsTheme, EButtonTheme } from "./enums.js";
+import { isKey } from "../../utils/keyboard.js";
+import { DropdownListContext } from "../Dropdown/DropdownListContext.js";
 import "../Dropdown/desktop/DropdownDesktop.js";
-import { DropdownList as g } from "../Dropdown/desktop/DropdownList.js";
-import "../../chunks/DropdownListItem-Db1_Qf-T.js";
-import { EDropdownAlignment as ro, EDropdownWidth as eo } from "../Dropdown/desktop/enums.js";
+import { DropdownList } from "../Dropdown/desktop/DropdownList.js";
+import "../../chunks/DropdownListItem-Bar1VVOv.js";
+import { EDropdownAlignment, EDropdownWidth } from "../Dropdown/desktop/enums.js";
 import "../Dropdown/mobile/DropdownMobile.js";
-import { DropdownMobileBody as no } from "../Dropdown/mobile/DropdownMobileBody.js";
-import { DropdownMobileClose as co } from "../Dropdown/mobile/DropdownMobileClose.js";
+import { DropdownMobileBody } from "../Dropdown/mobile/DropdownMobileBody.js";
+import { DropdownMobileClose } from "../Dropdown/mobile/DropdownMobileClose.js";
 import "../Dropdown/mobile/DropdownMobileFooter.js";
-import { DropdownMobileHeader as ao } from "../Dropdown/mobile/DropdownMobileHeader.js";
+import { DropdownMobileHeader } from "../Dropdown/mobile/DropdownMobileHeader.js";
 import "../Dropdown/mobile/DropdownMobileInner.js";
 import "../Dropdown/mobile/DropdownMobileInput.js";
-import { DropdownMobileList as so } from "../Dropdown/mobile/DropdownMobileList.js";
-import { DropdownMobileListItem as io } from "../Dropdown/mobile/DropdownMobileListItem.js";
+import { DropdownMobileList } from "../Dropdown/mobile/DropdownMobileList.js";
+import { DropdownMobileListItem } from "../Dropdown/mobile/DropdownMobileListItem.js";
 import "../Loader/LoaderSmall/LoaderSmall.js";
 import "../Loader/LoaderMiddle/LoaderMiddle.js";
-import { EComponentSize as l } from "../../enums/EComponentSize.js";
+import { EComponentSize } from "../../enums/EComponentSize.js";
 import "../Dropdown/Dropdown.js";
-import { ETextSize as mo } from "../Typography/enums.js";
+import { ETextSize } from "../Typography/enums.js";
 import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
-import { Text as lo } from "../Typography/Text.js";
+import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-const uo = "buttonDropdown__473273e4", po = "block__45e0c163", Do = "buttonDropdownTarget__a2966556", fo = "dots__3537e5ef", wo = "caretIcon__acd5c01c", bo = "active__802b5df9", So = "buttonDropdownMenuItem__217ffcd4", n = {
-  buttonDropdown: uo,
-  block: po,
-  buttonDropdownTarget: Do,
-  dots: fo,
-  caretIcon: wo,
-  active: bo,
-  buttonDropdownMenuItem: So
-}, _o = {
-  [l.SM]: /* @__PURE__ */ t(Q, { paletteIndex: 0 }),
-  [l.MD]: /* @__PURE__ */ t(J, { paletteIndex: 0 }),
-  [l.LG]: /* @__PURE__ */ t(V, { paletteIndex: 0 })
-}, L = {
-  [l.SM]: (a) => /* @__PURE__ */ t(oo, { paletteIndex: a, className: n.caretIcon }),
-  [l.MD]: (a) => /* @__PURE__ */ t($, { paletteIndex: a, className: n.caretIcon }),
-  [l.LG]: (a) => /* @__PURE__ */ t(X, { paletteIndex: a, className: n.caretIcon })
-}, Io = Z.forwardRef(
-  (a, f) => {
-    const { buttonAttributes: R, children: h, className: G, theme: u, size: s, options: E, selected: m, block: b, disabled: T, ...z } = a, C = I(null), A = I(null), P = w(n.buttonDropdown, { [n.block]: !!b }, G), [S, W] = q(), _ = I(F()), Y = ({ opened: o, setOpened: e }) => {
-      const c = w(n.buttonDropdownTarget, {
-        [n.block]: !!b,
-        [n.active]: o
+const buttonDropdown = "buttonDropdown__337c3be8";
+const block = "block__3702427d";
+const buttonDropdownTarget = "buttonDropdownTarget__0b0045ea";
+const dots = "dots__6416126a";
+const caretIcon = "caretIcon__1dd53dcc";
+const active = "active__6504bdec";
+const buttonDropdownMenuItem = "buttonDropdownMenuItem__b64e7c79";
+const styles = {
+  buttonDropdown,
+  block,
+  buttonDropdownTarget,
+  dots,
+  caretIcon,
+  active,
+  buttonDropdownMenuItem
+};
+const SIZE_TO_DOTS_ICON_MAP = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(DotshorizontalStrokeSrvIcon20, { paletteIndex: 0 }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(DotshorizontalStrokeSrvIcon24, { paletteIndex: 0 }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(DotshorizontalStrokeSrvIcon32, { paletteIndex: 0 })
+};
+const SIZE_TO_CARET_ICON_MAP = {
+  [EComponentSize.SM]: (paletteIndex) => /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon16, { paletteIndex, className: styles.caretIcon }),
+  [EComponentSize.MD]: (paletteIndex) => /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon20, { paletteIndex, className: styles.caretIcon }),
+  [EComponentSize.LG]: (paletteIndex) => /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon24, { paletteIndex, className: styles.caretIcon })
+};
+const ButtonDropdown = React__default.forwardRef(
+  (props, ref) => {
+    const { buttonAttributes, children, className, theme, size, options, selected, block: block2, disabled, ...rest } = props;
+    const buttonRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const classNames = clsx(styles.buttonDropdown, { [styles.block]: !!block2 }, className);
+    const [activeDescendant, setActiveDescendant] = useState();
+    const instanceId = useRef(uniqueId());
+    const renderButton = ({ opened, setOpened }) => {
+      const classNames2 = clsx(styles.buttonDropdownTarget, {
+        [styles.block]: !!block2,
+        [styles.active]: opened
       });
-      return /* @__PURE__ */ x(
-        M,
+      return /* @__PURE__ */ jsxs(
+        Button,
         {
-          className: c,
-          theme: u,
-          size: s,
-          onKeyDown: O({ opened: o, setOpened: e }),
-          onClick: k({ opened: o, setOpened: e }),
-          disabled: T,
+          className: classNames2,
+          theme,
+          size,
+          onKeyDown: handleKeyDown({ opened, setOpened }),
+          onClick: handleClick({ opened, setOpened }),
+          disabled,
           "aria-haspopup": "menu",
-          "aria-expanded": o,
-          "aria-controls": _.current,
-          "aria-activedescendant": S,
-          ...R,
-          ref: v,
+          "aria-expanded": opened,
+          "aria-controls": instanceId.current,
+          "aria-activedescendant": activeDescendant,
+          ...buttonAttributes,
+          ref: setRef,
           children: [
-            h,
-            K()
+            children,
+            renderCaret()
           ]
         }
       );
-    }, H = ({ opened: o, setOpened: e }) => {
-      const c = w(n.buttonDropdownTarget, n.dots, {
-        [n.block]: !!b
+    };
+    const renderButtonDots = ({ opened, setOpened }) => {
+      const classNames2 = clsx(styles.buttonDropdownTarget, styles.dots, {
+        [styles.block]: !!block2
       });
-      return /* @__PURE__ */ t(
-        M,
+      return /* @__PURE__ */ jsx(
+        Button,
         {
-          className: c,
-          theme: u === N.DOTS_SECONDARY ? d.SECONDARY : d.SECONDARY_LIGHT,
-          size: s,
-          onKeyDown: O({ opened: o, setOpened: e }),
-          onClick: k({ opened: o, setOpened: e }),
-          disabled: T,
+          className: classNames2,
+          theme: theme === EButtonDotsTheme.DOTS_SECONDARY ? EButtonTheme.SECONDARY : EButtonTheme.SECONDARY_LIGHT,
+          size,
+          onKeyDown: handleKeyDown({ opened, setOpened }),
+          onClick: handleClick({ opened, setOpened }),
+          disabled,
           "aria-haspopup": "menu",
-          "aria-expanded": o,
-          "aria-controls": _.current,
-          "aria-activedescendant": S,
-          ...R,
-          ref: v,
-          icon: _o[s]
+          "aria-expanded": opened,
+          "aria-controls": instanceId.current,
+          "aria-activedescendant": activeDescendant,
+          ...buttonAttributes,
+          ref: setRef,
+          icon: SIZE_TO_DOTS_ICON_MAP[size]
         }
       );
-    }, k = ({ opened: o, setOpened: e }) => () => e(!o), O = ({ opened: o, setOpened: e }) => (c) => {
-      const { key: i } = c;
-      (D(i, "SPACE") || D(i, "ARROW_UP") || D(i, "ARROW_DOWN")) && c.preventDefault(), !o && (D(i, "ARROW_UP") || D(i, "ARROW_DOWN")) && e(!0);
-    }, K = () => {
-      switch (u) {
-        case d.GENERAL:
-        case d.DANGER:
-          return L[s](7);
-        case d.SECONDARY:
-        case d.SECONDARY_LIGHT:
-          return L[s](0);
+    };
+    const handleClick = ({ opened, setOpened }) => () => setOpened(!opened);
+    const handleKeyDown = ({ opened, setOpened }) => (event) => {
+      const { key } = event;
+      if (isKey(key, "SPACE") || isKey(key, "ARROW_UP") || isKey(key, "ARROW_DOWN")) {
+        event.preventDefault();
+      }
+      if (!opened && (isKey(key, "ARROW_UP") || isKey(key, "ARROW_DOWN"))) {
+        setOpened(true);
+      }
+    };
+    const renderCaret = () => {
+      switch (theme) {
+        case EButtonTheme.GENERAL:
+        case EButtonTheme.DANGER:
+          return SIZE_TO_CARET_ICON_MAP[size](7);
+        case EButtonTheme.SECONDARY:
+        case EButtonTheme.SECONDARY_LIGHT:
+          return SIZE_TO_CARET_ICON_MAP[size](0);
         default:
           return null;
       }
-    }, j = ({ opened: o, setOpened: e, className: c }) => {
-      const i = w(n.buttonDropdownMenu, c);
-      return /* @__PURE__ */ t(to.Provider, { value: { activeDescendant: S, setActiveDescendant: W }, children: /* @__PURE__ */ t(
-        y.Dropdown,
+    };
+    const renderDropdown = ({ opened, setOpened, className: className2 }) => {
+      const classNames2 = clsx(styles.buttonDropdownMenu, className2);
+      return /* @__PURE__ */ jsx(DropdownListContext.Provider, { value: { activeDescendant, setActiveDescendant }, children: /* @__PURE__ */ jsx(
+        ButtonDropdownExtended.Dropdown,
         {
-          className: i,
-          size: s,
-          width: eo.MIN_TARGET,
-          alignment: ro.RIGHT,
-          opened: o,
-          setOpened: e,
-          targetRef: C,
-          ref: A,
+          className: classNames2,
+          size,
+          width: EDropdownWidth.MIN_TARGET,
+          alignment: EDropdownAlignment.RIGHT,
+          opened,
+          setOpened,
+          targetRef: buttonRef,
+          ref: dropdownRef,
           mobileViewProps: {
-            children: /* @__PURE__ */ x(U, { children: [
-              /* @__PURE__ */ t(
-                ao,
+            children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMobileHeader,
                 {
-                  controlButtons: /* @__PURE__ */ t(co, { onClick: () => e(!1) }),
-                  children: /* @__PURE__ */ t(lo, { tag: "div", size: mo.B3, children: h })
+                  controlButtons: /* @__PURE__ */ jsx(DropdownMobileClose, { onClick: () => setOpened(false) }),
+                  children: /* @__PURE__ */ jsx(Text, { tag: "div", size: ETextSize.B3, children })
                 }
               ),
-              /* @__PURE__ */ t(no, { children: /* @__PURE__ */ t(so, { children: E.map((r) => /* @__PURE__ */ B(
-                io,
+              /* @__PURE__ */ jsx(DropdownMobileBody, { children: /* @__PURE__ */ jsx(DropdownMobileList, { children: options.map((option) => /* @__PURE__ */ createElement(
+                DropdownMobileListItem,
                 {
-                  ...r,
-                  key: r.id,
-                  selected: r.id === (m == null ? void 0 : m.id),
+                  ...option,
+                  key: option.id,
+                  selected: option.id === (selected == null ? void 0 : selected.id),
                   onSelect: () => {
-                    var p;
-                    (p = r.onSelect) == null || p.call(r), e(!1);
+                    var _a;
+                    (_a = option.onSelect) == null ? void 0 : _a.call(option);
+                    setOpened(false);
                   }
                 },
-                r.label
+                option.label
               )) }) })
             ] })
           },
-          children: /* @__PURE__ */ t(g, { dropdownOpened: o, id: _.current, size: s, children: E.map((r) => /* @__PURE__ */ B(
-            g.Item,
+          children: /* @__PURE__ */ jsx(DropdownList, { dropdownOpened: opened, id: instanceId.current, size, children: options.map((option) => /* @__PURE__ */ createElement(
+            DropdownList.Item,
             {
-              ...r,
-              className: n.buttonDropdownMenuItem,
-              key: r.id,
-              selected: r.id === (m == null ? void 0 : m.id),
+              ...option,
+              className: styles.buttonDropdownMenuItem,
+              key: option.id,
+              selected: option.id === (selected == null ? void 0 : selected.id),
               onSelect: () => {
-                var p;
-                (p = r.onSelect) == null || p.call(r), e(!1);
+                var _a;
+                (_a = option.onSelect) == null ? void 0 : _a.call(option);
+                setOpened(false);
               }
             },
-            r.label
+            option.label
           )) })
         }
       ) });
-    }, v = (o) => {
-      C.current = o, typeof f == "function" ? f(o) : f && (f.current = o);
     };
-    return /* @__PURE__ */ t(
-      y,
+    const setRef = (instance) => {
+      buttonRef.current = instance;
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref) {
+        ref.current = instance;
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      ButtonDropdownExtended,
       {
-        className: P,
-        renderButton: u === N.DOTS_SECONDARY || u === N.DOTS_SECONDARY_LIGHT ? H : Y,
-        renderDropdown: j,
-        dropdownRef: A,
-        closeOnTab: !0,
-        ...z
+        className: classNames,
+        renderButton: theme === EButtonDotsTheme.DOTS_SECONDARY || theme === EButtonDotsTheme.DOTS_SECONDARY_LIGHT ? renderButtonDots : renderButton,
+        renderDropdown,
+        dropdownRef,
+        closeOnTab: true,
+        ...rest
       }
     );
   }
 );
-Io.displayName = "ButtonDropdown";
+ButtonDropdown.displayName = "ButtonDropdown";
 export {
-  Io as ButtonDropdown
+  ButtonDropdown
 };
 //# sourceMappingURL=ButtonDropdown.js.map

package/components/Button/ButtonDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDropdown.js","sources":["../../../src/components/Button/ButtonDropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport {\n    CaretdownStrokeSrvIcon24,\n    CaretdownStrokeSrvIcon20,\n    CaretdownStrokeSrvIcon16,\n    DotshorizontalStrokeSrvIcon32,\n    DotshorizontalStrokeSrvIcon24,\n    DotshorizontalStrokeSrvIcon20,\n} from \"@sberbusiness/icons-next\";\nimport {\n    ButtonDropdownExtended,\n    IButtonDropdownExtendedButtonProvideProps,\n    IButtonDropdownExtendedDropdownProvideProps,\n} from \"./ButtonDropdownExtended\";\nimport { Button } from \"./Button\";\nimport { EButtonDotsTheme, EButtonTheme } from \"./enums\";\nimport { isKey } from \"../../utils/keyboard\";\nimport {\n    DropdownList,\n    DropdownListContext,\n    DropdownMobileHeader,\n    DropdownMobileClose,\n    DropdownMobileBody,\n    DropdownMobileList,\n    DropdownMobileListItem,\n    IDropdownListItemProps,\n    EDropdownWidth,\n    EDropdownAlignment,\n} from \"../Dropdown\";\nimport { Text, ETextSize } from \"../Typography\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport styles from \"./styles/ButtonDropdown.module.less\";\n\n/** Свойства опции в выпадающем списке действий. */\nexport interface IButtonDropdownOption extends Omit<\n    IDropdownListItemProps,\n    \"active\" | \"onSelect\" | \"selected\" | \"keyCodesForSelection\" | \"className\" | \"key\"\n> {\n    /** Уникальное имя опции. */\n    id: string;\n    /** Название опции. */\n    label: React.ReactNode;\n    /** Обработчик выбора опции. */\n    onSelect?: () => void;\n}\n\n/** Свойства кнопки с выпадающим списком действий. */\nexport interface IButtonDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** HTML-атрибуты кнопки. */\n    buttonAttributes?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Размер кнопки. */\n    size: EComponentSize;\n    /** Список опций. */\n    options: IButtonDropdownOption[];\n    /** Выбранная опция. */\n    selected?: IButtonDropdownOption;\n    /** Отключенное состояние кнопки. */\n    disabled?: boolean;\n}\n\n/** Свойства основной/вспомогательной кнопки с выпадающим списком действий. */\ninterface IButtonDropdownBaseProps extends IButtonDropdownProps {\n    /** Тема кнопки. */\n    theme: EButtonTheme.GENERAL | EButtonTheme.SECONDARY | EButtonTheme.SECONDARY_LIGHT | EButtonTheme.DANGER;\n    /** Блочное состояние кнопки. */\n    block?: boolean;\n}\n\n/** Свойства контекстной кнопки с выпадающим списком действий. */\ninterface IButtonDotsProps extends IButtonDropdownProps {\n    /** Тема кнопки. */\n    theme: EButtonDotsTheme;\n    /** Блочное состояние кнопки. */\n    block?: never;\n}\n\nconst SIZE_TO_DOTS_ICON_MAP: Record<EComponentSize, React.ReactElement> = {\n    [EComponentSize.SM]: <DotshorizontalStrokeSrvIcon20 paletteIndex={0} />,\n    [EComponentSize.MD]: <DotshorizontalStrokeSrvIcon24 paletteIndex={0} />,\n    [EComponentSize.LG]: <DotshorizontalStrokeSrvIcon32 paletteIndex={0} />,\n};\n\nconst SIZE_TO_CARET_ICON_MAP: Record<EComponentSize, (paletteIndex: 0 | 7) => React.ReactElement> = {\n    [EComponentSize.SM]: (paletteIndex) => (\n        <CaretdownStrokeSrvIcon16 paletteIndex={paletteIndex} className={styles.caretIcon} />\n    ),\n    [EComponentSize.MD]: (paletteIndex) => (\n        <CaretdownStrokeSrvIcon20 paletteIndex={paletteIndex} className={styles.caretIcon} />\n    ),\n    [EComponentSize.LG]: (paletteIndex) => (\n        <CaretdownStrokeSrvIcon24 paletteIndex={paletteIndex} className={styles.caretIcon} />\n    ),\n};\n\n/** Кнопка с выпадающим списком действий. */\nexport const ButtonDropdown = React.forwardRef<HTMLButtonElement, IButtonDropdownBaseProps | IButtonDotsProps>(\n    (props, ref) => {\n        const { buttonAttributes, children, className, theme, size, options, selected, block, disabled, ...rest } =\n            props;\n\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n        const dropdownRef = useRef<HTMLDivElement>(null);\n        const classNames = clsx(styles.buttonDropdown, { [styles.block]: !!block }, className);\n        const [activeDescendant, setActiveDescendant] = useState<string>();\n        const instanceId = useRef(uniqueId());\n\n        const renderButton = ({ opened, setOpened }: IButtonDropdownExtendedButtonProvideProps) => {\n            const classNames = clsx(styles.buttonDropdownTarget, {\n                [styles.block]: !!block,\n                [styles.active]: opened,\n            });\n\n            return (\n                <Button\n                    className={classNames}\n                    theme={theme as EButtonTheme}\n                    size={size}\n                    onKeyDown={handleKeyDown({ opened, setOpened })}\n                    onClick={handleClick({ opened, setOpened })}\n                    disabled={disabled}\n                    aria-haspopup=\"menu\"\n                    aria-expanded={opened}\n                    aria-controls={instanceId.current}\n                    aria-activedescendant={activeDescendant}\n                    {...buttonAttributes}\n                    ref={setRef}\n                >\n                    {children}\n                    {renderCaret()}\n                </Button>\n            );\n        };\n\n        const renderButtonDots = ({ opened, setOpened }: IButtonDropdownExtendedButtonProvideProps) => {\n            const classNames = clsx(styles.buttonDropdownTarget, styles.dots, {\n                [styles.block]: !!block,\n            });\n\n            return (\n                <Button\n                    className={classNames}\n                    theme={\n                        theme === EButtonDotsTheme.DOTS_SECONDARY\n                            ? EButtonTheme.SECONDARY\n                            : EButtonTheme.SECONDARY_LIGHT\n                    }\n                    size={size}\n                    onKeyDown={handleKeyDown({ opened, setOpened })}\n                    onClick={handleClick({ opened, setOpened })}\n                    disabled={disabled}\n                    aria-haspopup=\"menu\"\n                    aria-expanded={opened}\n                    aria-controls={instanceId.current}\n                    aria-activedescendant={activeDescendant}\n                    {...buttonAttributes}\n                    ref={setRef}\n                    icon={SIZE_TO_DOTS_ICON_MAP[size]}\n                />\n            );\n        };\n\n        const handleClick =\n            ({ opened, setOpened }: IButtonDropdownExtendedButtonProvideProps) =>\n            () =>\n                setOpened(!opened);\n\n        const handleKeyDown =\n            ({ opened, setOpened }: IButtonDropdownExtendedButtonProvideProps) =>\n            (event: React.KeyboardEvent<HTMLButtonElement>) => {\n                const { key } = event;\n\n                if (isKey(key, \"SPACE\") || isKey(key, \"ARROW_UP\") || isKey(key, \"ARROW_DOWN\")) {\n                    event.preventDefault();\n                }\n                if (!opened && (isKey(key, \"ARROW_UP\") || isKey(key, \"ARROW_DOWN\"))) {\n                    setOpened(true);\n                }\n            };\n\n        const renderCaret = () => {\n            switch (theme) {\n                case EButtonTheme.GENERAL:\n                case EButtonTheme.DANGER:\n                    return SIZE_TO_CARET_ICON_MAP[size](7);\n                case EButtonTheme.SECONDARY:\n                case EButtonTheme.SECONDARY_LIGHT:\n                    return SIZE_TO_CARET_ICON_MAP[size](0);\n                default:\n                    return null;\n            }\n        };\n\n        const renderDropdown = ({ opened, setOpened, className }: IButtonDropdownExtendedDropdownProvideProps) => {\n            const classNames = clsx(styles.buttonDropdownMenu, className);\n\n            return (\n                <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                    <ButtonDropdownExtended.Dropdown\n                        className={classNames}\n                        size={size}\n                        width={EDropdownWidth.MIN_TARGET}\n                        alignment={EDropdownAlignment.RIGHT}\n                        opened={opened}\n                        setOpened={setOpened}\n                        targetRef={buttonRef}\n                        ref={dropdownRef}\n                        mobileViewProps={{\n                            children: (\n                                <>\n                                    <DropdownMobileHeader\n                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}\n                                    >\n                                        <Text tag=\"div\" size={ETextSize.B3}>\n                                            {children}\n                                        </Text>\n                                    </DropdownMobileHeader>\n                                    <DropdownMobileBody>\n                                        <DropdownMobileList>\n                                            {options.map((option) => (\n                                                <DropdownMobileListItem\n                                                    {...option}\n                                                    key={option.id}\n                                                    selected={option.id === selected?.id}\n                                                    onSelect={() => {\n                                                        option.onSelect?.();\n                                                        setOpened(false);\n                                                    }}\n                                                >\n                                                    {option.label}\n                                                </DropdownMobileListItem>\n                                            ))}\n                                        </DropdownMobileList>\n                                    </DropdownMobileBody>\n                                </>\n                            ),\n                        }}\n                    >\n                        <DropdownList dropdownOpened={opened} id={instanceId.current} size={size}>\n                            {options.map((option) => (\n                                <DropdownList.Item\n                                    {...option}\n                                    className={styles.buttonDropdownMenuItem}\n                                    key={option.id}\n                                    selected={option.id === selected?.id}\n                                    onSelect={() => {\n                                        option.onSelect?.();\n                                        setOpened(false);\n                                    }}\n                                >\n                                    {option.label}\n                                </DropdownList.Item>\n                            ))}\n                        </DropdownList>\n                    </ButtonDropdownExtended.Dropdown>\n                </DropdownListContext.Provider>\n            );\n        };\n\n        /** Функция для хранения ссылки. */\n        const setRef = (instance: HTMLButtonElement | null) => {\n            buttonRef.current = instance;\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        return (\n            <ButtonDropdownExtended\n                className={classNames}\n                renderButton={\n                    theme === EButtonDotsTheme.DOTS_SECONDARY || theme === EButtonDotsTheme.DOTS_SECONDARY_LIGHT\n                        ? renderButtonDots\n                        : renderButton\n                }\n                renderDropdown={renderDropdown}\n                dropdownRef={dropdownRef}\n                closeOnTab\n                {...rest}\n            />\n        );\n    },\n);\n\nButtonDropdown.displayName = \"ButtonDropdown\";\n"],"names":["React","block","classNames","className"],"mappings":"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"}

package/components/Button/ButtonDropdownExtended.js

@@ -1,53 +1,75 @@
-import { jsxs as h } from "react/jsx-runtime";
-import { useRef as f, useState as C, useCallback as N, useEffect as R } from "react";
-import { Dropdown as _ } from "../Dropdown/Dropdown.js";
-import { isKey as w } from "../../utils/keyboard.js";
-import { DropdownList as g } from "../Dropdown/desktop/DropdownList.js";
-import { c as A } from "../../chunks/vendor-D5cfSbgz.js";
-const K = "buttonDropdownExtended__f4f634d9", S = "buttonDropdownExtendedBlock__dcd03ba4", E = {
-  buttonDropdownExtended: K,
-  buttonDropdownExtendedBlock: S
-}, D = (s) => {
-  const { className: v, opened: x, setOpened: c, renderButton: b, renderDropdown: k, dropdownRef: l, closeOnTab: p, ...L } = s, u = f(null), m = f(s.opened !== void 0), [O, y] = C((s.opened === void 0, !1)), e = m.current ? !!x : O, o = N(
-    (t) => {
-      if (m.current) {
-        c && c(t);
+import { jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { Dropdown } from "../Dropdown/Dropdown.js";
+import { isKey } from "../../utils/keyboard.js";
+import { DropdownList } from "../Dropdown/desktop/DropdownList.js";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+const buttonDropdownExtended = "buttonDropdownExtended__702f24ee";
+const buttonDropdownExtendedBlock = "buttonDropdownExtendedBlock__4b159b6b";
+const styles = {
+  buttonDropdownExtended,
+  buttonDropdownExtendedBlock
+};
+const ButtonDropdownExtended = (props) => {
+  const { className, opened, setOpened, renderButton, renderDropdown, dropdownRef, closeOnTab, ...rest } = props;
+  const containerRef = useRef(null);
+  const isControlledRef = useRef(props.opened !== void 0);
+  const [uncontrolledOpened, setUncontrolledOpened] = useState(props.opened === void 0 ? false : false);
+  const computedOpened = isControlledRef.current ? !!opened : uncontrolledOpened;
+  const handleOpen = useCallback(
+    (nextOpened) => {
+      if (isControlledRef.current) {
+        setOpened && setOpened(nextOpened);
         return;
       }
-      y(t);
+      setUncontrolledOpened(nextOpened);
     },
-    [c]
+    [setOpened]
   );
-  R(() => {
-    if (!e)
+  useEffect(() => {
+    if (!computedOpened) {
       return;
-    const t = (r) => {
-      const n = r.code || r.keyCode;
-      e && (w(n, "ESCAPE") || p && w(n, "TAB")) && o(!1);
-    }, d = (r) => {
-      const n = u.current, a = l.current;
-      if (e) {
-        const i = r.target;
-        i && !(n != null && n.contains(i)) && !(a != null && a.contains(i)) && o(!1);
+    }
+    const handleKeyDown = (event) => {
+      const key = event.code || event.keyCode;
+      if (computedOpened) {
+        if (isKey(key, "ESCAPE") || closeOnTab && isKey(key, "TAB")) {
+          handleOpen(false);
+        }
+      }
+    };
+    const handleClickOutside = (event) => {
+      const button = containerRef.current;
+      const dropdown = dropdownRef.current;
+      if (computedOpened) {
+        const targetNode = event.target;
+        if (targetNode && !(button == null ? void 0 : button.contains(targetNode)) && !(dropdown == null ? void 0 : dropdown.contains(targetNode))) {
+          handleOpen(false);
+        }
       }
     };
-    return document.addEventListener("keydown", t), document.addEventListener("mousedown", d), document.addEventListener("touchstart", d), () => {
-      document.removeEventListener("keydown", t), document.removeEventListener("mousedown", d), document.removeEventListener("touchstart", d);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
     };
-  }, [e, p, l, o, u]);
-  const B = A(E.buttonDropdownExtended, v);
-  return /* @__PURE__ */ h("div", { className: B, ref: u, ...L, children: [
-    b({ opened: e, setOpened: o }),
-    k({
-      className: E.buttonDropdownExtendedBlock,
-      opened: e,
-      setOpened: o
+  }, [computedOpened, closeOnTab, dropdownRef, handleOpen, containerRef]);
+  const classNames = clsx(styles.buttonDropdownExtended, className);
+  return /* @__PURE__ */ jsxs("div", { className: classNames, ref: containerRef, ...rest, children: [
+    renderButton({ opened: computedOpened, setOpened: handleOpen }),
+    renderDropdown({
+      className: styles.buttonDropdownExtendedBlock,
+      opened: computedOpened,
+      setOpened: handleOpen
     })
   ] });
 };
-D.Dropdown = _;
-D.DropdownList = g;
+ButtonDropdownExtended.Dropdown = Dropdown;
+ButtonDropdownExtended.DropdownList = DropdownList;
 export {
-  D as ButtonDropdownExtended
+  ButtonDropdownExtended
 };
 //# sourceMappingURL=ButtonDropdownExtended.js.map

package/components/Button/ButtonDropdownExtended.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDropdownExtended.js","sources":["../../../src/components/Button/ButtonDropdownExtended.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Dropdown } from \"@sberbusiness/triplex-next/components/Dropdown/Dropdown\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { DropdownList } from \"@sberbusiness/triplex-next/components/Dropdown/desktop/DropdownList\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/ButtonDropdownExtended.module.less\";\n\n/** Свойства встроенной кнопки. */\nexport interface IButtonDropdownExtendedButtonProvideProps {\n    /** Контролируемое состояние открытости. */\n    opened: boolean;\n    /** Функция, контролирующая состояние открытости. */\n    setOpened: (opened: boolean) => void;\n}\n\n/** Свойства встроенного выпадающего блока. */\nexport interface IButtonDropdownExtendedDropdownProvideProps {\n    /** Контролируемое состояние открытости. */\n    opened: boolean;\n    /** Функция, контролирующая состояние открытости. */\n    setOpened: (opened: boolean) => void;\n    /** Пробрасываемый стилевой класс. */\n    className: string;\n}\n\n/** Свойства кнопки с выпадающим блоком. */\nexport interface IButtonDropdownExtendedProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Контролируемое состояние открытости. */\n    opened?: boolean;\n    /** Функция, контролирующая состояние открытости. */\n    setOpened?: (opened: boolean) => void;\n    /** Функция, отрисовывающая кнопку. */\n    renderButton: (props: IButtonDropdownExtendedButtonProvideProps) => React.ReactNode;\n    /** Функция, отрисовывающая выпадающий блок. */\n    renderDropdown: (props: IButtonDropdownExtendedDropdownProvideProps) => React.ReactNode;\n    /** Ссылка на выпадающий блок. */\n    dropdownRef: React.RefObject<HTMLElement>;\n    /** Закрытие выпадающего блока при нажатии клавиши Tab. */\n    closeOnTab?: boolean;\n}\n\n/**\n * Компонент \"Кнопка с выпадающим блоком\".\n * Позволяет кастомизировать кнопку открытия Dropdown и сам Dropdown.\n */\nexport interface IButtonDropdownExtendedComponent extends React.FC<IButtonDropdownExtendedProps> {\n    Dropdown: typeof Dropdown;\n    DropdownList: typeof DropdownList;\n};\n\nexport const ButtonDropdownExtended: IButtonDropdownExtendedComponent = (props) => {\n    const { className, opened, setOpened, renderButton, renderDropdown, dropdownRef, closeOnTab, ...rest } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isControlledRef = useRef<boolean>(props.opened !== undefined);\n    const [uncontrolledOpened, setUncontrolledOpened] = useState<boolean>(props.opened === undefined ? false : false);\n\n    const computedOpened = isControlledRef.current ? !!opened : uncontrolledOpened;\n\n    const handleOpen = useCallback(\n        (nextOpened: boolean) => {\n            if (isControlledRef.current) {\n                setOpened && setOpened(nextOpened);\n                return;\n            }\n            setUncontrolledOpened(nextOpened);\n        },\n        [setOpened]\n    );\n\n    useEffect(() => {\n        if (!computedOpened) {\n            return;\n        }\n\n        const handleKeyDown = (event: KeyboardEvent) => {\n            const key: string | number = event.code || event.keyCode;\n            if (computedOpened) {\n                if (isKey(key, \"ESCAPE\") || (closeOnTab && isKey(key, \"TAB\"))) {\n                    handleOpen(false);\n                }\n            }\n        };\n\n        const handleClickOutside = (event: Event) => {\n            const button = containerRef.current;\n            const dropdown = dropdownRef.current;\n\n            if (computedOpened) {\n                const targetNode = event.target as Node | null;\n                if (targetNode && !button?.contains(targetNode) && !dropdown?.contains(targetNode)) {\n                    handleOpen(false);\n                }\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        document.addEventListener(\"mousedown\", handleClickOutside);\n        document.addEventListener(\"touchstart\", handleClickOutside);\n\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n            document.removeEventListener(\"touchstart\", handleClickOutside);\n        };\n    }, [computedOpened, closeOnTab, dropdownRef, handleOpen, containerRef]);\n\n    const classNames = clsx(styles.buttonDropdownExtended, className);\n\n    return (\n        <div className={classNames} ref={containerRef} {...rest}>\n            {renderButton({ opened: computedOpened, setOpened: handleOpen })}\n            {renderDropdown({\n                className: styles.buttonDropdownExtendedBlock,\n                opened: computedOpened,\n                setOpened: handleOpen,\n            })}\n        </div>\n    );\n};\n\nButtonDropdownExtended.Dropdown = Dropdown;\nButtonDropdownExtended.DropdownList = DropdownList;\n"],"names":[],"mappings":";;;;;;;;;;;;AAkDO,MAAM,yBAA2D,CAAC,UAAU;AAC/E,QAAM,EAAE,WAAW,QAAQ,WAAW,cAAc,gBAAgB,aAAa,YAAY,GAAG,KAAA,IAAS;AAEzG,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,kBAAkB,OAAgB,MAAM,WAAW,MAAS;AAClE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,MAAM,WAAW,SAAY,QAAQ,KAAK;AAEhH,QAAM,iBAAiB,gBAAgB,UAAU,CAAC,CAAC,SAAS;AAE5D,QAAM,aAAa;AAAA,IACf,CAAC,eAAwB;AACrB,UAAI,gBAAgB,SAAS;AACzB,qBAAa,UAAU,UAAU;AACjC;AAAA,MACJ;AACA,4BAAsB,UAAU;AAAA,IACpC;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGd,YAAU,MAAM;AACZ,QAAI,CAAC,gBAAgB;AACjB;AAAA,IACJ;AAEA,UAAM,gBAAgB,CAAC,UAAyB;AAC5C,YAAM,MAAuB,MAAM,QAAQ,MAAM;AACjD,UAAI,gBAAgB;AAChB,YAAI,MAAM,KAAK,QAAQ,KAAM,cAAc,MAAM,KAAK,KAAK,GAAI;AAC3D,qBAAW,KAAK;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,qBAAqB,CAAC,UAAiB;AACzC,YAAM,SAAS,aAAa;AAC5B,YAAM,WAAW,YAAY;AAE7B,UAAI,gBAAgB;AAChB,cAAM,aAAa,MAAM;AACzB,YAAI,cAAc,EAAC,iCAAQ,SAAS,gBAAe,EAAC,qCAAU,SAAS,cAAa;AAChF,qBAAW,KAAK;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAClD,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,aAAS,iBAAiB,cAAc,kBAAkB;AAE1D,WAAO,MAAM;AACT,eAAS,oBAAoB,WAAW,aAAa;AACrD,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,eAAS,oBAAoB,cAAc,kBAAkB;AAAA,IACjE;AAAA,EACJ,GAAG,CAAC,gBAAgB,YAAY,aAAa,YAAY,YAAY,CAAC;AAEtE,QAAM,aAAa,KAAK,OAAO,wBAAwB,SAAS;AAEhE,8BACK,OAAA,EAAI,WAAW,YAAY,KAAK,cAAe,GAAG,MAC9C,UAAA;AAAA,IAAA,aAAa,EAAE,QAAQ,gBAAgB,WAAW,YAAY;AAAA,IAC9D,eAAe;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB,QAAQ;AAAA,MACR,WAAW;AAAA,IAAA,CACd;AAAA,EAAA,GACL;AAER;AAEA,uBAAuB,WAAW;AAClC,uBAAuB,eAAe;"}

package/components/Button/ButtonIcon.js

@@ -1,23 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
-import a from "react";
-import { c as m } from "../../chunks/vendor-D5cfSbgz.js";
-import { EButtonIconShape as t } from "./enums.js";
-import { IconWrapper as p } from "../IconWrapper/IconWrapper.js";
-const _ = "buttonIcon__0a3cfad0", I = "circle__ed17b5c4", f = "squircle__67cb1100", o = {
-  buttonIcon: _,
-  circle: I,
-  squircle: f
-}, b = {
-  [t.SQUIRCLE]: o.squircle,
-  [t.CIRCLE]: o.circle
-}, C = a.forwardRef(
-  ({ className: r, disabled: c, shape: e = t.SQUIRCLE, active: s, ...u }, i) => {
-    const l = m(o.buttonIcon, b[e], r);
-    return /* @__PURE__ */ n(p, { displayContents: !0, disabled: c, active: s, children: /* @__PURE__ */ n("button", { type: "button", className: l, disabled: c, ...u, ref: i }) });
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+import { EButtonIconShape } from "./enums.js";
+import { IconWrapper } from "../IconWrapper/IconWrapper.js";
+const buttonIcon = "buttonIcon__00b059c6";
+const circle = "circle__7cfe6c4a";
+const squircle = "squircle__6a1d2f88";
+const styles = {
+  buttonIcon,
+  circle,
+  squircle
+};
+const SHAPE_TO_CLASS_NAME_MAP = {
+  [EButtonIconShape.SQUIRCLE]: styles.squircle,
+  [EButtonIconShape.CIRCLE]: styles.circle
+};
+const ButtonIcon = React__default.forwardRef(
+  ({ className, disabled, shape = EButtonIconShape.SQUIRCLE, active, ...rest }, ref) => {
+    const classNames = clsx(styles.buttonIcon, SHAPE_TO_CLASS_NAME_MAP[shape], className);
+    return /* @__PURE__ */ jsx(IconWrapper, { displayContents: true, disabled, active, children: /* @__PURE__ */ jsx("button", { type: "button", className: classNames, disabled, ...rest, ref }) });
   }
 );
-C.displayName = "ButtonIcon";
+ButtonIcon.displayName = "ButtonIcon";
 export {
-  C as ButtonIcon
+  ButtonIcon
 };
 //# sourceMappingURL=ButtonIcon.js.map

package/components/Button/ButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.js","sources":["../../../src/components/Button/ButtonIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { DataAttributes } from \"@sberbusiness/triplex-next/types/CoreTypes\";\nimport { EButtonIconShape } from \"@sberbusiness/triplex-next/components/Button/enums\";\nimport { IconWrapper } from \"@sberbusiness/triplex-next/components/IconWrapper\";\nimport styles from \"./styles/ButtonIcon.module.less\";\n\nconst SHAPE_TO_CLASS_NAME_MAP: Record<EButtonIconShape, string> = {\n    [EButtonIconShape.SQUIRCLE]: styles.squircle,\n    [EButtonIconShape.CIRCLE]: styles.circle,\n};\n\n/** Свойства компонента ButtonIcon. */\nexport interface IButtonIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, DataAttributes {\n    /** Форма границы кнопки. */\n    shape?: EButtonIconShape;\n    /** Активное состояние. */\n    active?: boolean;\n}\n\n/** Кнопка-иконка. */\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, IButtonIconProps>(\n    ({ className, disabled, shape = EButtonIconShape.SQUIRCLE, active, ...rest }, ref) => {\n        const classNames = clsx(styles.buttonIcon, SHAPE_TO_CLASS_NAME_MAP[shape], className);\n\n        return (\n            <IconWrapper displayContents disabled={disabled} active={active}>\n                <button type=\"button\" className={classNames} disabled={disabled} {...rest} ref={ref} />\n            </IconWrapper>\n        );\n    },\n);\n\nButtonIcon.displayName = \"ButtonIcon\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,0BAA4D;AAAA,EAC9D,CAAC,iBAAiB,QAAQ,GAAG,OAAO;AAAA,EACpC,CAAC,iBAAiB,MAAM,GAAG,OAAO;AACtC;AAWO,MAAM,aAAaA,eAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,QAAQ,iBAAiB,UAAU,QAAQ,GAAG,KAAA,GAAQ,QAAQ;AAClF,UAAM,aAAa,KAAK,OAAO,YAAY,wBAAwB,KAAK,GAAG,SAAS;AAEpF,+BACK,aAAA,EAAY,iBAAe,MAAC,UAAoB,QAC7C,UAAA,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAW,YAAY,UAAqB,GAAG,MAAM,KAAU,GACzF;AAAA,EAER;AACJ;AAEA,WAAW,cAAc;"}

package/components/Button/enums.js

@@ -1,7 +1,24 @@
-var a = /* @__PURE__ */ ((r) => (r.DOTS_SECONDARY = "dots_secondary", r.DOTS_SECONDARY_LIGHT = "dots_secondary_light", r))(a || {}), R = /* @__PURE__ */ ((r) => (r.GENERAL = "general", r.SECONDARY = "secondary", r.SECONDARY_LIGHT = "secondary_light", r.DANGER = "danger", r.LINK = "link", r))(R || {}), _ = /* @__PURE__ */ ((r) => (r.SQUIRCLE = "squircle", r.CIRCLE = "circle", r))(_ || {});
+var EButtonDotsTheme = /* @__PURE__ */ ((EButtonDotsTheme2) => {
+  EButtonDotsTheme2["DOTS_SECONDARY"] = "dots_secondary";
+  EButtonDotsTheme2["DOTS_SECONDARY_LIGHT"] = "dots_secondary_light";
+  return EButtonDotsTheme2;
+})(EButtonDotsTheme || {});
+var EButtonTheme = /* @__PURE__ */ ((EButtonTheme2) => {
+  EButtonTheme2["GENERAL"] = "general";
+  EButtonTheme2["SECONDARY"] = "secondary";
+  EButtonTheme2["SECONDARY_LIGHT"] = "secondary_light";
+  EButtonTheme2["DANGER"] = "danger";
+  EButtonTheme2["LINK"] = "link";
+  return EButtonTheme2;
+})(EButtonTheme || {});
+var EButtonIconShape = /* @__PURE__ */ ((EButtonIconShape2) => {
+  EButtonIconShape2["SQUIRCLE"] = "squircle";
+  EButtonIconShape2["CIRCLE"] = "circle";
+  return EButtonIconShape2;
+})(EButtonIconShape || {});
 export {
-  a as EButtonDotsTheme,
-  _ as EButtonIconShape,
-  R as EButtonTheme
+  EButtonDotsTheme,
+  EButtonIconShape,
+  EButtonTheme
 };
 //# sourceMappingURL=enums.js.map

package/components/Button/enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.js","sources":["../../../src/components/Button/enums.ts"],"sourcesContent":["/** Темы кнопки dots. */\nexport enum EButtonDotsTheme {\n    DOTS_SECONDARY = \"dots_secondary\",\n    DOTS_SECONDARY_LIGHT = \"dots_secondary_light\",\n}\n\n/** Темы кнопки. */\nexport enum EButtonTheme {\n    GENERAL = \"general\",\n    SECONDARY = \"secondary\",\n    SECONDARY_LIGHT = \"secondary_light\",\n    DANGER = \"danger\",\n    LINK = \"link\",\n}\n\n/** Форма границы кнопки. */\nexport enum EButtonIconShape {\n    SQUIRCLE = \"squircle\",\n    CIRCLE = \"circle\",\n}\n"],"names":["EButtonDotsTheme","EButtonTheme","EButtonIconShape"],"mappings":"AACO,IAAK,qCAAAA,sBAAL;AACHA,oBAAA,gBAAA,IAAiB;AACjBA,oBAAA,sBAAA,IAAuB;AAFf,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAML,IAAK,iCAAAC,kBAAL;AACHA,gBAAA,SAAA,IAAU;AACVA,gBAAA,WAAA,IAAY;AACZA,gBAAA,iBAAA,IAAkB;AAClBA,gBAAA,QAAA,IAAS;AACTA,gBAAA,MAAA,IAAO;AALC,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AASL,IAAK,qCAAAC,sBAAL;AACHA,oBAAA,UAAA,IAAW;AACXA,oBAAA,QAAA,IAAS;AAFD,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;"}