@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

package/components/FxInput/FxInput.d.ts

@@ -1,44 +1,68 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import Input, { InputProps } from '../Input';
-import CurrencyInput, { CurrencyInputProps } from '../CurrencyInput';
-import { Override } from '../../typings/utility-types';
-export declare type FxInputProps = Override<CurrencyInputProps, {
-    /** Авто-режим */
-    auto?: boolean;
-    /** Тип инпута */
-    type?: 'currency' | InputProps['type'];
-    /** onRestore */
-    onRestore?: () => void;
-    /** onChange */
-    onChange: CurrencyInputProps['onChange'] | InputProps['onChange'];
-    /** Значение */
-    value?: React.ReactText;
-    /** ref Input'а */
-    refInput?: (element: CurrencyInput | Input | null) => void;
-}>;
-export interface FxInputDefaultProps {
-    width: FxInputProps['width'];
-    type: FxInputProps['type'];
-}
-/** Принимает все свойства `Input`'a */
-declare class FxInput extends React.Component<FxInputProps> {
-    static propTypes: {
-        auto: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<string>;
-    };
-    static defaultProps: FxInputDefaultProps;
-    private input;
-    private getProps;
-    render(): JSX.Element;
-    /**
-     * @public
-     */
-    focus: () => void;
-    /**
-     * @public
-     */
-    blur: () => void;
-    private refInput;
-}
-export default FxInput;
+import type { AriaAttributes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputProps } from '../Input';
+import { Input } from '../Input';
+import type { CurrencyInputProps } from '../CurrencyInput';
+import { CurrencyInput } from '../CurrencyInput';
+import type { DefaultizedProps } from '../../lib/createPropsGetter';
+import type { Override } from '../../typings/utility-types';
+import type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+export interface FxInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Override<CurrencyInputProps, {
+    /** Устанавливает авто-режим. */
+    auto?: boolean;
+    /** Задает тип инпута */
+    type?: 'currency' | InputProps['type'];
+    /** Задает функцию, которая вызывается при нажатии на кнопку Restore. */
+    onRestore?: () => void;
+    /** Задает функцию, вызывающуюся при изменении value. */
+    onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];
+    /** Задает значение инпута. */
+    value?: React.ReactText;
+    /** Задает ref инпута. */
+    refInput?: (element: CurrencyInput | Input | null) => void;
+    /** Убирает лишние нули после запятой. */
+    hideTrailingZeros?: boolean;
+    /** Задает атрибут aria-label кнопке восстановления (restore button). */
+    buttonAriaLabel?: AriaAttributes['aria-label'];
+    /** @ignore */
+    corners?: React.CSSProperties;
+}> {
+}
+export declare const FxInputDataTids: {
+    readonly root: "FxInput__root";
+};
+type DefaultProps = Required<Pick<FxInputProps, 'width' | 'type' | 'value'>>;
+type DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;
+/**
+ * Автополе `FxInput`.
+ *
+ * Используйте `FxInput`, если поле вычисляемое и вы рассчитали значение.
+ *
+ * Принимает все свойства `Input`'a.
+ */
+export declare class FxInput extends React.Component<FxInputProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static propTypes: {
+        auto: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
+    };
+    static defaultProps: DefaultProps;
+    private theme;
+    private input;
+    private getProps;
+    private setRootNode;
+    render(): React.JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<DefaultizedFxInputProps>) => React.JSX.Element;
+    /**
+     * @public
+     */
+    focus: () => void;
+    /**
+     * @public
+     */
+    blur: () => void;
+    private refInput;
+}
+export {};

package/components/FxInput/FxInput.md

