@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-5e1c3.0

package/components/FileUploader/FileUploaderFileTypeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderFileTypeIcon.js","sourceRoot":"","sources":["FileUploaderFileTypeIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { type SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './FileUploaderFileTypeIcon.styles.js';\nimport type { FileUploaderIconType, FileUploaderView } from './fileUtils.js';\nimport { ArchiveIcon as RowViewArchiveIcon } from './icons/row/ArchiveIcon.js';\nimport { DocTextIcon as RowViewDocTextIcon } from './icons/row/DocTextIcon.js';\nimport { FolderIcon as RowViewFolderIcon } from './icons/row/FolderIcon.js';\nimport { MarkupIcon as RowViewMarkupIcon } from './icons/row/MarkupIcon.js';\nimport { PdfIcon as RowViewPdfIcon } from './icons/row/PdfIcon.js';\nimport { PictureIcon as RowViewPictureIcon } from './icons/row/PictureIcon.js';\nimport { PresentationIcon as RowViewPresentationIcon } from './icons/row/PresentationIcon.js';\nimport { TableIcon as RowViewTableIcon } from './icons/row/TableIcon.js';\nimport { TextIcon as RowViewTextIcon } from './icons/row/TextIcon.js';\nimport { ValidationErrorIcon as RowValidationErrorIcon } from './icons/row/ValidationErrorIcon.js';\nimport { ValidationWarningIcon as RowValidationWarningIcon } from './icons/row/ValidationWarningIcon.js';\nimport { ArchiveIcon as TileViewArchiveIcon } from './icons/tile/ArchiveIcon.js';\nimport { DocTextIcon as TileViewDocTextIcon } from './icons/tile/DocTextIcon.js';\nimport { FolderIcon as TileViewFolderIcon } from './icons/tile/FolderIcon.js';\nimport { MarkupIcon as TileViewMarkupIcon } from './icons/tile/MarkupIcon.js';\nimport { PdfIcon as TileViewPdfIcon } from './icons/tile/PdfIcon.js';\nimport { PictureIcon as TileViewPictureIcon } from './icons/tile/PictureIcon.js';\nimport { PresentationIcon as TileViewPresentationIcon } from './icons/tile/PresentationIcon.js';\nimport { TableIcon as TileViewTableIcon } from './icons/tile/TableIcon.js';\nimport { TextIcon as TileViewTextIcon } from './icons/tile/TextIcon.js';\nimport { ValidationErrorIcon as TileValidationErrorIcon } from './icons/tile/ValidationErrorIcon.js';\nimport { ValidationWarningIcon as TileValidationWarningIcon } from './icons/tile/ValidationWarningIcon.js';\n\ninterface FileUploaderFileTypeIconProps {\n  size: SizeProp;\n  type: FileUploaderIconType;\n  view?: FileUploaderView;\n}\n\nexport const FileUploaderFileTypeIcon: React.FunctionComponent<FileUploaderFileTypeIconProps> = ({\n  size,\n  type,\n  view = 'row',\n}) => {\n  const styles = useStyles(getStyles);\n  const isTileView = view === 'tile';\n\n  // Цвет приходит классом, а не пропом `color`: значение темы иначе уехало бы в\n  // инлайновый `style` каждой иконки. Набор типов закрытый, поэтому класс на\n  // каждый — тот же приём, что у `CloseButtonIcon`.\n  const icons = isTileView\n    ? {\n        error: TileValidationErrorIcon,\n        warning: TileValidationWarningIcon,\n        pdf: TileViewPdfIcon,\n        code: TileViewMarkupIcon,\n        picture: TileViewPictureIcon,\n        presentation: TileViewPresentationIcon,\n        table: TileViewTableIcon,\n        text: TileViewTextIcon,\n        archive: TileViewArchiveIcon,\n        folder: TileViewFolderIcon,\n      }\n    : {\n        error: RowValidationErrorIcon,\n        warning: RowValidationWarningIcon,\n        pdf: RowViewPdfIcon,\n        code: RowViewMarkupIcon,\n        picture: RowViewPictureIcon,\n        presentation: RowViewPresentationIcon,\n        table: RowViewTableIcon,\n        text: RowViewTextIcon,\n        archive: RowViewArchiveIcon,\n        folder: RowViewFolderIcon,\n      };\n\n  const colorClassNames = {\n    error: styles.errorIcon(),\n    warning: styles.warningIcon(),\n    pdf: styles.pdfIcon(),\n    code: styles.codeIcon(),\n    picture: styles.pictureIcon(),\n    presentation: styles.presentationIcon(),\n    table: styles.tableIcon(),\n    text: styles.textIcon(),\n    archive: styles.archiveIcon(),\n    folder: styles.folderIcon(),\n  };\n\n  const Icon = icons[type as keyof typeof icons] ?? (isTileView ? TileViewDocTextIcon : RowViewDocTextIcon);\n  const colorClassName = colorClassNames[type as keyof typeof colorClassNames] ?? styles.unknownIcon();\n\n  return <Icon size={size} className={colorClassName} />;\n};\n"]}
+{"version":3,"file":"FileUploaderFileTypeIcon.js","sourceRoot":"","sources":["FileUploaderFileTypeIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { useTheme } from '../../lib/theming/useTheme.js';\nimport { type SizeProp } from '../../lib/types/props.js';\nimport type { FileUploaderIconType, FileUploaderView } from './fileUtils.js';\nimport { ArchiveIcon as RowViewArchiveIcon } from './icons/row/ArchiveIcon.js';\nimport { DocTextIcon as RowViewDocTextIcon } from './icons/row/DocTextIcon.js';\nimport { FolderIcon as RowViewFolderIcon } from './icons/row/FolderIcon.js';\nimport { MarkupIcon as RowViewMarkupIcon } from './icons/row/MarkupIcon.js';\nimport { PdfIcon as RowViewPdfIcon } from './icons/row/PdfIcon.js';\nimport { PictureIcon as RowViewPictureIcon } from './icons/row/PictureIcon.js';\nimport { PresentationIcon as RowViewPresentationIcon } from './icons/row/PresentationIcon.js';\nimport { TableIcon as RowViewTableIcon } from './icons/row/TableIcon.js';\nimport { TextIcon as RowViewTextIcon } from './icons/row/TextIcon.js';\nimport { ValidationErrorIcon as RowValidationErrorIcon } from './icons/row/ValidationErrorIcon.js';\nimport { ValidationWarningIcon as RowValidationWarningIcon } from './icons/row/ValidationWarningIcon.js';\nimport { ArchiveIcon as TileViewArchiveIcon } from './icons/tile/ArchiveIcon.js';\nimport { DocTextIcon as TileViewDocTextIcon } from './icons/tile/DocTextIcon.js';\nimport { FolderIcon as TileViewFolderIcon } from './icons/tile/FolderIcon.js';\nimport { MarkupIcon as TileViewMarkupIcon } from './icons/tile/MarkupIcon.js';\nimport { PdfIcon as TileViewPdfIcon } from './icons/tile/PdfIcon.js';\nimport { PictureIcon as TileViewPictureIcon } from './icons/tile/PictureIcon.js';\nimport { PresentationIcon as TileViewPresentationIcon } from './icons/tile/PresentationIcon.js';\nimport { TableIcon as TileViewTableIcon } from './icons/tile/TableIcon.js';\nimport { TextIcon as TileViewTextIcon } from './icons/tile/TextIcon.js';\nimport { ValidationErrorIcon as TileValidationErrorIcon } from './icons/tile/ValidationErrorIcon.js';\nimport { ValidationWarningIcon as TileValidationWarningIcon } from './icons/tile/ValidationWarningIcon.js';\n\ninterface FileUploaderFileTypeIconProps {\n  size: SizeProp;\n  type: FileUploaderIconType;\n  view?: FileUploaderView;\n}\n\nexport const FileUploaderFileTypeIcon: React.FunctionComponent<FileUploaderFileTypeIconProps> = ({\n  size,\n  type,\n  view = 'row',\n}) => {\n  const theme = useTheme();\n  const isTileView = view === 'tile';\n\n  if (isTileView) {\n    switch (type) {\n      case 'error':\n        return <TileValidationErrorIcon size={size} color={theme.fileUploaderFileTypeErrorIconColor} />;\n      case 'warning':\n        return <TileValidationWarningIcon size={size} color={theme.fileUploaderFileTypeWarningIconColor} />;\n      case 'pdf':\n        return <TileViewPdfIcon size={size} color={theme.fileUploaderFileTypePdfIconColor} />;\n      case 'code':\n        return <TileViewMarkupIcon size={size} color={theme.fileUploaderFileTypeCodeIconColor} />;\n      case 'picture':\n        return <TileViewPictureIcon size={size} color={theme.fileUploaderFileTypePictureIconColor} />;\n      case 'presentation':\n        return <TileViewPresentationIcon size={size} color={theme.fileUploaderFileTypePresentationIconColor} />;\n      case 'table':\n        return <TileViewTableIcon size={size} color={theme.fileUploaderFileTypeTableIconColor} />;\n      case 'text':\n        return <TileViewTextIcon size={size} color={theme.fileUploaderFileTypeTextIconColor} />;\n      case 'archive':\n        return <TileViewArchiveIcon size={size} color={theme.fileUploaderFileTypeArchiveIconColor} />;\n      case 'folder':\n        return <TileViewFolderIcon size={size} color={theme.fileUploaderFileTypeFolderIconColor} />;\n      default:\n        return <TileViewDocTextIcon size={size} color={theme.fileUploaderFileTypeUnknownIconColor} />;\n    }\n  }\n  switch (type) {\n    case 'error':\n      return <RowValidationErrorIcon size={size} color={theme.fileUploaderFileTypeErrorIconColor} />;\n    case 'warning':\n      return <RowValidationWarningIcon size={size} color={theme.fileUploaderFileTypeWarningIconColor} />;\n    case 'pdf':\n      return <RowViewPdfIcon size={size} color={theme.fileUploaderFileTypePdfIconColor} />;\n    case 'code':\n      return <RowViewMarkupIcon size={size} color={theme.fileUploaderFileTypeCodeIconColor} />;\n    case 'picture':\n      return <RowViewPictureIcon size={size} color={theme.fileUploaderFileTypePictureIconColor} />;\n    case 'presentation':\n      return <RowViewPresentationIcon size={size} color={theme.fileUploaderFileTypePresentationIconColor} />;\n    case 'table':\n      return <RowViewTableIcon size={size} color={theme.fileUploaderFileTypeTableIconColor} />;\n    case 'text':\n      return <RowViewTextIcon size={size} color={theme.fileUploaderFileTypeTextIconColor} />;\n    case 'archive':\n      return <RowViewArchiveIcon size={size} color={theme.fileUploaderFileTypeArchiveIconColor} />;\n    case 'folder':\n      return <RowViewFolderIcon size={size} color={theme.fileUploaderFileTypeFolderIconColor} />;\n    default:\n      return <RowViewDocTextIcon size={size} color={theme.fileUploaderFileTypeUnknownIconColor} />;\n  }\n};\n"]}

package/components/FxInput/FxInput.d.ts

@@ -35,7 +35,7 @@ export interface FxInputProps extends Pick<AriaAttributes, 'aria-label'>, Common
 export declare const FxInputDataTids: {
     readonly root: "FxInput__root";
 };
-type DefaultProps = Required<Pick<FxInputProps, 'type' | 'value' | 'auto'>>;
+type DefaultProps = Required<Pick<FxInputProps, 'width' | 'type' | 'value' | 'auto'>>;
 type DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;
 /** В автополе можно вывести автоматически рассчитанное цифровое значение. В него можно передавать итог любого вычисления, например, сумму других полей, процент или более сложную функцию.
  *

package/components/FxInput/FxInput.js

@@ -45,7 +45,6 @@ import React from 'react';
 import warning from 'warning';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { withSize } from '../../lib/size/SizeDecorator.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
@@ -53,7 +52,6 @@ import { CurrencyInput } from '../CurrencyInput/index.js';
 import { Group } from '../Group/index.js';
 import { Input } from '../Input/index.js';
 import { MaskedInput } from '../MaskedInput/index.js';
-import { getStyles } from './FxInput.styles.js';
 import { FxInputRestoreBtn } from './FxInputRestoreBtn.js';
 import { MathFunctionIcon } from './MathFunctionIcon.js';
 export var FxInputDataTids = {
@@ -71,9 +69,7 @@ var FxInput = /** @class */ (function (_super) {
         _this.getProps = createPropsGetter(FxInput_1.defaultProps);
         _this.renderMain = function (props) {
             var button = props.auto ? null : (React.createElement(FxInputRestoreBtn, { size: props.size, onRestore: props.onRestore, corners: props.corners, disabled: props.disabled, borderless: props.borderless, "aria-label": props.buttonAriaLabel }));
-            return (
-            // Инлайн остаётся за пропом `width`, ширину по умолчанию задаёт класс.
-            React.createElement(Group, { "data-tid": FxInputDataTids.root, width: props.width, className: props.width === undefined ? getStyles().defaultWidth() : undefined },
+            return (React.createElement(Group, { "data-tid": FxInputDataTids.root, width: props.width },
                 button,
                 _this.getInput(props)));
         };
@@ -120,7 +116,7 @@ var FxInput = /** @class */ (function (_super) {
             var size = _this.size;
             var commonInputProps = __assign({ corners: corners, size: size, width: '100%', ref: _this.refInput }, rest);
             if (type === 'currency') {
-                return (React.createElement(CurrencyInput, __assign({}, commonInputProps, { signed: signed, integerDigits: integerDigits, fractionDigits: fractionDigits, value: value, onValueChange: _this.props.onValueChange })));
+                return (React.createElement(CurrencyInput, __assign({}, commonInputProps, { signed: signed, integerDigits: integerDigits, fractionDigits: fractionDigits, hideTrailingZeros: hideTrailingZeros, value: value, onValueChange: _this.props.onValueChange })));
             }
             if (mask) {
                 return (React.createElement(MaskedInput, __assign({}, commonInputProps, { leftIcon: _this.getLeftIcon(props), align: "right", mask: mask, maskChar: maskChar, formatChars: formatChars, alwaysShowMask: alwaysShowMask, value: value, onValueChange: _this.props.onValueChange })));
@@ -152,12 +148,12 @@ var FxInput = /** @class */ (function (_super) {
     FxInput.__KONTUR_REACT_UI__ = 'FxInput';
     FxInput.displayName = 'FxInput';
     FxInput.defaultProps = {
+        width: 250,
         type: 'text',
         value: '',
         auto: false,
     };
     FxInput = FxInput_1 = __decorate([
-        withRenderEnvironment,
         rootNode,
         withSize
     ], FxInput);

package/components/FxInput/FxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FxInput.js","sourceRoot":"","sources":["FxInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/types.js';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { CurrencyInput } from '../CurrencyInput/index.js';\nimport type { CurrencyInputProps } from '../CurrencyInput/index.js';\nimport { Group } from '../Group/index.js';\nimport { Input } from '../Input/index.js';\nimport type { InputProps } from '../Input/Input.js';\nimport { MaskedInput, type MaskedInputProps } from '../MaskedInput/index.js';\nimport { getStyles } from './FxInput.styles.js';\nimport { FxInputRestoreBtn } from './FxInputRestoreBtn.js';\nimport { MathFunctionIcon } from './MathFunctionIcon.js';\n\nexport interface FxInputProps\n  extends\n    Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<Partial<MaskedInputProps>, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n    Override<\n      Omit<CurrencyInputProps, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n      {\n        /** Управляет видимостью кнопки Restore:\n         * - true — кнопка Restore не отображается. Значение в поле является автоматически рассчитанным.\n         * - false — кнопка Restore отображается в поле. Значение в поле считается отредактированным. */\n        auto?: boolean;\n\n        /** Тип поля. */\n        type?: 'currency' | InputProps['type'];\n\n        /** Событие нажатия на кнопку Restore. */\n        onRestore?: () => void;\n\n        /** Событие изменения value. */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n\n        /** Значение поля. */\n        value?: string | number;\n\n        /** Задаёт ref поля. */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n\n        /** Убирает лишние нули после запятой. */\n        hideTrailingZeros?: boolean;\n\n        /** Атрибут aria-label кнопке Restore. */\n        buttonAriaLabel?: AriaAttributes['aria-label'];\n\n        /** @ignore */\n        corners?: React.CSSProperties;\n      }\n    > {}\n\nexport const FxInputDataTids = {\n  root: 'FxInput__root',\n} as const;\n\ntype DefaultProps = Required<Pick<FxInputProps, 'type' | 'value' | 'auto'>>;\ntype DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;\n\n/** В автополе можно вывести автоматически рассчитанное цифровое значение. В него можно передавать итог любого вычисления, например, сумму других полей, процент или более сложную функцию.\n *\n * У поля есть иконка математической формулы и кнопка Restore — с её помощью пользователь может вернуть исходное значение, если редактировал поле. Видимость кнопки и поведение при нажатии нужно прописывать в компоненте самостоятельно.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n  public static displayName = 'FxInput';\n\n  public static defaultProps: DefaultProps = {\n    type: 'text',\n    value: '',\n    auto: false,\n  };\n\n  private theme!: Theme;\n  private size!: SizeProp;\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  private validateProps(props: FxInputProps) {\n    if (props.type === 'currency' && props.mask !== undefined) {\n      warning(false, '[FxInput]: Prop \"mask\" is not supported when type=\"currency\"');\n    }\n  }\n\n  public componentDidMount() {\n    this.validateProps(this.getProps());\n  }\n\n  public componentDidUpdate() {\n    this.validateProps(this.getProps());\n  }\n\n  public render(): React.JSX.Element {\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>): React.JSX.Element => {\n    const button = props.auto ? null : (\n      <FxInputRestoreBtn\n        size={props.size}\n        onRestore={props.onRestore}\n        corners={props.corners}\n        disabled={props.disabled}\n        borderless={props.borderless}\n        aria-label={props.buttonAriaLabel}\n      />\n    );\n\n    return (\n      // Инлайн остаётся за пропом `width`, ширину по умолчанию задаёт класс.\n      <Group\n        data-tid={FxInputDataTids.root}\n        width={props.width}\n        className={props.width === undefined ? getStyles().defaultWidth() : undefined}\n      >\n        {button}\n        {this.getInput(props)}\n      </Group>\n    );\n  };\n\n  /** Программно устанавливает фокус на поле.\n   * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n   * @public\n   */\n  public focus = (): void => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /** Программно снимает фокус с кнопки.\n   * @public\n   */\n  public blur = (): void => {\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  private getLeftIcon = (props: FxInputProps) => {\n    if (!props.auto) {\n      return null;\n    }\n\n    const iconSizes: Record<SizeProp, number> = {\n      small: parseInt(this.theme.inputIconSizeSmall),\n      medium: parseInt(this.theme.inputIconSizeMedium),\n      large: parseInt(this.theme.inputIconSizeLarge),\n    };\n    const size = this.size;\n\n    return <MathFunctionIcon size={iconSizes[size]} />;\n  };\n\n  private getInput = (props: FxInputProps) => {\n    const {\n      type,\n      onRestore,\n      auto,\n      refInput,\n      value,\n      width,\n      size: _size,\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      signed,\n      integerDigits,\n      fractionDigits,\n      hideTrailingZeros,\n      buttonAriaLabel,\n      corners: originalCorners,\n      ...rest\n    } = props;\n    const corners: InputProps['corners'] = auto\n      ? originalCorners\n      : { borderBottomLeftRadius: 0, borderTopLeftRadius: 0, ...originalCorners };\n    const size = this.size;\n    const commonInputProps = {\n      corners,\n      size,\n      width: '100%',\n      ref: this.refInput,\n      ...rest,\n    };\n\n    if (type === 'currency') {\n      return (\n        <CurrencyInput\n          {...commonInputProps}\n          signed={signed}\n          integerDigits={integerDigits}\n          fractionDigits={fractionDigits}\n          value={value as CurrencyInputProps['value']}\n          onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n        />\n      );\n    }\n    if (mask) {\n      return (\n        <MaskedInput\n          {...commonInputProps}\n          leftIcon={this.getLeftIcon(props)}\n          align=\"right\"\n          mask={mask}\n          maskChar={maskChar}\n          formatChars={formatChars}\n          alwaysShowMask={alwaysShowMask}\n          value={value as MaskedInputProps['value']}\n          onValueChange={this.props.onValueChange as MaskedInputProps['onValueChange']}\n        />\n      );\n    }\n    return (\n      <Input\n        {...commonInputProps}\n        leftIcon={this.getLeftIcon(props)}\n        align=\"right\"\n        type={type}\n        value={value as InputProps['value']}\n        onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n      />\n    );\n  };\n}\n"]}
+{"version":3,"file":"FxInput.js","sourceRoot":"","sources":["FxInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAGtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAyB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAyCzD,MAAM,CAAC,IAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,eAAe;CACb,CAAC;AAKX;;;GAGG;AAGH;IAA6B,2BAA6B;IAA1D;;QAaU,WAAK,GAAiC,IAAI,CAAC;QAE3C,cAAQ,GAAG,iBAAiB,CAAC,SAAO,CAAC,YAAY,CAAC,CAAC;QAiCpD,gBAAU,GAAG,UAAC,KAAsD;YACzE,IAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjC,oBAAC,iBAAiB,IAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,gBAChB,KAAK,CAAC,eAAe,GACjC,CACH,CAAC;YAEF,OAAO,CACL,oBAAC,KAAK,gBAAW,eAAe,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACtD,MAAM;gBACN,KAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CACf,CACT,CAAC;QACJ,CAAC,CAAC;QAEF;;;WAGG;QACI,WAAK,GAAG;YACb,IAAI,KAAI,CAAC,KAAK,EAAE,CAAC;gBACf,KAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEF;;WAEG;QACI,UAAI,GAAG;YACZ,IAAI,KAAI,CAAC,KAAK,EAAE,CAAC;gBACf,KAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,cAAQ,GAAG,UAAC,OAAqC;YACvD,KAAI,CAAC,KAAK,GAAG,OAAO,CAAC;YAErB,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QAEM,iBAAW,GAAG,UAAC,KAAmB;YACxC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBAChB,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAM,SAAS,GAA6B;gBAC1C,KAAK,EAAE,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC;gBAC9C,MAAM,EAAE,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC;gBAChD,KAAK,EAAE,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC;aAC/C,CAAC;YACF,IAAM,IAAI,GAAG,KAAI,CAAC,IAAI,CAAC;YAEvB,OAAO,oBAAC,gBAAgB,IAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,GAAI,CAAC;QACrD,CAAC,CAAC;QAEM,cAAQ,GAAG,UAAC,KAAmB;YAEnC,IAAA,IAAI,GAkBF,KAAK,KAlBH,EACJ,SAAS,GAiBP,KAAK,UAjBE,EACT,IAAI,GAgBF,KAAK,KAhBH,EACJ,QAAQ,GAeN,KAAK,SAfC,EACR,KAAK,GAcH,KAAK,MAdF,EACL,KAAK,GAaH,KAAK,MAbF,EACC,KAAK,GAYT,KAAK,KAZI,EACX,IAAI,GAWF,KAAK,KAXH,EACJ,QAAQ,GAUN,KAAK,SAVC,EACR,WAAW,GAST,KAAK,YATI,EACX,cAAc,GAQZ,KAAK,eARO,EACd,MAAM,GAOJ,KAAK,OAPD,EACN,aAAa,GAMX,KAAK,cANM,EACb,cAAc,GAKZ,KAAK,eALO,EACd,iBAAiB,GAIf,KAAK,kBAJU,EACjB,eAAe,GAGb,KAAK,gBAHQ,EACN,eAAe,GAEtB,KAAK,QAFiB,EACrB,IAAI,UACL,KAAK,EAnBH,wNAmBL,CADQ,CACC;YACV,IAAM,OAAO,GAA0B,IAAI;gBACzC,CAAC,CAAC,eAAe;gBACjB,CAAC,YAAG,sBAAsB,EAAE,CAAC,EAAE,mBAAmB,EAAE,CAAC,IAAK,eAAe,CAAE,CAAC;YAC9E,IAAM,IAAI,GAAG,KAAI,CAAC,IAAI,CAAC;YACvB,IAAM,gBAAgB,cACpB,OAAO,SAAA,EACP,IAAI,MAAA,EACJ,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,KAAI,CAAC,QAAQ,IACf,IAAI,CACR,CAAC;YAEF,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;gBACxB,OAAO,CACL,oBAAC,aAAa,eACR,gBAAgB,IACpB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,KAAK,EAAE,KAAoC,EAC3C,aAAa,EAAE,KAAI,CAAC,KAAK,CAAC,aAAoD,IAC9E,CACH,CAAC;YACJ,CAAC;YACD,IAAI,IAAI,EAAE,CAAC;gBACT,OAAO,CACL,oBAAC,WAAW,eACN,gBAAgB,IACpB,QAAQ,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACjC,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAkC,EACzC,aAAa,EAAE,KAAI,CAAC,KAAK,CAAC,aAAkD,IAC5E,CACH,CAAC;YACJ,CAAC;YACD,OAAO,CACL,oBAAC,KAAK,eACA,gBAAgB,IACpB,QAAQ,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EACjC,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAA4B,EACnC,aAAa,EAAE,KAAI,CAAC,KAAK,CAAC,aAA4C,IACtE,CACH,CAAC;QACJ,CAAC,CAAC;;IACJ,CAAC;gBAtLY,OAAO;IAmBV,+BAAa,GAArB,UAAsB,KAAmB;QACvC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC1D,OAAO,CAAC,KAAK,EAAE,8DAA8D,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IAEM,mCAAiB,GAAxB;QACE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC;IAEM,oCAAkB,GAAzB;QACE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC;IAEM,wBAAM,GAAb;QAAA,iBAaC;QAZC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,QAAQ,EAAE,GAC9D,KAAI,CAAC,UAAU,CACF,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;;IA7Ca,2BAAmB,GAAG,SAAS,AAAZ,CAAa;IAChC,mBAAW,GAAG,SAAS,AAAZ,CAAa;IAExB,oBAAY,GAAiB;QACzC,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,KAAK;KACZ,AALyB,CAKxB;IATS,OAAO;QAFnB,QAAQ;QACR,QAAQ;OACI,OAAO,CAsLnB;IAAD,cAAC;CAAA,AAtLD,CAA6B,KAAK,CAAC,SAAS,GAsL3C;SAtLY,OAAO","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/types.js';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { CurrencyInput } from '../CurrencyInput/index.js';\nimport type { CurrencyInputProps } from '../CurrencyInput/index.js';\nimport { Group } from '../Group/index.js';\nimport { Input } from '../Input/index.js';\nimport type { InputProps } from '../Input/Input.js';\nimport { MaskedInput, type MaskedInputProps } from '../MaskedInput/index.js';\nimport { FxInputRestoreBtn } from './FxInputRestoreBtn.js';\nimport { MathFunctionIcon } from './MathFunctionIcon.js';\n\nexport interface FxInputProps\n  extends\n    Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<Partial<MaskedInputProps>, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n    Override<\n      Omit<CurrencyInputProps, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n      {\n        /** Управляет видимостью кнопки Restore:\n         * - true — кнопка Restore не отображается. Значение в поле является автоматически рассчитанным.\n         * - false — кнопка Restore отображается в поле. Значение в поле считается отредактированным. */\n        auto?: boolean;\n\n        /** Тип поля. */\n        type?: 'currency' | InputProps['type'];\n\n        /** Событие нажатия на кнопку Restore. */\n        onRestore?: () => void;\n\n        /** Событие изменения value. */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n\n        /** Значение поля. */\n        value?: string | number;\n\n        /** Задаёт ref поля. */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n\n        /** Убирает лишние нули после запятой. */\n        hideTrailingZeros?: boolean;\n\n        /** Атрибут aria-label кнопке Restore. */\n        buttonAriaLabel?: AriaAttributes['aria-label'];\n\n        /** @ignore */\n        corners?: React.CSSProperties;\n      }\n    > {}\n\nexport const FxInputDataTids = {\n  root: 'FxInput__root',\n} as const;\n\ntype DefaultProps = Required<Pick<FxInputProps, 'width' | 'type' | 'value' | 'auto'>>;\ntype DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;\n\n/** В автополе можно вывести автоматически рассчитанное цифровое значение. В него можно передавать итог любого вычисления, например, сумму других полей, процент или более сложную функцию.\n *\n * У поля есть иконка математической формулы и кнопка Restore — с её помощью пользователь может вернуть исходное значение, если редактировал поле. Видимость кнопки и поведение при нажатии нужно прописывать в компоненте самостоятельно.\n */\n@rootNode\n@withSize\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n  public static displayName = 'FxInput';\n\n  public static defaultProps: DefaultProps = {\n    width: 250,\n    type: 'text',\n    value: '',\n    auto: false,\n  };\n\n  private theme!: Theme;\n  private size!: SizeProp;\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  private validateProps(props: FxInputProps) {\n    if (props.type === 'currency' && props.mask !== undefined) {\n      warning(false, '[FxInput]: Prop \"mask\" is not supported when type=\"currency\"');\n    }\n  }\n\n  public componentDidMount() {\n    this.validateProps(this.getProps());\n  }\n\n  public componentDidUpdate() {\n    this.validateProps(this.getProps());\n  }\n\n  public render(): React.JSX.Element {\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>): React.JSX.Element => {\n    const button = props.auto ? null : (\n      <FxInputRestoreBtn\n        size={props.size}\n        onRestore={props.onRestore}\n        corners={props.corners}\n        disabled={props.disabled}\n        borderless={props.borderless}\n        aria-label={props.buttonAriaLabel}\n      />\n    );\n\n    return (\n      <Group data-tid={FxInputDataTids.root} width={props.width}>\n        {button}\n        {this.getInput(props)}\n      </Group>\n    );\n  };\n\n  /** Программно устанавливает фокус на поле.\n   * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n   * @public\n   */\n  public focus = (): void => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /** Программно снимает фокус с кнопки.\n   * @public\n   */\n  public blur = (): void => {\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  private getLeftIcon = (props: FxInputProps) => {\n    if (!props.auto) {\n      return null;\n    }\n\n    const iconSizes: Record<SizeProp, number> = {\n      small: parseInt(this.theme.inputIconSizeSmall),\n      medium: parseInt(this.theme.inputIconSizeMedium),\n      large: parseInt(this.theme.inputIconSizeLarge),\n    };\n    const size = this.size;\n\n    return <MathFunctionIcon size={iconSizes[size]} />;\n  };\n\n  private getInput = (props: FxInputProps) => {\n    const {\n      type,\n      onRestore,\n      auto,\n      refInput,\n      value,\n      width,\n      size: _size,\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      signed,\n      integerDigits,\n      fractionDigits,\n      hideTrailingZeros,\n      buttonAriaLabel,\n      corners: originalCorners,\n      ...rest\n    } = props;\n    const corners: InputProps['corners'] = auto\n      ? originalCorners\n      : { borderBottomLeftRadius: 0, borderTopLeftRadius: 0, ...originalCorners };\n    const size = this.size;\n    const commonInputProps = {\n      corners,\n      size,\n      width: '100%',\n      ref: this.refInput,\n      ...rest,\n    };\n\n    if (type === 'currency') {\n      return (\n        <CurrencyInput\n          {...commonInputProps}\n          signed={signed}\n          integerDigits={integerDigits}\n          fractionDigits={fractionDigits}\n          hideTrailingZeros={hideTrailingZeros}\n          value={value as CurrencyInputProps['value']}\n          onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n        />\n      );\n    }\n    if (mask) {\n      return (\n        <MaskedInput\n          {...commonInputProps}\n          leftIcon={this.getLeftIcon(props)}\n          align=\"right\"\n          mask={mask}\n          maskChar={maskChar}\n          formatChars={formatChars}\n          alwaysShowMask={alwaysShowMask}\n          value={value as MaskedInputProps['value']}\n          onValueChange={this.props.onValueChange as MaskedInputProps['onValueChange']}\n        />\n      );\n    }\n    return (\n      <Input\n        {...commonInputProps}\n        leftIcon={this.getLeftIcon(props)}\n        align=\"right\"\n        type={type}\n        value={value as InputProps['value']}\n        onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n      />\n    );\n  };\n}\n"]}

package/components/FxInput/FxInputRestoreBtn.js

@@ -9,43 +9,35 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from 'react';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
+import React, { useContext } from 'react';
 import { useSizeControl } from '../../lib/size/useSizeControl.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Button } from '../Button/index.js';
-import { getStyles } from './FxInputRestoreBtn.styles.js';
 import { UndoIcon } from './UndoIcon.js';
-/** Класс размера иконки по размеру контрола. */
-var ICON_SIZE_CLASS = {
-    small: 'iconSmall',
-    medium: 'iconMedium',
-    large: 'iconLarge',
-};
 export var FxInputRestoreBtn = function (props) {
-    var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
     var size = useSizeControl(props.size);
-    // Скругления — ссылками на переменные, а не значениями темы из JS: `corners`
-    // всё равно уезжает в инлайновый `style`, но со ссылкой это перестаёт быть
-    // значением темы в разметке и подхватывает её смену само. Переменные
-    // объявлены на корне самой кнопки — их печатает `CommonWrapper`.
+    var iconSizes = {
+        small: parseInt(theme.inputIconSizeSmall),
+        medium: parseInt(theme.inputIconSizeMedium),
+        large: parseInt(theme.inputIconSizeLarge),
+    };
     var cornersSizes = {
         small: {
-            borderTopLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',
-            borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',
+            borderTopLeftRadius: theme.inputBorderRadiusSmall,
+            borderBottomLeftRadius: theme.inputBorderRadiusSmall,
         },
         medium: {
-            borderTopLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',
-            borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',
+            borderTopLeftRadius: theme.inputBorderRadiusMedium,
+            borderBottomLeftRadius: theme.inputBorderRadiusMedium,
         },
         large: {
-            borderTopLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',
-            borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',
+            borderTopLeftRadius: theme.inputBorderRadiusLarge,
+            borderBottomLeftRadius: theme.inputBorderRadiusLarge,
         },
     };
     var buttonCorners = cornersSizes[size];
-    // Размерный алиас, а не число из темы: по нему иконка выбирает отрисовку, а
-    // точный размер задаёт класс — так значение темы не попадает в разметку.
-    var iconUndo = React.createElement(UndoIcon, { size: size, className: styles[ICON_SIZE_CLASS[size]]() });
+    var iconUndo = React.createElement(UndoIcon, { size: iconSizes[size] });
     return (React.createElement(Button, { use: 'default', size: props.size, onClick: props.onRestore, borderless: props.borderless, disabled: props.disabled, corners: __assign(__assign({ borderTopRightRadius: 0, borderBottomRightRadius: 0 }, buttonCorners), props.corners), icon: iconUndo, "aria-label": props['aria-label'] }));
 };
 //# sourceMappingURL=FxInputRestoreBtn.js.map

package/components/FxInput/FxInputRestoreBtn.js.map

@@ -1 +1 @@
-{"version":3,"file":"FxInputRestoreBtn.js","sourceRoot":"","sources":["FxInputRestoreBtn.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,gDAAgD;AAChD,IAAM,eAAe,GAA+D;IAClF,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAoD,UAAC,KAAK;IACtF,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxC,6EAA6E;IAC7E,2EAA2E;IAC3E,qEAAqE;IACrE,iEAAiE;IACjE,IAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE;YACL,mBAAmB,EAAE,sCAAsC;YAC3D,sBAAsB,EAAE,sCAAsC;SAC/D;QACD,MAAM,EAAE;YACN,mBAAmB,EAAE,uCAAuC;YAC5D,sBAAsB,EAAE,uCAAuC;SAChE;QACD,KAAK,EAAE;YACL,mBAAmB,EAAE,sCAAsC;YAC3D,sBAAsB,EAAE,sCAAsC;SAC/D;KACF,CAAC;IACF,IAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACzC,4EAA4E;IAC5E,yEAAyE;IACzE,IAAM,QAAQ,GAAG,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,EAAE,GAAI,CAAC;IAEtF,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,sBACL,oBAAoB,EAAE,CAAC,EACvB,uBAAuB,EAAE,CAAC,IACvB,aAAa,GACb,KAAK,CAAC,OAAO,GAElB,IAAI,EAAE,QAAQ,gBACF,KAAK,CAAC,YAAY,CAAC,GAC/B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport type { AriaAttributes } from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { useSizeControl } from '../../lib/size/useSizeControl.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { Button } from '../Button/index.js';\nimport type { FxInputProps } from './FxInput.js';\nimport { getStyles } from './FxInputRestoreBtn.styles.js';\nimport { UndoIcon } from './UndoIcon.js';\n\ninterface FxInputRestoreBtnProps\n  extends Pick<AriaAttributes, 'aria-label'>, Pick<FxInputProps, 'size' | 'onRestore' | 'borderless' | 'disabled'> {\n  /** @ignore */\n  corners?: React.CSSProperties;\n}\n\n/** Класс размера иконки по размеру контрола. */\nconst ICON_SIZE_CLASS: Record<SizeProp, 'iconSmall' | 'iconMedium' | 'iconLarge'> = {\n  small: 'iconSmall',\n  medium: 'iconMedium',\n  large: 'iconLarge',\n};\n\nexport const FxInputRestoreBtn: React.FunctionComponent<FxInputRestoreBtnProps> = (props) => {\n  const styles = useStyles(getStyles);\n  const size = useSizeControl(props.size);\n  // Скругления — ссылками на переменные, а не значениями темы из JS: `corners`\n  // всё равно уезжает в инлайновый `style`, но со ссылкой это перестаёт быть\n  // значением темы в разметке и подхватывает её смену само. Переменные\n  // объявлены на корне самой кнопки — их печатает `CommonWrapper`.\n  const cornersSizes: Record<SizeProp, React.CSSProperties> = {\n    small: {\n      borderTopLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',\n      borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',\n    },\n    medium: {\n      borderTopLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',\n      borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',\n    },\n    large: {\n      borderTopLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',\n      borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',\n    },\n  };\n  const buttonCorners = cornersSizes[size];\n  // Размерный алиас, а не число из темы: по нему иконка выбирает отрисовку, а\n  // точный размер задаёт класс — так значение темы не попадает в разметку.\n  const iconUndo = <UndoIcon size={size} className={styles[ICON_SIZE_CLASS[size]]()} />;\n\n  return (\n    <Button\n      use={'default'}\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"]}
+{"version":3,"file":"FxInputRestoreBtn.js","sourceRoot":"","sources":["FxInputRestoreBtn.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,MAAM,CAAC,IAAM,iBAAiB,GAAoD,UAAC,KAAK;IACtF,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAExC,IAAM,SAAS,GAA6B;QAC1C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QACzC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,mBAAmB,CAAC;QAC3C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;KAC1C,CAAC;IACF,IAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE;YACL,mBAAmB,EAAE,KAAK,CAAC,sBAAsB;YACjD,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;SACrD;QACD,MAAM,EAAE;YACN,mBAAmB,EAAE,KAAK,CAAC,uBAAuB;YAClD,sBAAsB,EAAE,KAAK,CAAC,uBAAuB;SACtD;QACD,KAAK,EAAE;YACL,mBAAmB,EAAE,KAAK,CAAC,sBAAsB;YACjD,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;SACrD;KACF,CAAC;IACF,IAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACzC,IAAM,QAAQ,GAAG,oBAAC,QAAQ,IAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,GAAI,CAAC;IAErD,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,sBACL,oBAAoB,EAAE,CAAC,EACvB,uBAAuB,EAAE,CAAC,IACvB,aAAa,GACb,KAAK,CAAC,OAAO,GAElB,IAAI,EAAE,QAAQ,gBACF,KAAK,CAAC,YAAY,CAAC,GAC/B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useContext } from 'react';\nimport type { AriaAttributes } from 'react';\n\nimport { useSizeControl } from '../../lib/size/useSizeControl.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { Button } from '../Button/index.js';\nimport type { FxInputProps } from './FxInput.js';\nimport { UndoIcon } from './UndoIcon.js';\n\ninterface FxInputRestoreBtnProps\n  extends Pick<AriaAttributes, 'aria-label'>, 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  const size = useSizeControl(props.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      use={'default'}\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"]}

package/components/GlobalLoader/GlobalLoaderView.js

@@ -20,52 +20,36 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useContext, useRef } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { ZIndex } from '../../internal/ZIndex/index.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
-import { GLOBAL_LOADER_VARS, getAnimations, getStyles } from './GlobalLoaderView.styles.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getAnimations, getStyles } from './GlobalLoaderView.styles.js';
 import { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';
 export var GlobalLoaderView = forwardRef(function (_a, externalRef) {
     var expectedResponseTime = _a.expectedResponseTime, delayBeforeHide = _a.delayBeforeHide, status = _a.status, disableAnimations = _a.disableAnimations, rest = __rest(_a, ["expectedResponseTime", "delayBeforeHide", "status", "disableAnimations"]);
     var ref = useRef(null);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var animations = useStyles(getAnimations);
     var _b = useGlobalLoaderWidth(status, ref), width = _b.width, startWidth = _b.startWidth, fullWidth = _b.fullWidth;
     var left = useGlobalLoaderPosition(ref).left;
-    // Измеренная геометрия и время ответа уходят в переменные, а не в правило:
-    // правила теперь статичны и целиком извлекаются на сборке. Присваивание
-    // идёт через CSSOM, которого `style-src-attr` не касается — директива
-    // покрывает атрибут `style` только при разборе разметки и `setAttribute`.
-    //
-    // Эффект слоя раскладки, а не обычный: значения должны стоять до того, как
-    // браузер нарисует кадр с уже применённым классом анимации.
-    useLayoutEffect(function () {
-        var node = ref.current;
-        if (!node) {
-            return;
-        }
-        node.style.setProperty(GLOBAL_LOADER_VARS.width, "".concat(width, "px"));
-        node.style.setProperty(GLOBAL_LOADER_VARS.left, "".concat(left, "px"));
-        node.style.setProperty(GLOBAL_LOADER_VARS.startWidth, "".concat(startWidth, "px"));
-        node.style.setProperty(GLOBAL_LOADER_VARS.expectedTime, String(expectedResponseTime));
-        node.style.setProperty(GLOBAL_LOADER_VARS.delayBeforeHide, String(delayBeforeHide));
-    }, [width, left, startWidth, expectedResponseTime, delayBeforeHide]);
     var getAnimationClass = function (status) {
         if (!disableAnimations) {
             switch (status) {
                 case 'success':
-                    return animations.successAnimation();
+                    return animations.successAnimation(delayBeforeHide, width, left);
                 case 'accept':
                     if (startWidth < fullWidth * 0.8) {
-                        return animations.acceptAnimation();
+                        return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);
                     }
-                    return animations.slowAcceptAnimation();
+                    return animations.slowAcceptAnimation(theme, startWidth, width, left);
                 case 'error':
-                    return animations.errorAnimation();
+                    return animations.errorAnimation(theme);
                 case 'standard':
-                    return animations.standardAnimation();
+                    return animations.standardAnimation(theme, expectedResponseTime);
             }
         }
         if (disableAnimations) {
@@ -73,7 +57,7 @@ export var GlobalLoaderView = forwardRef(function (_a, externalRef) {
                 case 'success':
                     return styles.successWithoutAnimation();
                 case 'accept':
-                    return animations.acceptWithoutAnimation();
+                    return animations.acceptWithoutAnimation(startWidth);
                 case 'error':
                     return styles.errorWithoutAnimation();
                 case 'standard':
@@ -82,7 +66,7 @@ export var GlobalLoaderView = forwardRef(function (_a, externalRef) {
         }
     };
     return (React.createElement(CommonWrapper, __assign({}, rest, { "data-status": status, ref: externalRef }),
-        React.createElement(ZIndex, { priority: "GlobalLoader", className: styles.outer() },
-            React.createElement("div", { ref: ref, className: cx(styles.inner(), getAnimationClass(status)) }))));
+        React.createElement(ZIndex, { priority: "GlobalLoader", className: styles.outer(theme) },
+            React.createElement("div", { ref: ref, className: cx(styles.inner(theme), getAnimationClass(status)) }))));
 });
 //# sourceMappingURL=GlobalLoaderView.js.map

package/components/GlobalLoader/GlobalLoaderView.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalLoaderView.js","sourceRoot":"","sources":["GlobalLoaderView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport { GLOBAL_LOADER_VARS, getAnimations, getStyles } from './GlobalLoaderView.styles.js';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  /** Устанавливает ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime: number;\n\n  /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */\n  delayBeforeHide: number;\n\n  /** Устанавливает статус операции. */\n  status?: 'success' | 'error' | 'standard' | 'accept';\n\n  /** Отключает анимацию. */\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element'] | null>;\n}\n\nexport const GlobalLoaderView = forwardRef(\n  (\n    { expectedResponseTime, delayBeforeHide, status, disableAnimations, ...rest }: GlobalLoaderViewProps,\n    externalRef: React.Ref<CommonWrapper<CommonProps>>,\n  ) => {\n    const ref = useRef<GlobalLoaderViewRef['element']>(null);\n    const styles = useStyles(getStyles);\n    const animations = useStyles(getAnimations);\n    const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n    const { left } = useGlobalLoaderPosition(ref);\n\n    // Измеренная геометрия и время ответа уходят в переменные, а не в правило:\n    // правила теперь статичны и целиком извлекаются на сборке. Присваивание\n    // идёт через CSSOM, которого `style-src-attr` не касается — директива\n    // покрывает атрибут `style` только при разборе разметки и `setAttribute`.\n    //\n    // Эффект слоя раскладки, а не обычный: значения должны стоять до того, как\n    // браузер нарисует кадр с уже применённым классом анимации.\n    useLayoutEffect(() => {\n      const node = ref.current;\n      if (!node) {\n        return;\n      }\n\n      node.style.setProperty(GLOBAL_LOADER_VARS.width, `${width}px`);\n      node.style.setProperty(GLOBAL_LOADER_VARS.left, `${left}px`);\n      node.style.setProperty(GLOBAL_LOADER_VARS.startWidth, `${startWidth}px`);\n      node.style.setProperty(GLOBAL_LOADER_VARS.expectedTime, String(expectedResponseTime));\n      node.style.setProperty(GLOBAL_LOADER_VARS.delayBeforeHide, String(delayBeforeHide));\n    }, [width, left, startWidth, expectedResponseTime, delayBeforeHide]);\n\n    const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n      if (!disableAnimations) {\n        switch (status) {\n          case 'success':\n            return animations.successAnimation();\n          case 'accept':\n            if (startWidth < fullWidth * 0.8) {\n              return animations.acceptAnimation();\n            }\n            return animations.slowAcceptAnimation();\n          case 'error':\n            return animations.errorAnimation();\n          case 'standard':\n            return animations.standardAnimation();\n        }\n      }\n\n      if (disableAnimations) {\n        switch (status) {\n          case 'success':\n            return styles.successWithoutAnimation();\n          case 'accept':\n            return animations.acceptWithoutAnimation();\n          case 'error':\n            return styles.errorWithoutAnimation();\n          case 'standard':\n            return styles.standardWithoutAnimation();\n        }\n      }\n    };\n\n    return (\n      <CommonWrapper {...rest} data-status={status} ref={externalRef}>\n        <ZIndex priority=\"GlobalLoader\" className={styles.outer()}>\n          <div ref={ref} className={cx(styles.inner(), getAnimationClass(status))} />\n        </ZIndex>\n      </CommonWrapper>\n    );\n  },\n);\n"]}
+{"version":3,"file":"GlobalLoaderView.js","sourceRoot":"","sources":["GlobalLoaderView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAqB/E,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAU,CACxC,UACE,EAAoG,EACpG,WAAkD;IADhD,IAAA,oBAAoB,0BAAA,EAAE,eAAe,qBAAA,EAAE,MAAM,YAAA,EAAE,iBAAiB,uBAAA,EAAK,IAAI,cAA3E,0EAA6E,CAAF;IAG3E,IAAM,GAAG,GAAG,MAAM,CAAiC,IAAI,CAAC,CAAC;IACzD,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAA,KAAmC,oBAAoB,CAAC,MAAM,EAAE,GAAG,CAAC,EAAlE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,SAAS,eAAsC,CAAC;IACnE,IAAA,IAAI,GAAK,uBAAuB,CAAC,GAAG,CAAC,KAAjC,CAAkC;IAE9C,IAAM,iBAAiB,GAAG,UAAC,MAAuC;QAChE,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,QAAQ,MAAM,EAAE,CAAC;gBACf,KAAK,SAAS;oBACZ,OAAO,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;gBACnE,KAAK,QAAQ;oBACX,IAAI,UAAU,GAAG,SAAS,GAAG,GAAG,EAAE,CAAC;wBACjC,OAAO,UAAU,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;oBAC1F,CAAC;oBACD,OAAO,UAAU,CAAC,mBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;gBACxE,KAAK,OAAO;oBACV,OAAO,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBAC1C,KAAK,UAAU;oBACb,OAAO,UAAU,CAAC,iBAAiB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;YACrE,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,EAAE,CAAC;YACtB,QAAQ,MAAM,EAAE,CAAC;gBACf,KAAK,SAAS;oBACZ,OAAO,MAAM,CAAC,uBAAuB,EAAE,CAAC;gBAC1C,KAAK,QAAQ;oBACX,OAAO,UAAU,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC;gBACvD,KAAK,OAAO;oBACV,OAAO,MAAM,CAAC,qBAAqB,EAAE,CAAC;gBACxC,KAAK,UAAU;oBACb,OAAO,MAAM,CAAC,wBAAwB,EAAE,CAAC;YAC7C,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI,mBAAe,MAAM,EAAE,GAAG,EAAE,WAAW;QAC5D,oBAAC,MAAM,IAAC,QAAQ,EAAC,cAAc,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YAC5D,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,GAAI,CACzE,CACK,CACjB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { forwardRef, useContext, useRef } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { getAnimations, getStyles } from './GlobalLoaderView.styles.js';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  /** Устанавливает ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime: number;\n\n  /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */\n  delayBeforeHide: number;\n\n  /** Устанавливает статус операции. */\n  status?: 'success' | 'error' | 'standard' | 'accept';\n\n  /** Отключает анимацию. */\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element'] | null>;\n}\n\nexport const GlobalLoaderView = forwardRef(\n  (\n    { expectedResponseTime, delayBeforeHide, status, disableAnimations, ...rest }: GlobalLoaderViewProps,\n    externalRef: React.Ref<CommonWrapper<CommonProps>>,\n  ) => {\n    const ref = useRef<GlobalLoaderViewRef['element']>(null);\n    const theme = useContext(ThemeContext);\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n    const animations = useStyles(getAnimations);\n    const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n    const { left } = useGlobalLoaderPosition(ref);\n\n    const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n      if (!disableAnimations) {\n        switch (status) {\n          case 'success':\n            return animations.successAnimation(delayBeforeHide, width, left);\n          case 'accept':\n            if (startWidth < fullWidth * 0.8) {\n              return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n            }\n            return animations.slowAcceptAnimation(theme, startWidth, width, left);\n          case 'error':\n            return animations.errorAnimation(theme);\n          case 'standard':\n            return animations.standardAnimation(theme, expectedResponseTime);\n        }\n      }\n\n      if (disableAnimations) {\n        switch (status) {\n          case 'success':\n            return styles.successWithoutAnimation();\n          case 'accept':\n            return animations.acceptWithoutAnimation(startWidth);\n          case 'error':\n            return styles.errorWithoutAnimation();\n          case 'standard':\n            return styles.standardWithoutAnimation();\n        }\n      }\n    };\n\n    return (\n      <CommonWrapper {...rest} data-status={status} ref={externalRef}>\n        <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n          <div ref={ref} className={cx(styles.inner(theme), getAnimationClass(status))} />\n        </ZIndex>\n      </CommonWrapper>\n    );\n  },\n);\n"]}

package/components/GlobalLoader/GlobalLoaderView.styles.d.ts

@@ -1,23 +1,17 @@
-export declare const GLOBAL_LOADER_VARS: {
-    width: string;
-    left: string;
-    startWidth: string;
-    expectedTime: string;
-    delayBeforeHide: string;
-};
-/** Правила — в `GlobalLoaderView.css`; здесь только имена классов. */
-export declare const getAnimations: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    successAnimation: string;
-    errorAnimation: string;
-    standardAnimation: string;
-    acceptAnimation: string;
-    slowAcceptAnimation: string;
-    acceptWithoutAnimation: string;
-}>;
-export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
-    outer: string;
-    inner: string;
-    standardWithoutAnimation: string;
-    successWithoutAnimation: string;
-    errorWithoutAnimation: string;
+import type { Emotion } from '@emotion/css/create-instance';
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
 }>;
+export declare const getAnimations: (emotion: Emotion) => {
+    successAnimation(delayBeforeHide: number, width: number, left: number): string;
+    errorAnimation(t: Theme): string;
+    standardAnimation(t: Theme, expectedTime: number): string;
+    acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;
+    slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;
+    acceptWithoutAnimation(startWidth: number): string;
+};

package/components/GlobalLoader/GlobalLoaderView.styles.js

@@ -1,25 +1,70 @@
-import { staticStyles } from '../../lib/theming/staticStyles.js';
-export var GLOBAL_LOADER_VARS = {
-    width: '--react-ui-global-loader-width',
-    left: '--react-ui-global-loader-left',
-    startWidth: '--react-ui-global-loader-start-width',
-    expectedTime: '--react-ui-global-loader-expected-time',
-    delayBeforeHide: '--react-ui-global-loader-delay-before-hide',
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-/** Правила — в `GlobalLoaderView.css`; здесь только имена классов. */
-export var getAnimations = staticStyles({
-    successAnimation: 'react-ui-GlobalLoaderView-Animations-successAnimation',
-    errorAnimation: 'react-ui-GlobalLoaderView-Animations-errorAnimation',
-    standardAnimation: 'react-ui-GlobalLoaderView-Animations-standardAnimation',
-    acceptAnimation: 'react-ui-GlobalLoaderView-Animations-acceptAnimation',
-    slowAcceptAnimation: 'react-ui-GlobalLoaderView-Animations-slowAcceptAnimation',
-    acceptWithoutAnimation: 'react-ui-GlobalLoaderView-Animations-acceptWithoutAnimation',
-});
-export var getStyles = staticStyles({
-    outer: 'react-ui-GlobalLoaderView-outer',
-    inner: 'react-ui-GlobalLoaderView-inner',
-    standardWithoutAnimation: 'react-ui-GlobalLoaderView-standardWithoutAnimation',
-    successWithoutAnimation: 'react-ui-GlobalLoaderView-successWithoutAnimation',
-    errorWithoutAnimation: 'react-ui-GlobalLoaderView-errorWithoutAnimation',
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        outer: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      position: ", ";\n      left: ", ";\n      top: ", ";\n      right: ", ";\n      bottom: ", ";\n      overflow: hidden;\n    "], ["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      position: ", ";\n      left: ", ";\n      top: ", ";\n      right: ", ";\n      bottom: ", ";\n      overflow: hidden;\n    "])), t.globalLoaderWidth, t.globalLoaderHeight, t.globalLoaderBackgroundColor, t.globalLoaderPosition, t.globalLoaderLeft, t.globalLoaderTop, t.globalLoaderRight, t.globalLoaderBottom);
+        },
+        inner: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "], ["\n      background-color: ", ";\n      width: 0;\n      height: ", ";\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    "])), t.globalLoaderColor, t.globalLoaderHeight);
+        },
+        standardWithoutAnimation: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: 0;\n      width: 90%;\n    "], ["\n      left: 0;\n      width: 90%;\n    "])));
+        },
+        successWithoutAnimation: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      left: 0;\n      width: 100%;\n    "], ["\n      left: 0;\n      width: 100%;\n    "])));
+        },
+        errorWithoutAnimation: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      left: 40%;\n      width: 20%;\n    "], ["\n      left: 40%;\n      width: 20%;\n    "])));
+        },
+    });
 });
+var moveToRightAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n"], ["\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n"])));
+};
+var spinnerAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n"], ["\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n"])));
+};
+var linearProgressAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  from { width: 0; }\n  to { width: 80% }\n"], ["\n  from { width: 0; }\n  to { width: 80% }\n"])));
+};
+var slowProgressAnimation = function (_a) {
+    var keyframes = _a.keyframes;
+    return keyframes(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  from { width: 80%; }\n  to { width: 90% }\n"], ["\n  from { width: 80%; }\n  to { width: 90% }\n"])));
+};
+export var getAnimations = function (emotion) { return ({
+    successAnimation: function (delayBeforeHide, width, left) {
+        return emotion.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          left: ", "px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    "], ["\n      animation: successAnimation;\n      animation-duration: ", "ms;\n      @keyframes successAnimation {\n        0% {\n          width: ", "px;\n          left: ", "px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    "])), delayBeforeHide, width, left);
+    },
+    errorAnimation: function (t) {
+        var transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);
+        var spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);
+        return emotion.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      left: 0;\n      width: 100%;\n      animation:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "], ["\n      left: 0;\n      width: 100%;\n      animation:\n        ", " ", "ms linear,\n        ", "ms ", " ", "ms infinite alternate;\n    "])), moveToRightAnimation(emotion), transitionDuration, spinnerAnimationDuration, spinnerAnimation(emotion), transitionDuration);
+    },
+    standardAnimation: function (t, expectedTime) {
+        var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+        return emotion.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      width: 90%;\n      animation:\n        ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "], ["\n      width: 90%;\n      animation:\n        ", " ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n    "])), linearProgressAnimation(emotion), expectedTime, slowProgressAnimationTime, slowProgressAnimation(emotion), expectedTime);
+    },
+    acceptAnimation: function (t, startWidth, expectedTime, width, left) {
+        var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+        var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+        return emotion.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "], ["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms cubic-bezier(0, 0.4, 0.4, 1),\n        ", "ms ", " ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    "])), transitionTime, expectedTime, transitionTime, slowProgressAnimationTime, slowProgressAnimation(emotion), expectedTime + transitionTime, width, left, startWidth, startWidth);
+    },
+    slowAcceptAnimation: function (t, startWidth, width, left) {
+        var transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);
+        var slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);
+        return emotion.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "], ["\n      width: 90%;\n      animation:\n        transitionAnimation ", "ms linear,\n        ", "ms acceptAnimation ", "ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ", "px;\n          left: ", "px;\n        }\n        to {\n          width: ", "px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ", "px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    "])), transitionTime, slowProgressAnimationTime, transitionTime, width, left, startWidth, startWidth);
+    },
+    acceptWithoutAnimation: function (startWidth) {
+        return emotion.css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), startWidth);
+    },
+}); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 //# sourceMappingURL=GlobalLoaderView.styles.js.map

