@skbkontur/react-ui 0.0.0-0d47d85432 → 0.0.0-0dca6f33be

package/cjs/components/FxInput/FxInput.js

@@ -3,7 +3,6 @@
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Button = require("../Button");
 var _Group = require("../Group");
 var _Input = require("../Input");
 var _CurrencyInput = require("../CurrencyInput");
@@ -11,7 +10,13 @@ var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _px = require("../../internal/icons/16px");
 var _CommonWrapper = require("../../internal/CommonWrapper");
-var _rootNode = require("../../lib/rootNode");var _excluded = ["type", "onRestore", "auto", "refInput", "value", "width"];var _class, _class2, _temp;
+var _rootNode = require("../../lib/rootNode");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+
+var _MathFunctionIcon = require("./MathFunctionIcon");
+var _FxInputRestoreBtn = require("./FxInputRestoreBtn");var _excluded = ["type", "onRestore", "auto", "refInput", "value", "width"];var _class, _class2, _temp;
 
 
 
@@ -58,6 +63,7 @@ FxInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
 
 
 
+
     input = null;_this.
 
     getProps = (0, _createPropsGetter.createPropsGetter)(FxInput.defaultProps);_this.
@@ -71,6 +77,13 @@ FxInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
 
 
 
+
+
+
+
+
+
+
     renderMain = function (props) {
       var type = props.type,onRestore = props.onRestore,auto = props.auto,refInput = props.refInput,value = props.value,width = props.width,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
       var inputProps = {
@@ -78,19 +91,29 @@ FxInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
 
 
       var button = null;
+      var inputCorners;
+      var IconFunction = /*#__PURE__*/_react.default.createElement(_px.FunctionIcon, null);
+
+      if ((0, _ThemeHelpers.isTheme2022)(_this.theme)) {
+        inputCorners = auto ? {} : { borderBottomLeftRadius: 0, borderTopLeftRadius: 0 };
+        var iconSizes = {
+          small: parseInt(_this.theme.inputIconSizeSmall),
+          medium: parseInt(_this.theme.inputIconSizeMedium),
+          large: parseInt(_this.theme.inputIconSizeLarge) };
+
+        var size = _this.props.size || _Input.Input.defaultProps.size;
+        IconFunction = /*#__PURE__*/_react.default.createElement(_MathFunctionIcon.MathFunctionIcon, { size: iconSizes[size] });
+      }
 
       if (auto) {
-        inputProps.leftIcon = /*#__PURE__*/_react.default.createElement(_px.FunctionIcon, null);
+        inputProps.leftIcon = IconFunction;
       } else {
         button = /*#__PURE__*/
-        _react.default.createElement(_Button.Button, {
-          size: _this.props.size,
-          narrow: true,
-          onClick: _this.props.onRestore,
-          borderless: _this.props.borderless,
-          disabled: _this.props.disabled }, /*#__PURE__*/
-
-        _react.default.createElement(_px.UndoIcon, null));
+        _react.default.createElement(_FxInputRestoreBtn.FxInputRestoreBtn, {
+          size: rest.size,
+          onRestore: onRestore,
+          disabled: rest.disabled,
+          borderless: rest.borderless });
 
 
       }
@@ -102,6 +125,8 @@ FxInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
         _react.default.createElement(_CurrencyInput.CurrencyInput, (0, _extends2.default)({},
         inputProps,
         rest, {
+          corners: inputCorners,
+          size: _this.props.size,
           width: '100%',
           ref: _this.refInput,
           value: value,
@@ -111,6 +136,8 @@ FxInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
         _react.default.createElement(_Input.Input, (0, _extends2.default)({},
         inputProps,
         rest, {
+          corners: inputCorners,
+          size: _this.props.size,
           width: '100%',
           ref: _this.refInput,
           type: type,
@@ -146,4 +173,4 @@ FxInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/funct
       if (_this.props.refInput) {
         _this.props.refInput(_this.input);
       }
-    };return _this;}var _proto = FxInput.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.getProps()), this.renderMain);};return FxInput;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'FxInput', _class2.propTypes = { auto: _propTypes.default.bool, type: _propTypes.default.string }, _class2.defaultProps = { width: 250, type: 'text', value: '' }, _temp)) || _class;exports.FxInput = FxInput;
+    };return _this;}var _proto = FxInput.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});};return FxInput;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'FxInput', _class2.propTypes = { auto: _propTypes.default.bool, type: _propTypes.default.string }, _class2.defaultProps = { width: 250, type: 'text', value: '' }, _temp)) || _class;exports.FxInput = FxInput;