@@ -0,0 +1,31 @@
+### Базовый пример
+```jsx harmony
+const [auto, setAuto] = React.useState(false);
+const [value, setValue] = React.useState();
+
+function handleValueChange(value) {
+  setAuto(false);
+  setValue(value);
+}
+
+function handleRestore() {
+  setAuto(true);
+  setValue('auto');
+}
+
+<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
+```
+
+### Очистка значения
+Очистить значение в `FxInput`'е можно с помощью пустой строки или `undefined`
+```jsx harmony
+import { Group, Button } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState(12345);
+
+<Group>
+  <FxInput value={value} onValueChange={setValue} />
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+  <Button onClick={() => setValue('')}>Пустая строка</Button>
+</Group>
+```

package/components/FxInput/FxInputRestoreBtn/FxInputRestoreBtn.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import { Input } from "../../Input";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { Button } from "../../Button";
+import { UndoIcon } from "../UndoIcon";
+export var FxInputRestoreBtn = function FxInputRestoreBtn(props) {
+  var theme = useContext(ThemeContext);
+  var size = props.size || 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
+    }
+  };
+  var buttonCorners = cornersSizes[size];
+  var iconUndo = /*#__PURE__*/React.createElement(UndoIcon, {
+    size: iconSizes[size]
+  });
+  return /*#__PURE__*/(
+    React.createElement(Button, {
+      size: props.size,
+      onClick: props.onRestore,
+      borderless: props.borderless,
+      disabled: props.disabled,
+      corners: _extends({
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      }, buttonCorners, props.corners),
+      icon: iconUndo,
+      "aria-label": props['aria-label']
+    })
+  );
+};

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useContext","Input","ThemeContext","Button","UndoIcon","FxInputRestoreBtn","props","theme","size","defaultProps","iconSizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","cornersSizes","borderTopLeftRadius","inputBorderRadiusSmall","borderBottomLeftRadius","inputBorderRadiusMedium","inputBorderRadiusLarge","buttonCorners","iconUndo","createElement","onClick","onRestore","borderless","disabled","corners","_extends","borderTopRightRadius","borderBottomRightRadius","icon"],"sources":["FxInputRestoreBtn.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React, { useContext } from 'react';\n\nimport { Input } from '../Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Button } from '../Button';\nimport type { SizeProp } from '../../lib/types/props';\n\nimport { UndoIcon } from './UndoIcon';\nimport type { FxInputProps } from './FxInput';\n\ninterface FxInputRestoreBtnProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<FxInputProps, 'size' | 'onRestore' | 'borderless' | 'disabled'> {\n  /** @ignore */\n  corners?: React.CSSProperties;\n}\n\nexport const FxInputRestoreBtn: React.FunctionComponent<FxInputRestoreBtnProps> = (props) => {\n  const theme = useContext(ThemeContext);\n\n  const size = props.size || Input.defaultProps.size;\n\n  const iconSizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const cornersSizes: Record<SizeProp, 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  const buttonCorners = cornersSizes[size];\n  const iconUndo = <UndoIcon size={iconSizes[size]} />;\n\n  return (\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        ...props.corners,\n      }}\n      icon={iconUndo}\n      aria-label={props['aria-label']}\n    />\n  );\n};\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,MAAM,QAAQ,WAAW;;;AAGlC,SAASC,QAAQ,QAAQ,YAAY;;;;;;;;;;AAUrC,OAAO,IAAMC,iBAAkE,GAAG,SAArEA,iBAAkEA,CAAIC,KAAK,EAAK;EAC3F,IAAMC,KAAK,GAAGP,UAAU,CAACE,YAAY,CAAC;;EAEtC,IAAMM,IAAI,GAAGF,KAAK,CAACE,IAAI,IAAIP,KAAK,CAACQ,YAAY,CAACD,IAAI;;EAElD,IAAME,SAAmC,GAAG;IAC1CC,KAAK,EAAEC,QAAQ,CAACL,KAAK,CAACM,kBAAkB,CAAC;IACzCC,MAAM,EAAEF,QAAQ,CAACL,KAAK,CAACQ,mBAAmB,CAAC;IAC3CC,KAAK,EAAEJ,QAAQ,CAACL,KAAK,CAACU,kBAAkB;EAC1C,CAAC;EACD,IAAMC,YAAmD,GAAG;IAC1DP,KAAK,EAAE;MACLQ,mBAAmB,EAAEZ,KAAK,CAACa,sBAAsB;MACjDC,sBAAsB,EAAEd,KAAK,CAACa;IAChC,CAAC;IACDN,MAAM,EAAE;MACNK,mBAAmB,EAAEZ,KAAK,CAACe,uBAAuB;MAClDD,sBAAsB,EAAEd,KAAK,CAACe;IAChC,CAAC;IACDN,KAAK,EAAE;MACLG,mBAAmB,EAAEZ,KAAK,CAACgB,sBAAsB;MACjDF,sBAAsB,EAAEd,KAAK,CAACgB;IAChC;EACF,CAAC;EACD,IAAMC,aAAa,GAAGN,YAAY,CAACV,IAAI,CAAC;EACxC,IAAMiB,QAAQ,gBAAG1B,KAAA,CAAA2B,aAAA,CAACtB,QAAQ,IAACI,IAAI,EAAEE,SAAS,CAACF,IAAI,CAAE,EAAE,CAAC;;EAEpD;IACET,KAAA,CAAA2B,aAAA,CAACvB,MAAM;MACLK,IAAI,EAAEF,KAAK,CAACE,IAAK;MACjBmB,OAAO,EAAErB,KAAK,CAACsB,SAAU;MACzBC,UAAU,EAAEvB,KAAK,CAACuB,UAAW;MAC7BC,QAAQ,EAAExB,KAAK,CAACwB,QAAS;MACzBC,OAAO,EAAAC,QAAA;QACLC,oBAAoB,EAAE,CAAC;QACvBC,uBAAuB,EAAE,CAAC;MACvBV,aAAa;MACblB,KAAK,CAACyB,OAAO,CAChB;;MACFI,IAAI,EAAEV,QAAS;MACf,cAAYnB,KAAK,CAAC,YAAY,CAAE;IACjC,CAAC;;AAEN,CAAC","ignoreList":[]}

