@skbkontur/react-ui 0.0.0-3974a633b4 → 0.0.0-444dd4e7b3

package/cjs/components/Checkbox/IndeterminateIcon.js

@@ -0,0 +1,13 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.IndeterminateIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../../internal/icons2022/iconSizer");
+var _ShapeSquareIcon16Solid = require("../../internal/icons2022/ShapeSquareIcon/ShapeSquareIcon16Solid"); /* eslint-disable react/display-name */
+
+var IndeterminateIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ShapeSquareIcon16Solid.ShapeSquareIcon16Solid, { size: 6 });},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ShapeSquareIcon16Solid.ShapeSquareIcon16Solid, { size: 8 });},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ShapeSquareIcon16Solid.ShapeSquareIcon16Solid, { size: 10 });} },
+
+'IndeterminateIcon');exports.IndeterminateIcon = IndeterminateIcon;

package/cjs/components/Checkbox/IndeterminateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["IndeterminateIcon.tsx"],"names":["IndeterminateIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA,yG,CAJA;;AAMO,IAAMA,iBAAiB,GAAG;AAC/B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,8CAAD,IAAwB,IAAI,EAAE,CAA9B,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,8CAAD,IAAwB,IAAI,EAAE,CAA9B,GAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,8CAAD,IAAwB,IAAI,EAAE,EAA9B,GAAN,EAHT,EAD+B;;AAM/B,mBAN+B,CAA1B,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { ShapeSquareIcon16Solid } from '../../internal/icons2022/ShapeSquareIcon/ShapeSquareIcon16Solid';\n\nexport const IndeterminateIcon = iconSizer(\n  {\n    small: () => <ShapeSquareIcon16Solid size={6} />,\n    medium: () => <ShapeSquareIcon16Solid size={8} />,\n    large: () => <ShapeSquareIcon16Solid size={10} />,\n  },\n  'IndeterminateIcon',\n);\n"]}

package/cjs/components/Clickable/ArrowLeftIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ArrowLeftIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/components/Clickable/ArrowLeftIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ArrowLeftIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowALeftIcon16Light = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light");
+var _ArrowALeftIcon20Light = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light");
+var _ArrowALeftIcon24Regular = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular");
+var _iconSizer = require("../../internal/icons2022/iconSizer"); /* eslint-disable react/display-name */
+
+var ArrowLeftIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon16Light.ArrowALeftIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon20Light.ArrowALeftIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon24Regular.ArrowALeftIcon24Regular, null);} },
+
+'ArrowLeftIcon');exports.ArrowLeftIcon = ArrowLeftIcon;

package/cjs/components/Clickable/ArrowLeftIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowLeftIcon.tsx"],"names":["ArrowLeftIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,+D,CANA;;AAQO,IAAMA,aAAa,GAAG;AAC3B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,4CAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,4CAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,gDAAD,OAAN,EAHT,EAD2B;;AAM3B,eAN2B,CAAtB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowALeftIcon16Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light';\nimport { ArrowALeftIcon20Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light';\nimport { ArrowALeftIcon24Regular } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowLeftIcon = iconSizer(\n  {\n    small: () => <ArrowALeftIcon16Light />,\n    medium: () => <ArrowALeftIcon20Light />,\n    large: () => <ArrowALeftIcon24Regular />,\n  },\n  'ArrowLeftIcon',\n);\n"]}

package/cjs/components/Clickable/ArrowRightIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ArrowRightIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/components/Clickable/ArrowRightIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ArrowRightIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowARightIcon16Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light");
+var _ArrowARightIcon20Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light");
+var _ArrowARightIcon24Regular = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular");
+var _iconSizer = require("../../internal/icons2022/iconSizer"); /* eslint-disable react/display-name */
+
+var ArrowRightIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon16Light.ArrowARightIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon20Light.ArrowARightIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon24Regular.ArrowARightIcon24Regular, null);} },
+
+'ArrowRightIcon');exports.ArrowRightIcon = ArrowRightIcon;