package/cjs/components/FxInput/FxInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FxInput.tsx"],"names":["FxInputDataTids","root","FxInput","rootNode","input","getProps","defaultProps","renderMain","props","type","onRestore","auto","refInput","value","width","rest","inputProps","align","button","leftIcon","size","borderless","disabled","onValueChange","focus","blur","element","render","setRootNode","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Button } from '../Button';\nimport { Group } from '../Group';\nimport { Input, InputProps } from '../Input';\nimport { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';\nimport { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';\nimport { Override } from '../../typings/utility-types';\nimport { FunctionIcon, UndoIcon } from '../../internal/icons/16px';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nexport interface FxInputProps\n  extends CommonProps,\n    Override<\n      CurrencyInputProps,\n      {\n        /** Авто-режим */\n        auto?: boolean;\n        /** Тип инпута */\n        type?: 'currency' | InputProps['type'];\n        /** onRestore */\n        onRestore?: () => void;\n        /** onValueChange */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n        /** Значение */\n        value?: React.ReactText;\n        /** ref Input'а */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n        /** Убрать лишние нули после запятой */\n        hideTrailingZeros?: boolean;\n      }\n    > {}\n\nexport const FxInputDataTids = {\n  root: 'FxInput__root',\n} as const;\n\ntype DefaultProps = Required<Pick<FxInputProps, 'width' | 'type' | 'value'>>;\ntype DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;\n\n/** Принимает все свойства `Input`'a */\n@rootNode\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n\n  public static propTypes = {\n    auto: PropTypes.bool,\n    type: PropTypes.string,\n  };\n\n  public static defaultProps: DefaultProps = {\n    width: 250,\n    type: 'text',\n    value: '',\n  };\n\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n        {this.renderMain}\n      </CommonWrapper>\n    );\n  }\n\n  public renderMain = (props: CommonWrapperRestProps<DefaultizedFxInputProps>) => {\n    const { type, onRestore, auto, refInput, value, width, ...rest } = props;\n    const inputProps: Partial<CurrencyInputProps> = {\n      align: 'right',\n    };\n\n    let button = null;\n\n    if (auto) {\n      inputProps.leftIcon = <FunctionIcon />;\n    } else {\n      button = (\n        <Button\n          size={this.props.size}\n          narrow\n          onClick={this.props.onRestore}\n          borderless={this.props.borderless}\n          disabled={this.props.disabled}\n        >\n          <UndoIcon />\n        </Button>\n      );\n    }\n\n    return (\n      <Group data-tid={FxInputDataTids.root} width={width}>\n        {button}\n        {type === 'currency' ? (\n          <CurrencyInput\n            {...inputProps}\n            {...rest}\n            width={'100%'}\n            ref={this.refInput}\n            value={value as CurrencyInputProps['value']}\n            onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n          />\n        ) : (\n          <Input\n            {...inputProps}\n            {...rest}\n            width={'100%'}\n            ref={this.refInput}\n            type={type}\n            value={value as InputProps['value']}\n            onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n          />\n        )}\n      </Group>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private refInput = (element: Input | CurrencyInput | null) => {\n    this.input = element;\n\n    if (this.props.refInput) {\n      this.props.refInput(this.input);\n    }\n  };\n}\n"]}
+{"version":3,"sources":["FxInput.tsx"],"names":["FxInputDataTids","root","FxInput","rootNode","input","getProps","defaultProps","renderMain","props","type","onRestore","auto","refInput","value","width","rest","inputProps","align","button","inputCorners","IconFunction","theme","borderBottomLeftRadius","borderTopLeftRadius","iconSizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","size","Input","leftIcon","disabled","borderless","onValueChange","focus","blur","element","render","setRootNode","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Group } from '../Group';\nimport { Input, InputProps, InputSize } from '../Input';\nimport { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';\nimport { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';\nimport { Override } from '../../typings/utility-types';\nimport { FunctionIcon } from '../../internal/icons/16px';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { MathFunctionIcon } from './MathFunctionIcon';\nimport { FxInputRestoreBtn } from './FxInputRestoreBtn';\n\nexport interface FxInputProps\n  extends CommonProps,\n    Override<\n      CurrencyInputProps,\n      {\n        /** Авто-режим */\n        auto?: boolean;\n        /** Тип инпута */\n        type?: 'currency' | InputProps['type'];\n        /** onRestore */\n        onRestore?: () => void;\n        /** onValueChange */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n        /** Значение */\n        value?: React.ReactText;\n        /** ref Input'а */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n        /** Убрать лишние нули после запятой */\n        hideTrailingZeros?: boolean;\n      }\n    > {}\n\nexport const FxInputDataTids = {\n  root: 'FxInput__root',\n} as const;\n\ntype DefaultProps = Required<Pick<FxInputProps, 'width' | 'type' | 'value'>>;\ntype DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;\n\n/** Принимает все свойства `Input`'a */\n@rootNode\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n\n  public static propTypes = {\n    auto: PropTypes.bool,\n    type: PropTypes.string,\n  };\n\n  public static defaultProps: DefaultProps = {\n    width: 250,\n    type: 'text',\n    value: '',\n  };\n\n  private theme!: Theme;\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain = (props: CommonWrapperRestProps<DefaultizedFxInputProps>) => {\n    const { type, onRestore, auto, refInput, value, width, ...rest } = props;\n    const inputProps: Partial<CurrencyInputProps> = {\n      align: 'right',\n    };\n\n    let button = null;\n    let inputCorners: InputProps['corners'];\n    let IconFunction = <FunctionIcon />;\n\n    if (isTheme2022(this.theme)) {\n      inputCorners = auto ? {} : { borderBottomLeftRadius: 0, borderTopLeftRadius: 0 };\n      const iconSizes: Record<InputSize, number> = {\n        small: parseInt(this.theme.inputIconSizeSmall),\n        medium: parseInt(this.theme.inputIconSizeMedium),\n        large: parseInt(this.theme.inputIconSizeLarge),\n      };\n      const size = this.props.size || Input.defaultProps.size;\n      IconFunction = <MathFunctionIcon size={iconSizes[size]} />;\n    }\n\n    if (auto) {\n      inputProps.leftIcon = IconFunction;\n    } else {\n      button = (\n        <FxInputRestoreBtn\n          size={rest.size}\n          onRestore={onRestore}\n          disabled={rest.disabled}\n          borderless={rest.borderless}\n        />\n      );\n    }\n\n    return (\n      <Group data-tid={FxInputDataTids.root} width={width}>\n        {button}\n        {type === 'currency' ? (\n          <CurrencyInput\n            {...inputProps}\n            {...rest}\n            corners={inputCorners}\n            size={this.props.size}\n            width={'100%'}\n            ref={this.refInput}\n            value={value as CurrencyInputProps['value']}\n            onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n          />\n        ) : (\n          <Input\n            {...inputProps}\n            {...rest}\n            corners={inputCorners}\n            size={this.props.size}\n            width={'100%'}\n            ref={this.refInput}\n            type={type}\n            value={value as InputProps['value']}\n            onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n          />\n        )}\n      </Group>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private refInput = (element: Input | CurrencyInput | null) => {\n    this.input = element;\n\n    if (this.props.refInput) {\n      this.props.refInput(this.input);\n    }\n  };\n}\n"]}

package/cjs/components/FxInput/FxInputRestoreBtn.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FxInputProps } from './FxInput';
+declare type FxInputRestoreBtnProps = Pick<FxInputProps, 'size' | 'onRestore' | 'borderless' | 'disabled'>;
+export declare const FxInputRestoreBtn: React.FunctionComponent<FxInputRestoreBtnProps>;
+export {};