package/components/FxInput/FxInputRestoreBtn/package.json

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

package/components/FxInput/FxInputRestoreBtn.d.ts

@@ -0,0 +1,9 @@
+import type { AriaAttributes } from 'react';
+import React from 'react';
+import type { FxInputProps } from './FxInput';
+interface FxInputRestoreBtnProps extends Pick<AriaAttributes, 'aria-label'>, Pick<FxInputProps, 'size' | 'onRestore' | 'borderless' | 'disabled'> {
+    /** @ignore */
+    corners?: React.CSSProperties;
+}
+export declare const FxInputRestoreBtn: React.FunctionComponent<FxInputRestoreBtnProps>;
+export {};

package/components/FxInput/MathFunctionIcon/MathFunctionIcon.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+import { MathFunctionIcon16Light } from "../../../internal/icons2022/MathFunctionIcon/MathFunctionIcon16Light";
+import { MathFunctionIcon20Light } from "../../../internal/icons2022/MathFunctionIcon/MathFunctionIcon20Light";
+import { MathFunctionIcon24Regular } from "../../../internal/icons2022/MathFunctionIcon/MathFunctionIcon24Regular";
+export var MathFunctionIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(MathFunctionIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(MathFunctionIcon20Light, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(MathFunctionIcon24Regular, null);
+  }
+}, 'MathFunctionIcon');

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","iconSizer","MathFunctionIcon16Light","MathFunctionIcon20Light","MathFunctionIcon24Regular","MathFunctionIcon","small","createElement","medium","large"],"sources":["MathFunctionIcon.tsx"],"sourcesContent":["import 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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,uBAAuB,QAAQ,mEAAmE;AAC3G,SAASC,uBAAuB,QAAQ,mEAAmE;AAC3G,SAASC,yBAAyB,QAAQ,qEAAqE;;AAE/G,OAAO,IAAMC,gBAAgB,GAAGJ,SAAS;EACvC;IACEK,KAAK,EAAE,SAAAA,MAAA,uBAAMN,KAAA,CAAAO,aAAA,CAACL,uBAAuB,MAAE,CAAC;IACxCM,MAAM,EAAE,SAAAA,OAAA,uBAAMR,KAAA,CAAAO,aAAA,CAACJ,uBAAuB,MAAE,CAAC;IACzCM,KAAK,EAAE,SAAAA,MAAA,uBAAMT,KAAA,CAAAO,aAAA,CAACH,yBAAyB,MAAE,CAAC;EAC5C,CAAC;EACD;AACF,CAAC","ignoreList":[]}

