@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/cjs/components/Clickable/utils.js

@@ -1,47 +0,0 @@
-"use strict";exports.__esModule = true;exports.getTabIndex = exports.getRole = exports.getRel = exports.getCurrentView = void 0;
-
-var _utils = require("../../lib/utils");
-
-var _Clickable = require("./Clickable");
-
-var getTabIndex = function getTabIndex(isInteractive, tabIndex, disabled) {
-  if (disabled) {
-    return -1;
-  }
-
-  if (!isInteractive) {
-    return tabIndex != null ? tabIndex : 0;
-  }
-
-  return tabIndex;
-};exports.getTabIndex = getTabIndex;
-
-var getRole = function getRole(isInteractive, role) {
-  if (!isInteractive) {
-    return role != null ? role : 'button';
-  }
-
-  return role;
-};exports.getRole = getRole;
-
-var getCurrentView = function getCurrentView(view, as) {if (as === void 0) {as = _Clickable.CLICKABLE_DEFAULT_ELEMENT;}
-  if (view) {
-    return view;
-  }
-
-  if (as === 'button') {
-    return 'button';
-  }
-
-  if (as === 'a') {
-    return 'link';
-  }
-};exports.getCurrentView = getCurrentView;
-
-var getRel = function getRel(rel, href) {
-  if (!rel && href) {
-    return "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');
-  }
-
-  return rel;
-};exports.getRel = getRel;

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

@@ -1 +0,0 @@
-{"version":3,"sources":["utils.ts"],"names":["getTabIndex","isInteractive","tabIndex","disabled","getRole","role","getCurrentView","view","as","CLICKABLE_DEFAULT_ELEMENT","getRel","rel","href"],"mappings":";;AAEA;;AAEA;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,aAAD,EAAyBC,QAAzB,EAA2CC,QAA3C,EAAkE;AAC3F,MAAIA,QAAJ,EAAc;AACZ,WAAO,CAAC,CAAR;AACD;;AAED,MAAI,CAACF,aAAL,EAAoB;AAClB,WAAOC,QAAP,WAAOA,QAAP,GAAmB,CAAnB;AACD;;AAED,SAAOA,QAAP;AACD,CAVM,C;;AAYA,IAAME,OAAO,GAAG,SAAVA,OAAU,CAACH,aAAD,EAAyBI,IAAzB,EAAmE;AACxF,MAAI,CAACJ,aAAL,EAAoB;AAClB,WAAOI,IAAP,WAAOA,IAAP,GAAe,QAAf;AACD;;AAED,SAAOA,IAAP;AACD,CANM,C;;AAQA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAA+BC,EAA/B,EAA+E,KAAhDA,EAAgD,cAAhDA,EAAgD,GAA9BC,oCAA8B;AAC3G,MAAIF,IAAJ,EAAU;AACR,WAAOA,IAAP;AACD;;AAED,MAAIC,EAAE,KAAK,QAAX,EAAqB;AACnB,WAAO,QAAP;AACD;;AAED,MAAIA,EAAE,KAAK,GAAX,EAAgB;AACd,WAAO,MAAP;AACD;AACF,CAZM,C;;AAcA,IAAME,MAAM,GAAG,SAATA,MAAS,CAACC,GAAD,EAA6BC,IAA7B,EAA0D;AAC9E,MAAI,CAACD,GAAD,IAAQC,IAAZ,EAAkB;AAChB,yBAAkB,2BAAeA,IAAf,IAAuB,aAAvB,GAAuC,EAAzD;AACD;;AAED,SAAOD,GAAP;AACD,CANM,C","sourcesContent":["import { ElementType, HTMLAttributes } from 'react';\n\nimport { isExternalLink } from '../../lib/utils';\n\nimport { CLICKABLE_DEFAULT_ELEMENT, ClickableProps } from './Clickable';\n\nexport const getTabIndex = (isInteractive: boolean, tabIndex: number, disabled?: boolean) => {\n  if (disabled) {\n    return -1;\n  }\n\n  if (!isInteractive) {\n    return tabIndex ?? 0;\n  }\n\n  return tabIndex;\n};\n\nexport const getRole = (isInteractive: boolean, role: HTMLAttributes<unknown>['role']) => {\n  if (!isInteractive) {\n    return role ?? 'button';\n  }\n\n  return role;\n};\n\nexport const getCurrentView = (view: ClickableProps['view'], as: ElementType = CLICKABLE_DEFAULT_ELEMENT) => {\n  if (view) {\n    return view;\n  }\n\n  if (as === 'button') {\n    return 'button';\n  }\n\n  if (as === 'a') {\n    return 'link';\n  }\n};\n\nexport const getRel = (rel: ClickableProps['rel'], href: string | undefined) => {\n  if (!rel && href) {\n    return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n  }\n\n  return rel;\n};\n"]}