package/cjs/components/FxInput/FxInputRestoreBtn.js

@@ -0,0 +1,75 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.FxInputRestoreBtn = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireWildcard(require("react"));
+
+var _Input = require("../Input");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _Button = require("../Button");
+var _px = require("../../internal/icons/16px");
+
+var _UndoIcon = require("./UndoIcon");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 FxInputRestoreBtn = function FxInputRestoreBtn(props) {
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  var iconUndo = /*#__PURE__*/_react.default.createElement(_px.UndoIcon, null);
+  var buttonCorners;
+
+  if ((0, _ThemeHelpers.isTheme2022)(theme)) {
+    var size = props.size || _Input.Input.defaultProps.size;
+
+    var iconSizes = {
+      small: parseInt(theme.inputIconSizeSmall),
+      medium: parseInt(theme.inputIconSizeMedium),
+      large: parseInt(theme.inputIconSizeLarge) };
+
+    var cornersSizes = {
+      small: {
+        borderTopLeftRadius: theme.inputBorderRadiusSmall,
+        borderBottomLeftRadius: theme.inputBorderRadiusSmall },
+
+      medium: {
+        borderTopLeftRadius: theme.inputBorderRadiusMedium,
+        borderBottomLeftRadius: theme.inputBorderRadiusMedium },
+
+      large: {
+        borderTopLeftRadius: theme.inputBorderRadiusLarge,
+        borderBottomLeftRadius: theme.inputBorderRadiusLarge } };
+
+
+    buttonCorners = cornersSizes[size];
+    iconUndo = /*#__PURE__*/_react.default.createElement(_UndoIcon.UndoIcon, { size: iconSizes[size] });
+  }
+
+  return (0, _ThemeHelpers.isTheme2022)(theme) ? /*#__PURE__*/
+  _react.default.createElement(_Button.Button, {
+    size: props.size,
+    onClick: props.onRestore,
+    borderless: props.borderless,
+    disabled: props.disabled,
+    corners: (0, _extends2.default)({
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0 },
+    buttonCorners),
+
+    icon: iconUndo }) : /*#__PURE__*/
+
+
+  _react.default.createElement(_Button.Button, {
+    size: props.size,
+    narrow: true,
+    onClick: props.onRestore,
+    borderless: props.borderless,
+    disabled: props.disabled,
+    corners: (0, _extends2.default)({
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0 },
+    buttonCorners) },
+
+
+  iconUndo);
+
+
+};exports.FxInputRestoreBtn = FxInputRestoreBtn;