package/cjs/components/Clickable/ArrowRightIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowRightIcon.tsx"],"names":["ArrowRightIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,+D,CANA;;AAQO,IAAMA,cAAc,GAAG;AAC5B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,8CAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,8CAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,kDAAD,OAAN,EAHT,EAD4B;;AAM5B,gBAN4B,CAAvB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowARightIcon16Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light';\nimport { ArrowARightIcon20Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light';\nimport { ArrowARightIcon24Regular } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowRightIcon = iconSizer(\n  {\n    small: () => <ArrowARightIcon16Light />,\n    medium: () => <ArrowARightIcon20Light />,\n    large: () => <ArrowARightIcon24Regular />,\n  },\n  'ArrowRightIcon',\n);\n"]}

package/cjs/components/Clickable/Clickable.d.ts

@@ -0,0 +1,97 @@
+import React, { CSSProperties } from 'react';
+import { HTMLProps } from 'react-ui/typings/html';
+import { SizeProp } from '../../lib/types/props';
+import { PolymorphicForwardRefExoticComponent, PolymorphicPropsWithRef } from '../../typings/react-ref';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { ThemeIn } from '../../lib/theming/Theme';
+export declare const CLICKABLE_DEFAULT_ELEMENT = "button";
+export declare type ClickableUse = 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';
+export declare type ClickableSize = SizeProp;
+interface ClickableOwnProps extends CommonProps, Pick<HTMLProps['a'], 'rel' | 'href'>, Pick<HTMLProps['button'], 'type'> {
+    /**
+     * Стиль контрола.
+     *
+     * Возможные значения: `"default"`, `"success"`, `"danger"`, `"grayed"`, `"primary"`, `"pay"`, `"text"`, `"backless"`.
+     */
+    use?: ClickableUse;
+    /**
+     * Определяет как будет выглядеть контрол, не влияет на семантику.
+     */
+    view?: 'button' | 'link';
+    /**
+     * Размер контрола.
+     *
+     * Возможные значения: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: SizeProp;
+    /**
+     * Позвоялет перевести контрол в состояние загрузки.
+     */
+    isLoading?: boolean;
+    /**
+     * Позволяет отключить контрол.
+     */
+    isDisabled?: boolean;
+    /**
+     * Применяет к кнопке стили псеводкласса :active.
+     */
+    isActive?: boolean;
+    /**
+     * Позволяет задать иконку слева от контрола.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Позволяет задать иконку справа от контрола.
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Объект, в который можно передать переменные темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
+    /**
+     * CSS-свойство `width`.
+     */
+    width?: CSSProperties['width'];
+    /**
+     * CSS-свойство `text-align`.
+     */
+    align?: CSSProperties['textAlign'];
+    /**
+     * Состояние валидации при предупреждении.
+     */
+    isWarning?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
+    isError?: boolean;
+    /**
+     * Превращает кнопку в кнопку со стрелкой.
+     */
+    arrow?: 'left' | 'right';
+    /**
+     * Сужает кнопку.
+     */
+    isNarrow?: boolean;
+    /**
+     * Убирает обводку у кнопки.
+     */
+    isBorderless?: boolean;
+    /**
+     * @ignore
+     *
+     * Меняет скругления при использованиии <Clickable> внутри <Group>.
+     */
+    corners?: CSSProperties;
+}
+export declare type ClickableProps<T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT> = PolymorphicPropsWithRef<ClickableOwnProps, T>;
+export declare const ClickableDataTids: {
+    readonly root: "Clickable__root";
+    readonly spinner: "Clickable__spinner";
+};
+/**
+ * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.
+ */
+export declare const Clickable: PolymorphicForwardRefExoticComponent<ClickableOwnProps, typeof CLICKABLE_DEFAULT_ELEMENT>;
+export declare const isClickable: (child: React.ReactNode) => child is React.ReactElement<ClickableOwnProps, string | React.JSXElementConstructor<any>>;
+export {};

package/cjs/components/Clickable/Clickable.js

