@sberbusiness/triplex-next 0.44.0 → 0.46.0

package/components/Button/ButtonDropdownExtended.js

@@ -1,70 +1,86 @@
 import { jsxs } from "react/jsx-runtime";
-import { useRef, useState, useCallback, useEffect } from "react";
+import React, { useRef, useCallback, useState, 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-DqGxntec.js";
-const buttonDropdownExtended = "buttonDropdownExtended__e792f566";
-const buttonDropdownExtendedBlock = "buttonDropdownExtendedBlock__846d7a50";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+const buttonDropdownExtended = "buttonDropdownExtended__a10f7081";
+const buttonDropdownExtendedBlock = "buttonDropdownExtendedBlock__aad92e88";
 const styles = {
   buttonDropdownExtended,
   buttonDropdownExtendedBlock
 };
-const ButtonDropdownExtended = (props) => {
-  const { className, opened, setOpened, renderButton, renderDropdown, dropdownRef, closeOnTab, ...rest } = props;
-  const containerRef = useRef(null);
-  const [isControlled] = useState(() => opened !== void 0);
-  const [uncontrolledOpened, setUncontrolledOpened] = useState(false);
-  const computedOpened = isControlled ? !!opened : uncontrolledOpened;
-  const handleOpenedChange = useCallback(
-    (nextOpened) => {
-      if (isControlled) {
-        setOpened == null ? void 0 : setOpened(nextOpened);
+const ButtonDropdownExtended = Object.assign(
+  React.forwardRef(function ButtonDropdownExtended2(props, ref) {
+    const { className, opened, setOpened, renderButton, renderDropdown, dropdownRef, closeOnTab, ...rest } = props;
+    const containerRef = useRef(null);
+    const setContainerRef = useCallback(
+      (instance) => {
+        containerRef.current = instance;
+        if (typeof ref === "function") {
+          ref(instance);
+        } else if (ref) {
+          ref.current = instance;
+        }
+      },
+      [ref]
+    );
+    const [isControlled] = useState(() => opened !== void 0);
+    const [uncontrolledOpened, setUncontrolledOpened] = useState(false);
+    const computedOpened = isControlled ? !!opened : uncontrolledOpened;
+    const handleOpenedChange = useCallback(
+      (nextOpened) => {
+        if (isControlled) {
+          setOpened == null ? void 0 : setOpened(nextOpened);
+          return;
+        }
+        setUncontrolledOpened(nextOpened);
+      },
+      [isControlled, setOpened]
+    );
+    useEffect(() => {
+      if (!computedOpened) {
         return;
       }
-      setUncontrolledOpened(nextOpened);
-    },
-    [isControlled, setOpened]
-  );
-  useEffect(() => {
-    if (!computedOpened) {
-      return;
-    }
-    const handleKeyDown = (event) => {
-      const key = event.code || event.keyCode;
-      if (isKey(key, "ESCAPE") || closeOnTab && isKey(key, "TAB")) {
-        handleOpenedChange(false);
-      }
-    };
-    const handleClickOutside = (event) => {
-      const button = containerRef.current;
-      const dropdown = dropdownRef.current;
-      const targetNode = event.target;
-      if (targetNode && !(button == null ? void 0 : button.contains(targetNode)) && !(dropdown == null ? void 0 : dropdown.contains(targetNode))) {
-        handleOpenedChange(false);
-      }
-    };
-    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);
-    };
-  }, [computedOpened, closeOnTab, dropdownRef, handleOpenedChange]);
-  const classNames = clsx(styles.buttonDropdownExtended, className);
-  return /* @__PURE__ */ jsxs("div", { className: classNames, ref: containerRef, ...rest, children: [
-    renderButton({ opened: computedOpened, setOpened: handleOpenedChange }),
-    renderDropdown({
-      className: styles.buttonDropdownExtendedBlock,
-      opened: computedOpened,
-      setOpened: handleOpenedChange
-    })
-  ] });
-};
-ButtonDropdownExtended.Dropdown = Dropdown;
-ButtonDropdownExtended.DropdownList = DropdownList;
+      const handleKeyDown = (event) => {
+        const key = event.code || event.keyCode;
+        if (isKey(key, "ESCAPE") || closeOnTab && isKey(key, "TAB")) {
+          handleOpenedChange(false);
+        }
+      };
+      const handleClickOutside = (event) => {
+        const button = containerRef.current;
+        const dropdown = dropdownRef.current;
+        const targetNode = event.target;
+        if (targetNode && !(button == null ? void 0 : button.contains(targetNode)) && !(dropdown == null ? void 0 : dropdown.contains(targetNode))) {
+          handleOpenedChange(false);
+        }
+      };
+      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);
+      };
+    }, [computedOpened, closeOnTab, dropdownRef, handleOpenedChange]);
+    const classNames = clsx(styles.buttonDropdownExtended, className);
+    return /* @__PURE__ */ jsxs("div", { className: classNames, ref: setContainerRef, ...rest, children: [
+      renderButton({ opened: computedOpened, setOpened: handleOpenedChange }),
+      renderDropdown({
+        className: styles.buttonDropdownExtendedBlock,
+        opened: computedOpened,
+        setOpened: handleOpenedChange
+      })
+    ] });
+  }),
+  {
+    Dropdown,
+    DropdownList
+  }
+);
+ButtonDropdownExtended.displayName = "ButtonDropdownExtended";
 export {
   ButtonDropdownExtended
 };

package/components/Button/ButtonDropdownExtended.js.map