package/cjs/components/FxInput/FxInputRestoreBtn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FxInputRestoreBtn.tsx"],"names":["FxInputRestoreBtn","props","theme","ThemeContext","iconUndo","buttonCorners","size","Input","defaultProps","iconSizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","cornersSizes","borderTopLeftRadius","inputBorderRadiusSmall","borderBottomLeftRadius","inputBorderRadiusMedium","inputBorderRadiusLarge","onRestore","borderless","disabled","borderTopRightRadius","borderBottomRightRadius"],"mappings":"iPAAA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,sC;;;;;AAKO,IAAMA,iBAAkE,GAAG,SAArEA,iBAAqE,CAACC,KAAD,EAAW;AAC3F,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA,MAAIC,QAAQ,gBAAG,6BAAC,YAAD,OAAf;AACA,MAAIC,aAAJ;;AAEA,MAAI,+BAAYH,KAAZ,CAAJ,EAAwB;AACtB,QAAMI,IAAI,GAAGL,KAAK,CAACK,IAAN,IAAcC,aAAMC,YAAN,CAAmBF,IAA9C;;AAEA,QAAMG,SAAoC,GAAG;AAC3CC,MAAAA,KAAK,EAAEC,QAAQ,CAACT,KAAK,CAACU,kBAAP,CAD4B;AAE3CC,MAAAA,MAAM,EAAEF,QAAQ,CAACT,KAAK,CAACY,mBAAP,CAF2B;AAG3CC,MAAAA,KAAK,EAAEJ,QAAQ,CAACT,KAAK,CAACc,kBAAP,CAH4B,EAA7C;;AAKA,QAAMC,YAAoD,GAAG;AAC3DP,MAAAA,KAAK,EAAE;AACLQ,QAAAA,mBAAmB,EAAEhB,KAAK,CAACiB,sBADtB;AAELC,QAAAA,sBAAsB,EAAElB,KAAK,CAACiB,sBAFzB,EADoD;;AAK3DN,MAAAA,MAAM,EAAE;AACNK,QAAAA,mBAAmB,EAAEhB,KAAK,CAACmB,uBADrB;AAEND,QAAAA,sBAAsB,EAAElB,KAAK,CAACmB,uBAFxB,EALmD;;AAS3DN,MAAAA,KAAK,EAAE;AACLG,QAAAA,mBAAmB,EAAEhB,KAAK,CAACoB,sBADtB;AAELF,QAAAA,sBAAsB,EAAElB,KAAK,CAACoB,sBAFzB,EAToD,EAA7D;;;AAcAjB,IAAAA,aAAa,GAAGY,YAAY,CAACX,IAAD,CAA5B;AACAF,IAAAA,QAAQ,gBAAG,6BAAC,kBAAD,IAAc,IAAI,EAAEK,SAAS,CAACH,IAAD,CAA7B,GAAX;AACD;;AAED,SAAO,+BAAYJ,KAAZ;AACL,+BAAC,cAAD;AACE,IAAA,IAAI,EAAED,KAAK,CAACK,IADd;AAEE,IAAA,OAAO,EAAEL,KAAK,CAACsB,SAFjB;AAGE,IAAA,UAAU,EAAEtB,KAAK,CAACuB,UAHpB;AAIE,IAAA,QAAQ,EAAEvB,KAAK,CAACwB,QAJlB;AAKE,IAAA,OAAO;AACLC,MAAAA,oBAAoB,EAAE,CADjB;AAELC,MAAAA,uBAAuB,EAAE,CAFpB;AAGFtB,IAAAA,aAHE,CALT;;AAUE,IAAA,IAAI,EAAED,QAVR,GADK;;;AAcL,+BAAC,cAAD;AACE,IAAA,IAAI,EAAEH,KAAK,CAACK,IADd;AAEE,IAAA,MAAM,MAFR;AAGE,IAAA,OAAO,EAAEL,KAAK,CAACsB,SAHjB;AAIE,IAAA,UAAU,EAAEtB,KAAK,CAACuB,UAJpB;AAKE,IAAA,QAAQ,EAAEvB,KAAK,CAACwB,QALlB;AAME,IAAA,OAAO;AACLC,MAAAA,oBAAoB,EAAE,CADjB;AAELC,MAAAA,uBAAuB,EAAE,CAFpB;AAGFtB,IAAAA,aAHE,CANT;;;AAYGD,EAAAA,QAZH,CAdF;;;AA6BD,CA7DM,C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Input, InputSize } from '../Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { Button } from '../Button';\nimport { UndoIcon } from '../../internal/icons/16px';\n\nimport { UndoIcon as UndoIcon2022 } from './UndoIcon';\nimport { FxInputProps } from './FxInput';\n\ntype FxInputRestoreBtnProps = Pick<FxInputProps, 'size' | 'onRestore' | 'borderless' | 'disabled'>;\n\nexport const FxInputRestoreBtn: React.FunctionComponent<FxInputRestoreBtnProps> = (props) => {\n  const theme = useContext(ThemeContext);\n\n  let iconUndo = <UndoIcon />;\n  let buttonCorners;\n\n  if (isTheme2022(theme)) {\n    const size = props.size || Input.defaultProps.size;\n\n    const iconSizes: Record<InputSize, number> = {\n      small: parseInt(theme.inputIconSizeSmall),\n      medium: parseInt(theme.inputIconSizeMedium),\n      large: parseInt(theme.inputIconSizeLarge),\n    };\n    const cornersSizes: Record<InputSize, React.CSSProperties> = {\n      small: {\n        borderTopLeftRadius: theme.inputBorderRadiusSmall,\n        borderBottomLeftRadius: theme.inputBorderRadiusSmall,\n      },\n      medium: {\n        borderTopLeftRadius: theme.inputBorderRadiusMedium,\n        borderBottomLeftRadius: theme.inputBorderRadiusMedium,\n      },\n      large: {\n        borderTopLeftRadius: theme.inputBorderRadiusLarge,\n        borderBottomLeftRadius: theme.inputBorderRadiusLarge,\n      },\n    };\n    buttonCorners = cornersSizes[size];\n    iconUndo = <UndoIcon2022 size={iconSizes[size]} />;\n  }\n\n  return isTheme2022(theme) ? (\n    <Button\n      size={props.size}\n      onClick={props.onRestore}\n      borderless={props.borderless}\n      disabled={props.disabled}\n      corners={{\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n        ...buttonCorners,\n      }}\n      icon={iconUndo}\n    />\n  ) : (\n    <Button\n      size={props.size}\n      narrow\n      onClick={props.onRestore}\n      borderless={props.borderless}\n      disabled={props.disabled}\n      corners={{\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n        ...buttonCorners,\n      }}\n    >\n      {iconUndo}\n    </Button>\n  );\n};\n"]}

