@skbkontur/react-ui 6.4.2 → 6.4.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.4.3](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.4.2...@skbkontur/react-ui@6.4.3) (2026-10-13)
+
+
+### Bug Fixes
+
+* **FxInput:** forward hideTrailingZeros to CurrencyInput ([7080b15](https://github.com/skbkontur/retail-ui/commit/7080b1511e0e372bc86b34c20157585f89112501))
+* **SidePage:** account for sticky header and footer when scrolling to an invalid field ([6219b12](https://github.com/skbkontur/retail-ui/commit/6219b12888b87a13cb2e9b8da4684b0459ccb71a))
+
+
+
+
+
 ## [6.4.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.4.1...@skbkontur/react-ui@6.4.2) (2026-09-29)
 
 

package/components/FxInput/FxInput.js

@@ -116,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 })));

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 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          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":"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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 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/SidePage/SidePage.d.ts

@@ -50,6 +50,8 @@ export interface SidePageState {
     hasHeader: boolean;
     hasFooter: boolean;
     hasPanel: boolean;
+    stickyHeaderHeight: number;
+    stickyFooterHeight: number;
 }
 export declare const SidePageDataTids: {
     readonly root: "SidePage__root";
@@ -112,5 +114,7 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     private setHasHeader;
     private setHasFooter;
     private setHasPanel;
+    private setStickyHeaderHeight;
+    private setStickyFooterHeight;
 }
 export {};

package/components/SidePage/SidePage.js

