@consta/uikit 3.24.2 → 3.24.5

package/__internal__/src/components/DatePickerCanary/getChangeFnRange.js

@@ -0,0 +1,36 @@
+import isBefore from 'date-fns/isBefore';
+import isEqual from 'date-fns/isEqual';
+import { datePickerErrorTypes } from './types';
+var handleChange = function (e, start, end, onChange, onError) {
+    if (!onChange) {
+        return;
+    }
+    if (start && end) {
+        if (isBefore(start, end) || isEqual(start, end)) {
+            onChange({ e: e, value: [start, end] });
+            return;
+        }
+        onChange({ e: e, value: [start, undefined] });
+        onError && onError({ type: datePickerErrorTypes[2], date: [start, end] });
+        return;
+    }
+    if (start) {
+        onChange({ e: e, value: [start, undefined] });
+        return;
+    }
+    if (end) {
+        onChange({ e: e, value: [undefined, end] });
+        return;
+    }
+    onChange({ e: e, value: null });
+};
+export var getChangeFnRange = function (onChange, onError, value) {
+    return [
+        function (props) {
+            handleChange(props.e, props.value, value === null || value === void 0 ? void 0 : value[1], onChange, onError);
+        },
+        function (props) {
+            handleChange(props.e, value === null || value === void 0 ? void 0 : value[0], props.value, onChange, onError);
+        },
+    ];
+};

package/__internal__/src/components/DatePickerCanary/types.d.ts

@@ -73,6 +73,7 @@ export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> =
     multiplicityMinutes?: number;
     multiplicityHours?: number;
     isMobile?: number;
+    withClearButton?: boolean;
 }, HTMLDivElement>;
 export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
 export declare type DatePickerTypeComponent<TYPE extends DatePickerPropType> = (props: Omit<DatePickerProps<TYPE>, 'type'>) => React.ReactElement | null;

package/__internal__/src/components/DragNDropField/DragNDropField.css

@@ -20,9 +20,12 @@
   background: var(--color-control-bg-clear);
   border: 2px dashed var(--color-control-bg-border-default);
   border-radius: var(--control-radius);
-  cursor: pointer;
 }
 
+  .DragNDropField:not(.DragNDropField_disabled) {
+    cursor: pointer;
+  }
+
   .DragNDropField:hover {
     background: var(--color-control-bg-clear-hover);
     border-color: var(--color-control-bg-border-default-hover);
@@ -32,3 +35,9 @@
     background: var(--color-control-bg-clear-hover);
     border-color: var(--color-control-bg-border-focus);
   }
+
+  .DragNDropField_disabled,
+  .DragNDropField_disabled:hover {
+    background: var(--color-control-bg-disable);
+    border-color: transparent;
+  }

package/__internal__/src/components/DragNDropField/DragNDropField.d.ts

@@ -1,6 +1,15 @@
 import './DragNDropField.css';
 import React from 'react';
-import { DragNDropFieldProps } from './types';
+import { DragNDropFieldChildrenRenderProp } from './types';
 export declare const COMPONENT_NAME: "DragNDropField";
-export declare const DragNDropField: React.ForwardRefExoticComponent<DragNDropFieldProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DragNDropField: React.ForwardRefExoticComponent<{
+    accept?: string | string[] | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    multiple?: boolean | undefined;
+    onDropFiles: (files: File[]) => void;
+    children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | DragNDropFieldChildrenRenderProp | null | undefined;
+    locale?: import("./locale").Locale | undefined;
+    disabled?: boolean | undefined;
+} & Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
 export * from './types';

package/__internal__/src/components/DragNDropField/DragNDropField.js

@@ -1,8 +1,9 @@
-import { __assign } from "tslib";
+import { __assign, __rest } from "tslib";
 import './DragNDropField.css';
-import React, { useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useForkRef } from '../../hooks/useForkRef/useForkRef';
+import { useMutableRef } from '../../hooks/useMutableRef/useMutableRef';
 import { cn } from '../../utils/bem';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { Text } from '../Text/Text';
@@ -12,31 +13,33 @@ import { getErrorsList } from './getErrorsList';
 import { withdefaultLocale } from './locale';
 var cnDragNDropField = cn('DragNDropField');
 export var COMPONENT_NAME = 'DragNDropField';