package/cjs/components/FxInput/MathFunctionIcon.d.ts

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

package/cjs/components/FxInput/MathFunctionIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.MathFunctionIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../../internal/icons2022/iconSizer");
+var _MathFunctionIcon16Light = require("../../internal/icons2022/MathFunctionIcon/MathFunctionIcon16Light");
+var _MathFunctionIcon20Light = require("../../internal/icons2022/MathFunctionIcon/MathFunctionIcon20Light");
+var _MathFunctionIcon24Regular = require("../../internal/icons2022/MathFunctionIcon/MathFunctionIcon24Regular"); /* eslint-disable react/display-name */
+
+var MathFunctionIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_MathFunctionIcon16Light.MathFunctionIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_MathFunctionIcon20Light.MathFunctionIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_MathFunctionIcon24Regular.MathFunctionIcon24Regular, null);} },
+
+'MathFunctionIcon');exports.MathFunctionIcon = MathFunctionIcon;

package/cjs/components/FxInput/MathFunctionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MathFunctionIcon.tsx"],"names":["MathFunctionIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,gH,CANA;;AAQO,IAAMA,gBAAgB,GAAG;AAC9B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,gDAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,gDAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,oDAAD,OAAN,EAHT,EAD8B;;AAM9B,kBAN8B,CAAzB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { MathFunctionIcon16Light } from '../../internal/icons2022/MathFunctionIcon/MathFunctionIcon16Light';\nimport { MathFunctionIcon20Light } from '../../internal/icons2022/MathFunctionIcon/MathFunctionIcon20Light';\nimport { MathFunctionIcon24Regular } from '../../internal/icons2022/MathFunctionIcon/MathFunctionIcon24Regular';\n\nexport const MathFunctionIcon = iconSizer(\n  {\n    small: () => <MathFunctionIcon16Light />,\n    medium: () => <MathFunctionIcon20Light />,\n    large: () => <MathFunctionIcon24Regular />,\n  },\n  'MathFunctionIcon',\n);\n"]}

package/cjs/components/FxInput/UndoIcon.d.ts

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

package/cjs/components/FxInput/UndoIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.UndoIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../../internal/icons2022/iconSizer");
+var _ArrowShapeDRadiusUpLeftIcon16Light = require("../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon16Light");
+var _ArrowShapeDRadiusUpLeftIcon24Regular = require("../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon24Regular");
+var _ArrowShapeDRadiusUpLeftIcon20Light = require("../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon20Light"); /* eslint-disable react/display-name */
+
+var UndoIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowShapeDRadiusUpLeftIcon16Light.ArrowShapeDRadiusUpLeftIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowShapeDRadiusUpLeftIcon20Light.ArrowShapeDRadiusUpLeftIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowShapeDRadiusUpLeftIcon24Regular.ArrowShapeDRadiusUpLeftIcon24Regular, null);} },
+
+'UndoIcon');exports.UndoIcon = UndoIcon;

package/cjs/components/FxInput/UndoIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["UndoIcon.tsx"],"names":["UndoIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,6I,CANA;;AAQO,IAAMA,QAAQ,GAAG;AACtB;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,sEAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,sEAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,0EAAD,OAAN,EAHT,EADsB;;AAMtB,UANsB,CAAjB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { ArrowShapeDRadiusUpLeftIcon16Light } from '../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon16Light';\nimport { ArrowShapeDRadiusUpLeftIcon24Regular } from '../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon24Regular';\nimport { ArrowShapeDRadiusUpLeftIcon20Light } from '../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon20Light';\n\nexport const UndoIcon = iconSizer(\n  {\n    small: () => <ArrowShapeDRadiusUpLeftIcon16Light />,\n    medium: () => <ArrowShapeDRadiusUpLeftIcon20Light />,\n    large: () => <ArrowShapeDRadiusUpLeftIcon24Regular />,\n  },\n  'UndoIcon',\n);\n"]}

package/cjs/components/Group/Group.d.ts

@@ -4,14 +4,17 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface GroupProps extends CommonProps {
     width?: React.CSSProperties['width'];
 }
+export declare const getButtonCorners: (isFirstChild: boolean, isLastChild: boolean) => React.CSSProperties;
 export declare const GroupDataTids: {
     readonly root: "Group__root";
 };
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
     private setRootNode;
+    private theme;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };
     render(): JSX.Element;