@@ -0,0 +1,243 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isClickable = exports.ClickableDataTids = exports.Clickable = exports.CLICKABLE_DEFAULT_ELEMENT = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _globalObject = require("@skbkontur/global-object");
+
+
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+
+
+
+
+var _utils = require("../../lib/utils");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
+
+var _Clickable = require("./Clickable.styles");
+var _utils2 = require("./utils");
+var _ClickableLink = require("./ClickableLink");
+var _ClickableButton = require("./ClickableButton");
+var _ClickableButtonWrapper = require("./ClickableButtonWrapper");
+var _ClickableButton2 = require("./ClickableButton.styles");
+var _ClickableLink2 = require("./ClickableLink.styles");var _excluded = ["size", "use", "type", "as", "arrow", "corners", "rel", "theme", "href", "isNarrow", "view", "leftIcon", "rightIcon", "onClick", "onFocus", "onBlur", "isLoading", "isDisabled", "isActive", "isBorderless", "width", "isWarning", "isError", "align", "style", "className", "children"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+var CLICKABLE_DEFAULT_ELEMENT = 'button';exports.CLICKABLE_DEFAULT_ELEMENT = CLICKABLE_DEFAULT_ELEMENT;
+var COMPONENT_NAME = 'Clickable';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var ClickableDataTids = {
+  root: 'Clickable__root',
+  spinner: 'Clickable__spinner' };
+
+
+/**
+ * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.
+ */exports.ClickableDataTids = ClickableDataTids;
+var Clickable =
+(0, _forwardRefAndName.forwardRefAndName)(COMPONENT_NAME, function Clickable(_ref,
+
+ref) {var _ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size,_ref$use = _ref.use,use = _ref$use === void 0 ? 'default' : _ref$use,_ref$type = _ref.type,type = _ref$type === void 0 ? 'button' : _ref$type,as = _ref.as,arrow = _ref.arrow,corners = _ref.corners,rel = _ref.rel,userTheme = _ref.theme,href = _ref.href,isNarrow = _ref.isNarrow,view = _ref.view,leftIcon = _ref.leftIcon,rightIcon = _ref.rightIcon,onClick = _ref.onClick,onFocus = _ref.onFocus,onBlur = _ref.onBlur,isLoading = _ref.isLoading,isDisabled = _ref.isDisabled,isActive = _ref.isActive,isBorderless = _ref.isBorderless,width = _ref.width,isWarning = _ref.isWarning,isError = _ref.isError,align = _ref.align,style = _ref.style,className = _ref.className,children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var Root = as != null ? as : CLICKABLE_DEFAULT_ELEMENT;
+
+  var contextTheme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var theme = userTheme ? _ThemeFactory.ThemeFactory.create(userTheme, contextTheme) : contextTheme;
+
+  var buttonSize = (0, _ClickableButton2.getButtonSize)({ size: size, leftIcon: leftIcon, rightIcon: rightIcon, children: children, theme: theme });
+  var currentView = (0, _utils2.getCurrentView)(view, as);
+
+  var isNotInteractive = !!isLoading || !!isDisabled;
+
+  var _useState = (0, _react.useState)(false),isFocused = _useState[0],setIsFocused = _useState[1];
+  var isRootFocused = isFocused && !isNotInteractive;
+  var handleFocus = (0, _react.useCallback)(
+  function (e) {
+    if (!isNotInteractive) {
+      // focus event fires before keyDown eventlistener
+      // so we should check tabPressed in async way
+      _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
+        if (_keyListener.keyListener.isTabPressed) {
+          setIsFocused(true);
+        }
+      });
+    }
+    onFocus == null ? void 0 : onFocus(e);
+  },
+  [isNotInteractive]);
+
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    setIsFocused(false);
+    if (!isNotInteractive) {
+      onBlur == null ? void 0 : onBlur(e);
+    }
+  }, []);
+
+  var handleClick = (0, _react.useCallback)(
+  function (e) {
+    if (onClick && !isNotInteractive) {
+      onClick(e);
+    }
+  },
+  [onClick, isNotInteractive]);
+
+
+  var content = /*#__PURE__*/
+  _react.default.createElement(Root
+  // the `key` prop needed so React can understand that we are working with the same content
+  // regardless of whether the wrapper presented or not
+  , (0, _extends2.default)({ key: ClickableDataTids.root,
+    className: (0, _Emotion.cx)(
+    _Clickable.generalStyles.root(theme),
+    currentView === 'link' && (0, _ClickableLink2.getLinkStyles)({ use: use, isFocused: isFocused, isNotInteractive: isNotInteractive, theme: theme }),
+    currentView === 'button' &&
+    (0, _ClickableButton2.getButtonStyles)({
+      use: use,
+      buttonSize: buttonSize,
+      theme: theme,
+      arrow: arrow,
+      size: size,
+      isNarrow: isNarrow,
+      isBorderless: isBorderless,
+      isFocused: isFocused,
+      isActive: isActive,
+      isNotInteractive: isNotInteractive }),
+
+    className),
+
+    type: Root === 'button' ? type : undefined,
+    rel: (0, _utils2.getRel)(rel, href),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    style: (0, _extends2.default)({ textAlign: align }, corners, style),
+    "data-tid": ClickableDataTids.root,
+    "aria-disabled": isNotInteractive,
+    href: href,
+    ref: ref },
+  rest),
+
+  currentView === 'link' && /*#__PURE__*/
+  _react.default.createElement(_ClickableLink.ClickableLink, { isLoading: isLoading, isFocused: isRootFocused, leftIcon: leftIcon, rightIcon: rightIcon },
+  children),
+
+
+  currentView === 'button' && /*#__PURE__*/
+  _react.default.createElement(_ClickableButton.ClickableButton, {
+    leftIcon: leftIcon,
+    rightIcon: rightIcon,
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    isFocused: isFocused,
+    isWarning: isWarning,
+    isError: isError,
+    arrow: arrow,
+    size: size },
+
+  children));
+
+
+
+
+
+  if (currentView === 'button') {
+    return /*#__PURE__*/(
+      _react.default.createElement(_ClickableButtonWrapper.ClickableButtonWrapper, { width: width, size: size },
+      content));
+
+
+  }
+
+  return content;
+});exports.Clickable = Clickable;
+
+var isClickable = (0, _utils.isReactUIComponent)(COMPONENT_NAME);exports.isClickable = isClickable;