package/components/FxInput/MathFunctionIcon/package.json

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

package/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/components/FxInput/UndoIcon/UndoIcon.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+import { ArrowShapeDRadiusUpLeftIcon16Light } from "../../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon16Light";
+import { ArrowShapeDRadiusUpLeftIcon24Regular } from "../../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon24Regular";
+import { ArrowShapeDRadiusUpLeftIcon20Light } from "../../../internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon20Light";
+export var UndoIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ArrowShapeDRadiusUpLeftIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ArrowShapeDRadiusUpLeftIcon20Light, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ArrowShapeDRadiusUpLeftIcon24Regular, null);
+  }
+}, 'UndoIcon');

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","iconSizer","ArrowShapeDRadiusUpLeftIcon16Light","ArrowShapeDRadiusUpLeftIcon24Regular","ArrowShapeDRadiusUpLeftIcon20Light","UndoIcon","small","createElement","medium","large"],"sources":["UndoIcon.tsx"],"sourcesContent":["import 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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,kCAAkC,QAAQ,yFAAyF;AAC5I,SAASC,oCAAoC,QAAQ,2FAA2F;AAChJ,SAASC,kCAAkC,QAAQ,yFAAyF;;AAE5I,OAAO,IAAMC,QAAQ,GAAGJ,SAAS;EAC/B;IACEK,KAAK,EAAE,SAAAA,MAAA,uBAAMN,KAAA,CAAAO,aAAA,CAACL,kCAAkC,MAAE,CAAC;IACnDM,MAAM,EAAE,SAAAA,OAAA,uBAAMR,KAAA,CAAAO,aAAA,CAACH,kCAAkC,MAAE,CAAC;IACpDK,KAAK,EAAE,SAAAA,MAAA,uBAAMT,KAAA,CAAAO,aAAA,CAACJ,oCAAoC,MAAE,CAAC;EACvD,CAAC;EACD;AACF,CAAC","ignoreList":[]}

package/components/FxInput/UndoIcon/package.json

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

package/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/components/FxInput/__creevey__/FxInput.creevey.d.mts

@@ -0,0 +1 @@
+export {};

package/components/FxInput/__creevey__/FxInput.creevey.mts

