@consta/uikit 3.24.2 → 3.24.3

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange.js

@@ -3,17 +3,14 @@ exports.__esModule = true;
 exports.DatePickerFieldTypeYearRange = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var isBefore_1 = tslib_1.__importDefault(require("date-fns/isBefore"));
-var isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
 var FieldCaption_1 = require("../../FieldCaption/FieldCaption");
 var FieldLabel_1 = require("../../FieldLabel/FieldLabel");
 var DatePickerFieldTypeYear_1 = require("../DatePickerFieldTypeYear/DatePickerFieldTypeYear");
 var DatePickerMixRangeField_1 = require("../DatePickerMixRangeField/DatePickerMixRangeField");
+var getChangeFnRange_1 = require("../getChangeFnRange");
 var helpers_1 = require("../helpers");
-var types_1 = require("../types");
 exports.DatePickerFieldTypeYearRange = react_1.forwardRef(function (props, ref) {
-    var _a, _b;
-    var className = props.className, _c = props.form, form = _c === void 0 ? 'default' : _c, startFieldInputRef = props.startFieldInputRef, startFieldLeftSide = props.startFieldLeftSide, startFieldRightSide = props.startFieldRightSide, endFieldInputRef = props.endFieldInputRef, endFieldLeftSide = props.endFieldLeftSide, endFieldRightSide = props.endFieldRightSide, _d = props.value, value = _d === void 0 ? [] : _d, onChange = props.onChange, onError = props.onError, startFieldName = props.startFieldName, endFieldName = props.endFieldName, disabled = props.disabled, size = props.size, view = props.view, status = props.status, autoFocus = props.autoFocus, placeholder = props.placeholder, readOnly = props.readOnly, required = props.required, tabIndex = props.tabIndex, ariaLabel = props.ariaLabel, iconSize = props.iconSize, format = props.format, separator = props.separator, minDate = props.minDate, maxDate = props.maxDate, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, startFieldRef = props.startFieldRef, endFieldRef = props.endFieldRef, startFocused = props.startFocused, endFocused = props.endFocused, label = props.label, labelPosition = props.labelPosition, caption = props.caption, width = props.width, otherProps = tslib_1.__rest(props, ["className", "form", "startFieldInputRef", "startFieldLeftSide", "startFieldRightSide", "endFieldInputRef", "endFieldLeftSide", "endFieldRightSide", "value", "onChange", "onError", "startFieldName", "endFieldName", "disabled", "size", "view", "status", "autoFocus", "placeholder", "readOnly", "required", "tabIndex", "ariaLabel", "iconSize", "format", "separator", "minDate", "maxDate", "startFieldOnBlur", "startFieldOnFocus", "endFieldOnBlur", "endFieldOnFocus", "startFieldRef", "endFieldRef", "startFocused", "endFocused", "label", "labelPosition", "caption", "width"]);
+    var className = props.className, _a = props.form, form = _a === void 0 ? 'default' : _a, startFieldInputRef = props.startFieldInputRef, startFieldLeftSide = props.startFieldLeftSide, startFieldRightSide = props.startFieldRightSide, endFieldInputRef = props.endFieldInputRef, endFieldLeftSide = props.endFieldLeftSide, endFieldRightSide = props.endFieldRightSide, _b = props.value, value = _b === void 0 ? [] : _b, onChange = props.onChange, onError = props.onError, startFieldName = props.startFieldName, endFieldName = props.endFieldName, disabled = props.disabled, size = props.size, view = props.view, status = props.status, autoFocus = props.autoFocus, placeholder = props.placeholder, readOnly = props.readOnly, required = props.required, tabIndex = props.tabIndex, ariaLabel = props.ariaLabel, iconSize = props.iconSize, format = props.format, separator = props.separator, minDate = props.minDate, maxDate = props.maxDate, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, startFieldRef = props.startFieldRef, endFieldRef = props.endFieldRef, startFocused = props.startFocused, endFocused = props.endFocused, label = props.label, labelPosition = props.labelPosition, caption = props.caption, width = props.width, withClearButton = props.withClearButton, otherProps = tslib_1.__rest(props, ["className", "form", "startFieldInputRef", "startFieldLeftSide", "startFieldRightSide", "endFieldInputRef", "endFieldLeftSide", "endFieldRightSide", "value", "onChange", "onError", "startFieldName", "endFieldName", "disabled", "size", "view", "status", "autoFocus", "placeholder", "readOnly", "required", "tabIndex", "ariaLabel", "iconSize", "format", "separator", "minDate", "maxDate", "startFieldOnBlur", "startFieldOnFocus", "endFieldOnBlur", "endFieldOnFocus", "startFieldRef", "endFieldRef", "startFocused", "endFocused", "label", "labelPosition", "caption", "width", "withClearButton"]);
     var commonProps = {
         className: DatePickerMixRangeField_1.cnDatePickerMixRangeField('Field'),
         disabled: disabled,
@@ -31,68 +28,15 @@ exports.DatePickerFieldTypeYearRange = react_1.forwardRef(function (props, ref)
         format: format,
         separator: separator,
         minDate: minDate,
-        maxDate: maxDate
+        maxDate: maxDate,
+        withClearButton: withClearButton
     };
-    var _e = tslib_1.__read(react_1.useState(value === null || value === void 0 ? void 0 : value[0]), 2), startDate = _e[0], setStartDate = _e[1];
-    var _f = tslib_1.__read(react_1.useState(value === null || value === void 0 ? void 0 : value[1]), 2), endDate = _f[0], setEndDate = _f[1];
-    var eventRef = react_1.useRef();
-    var handleChange = function (e, ownStartDate, ownEndDate) {
-        var start = ownStartDate || startDate;
-        var end = ownEndDate || endDate;
-        if (!onChange) {
-            return;
-        }
-        if (start && end) {
-            if (isBefore_1["default"](start, end) || isEqual_1["default"](start, end)) {
-                onChange({ e: e, value: [start, end] });
-                return;
-            }
-            onChange({ e: e, value: [start, undefined] });
-            onError && onError({ type: types_1.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 });
-    };
-    var handleStartDateChange = function (props) {
-        var _a;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a.getTime()) === (startDate === null || startDate === void 0 ? void 0 : startDate.getTime())) {
-            return;
-        }
-        eventRef.current = props.e;
-        setStartDate(props.value);
-    };
-    var handleEndDateChange = function (props) {
-        var _a;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a.getTime()) === (endDate === null || endDate === void 0 ? void 0 : endDate.getTime())) {
-            return;
-        }
-        eventRef.current = props.e;
-        setEndDate(props.value);
-    };
-    react_1.useEffect(function () {
-        if (eventRef.current) {
-            handleChange(eventRef.current, startDate, endDate);
-        }
-    }, [eventRef.current]);
-    react_1.useEffect(function () {
-        setStartDate(value === null || value === void 0 ? void 0 : value[0]);
-    }, [(_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.getTime()]);
-    react_1.useEffect(function () {
-        setEndDate(value === null || value === void 0 ? void 0 : value[1]);
-    }, [(_b = value === null || value === void 0 ? void 0 : value[1]) === null || _b === void 0 ? void 0 : _b.getTime()]);
+    var _c = tslib_1.__read(getChangeFnRange_1.getChangeFnRange(onChange, onError, value), 2), handleStartDateChange = _c[0], handleEndDateChange = _c[1];
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: DatePickerMixRangeField_1.cnDatePickerMixRangeField({ view: view, labelPosition: labelPosition, width: width, size: size }, [className]), ref: ref }),
         label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, { required: required, className: DatePickerMixRangeField_1.cnDatePickerMixRangeField('Label', { labelPosition: labelPosition }), size: size }, label)),
         react_1["default"].createElement("div", { className: DatePickerMixRangeField_1.cnDatePickerMixRangeField('Body') },
             react_1["default"].createElement("div", { className: DatePickerMixRangeField_1.cnDatePickerMixRangeField('Fields') },
-                react_1["default"].createElement(DatePickerFieldTypeYear_1.DatePickerFieldTypeYear, tslib_1.__assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: helpers_1.getFormForStart(form), value: startDate, onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused, name: startFieldName })),
-                react_1["default"].createElement(DatePickerFieldTypeYear_1.DatePickerFieldTypeYear, tslib_1.__assign({}, commonProps, { name: endFieldName, inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: helpers_1.getFormForEnd(form), value: endDate, onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))),
+                react_1["default"].createElement(DatePickerFieldTypeYear_1.DatePickerFieldTypeYear, tslib_1.__assign({}, commonProps, { inputRef: startFieldInputRef, ref: startFieldRef, leftSide: startFieldLeftSide, rightSide: startFieldRightSide, form: helpers_1.getFormForStart(form), value: value === null || value === void 0 ? void 0 : value[0], onChange: handleStartDateChange, onFocus: startFieldOnFocus, onBlur: startFieldOnBlur, focused: startFocused, name: startFieldName })),
+                react_1["default"].createElement(DatePickerFieldTypeYear_1.DatePickerFieldTypeYear, tslib_1.__assign({}, commonProps, { name: endFieldName, inputRef: endFieldInputRef, ref: endFieldRef, leftSide: endFieldLeftSide, rightSide: endFieldRightSide, form: helpers_1.getFormForEnd(form), value: value === null || value === void 0 ? void 0 : value[1], onChange: handleEndDateChange, onFocus: endFieldOnFocus, onBlur: endFieldOnBlur, focused: endFocused }))),
             caption && (react_1["default"].createElement(FieldCaption_1.FieldCaption, { className: DatePickerMixRangeField_1.cnDatePickerMixRangeField('Caption'), status: status }, caption)))));
 });