package/cjs/typings/react-ref.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { Merge } from './utility-types';
-
-type PropsWithAs<P, T extends React.ElementType> = P & { as?: T };
-
-export type PolymorphicPropsWithoutRef<P, T extends React.ElementType> = Merge<
-  T extends keyof JSX.IntrinsicElements
-    ? React.PropsWithoutRef<JSX.IntrinsicElements[T]>
-    : React.ComponentPropsWithoutRef<T>,
-  PropsWithAs<P, T>
->;
-
-export type PolymorphicPropsWithRef<P, T extends React.ElementType> = Merge<
-  T extends keyof JSX.IntrinsicElements ? React.PropsWithRef<JSX.IntrinsicElements[T]> : React.ComponentPropsWithRef<T>,
-  PropsWithAs<P, T>
->;
-
-type PolymorphicExoticComponent<P = Record<string, unknown>, T extends React.ElementType = React.ElementType> = Merge<
-  React.ExoticComponent<P & { [key: string]: unknown }>,
-  {
-    <InstanceT extends React.ElementType = T>(props: PolymorphicPropsWithRef<P, InstanceT>): React.ReactElement | null;
-  }
->;
-
-export type PolymorphicForwardRefExoticComponent<P, T extends React.ElementType> = Merge<
-  React.ForwardRefExoticComponent<P & { [key: string]: unknown }>,
-  PolymorphicExoticComponent<P, T>
->;

package/components/Clickable/ArrowLeftIcon/ArrowLeftIcon.js

@@ -1,17 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import { ArrowALeftIcon16Light } from "../../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light";
-import { ArrowALeftIcon20Light } from "../../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light";
-import { ArrowALeftIcon24Regular } from "../../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular";
-import { iconSizer } from "../../../internal/icons2022/iconSizer";
-export var ArrowLeftIcon = iconSizer({
-  small: function small() {
-    return /*#__PURE__*/React.createElement(ArrowALeftIcon16Light, null);
-  },
-  medium: function medium() {
-    return /*#__PURE__*/React.createElement(ArrowALeftIcon20Light, null);
-  },
-  large: function large() {
-    return /*#__PURE__*/React.createElement(ArrowALeftIcon24Regular, null);
-  }
-}, 'ArrowLeftIcon');

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