@@ -76,6 +76,8 @@ var SidePage = /** @class */ (function (_super) {
             hasHeader: false,
             hasFooter: false,
             hasPanel: false,
+            stickyHeaderHeight: 0,
+            stickyFooterHeight: 0,
         };
         _this.stackSubscription = null;
         _this.layout = null;
@@ -105,6 +107,8 @@ var SidePage = /** @class */ (function (_super) {
                 setHasHeader: _this.setHasHeader,
                 setHasFooter: _this.setHasFooter,
                 setHasPanel: _this.setHasPanel,
+                setStickyHeaderHeight: _this.setStickyHeaderHeight,
+                setStickyFooterHeight: _this.setStickyFooterHeight,
             };
         };
         _this.getWidth = function () {
@@ -181,6 +185,18 @@ var SidePage = /** @class */ (function (_super) {
             if (hasPanel === void 0) { hasPanel = false; }
             _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
         };
+        _this.setStickyHeaderHeight = function (stickyHeaderHeight) {
+            if (stickyHeaderHeight === void 0) { stickyHeaderHeight = 0; }
+            if (_this.state.stickyHeaderHeight !== stickyHeaderHeight) {
+                _this.setState({ stickyHeaderHeight: stickyHeaderHeight });
+            }
+        };
+        _this.setStickyFooterHeight = function (stickyFooterHeight) {
+            if (stickyFooterHeight === void 0) { stickyFooterHeight = 0; }
+            if (_this.state.stickyFooterHeight !== stickyFooterHeight) {
+                _this.setState({ stickyFooterHeight: stickyFooterHeight });
+            }
+        };
         return _this;
     }
     SidePage_1 = SidePage;
@@ -266,7 +282,7 @@ var SidePage = /** @class */ (function (_super) {
                             _b[this.styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft,
                             _b[this.styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft,
                             _b[this.styles.shadow(this.theme)] = this.state.hasShadow,
-                            _b)), ref: this.layoutRef },
+                            _b)), "data-scroll-inset-top": this.state.stickyHeaderHeight || undefined, "data-scroll-inset-bottom": this.state.stickyFooterHeight || undefined, ref: this.layoutRef },
                         React.createElement(SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children))))));
     };
     SidePage.prototype.renderShadow = function () {

package/components/SidePage/SidePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePage.js","sourceRoot":"","sources":["SidePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable, isReactUIInstance } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageBody } from './SidePageBody.js';\nimport { SidePageContainer } from './SidePageContainer.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\nimport { SidePageFooter } from './SidePageFooter.js';\nimport { SidePageHeader } from './SidePageHeader.js';\nexport interface SidePageProps\n  extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {\n  /** Блокирует фон, когда сайдпейдж открыт: основная страница затемняется, действия на ней становятся недоступны. */\n  blockBackground?: boolean;\n\n  /** Отключает событие `onClose` и блокирует кнопку закрытия сайдпейджа. */\n  disableClose?: boolean;\n\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   * @deprecated Используйте `ignoreOutsideClick` вместо `ignoreBackgroundClick`\n   **/\n  ignoreBackgroundClick?: boolean;\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   **/\n  ignoreOutsideClick?: boolean;\n\n  /** Ширина сайдпейджа. */\n  width?: number | string;\n\n  /** Ширина сайдпейджа в мобильном режиме. По умолчанию ширина во весь экран. */\n  mobileWidth?: number | string;\n\n  /** Событие закрытия сайдпейджа пользователем: нажатие на фон, Escape или крестик. */\n  onClose?: () => void;\n\n  /** Событие завершения анимации открытия сайдпейджа. */\n  onOpened?: () => void;\n\n  /** Отображает сайдпейдж слева. */\n  fromLeft?: boolean;\n\n  /** Отключает анимацию открытия сайдпейджа. */\n  disableAnimations?: boolean;\n\n  /** Выключает ограничение на фокус вне сайдпейджа.\n   * Работает только при заблокированном фоне `blockBackground = true`.*/\n  disableFocusLock?: boolean;\n\n  /** Отступ от края экрана до сайдпейджа. */\n  offset?: number | string;\n  /**\n   * Событие нажатия на фон.\n   */\n  onOutsideClick?: (e: Event) => void;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nexport const SidePageDataTids = {\n  root: 'SidePage__root',\n  container: 'SidePage__container',\n} as const;\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'offset' | 'role'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.\n *\n * Составной компонент, включает в себя:\n * - «шапку» [SidePage.Header](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepageheader--docs), состоящую из заголовка и крестика закрытия окна;\n * - контент-зону [SidePage.Body](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagebody--docs) и контейнер с отступами [SidePage.Container](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagecontainer--docs);\n * - футер [SidePage.Footer](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagefooter--docs).\n */\n@withRenderEnvironment\n@rootNode\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n  public static displayName = 'SidePage';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  public rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    this.globalObject.addEventListener?.('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange, this.globalObject);\n  }\n\n  public componentDidUpdate(prevProps: SidePageProps) {\n    if (prevProps.blockBackground !== this.props.blockBackground) {\n      ModalStack.rerender(this.globalObject);\n      this.setState({\n        hasBackground: ModalStack.isBlocking(this, this.globalObject),\n      });\n    }\n  }\n\n  public componentWillUnmount() {\n    this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this, this.globalObject);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    this.header?.update();\n    this.footer?.update();\n  };\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    offset: 0,\n    role: 'dialog',\n  };\n\n  private getProps = createPropsGetter(SidePage.defaultProps);\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, onOpened } = this.props;\n    const disableAnimations = this.getProps().disableAnimations;\n    return (\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <RenderContainer>\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <ZIndex\n                priority={'Sidepage'}\n                onScroll={LayoutEvents.emit}\n                createStackingContext\n                style={{ position: 'absolute' }}\n              >\n                {!isMobile && blockBackground && this.renderShadow()}\n                <CSSTransition\n                  in\n                  classNames={this.getTransitionNames()}\n                  appear={!disableAnimations}\n                  enter={!disableAnimations}\n                  exit={false}\n                  timeout={{\n                    enter: TRANSITION_TIMEOUT,\n                    exit: TRANSITION_TIMEOUT,\n                  }}\n                  nodeRef={this.rootRef}\n                  onEntered={onOpened}\n                >\n                  {this.renderContainer(isMobile)}\n                </CSSTransition>\n                {isMobile && <HideBodyVerticalScroll />}\n              </ZIndex>\n            </CommonWrapper>\n          </RenderContainer>\n        )}\n      </ResponsiveLayout>\n    );\n  }\n\n  private get isFocusLockDisabled() {\n    const { disableFocusLock } = this.getProps();\n    const { blockBackground } = this.props;\n    if (!blockBackground) {\n      return true;\n    }\n    if (disableFocusLock !== undefined) {\n      return disableFocusLock;\n    }\n    return false;\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { mobileWidth, blockBackground, fromLeft, 'aria-label': ariaLabel } = this.props;\n    const { offset, role } = this.getProps();\n\n    const widthDesktop = this.props.width || (blockBackground ? 800 : 500);\n    const widthMobile = mobileWidth || '100%';\n    const width = isMobile ? widthMobile : widthDesktop;\n\n    return (\n      <div\n        aria-modal\n        role={role}\n        aria-label={ariaLabel}\n        data-tid={SidePageDataTids.root}\n        className={this.cx({\n          [this.styles.root()]: true,\n        })}\n        ref={this.rootRef}\n        onScroll={LayoutEvents.emit}\n        style={{\n          width,\n          right: fromLeft ? 'auto' : offset,\n          left: fromLeft ? offset : 'auto',\n        }}\n      >\n        <FocusLock disabled={this.isFocusLockDisabled} autoFocus={false} className={this.styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid={SidePageDataTids.container}\n              className={this.cx(this.styles.wrapper(this.theme), {\n                [this.styles.wrapperLeft()]: fromLeft,\n                [this.styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [this.styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [this.styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </div>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <div className={this.styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={this.cx({\n            [this.styles.background()]: true,\n            [this.styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </div>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? this.styles.transitionRight : this.styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: this.styles.transitionActive(),\n      exit: this.styles.transitionLeave(),\n      exitActive: this.styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: this.styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    const sidePages = stack.filter(\n      (x) => isReactUIInstance<SidePage>(x, 'SidePage') && x.props.fromLeft === this.props.fromLeft,\n    );\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this, this.globalObject);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !(this.props.ignoreBackgroundClick || this.props.ignoreOutsideClick)) {\n      // ignore mousedown on window scrollbar\n      if (\n        isInstanceOf(e, this.globalObject.MouseEvent) &&\n        this.globalObject.document &&\n        e.clientX > this.globalObject.document.documentElement.clientWidth\n      ) {\n        return;\n      }\n      if (this.props.onOutsideClick) {\n        this.props.onOutsideClick(e);\n        if (e.defaultPrevented) {\n          return;\n        }\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      e.stopPropagation();\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private headerRef = (ref: SidePageHeader | null) => {\n    this.header = ref;\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"file":"SidePage.js","sourceRoot":"","sources":["SidePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable, isReactUIInstance } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageBody } from './SidePageBody.js';\nimport { SidePageContainer } from './SidePageContainer.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\nimport { SidePageFooter } from './SidePageFooter.js';\nimport { SidePageHeader } from './SidePageHeader.js';\nexport interface SidePageProps\n  extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {\n  /** Блокирует фон, когда сайдпейдж открыт: основная страница затемняется, действия на ней становятся недоступны. */\n  blockBackground?: boolean;\n\n  /** Отключает событие `onClose` и блокирует кнопку закрытия сайдпейджа. */\n  disableClose?: boolean;\n\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   * @deprecated Используйте `ignoreOutsideClick` вместо `ignoreBackgroundClick`\n   **/\n  ignoreBackgroundClick?: boolean;\n  /**\n   * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n   **/\n  ignoreOutsideClick?: boolean;\n\n  /** Ширина сайдпейджа. */\n  width?: number | string;\n\n  /** Ширина сайдпейджа в мобильном режиме. По умолчанию ширина во весь экран. */\n  mobileWidth?: number | string;\n\n  /** Событие закрытия сайдпейджа пользователем: нажатие на фон, Escape или крестик. */\n  onClose?: () => void;\n\n  /** Событие завершения анимации открытия сайдпейджа. */\n  onOpened?: () => void;\n\n  /** Отображает сайдпейдж слева. */\n  fromLeft?: boolean;\n\n  /** Отключает анимацию открытия сайдпейджа. */\n  disableAnimations?: boolean;\n\n  /** Выключает ограничение на фокус вне сайдпейджа.\n   * Работает только при заблокированном фоне `blockBackground = true`.*/\n  disableFocusLock?: boolean;\n\n  /** Отступ от края экрана до сайдпейджа. */\n  offset?: number | string;\n  /**\n   * Событие нажатия на фон.\n   */\n  onOutsideClick?: (e: Event) => void;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n  stickyHeaderHeight: number;\n  stickyFooterHeight: number;\n}\n\nexport const SidePageDataTids = {\n  root: 'SidePage__root',\n  container: 'SidePage__container',\n} as const;\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'offset' | 'role'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.\n *\n * Составной компонент, включает в себя:\n * - «шапку» [SidePage.Header](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepageheader--docs), состоящую из заголовка и крестика закрытия окна;\n * - контент-зону [SidePage.Body](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagebody--docs) и контейнер с отступами [SidePage.Container](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagecontainer--docs);\n * - футер [SidePage.Footer](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagefooter--docs).\n */\n@withRenderEnvironment\n@rootNode\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n  public static displayName = 'SidePage';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n    stickyHeaderHeight: 0,\n    stickyFooterHeight: 0,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  public rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    this.globalObject.addEventListener?.('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange, this.globalObject);\n  }\n\n  public componentDidUpdate(prevProps: SidePageProps) {\n    if (prevProps.blockBackground !== this.props.blockBackground) {\n      ModalStack.rerender(this.globalObject);\n      this.setState({\n        hasBackground: ModalStack.isBlocking(this, this.globalObject),\n      });\n    }\n  }\n\n  public componentWillUnmount() {\n    this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this, this.globalObject);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    this.header?.update();\n    this.footer?.update();\n  };\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    offset: 0,\n    role: 'dialog',\n  };\n\n  private getProps = createPropsGetter(SidePage.defaultProps);\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, onOpened } = this.props;\n    const disableAnimations = this.getProps().disableAnimations;\n    return (\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <RenderContainer>\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <ZIndex\n                priority={'Sidepage'}\n                onScroll={LayoutEvents.emit}\n                createStackingContext\n                style={{ position: 'absolute' }}\n              >\n                {!isMobile && blockBackground && this.renderShadow()}\n                <CSSTransition\n                  in\n                  classNames={this.getTransitionNames()}\n                  appear={!disableAnimations}\n                  enter={!disableAnimations}\n                  exit={false}\n                  timeout={{\n                    enter: TRANSITION_TIMEOUT,\n                    exit: TRANSITION_TIMEOUT,\n                  }}\n                  nodeRef={this.rootRef}\n                  onEntered={onOpened}\n                >\n                  {this.renderContainer(isMobile)}\n                </CSSTransition>\n                {isMobile && <HideBodyVerticalScroll />}\n              </ZIndex>\n            </CommonWrapper>\n          </RenderContainer>\n        )}\n      </ResponsiveLayout>\n    );\n  }\n\n  private get isFocusLockDisabled() {\n    const { disableFocusLock } = this.getProps();\n    const { blockBackground } = this.props;\n    if (!blockBackground) {\n      return true;\n    }\n    if (disableFocusLock !== undefined) {\n      return disableFocusLock;\n    }\n    return false;\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { mobileWidth, blockBackground, fromLeft, 'aria-label': ariaLabel } = this.props;\n    const { offset, role } = this.getProps();\n\n    const widthDesktop = this.props.width || (blockBackground ? 800 : 500);\n    const widthMobile = mobileWidth || '100%';\n    const width = isMobile ? widthMobile : widthDesktop;\n\n    return (\n      <div\n        aria-modal\n        role={role}\n        aria-label={ariaLabel}\n        data-tid={SidePageDataTids.root}\n        className={this.cx({\n          [this.styles.root()]: true,\n        })}\n        ref={this.rootRef}\n        onScroll={LayoutEvents.emit}\n        style={{\n          width,\n          right: fromLeft ? 'auto' : offset,\n          left: fromLeft ? offset : 'auto',\n        }}\n      >\n        <FocusLock disabled={this.isFocusLockDisabled} autoFocus={false} className={this.styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid={SidePageDataTids.container}\n              className={this.cx(this.styles.wrapper(this.theme), {\n                [this.styles.wrapperLeft()]: fromLeft,\n                [this.styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [this.styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [this.styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              data-scroll-inset-top={this.state.stickyHeaderHeight || undefined}\n              data-scroll-inset-bottom={this.state.stickyFooterHeight || undefined}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </div>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n      setStickyHeaderHeight: this.setStickyHeaderHeight,\n      setStickyFooterHeight: this.setStickyFooterHeight,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <div className={this.styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={this.cx({\n            [this.styles.background()]: true,\n            [this.styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </div>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? this.styles.transitionRight : this.styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: this.styles.transitionActive(),\n      exit: this.styles.transitionLeave(),\n      exitActive: this.styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: this.styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    const sidePages = stack.filter(\n      (x) => isReactUIInstance<SidePage>(x, 'SidePage') && x.props.fromLeft === this.props.fromLeft,\n    );\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this, this.globalObject);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !(this.props.ignoreBackgroundClick || this.props.ignoreOutsideClick)) {\n      // ignore mousedown on window scrollbar\n      if (\n        isInstanceOf(e, this.globalObject.MouseEvent) &&\n        this.globalObject.document &&\n        e.clientX > this.globalObject.document.documentElement.clientWidth\n      ) {\n        return;\n      }\n      if (this.props.onOutsideClick) {\n        this.props.onOutsideClick(e);\n        if (e.defaultPrevented) {\n          return;\n        }\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      e.stopPropagation();\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private headerRef = (ref: SidePageHeader | null) => {\n    this.header = ref;\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n\n  private setStickyHeaderHeight = (stickyHeaderHeight = 0) => {\n    if (this.state.stickyHeaderHeight !== stickyHeaderHeight) {\n      this.setState({ stickyHeaderHeight });\n    }\n  };\n\n  private setStickyFooterHeight = (stickyFooterHeight = 0) => {\n    if (this.state.stickyFooterHeight !== stickyFooterHeight) {\n      this.setState({ stickyFooterHeight });\n    }\n  };\n}\n"]}

package/components/SidePage/SidePageContext.d.ts

@@ -13,5 +13,7 @@ export interface SidePageContextType {
     setHasHeader?: (value?: boolean) => void;
     setHasFooter?: (value?: boolean) => void;
     setHasPanel?: (value?: boolean) => void;
+    setStickyHeaderHeight?: (value?: number) => void;
+    setStickyFooterHeight?: (value?: number) => void;
 }
 export declare const SidePageContext: React.Context<SidePageContextType>;

package/components/SidePage/SidePageContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageContext.js","sourceRoot":"","sources":["SidePageContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAsB;IACtE,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,QAAQ,EAAE,cAAM,OAAA,MAAM,EAAN,CAAM;IACtB,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC1B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;CAC3B,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { SidePageFooter } from './SidePageFooter.js';\nimport type { SidePageHeader } from './SidePageHeader.js';\n\nexport interface SidePageContextType {\n  requestClose: () => void;\n  getWidth: () => number | string;\n  updateLayout: () => void;\n  headerRef: (ref: SidePageHeader | null) => void;\n  footerRef: (ref: SidePageFooter | null) => void;\n  hasHeader?: boolean;\n  hasFooter?: boolean;\n  hasPanel?: boolean;\n  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\n}\n\nexport const SidePageContext = React.createContext<SidePageContextType>({\n  requestClose: () => undefined,\n  getWidth: () => 'auto',\n  updateLayout: () => undefined,\n  headerRef: () => undefined,\n  footerRef: () => undefined,\n});\n\nSidePageContext.displayName = 'SidePageContext';\n"]}
+{"version":3,"file":"SidePageContext.js","sourceRoot":"","sources":["SidePageContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAsB;IACtE,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,QAAQ,EAAE,cAAM,OAAA,MAAM,EAAN,CAAM;IACtB,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC1B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;CAC3B,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { SidePageFooter } from './SidePageFooter.js';\nimport type { SidePageHeader } from './SidePageHeader.js';\n\nexport interface SidePageContextType {\n  requestClose: () => void;\n  getWidth: () => number | string;\n  updateLayout: () => void;\n  headerRef: (ref: SidePageHeader | null) => void;\n  footerRef: (ref: SidePageFooter | null) => void;\n  hasHeader?: boolean;\n  hasFooter?: boolean;\n  hasPanel?: boolean;\n  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\n  setStickyHeaderHeight?: (value?: number) => void;\n  setStickyFooterHeight?: (value?: number) => void;\n}\n\nexport const SidePageContext = React.createContext<SidePageContextType>({\n  requestClose: () => undefined,\n  getWidth: () => 'auto',\n  updateLayout: () => undefined,\n  headerRef: () => undefined,\n  footerRef: () => undefined,\n});\n\nSidePageContext.displayName = 'SidePageContext';\n"]}

package/components/SidePage/SidePageFooter.js

@@ -68,12 +68,14 @@ var SidePageFooter = /** @class */ (function (_super) {
             _this.content = node;
         };
         _this.setProperStyles = function () {
+            var _a, _b;
             var wrapper = getRootNode(_this);
             if (wrapper && _this.content) {
                 var wrapperRect = getDOMRect(wrapper);
                 var contentRect = getDOMRect(_this.content);
                 var fixed = wrapperRect.top > contentRect.top;
                 _this.setState({ fixed: fixed });
+                (_b = (_a = _this.context).setStickyFooterHeight) === null || _b === void 0 ? void 0 : _b.call(_a, _this.getSticky() ? contentRect.height : 0);
             }
         };
         return _this;
@@ -91,13 +93,14 @@ var SidePageFooter = /** @class */ (function (_super) {
         this.props.panel !== prevProps.panel && ((_b = (_a = this.context).setHasPanel) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.panel));
     };
     SidePageFooter.prototype.componentWillUnmount = function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         this.context.footerRef(null);
         if (this.layoutSub) {
             this.layoutSub.remove();
         }
         (_b = (_a = this.context).setHasFooter) === null || _b === void 0 ? void 0 : _b.call(_a, false);
         (_d = (_c = this.context).setHasPanel) === null || _d === void 0 ? void 0 : _d.call(_c, false);
+        (_f = (_e = this.context).setStickyFooterHeight) === null || _f === void 0 ? void 0 : _f.call(_e, 0);
     };
     SidePageFooter.prototype.getSticky = function () {
         if (typeof this.props.sticky !== 'undefined') {

package/components/SidePage/SidePageFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageFooter.js","sourceRoot":"","sources":["SidePageFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { Gapped } from '../Gapped/index.js';\nimport type { GappedProps } from '../Gapped/index.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageFooterProps extends Omit<CommonProps, 'children'> {\n  /** @ignore */\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n\n  /** Включает разделитель перед футером. */\n  panel?: boolean;\n\n  /** Закрепляет футер снизу сайдпейджа при скролле длинной контент-зоны. */\n  sticky?: boolean;\n\n  /** Расстояние между элементами футера в пикселях. */\n  gap?: GappedProps['gap'];\n}\n\ninterface SidePageFooterState {\n  fixed: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n  root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа, где обычно располагаются кнопки основных действий.\n *\n * @visibleName SidePage.Footer\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<React.PropsWithChildren<SidePageFooterProps>> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n  public static displayName = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state: SidePageFooterState = {\n    fixed: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update, this.globalObject);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky(): boolean {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = (): void => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    const separator: React.ReactNode = (this.props.panel || this.state.fixed) && (\n      <ModalSeparator fixed={this.state.fixed} />\n    );\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageFooterDataTids.root}\n          style={{ height: this.getContentHeight() }}\n          className={this.styles.footerWrapper()}\n        >\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={this.cx(this.styles.footer(this.theme), {\n                  [this.styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                {separator}\n                <div\n                  className={this.cx(this.styles.footerContent(this.theme), {\n                    [this.styles.footerFixed(this.theme)]: this.state.fixed,\n                    [this.styles.panel(this.theme)]: !!this.props.panel,\n                    [this.styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n                    [this.styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {isNonNullable(this.props.gap) ? (\n                    <Gapped vertical={this.isMobileLayout} gap={this.props.gap}>\n                      {this.props.children}\n                    </Gapped>\n                  ) : (\n                    this.props.children\n                  )}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = getDOMRect(wrapper);\n      const contentRect = getDOMRect(this.content);\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return getDOMRect(this.content).height;\n  }\n}\n"]}
+{"version":3,"file":"SidePageFooter.js","sourceRoot":"","sources":["SidePageFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { Gapped } from '../Gapped/index.js';\nimport type { GappedProps } from '../Gapped/index.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageFooterProps extends Omit<CommonProps, 'children'> {\n  /** @ignore */\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n\n  /** Включает разделитель перед футером. */\n  panel?: boolean;\n\n  /** Закрепляет футер снизу сайдпейджа при скролле длинной контент-зоны. */\n  sticky?: boolean;\n\n  /** Расстояние между элементами футера в пикселях. */\n  gap?: GappedProps['gap'];\n}\n\ninterface SidePageFooterState {\n  fixed: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n  root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа, где обычно располагаются кнопки основных действий.\n *\n * @visibleName SidePage.Footer\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<React.PropsWithChildren<SidePageFooterProps>> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n  public static displayName = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state: SidePageFooterState = {\n    fixed: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update, this.globalObject);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n    this.context.setStickyFooterHeight?.(0);\n  }\n\n  public getSticky(): boolean {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = (): void => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    const separator: React.ReactNode = (this.props.panel || this.state.fixed) && (\n      <ModalSeparator fixed={this.state.fixed} />\n    );\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageFooterDataTids.root}\n          style={{ height: this.getContentHeight() }}\n          className={this.styles.footerWrapper()}\n        >\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={this.cx(this.styles.footer(this.theme), {\n                  [this.styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                {separator}\n                <div\n                  className={this.cx(this.styles.footerContent(this.theme), {\n                    [this.styles.footerFixed(this.theme)]: this.state.fixed,\n                    [this.styles.panel(this.theme)]: !!this.props.panel,\n                    [this.styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n                    [this.styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {isNonNullable(this.props.gap) ? (\n                    <Gapped vertical={this.isMobileLayout} gap={this.props.gap}>\n                      {this.props.children}\n                    </Gapped>\n                  ) : (\n                    this.props.children\n                  )}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = getDOMRect(wrapper);\n      const contentRect = getDOMRect(this.content);\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n      this.context.setStickyFooterHeight?.(this.getSticky() ? contentRect.height : 0);\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return getDOMRect(this.content).height;\n  }\n}\n"]}

package/components/SidePage/SidePageHeader.d.ts

@@ -47,6 +47,7 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     componentWillUnmount: () => void;
     private throttleHandleScroll;
     update: () => void;
+    private updateStickyHeight;
     render(): JSX.Element;
     getStickyProp(): boolean;
     private renderMain;

package/components/SidePage/SidePageHeader.js

@@ -33,6 +33,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import throttle from 'lodash.throttle';
 import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { getDOMRect } from '../../lib/dom/getDOMRect.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
@@ -68,12 +69,14 @@ var SidePageHeader = /** @class */ (function (_super) {
             (_c = (_b = (_a = getRootNode(_this)) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.addEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, 'scroll', _this.throttleHandleScroll, true);
             (_e = (_d = _this.context).setHasHeader) === null || _e === void 0 ? void 0 : _e.call(_d);
             _this.context.headerRef(_this);
+            _this.updateStickyHeight();
         };
         _this.componentWillUnmount = function () {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
             (_c = (_b = (_a = getRootNode(_this)) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, 'scroll', _this.throttleHandleScroll, true);
             (_e = (_d = _this.context).setHasHeader) === null || _e === void 0 ? void 0 : _e.call(_d, false);
             _this.context.headerRef(null);
+            (_g = (_f = _this.context).setStickyHeaderHeight) === null || _g === void 0 ? void 0 : _g.call(_f, 0);
         };
         _this.throttleHandleScroll = throttle(function (event) {
             var target = event.currentTarget;
@@ -81,11 +84,17 @@ var SidePageHeader = /** @class */ (function (_super) {
                 _this.setState({ isNativeStuck: target.scrollTop === 0 });
             }
             _this.update();
+            _this.updateStickyHeight();
         }, 5);
         _this.update = function () {
             var _a;
             (_a = _this.sticky) === null || _a === void 0 ? void 0 : _a.reflow();
         };
+        _this.updateStickyHeight = function () {
+            var _a, _b;
+            var height = _this.getStickyProp() ? getDOMRect(getRootNode(_this)).height : 0;
+            (_b = (_a = _this.context).setStickyHeaderHeight) === null || _b === void 0 ? void 0 : _b.call(_a, height);
+        };
         _this.renderHeader = function (fixed) {
             var _a, _b;
             if (fixed === void 0) { fixed = false; }

package/components/SidePage/SidePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePageHeader.js","sourceRoot":"","sources":["SidePageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport { isFunction } from '../../lib/utils.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageCloseButton } from './SidePageCloseButton.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет заголовок сайдпейджа при скролле длинной контент-зоны.\n   */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать разделитель ModalSeparator. */\n  hasSeparator?: boolean;\n\n  /**\n   * Обрезает длинный заголовок. Работает, если включен проп `sticky`.\n   * @default false.\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isNativeStuck: boolean;\n  isReadyToStuck: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа, состоит из заголовка и крестика закрытия.\n *\n * @visibleName SidePage.Header\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n  public static displayName = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isNativeStuck: true,\n    isReadyToStuck: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private sticky: Sticky | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount = () => {\n    getRootNode(this)?.parentNode?.addEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    getRootNode(this)?.parentNode?.removeEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  private throttleHandleScroll = throttle((event: Event) => {\n    const target = event.currentTarget as HTMLElement;\n    if (target && typeof target.scrollTop === 'number') {\n      this.setState({ isNativeStuck: target.scrollTop === 0 });\n    }\n    this.update();\n  }, 5);\n\n  public update = (): void => {\n    this.sticky?.reflow();\n  };\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp(): boolean {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp();\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageHeaderDataTids.root}\n          className={this.cx(this.styles.headerWrapper(), {\n            [this.styles.headerNativeStuck(this.theme)]: this.state.isNativeStuck,\n          })}\n        >\n          {!this.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        <div\n          className={this.cx(this.styles.header(this.theme), {\n            [this.styles.headerFixed(this.theme)]: fixed,\n            [this.styles.mobileHeader(this.theme)]: this.isMobileLayout,\n          })}\n        >\n          {this.renderClose(fixed)}\n          <div\n            className={this.cx(this.styles.title(this.theme), {\n              [this.styles.mobileTitle(this.theme)]: this.isMobileLayout,\n              [this.styles.titleCut()]: fixed && this.props.cutTitleOnStuck,\n            })}\n          >\n            {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n          </div>\n        </div>\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const themeGTE6_4 = isThemeGTE(this.theme, '6.4');\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    return (\n      <div\n        className={this.cx(this.styles.wrapperClose(this.theme), {\n          [this.styles.wrapperClose6_4()]: themeGTE6_4,\n          [this.styles.wrapperCloseFixed(this.theme)]: fixed,\n          [this.styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {!this.isMobileLayout ? (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            <SidePageCloseButton isHeaderFixed={fixed} />\n          </Sticky>\n        ) : (\n          <SidePageCloseButton isHeaderFixed={fixed} isMobile={this.isMobileLayout} />\n        )}\n      </div>\n    );\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"]}
+{"version":3,"file":"SidePageHeader.js","sourceRoot":"","sources":["SidePageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport { isFunction } from '../../lib/utils.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageCloseButton } from './SidePageCloseButton.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет заголовок сайдпейджа при скролле длинной контент-зоны.\n   */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать разделитель ModalSeparator. */\n  hasSeparator?: boolean;\n\n  /**\n   * Обрезает длинный заголовок. Работает, если включен проп `sticky`.\n   * @default false.\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isNativeStuck: boolean;\n  isReadyToStuck: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа, состоит из заголовка и крестика закрытия.\n *\n * @visibleName SidePage.Header\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n  public static displayName = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isNativeStuck: true,\n    isReadyToStuck: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private sticky: Sticky | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount = () => {\n    getRootNode(this)?.parentNode?.addEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n    this.updateStickyHeight();\n  };\n\n  public componentWillUnmount = () => {\n    getRootNode(this)?.parentNode?.removeEventListener?.('scroll', this.throttleHandleScroll, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n    this.context.setStickyHeaderHeight?.(0);\n  };\n\n  private throttleHandleScroll = throttle((event: Event) => {\n    const target = event.currentTarget as HTMLElement;\n    if (target && typeof target.scrollTop === 'number') {\n      this.setState({ isNativeStuck: target.scrollTop === 0 });\n    }\n    this.update();\n    this.updateStickyHeight();\n  }, 5);\n\n  public update = (): void => {\n    this.sticky?.reflow();\n  };\n\n  private updateStickyHeight = () => {\n    const height = this.getStickyProp() ? getDOMRect(getRootNode(this)).height : 0;\n    this.context.setStickyHeaderHeight?.(height);\n  };\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp(): boolean {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp();\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={SidePageHeaderDataTids.root}\n          className={this.cx(this.styles.headerWrapper(), {\n            [this.styles.headerNativeStuck(this.theme)]: this.state.isNativeStuck,\n          })}\n        >\n          {!this.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        <div\n          className={this.cx(this.styles.header(this.theme), {\n            [this.styles.headerFixed(this.theme)]: fixed,\n            [this.styles.mobileHeader(this.theme)]: this.isMobileLayout,\n          })}\n        >\n          {this.renderClose(fixed)}\n          <div\n            className={this.cx(this.styles.title(this.theme), {\n              [this.styles.mobileTitle(this.theme)]: this.isMobileLayout,\n              [this.styles.titleCut()]: fixed && this.props.cutTitleOnStuck,\n            })}\n          >\n            {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n          </div>\n        </div>\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const themeGTE6_4 = isThemeGTE(this.theme, '6.4');\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    return (\n      <div\n        className={this.cx(this.styles.wrapperClose(this.theme), {\n          [this.styles.wrapperClose6_4()]: themeGTE6_4,\n          [this.styles.wrapperCloseFixed(this.theme)]: fixed,\n          [this.styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {!this.isMobileLayout ? (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            <SidePageCloseButton isHeaderFixed={fixed} />\n          </Sticky>\n        ) : (\n          <SidePageCloseButton isHeaderFixed={fixed} isMobile={this.isMobileLayout} />\n        )}\n      </div>\n    );\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "6.4.2",
+  "version": "6.4.3",
   "description": "UI Components",
   "homepage": "https://tech.skbkontur.ru/kontur-ui",
   "bugs": {
@@ -274,7 +274,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.6",
     "@emotion/css": "^11.11.2",
-    "@skbkontur/colors": "^2.1.10",
+    "@skbkontur/colors": "^2.1.11",
     "@skbkontur/react-imask": "^7.6.5",
     "eventemitter3": "^5.0.1",
     "focus-lock": "^1.3.5",