@@ -0,0 +1,21 @@
+import { story, kind, test } from 'creevey';
+
+kind('FxInput', () => {
+  story('WithWidthStory', () => {
+    test('inside auto container', async (context) => {
+      const element = await context.webdriver.findElement({ css: '[data-tid="container"]' });
+      await context.matchImage(await element.takeScreenshot(), 'inside auto container');
+    });
+
+    test('inside fixed container', async (context) => {
+      const element = await context.webdriver.findElement({ css: '[data-tid="container"]' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#toggle-width' }))
+        .perform();
+      await context.matchImage(await element.takeScreenshot(), 'inside fixed container');
+    });
+  });
+});

package/components/FxInput/__docs__/FxInput.mdx

@@ -0,0 +1,27 @@
+import * as FxInputStories from './FxInput.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+import { Header } from '../../../.storybook/Header';
+import { PropsTable } from '../../../.storybook/PropsTable';
+
+<Meta of={FxInputStories} />
+
+<Header
+  component="FxInput"
+  guides="https://guides.kontur.ru/components/input-fields/input/#11"
+  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602"
+/>
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<PropsTable />
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/components/FxInput/index/index.js

@@ -0,0 +1 @@
+export * from "../FxInput";

package/components/FxInput/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from './FxInput';\n"],"mappings":"AAAA,cAAc,WAAW","ignoreList":[]}

package/components/FxInput/index/package.json

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

package/components/FxInput/index.d.ts

@@ -1 +1 @@
-export { default, FxInputProps } from './FxInput';
+export * from './FxInput';

package/components/FxInput/package.json

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

package/components/Gapped/Gapped/Gapped.js

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class, _Gapped;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isNonNullable } from "../../../lib/utils";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+export var GappedDataTids = {
+  vertical: 'Gapped__vertical',
+  horizontal: 'Gapped__horizontal'
+};
+
+/**
+ * Контейнер `Gapped` устанавливает расстояние равное `gap` между элементами.
+ */
+export var Gapped = rootNode(_class = (_Gapped = /*#__PURE__*/function (_React$Component) {
+  function Gapped() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Gapped.defaultProps);
+    return _this;
+  }
+  _inheritsLoose(Gapped, _React$Component);
+  var _proto = Gapped.prototype;
+  _proto.render = function render() {
+    return /*#__PURE__*/(
+      React.createElement(CommonWrapper, _extends({
+        rootNodeRef: this.setRootNode
+      }, this.props), this.getProps().vertical ? this.renderVertical() : this.renderHorizontal())
+    );
+  };
+  _proto.getGapValue = function getGapValue() {
+    // DEPRECATED remove in 4.0
+    var propsGap = this.props.gap;
+    if (isNonNullable(propsGap)) {
+      return propsGap;
+    }
+    return 8;
+  };
+  _proto.renderVertical = function renderVertical() {
+    var subsequentItemStyle = {
+      paddingTop: this.getGapValue()
+    };
+    var children = React.Children.toArray(this.props.children).filter(this.filterChildren).map(function (child, index) {
+      var style = index === 0 ? undefined : subsequentItemStyle;
+      return /*#__PURE__*/(
+        React.createElement("div", {
+          style: style,
+          key: index
+        }, child)
+      );
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": GappedDataTids.vertical
+    }, children);
+  };
+  _proto.renderHorizontal = function renderHorizontal() {
+    var _this$props = this.props,
+      children = _this$props.children,
+      verticalAlign = _this$props.verticalAlign;
+    var wrap = this.getProps().wrap;
+    var gap = this.getGapValue();
+    var itemStyle = _extends({
+      display: 'inline-block',
+      verticalAlign: verticalAlign
+    }, wrap ? {
+      marginLeft: gap,
+      marginTop: gap
+    } : {});
+    var rootStyle = wrap ? {
+      paddingTop: 1
+    } : {};
+    var contStyle = wrap ? {
+      marginTop: -gap - 1,
+      marginLeft: -gap
+    } : {
+      whiteSpace: 'nowrap'
+    };
+    return /*#__PURE__*/(
+      React.createElement("div", {
+        "data-tid": GappedDataTids.horizontal,
+        style: rootStyle
+      }, /*#__PURE__*/
+      React.createElement("div", {
+        style: contStyle
+      }, React.Children.toArray(children).filter(this.filterChildren).map(function (child, index) {
+        var marginLeft = index === 0 ? undefined : gap;
+        return /*#__PURE__*/(
+          React.createElement("span", {
+            key: index,
+            style: _extends({
+              marginLeft: marginLeft
+            }, itemStyle)
+          }, child)
+        );
+      })))
+    );
+  };
+  _proto.filterChildren = function filterChildren(child) {
+    return Boolean(child) || typeof child === 'number';
+  };
+  return Gapped;
+}(React.Component), _Gapped.__KONTUR_REACT_UI__ = 'Gapped', _Gapped.displayName = 'Gapped', _Gapped.propTypes = {
+  /**
+  * Расстояние между элементами.
+  */
+  gap: PropTypes.number,
+  /**
+  * Располагать элементы вертикально.
+  */
+  vertical: PropTypes.bool,
+  /**
+  * Вертикальное выравнивание элементов.
+  */
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom'])
+}, _Gapped.defaultProps = {
+  wrap: false,
+  vertical: false,
+  verticalAlign: 'baseline'
+}, _Gapped)) || _class;