package/__internal__/cjs-src/components/DatePickerCanary/getChangeFnRange.d.ts

@@ -0,0 +1,14 @@
+import { DateRange } from '../../utils/types/Date';
+import { DatePickerPropOnError } from './types';
+declare type OnChange = (props: {
+    e: Event;
+    value: DateRange | null;
+}) => void;
+export declare const getChangeFnRange: (onChange: OnChange | undefined, onError: DatePickerPropOnError | undefined, value: DateRange | null | undefined) => readonly [(props: {
+    e: Event;
+    value: Date | null;
+}) => void, (props: {
+    e: Event;
+    value: Date | null;
+}) => void];
+export {};

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

@@ -0,0 +1,40 @@
+"use strict";
+exports.__esModule = true;
+exports.getChangeFnRange = void 0;
+var tslib_1 = require("tslib");
+var isBefore_1 = tslib_1.__importDefault(require("date-fns/isBefore"));
+var isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
+var types_1 = require("./types");
+var handleChange = function (e, start, end, onChange, onError) {
+    if (!onChange) {
+        return;
+    }
+    if (start && end) {
+        if (isBefore_1["default"](start, end) || isEqual_1["default"](start, end)) {
+            onChange({ e: e, value: [start, end] });
+            return;
+        }
+        onChange({ e: e, value: [start, undefined] });
+        onError && onError({ type: types_1.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 });
+};
+exports.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__/cjs-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__/cjs-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__/cjs-src/components/DragNDropField/DragNDropField.d.ts

@@ -1,6 +1,14 @@
 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;
+    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__/cjs-src/components/DragNDropField/DragNDropField.js

@@ -6,6 +6,7 @@ require("./DragNDropField.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_dropzone_1 = require("react-dropzone");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
+var useMutableRef_1 = require("../../hooks/useMutableRef/useMutableRef");
 var bem_1 = require("../../utils/bem");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var Text_1 = require("../Text/Text");
@@ -15,29 +16,30 @@ var getErrorsList_1 = require("./getErrorsList");
 var locale_1 = require("./locale");
 var cnDragNDropField = bem_1.cn('DragNDropField');
 exports.COMPONENT_NAME = 'DragNDropField';
-exports.DragNDropField = react_1["default"].forwardRef(function (props, ref) {
+exports.DragNDropField = react_1.forwardRef(function (props, ref) {
     var dragNDropFieldRef = react_1.useRef(null);
-    var _a = usePropsHandler_1.usePropsHandler(exports.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_1.DragNDropFieldContent : _c, localeProp = _a.locale;
+    var _a = usePropsHandler_1.usePropsHandler(exports.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_1.DragNDropFieldContent : _c, localeProp = _a.locale, disabled = _a.disabled, onClick = _a.onClick, otherProps = tslib_1.__rest(_a, ["accept", "maxSize", "multiple", "onDropFiles", "children", "locale", "disabled", "onClick"]);
+    var onClickRef = useMutableRef_1.useMutableRef(onClick);
     var locale = locale_1.withdefaultLocale(localeProp);
     var handleDrop = react_1["default"].useCallback(function (acceptedFiles) { return acceptedFiles.length > 0 && onDropFiles(acceptedFiles); }, [onDropFiles]);
     var _d = react_dropzone_1.useDropzone({
         accept: (accept === null || accept === void 0 ? void 0 : accept.length) ? accept : undefined,
         maxSize: maxSize || 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_1["default"].useCallback(function (event) {
+    var handleRootClick = react_1["default"].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(tslib_1.__assign(tslib_1.__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, multiple: multiple, openFileDialog: open, locale: locale, disabled: disabled })
         : children;
     var errors = react_1["default"].useMemo(function () { return getErrorsList_1.getErrorsList(fileRejections, { maxSize: maxSize }, locale); }, [
         fileRejections,

package/__internal__/cjs-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__/cjs-src/components/DragNDropField/DragNDropFieldContent/DragNDropFieldContent.js

@@ -12,14 +12,14 @@ var locale_1 = require("../locale");
 var formatFileRequirements_1 = require("./formatFileRequirements");
 var cnDragNDropFieldContent = bem_1.cn('DragNDropFieldContent');
 exports.DragNDropFieldContent = function (_a) {
-    var accept = _a.accept, maxSize = _a.maxSize, multiple = _a.multiple, openFileDialog = _a.openFileDialog, locale = _a.locale;
+    var accept = _a.accept, maxSize = _a.maxSize, multiple = _a.multiple, openFileDialog = _a.openFileDialog, locale = _a.locale, disabled = _a.disabled;
     var requirements = formatFileRequirements_1.formatFileRequirements(accept, maxSize);
     var fileText = multiple ? locale.files : locale.file;
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(Text_1.Text, { view: "secondary", size: "s", lineHeight: "s", align: "center" },
+        react_1["default"].createElement(Text_1.Text, { className: cnDragNDropFieldContent('Text', { disabled: disabled }), view: "secondary", size: "s", lineHeight: "s", align: "center" },
             locale_1.getText(locale['call-to-action'], { fileText: fileText }),
             requirements && (react_1["default"].createElement(react_1["default"].Fragment, null,
                 react_1["default"].createElement("br", null),
                 requirements))),
-        react_1["default"].createElement(Button_1.Button, { className: cnDragNDropFieldContent('Button'), label: locale_1.getText(locale['action-button'], { fileText: fileText }), iconLeft: IconAttach_1.IconAttach, view: "ghost", size: "s", onClick: openFileDialog })));
+        react_1["default"].createElement(Button_1.Button, { className: cnDragNDropFieldContent('Button'), label: locale_1.getText(locale['action-button'], { fileText: fileText }), iconLeft: IconAttach_1.IconAttach, view: "ghost", size: "s", onClick: openFileDialog, disabled: disabled })));
 };

package/__internal__/cjs-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,17 @@ 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'>) => React.ReactNode;
 export declare type FileSizes = {
     minSize?: number;
     maxSize?: number;
 };
-export declare type DragNDropFieldProps = {
+export declare type DragNDropFieldProps = PropsWithHTMLAttributes<{
     accept?: string | string[];
     maxSize?: number;
     multiple?: boolean;
     onDropFiles: (files: File[]) => void;
     children?: React.ReactNode | DragNDropFieldChildrenRenderProp;
     locale?: DragNDropFieldPropLocale;
-};
+    disabled?: boolean;
+}, HTMLDivElement>;

package/__internal__/cjs-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__/cjs-src/components/Popover/Popover.js

@@ -8,6 +8,7 @@ var useClickOutside_1 = require("../../hooks/useClickOutside/useClickOutside");
 var useComponentSize_1 = require("../../hooks/useComponentSize/useComponentSize");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var bem_1 = require("../../utils/bem");
+var type_guards_1 = require("../../utils/type-guards");
 var PortalWithTheme_1 = require("../PortalWithTheme/PortalWithTheme");
 var Theme_1 = require("../Theme/Theme");
 var helpers_1 = require("./helpers");
@@ -56,6 +57,29 @@ exports.popoverPropOffset = [
     '6xl',
 ];
 exports.directions = tslib_1.__spread(exports.directionsStartCenter, exports.directionsStartEdge);
+var getOffset = function (ref, propOffset) {
+    if (type_guards_1.isNumber(propOffset)) {
+        return propOffset;
+    }
+    if (type_guards_1.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
@@ -75,7 +99,7 @@ var ContextConsumer = function (_a) {
 var cnPopover = bem_1.cn('Popover');
 exports.Popover = react_1.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 ? exports.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 = tslib_1.__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 ? exports.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 = tslib_1.__rest(props, ["children", "direction", "offset", "arrowOffset", "possibleDirections", "isInteractive", "onClickOutside", "spareDirection", "style", "className", "position", "anchorRef", "equalAnchorWidth", "onSetDirection"]);
     var ref = react_1["default"].useRef(null);
     var theme = Theme_1.useTheme().theme;
     var _g = tslib_1.__read(react_1["default"].useState(), 2), anchorClientRect = _g[0], setAnchorClientRect = _g[1];
@@ -88,6 +112,7 @@ exports.Popover = react_1.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 = react_1.useMemo(function () { return getOffset(ref, propOffset); }, [propOffset, Boolean(ref.current)]);
     var _k = helpers_1.getComputedPositionAndDirection({
         contentSize: { width: width, height: height },
         viewportSize: {
@@ -96,6 +121,7 @@ exports.Popover = react_1.forwardRef(function (props, componentRef) {
             height: document.documentElement.clientHeight
         },
         arrowOffset: arrowOffset,
+        offset: offset,
         direction: passedDirection,
         possibleDirections: possibleDirections,
         bannedDirections: bannedDirections,
@@ -105,11 +131,10 @@ exports.Popover = react_1.forwardRef(function (props, componentRef) {
         anchorSize: anchorSize,
         spareDirection: spareDirection
     }), position = _k.position, direction = _k.direction;
-    var content = isRenderProp(children) ? children(direction) : children;
     react_1.useLayoutEffect(function () { return onSetDirection === null || onSetDirection === void 0 ? void 0 : onSetDirection(direction); }, [direction]);
-    react_1.useLayoutEffect(resetBannedDirections, [props]);
     react_1.useEffect(updateAnchorClientRect, [anchorSize]);
     usePopoverReposition_1.usePopoverReposition({
+        isActive: true,
         scrollAnchorRef: anchorRef || { current: null },
         onRequestReposition: function () {
             resetBannedDirections();
@@ -122,16 +147,20 @@ exports.Popover = react_1.forwardRef(function (props, componentRef) {
      * которые не подошли, чтобы не возвращаться к ним и предотвратить бесконечный ререндер.
      * См. PopoverBannedPositionsStory
      */
-    if (previousDirectionRef.current !== direction) {
-        if (previousDirectionRef.current && !bannedDirections.includes(previousDirectionRef.current)) {
-            setBannedDirections(function (state) {
-                return previousDirectionRef.current ? tslib_1.__spread(state, [previousDirectionRef.current]) : state;
-            });
+    react_1.useLayoutEffect(function () {
+        if (previousDirectionRef.current !== direction) {
+            if (previousDirectionRef.current &&
+                !bannedDirections.includes(previousDirectionRef.current)) {
+                setBannedDirections(function (state) {
+                    return previousDirectionRef.current ? tslib_1.__spread(state, [previousDirectionRef.current]) : state;
+                });
+            }
+            previousDirectionRef.current = direction;
         }
-        previousDirectionRef.current = direction;
-    }
+    }, [direction]);
     // Сбрасываем при любом изменении пропсов, чтобы заново начать перебор направлений
     // Главное не сбрасывать при изменении размеров поповера, т.к. именно оно может вызвать бесконечный перебор
-    return (react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, tslib_1.__assign({}, otherProps, { preset: theme, className: cnPopover({ direction: direction }, [className]), container: window.document.body, ref: useForkRef_1.useForkRef([ref, componentRef]), style: tslib_1.__assign(tslib_1.__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_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside, ignoreClicksInsideRefs: [ref, anchorRef || { current: null }] }, content)));
+    react_1.useLayoutEffect(resetBannedDirections, [props]);
+    return (react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, tslib_1.__assign({}, otherProps, { preset: theme, className: cnPopover({ direction: direction }, [className]), container: window.document.body, ref: useForkRef_1.useForkRef([ref, componentRef]), style: tslib_1.__assign(tslib_1.__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_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside, ignoreClicksInsideRefs: [ref, anchorRef || { current: null }] }, isRenderProp(children) ? children(direction) : children)));
 });

package/__internal__/cjs-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__/cjs-src/components/Popover/helpers.js

@@ -1,31 +1,28 @@
 "use strict";
 exports.__esModule = true;
-exports.getComputedPositionAndDirection = exports.getPositionsByDirection = exports.convertPixelsToNumber = void 0;
+exports.getComputedPositionAndDirection = exports.getPositionsByDirection = void 0;
 var tslib_1 = require("tslib");
 var getPosition = function (x, y) { return ({
     x: Math.round(x),
     y: Math.round(y)
 }); };
-exports.convertPixelsToNumber = function (pixels) {
-    return Number(pixels.slice(0, pixels.length - 2));
-};
 exports.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,
@@ -59,7 +56,7 @@ exports.getPositionsByDirection = function (_a) {
     };
 };
 exports.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 };
     }
@@ -67,7 +64,8 @@ exports.getComputedPositionAndDirection = function (_a) {
         contentSize: contentSize,
         anchorSize: anchorSize,
         position: initialPosition,
-        arrowOffset: arrowOffset
+        arrowOffset: arrowOffset,
+        offset: offset
     });
     var direction = tslib_1.__spread([initialDirection], possibleDirections).filter(function (dir) { return !bannedDirections.includes(dir); })
         .find(function (dir) {

package/__internal__/cjs-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__/cjs-src/components/Popover/usePopoverReposition.js

@@ -14,19 +14,19 @@ var getAllParents = function (element) {
 };
 /** Запрос репозиции поповера при ресайзе окна и скролле */
 exports.usePopoverReposition = function (_a) {
-    var scrollAnchorRef = _a.scrollAnchorRef, onRequestReposition = _a.onRequestReposition;
+    var isActive = _a.isActive, scrollAnchorRef = _a.scrollAnchorRef, onRequestReposition = _a.onRequestReposition;
     var onRequestRepositionRef = useMutableRef_1.useMutableRef(onRequestReposition);
     react_1.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]);
 };