@@ -1 +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/** Тип компонента \"Кнопка с выпадающим блоком\" со статическими субкомпонентами. */\nexport interface IButtonDropdownExtendedComponent extends React.FC<IButtonDropdownExtendedProps> {\n    /** Выпадающий блок. */\n    Dropdown: typeof Dropdown;\n    /** Список опций для выпадающего блока. */\n    DropdownList: typeof DropdownList;\n}\n\n/**\n * Компонент \"Кнопка с выпадающим блоком\".\n * Позволяет кастомизировать кнопку открытия Dropdown и сам Dropdown через render-функции.\n * Пока блок открыт, слушает документ и закрывает его по Escape, по Tab (при closeOnTab)\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    // Режим управления фиксируется на монтировании и дальше не меняется.\n    const [isControlled] = useState<boolean>(() => opened !== undefined);\n    const [uncontrolledOpened, setUncontrolledOpened] = useState<boolean>(false);\n\n    const computedOpened = isControlled ? !!opened : uncontrolledOpened;\n\n    const handleOpenedChange = useCallback(\n        (nextOpened: boolean) => {\n            if (isControlled) {\n                setOpened?.(nextOpened);\n                return;\n            }\n            setUncontrolledOpened(nextOpened);\n        },\n        [isControlled, 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\n            if (isKey(key, \"ESCAPE\") || (closeOnTab && isKey(key, \"TAB\"))) {\n                handleOpenedChange(false);\n            }\n        };\n\n        const handleClickOutside = (event: Event) => {\n            const button = containerRef.current;\n            const dropdown = dropdownRef.current;\n            const targetNode = event.target as Node | null;\n\n            if (targetNode && !button?.contains(targetNode) && !dropdown?.contains(targetNode)) {\n                handleOpenedChange(false);\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, handleOpenedChange]);\n\n    const classNames = clsx(styles.buttonDropdownExtended, className);\n\n    return (\n        <div className={classNames} ref={containerRef} {...rest}>\n            {renderButton({ opened: computedOpened, setOpened: handleOpenedChange })}\n            {renderDropdown({\n                className: styles.buttonDropdownExtendedBlock,\n                opened: computedOpened,\n                setOpened: handleOpenedChange,\n            })}\n        </div>\n    );\n};\n\nButtonDropdownExtended.Dropdown = Dropdown;\nButtonDropdownExtended.DropdownList = DropdownList;\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,yBAA2D,CAAC,UAAU;AAC/E,QAAM,EAAE,WAAW,QAAQ,WAAW,cAAc,gBAAgB,aAAa,YAAY,GAAG,KAAA,IAAS;AAEzG,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,CAAC,YAAY,IAAI,SAAkB,MAAM,WAAW,MAAS;AACnE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAE3E,QAAM,iBAAiB,eAAe,CAAC,CAAC,SAAS;AAEjD,QAAM,qBAAqB;AAAA,IACvB,CAAC,eAAwB;AACrB,UAAI,cAAc;AACd,+CAAY;AACZ;AAAA,MACJ;AACA,4BAAsB,UAAU;AAAA,IACpC;AAAA,IACA,CAAC,cAAc,SAAS;AAAA,EAAA;AAG5B,YAAU,MAAM;AACZ,QAAI,CAAC,gBAAgB;AACjB;AAAA,IACJ;AAEA,UAAM,gBAAgB,CAAC,UAAyB;AAC5C,YAAM,MAAuB,MAAM,QAAQ,MAAM;AAEjD,UAAI,MAAM,KAAK,QAAQ,KAAM,cAAc,MAAM,KAAK,KAAK,GAAI;AAC3D,2BAAmB,KAAK;AAAA,MAC5B;AAAA,IACJ;AAEA,UAAM,qBAAqB,CAAC,UAAiB;AACzC,YAAM,SAAS,aAAa;AAC5B,YAAM,WAAW,YAAY;AAC7B,YAAM,aAAa,MAAM;AAEzB,UAAI,cAAc,EAAC,iCAAQ,SAAS,gBAAe,EAAC,qCAAU,SAAS,cAAa;AAChF,2BAAmB,KAAK;AAAA,MAC5B;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,kBAAkB,CAAC;AAEhE,QAAM,aAAa,KAAK,OAAO,wBAAwB,SAAS;AAEhE,8BACK,OAAA,EAAI,WAAW,YAAY,KAAK,cAAe,GAAG,MAC9C,UAAA;AAAA,IAAA,aAAa,EAAE,QAAQ,gBAAgB,WAAW,oBAAoB;AAAA,IACtE,eAAe;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB,QAAQ;AAAA,MACR,WAAW;AAAA,IAAA,CACd;AAAA,EAAA,GACL;AAER;AAEA,uBAAuB,WAAW;AAClC,uBAAuB,eAAe;"}
+{"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 *\n * Явная аннотация снимает проверку лишних свойств у Object.assign, поэтому при добавлении\n * или удалении статики этот интерфейс нужно править синхронно: иначе новая статика окажется\n * в рантайме, но не попадёт в публичный тип, и TypeScript промолчит.\n */\nexport interface IButtonDropdownExtendedComponent extends React.ForwardRefExoticComponent<\n    IButtonDropdownExtendedProps & React.RefAttributes<HTMLDivElement>\n> {\n    /** Выпадающий блок. */\n    Dropdown: typeof Dropdown;\n    /** Список опций для выпадающего блока. */\n    DropdownList: typeof DropdownList;\n}\n\n/**\n * Компонент \"Кнопка с выпадающим блоком\".\n * Позволяет кастомизировать кнопку открытия Dropdown и сам Dropdown через render-функции.\n * Пока блок открыт, слушает документ и закрывает его по Escape, по Tab (при closeOnTab)\n * и по клику вне кнопки и вне выпадающего блока.\n */\nexport const ButtonDropdownExtended: IButtonDropdownExtendedComponent = Object.assign(\n    React.forwardRef<HTMLDivElement, IButtonDropdownExtendedProps>(function ButtonDropdownExtended(props, ref) {\n        const { className, opened, setOpened, renderButton, renderDropdown, dropdownRef, closeOnTab, ...rest } = props;\n\n        // Корневой элемент нужен самому компоненту (клик снаружи) и потребителю через forwarded ref.\n        const containerRef = useRef<HTMLDivElement | null>(null);\n\n        const setContainerRef = useCallback(\n            (instance: HTMLDivElement | null) => {\n                containerRef.current = instance;\n\n                if (typeof ref === \"function\") {\n                    ref(instance);\n                } else if (ref) {\n                    ref.current = instance;\n                }\n            },\n            [ref],\n        );\n\n        // Режим управления фиксируется на монтировании и дальше не меняется.\n        const [isControlled] = useState<boolean>(() => opened !== undefined);\n        const [uncontrolledOpened, setUncontrolledOpened] = useState<boolean>(false);\n\n        const computedOpened = isControlled ? !!opened : uncontrolledOpened;\n\n        const handleOpenedChange = useCallback(\n            (nextOpened: boolean) => {\n                if (isControlled) {\n                    setOpened?.(nextOpened);\n                    return;\n                }\n                setUncontrolledOpened(nextOpened);\n            },\n            [isControlled, 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\n                if (isKey(key, \"ESCAPE\") || (closeOnTab && isKey(key, \"TAB\"))) {\n                    handleOpenedChange(false);\n                }\n            };\n\n            const handleClickOutside = (event: Event) => {\n                const button = containerRef.current;\n                const dropdown = dropdownRef.current;\n                const targetNode = event.target as Node | null;\n\n                if (targetNode && !button?.contains(targetNode) && !dropdown?.contains(targetNode)) {\n                    handleOpenedChange(false);\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, handleOpenedChange]);\n\n        const classNames = clsx(styles.buttonDropdownExtended, className);\n\n        return (\n            <div className={classNames} ref={setContainerRef} {...rest}>\n                {renderButton({ opened: computedOpened, setOpened: handleOpenedChange })}\n                {renderDropdown({\n                    className: styles.buttonDropdownExtendedBlock,\n                    opened: computedOpened,\n                    setOpened: handleOpenedChange,\n                })}\n            </div>\n        );\n    }),\n    {\n        Dropdown,\n        DropdownList,\n    },\n);\n\nButtonDropdownExtended.displayName = \"ButtonDropdownExtended\";\n"],"names":["ButtonDropdownExtended"],"mappings":";;;;;;;;;;;;AA+DO,MAAM,yBAA2D,OAAO;AAAA,EAC3E,MAAM,WAAyD,SAASA,wBAAuB,OAAO,KAAK;AACvG,UAAM,EAAE,WAAW,QAAQ,WAAW,cAAc,gBAAgB,aAAa,YAAY,GAAG,KAAA,IAAS;AAGzG,UAAM,eAAe,OAA8B,IAAI;AAEvD,UAAM,kBAAkB;AAAA,MACpB,CAAC,aAAoC;AACjC,qBAAa,UAAU;AAEvB,YAAI,OAAO,QAAQ,YAAY;AAC3B,cAAI,QAAQ;AAAA,QAChB,WAAW,KAAK;AACZ,cAAI,UAAU;AAAA,QAClB;AAAA,MACJ;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAIR,UAAM,CAAC,YAAY,IAAI,SAAkB,MAAM,WAAW,MAAS;AACnE,UAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAE3E,UAAM,iBAAiB,eAAe,CAAC,CAAC,SAAS;AAEjD,UAAM,qBAAqB;AAAA,MACvB,CAAC,eAAwB;AACrB,YAAI,cAAc;AACd,iDAAY;AACZ;AAAA,QACJ;AACA,8BAAsB,UAAU;AAAA,MACpC;AAAA,MACA,CAAC,cAAc,SAAS;AAAA,IAAA;AAG5B,cAAU,MAAM;AACZ,UAAI,CAAC,gBAAgB;AACjB;AAAA,MACJ;AAEA,YAAM,gBAAgB,CAAC,UAAyB;AAC5C,cAAM,MAAuB,MAAM,QAAQ,MAAM;AAEjD,YAAI,MAAM,KAAK,QAAQ,KAAM,cAAc,MAAM,KAAK,KAAK,GAAI;AAC3D,6BAAmB,KAAK;AAAA,QAC5B;AAAA,MACJ;AAEA,YAAM,qBAAqB,CAAC,UAAiB;AACzC,cAAM,SAAS,aAAa;AAC5B,cAAM,WAAW,YAAY;AAC7B,cAAM,aAAa,MAAM;AAEzB,YAAI,cAAc,EAAC,iCAAQ,SAAS,gBAAe,EAAC,qCAAU,SAAS,cAAa;AAChF,6BAAmB,KAAK;AAAA,QAC5B;AAAA,MACJ;AAEA,eAAS,iBAAiB,WAAW,aAAa;AAClD,eAAS,iBAAiB,aAAa,kBAAkB;AACzD,eAAS,iBAAiB,cAAc,kBAAkB;AAE1D,aAAO,MAAM;AACT,iBAAS,oBAAoB,WAAW,aAAa;AACrD,iBAAS,oBAAoB,aAAa,kBAAkB;AAC5D,iBAAS,oBAAoB,cAAc,kBAAkB;AAAA,MACjE;AAAA,IACJ,GAAG,CAAC,gBAAgB,YAAY,aAAa,kBAAkB,CAAC;AAEhE,UAAM,aAAa,KAAK,OAAO,wBAAwB,SAAS;AAEhE,gCACK,OAAA,EAAI,WAAW,YAAY,KAAK,iBAAkB,GAAG,MACjD,UAAA;AAAA,MAAA,aAAa,EAAE,QAAQ,gBAAgB,WAAW,oBAAoB;AAAA,MACtE,eAAe;AAAA,QACZ,WAAW,OAAO;AAAA,QAClB,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA,CACd;AAAA,IAAA,GACL;AAAA,EAER,CAAC;AAAA,EACD;AAAA,IACI;AAAA,IACA;AAAA,EAAA;AAER;AAEA,uBAAuB,cAAc;"}

package/components/Button/ButtonIcon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
 import { EButtonIconShape } from "./enums.js";
 import { IconWrapper } from "../IconWrapper/IconWrapper.js";
-const buttonIcon = "buttonIcon__23bd587a";
-const circle = "circle__a569d682";
-const squircle = "squircle__30d45b5b";
+const buttonIcon = "buttonIcon__5138dac5";
+const circle = "circle__a69394af";
+const squircle = "squircle__452c92fe";
 const styles = {
   buttonIcon,
   circle,

package/components/Calendar/Calendar.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { u as uniqueId, c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { u as uniqueId, c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
 import moment from "moment";
 import { globalLimitRange, dateFormatYYYYMMDD } from "../../consts/DateConst.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
@@ -14,9 +14,9 @@ import { CalendarView } from "./components/CalendarView.js";
 import { CalendarFooter } from "./components/CalendarFooter.js";
 import { CalendarFooterButton } from "./components/CalendarFooterButton.js";
 import { parsePickedDate, formatDate } from "./utils.js";
-const calendar = "calendar__a36f49d3";
-const extraBottom = "extraBottom__4bc109d8";
-const adaptive = "adaptive__83d3983c";
+const calendar = "calendar__da5203cd";
+const extraBottom = "extraBottom__9a3237ba";
+const adaptive = "adaptive__b1ee1ae5";
 const styles = {
   calendar,
   extraBottom,
@@ -179,7 +179,7 @@ class Calendar extends React.PureComponent {
       this.props.adaptiveMode ? styles.adaptive : (viewMode !== ECalendarViewMode.DAYS || todayButtonProps) && styles.extraBottom
     );
     const pickedDate = parsePickedDate(this.props.pickedDate, format);
-    return /* @__PURE__ */ jsx("div", { className: classNames, "data-tx": "0.44.0", children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: classNames, "data-tx": "0.46.0", children: /* @__PURE__ */ jsxs(
       CalendarContext.Provider,
       {
         value: {

package/components/Calendar/components/CalendarControls.js

@@ -9,7 +9,7 @@ import { EButtonIconShape, EButtonTheme } from "../../Button/enums.js";
 import { ECalendarViewMode } from "../enums.js";
 import { globalLimitRange } from "../../../consts/DateConst.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
-const calendarControls = "calendarControls__0225ae5d";
+const calendarControls = "calendarControls__c9c3eefb";
 const styles = {
   calendarControls
 };

package/components/Calendar/components/CalendarFooter.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
-const calendarFooter = "calendarFooter__df6266fa";
+import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
+const calendarFooter = "calendarFooter__ac787502";
 const styles = {
   calendarFooter
 };

package/components/Calendar/components/CalendarViewDays.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useCallback, useState, useEffect } from "react";
 import moment from "moment";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
 import { isDateOutOfRange, isDayDisabled, getFirstEnabledDate, getNavigationShift, shiftDate } from "../utils.js";
 import { WEEKDAYS_SET, WEEKS_SET } from "../../../consts/DateConst.js";
 import { CalendarViewContext } from "../CalendarViewContext.js";
-import { s as styles, C as CalendarViewItem } from "../../../chunks/CalendarViewItem-CGkC16Qb.js";
+import { s as styles, C as CalendarViewItem } from "../../../chunks/CalendarViewItem-DwfoFksk.js";
 import { ECalendarDateMarkType, ECalendarViewMode } from "../enums.js";
 import { CalendarContext } from "../CalendarContext.js";
 const NAVIGATION_STEPS = {

package/components/Calendar/components/CalendarViewItem.js

@@ -1,10 +1,10 @@
 import "react/jsx-runtime";
 import "react";
-import "../../../chunks/vendor-DqGxntec.js";
+import "../../../chunks/vendor-BxhAzfnS.js";
 import "../enums.js";
 import "../CalendarViewContext.js";
 import "../../../utils/keyboard.js";
-import { C } from "../../../chunks/CalendarViewItem-CGkC16Qb.js";
+import { C } from "../../../chunks/CalendarViewItem-DwfoFksk.js";
 export {
   C as CalendarViewItem
 };

package/components/Calendar/components/CalendarViewMonths.js

@@ -4,7 +4,7 @@ import moment from "moment";
 import { CalendarContext } from "../CalendarContext.js";
 import { CalendarViewContext } from "../CalendarViewContext.js";
 import { isDateOutOfRange, getFirstEnabledDate, VIEW_GRID_ROWS, VIEW_GRID_COLUMNS, getNavigationShift, shiftDate, getShiftedDateInRange } from "../utils.js";
-import { s as styles, C as CalendarViewItem } from "../../../chunks/CalendarViewItem-CGkC16Qb.js";
+import { s as styles, C as CalendarViewItem } from "../../../chunks/CalendarViewItem-DwfoFksk.js";
 import { ECalendarPickType, ECalendarViewMode } from "../enums.js";
 const NAVIGATION_STEPS = {
   horizontal: { amount: 1, unit: "month" },

package/components/Calendar/components/CalendarViewYears.js

@@ -3,7 +3,7 @@ import { useContext, useCallback, useState, useEffect } from "react";
 import { CalendarContext } from "../CalendarContext.js";
 import { CalendarViewContext } from "../CalendarViewContext.js";
 import { isDateOutOfRange, getFirstEnabledDate, VIEW_GRID_ROWS, VIEW_GRID_COLUMNS, getNavigationShift, shiftDate, getShiftedDateInRange } from "../utils.js";
-import { s as styles, C as CalendarViewItem } from "../../../chunks/CalendarViewItem-CGkC16Qb.js";
+import { s as styles, C as CalendarViewItem } from "../../../chunks/CalendarViewItem-DwfoFksk.js";
 import { ECalendarViewMode } from "../enums.js";
 const YEARS_BEFORE_VIEW_DATE = 5;
 const YEARS_AFTER_VIEW_DATE = 6;

package/components/Card/CardAction.js

@@ -9,11 +9,11 @@ import { ECardRoundingSize, ECardTheme } from "./enums.js";
 import { EFocusSource } from "../../enums/EFocusSource.js";
 import { mapCardRoundingSizeToCssClass, mapCardThemeToCssClass } from "./utils.js";
 import { isKey } from "../../utils/keyboard.js";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-import { c as cardStyles } from "../../chunks/Card.module-myb7EMDY.js";
-const action = "action__47d9e166";
-const selected = "selected__e973a325";
-const focusVisible = "focusVisible__6ae42e31";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as cardStyles } from "../../chunks/Card.module-JFqrD4KU.js";
+const action = "action__c06f3784";
+const selected = "selected__13786eba";
+const focusVisible = "focusVisible__8f718bbf";
 const actionStyles = {
   action,
   selected,
@@ -27,20 +27,24 @@ class CardAction extends React.Component {
       isControlled: this.props.selected !== void 0,
       isSelected: !!this.props.selected
     });
+    /** Ссылка на корневой элемент карточки. */
     __publicField(this, "ref", React.createRef());
+    /** Обработчик клика по карточке. Переключает состояние выбора. */
     __publicField(this, "handleClick", (event) => {
       const { onClick } = this.props;
       onClick == null ? void 0 : onClick(event);
       this.handleToggle();
     });
+    /** Обработчик нажатия мышью. Запоминает источник фокуса, чтобы не показывать обводку фокуса. */
     __publicField(this, "handleMouseDown", (event) => {
       const { onMouseDown } = this.props;
       const { focusSource } = this.state;
       onMouseDown == null ? void 0 : onMouseDown(event);
-      if (!focusSource) {
+      if (focusSource === EFocusSource.NONE) {
         this.setState({ focusSource: EFocusSource.MOUSE });
       }
     });
+    /** Обработчик нажатия клавиши. Space и Enter переключают состояние выбора, Space гасит прокрутку страницы. */
     __publicField(this, "handleKeyDown", (event) => {
       const { onKeyDown } = this.props;
       onKeyDown == null ? void 0 : onKeyDown(event);
@@ -51,15 +55,17 @@ class CardAction extends React.Component {
         this.handleToggle();
       }
     });
+    /** Обработчик получения фокуса. Фокус на самой карточке без предшествующего клика считается клавиатурным. */
     __publicField(this, "handleFocus", (event) => {
       const { onFocus } = this.props;
       const { focusSource } = this.state;
       const { current } = this.ref;
       onFocus == null ? void 0 : onFocus(event);
-      if (!focusSource && current === event.target) {
+      if (focusSource === EFocusSource.NONE && current === event.target) {
         this.setState({ focusSource: EFocusSource.KEYBOARD });
       }
     });
+    /** Обработчик потери фокуса. Сбрасывает источник фокуса, когда карточка перестала быть активным элементом. */
     __publicField(this, "handleBlur", (event) => {
       const { onBlur } = this.props;
       const { current } = this.ref;
@@ -68,15 +74,19 @@ class CardAction extends React.Component {
         this.setState({ focusSource: EFocusSource.NONE });
       }
     });
+    /**
+     * Переключает состояние выбора. В контролируемом режиме только вызывает toggle со следующим значением,
+     * в неконтролируемом — меняет внутреннее состояние и вызывает onToggle.
+     */
     __publicField(this, "handleToggle", () => {
       const { toggle, selected: selected2, onToggle } = this.props;
-      const { isControlled, isSelected } = this.state;
+      const { isControlled } = this.state;
       if (isControlled) {
         toggle == null ? void 0 : toggle(!selected2);
       } else {
         this.setState(
           (prevState) => ({ isSelected: !prevState.isSelected }),
-          () => onToggle == null ? void 0 : onToggle(!isSelected)
+          () => onToggle == null ? void 0 : onToggle(this.state.isSelected)
         );
       }
     });
@@ -91,12 +101,14 @@ class CardAction extends React.Component {
     const {
       children,
       className,
+      // Обработчики вызываются из собственных handle*-методов, поэтому не попадают в attributes напрямую.
       onClick,
       onMouseDown,
       onKeyDown,
       onFocus,
       onBlur,
       roundingSize = ECardRoundingSize.MD,
+      // onToggle и toggle не являются DOM-атрибутами и исключаются из attributes.
       onToggle,
       selected: selected2,
       toggle,
@@ -128,14 +140,16 @@ class CardAction extends React.Component {
         role: "button",
         ...attributes,
         ref: this.ref,
-        "data-tx": "0.44.0",
+        "data-tx": "0.46.0",
         children
       }
     );
   }
 }
 __publicField(CardAction, "displayName", "CardAction");
+/** Контент карточки. */
 __publicField(CardAction, "Content", CardContent);
+/** Медийный элемент карточки. */
 __publicField(CardAction, "Media", CardMedia);
 export {
   CardAction

package/components/Card/CardAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardAction.js","sources":["../../../src/components/Card/CardAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { ICardActionProps } from \"@sberbusiness/triplex-next/components/Card/types\";\nimport { CardContent } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/CardContent\";\nimport { CardMedia } from \"@sberbusiness/triplex-next/components/Card/components/CardMedia\";\nimport { ECardRoundingSize, ECardTheme } from \"@sberbusiness/triplex-next/components/Card/enums\";\nimport { EFocusSource } from \"@sberbusiness/triplex-next/enums/EFocusSource\";\nimport {\n    mapCardRoundingSizeToCssClass,\n    mapCardThemeToCssClass,\n} from \"@sberbusiness/triplex-next/components/Card/utils\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport clsx from \"clsx\";\nimport actionStyles from \"./styles/Action.module.less\";\nimport cardStyles from \"./styles/Card.module.less\";\n\n/** Состояния интерактивной карточки. */\ninterface ICardActionState {\n    /** Выбрана или нет. */\n    isSelected: boolean;\n    /** Контролируемая или нет. */\n    isControlled: boolean;\n    /** Источник фокуса. */\n    focusSource: EFocusSource;\n}\n\n/** Компонент \"Интерактивная карточка\". */\nexport class CardAction extends React.Component<ICardActionProps, ICardActionState> {\n    public static displayName = \"CardAction\";\n\n    public static Content = CardContent;\n    public static Media = CardMedia;\n\n    public state = {\n        focusSource: EFocusSource.NONE,\n        isControlled: this.props.selected !== undefined,\n        isSelected: !!this.props.selected,\n    };\n\n    public componentDidUpdate(prevProps: Readonly<ICardActionProps>): void {\n        const { selected, onToggle } = this.props;\n\n        if (selected !== prevProps.selected) {\n            onToggle?.(!!selected);\n        }\n    }\n\n    private ref = React.createRef<HTMLDivElement>();\n\n    public render(): JSX.Element {\n        const {\n            children,\n            className,\n            onClick,\n            onMouseDown,\n            onKeyDown,\n            onFocus,\n            onBlur,\n            roundingSize = ECardRoundingSize.MD,\n            onToggle,\n            selected,\n            toggle,\n            theme = ECardTheme.GENERAL,\n            ...attributes\n        } = this.props;\n        const { isControlled, isSelected, focusSource } = this.state;\n        const classNames = clsx(\n            cardStyles.card,\n            actionStyles.action,\n            mapCardThemeToCssClass[theme],\n            mapCardRoundingSizeToCssClass[roundingSize],\n            {\n                [actionStyles.focusVisible]: focusSource === EFocusSource.KEYBOARD,\n                [actionStyles.selected]: isControlled ? !!selected : isSelected,\n            },\n            className,\n        );\n\n        return (\n            <div\n                className={classNames}\n                tabIndex={0}\n                onClick={this.handleClick}\n                onMouseDown={this.handleMouseDown}\n                onKeyDown={this.handleKeyDown}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                role=\"button\"\n                {...attributes}\n                ref={this.ref}\n                data-tx={process.env.npm_package_version}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    public handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const { onClick } = this.props;\n\n        onClick?.(event);\n        this.handleToggle();\n    };\n\n    public handleMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const { onMouseDown } = this.props;\n        const { focusSource } = this.state;\n\n        onMouseDown?.(event);\n        if (!focusSource) {\n            this.setState({ focusSource: EFocusSource.MOUSE });\n        }\n    };\n\n    public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n        const { onKeyDown } = this.props;\n\n        onKeyDown?.(event);\n        if (isKey(event.keyCode, \"SPACE\")) {\n            event.preventDefault();\n            this.handleToggle();\n        } else if (isKey(event.keyCode, \"ENTER\")) {\n            this.handleToggle();\n        }\n    };\n\n    public handleFocus = (event: React.FocusEvent<HTMLDivElement>): void => {\n        const { onFocus } = this.props;\n        const { focusSource } = this.state;\n        const { current } = this.ref;\n\n        onFocus?.(event);\n        if (!focusSource && current === event.target) {\n            this.setState({ focusSource: EFocusSource.KEYBOARD });\n        }\n    };\n\n    public handleBlur = (event: React.FocusEvent<HTMLDivElement>): void => {\n        const { onBlur } = this.props;\n        const { current } = this.ref;\n\n        onBlur?.(event);\n        if (current !== document.activeElement && current === event.target) {\n            this.setState({ focusSource: EFocusSource.NONE });\n        }\n    };\n\n    public handleToggle = (): void => {\n        const { toggle, selected, onToggle } = this.props;\n        const { isControlled, isSelected } = this.state;\n\n        if (isControlled) {\n            toggle?.(!selected);\n        } else {\n            this.setState(\n                (prevState) => ({ isSelected: !prevState.isSelected }),\n                () => onToggle?.(!isSelected),\n            );\n        }\n    };\n}\n"],"names":["selected"],"mappings":"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"}
+{"version":3,"file":"CardAction.js","sources":["../../../src/components/Card/CardAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { ICardActionProps } from \"@sberbusiness/triplex-next/components/Card/types\";\nimport { CardContent } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/CardContent\";\nimport { CardMedia } from \"@sberbusiness/triplex-next/components/Card/components/CardMedia\";\nimport { ECardRoundingSize, ECardTheme } from \"@sberbusiness/triplex-next/components/Card/enums\";\nimport { EFocusSource } from \"@sberbusiness/triplex-next/enums/EFocusSource\";\nimport {\n    mapCardRoundingSizeToCssClass,\n    mapCardThemeToCssClass,\n} from \"@sberbusiness/triplex-next/components/Card/utils\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport clsx from \"clsx\";\nimport actionStyles from \"./styles/Action.module.less\";\nimport cardStyles from \"./styles/Card.module.less\";\n\n/** Состояние интерактивной карточки. */\ninterface ICardActionState {\n    /** Выбрана карточка или нет. Используется только в неконтролируемом режиме. */\n    isSelected: boolean;\n    /** Контролируется ли состояние выбора извне. Определяется один раз при монтировании по наличию prop selected. */\n    isControlled: boolean;\n    /** Источник фокуса. Обводка фокуса показывается только для EFocusSource.KEYBOARD. */\n    focusSource: EFocusSource;\n}\n\n/**\n * Компонент \"Интерактивная карточка\".\n * Работает в двух режимах: неконтролируемом — состояние выбора хранится внутри компонента, и\n * контролируемом (передан prop selected) — состояние задаётся снаружи, а компонент сообщает о\n * запросе на его смену через prop toggle.\n */\nexport class CardAction extends React.Component<ICardActionProps, ICardActionState> {\n    public static displayName = \"CardAction\";\n\n    /** Контент карточки. */\n    public static Content = CardContent;\n    /** Медийный элемент карточки. */\n    public static Media = CardMedia;\n\n    public state = {\n        focusSource: EFocusSource.NONE,\n        isControlled: this.props.selected !== undefined,\n        isSelected: !!this.props.selected,\n    };\n\n    /** Ссылка на корневой элемент карточки. */\n    private ref = React.createRef<HTMLDivElement>();\n\n    public componentDidUpdate(prevProps: Readonly<ICardActionProps>): void {\n        const { selected, onToggle } = this.props;\n\n        if (selected !== prevProps.selected) {\n            onToggle?.(!!selected);\n        }\n    }\n\n    public render(): JSX.Element {\n        const {\n            children,\n            className,\n            // Обработчики вызываются из собственных handle*-методов, поэтому не попадают в attributes напрямую.\n            onClick,\n            onMouseDown,\n            onKeyDown,\n            onFocus,\n            onBlur,\n            roundingSize = ECardRoundingSize.MD,\n            // onToggle и toggle не являются DOM-атрибутами и исключаются из attributes.\n            onToggle,\n            selected,\n            toggle,\n            theme = ECardTheme.GENERAL,\n            ...attributes\n        } = this.props;\n        const { isControlled, isSelected, focusSource } = this.state;\n        const classNames = clsx(\n            cardStyles.card,\n            actionStyles.action,\n            mapCardThemeToCssClass[theme],\n            mapCardRoundingSizeToCssClass[roundingSize],\n            {\n                [actionStyles.focusVisible]: focusSource === EFocusSource.KEYBOARD,\n                [actionStyles.selected]: isControlled ? !!selected : isSelected,\n            },\n            className,\n        );\n\n        return (\n            <div\n                className={classNames}\n                tabIndex={0}\n                onClick={this.handleClick}\n                onMouseDown={this.handleMouseDown}\n                onKeyDown={this.handleKeyDown}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                role=\"button\"\n                {...attributes}\n                ref={this.ref}\n                data-tx={process.env.npm_package_version}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    /** Обработчик клика по карточке. Переключает состояние выбора. */\n    public handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const { onClick } = this.props;\n\n        onClick?.(event);\n        this.handleToggle();\n    };\n\n    /** Обработчик нажатия мышью. Запоминает источник фокуса, чтобы не показывать обводку фокуса. */\n    public handleMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {\n        const { onMouseDown } = this.props;\n        const { focusSource } = this.state;\n\n        onMouseDown?.(event);\n        if (focusSource === EFocusSource.NONE) {\n            this.setState({ focusSource: EFocusSource.MOUSE });\n        }\n    };\n\n    /** Обработчик нажатия клавиши. Space и Enter переключают состояние выбора, Space гасит прокрутку страницы. */\n    public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n        const { onKeyDown } = this.props;\n\n        onKeyDown?.(event);\n        if (isKey(event.keyCode, \"SPACE\")) {\n            event.preventDefault();\n            this.handleToggle();\n        } else if (isKey(event.keyCode, \"ENTER\")) {\n            this.handleToggle();\n        }\n    };\n\n    /** Обработчик получения фокуса. Фокус на самой карточке без предшествующего клика считается клавиатурным. */\n    public handleFocus = (event: React.FocusEvent<HTMLDivElement>): void => {\n        const { onFocus } = this.props;\n        const { focusSource } = this.state;\n        const { current } = this.ref;\n\n        onFocus?.(event);\n        if (focusSource === EFocusSource.NONE && current === event.target) {\n            this.setState({ focusSource: EFocusSource.KEYBOARD });\n        }\n    };\n\n    /** Обработчик потери фокуса. Сбрасывает источник фокуса, когда карточка перестала быть активным элементом. */\n    public handleBlur = (event: React.FocusEvent<HTMLDivElement>): void => {\n        const { onBlur } = this.props;\n        const { current } = this.ref;\n\n        onBlur?.(event);\n        if (current !== document.activeElement && current === event.target) {\n            this.setState({ focusSource: EFocusSource.NONE });\n        }\n    };\n\n    /**\n     * Переключает состояние выбора. В контролируемом режиме только вызывает toggle со следующим значением,\n     * в неконтролируемом — меняет внутреннее состояние и вызывает onToggle.\n     */\n    public handleToggle = (): void => {\n        const { toggle, selected, onToggle } = this.props;\n        const { isControlled } = this.state;\n\n        if (isControlled) {\n            toggle?.(!selected);\n        } else {\n            // Колбэк setState выполняется после применения обновления, поэтому onToggle\n            // получает актуальное состояние, а не снимок, сделанный до вызова.\n            this.setState(\n                (prevState) => ({ isSelected: !prevState.isSelected }),\n                () => onToggle?.(this.state.isSelected),\n            );\n        }\n    };\n}\n"],"names":["selected"],"mappings":"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"}

package/components/Card/CardStatic.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { CardContent } from "./components/CardContent/CardContent.js";
 import { CardMedia } from "./components/CardMedia.js";
 import { mapCardRoundingSizeToCssClass, mapCardThemeToCssClass } from "./utils.js";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-import { c as cardStyles } from "../../chunks/Card.module-myb7EMDY.js";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as cardStyles } from "../../chunks/Card.module-JFqrD4KU.js";
 import { ECardRoundingSize, ECardTheme } from "./enums.js";
 const CardStatic = ({
   children,
@@ -21,7 +21,7 @@ const CardStatic = ({
       className
     ),
     ...rest,
-    "data-tx": "0.44.0",
+    "data-tx": "0.46.0",
     children
   }
 );

package/components/Card/components/CardContent/CardContent.js

@@ -3,8 +3,8 @@ import { CardContentBody } from "./components/CardContentBody.js";
 import { CardContentHeader } from "./components/CardContentHeader.js";
 import { CardContentFooter } from "./components/CardContentFooter.js";
 import { ECardContentPaddingSize } from "../../enums.js";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { c as cardStyles } from "../../../../chunks/Card.module-myb7EMDY.js";
+import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { c as cardStyles } from "../../../../chunks/Card.module-JFqrD4KU.js";
 const mapCardContentPaddingSizeToCssClass = {
   [ECardContentPaddingSize.MD]: cardStyles.paddingMD,
   [ECardContentPaddingSize.SM]: cardStyles.paddingSM

package/components/Card/components/CardContent/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContent.js","sources":["../../../../../src/components/Card/components/CardContent/CardContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { CardContentBody } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/components/CardContentBody\";\nimport { CardContentHeader } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/components/CardContentHeader\";\nimport { CardContentFooter } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/components/CardContentFooter\";\nimport { ECardContentPaddingSize } from \"@sberbusiness/triplex-next/components/Card/enums\";\nimport clsx from \"clsx\";\nimport cardStyles from \"../../styles/Card.module.less\";\n\n/** Внутренние составляющие компонента CardContent. */\nexport interface ICardContentComposition {\n    /** Тело карточки. */\n    Body: typeof CardContentBody;\n    /** Заголовок карточки. */\n    Header: typeof CardContentHeader;\n    /** Подвал карточки. */\n    Footer: typeof CardContentFooter;\n}\n\n/** Соответствие размера внутреннего отступа карточки стилевому классу. */\nconst mapCardContentPaddingSizeToCssClass = {\n    [ECardContentPaddingSize.MD]: cardStyles.paddingMD,\n    [ECardContentPaddingSize.SM]: cardStyles.paddingSM,\n};\n\n/** Свойства компонента CardContent. */\nexport interface ICardContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Размер внутреннего отступа контента карточки. */\n    paddingSize?: ECardContentPaddingSize;\n}\n\n/** Контент карточки. */\nexport const CardContent: React.FC<ICardContentProps> & ICardContentComposition = ({\n    children,\n    className,\n    paddingSize = ECardContentPaddingSize.MD,\n    ...rest\n}) => (\n    <div\n        className={clsx(cardStyles.cardContent, mapCardContentPaddingSizeToCssClass[paddingSize], className)}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\nCardContent.Body = CardContentBody;\nCardContent.Header = CardContentHeader;\nCardContent.Footer = CardContentFooter;\nCardContent.displayName = \"CardContent\";\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,sCAAsC;AAAA,EACxC,CAAC,wBAAwB,EAAE,GAAG,WAAW;AAAA,EACzC,CAAC,wBAAwB,EAAE,GAAG,WAAW;AAC7C;AASO,MAAM,cAAqE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA,cAAc,wBAAwB;AAAA,EACtC,GAAG;AACP,MACI;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,KAAK,WAAW,aAAa,oCAAoC,WAAW,GAAG,SAAS;AAAA,IAClG,GAAG;AAAA,IAEH;AAAA,EAAA;AACL;AAGJ,YAAY,OAAO;AACnB,YAAY,SAAS;AACrB,YAAY,SAAS;AACrB,YAAY,cAAc;"}
+{"version":3,"file":"CardContent.js","sources":["../../../../../src/components/Card/components/CardContent/CardContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { CardContentBody } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/components/CardContentBody\";\nimport { CardContentHeader } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/components/CardContentHeader\";\nimport { CardContentFooter } from \"@sberbusiness/triplex-next/components/Card/components/CardContent/components/CardContentFooter\";\nimport { ECardContentPaddingSize } from \"@sberbusiness/triplex-next/components/Card/enums\";\nimport clsx from \"clsx\";\nimport cardStyles from \"../../styles/Card.module.less\";\n\n/** Внутренние составляющие компонента CardContent. */\nexport interface ICardContentComposition {\n    /** Тело карточки. */\n    Body: typeof CardContentBody;\n    /** Заголовок карточки. */\n    Header: typeof CardContentHeader;\n    /** Подвал карточки. */\n    Footer: typeof CardContentFooter;\n}\n\n/** Соответствие размера внутреннего отступа карточки стилевому классу. */\nconst mapCardContentPaddingSizeToCssClass = {\n    [ECardContentPaddingSize.MD]: cardStyles.paddingMD,\n    [ECardContentPaddingSize.SM]: cardStyles.paddingSM,\n};\n\n/** Свойства компонента CardContent. */\nexport interface ICardContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Размер внутреннего отступа контента карточки. По умолчанию ECardContentPaddingSize.MD. */\n    paddingSize?: ECardContentPaddingSize;\n}\n\n/** Контент карточки. */\nexport const CardContent: React.FC<ICardContentProps> & ICardContentComposition = ({\n    children,\n    className,\n    paddingSize = ECardContentPaddingSize.MD,\n    ...rest\n}) => (\n    <div\n        className={clsx(cardStyles.cardContent, mapCardContentPaddingSizeToCssClass[paddingSize], className)}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\nCardContent.Body = CardContentBody;\nCardContent.Header = CardContentHeader;\nCardContent.Footer = CardContentFooter;\nCardContent.displayName = \"CardContent\";\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,sCAAsC;AAAA,EACxC,CAAC,wBAAwB,EAAE,GAAG,WAAW;AAAA,EACzC,CAAC,wBAAwB,EAAE,GAAG,WAAW;AAC7C;AASO,MAAM,cAAqE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA,cAAc,wBAAwB;AAAA,EACtC,GAAG;AACP,MACI;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,KAAK,WAAW,aAAa,oCAAoC,WAAW,GAAG,SAAS;AAAA,IAClG,GAAG;AAAA,IAEH;AAAA,EAAA;AACL;AAGJ,YAAY,OAAO;AACnB,YAAY,SAAS;AACrB,YAAY,SAAS;AACrB,YAAY,cAAc;"}

package/components/Card/components/CardContent/components/CardContentBody.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../../../chunks/vendor-DqGxntec.js";
-import { c as cardStyles } from "../../../../../chunks/Card.module-myb7EMDY.js";
+import { c as clsx } from "../../../../../chunks/vendor-BxhAzfnS.js";
+import { c as cardStyles } from "../../../../../chunks/Card.module-JFqrD4KU.js";
 const CardContentBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", { className: clsx(cardStyles.cardContentBody, className), ...rest, children });
 CardContentBody.displayName = "CardContentBody";
 export {

package/components/Card/components/CardContent/components/CardContentFooter.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../../../chunks/vendor-DqGxntec.js";
-import { c as cardStyles } from "../../../../../chunks/Card.module-myb7EMDY.js";
+import { c as clsx } from "../../../../../chunks/vendor-BxhAzfnS.js";
+import { c as cardStyles } from "../../../../../chunks/Card.module-JFqrD4KU.js";
 const CardContentFooter = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", { className: clsx(cardStyles.cardContentFooter, className), ...rest, children });
 CardContentFooter.displayName = "CardContentFooter";
 export {

package/components/Card/components/CardContent/components/CardContentHeader.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../../../chunks/vendor-DqGxntec.js";
-import { c as cardStyles } from "../../../../../chunks/Card.module-myb7EMDY.js";
+import { c as clsx } from "../../../../../chunks/vendor-BxhAzfnS.js";
+import { c as cardStyles } from "../../../../../chunks/Card.module-JFqrD4KU.js";
 const CardContentHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", { className: clsx(cardStyles.cardContentHeader, className), ...rest, children });
 CardContentHeader.displayName = "CardContentHeader";
 export {

package/components/Card/components/CardMedia.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
-import { c as cardStyles } from "../../../chunks/Card.module-myb7EMDY.js";
+import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
+import { c as cardStyles } from "../../../chunks/Card.module-JFqrD4KU.js";
 const CardMedia = ({ children, className, ...attributes }) => {
   const classNames = clsx(cardStyles.cardMedia, className);
   return /* @__PURE__ */ jsx("div", { className: classNames, ...attributes, children });

package/components/Card/utils.js

@@ -1,5 +1,5 @@
 import { ECardRoundingSize, ECardTheme } from "./enums.js";
-import { c as cardStyles } from "../../chunks/Card.module-myb7EMDY.js";
+import { c as cardStyles } from "../../chunks/Card.module-JFqrD4KU.js";
 const mapCardRoundingSizeToCssClass = {
   [ECardRoundingSize.LG]: cardStyles.roundingLG,
   [ECardRoundingSize.MD]: cardStyles.roundingMD,

package/components/Carousel/Carousel.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useState, useMemo, useRef, useCallback, useLayoutEffect, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
 import { CarouselContext } from "./CarouselContext.js";
 import { ECarouselOrientation, ECarouselScrollMode } from "./enums.js";
 import { resolveViewportPadding, useLatestRef } from "./utils.js";
-import { s as styles } from "../../chunks/Carousel.module-C_HKOQjp.js";
+import { s as styles } from "../../chunks/Carousel.module-DBpI3xL-.js";
 import { CarouselViewport } from "./CarouselViewport.js";
 import { CarouselTrack } from "./CarouselTrack.js";
 import { CarouselItem } from "./CarouselItem.js";