package/components/Gapped/Gapped/Gapped.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PropTypes","isNonNullable","CommonWrapper","rootNode","createPropsGetter","GappedDataTids","vertical","horizontal","Gapped","_class","_Gapped","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","_inheritsLoose","_proto","prototype","render","createElement","_extends","rootNodeRef","setRootNode","props","renderVertical","renderHorizontal","getGapValue","propsGap","gap","subsequentItemStyle","paddingTop","children","Children","toArray","filter","filterChildren","map","child","index","style","undefined","key","_this$props","verticalAlign","wrap","itemStyle","display","marginLeft","marginTop","rootStyle","contStyle","whiteSpace","Boolean","Component","__KONTUR_REACT_UI__","displayName","propTypes","number","bool","oneOf"],"sources":["Gapped.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isNonNullable } from '../../lib/utils';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface GappedProps extends CommonProps {\n  /** Задает расстояние между элементами в пикселях. */\n  gap?: number;\n\n  /** Задает вертикальное выравнивание. */\n  verticalAlign?: 'top' | 'middle' | 'baseline' | 'bottom';\n\n  /** Располагает элементы по вертикали. */\n  vertical?: boolean;\n\n  /** Переносит элементы на новую строку при горизонтальном расположении. */\n  wrap?: boolean;\n\n  /** @ignore */\n  children: React.ReactNode;\n}\n\nexport const GappedDataTids = {\n  vertical: 'Gapped__vertical',\n  horizontal: 'Gapped__horizontal',\n} as const;\n\ntype DefaultProps = Required<Pick<GappedProps, 'wrap' | 'vertical' | 'verticalAlign'>>;\n\n/**\n * Контейнер `Gapped` устанавливает расстояние равное `gap` между элементами.\n */\n@rootNode\nexport class Gapped extends React.Component<GappedProps> {\n  public static __KONTUR_REACT_UI__ = 'Gapped';\n  public static displayName = 'Gapped';\n\n  public static propTypes = {\n    /**\n     * Расстояние между элементами.\n     */\n    gap: PropTypes.number,\n\n    /**\n     * Располагать элементы вертикально.\n     */\n    vertical: PropTypes.bool,\n\n    /**\n     * Вертикальное выравнивание элементов.\n     */\n    verticalAlign: PropTypes.oneOf(['top', 'middle', 'baseline', 'bottom']),\n  };\n\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    wrap: false,\n    vertical: false,\n    verticalAlign: 'baseline',\n  };\n\n  private getProps = createPropsGetter(Gapped.defaultProps);\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {this.getProps().vertical ? this.renderVertical() : this.renderHorizontal()}\n      </CommonWrapper>\n    );\n  }\n\n  private getGapValue() {\n    // DEPRECATED remove in 4.0\n    const { gap: propsGap } = this.props;\n    if (isNonNullable(propsGap)) {\n      return propsGap;\n    }\n\n    return 8;\n  }\n\n  private renderVertical() {\n    const subsequentItemStyle: React.CSSProperties = {\n      paddingTop: this.getGapValue(),\n    };\n    const children = React.Children.toArray(this.props.children)\n      .filter(this.filterChildren)\n      .map((child, index) => {\n        const style = index === 0 ? undefined : subsequentItemStyle;\n        return (\n          <div style={style} key={index}>\n            {child}\n          </div>\n        );\n      });\n\n    return <div data-tid={GappedDataTids.vertical}>{children}</div>;\n  }\n\n  private renderHorizontal() {\n    const { children, verticalAlign } = this.props;\n    const wrap = this.getProps().wrap;\n    const gap = this.getGapValue();\n    const itemStyle: React.CSSProperties = {\n      display: 'inline-block',\n      verticalAlign,\n      ...(wrap ? { marginLeft: gap, marginTop: gap } : {}),\n    };\n    const rootStyle: React.CSSProperties = wrap ? { paddingTop: 1 } : {};\n    const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };\n\n    return (\n      <div data-tid={GappedDataTids.horizontal} style={rootStyle}>\n        <div style={contStyle}>\n          {React.Children.toArray(children)\n            .filter(this.filterChildren)\n            .map((child, index) => {\n              const marginLeft = index === 0 ? undefined : gap;\n              return (\n                <span key={index} style={{ marginLeft, ...itemStyle }}>\n                  {child}\n                </span>\n              );\n            })}\n        </div>\n      </div>\n    );\n  }\n\n  private filterChildren(child: React.ReactNode): boolean {\n    return Boolean(child) || typeof child === 'number';\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Gapped/Gapped/package.json

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

package/components/Gapped/Gapped.d.ts

@@ -1,35 +1,50 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-export interface GappedProps {
-    gap?: number;
-    verticalAlign?: 'top' | 'middle' | 'baseline' | 'bottom';
-    vertical?: boolean;
-    children: React.ReactNode;
-}
-/**
- * Контейнер, расстояние между элементами в котором равно `gap`.
- */
-declare class Gapped extends React.Component<GappedProps> {
-    static propTypes: {
-        /**
-         * Расстояние между элементами.
-         */
-        gap: PropTypes.Requireable<number>;
-        /**
-         * Располагать элементы вертикально.
-         */
-        vertical: PropTypes.Requireable<boolean>;
-        /**
-         * Вертикальное выравнивание элементов.
-         */
-        verticalAlign: PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        gap: number;
-        verticalAlign: string;
-    };
-    render(): JSX.Element;
-    private _renderVertical;
-    private _renderHorizontal;
-}
-export default Gapped;
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { CommonProps } from '../../internal/CommonWrapper';
+export interface GappedProps extends CommonProps {
+    /** Задает расстояние между элементами в пикселях. */
+    gap?: number;
+    /** Задает вертикальное выравнивание. */
+    verticalAlign?: 'top' | 'middle' | 'baseline' | 'bottom';
+    /** Располагает элементы по вертикали. */
+    vertical?: boolean;
+    /** Переносит элементы на новую строку при горизонтальном расположении. */
+    wrap?: boolean;
+    /** @ignore */
+    children: React.ReactNode;
+}
+export declare const GappedDataTids: {
+    readonly vertical: "Gapped__vertical";
+    readonly horizontal: "Gapped__horizontal";
+};
+type DefaultProps = Required<Pick<GappedProps, 'wrap' | 'vertical' | 'verticalAlign'>>;
+/**
+ * Контейнер `Gapped` устанавливает расстояние равное `gap` между элементами.
+ */
+export declare class Gapped extends React.Component<GappedProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static propTypes: {
+        /**
+         * Расстояние между элементами.
+         */
+        gap: PropTypes.Requireable<number>;
+        /**
+         * Располагать элементы вертикально.
+         */
+        vertical: PropTypes.Requireable<boolean>;
+        /**
+         * Вертикальное выравнивание элементов.
+         */
+        verticalAlign: PropTypes.Requireable<string>;
+    };
+    private setRootNode;
+    static defaultProps: DefaultProps;
+    private getProps;
+    render(): React.JSX.Element;
+    private getGapValue;
+    private renderVertical;
+    private renderHorizontal;
+    private filterChildren;
+}
+export {};