@@ -1 +0,0 @@
-{"version":3,"sources":["ArrowLeftIcon.tsx"],"names":["React","ArrowALeftIcon16Light","ArrowALeftIcon20Light","ArrowALeftIcon24Regular","iconSizer","ArrowLeftIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,qBAAT,QAAsC,+DAAtC;AACA,SAASC,qBAAT,QAAsC,+DAAtC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,aAAa,GAAGD,SAAS;AACpC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,qBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,qBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,OAAN,EAHT,EADoC;;AAMpC,eANoC,CAA/B","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/components/Clickable/ArrowLeftIcon/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../../../cjs/components/Clickable/ArrowLeftIcon.js",
-  "module": "ArrowLeftIcon",
-  "types": "../ArrowLeftIcon.d.ts",
-  "sideEffects": false
-}

package/components/Clickable/ArrowLeftIcon.d.ts

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

package/components/Clickable/ArrowRightIcon/ArrowRightIcon.js

@@ -1,17 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import { ArrowARightIcon16Light } from "../../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light";
-import { ArrowARightIcon20Light } from "../../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light";
-import { ArrowARightIcon24Regular } from "../../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular";
-import { iconSizer } from "../../../internal/icons2022/iconSizer";
-export var ArrowRightIcon = iconSizer({
-  small: function small() {
-    return /*#__PURE__*/React.createElement(ArrowARightIcon16Light, null);
-  },
-  medium: function medium() {
-    return /*#__PURE__*/React.createElement(ArrowARightIcon20Light, null);
-  },
-  large: function large() {
-    return /*#__PURE__*/React.createElement(ArrowARightIcon24Regular, null);
-  }
-}, 'ArrowRightIcon');

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

@@ -1 +0,0 @@
-{"version":3,"sources":["ArrowRightIcon.tsx"],"names":["React","ArrowARightIcon16Light","ArrowARightIcon20Light","ArrowARightIcon24Regular","iconSizer","ArrowRightIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,wBAAT,QAAyC,mEAAzC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,cAAc,GAAGD,SAAS;AACrC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,sBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,sBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,wBAAD,OAAN,EAHT,EADqC;;AAMrC,gBANqC,CAAhC","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/components/Clickable/ArrowRightIcon/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../../../cjs/components/Clickable/ArrowRightIcon.js",
-  "module": "ArrowRightIcon",
-  "types": "../ArrowRightIcon.d.ts",
-  "sideEffects": false
-}

package/components/Clickable/ArrowRightIcon.d.ts

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

package/components/Clickable/Clickable/Clickable.js

@@ -1,164 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
-import React, { useCallback, useContext, useState } from 'react';
-import { globalObject } from '@skbkontur/global-object';
-import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isReactUIComponent } from "../../../lib/utils";
-import { forwardRefAndName } from "../../../lib/forwardRefAndName";
-import { cx } from "../../../lib/theming/Emotion";
-import { keyListener } from "../../../lib/events/keyListener";
-import { generalStyles } from "../Clickable.styles";
-import { getCurrentView, getRel } from "../utils";
-import { ClickableLink } from "../ClickableLink";
-import { ClickableButton } from "../ClickableButton";
-import { ClickableButtonWrapper } from "../ClickableButtonWrapper";
-import { getButtonSize, getButtonStyles } from "../ClickableButton.styles";
-import { getLinkStyles } from "../ClickableLink.styles";
-export var CLICKABLE_DEFAULT_ELEMENT = 'button';
-var COMPONENT_NAME = 'Clickable';
-export var ClickableDataTids = {
-  root: 'Clickable__root',
-  spinner: 'Clickable__spinner'
-};
-/**
- * Это гибридный контрол, который позволяет создавать ссылки и кнопки с любым семантическим тегом.
- */
-
-export var Clickable = 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var Root = as != null ? as : CLICKABLE_DEFAULT_ELEMENT;
-  var contextTheme = useContext(ThemeContext);
-  var theme = userTheme ? ThemeFactory.create(userTheme, contextTheme) : contextTheme;
-  var buttonSize = getButtonSize({
-    size: size,
-    leftIcon: leftIcon,
-    rightIcon: rightIcon,
-    children: children,
-    theme: theme
-  });
-  var currentView = getCurrentView(view, as);
-  var isNotInteractive = !!isLoading || !!isDisabled;
-
-  var _useState = useState(false),
-      isFocused = _useState[0],
-      setIsFocused = _useState[1];
-
-  var isRootFocused = isFocused && !isNotInteractive;
-  var handleFocus = useCallback(function (e) {
-    if (!isNotInteractive) {
-      // focus event fires before keyDown eventlistener
-      // so we should check tabPressed in async way
-      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
-        if (keyListener.isTabPressed) {
-          setIsFocused(true);
-        }
-      });
-    }
-
-    onFocus == null ? void 0 : onFocus(e);
-  }, [isNotInteractive]);
-  var handleBlur = useCallback(function (e) {
-    setIsFocused(false);
-
-    if (!isNotInteractive) {
-      onBlur == null ? void 0 : onBlur(e);
-    }
-  }, []);
-  var handleClick = useCallback(function (e) {
-    if (onClick && !isNotInteractive) {
-      onClick(e);
-    }
-  }, [onClick, isNotInteractive]);
-  var content = /*#__PURE__*/React.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
-  , _extends({
-    key: ClickableDataTids.root,
-    className: cx(generalStyles.root(theme), currentView === 'link' && getLinkStyles({
-      use: use,
-      isFocused: isFocused,
-      isNotInteractive: isNotInteractive,
-      theme: theme
-    }), currentView === 'button' && 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: getRel(rel, href),
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onClick: handleClick,
-    style: _extends({
-      textAlign: align
-    }, corners, style),
-    "data-tid": ClickableDataTids.root,
-    "aria-disabled": isNotInteractive,
-    href: href,
-    ref: ref
-  }, rest), currentView === 'link' && /*#__PURE__*/React.createElement(ClickableLink, {
-    isLoading: isLoading,
-    isFocused: isRootFocused,
-    leftIcon: leftIcon,
-    rightIcon: rightIcon
-  }, children), currentView === 'button' && /*#__PURE__*/React.createElement(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.createElement(ClickableButtonWrapper, {
-      width: width,
-      size: size
-    }, content);
-  }
-
-  return content;
-});
-export var isClickable = isReactUIComponent(COMPONENT_NAME);

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

@@ -1 +0,0 @@
-{"version":3,"sources":["Clickable.tsx"],"names":["React","useCallback","useContext","useState","globalObject","ThemeFactory","ThemeContext","isReactUIComponent","forwardRefAndName","cx","keyListener","generalStyles","getCurrentView","getRel","ClickableLink","ClickableButton","ClickableButtonWrapper","getButtonSize","getButtonStyles","getLinkStyles","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","create","buttonSize","currentView","isNotInteractive","isFocused","setIsFocused","isRootFocused","handleFocus","e","requestAnimationFrame","isTabPressed","handleBlur","handleClick","content","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/components/Clickable/Clickable/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../../../cjs/components/Clickable/Clickable.js",
-  "module": "Clickable",
-  "types": "../Clickable.d.ts",
-  "sideEffects": false
-}

package/components/Clickable/Clickable.d.ts

@@ -1,97 +0,0 @@
-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/components/Clickable/Clickable.md

@@ -1,172 +0,0 @@
-По умолчанию `<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/components/Clickable/Clickable.styles/Clickable.styles.js

@@ -1,13 +0,0 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-
-var _templateObject;
-
-import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
-export var clickableGlobalClasses = prefix('clickable')({
-  text: 'text'
-});
-export var generalStyles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      all: unset;\n      cursor: pointer;\n\n      &:focus-visible {\n        /*\n          The box-shadow property is not visible in Windows high-contrast themes\n          So we need to define transparent outline which will be visible in those themes\n\n          Source: https://stackoverflow.com/a/52616313\n        */\n        outline: 2px solid transparent;\n        box-shadow: 0px 0px 0px 2px ", ";\n      }\n    "])), t.borderColorFocus);
-  }
-});