+    renderMain(): JSX.Element;
 }

package/cjs/components/Group/Group.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.GroupDataTids = exports.Group = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.getButtonCorners = exports.GroupDataTids = exports.Group = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _client = require("../../lib/client");
@@ -6,6 +6,10 @@ var _Button = require("../Button");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
+var _utils = require("../../lib/utils");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _Group = require("./Group.styles");var _class, _class2, _temp;
 
@@ -36,23 +40,19 @@ var getLastChild = function getLastChild(children) {
   return children == null ? void 0 : children[numberOfChildren - 1];
 };
 
-var getButtonCorners = function getButtonCorners(
-child,
-firstChild,
-lastChild)
-{
-  if (firstChild === lastChild) {
+var getButtonCorners = function getButtonCorners(isFirstChild, isLastChild) {
+  if (isFirstChild && isLastChild) {
     return {};
   }
 
-  if (child === firstChild) {
+  if (isFirstChild) {
     return {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0 };
 
   }
 
-  if (child === lastChild) {
+  if (isLastChild) {
     return {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0 };
@@ -62,13 +62,20 @@ lastChild)
   return {
     borderRadius: 0 };
 
-};
+};exports.getButtonCorners = getButtonCorners;
 
-var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild) {
+var passCornersIfButton = function passCornersIfButton(
+child,
+firstChild,
+lastChild,
+isInputLikeToo)
+{if (isInputLikeToo === void 0) {isInputLikeToo = false;}
+  var corners = getButtonCorners(child === firstChild, child === lastChild);
   if ((0, _Button.isButton)(child)) {
-    var corners = getButtonCorners(child, firstChild, lastChild);
-
-    return /*#__PURE__*/_react.default.cloneElement(child, { corners: corners });
+    return /*#__PURE__*/_react.default.cloneElement(child, { corners: (0, _extends2.default)({}, corners, child.props.corners) });
+  }
+  if (isInputLikeToo && (0, _utils.isInputLike)(child)) {
+    return /*#__PURE__*/_react.default.cloneElement(child, { corners: (0, _extends2.default)({}, corners, child.props.corners) });
   }
 
   return child;
@@ -87,7 +94,19 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
   render = function render() {var _this = this;
+    return /*#__PURE__*/(
+      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
+      function (theme) {
+        _this.theme = theme;
+        return _this.renderMain();
+      }));
+
+
+  };_proto.
+
+  renderMain = function renderMain() {var _this2 = this;
     var style = {
       width: this.props.width };
 
@@ -106,7 +125,7 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
         var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
 
-        var modifiedChild = passCornersIfButton(child, firstChild, lastChild);
+        var modifiedChild = passCornersIfButton(child, firstChild, lastChild, (0, _ThemeHelpers.isTheme2022)(_this2.theme));
 
         var isFirstChild = child === firstChild;
 
@@ -115,7 +134,7 @@ Group = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
             className: (0, _Emotion.cx)((_cx = {}, _cx[
             _Group.styles.fixed()] = !isWidthInPercent, _cx[
             _Group.styles.stretch()] = isWidthInPercent, _cx[
-            _Group.styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (_client.isIE11 || _client.isEdge)), _cx)) }, /*#__PURE__*/
+            _Group.styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (_client.isIE11 || _client.isEdge)), _cx)) }, /*#__PURE__*/
 
 
           _react.default.createElement("div", {

package/cjs/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","React","Children","count","getButtonCorners","child","firstChild","lastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","corners","cloneElement","GroupDataTids","root","Group","rootNode","render","style","width","props","childrenArray","toArray","setRootNode","styles","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","isFirstChild","fixed","stretch","stretchFallback","isIE11","isEdge","item","itemFirst","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nconst getButtonCorners = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n): React.CSSProperties => {\n  if (firstChild === lastChild) {\n    return {};\n  }\n\n  if (child === firstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (child === lastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  if (isButton(child)) {\n    const corners = getButtonCorners(child, firstChild, lastChild);\n\n    return React.cloneElement(child, { corners });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild);\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","React","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","rootNode","render","theme","renderMain","style","width","childrenArray","toArray","setRootNode","styles","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","fixed","stretch","stretchFallback","isIE11","isEdge","item","itemFirst","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","number","string"],"mappings":"sXAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,uC;;;;;;;;;;;AAWA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,QAAD,EAA+B;AACnD,MAAI,CAACC,KAAK,CAACC,OAAN,CAAcF,QAAd,CAAL,EAA8B;AAC5B,WAAOA,QAAP;AACD;;AAED,SAAOA,QAAP,oBAAOA,QAAQ,CAAG,CAAH,CAAf;AACD,CAND;;AAQA,IAAMG,YAAY,GAAG,SAAfA,YAAe,CAACH,QAAD,EAA+B;AAClD,MAAI,CAACC,KAAK,CAACC,OAAN,CAAcF,QAAd,CAAL,EAA8B;AAC5B,WAAOA,QAAP;AACD;;AAED,MAAMI,gBAAgB,GAAGC,eAAMC,QAAN,CAAeC,KAAf,CAAqBP,QAArB,CAAzB;;AAEA,SAAOA,QAAP,oBAAOA,QAAQ,CAAGI,gBAAgB,GAAG,CAAtB,CAAf;AACD,CARD;;AAUO,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,YAAD,EAAwBC,WAAxB,EAAsE;AACpG,MAAID,YAAY,IAAIC,WAApB,EAAiC;AAC/B,WAAO,EAAP;AACD;;AAED,MAAID,YAAJ,EAAkB;AAChB,WAAO;AACLE,MAAAA,oBAAoB,EAAE,CADjB;AAELC,MAAAA,uBAAuB,EAAE,CAFpB,EAAP;;AAID;;AAED,MAAIF,WAAJ,EAAiB;AACf,WAAO;AACLG,MAAAA,mBAAmB,EAAE,CADhB;AAELC,MAAAA,sBAAsB,EAAE,CAFnB,EAAP;;AAID;;AAED,SAAO;AACLC,IAAAA,YAAY,EAAE,CADT,EAAP;;AAGD,CAtBM,C;;AAwBP,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB;AAC1BC,KAD0B;AAE1BC,UAF0B;AAG1BC,SAH0B;AAI1BC,cAJ0B;AAKvB,KADHA,cACG,cADHA,cACG,GADc,KACd;AACH,MAAMC,OAAO,GAAGb,gBAAgB,CAACS,KAAK,KAAKC,UAAX,EAAuBD,KAAK,KAAKE,SAAjC,CAAhC;AACA,MAAI,sBAASF,KAAT,CAAJ,EAAqB;AACnB,wBAAOZ,eAAMiB,YAAN,CAAmBL,KAAnB,EAA0B,EAAEI,OAAO,6BAAOA,OAAP,EAAmBJ,KAAK,CAACM,KAAN,CAAYF,OAA/B,CAAT,EAA1B,CAAP;AACD;AACD,MAAID,cAAc,IAAI,wBAAYH,KAAZ,CAAtB,EAA0C;AACxC,wBAAOZ,eAAMiB,YAAN,CAAmBL,KAAnB,EAA0B,EAAEI,OAAO,6BAAOA,OAAP,EAAmBJ,KAAK,CAACM,KAAN,CAAYF,OAA/B,CAAT,EAA1B,CAAP;AACD;;AAED,SAAOJ,KAAP;AACD,CAfD;;AAiBO,IAAMO,aAAa,GAAG;AAC3BC,EAAAA,IAAI,EAAE,aADqB,EAAtB,C;;;;AAKMC,K,OADZC,kB;;;;;;;;;AAUQC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB,QAAMC,KAA0B,GAAG;AACjCC,MAAAA,KAAK,EAAE,KAAKT,KAAL,CAAWS,KADe,EAAnC;;;AAIA,QAAMC,aAAa,GAAG5B,eAAMC,QAAN,CAAe4B,OAAf,CAAuB,KAAKX,KAAL,CAAWvB,QAAlC,CAAtB;AACA,QAAMkB,UAAU,GAAGnB,aAAa,CAACkC,aAAD,CAAhC;AACA,QAAMd,SAAS,GAAGhB,YAAY,CAAC8B,aAAD,CAA9B;;AAEA;AACE,mCAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKE,WAAjC,IAAkD,KAAKZ,KAAvD;AACE,6CAAM,YAAUC,aAAa,CAACC,IAA9B,EAAoC,SAAS,EAAEW,cAAOX,IAAP,EAA/C,EAA8D,KAAK,EAAEM,KAArE;AACG1B,qBAAMC,QAAN,CAAe+B,GAAf,CAAmBJ,aAAnB,EAAkC,UAAChB,KAAD,EAAW;AAC5C,YAAI,CAACA,KAAD,IAAU,eAACZ,eAAMiC,cAAN,CAAsCrB,KAAtC,CAAf,EAA6D;AAC3D,iBAAO,IAAP;AACD;;AAED,YAAMsB,gBAAgB,GAAGC,OAAO,CAACvB,KAAK,CAACM,KAAN,CAAYS,KAAZ,IAAqBf,KAAK,CAACM,KAAN,CAAYS,KAAZ,CAAkBS,QAAlB,GAA6BC,QAA7B,CAAsC,GAAtC,CAAtB,CAAhC;;AAEA,YAAMC,aAAa,GAAG3B,mBAAmB,CAACC,KAAD,EAAQC,UAAR,EAAoBC,SAApB,EAA+B,+BAAY,MAAI,CAACU,KAAjB,CAA/B,CAAzC;;AAEA,YAAMpB,YAAY,GAAGQ,KAAK,KAAKC,UAA/B;;AAEA;AACE;AACE,YAAA,SAAS,EAAE;AACRkB,0BAAOQ,KAAP,EADQ,IACS,CAACL,gBADV;AAERH,0BAAOS,OAAP,EAFQ,IAEWN,gBAFX;AAGRH,0BAAOU,eAAP,EAHQ,IAGmBN,OAAO,CAACD,gBAAgB,IAAI,MAAI,CAAChB,KAAL,CAAWS,KAA/B,KAAyCe,kBAAUC,cAAnD,CAAD,CAH1B,OADb;;;AAOE;AACE,YAAA,SAAS,EAAE;AACRZ,0BAAOa,IAAP,EADQ,IACQ,IADR;AAERb,0BAAOc,SAAP,EAFQ,IAEazC,YAFb,QADb;;;AAMGkC,UAAAA,aANH,CAPF,CADF;;;;AAkBD,OA7BA,CADH,CADF,CADF;;;;AAoCD,G,gBAjEwBtC,eAAM8C,S,WACjBC,mB,GAAsB,O,UAItBC,S,GAAY,EACxBrB,KAAK,EAAEsB,mBAAUC,SAAV,CAAoB,CAACD,mBAAUE,MAAX,EAAmBF,mBAAUG,MAA7B,CAApB,CADiB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/cjs/components/Hint/Hint.d.ts

@@ -53,6 +53,7 @@ export interface HintProps extends CommonProps {
 }
 export interface HintState {
     opened: boolean;
+    position: PopupPositionsType;
 }
 declare type DefaultProps = Required<Pick<HintProps, 'pos' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
 /**
@@ -60,7 +61,6 @@ declare type DefaultProps = Required<Pick<HintProps, 'pos' | 'manual' | 'opened'
  */
 export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
     static __KONTUR_REACT_UI__: string;
-    private isMobileLayout;
     static defaultProps: DefaultProps;
     private getProps;
     state: HintState;
@@ -71,14 +71,12 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     componentDidUpdate(prevProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
-    renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
     getAnchorElement: () => Nullable<Element>;
     private renderContent;
     private getPositions;
     private handleMouseEnter;
     private handleMouseLeave;
-    private close;
     private open;
 }
 export {};

package/cjs/components/Hint/Hint.js

@@ -9,7 +9,6 @@ var _Popup = require("../../internal/Popup");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
-var _decorator = require("../ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
 
 var _createPropsGetter = require("../../lib/createPropsGetter");
@@ -68,6 +67,7 @@ var HINT_BORDER_COLOR = 'transparent';
 
 
 
+
 
 
 var Positions = [
@@ -93,10 +93,7 @@ var Positions = [
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */var
 
-
-Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(Hint, _React$PureComponent);function Hint() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
-
-
+Hint = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(Hint, _React$PureComponent);function Hint() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
 
 
@@ -111,7 +108,8 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
     getProps = (0, _createPropsGetter.createPropsGetter)(Hint.defaultProps);_this.
 
     state = {
-      opened: _this.getProps().manual ? !!_this.getProps().opened : false };_this.
+      opened: _this.getProps().manual ? !!_this.getProps().opened : false,
+      position: _Popup.DUMMY_LOCATION.position };_this.
 
 
     timer = null;_this.
@@ -175,21 +173,6 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -254,10 +237,6 @@ Hint = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
       }
     };_this.
 
-    close = function () {
-      _this.setState({ opened: false });
-    };_this.
-
     open = function () {
       _this.setState({ opened: true });
-    };return _this;}var _proto = Hint.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),opened = _this$getProps.opened,manual = _this$getProps.manual;if (!manual) {return;}if (this.timer) {clearTimeout(this.timer);this.timer = null;}if (opened !== prevProps.opened) {this.setState({ opened: !!opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.hintPinOffset, popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _this2.theme) }, _this2.isMobileLayout ? _this2.renderMobile() : _this2.renderMain());});};_proto.renderMobile = function renderMobile() {var manual = this.getProps().manual;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: this.state.opened, anchorElement: this.props.children, positions: [], onClick: !manual ? this.open : undefined, mobileOnCloseRequest: !manual ? this.close : undefined }, this.renderContent()));};_proto.renderMain = function renderMain() {var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,useWrapper = _this$getProps2.useWrapper;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: true, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), backgroundColor: this.theme.hintBgColor, borderColor: HINT_BORDER_COLOR, disableAnimations: disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$getProps3 = this.getProps(),maxWidth = _this$getProps3.maxWidth,pos = _this$getProps3.pos;var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint.styles.content(this.theme)] = true, _cx[_Hint.styles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cx[_Hint.styles.mobileContent(this.theme)] = this.isMobileLayout, _cx));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: this.isMobileLayout ? '100%' : maxWidth } }, this.props.text);};return Hint;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = { pos: 'top', manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false }, _temp)) || _class) || _class;exports.Hint = Hint;
+    };return _this;}var _proto = Hint.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),opened = _this$getProps.opened,manual = _this$getProps.manual;if (!manual) {return;}if (this.timer) {clearTimeout(this.timer);this.timer = null;}if (opened !== prevProps.opened) {this.setState({ opened: !!opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.hintPinOffset, popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _this2.theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,useWrapper = _this$getProps2.useWrapper;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: true, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), backgroundColor: this.theme.hintBgColor, borderColor: HINT_BORDER_COLOR, onPositionChange: function onPositionChange(position) {return _this3.setState({ position: position });}, disableAnimations: disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef, withoutMobile: true }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$getProps3 = this.getProps(),maxWidth = _this$getProps3.maxWidth;var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint.styles.content(this.theme)] = true, _cx[_Hint.styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _cx));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: maxWidth } }, this.props.text);};return Hint;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = { pos: 'top', manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false }, _temp)) || _class;exports.Hint = Hint;