package/cjs/components/Clickable/Clickable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Clickable.tsx"],"names":["CLICKABLE_DEFAULT_ELEMENT","COMPONENT_NAME","ClickableDataTids","root","spinner","Clickable","ref","size","use","type","as","arrow","corners","rel","userTheme","theme","href","isNarrow","view","leftIcon","rightIcon","onClick","onFocus","onBlur","isLoading","isDisabled","isActive","isBorderless","width","isWarning","isError","align","style","className","children","rest","Root","contextTheme","ThemeContext","ThemeFactory","create","buttonSize","currentView","isNotInteractive","isFocused","setIsFocused","isRootFocused","handleFocus","e","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","handleClick","content","generalStyles","undefined","textAlign","isClickable"],"mappings":"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","sourcesContent":["import React, { CSSProperties, useCallback, useContext, useState } from 'react';\nimport { HTMLProps } from 'react-ui/typings/html';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { SizeProp } from '../../lib/types/props';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport {\n  PolymorphicForwardRefExoticComponent,\n  PolymorphicPropsWithoutRef,\n  PolymorphicPropsWithRef,\n} from '../../typings/react-ref';\nimport { isReactUIComponent } from '../../lib/utils';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeIn } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { generalStyles } from './Clickable.styles';\nimport { getCurrentView, getRel } from './utils';\nimport { ClickableLink } from './ClickableLink';\nimport { ClickableButton } from './ClickableButton';\nimport { ClickableButtonWrapper } from './ClickableButtonWrapper';\nimport { getButtonSize, getButtonStyles } from './ClickableButton.styles';\nimport { getLinkStyles } from './ClickableLink.styles';\n\nexport const CLICKABLE_DEFAULT_ELEMENT = 'button';\nconst COMPONENT_NAME = 'Clickable';\n\nexport type ClickableUse = 'default' | 'success' | 'danger' | 'grayed' | 'primary' | 'pay' | 'text' | 'backless';\nexport type ClickableSize = SizeProp;\ninterface ClickableOwnProps\n  extends CommonProps,\n    Pick<HTMLProps['a'], 'rel' | 'href'>,\n    Pick<HTMLProps['button'], 'type'> {\n  /**\n   * Стиль контрола.\n   *\n   * Возможные значения: `\"default\"`, `\"success\"`, `\"danger\"`, `\"grayed\"`, `\"primary\"`, `\"pay\"`, `\"text\"`, `\"backless\"`.\n   */\n  use?: ClickableUse;\n  /**\n   * Определяет как будет выглядеть контрол, не влияет на семантику.\n   */\n  view?: 'button' | 'link';\n  /**\n   * Размер контрола.\n   *\n   * Возможные значения: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n  /**\n   * Позвоялет перевести контрол в состояние загрузки.\n   */\n  isLoading?: boolean;\n  /**\n   * Позволяет отключить контрол.\n   */\n  isDisabled?: boolean;\n  /**\n   * Применяет к кнопке стили псеводкласса :active.\n   */\n  isActive?: boolean;\n  /**\n   * Позволяет задать иконку слева от контрола.\n   */\n  leftIcon?: React.ReactNode;\n  /**\n   * Позволяет задать иконку справа от контрола.\n   */\n  rightIcon?: React.ReactNode;\n  /**\n   * Объект, в который можно передать переменные темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n  /**\n   * CSS-свойство `width`.\n   */\n  width?: CSSProperties['width'];\n  /**\n   * CSS-свойство `text-align`.\n   */\n  align?: CSSProperties['textAlign'];\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  isWarning?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  isError?: boolean;\n  /**\n   * Превращает кнопку в кнопку со стрелкой.\n   */\n  arrow?: 'left' | 'right';\n  /**\n   * Сужает кнопку.\n   */\n  isNarrow?: boolean;\n  /**\n   * Убирает обводку у кнопки.\n   */\n  isBorderless?: boolean;\n  /**\n   * @ignore\n   *\n   * Меняет скругления при использованиии <Clickable> внутри <Group>.\n   */\n  corners?: CSSProperties;\n}\n\nexport type ClickableProps<T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT> = PolymorphicPropsWithRef<\n  ClickableOwnProps,\n  T\n>;\n\nexport const ClickableDataTids = {\n  root: 'Clickable__root',\n  spinner: 'Clickable__spinner',\n} as const;\n\n/**\n * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.\n */\nexport const Clickable: PolymorphicForwardRefExoticComponent<ClickableOwnProps, typeof CLICKABLE_DEFAULT_ELEMENT> =\n  forwardRefAndName(COMPONENT_NAME, function Clickable<\n    T extends React.ElementType = typeof CLICKABLE_DEFAULT_ELEMENT,\n  >({ size = 'small', use = 'default', type = 'button', as, arrow, corners, rel, theme: userTheme, href, isNarrow, view, leftIcon, rightIcon, onClick, onFocus, onBlur, isLoading, isDisabled, isActive, isBorderless, width, isWarning, isError, align, style, className, children, ...rest }: PolymorphicPropsWithoutRef<ClickableOwnProps, T>, ref: React.ForwardedRef<Element>) {\n    const Root: React.ElementType = as ?? CLICKABLE_DEFAULT_ELEMENT;\n\n    const contextTheme = useContext(ThemeContext);\n    const theme = userTheme ? ThemeFactory.create(userTheme, contextTheme) : contextTheme;\n\n    const buttonSize = getButtonSize({ size, leftIcon, rightIcon, children, theme });\n    const currentView = getCurrentView(view, as);\n\n    const isNotInteractive = !!isLoading || !!isDisabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const isRootFocused = isFocused && !isNotInteractive;\n    const handleFocus = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isNotInteractive) {\n          // focus event fires before keyDown eventlistener\n          // so we should check tabPressed in async way\n          globalObject.requestAnimationFrame?.(() => {\n            if (keyListener.isTabPressed) {\n              setIsFocused(true);\n            }\n          });\n        }\n        onFocus?.(e);\n      },\n      [isNotInteractive],\n    );\n    const handleBlur = useCallback((e: React.FocusEvent) => {\n      setIsFocused(false);\n      if (!isNotInteractive) {\n        onBlur?.(e);\n      }\n    }, []);\n\n    const handleClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (onClick && !isNotInteractive) {\n          onClick(e);\n        }\n      },\n      [onClick, isNotInteractive],\n    );\n\n    const content = (\n      <Root\n        // the `key` prop needed so React can understand that we are working with the same content\n        // regardless of whether the wrapper presented or not\n        key={ClickableDataTids.root}\n        className={cx(\n          generalStyles.root(theme),\n          currentView === 'link' && getLinkStyles({ use, isFocused, isNotInteractive, theme }),\n          currentView === 'button' &&\n            getButtonStyles({\n              use,\n              buttonSize,\n              theme,\n              arrow,\n              size,\n              isNarrow,\n              isBorderless,\n              isFocused,\n              isActive,\n              isNotInteractive,\n            }),\n          className,\n        )}\n        type={Root === 'button' ? type : undefined}\n        rel={getRel(rel, href)}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n        style={{ textAlign: align, ...corners, ...style }}\n        data-tid={ClickableDataTids.root}\n        aria-disabled={isNotInteractive}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {currentView === 'link' && (\n          <ClickableLink isLoading={isLoading} isFocused={isRootFocused} leftIcon={leftIcon} rightIcon={rightIcon}>\n            {children}\n          </ClickableLink>\n        )}\n        {currentView === 'button' && (\n          <ClickableButton\n            leftIcon={leftIcon}\n            rightIcon={rightIcon}\n            isDisabled={isDisabled}\n            isLoading={isLoading}\n            isFocused={isFocused}\n            isWarning={isWarning}\n            isError={isError}\n            arrow={arrow}\n            size={size}\n          >\n            {children}\n          </ClickableButton>\n        )}\n      </Root>\n    );\n\n    if (currentView === 'button') {\n      return (\n        <ClickableButtonWrapper width={width} size={size}>\n          {content}\n        </ClickableButtonWrapper>\n      );\n    }\n\n    return content;\n  });\n\nexport const isClickable = isReactUIComponent<ClickableOwnProps>(COMPONENT_NAME);\n"]}

package/cjs/components/Clickable/Clickable.md

@@ -0,0 +1,172 @@
+По умолчанию `<Clickable>` рендерится в виде кнопки с тегом `<button>`.
+
+<br/>
+<br/>
+
+Это можно изменить при помощи пропов `as` и `view`:
+
+— `as ('button' | 'a')` — изменяет корневой тег, а также при отсутствии `view` задаёт внешний вид;
+
+— `view ('button' | 'link')` — изменяет внешний вид контрола.
+```jsx harmony
+import { Gapped, Clickable, clickableStyles } from '@skbkontur/react-ui';
+import { XIcon } from '@skbkontur/icons/icons/XIcon';
+
+const bgStyle = {
+  backgroundImage: `linear-gradient(to right, rgba(130, 130, 130, 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(130, 130, 130, 0.5) 1px, transparent 1px)`,
+  backgroundSize: `16px 16px`,
+  backgroundPosition: `-8px -8px`,
+  padding: 16
+};
+
+<>
+  <p>Ссылки</p>
+  <Gapped gap={15}>
+    <Clickable as="a" href="/">Default</Clickable>
+    <Clickable as="a" use="success" href="/">Success</Clickable>
+    <Clickable as="a" use="danger" href="/">Danger</Clickable>
+    <Clickable as="a" use="grayed" href="/">Grayed</Clickable>
+    <Clickable as="a" isDisabled href="/">Disabled</Clickable>
+  </Gapped>
+
+  <p>Кнопки</p>
+  <Gapped vertical>
+    <Gapped>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+    <Gapped style={bgStyle}>
+      <Clickable use="default">Default</Clickable>
+      <Clickable use="primary">Primary</Clickable>
+      <Clickable use="success">Success</Clickable>
+      <Clickable use="danger">Danger</Clickable>
+      <Clickable use="pay">Pay</Clickable>
+      <Clickable use="text">Text</Clickable>
+      <Clickable use="backless">Backless</Clickable>
+      <Clickable isBorderless>Borderless</Clickable>
+      <Clickable isWarning>Warning</Clickable>
+      <Clickable isError>Error</Clickable>
+      <Clickable use="default" isDisabled>Disabled</Clickable>
+    </Gapped>
+  </Gapped>
+
+  <p>Гибриды</p>
+  <Gapped>
+    <Clickable as="a" view="button" href="/" >Ссылка, но выглядит как кнопка</Clickable>
+    <Clickable as="button" view="link">Кнопка, но выглядит как ссылка</Clickable>
+  </Gapped>
+</>
+```
+
+Вы можете использовать любой тег в качестве основы для `<Clickable>` (с помощью `as`), но в таком случае вам придётся самостоятельно реализовывать доступность контрола. Поэтому мы рекомендуем использовать только `a` и `button`, если у вас нет весомой причины для использования другого тега.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="div" view="button">
+    Это div, но он выглядит как кнопка
+  </Clickable>
+  <Clickable as="div" view="link">
+    Это span, но он выглядит как ссылка
+  </Clickable>
+</Gapped>
+```
+
+У `<Clickable>` могут быть иконки сразу с обеих сторон, наличие/отсутствие иконок также влияет на отображение в состоянии загрузки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
+
+const [isLoading, setIsLoading] = React.useState(false);
+
+<Gapped gap={20} vertical>
+  <Clickable use={isLoading ? 'danger' : 'success'} onClick={() => setIsLoading(!isLoading)}>
+    {isLoading ? 'Остановить загрузку!!!' : 'Начать загрузку!'}
+  </Clickable>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/" rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading} as="a" href="/">
+      Без иконки
+    </Clickable>
+  </Gapped>
+
+  <Gapped gap={15}>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />}>
+      Иконка слева
+    </Clickable>
+    <Clickable isLoading={isLoading} leftIcon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>
+      Иконка и там, и там
+    </Clickable>
+    <Clickable isLoading={isLoading} rightIcon={<XIcon16Regular />}>
+      Иконка справа
+    </Clickable>
+    <Clickable isLoading={isLoading}>
+      Без иконки
+    </Clickable>
+  </Gapped>
+</Gapped>
+```
+
+`<Clickable>` в виде кнопки может быть в одном из трёх размеров: `small`, `medium` или `large`.
+```jsx harmony
+<div style={{
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "330px"
+  }}>
+  <Clickable size="small">Маленькая</Clickable>
+  <Clickable size="medium">Средняя</Clickable>
+  <Clickable size="large">Большая</Clickable>
+</div>
+```
+
+`Clickable` в виде кнопки может превращаться в кнопки-ссылки, размер стрелок меняется в зависимости от размера кнопки.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable arrow="left">Стрелка влево</Clickable>
+  <Clickable arrow="right">Стрелка вправо</Clickable>
+</Gapped>
+```
+
+Пример ссылок ведущих на внешние ресурсы.
+
+_Примечание_:
+
+Если в контрол `<Clickable>` передана ссылка, ведущая на внешний ресурс, то `<Clickable>` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
+
+Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Clickable as="a" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
+  </Clickable>
+  <Clickable as="a" target="_blank" href="https://kontur.ru/">
+    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
+  </Clickable>
+</Gapped>
+```

package/cjs/components/Clickable/Clickable.styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '../../lib/theming/Theme';
+import { ClickableProps } from './Clickable';
+export interface GetStylesBase extends Pick<ClickableProps, 'use'> {
+    theme: Theme;
+}
+export declare const clickableGlobalClasses: {
+    text: string;
+};
+export declare const generalStyles: {
+    root(t: Theme): string;
+};