-export var DragNDropField = React.forwardRef(function (props, ref) {
+export var DragNDropField = forwardRef(function (props, ref) {
     var dragNDropFieldRef = useRef(null);
-    var _a = usePropsHandler(COMPONENT_NAME, props, dragNDropFieldRef), accept = _a.accept, maxSize = _a.maxSize, _b = _a.multiple, multiple = _b === void 0 ? false : _b, onDropFiles = _a.onDropFiles, _c = _a.children, children = _c === void 0 ? DragNDropFieldContent : _c, localeProp = _a.locale;
+    var _a = usePropsHandler(COMPONENT_NAME, props, dragNDropFieldRef), accept = _a.accept, maxSize = _a.maxSize, minSize = _a.minSize, _b = _a.multiple, multiple = _b === void 0 ? false : _b, onDropFiles = _a.onDropFiles, _c = _a.children, children = _c === void 0 ? DragNDropFieldContent : _c, localeProp = _a.locale, disabled = _a.disabled, onClick = _a.onClick, otherProps = __rest(_a, ["accept", "maxSize", "minSize", "multiple", "onDropFiles", "children", "locale", "disabled", "onClick"]);
+    var onClickRef = useMutableRef(onClick);
     var locale = withdefaultLocale(localeProp);
     var handleDrop = React.useCallback(function (acceptedFiles) { return acceptedFiles.length > 0 && onDropFiles(acceptedFiles); }, [onDropFiles]);
     var _d = useDropzone({
         accept: (accept === null || accept === void 0 ? void 0 : accept.length) ? accept : undefined,
         maxSize: maxSize || undefined,
+        minSize: minSize || undefined,
         onDrop: handleDrop,
-        multiple: multiple
+        multiple: multiple,
+        disabled: disabled
     }), fileRejections = _d.fileRejections, getRootProps = _d.getRootProps, getInputProps = _d.getInputProps, isDragActive = _d.isDragActive, rootRef = _d.rootRef, open = _d.open;
-    var handleRootClick = React.useCallback(function (event) {
+    var handleRootClick = React.useCallback(function (e) {
+        var _a;
         // Чтобы не открывалось окно выбора файла при клике по внутренним элементам
-        if (event.target !== rootRef.current) {
-            event.stopPropagation();
+        if (e.target !== rootRef.current) {
+            e.stopPropagation();
         }
+        (_a = onClickRef.current) === null || _a === void 0 ? void 0 : _a.call(onClickRef, e);
     }, []);
-    var rootProps = getRootProps({
-        className: cnDragNDropField('', { active: isDragActive }),
-        onClick: handleRootClick
-    });
+    var rootProps = getRootProps(__assign(__assign({}, otherProps), { className: cnDragNDropField({ active: isDragActive, disabled: disabled }), onClick: handleRootClick }));
     var content = isRenderProp(children)
-        ? children({ accept: accept, maxSize: maxSize, multiple: multiple, openFileDialog: open, locale: locale })
+        ? children({ accept: accept, maxSize: maxSize, minSize: minSize, multiple: multiple, openFileDialog: open, locale: locale, disabled: disabled })
         : children;
-    var errors = React.useMemo(function () { return getErrorsList(fileRejections, { maxSize: maxSize }, locale); }, [
+    var errors = React.useMemo(function () { return getErrorsList(fileRejections, { maxSize: maxSize, minSize: minSize }, locale); }, [
         fileRejections,
     ]);
     return (React.createElement(React.Fragment, null,

package/__internal__/src/components/DragNDropField/DragNDropFieldContent/DragNDropFieldContent.css

@@ -1,3 +1,6 @@
 .DragNDropFieldContent-Button {
     margin-top: var(--space-s);
   }
+  .DragNDropFieldContent-Text_disabled.Text_view_secondary {
+    color: var(--color-control-typo-disable);
+  }

package/__internal__/src/components/DragNDropField/DragNDropFieldContent/DragNDropFieldContent.js

@@ -8,14 +8,14 @@ import { getText } from '../locale';
 import { formatFileRequirements } from './formatFileRequirements';
 var cnDragNDropFieldContent = cn('DragNDropFieldContent');
 export var DragNDropFieldContent = function (_a) {
-    var accept = _a.accept, maxSize = _a.maxSize, multiple = _a.multiple, openFileDialog = _a.openFileDialog, locale = _a.locale;
-    var requirements = formatFileRequirements(accept, maxSize);
+    var accept = _a.accept, maxSize = _a.maxSize, minSize = _a.minSize, multiple = _a.multiple, openFileDialog = _a.openFileDialog, locale = _a.locale, disabled = _a.disabled;
+    var requirements = formatFileRequirements(accept, maxSize, minSize, locale);
     var fileText = multiple ? locale.files : locale.file;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Text, { view: "secondary", size: "s", lineHeight: "s", align: "center" },
+        React.createElement(Text, { className: cnDragNDropFieldContent('Text', { disabled: disabled }), view: "secondary", size: "s", lineHeight: "s", align: "center" },
             getText(locale['call-to-action'], { fileText: fileText }),
             requirements && (React.createElement(React.Fragment, null,
                 React.createElement("br", null),
                 requirements))),
-        React.createElement(Button, { className: cnDragNDropFieldContent('Button'), label: getText(locale['action-button'], { fileText: fileText }), iconLeft: IconAttach, view: "ghost", size: "s", onClick: openFileDialog })));
+        React.createElement(Button, { className: cnDragNDropFieldContent('Button'), label: getText(locale['action-button'], { fileText: fileText }), iconLeft: IconAttach, view: "ghost", size: "s", onClick: openFileDialog, disabled: disabled })));
 };

package/__internal__/src/components/DragNDropField/DragNDropFieldContent/formatFileRequirements.d.ts

@@ -1,3 +1,3 @@
 import { DragNDropFieldProps } from '../DragNDropField';
 import { Locale } from '../locale';
-export declare const formatFileRequirements: (accept: DragNDropFieldProps['accept'], maxSize: DragNDropFieldProps['maxSize'], locale?: Required<Locale>) => string | undefined;
+export declare const formatFileRequirements: (accept: DragNDropFieldProps['accept'], maxSize: DragNDropFieldProps['maxSize'], minSize: DragNDropFieldProps['minSize'], locale?: Required<Locale>) => string;

package/__internal__/src/components/DragNDropField/DragNDropFieldContent/formatFileRequirements.js

@@ -1,19 +1,20 @@
 import { isNotNil } from '../../../utils/type-guards';
 import { formatFileSize } from '../formatFileSize';
 import { defaultLocale } from '../locale';
-export var formatFileRequirements = function (accept, maxSize, locale) {
+var formatAccept = function (strs) {
+    return Array.isArray(strs) ? strs.join(', ') : strs;
+};
+var formatSize = function (prefix, size, locale) {
+    return size ? prefix + " " + formatFileSize(size, locale) : undefined;
+};
+export var formatFileRequirements = function (accept, maxSize, minSize, locale) {
     if (locale === void 0) { locale = defaultLocale; }
-    if (accept === null || accept === void 0 ? void 0 : accept.length) {
-        var formattedAccept = Array.isArray(accept) ? accept.join(', ') : accept;
-        return [
-            locale['fit-files'] + " " + formattedAccept,
-            maxSize ? locale.before + " " + formatFileSize(maxSize, locale) : null,
-        ]
-            .filter(isNotNil)
-            .join(', ');
-    }
-    if (maxSize) {
-        return locale.max + " " + formatFileSize(maxSize, locale);
-    }
-    return undefined;
+    return [
+        locale['fit-files'],
+        formatAccept(accept),
+        formatSize(locale.from, minSize, locale),
+        formatSize(locale.before, maxSize, locale),
+    ]
+        .filter(isNotNil)
+        .join(' ');
 };

package/__internal__/src/components/DragNDropField/getErrorsList.js

@@ -12,7 +12,7 @@ var getErrorMessage = function (error, file, sizes, locale) {
         return file ? file.name + ": " + locale['general-error'] : NO_MESSAGE;
     }
     if (file) {
-        return file.name + ": " + (isString(message) ? message : message({ file: file, sizes: sizes }));
+        return isString(message) ? message : message({ file: file, sizes: sizes });
     }
     return isString(message) ? message : NO_MESSAGE;
 };

package/__internal__/src/components/DragNDropField/locale.d.ts

@@ -16,11 +16,11 @@ export declare type Locale = {
     'file'?: string;
     'files'?: string;
     'before'?: string;
+    'from'?: string;
     'gigabyte'?: string;
     'megabyte'?: string;
     'kilobyte'?: string;
     'byte'?: string;
-    'max'?: string;
     'call-to-action'?: LocaleLabel;
     'action-button'?: LocaleLabel;
 };

package/__internal__/src/components/DragNDropField/locale.js

@@ -3,19 +3,25 @@ import { isDefined, isNotNil, isString } from '../../utils/type-guards';
 import { formatFileSize } from './formatFileSize';
 export var defaultLocale = {
     'file-invalid-type': function (props) {
-        return ['формат файла не подходит', props.file.type && "(" + props.file.type + ")"]
+        return [props.file.name + ": \u0444\u043E\u0440\u043C\u0430\u0442 \u0444\u0430\u0439\u043B\u0430 \u043D\u0435 \u043F\u043E\u0434\u0445\u043E\u0434\u0438\u0442", props.file.type && "(" + props.file.type + ")"]
             .filter(isNotNil)
             .join(' ');
     },
-    'file-too-large': function (props) { var _a; return "\u0444\u0430\u0439\u043B \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0431\u043E\u043B\u044C\u0448\u043E\u0439 (\u043C\u0430\u043A\u0441\u0438\u043C\u0443\u043C " + formatFileSize((_a = props.sizes.maxSize) !== null && _a !== void 0 ? _a : 0, defaultLocale) + ")"; },
-    'file-too-small': function (props) { var _a; return "\u0444\u0430\u0439\u043B \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u043C\u0430\u043B\u0435\u043D\u044C\u043A\u0438\u0439 (\u043C\u0438\u043D\u0438\u043C\u0443\u043C " + formatFileSize((_a = props.sizes.minSize) !== null && _a !== void 0 ? _a : 0, defaultLocale) + ")"; },
+    'file-too-large': function (props) {
+        var _a;
+        return props.file.name + ": \u0444\u0430\u0439\u043B \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0431\u043E\u043B\u044C\u0448\u043E\u0439 (\u043C\u0430\u043A\u0441\u0438\u043C\u0443\u043C " + formatFileSize((_a = props.sizes.maxSize) !== null && _a !== void 0 ? _a : 0, defaultLocale) + ")";
+    },
+    'file-too-small': function (props) {
+        var _a;
+        return props.file.name + ": \u0444\u0430\u0439\u043B \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u043C\u0430\u043B\u0435\u043D\u044C\u043A\u0438\u0439 (\u043C\u0438\u043D\u0438\u043C\u0443\u043C " + formatFileSize((_a = props.sizes.minSize) !== null && _a !== void 0 ? _a : 0, defaultLocale) + ")";
+    },
     'too-many-files': 'Вы перетащили несколько файлов. Выберите один, пожалуйста',
     'general-error': 'не получилось добавить файл',
     'fit-files': 'Подходят файлы',
     'file': 'файл',
     'files': 'файлы',
     'before': 'до',
-    'max': 'Максимум',
+    'from': 'от',
     'gigabyte': 'Гб',
     'megabyte': 'Мб',
     'kilobyte': 'Кб',

package/__internal__/src/components/DragNDropField/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 import { Locale } from './locale';
 export declare type DragNDropFieldPropLocale = Locale;
 export declare type FileError = {
@@ -13,16 +14,18 @@ export declare type DragNDropFieldPropErrorMessages = Partial<Record<FileError['
 export declare type DragNDropFieldChildrenRenderProp = (props: {
     openFileDialog: () => void;
     locale: Required<DragNDropFieldPropLocale>;
-} & Pick<DragNDropFieldProps, 'accept' | 'maxSize' | 'multiple'>) => React.ReactNode;
+} & Pick<DragNDropFieldProps, 'accept' | 'maxSize' | 'multiple' | 'disabled' | 'minSize'>) => React.ReactNode;
 export declare type FileSizes = {
     minSize?: number;
     maxSize?: number;
 };
-export declare type DragNDropFieldProps = {
+export declare type DragNDropFieldProps = PropsWithHTMLAttributes<{
     accept?: string | string[];
     maxSize?: number;
+    minSize?: number;
     multiple?: boolean;
     onDropFiles: (files: File[]) => void;
     children?: React.ReactNode | DragNDropFieldChildrenRenderProp;
     locale?: DragNDropFieldPropLocale;
-};
+    disabled?: boolean;
+}, HTMLDivElement>;

package/__internal__/src/components/Popover/Popover.css

@@ -1,42 +1,8 @@
 .Popover {
   position: absolute;
+  top: var(--popover-top);
+  left: var(--popover-left);
   visibility: var(--popover-visibility);
   width: var(--popover-width);
   pointer-events: var(--popover-pointer-events);
 }
-
-  .Popover_direction_downCenter,
-    .Popover_direction_downRight,
-    .Popover_direction_downLeft,
-    .Popover_direction_downStartLeft,
-    .Popover_direction_downStartRight {
-      top: calc(var(--popover-top) + var(--popover-offset));
-      left: var(--popover-left);
-    }
-
-  .Popover_direction_upCenter,
-    .Popover_direction_upRight,
-    .Popover_direction_upLeft,
-    .Popover_direction_upStartLeft,
-    .Popover_direction_upStartRight {
-      top: calc(var(--popover-top) - var(--popover-offset));
-      left: var(--popover-left);
-    }
-
-  .Popover_direction_leftUp,
-    .Popover_direction_leftCenter,
-    .Popover_direction_leftDown,
-    .Popover_direction_leftStartUp,
-    .Popover_direction_leftStartDown {
-      top: var(--popover-top);
-      left: calc(var(--popover-left) - var(--popover-offset));
-    }
-
-  .Popover_direction_rightUp,
-    .Popover_direction_rightCenter,
-    .Popover_direction_rightDown,
-    .Popover_direction_rightStartUp,
-    .Popover_direction_rightStartDown {
-      top: var(--popover-top);
-      left: calc(var(--popover-left) + var(--popover-offset));
-    }

package/__internal__/src/components/Popover/Popover.js

@@ -1,10 +1,11 @@
 import { __assign, __read, __rest, __spread } from "tslib";
 import './Popover.css';
-import React, { forwardRef, useEffect, useLayoutEffect } from 'react';
+import React, { forwardRef, useEffect, useLayoutEffect, useMemo } from 'react';
 import { useClickOutside } from '../../hooks/useClickOutside/useClickOutside';
 import { useComponentSize } from '../../hooks/useComponentSize/useComponentSize';
 import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cn } from '../../utils/bem';
+import { isNumber, isString } from '../../utils/type-guards';
 import { PortalWithTheme, usePortalContext } from '../PortalWithTheme/PortalWithTheme';
 import { useTheme } from '../Theme/Theme';
 import { getComputedPositionAndDirection } from './helpers';
@@ -53,6 +54,29 @@ export var popoverPropOffset = [
     '6xl',
 ];
 export var directions = __spread(directionsStartCenter, directionsStartEdge);
+var getOffset = function (ref, propOffset) {
+    if (isNumber(propOffset)) {
+        return propOffset;
+    }
+    if (isString(propOffset) && ref.current) {
+        var cssVar = getComputedStyle(ref.current).getPropertyValue("--space-" + propOffset);
+        if (cssVar && /px$/.test(cssVar)) {
+            return Number(cssVar.slice(0, cssVar.length - 2));
+        }
+        if (cssVar && /rem$/.test(cssVar)) {
+            var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+            var rem = Number(cssVar.slice(0, cssVar.length - 3));
+            return fontSize * rem;
+        }
+        if (cssVar && /em$/.test(cssVar)) {
+            var fontSize = parseFloat(getComputedStyle(ref.current).fontSize);
+            var em = Number(cssVar.slice(0, cssVar.length - 2));
+            return fontSize * em;
+        }
+        return 0;
+    }
+    return 0;
+};
 var isRenderProp = function (children) { return typeof children === 'function'; };
 /**
  * Подписчик на PortalWithThemeProvider
@@ -72,7 +96,7 @@ var ContextConsumer = function (_a) {
 var cnPopover = cn('Popover');
 export var Popover = forwardRef(function (props, componentRef) {
     var _a;
-    var children = props.children, _b = props.direction, passedDirection = _b === void 0 ? 'upCenter' : _b, _c = props.offset, offset = _c === void 0 ? 0 : _c, arrowOffset = props.arrowOffset, _d = props.possibleDirections, possibleDirections = _d === void 0 ? directions : _d, _e = props.isInteractive, isInteractive = _e === void 0 ? true : _e, onClickOutside = props.onClickOutside, _f = props.spareDirection, spareDirection = _f === void 0 ? 'downStartLeft' : _f, style = props.style, className = props.className, passedPosition = props.position, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, onSetDirection = props.onSetDirection, otherProps = __rest(props, ["children", "direction", "offset", "arrowOffset", "possibleDirections", "isInteractive", "onClickOutside", "spareDirection", "style", "className", "position", "anchorRef", "equalAnchorWidth", "onSetDirection"]);
+    var children = props.children, _b = props.direction, passedDirection = _b === void 0 ? 'upCenter' : _b, _c = props.offset, propOffset = _c === void 0 ? 0 : _c, arrowOffset = props.arrowOffset, _d = props.possibleDirections, possibleDirections = _d === void 0 ? directions : _d, _e = props.isInteractive, isInteractive = _e === void 0 ? true : _e, onClickOutside = props.onClickOutside, _f = props.spareDirection, spareDirection = _f === void 0 ? 'downStartLeft' : _f, style = props.style, className = props.className, passedPosition = props.position, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, onSetDirection = props.onSetDirection, otherProps = __rest(props, ["children", "direction", "offset", "arrowOffset", "possibleDirections", "isInteractive", "onClickOutside", "spareDirection", "style", "className", "position", "anchorRef", "equalAnchorWidth", "onSetDirection"]);
     var ref = React.useRef(null);
     var theme = useTheme().theme;
     var _g = __read(React.useState(), 2), anchorClientRect = _g[0], setAnchorClientRect = _g[1];
@@ -85,6 +109,7 @@ export var Popover = forwardRef(function (props, componentRef) {
         previousDirectionRef.current = null;
     };
     var updateAnchorClientRect = function () { var _a; return setAnchorClientRect((_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()); };
+    var offset = useMemo(function () { return getOffset(ref, propOffset); }, [propOffset, Boolean(ref.current)]);
     var _k = getComputedPositionAndDirection({
         contentSize: { width: width, height: height },
         viewportSize: {
@@ -93,6 +118,7 @@ export var Popover = forwardRef(function (props, componentRef) {
             height: document.documentElement.clientHeight
         },
         arrowOffset: arrowOffset,
+        offset: offset,
         direction: passedDirection,
         possibleDirections: possibleDirections,
         bannedDirections: bannedDirections,
@@ -102,11 +128,10 @@ export var Popover = forwardRef(function (props, componentRef) {
         anchorSize: anchorSize,
         spareDirection: spareDirection
     }), position = _k.position, direction = _k.direction;
-    var content = isRenderProp(children) ? children(direction) : children;
     useLayoutEffect(function () { return onSetDirection === null || onSetDirection === void 0 ? void 0 : onSetDirection(direction); }, [direction]);
-    useLayoutEffect(resetBannedDirections, [props]);
     useEffect(updateAnchorClientRect, [anchorSize]);
     usePopoverReposition({
+        isActive: true,
         scrollAnchorRef: anchorRef || { current: null },
         onRequestReposition: function () {
             resetBannedDirections();
@@ -119,16 +144,20 @@ export var Popover = forwardRef(function (props, componentRef) {
      * которые не подошли, чтобы не возвращаться к ним и предотвратить бесконечный ререндер.
      * См. PopoverBannedPositionsStory
      */
-    if (previousDirectionRef.current !== direction) {
-        if (previousDirectionRef.current && !bannedDirections.includes(previousDirectionRef.current)) {
-            setBannedDirections(function (state) {
-                return previousDirectionRef.current ? __spread(state, [previousDirectionRef.current]) : state;
-            });
+    useLayoutEffect(function () {
+        if (previousDirectionRef.current !== direction) {
+            if (previousDirectionRef.current &&
+                !bannedDirections.includes(previousDirectionRef.current)) {
+                setBannedDirections(function (state) {
+                    return previousDirectionRef.current ? __spread(state, [previousDirectionRef.current]) : state;
+                });
+            }
+            previousDirectionRef.current = direction;
         }
-        previousDirectionRef.current = direction;
-    }
+    }, [direction]);
     // Сбрасываем при любом изменении пропсов, чтобы заново начать перебор направлений
     // Главное не сбрасывать при изменении размеров поповера, т.к. именно оно может вызвать бесконечный перебор
-    return (React.createElement(PortalWithTheme, __assign({}, otherProps, { preset: theme, className: cnPopover({ direction: direction }, [className]), container: window.document.body, ref: useForkRef([ref, componentRef]), style: __assign(__assign({}, style), (_a = {}, _a['--popover-top'] = ((position === null || position === void 0 ? void 0 : position.y) || 0) + window.scrollY + "px", _a['--popover-left'] = ((position === null || position === void 0 ? void 0 : position.x) || 0) + window.scrollX + "px", _a["--popover-width"] = equalAnchorWidth ? anchorSize.width + "px" : undefined, _a["--popover-pointer-events"] = isInteractive ? undefined : 'none', _a["--popover-visibility"] = position ? undefined : 'hidden', _a["--popover-offset"] = typeof offset === 'string' ? "var(--space-" + offset + ")" : offset + "px", _a)) }),
-        React.createElement(ContextConsumer, { onClickOutside: onClickOutside, ignoreClicksInsideRefs: [ref, anchorRef || { current: null }] }, content)));
+    useLayoutEffect(resetBannedDirections, [props]);
+    return (React.createElement(PortalWithTheme, __assign({}, otherProps, { preset: theme, className: cnPopover({ direction: direction }, [className]), container: window.document.body, ref: useForkRef([ref, componentRef]), style: __assign(__assign({}, style), (_a = {}, _a['--popover-top'] = ((position === null || position === void 0 ? void 0 : position.y) || 0) + window.scrollY + "px", _a['--popover-left'] = ((position === null || position === void 0 ? void 0 : position.x) || 0) + window.scrollX + "px", _a["--popover-width"] = equalAnchorWidth ? anchorSize.width + "px" : undefined, _a["--popover-pointer-events"] = isInteractive ? undefined : 'none', _a["--popover-visibility"] = position ? undefined : 'hidden', _a)) }),
+        React.createElement(ContextConsumer, { onClickOutside: onClickOutside, ignoreClicksInsideRefs: [ref, anchorRef || { current: null }] }, isRenderProp(children) ? children(direction) : children)));
 });

package/__internal__/src/components/Popover/helpers.d.ts

@@ -1,26 +1,26 @@
 import { Direction, Position } from './Popover';
 declare type Size = Pick<ClientRect, 'width' | 'height'>;
 declare type PositionsByDirection = Record<Direction, NonNullable<Position>>;
-export declare const convertPixelsToNumber: (pixels: string) => number;
-export declare const getPositionsByDirection: ({ contentSize, anchorSize, position: { x, y }, arrowOffset, }: {
+export declare const getPositionsByDirection: ({ contentSize, anchorSize, position: { x, y }, arrowOffset, offset, }: {
     contentSize: Size;
     anchorSize: Size;
     position: NonNullable<Position>;
     arrowOffset?: number | undefined;
+    offset?: number | undefined;
 }) => PositionsByDirection;
 declare type ComputedPositionAndDirectionParams = {
     position: Position;
     contentSize: Size;
     viewportSize: Size;
     anchorSize?: Size;
-    offset?: number | string;
+    offset?: number;
     arrowOffset?: number;
     direction: Direction;
     spareDirection: Direction;
     possibleDirections: readonly Direction[];
     bannedDirections: readonly Direction[];
 };
-export declare const getComputedPositionAndDirection: ({ position: initialPosition, contentSize, viewportSize, anchorSize, arrowOffset, direction: initialDirection, possibleDirections, bannedDirections, spareDirection, }: ComputedPositionAndDirectionParams) => {
+export declare const getComputedPositionAndDirection: ({ position: initialPosition, contentSize, viewportSize, anchorSize, arrowOffset, direction: initialDirection, possibleDirections, bannedDirections, spareDirection, offset, }: ComputedPositionAndDirectionParams) => {
     direction: Direction;
     position: Position;
 };

package/__internal__/src/components/Popover/helpers.js

@@ -3,26 +3,23 @@ var getPosition = function (x, y) { return ({
     x: Math.round(x),
     y: Math.round(y)
 }); };
-export var convertPixelsToNumber = function (pixels) {
-    return Number(pixels.slice(0, pixels.length - 2));
-};
 export var getPositionsByDirection = function (_a) {
-    var contentSize = _a.contentSize, anchorSize = _a.anchorSize, _b = _a.position, x = _b.x, y = _b.y, _c = _a.arrowOffset, arrowOffset = _c === void 0 ? 0 : _c;
+    var contentSize = _a.contentSize, anchorSize = _a.anchorSize, _b = _a.position, x = _b.x, y = _b.y, _c = _a.arrowOffset, arrowOffset = _c === void 0 ? 0 : _c, _d = _a.offset, offset = _d === void 0 ? 0 : _d;
     var contentWidth = contentSize.width, contentHeight = contentSize.height;
     var anchorWidth = anchorSize.width, anchorHeight = anchorSize.height;
     var anchorCenter = {
         x: x + anchorWidth / 2,
         y: y + anchorHeight / 2
     };
-    var xForRightDirections = x + anchorWidth;
-    var xForLeftDirections = x - contentWidth;
+    var xForRightDirections = x + anchorWidth + offset;
+    var xForLeftDirections = x - contentWidth - offset;
     var xForVerticalDirections = {
         right: anchorCenter.x - arrowOffset,
         center: anchorCenter.x - contentWidth / 2,
         left: anchorCenter.x - contentWidth + arrowOffset
     };
-    var yForDownDirections = y + anchorHeight;
-    var yForUpDirections = y - contentHeight;
+    var yForDownDirections = y + anchorHeight + offset;
+    var yForUpDirections = y - contentHeight - offset;
     var yForHorizontalDirections = {
         up: anchorCenter.y - contentHeight + arrowOffset,
         center: anchorCenter.y - contentHeight / 2,
@@ -56,7 +53,7 @@ export var getPositionsByDirection = function (_a) {
     };
 };
 export var getComputedPositionAndDirection = function (_a) {
-    var initialPosition = _a.position, contentSize = _a.contentSize, viewportSize = _a.viewportSize, _b = _a.anchorSize, anchorSize = _b === void 0 ? { width: 0, height: 0 } : _b, arrowOffset = _a.arrowOffset, initialDirection = _a.direction, possibleDirections = _a.possibleDirections, bannedDirections = _a.bannedDirections, spareDirection = _a.spareDirection;
+    var initialPosition = _a.position, contentSize = _a.contentSize, viewportSize = _a.viewportSize, _b = _a.anchorSize, anchorSize = _b === void 0 ? { width: 0, height: 0 } : _b, arrowOffset = _a.arrowOffset, initialDirection = _a.direction, possibleDirections = _a.possibleDirections, bannedDirections = _a.bannedDirections, spareDirection = _a.spareDirection, _c = _a.offset, offset = _c === void 0 ? 0 : _c;
     if (!initialPosition) {
         return { position: initialPosition, direction: initialDirection };
     }
@@ -64,7 +61,8 @@ export var getComputedPositionAndDirection = function (_a) {
         contentSize: contentSize,
         anchorSize: anchorSize,
         position: initialPosition,
-        arrowOffset: arrowOffset
+        arrowOffset: arrowOffset,
+        offset: offset
     });
     var direction = __spread([initialDirection], possibleDirections).filter(function (dir) { return !bannedDirections.includes(dir); })
         .find(function (dir) {

package/__internal__/src/components/Popover/usePopoverReposition.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 /** Запрос репозиции поповера при ресайзе окна и скролле */
-export declare const usePopoverReposition: ({ scrollAnchorRef, onRequestReposition, }: {
+export declare const usePopoverReposition: ({ isActive, scrollAnchorRef, onRequestReposition, }: {
+    isActive: boolean;
     /** При скролле родителей этого элемента будет запрашиваться репозиция поповера */
     scrollAnchorRef: React.RefObject<HTMLElement | null>;
     onRequestReposition: () => void;

package/__internal__/src/components/Popover/usePopoverReposition.js

@@ -11,19 +11,19 @@ var getAllParents = function (element) {
 };
 /** Запрос репозиции поповера при ресайзе окна и скролле */
 export var usePopoverReposition = function (_a) {
-    var scrollAnchorRef = _a.scrollAnchorRef, onRequestReposition = _a.onRequestReposition;
+    var isActive = _a.isActive, scrollAnchorRef = _a.scrollAnchorRef, onRequestReposition = _a.onRequestReposition;
     var onRequestRepositionRef = useMutableRef(onRequestReposition);
     useEffect(function () {
-        window.addEventListener('resize', onRequestRepositionRef.current);
-        var allParents = (scrollAnchorRef === null || scrollAnchorRef === void 0 ? void 0 : scrollAnchorRef.current) ? getAllParents(scrollAnchorRef.current) : [];
-        allParents.forEach(function (parentEl) {
-            return parentEl.addEventListener('scroll', onRequestRepositionRef.current);
-        });
-        return function () {
-            window.removeEventListener('resize', onRequestRepositionRef.current);
-            allParents.forEach(function (parentEl) {
-                return parentEl.removeEventListener('scroll', onRequestRepositionRef.current);
-            });
-        };
+        var fn = function () { return onRequestRepositionRef.current(); };
+        if (isActive) {
+            window.addEventListener('resize', fn);
+            var allParents_1 = (scrollAnchorRef === null || scrollAnchorRef === void 0 ? void 0 : scrollAnchorRef.current) ? getAllParents(scrollAnchorRef.current) : [];
+            allParents_1.forEach(function (parentEl) { return parentEl.addEventListener('scroll', fn); });
+            return function () {
+                window.removeEventListener('resize', fn);
+                allParents_1.forEach(function (parentEl) { return parentEl.removeEventListener('scroll', fn); });
+            };
+        }
+        return undefined;
     }, [scrollAnchorRef]);
 };