package/components/GlobalLoader/GlobalLoaderView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalLoaderView.styles.js","sourceRoot":"","sources":["GlobalLoaderView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE,gCAAgC;IACvC,IAAI,EAAE,+BAA+B;IACrC,UAAU,EAAE,sCAAsC;IAClD,YAAY,EAAE,wCAAwC;IACtD,eAAe,EAAE,4CAA4C;CAC9D,CAAC;AAEF,sEAAsE;AACtE,MAAM,CAAC,IAAM,aAAa,GAAG,YAAY,CAAC;IACxC,gBAAgB,EAAE,uDAAuD;IACzE,cAAc,EAAE,qDAAqD;IACrE,iBAAiB,EAAE,wDAAwD;IAC3E,eAAe,EAAE,sDAAsD;IACvE,mBAAmB,EAAE,0DAA0D;IAC/E,sBAAsB,EAAE,6DAA6D;CACtF,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,KAAK,EAAE,iCAAiC;IACxC,KAAK,EAAE,iCAAiC;IACxC,wBAAwB,EAAE,oDAAoD;IAC9E,uBAAuB,EAAE,mDAAmD;IAC5E,qBAAqB,EAAE,iDAAiD;CACzE,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\nexport const GLOBAL_LOADER_VARS = {\n  width: '--react-ui-global-loader-width',\n  left: '--react-ui-global-loader-left',\n  startWidth: '--react-ui-global-loader-start-width',\n  expectedTime: '--react-ui-global-loader-expected-time',\n  delayBeforeHide: '--react-ui-global-loader-delay-before-hide',\n};\n\n/** Правила — в `GlobalLoaderView.css`; здесь только имена классов. */\nexport const getAnimations = staticStyles({\n  successAnimation: 'react-ui-GlobalLoaderView-Animations-successAnimation',\n  errorAnimation: 'react-ui-GlobalLoaderView-Animations-errorAnimation',\n  standardAnimation: 'react-ui-GlobalLoaderView-Animations-standardAnimation',\n  acceptAnimation: 'react-ui-GlobalLoaderView-Animations-acceptAnimation',\n  slowAcceptAnimation: 'react-ui-GlobalLoaderView-Animations-slowAcceptAnimation',\n  acceptWithoutAnimation: 'react-ui-GlobalLoaderView-Animations-acceptWithoutAnimation',\n});\n\nexport const getStyles = staticStyles({\n  outer: 'react-ui-GlobalLoaderView-outer',\n  inner: 'react-ui-GlobalLoaderView-inner',\n  standardWithoutAnimation: 'react-ui-GlobalLoaderView-standardWithoutAnimation',\n  successWithoutAnimation: 'react-ui-GlobalLoaderView-successWithoutAnimation',\n  errorWithoutAnimation: 'react-ui-GlobalLoaderView-errorWithoutAnimation',\n});\n"]}
+{"version":3,"file":"GlobalLoaderView.styles.js","sourceRoot":"","sources":["GlobalLoaderView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  outer(t: Theme) {\n    return css`\n      width: ${t.globalLoaderWidth};\n      height: ${t.globalLoaderHeight};\n      background-color: ${t.globalLoaderBackgroundColor};\n      position: ${t.globalLoaderPosition};\n      left: ${t.globalLoaderLeft};\n      top: ${t.globalLoaderTop};\n      right: ${t.globalLoaderRight};\n      bottom: ${t.globalLoaderBottom};\n      overflow: hidden;\n    `;\n  },\n  inner(t: Theme) {\n    return css`\n      background-color: ${t.globalLoaderColor};\n      width: 0;\n      height: ${t.globalLoaderHeight};\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    `;\n  },\n  standardWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 90%;\n    `;\n  },\n  successWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 100%;\n    `;\n  },\n  errorWithoutAnimation() {\n    return css`\n      left: 40%;\n      width: 20%;\n    `;\n  },\n}));\n\nconst moveToRightAnimation = ({ keyframes }: Emotion) => keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\nconst spinnerAnimation = ({ keyframes }: Emotion) => keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\nconst linearProgressAnimation = ({ keyframes }: Emotion) => keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = ({ keyframes }: Emotion) => keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\nexport const getAnimations = (\n  emotion: Emotion,\n): {\n  successAnimation(delayBeforeHide: number, width: number, left: number): string;\n  errorAnimation(t: Theme): string;\n  standardAnimation(t: Theme, expectedTime: number): string;\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;\n  acceptWithoutAnimation(startWidth: number): string;\n} => ({\n  successAnimation(delayBeforeHide: number, width: number, left: number) {\n    return emotion.css`\n      animation: successAnimation;\n      animation-duration: ${delayBeforeHide}ms;\n      @keyframes successAnimation {\n        0% {\n          width: ${width}px;\n          left: ${left}px;\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      }\n    `;\n  },\n  errorAnimation(t: Theme) {\n    const transitionDuration = parseInt(t.globalLoaderTransitionToSpinnerDuration);\n    const spinnerAnimationDuration = parseInt(t.globalLoaderSpinnerAnimationDuration);\n\n    return emotion.css`\n      left: 0;\n      width: 100%;\n      animation:\n        ${moveToRightAnimation(emotion)} ${transitionDuration}ms linear,\n        ${spinnerAnimationDuration}ms ${spinnerAnimation(emotion)} ${transitionDuration}ms infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme, expectedTime: number) {\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return emotion.css`\n      width: 90%;\n      animation:\n        ${linearProgressAnimation(emotion)} ${expectedTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation(emotion)} ${expectedTime}ms linear;\n    `;\n  },\n  acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return emotion.css`\n      width: 90%;\n      animation:\n        transitionAnimation ${transitionTime}ms linear,\n        ${expectedTime}ms acceptAnimation ${transitionTime}ms cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime}ms ${slowProgressAnimation(emotion)} ${expectedTime + transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 80%;\n        }\n      }\n    `;\n  },\n  slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number) {\n    const transitionTime = parseInt(t.globalLoaderTransitionFromSpinnerDuration);\n    const slowProgressAnimationTime = parseInt(t.globalLoaderSlowAnimationDuration);\n    return emotion.css`\n      width: 90%;\n      animation:\n        transitionAnimation ${transitionTime}ms linear,\n        ${slowProgressAnimationTime}ms acceptAnimation ${transitionTime}ms linear;\n      @keyframes transitionAnimation {\n        from {\n          width: ${width}px;\n          left: ${left}px;\n        }\n        to {\n          width: ${startWidth}px;\n          left: 0;\n        }\n      }\n      @keyframes acceptAnimation {\n        from {\n          width: ${startWidth}px;\n        }\n        to {\n          width: 90%;\n        }\n      }\n    `;\n  },\n  acceptWithoutAnimation(startWidth: number) {\n    return emotion.css`\n      width: ${startWidth}px;\n    `;\n  },\n});\n"]}

package/components/Group/Group.d.ts

@@ -17,6 +17,7 @@ export declare class Group extends React.Component<GroupProps> {
     static displayName: string;
     getRootNode: TGetRootNode;
     private setRootNode;
+    private emotion;
     private cx;
     private styles;
     render(): React.JSX.Element;