@ozen-ui/kit 0.60.0 → 0.62.0

package/__inner__/cjs/components/DatePicker/types.d.ts

@@ -1,11 +1,31 @@
-import type { ChangeEvent, ComponentRef } from 'react';
+import type { ChangeEvent, ComponentRef, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
-import type { CalendarProps, CalendarOnChange } from '../Calendar';
-import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
-import type { InputProps } from '../Input';
+import type { CalendarProps } from '../Calendar';
+import type { FieldHintProps } from '../FieldHint';
+import type { FieldInputProps } from '../FieldInput';
+import type { FieldLabelProps } from '../FieldLabel';
+import type { InputProps, InputSizeVariant } from '../Input';
 import type { PopoverBaseProps } from '../Popover';
-export type DatePickerOnChange = CalendarOnChange<'single'>;
-export type DatePickerOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
+import type { StackProps } from '../Stack';
+import type { DATE_PICKER_DEFAULT_MODE } from './constants';
+export declare const datePickerModeVariant: readonly ["date", "date-range"];
+type Range = 'date-range';
+export type DatePickerModeVariant = (typeof datePickerModeVariant)[number];
+export type DatePickerPropInputValue<MODE extends DatePickerModeVariant> = (MODE extends Range ? [string, string] : string) | null;
+export type DatePickerPropOnInputChange<MODE extends DatePickerModeVariant> = (e: ChangeEvent<HTMLInputElement> | null, value: DatePickerPropInputValue<MODE>) => void;
+export type DatePickerPropValue<MODE extends DatePickerModeVariant> = (MODE extends Range ? [Date?, Date?] : Date) | null;
+export type DatePickerPropOnChange<MODE extends DatePickerModeVariant> = (date: DatePickerPropValue<MODE>) => void;
+type InputPropLabel = InputProps['label'];
+type InputPropRenderLeft = InputProps['renderLeft'];
+type InputPropRenderRight = InputProps['renderRight'];
+type InputPropPlaceholder = InputProps['placeholder'];
+export type DatePickerPropLabel<MODE> = MODE extends Range ? [InputPropLabel?, InputPropLabel?] | InputPropLabel : InputPropLabel;
+export type DatePickerPropRenderLeft<MODE> = MODE extends Range ? [InputPropRenderLeft?, InputPropRenderLeft?] | InputPropRenderLeft : InputPropRenderLeft;
+export type DatePickerPropRenderRight<MODE> = MODE extends Range ? [InputPropRenderRight?, InputPropRenderRight?] | InputPropRenderRight : InputPropRenderRight;
+export type DatePickerPropPlaceholder<MODE> = MODE extends Range ? [InputPropPlaceholder?, InputPropPlaceholder?] | InputPropPlaceholder : InputPropPlaceholder;
+export type DatePickerPropInputProps<MODE> = MODE extends Range ? [FieldInputProps?, FieldInputProps?] | FieldInputProps : FieldInputProps;
+export type DatePickerPropLabelProps<MODE> = MODE extends Range ? [FieldLabelProps?, FieldLabelProps?] | FieldLabelProps : FieldLabelProps;
+export type DatePickerPropFieldsProps<MODE> = MODE extends Range ? StackProps : never;
 export type DatePickerPropOnError = (props: {
     type: 'outOfRange';
     inputValue?: string;
@@ -15,32 +35,35 @@ export type DatePickerPropOnError = (props: {
     inputValue?: string;
     value?: Date | null;
 }) => void;
-type DatePickerOpenControlledProps = {
+export type DatePickerRef = ComponentRef<'div'>;
+/**
+ * @deprecated
+ * Use the `DatePickerPropOnInputChange` type to replace it.
+ * */
+export type DatePickerOnChange<MODE extends DatePickerModeVariant> = DatePickerPropOnInputChange<MODE>;
+/**
+ * @deprecated
+ * Use the `DatePickerPropOnInputChange` type to replace it.
+ * */
+export type DatePickerOnInputChange<MODE extends DatePickerModeVariant> = DatePickerPropOnInputChange<MODE>;
+export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE> = ExtendableComponentPropsWithRef<{
+    mode?: MODE;
+    /** Выбранная дата */
+    value?: DatePickerPropValue<MODE>;
+    /** Выбранная дата по умолчанию (неконтролируемое состояние) */
+    defaultValue?: DatePickerPropValue<MODE>;
     /** Текущее состояние списка. Если `true`, список отображается. */
     open?: boolean;
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
-    defaultOpen?: never;
-};
-type DatePickerOpenUncontrolledProps = {
-    /** Текущее состояние списка. Если `true`, список отображается. */
-    open?: never;
-    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
-};
-export type DatePickerRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
-export type DatePickerProps = ExtendableComponentPropsWithRef<{
-    /** Выбранная дата */
-    value?: Date | null;
-    /** Выбранная дата по умолчанию (неконтролируемое состояние) */
-    defaultValue?: Date | null;
     /** Функция обратного вызова, которая будет вызвана при выборе значения */
-    onChange?: DatePickerOnChange;
-    /** Введённое значение в текстовом поле */
-    onInputChange?: DatePickerOnInputChange;
+    onChange?: DatePickerPropOnChange<MODE>;
+    /** Введённое значение в текстовом поле (полях) */
+    onInputChange?: DatePickerPropOnInputChange<MODE>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
-    onClose?: () => void;
+    onClose?(): void;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
-    onOpen?: () => void;
+    onOpen?(): void;
     /** Свойства компонента Calendar */
     calendarProps?: CalendarProps;
     /** Свойства компонента Popover */
@@ -51,5 +74,41 @@ export type DatePickerProps = ExtendableComponentPropsWithRef<{
     disableClearButton?: boolean;
     /** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
     onError?: DatePickerPropOnError;
-} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disableStroke' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps' | 'hintProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps), typeof FIELD_CONTROL_DEFAULT_TAG>;
+    /** Лейбл */
+    label?: DatePickerPropLabel<MODE>;
+    /** Текст или иконка слева */
+    renderLeft?: DatePickerPropRenderLeft<MODE>;
+    /** Текст или иконка справа */
+    renderRight?: DatePickerPropRenderRight<MODE>;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: DatePickerPropPlaceholder<MODE>;
+    /** Свойства элемента input */
+    inputProps?: DatePickerPropInputProps<MODE>;
+    /** Свойства FieldLabel */
+    labelProps?: DatePickerPropLabelProps<MODE>;
+    /** Если `true` не закрывает выпадающий список при выборе опции */
+    disableCloseOnSelect?: boolean;
+    /** Если `true` делает элемент неактивным */
+    disabled?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
+    /** Размер компонента */
+    size?: InputSizeVariant;
+    /** Если `true` растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Если `true` делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Если `true` отключает обводку */
+    disableStroke?: boolean;
+    /** Если `true` переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Свойства обертки для текстовых полей. Принимает свойства компонента [Stack](https://ozen-ui.netlify.app/?path=/docs/components-stack--docs) */
+    fieldsProps?: DatePickerPropFieldsProps<MODE>;
+    /** Количество отображаемых календарей в компоненте: один или два */
+    calendars?: 1 | 2;
+} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
+export type DatePickerComponent = <MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE>(props: DatePickerProps<MODE>) => ReactNode;
+export type DatePickerModeComponent<MODE extends DatePickerModeVariant> = (props: Omit<DatePickerProps<MODE>, 'mode'>) => ReactNode;
 export {};

package/__inner__/cjs/components/DatePicker/types.js

@@ -1,2 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerModeVariant = void 0;
+exports.datePickerModeVariant = ['date', 'date-range'];

package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/formatStringToDate.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatStringToDate = void 0;
 var tslib_1 = require("tslib");
-var utils_1 = require("../../components/DateInput/utils");
 var formatStringToDate = function (value) {
     var _a = tslib_1.__read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
-    if (!(date && month && year) || !(0, utils_1.isCompleted)(value)) {
+    if (!(date && month && year)) {
         return null;
     }
     return new Date(+year, +month - 1, +date);

package/__inner__/cjs/components/DatePicker/utils/getCommonCalendarProps/getCommonCalendarProps.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarProps } from '../../../Calendar';
+import type { DatePickerModeVariant, DatePickerProps } from '../../index';
+export declare const getCommonCalendarProps: <MODE extends DatePickerModeVariant>(props: Omit<DatePickerProps<MODE>, "mode">) => CalendarProps;

package/__inner__/cjs/components/DatePicker/utils/getCommonCalendarProps/getCommonCalendarProps.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCommonCalendarProps = void 0;
+var tslib_1 = require("tslib");
+var getCalendarSizeToFormElement_1 = require("../getCalendarSizeToFormElement");
+var getCommonCalendarProps = function (props) {
+    var minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, _a = props.size, size = _a === void 0 ? 'm' : _a, ref = props.ref, calendarProps = props.calendarProps;
+    /** Соотношение размера календаря к размеру элемента контроля */
+    var calendarSize = (0, getCalendarSizeToFormElement_1.getCalendarSizeToFormElement)(size);
+    /** Предотвращаем переход фокуса с текстового поля на интерактивные элементы календаря */
+    var handleMouseDownCalendar = function (e) {
+        e.preventDefault();
+    };
+    return tslib_1.__assign(tslib_1.__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize }, calendarProps), { ref: ref, onMouseDown: handleMouseDownCalendar });
+};
+exports.getCommonCalendarProps = getCommonCalendarProps;

package/__inner__/cjs/components/DatePicker/utils/getCommonCalendarProps/index.d.ts

@@ -0,0 +1 @@
+export * from './getCommonCalendarProps';

package/__inner__/cjs/components/DatePicker/utils/getCommonCalendarProps/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./getCommonCalendarProps"), exports);

package/__inner__/cjs/components/DatePicker/utils/getCommonPopoverProps/getCommonPopoverProps.d.ts

@@ -0,0 +1,4 @@
+import { Paper } from '../../../Paper';
+import type { PopoverProps } from '../../../Popover';
+import type { DatePickerModeVariant, DatePickerProps } from '../../index';
+export declare const getCommonPopoverProps: <MODE extends DatePickerModeVariant>(props: Omit<DatePickerProps<MODE>, "mode">) => PopoverProps<typeof Paper>;

package/__inner__/cjs/components/DatePicker/utils/getCommonPopoverProps/getCommonPopoverProps.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCommonPopoverProps = void 0;
+var tslib_1 = require("tslib");
+var getPaperSizeToFormElement_1 = require("../../../../utils/getPaperSizeToFormElement");
+var Paper_1 = require("../../../Paper");
+var getCommonPopoverProps = function (props) {
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, popoverProps = props.popoverProps;
+    /** Вычисление border-radius по размеру компонента */
+    var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
+    return tslib_1.__assign({ radius: radius, as: Paper_1.Paper, offset: [0, 4], disableReturnFocus: true, disableEnforceFocus: true, placement: 'bottom-start' }, popoverProps);
+};
+exports.getCommonPopoverProps = getCommonPopoverProps;

package/__inner__/cjs/components/DatePicker/utils/getCommonPopoverProps/index.d.ts

@@ -0,0 +1 @@
+export * from './getCommonPopoverProps';

package/__inner__/cjs/components/DatePicker/utils/getCommonPopoverProps/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./getCommonPopoverProps"), exports);

package/__inner__/cjs/components/DatePicker/utils/index.d.ts

@@ -3,3 +3,7 @@ export * from './formatDateToString';
 export * from './formatStringToDate';
 export * from './isOutOfRange';
 export * from './isInExclude';
+export * from './getCommonPopoverProps';
+export * from './getCommonCalendarProps';
+export * from './isValidDateString';
+export * from './useCalendarKeyboard';

package/__inner__/cjs/components/DatePicker/utils/index.js

@@ -6,3 +6,7 @@ tslib_1.__exportStar(require("./formatDateToString"), exports);
 tslib_1.__exportStar(require("./formatStringToDate"), exports);
 tslib_1.__exportStar(require("./isOutOfRange"), exports);
 tslib_1.__exportStar(require("./isInExclude"), exports);
+tslib_1.__exportStar(require("./getCommonPopoverProps"), exports);
+tslib_1.__exportStar(require("./getCommonCalendarProps"), exports);
+tslib_1.__exportStar(require("./isValidDateString"), exports);
+tslib_1.__exportStar(require("./useCalendarKeyboard"), exports);

package/__inner__/cjs/components/DatePicker/utils/isValidDateString/index.d.ts

@@ -0,0 +1 @@
+export * from './isValidDateString';

package/__inner__/cjs/components/DatePicker/utils/isValidDateString/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./isValidDateString"), exports);

package/__inner__/cjs/components/DatePicker/utils/isValidDateString/isValidDateString.d.ts

@@ -0,0 +1 @@
+export declare const isValidDateString: (value: string | null | undefined) => boolean;

package/__inner__/cjs/components/DatePicker/utils/isValidDateString/isValidDateString.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidDateString = void 0;
+var tslib_1 = require("tslib");
+var date_1 = require("../../../../utils/date");
+var isNotNil_1 = require("../../../../utils/isNotNil");
+var isValidDateString = function (value) {
+    if (!(0, isNotNil_1.isNotNil)(value)) {
+        return false;
+    }
+    var _a = tslib_1.__read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
+    return (value === '' ||
+        (value.length === 10 && (0, date_1.isValidDate)("".concat(year, "-").concat(month, "-").concat(date))));
+};
+exports.isValidDateString = isValidDateString;

package/__inner__/cjs/components/DatePicker/utils/useCalendarKeyboard/index.d.ts

@@ -0,0 +1 @@
+export * from './useCalendarKeyboard';

package/__inner__/cjs/components/{Select/components/SelectConsumer → DatePicker/utils/useCalendarKeyboard}/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./SelectInputConsumer"), exports);
+tslib_1.__exportStar(require("./useCalendarKeyboard"), exports);

package/__inner__/cjs/components/DatePicker/utils/useCalendarKeyboard/useCalendarKeyboard.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react';
+type UseCalendarKeyboardProps = {
+    controlRef: RefObject<HTMLElement>;
+    calendarRef: RefObject<HTMLElement>;
+    active?: boolean;
+};
+export declare const useCalendarKeyboard: ({ controlRef, calendarRef, active, }: UseCalendarKeyboardProps) => boolean;
+export {};

package/__inner__/cjs/components/DatePicker/utils/useCalendarKeyboard/useCalendarKeyboard.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendarKeyboard = void 0;
+var tslib_1 = require("tslib");
+var useBoolean_1 = require("../../../../hooks/useBoolean");
+var useClickOutside_1 = require("../../../../hooks/useClickOutside");
+var useEventListener_1 = require("../../../../hooks/useEventListener");
+var getFocusableElements_1 = require("../../../../utils/getFocusableElements");
+var isKey_1 = require("../../../../utils/isKey");
+var useCalendarKeyboard = function (_a) {
+    var controlRef = _a.controlRef, calendarRef = _a.calendarRef, _b = _a.active, active = _b === void 0 ? false : _b;
+    var _c = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focused = _c[0], _d = _c[1], on = _d.on, off = _d.off;
+    (0, useClickOutside_1.useClickOutside)({
+        refs: [calendarRef],
+        active: focused,
+        handler: function () {
+            var _a;
+            (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            off();
+        },
+    });
+    (0, useEventListener_1.useEventListener)({
+        element: controlRef,
+        eventName: 'keydown',
+        handler: function (event) {
+            if ((0, isKey_1.isKey)(event, 'Tab') && calendarRef.current) {
+                event.preventDefault();
+                var _a = tslib_1.__read((0, getFocusableElements_1.getFocusableElements)(calendarRef.current), 1), firstFocusableElements = _a[0];
+                firstFocusableElements === null || firstFocusableElements === void 0 ? void 0 : firstFocusableElements.focus();
+                on();
+            }
+        },
+        active: active && !focused,
+    });
+    (0, useEventListener_1.useEventListener)({
+        eventName: 'keydown',
+        handler: function (event) {
+            if ((0, isKey_1.isKey)(event, 'Escape') && controlRef.current) {
+                controlRef.current.focus();
+                off();
+            }
+        },
+        active: focused,
+    });
+    return focused;
+};
+exports.useCalendarKeyboard = useCalendarKeyboard;

package/__inner__/cjs/components/Menu/Menu.css

@@ -28,5 +28,5 @@
   }
   .Menu {
   overflow: hidden auto;
-  max-block-size: 40vb;
+  max-block-size: 40vh;
 }

package/__inner__/cjs/components/Popover/Popover.js

@@ -23,7 +23,7 @@ var PopoverContext_1 = require("./PopoverContext");
 exports.cnPopover = (0, classname_1.cn)('Popover');
 exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, modifiersProp = props.modifiers, _k = props.as, as = _k === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "modifiers", "as"]);
+    var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, disableEscapeKeyDown = props.disableEscapeKeyDown, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, modifiersProp = props.modifiers, _k = props.as, as = _k === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "disableEscapeKeyDown", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "modifiers", "as"]);
     var Tag = (0, react_1.useMemo)(function () {
         // eslint-disable-next-line react/display-name
         return (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "l", shadow: "m", background: "main" }, props, { as: as, ref: ref }))); });
@@ -47,7 +47,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
                 return;
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
-        active: isTop,
+        active: isTop && !disableEscapeKeyDown,
     });
     (0, useClickOutside_1.useClickOutside)({
         refs: tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([

package/__inner__/cjs/components/Popover/types.d.ts

@@ -65,6 +65,8 @@ export type PopoverBaseProps = {
     disableReturnFocus?: boolean;
     /** Если `true` отключает закрытие окна при клике за его пределами */
     disableClickOutside?: boolean;
+    /** Если `true` отключает закрытие окна при нажатии на клавишу ESC */
+    disableEscapeKeyDown?: boolean;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
     /** Функция обратного вызова для получения метода по перерасчету расположения компонента Popover */

package/__inner__/cjs/components/Segment/Segment.js

@@ -32,7 +32,7 @@ exports.Segment = (0, react_1.forwardRef)(function (inProps, ref) {
         selected: valueState,
         onChange: handleChange,
     }); }, [name, disabled, iconSize, selectedColor, valueState, handleChange]);
-    return (react_1.default.createElement("fieldset", tslib_1.__assign({ ref: ref, disabled: disabled, className: (0, exports.cnSegment)('', {
+    return (react_1.default.createElement("fieldset", tslib_1.__assign({ ref: ref, disabled: disabled, className: (0, exports.cnSegment)({
             size: size,
             variant: variant,
             disabled: disabled,

package/__inner__/cjs/components/Segment/components/SegmentItem/SegmentItem.js

@@ -15,7 +15,7 @@ exports.SegmentItem = (0, react_1.forwardRef)(function (_a, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
     };
-    return (react_1.default.createElement("label", tslib_1.__assign({ ref: ref, className: (0, exports.cnSegmentItem)('', tslib_1.__assign({ disabled: disabled, selected: selected }, (selected && { selectedColor: selectedColor })), [className]), "data-testid": dataTestId }, labelProps),
+    return (react_1.default.createElement("label", tslib_1.__assign({ ref: ref, className: (0, exports.cnSegmentItem)(tslib_1.__assign({ disabled: disabled, selected: selected }, (selected && { selectedColor: selectedColor })), [className]), "data-testid": dataTestId }, labelProps),
         Icon && (react_1.default.createElement(Icon, { className: (0, exports.cnSegmentItem)('Icon'), ref: iconRef, size: iconSize })),
         children,
         react_1.default.createElement("input", tslib_1.__assign({ disabled: disabled, type: "radio", name: nameProp || name, className: (0, exports.cnSegmentItem)('Radio'), onChange: handleChange, checked: selected, value: value, "data-testid": inputTestId }, other, { ref: inputRef })),

package/__inner__/cjs/components/Select/Select.css

@@ -57,6 +57,12 @@
       color: var(--textfield-placeholder-color);
     }
 
+  .Select-HiddenLabel {
+    visibility: hidden;
+    block-size: 0;
+    opacity: 0;
+  }
+
   .Select_multiline .Select-FieldContainer {
       overflow: auto;
     }

package/__inner__/cjs/components/Select/Select.js

@@ -10,6 +10,7 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKeys_1 = require("../../utils/isKeys");
+var isString_1 = require("../../utils/isString");
 var DataList_1 = require("../DataList");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
@@ -22,21 +23,20 @@ var SelectRender = function (inProps, ref) {
     });
     var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = tslib_1.__rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
     var bodyInnerRef = (0, react_1.useRef)(null);
-    /** @deprecated props */
-    var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
+    var bodyRef = (0, useMultiRef_1.useMultiRef)([(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp, bodyInnerRef]);
     var dataListProps = dataListPropsProp || menuProps;
     var _h = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Select',
         state: 'value',
-    }), 3), valueState = _h[0], setValueState = _h[1], isValueControlled = _h[2];
+    }), 2), valueState = _h[0], setValueState = _h[1];
     var _j = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'Select',
         state: 'open',
-    }), 3), open = _j[0], setOpen = _j[1], isOpenControlled = _j[2];
+    }), 2), open = _j[0], setOpen = _j[1];
     var currentLabel;
     var isNotSelectOption = function (child) { return !(0, react_1.isValidElement)(child) || child.type !== DataList_1.DataListOption; };
     var resolvedChildren = (0, react_is_1.isFragment)(children)
@@ -45,27 +45,23 @@ var SelectRender = function (inProps, ref) {
     react_1.Children.forEach(resolvedChildren, function (child) {
         var _a, _b;
         if (!isNotSelectOption(child)) {
-            var label = typeof child.props.children === 'string'
+            var label = (0, isString_1.isString)(child.props.children)
                 ? (_a = child.props.label) !== null && _a !== void 0 ? _a : child.props.children
                 : child.props.label;
-            var params = {
-                multiple: multiple,
-                label: currentLabel,
-                value: valueState,
-            };
-            if ((0, helpers_1.isMultipleParams)(params)) {
+            var params = tslib_1.__assign(tslib_1.__assign({}, inProps), { multiple: multiple, value: valueState });
+            if ((0, helpers_1.isMultipleParams)(params) &&
+                (0, helpers_1.isMultipleLabel)(currentLabel, multiple)) {
                 var selected = (_b = params.value) === null || _b === void 0 ? void 0 : _b.includes(child.props.value);
-                if (selected) {
-                    currentLabel = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((params.label || [])), false), [
+                if (selected)
+                    currentLabel = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((currentLabel || [])), false), [
                         label,
                     ], false);
-                }
             }
-            if ((0, helpers_1.isNotMultipleParams)(params)) {
+            if ((0, helpers_1.isNotMultipleParams)(params) &&
+                (0, helpers_1.isNotMultipleLabel)(currentLabel, multiple)) {
                 var selected = params.value === child.props.value;
-                if (selected) {
+                if (selected)
                     currentLabel = label;
-                }
             }
         }
     });
@@ -80,52 +76,40 @@ var SelectRender = function (inProps, ref) {
     var handleToggle = function () {
         if (disabled)
             return;
-        if (open) {
+        if (open)
             handleClose();
-        }
-        else {
+        else
             handleOpen();
-        }
     };
-    var handleClick = function (event) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    var handleClick = function (e) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
         handleToggle();
     };
     /** Управление элементом контроля через клавиатуру */
-    var handleKeyDown = function (event) {
-        if ((0, isKeys_1.isKeys)(event, ['Space', 'ArrowDown', 'ArrowUp']) && !open) {
-            event.preventDefault();
+    var handleKeyDown = function (e) {
+        if ((0, isKeys_1.isKeys)(e, ['Space', 'ArrowDown', 'ArrowUp']) && !open) {
+            e.preventDefault();
             handleToggle();
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     };
     /** Событие выбора значения из раскрывающегося списка */
-    var handleChange = function (event, _a) {
+    var handleChange = function (e, _a) {
         var value = _a.value;
-        if (!isValueControlled || onChange) {
-            setValueState(value);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
         if (!multiple)
             handleClose();
     };
     /** Представление значение элемента контроля по умолчанию */
     var renderDefaultValue = function (option) {
         var _a = option.label, label = _a === void 0 ? '' : _a, _b = option.value, value = _b === void 0 ? '' : _b;
-        if (!value && value !== 0) {
+        if (!value && value !== 0)
             return null;
-        }
-        var params = {
-            multiple: multiple,
-            label: label,
-            value: value,
-        };
-        if ((0, helpers_1.isMultipleParams)(params)) {
-            return react_1.default.createElement("span", null, tslib_1.__spreadArray([], tslib_1.__read(params.label), false).join(', '));
-        }
-        if ((0, helpers_1.isNotMultipleParams)(params)) {
-            return react_1.default.createElement("span", null, params.label);
-        }
+        if ((0, helpers_1.isMultipleLabel)(label, multiple))
+            return react_1.default.createElement("span", null, tslib_1.__spreadArray([], tslib_1.__read(label), false).join(', '));
+        if ((0, helpers_1.isNotMultipleLabel)(label, multiple))
+            return react_1.default.createElement("span", null, label);
         return null;
     };
     /** Значение для текстового поля компонента */
@@ -135,12 +119,10 @@ var SelectRender = function (inProps, ref) {
             multiple: multiple,
             value: valueState,
         };
-        if ((0, helpers_1.isMultipleParams)(params)) {
-            return (_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',');
-        }
-        if ((0, helpers_1.isNotMultipleParams)(params)) {
-            return params.value;
-        }
+        if ((0, helpers_1.isMultipleParams)(params))
+            return ((_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',')) || '';
+        if ((0, helpers_1.isNotMultipleParams)(params))
+            return (params === null || params === void 0 ? void 0 : params.value) || '';
         return '';
     };
     /** Представление значение элемента контроля */
@@ -150,22 +132,22 @@ var SelectRender = function (inProps, ref) {
         /** Устанавливает фокус на элементе контроля
          * если компонент по умолчанию открыт — defaultOpen={true}
          * и является неконтролируемым */
-        if (defaultOpen && !isOpenControlled) {
+        if (defaultOpen)
             (_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, [open]);
+    }, []);
     (0, react_1.useEffect)(function () {
         var _a;
         /** Автофокус на элементе контроля */
-        if (autoFocus) {
+        if (autoFocus)
             (_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
     }, [autoFocus]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, onClick: handleClick, onKeyDown: handleKeyDown, value: inputValue(), renderedValue: renderValue({
+        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
-            }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([bodyRef, bodyInnerRef]) }), ref: ref })),
-        react_1.default.createElement(DataList_1.DataList, tslib_1.__assign({ equalAnchorWidth: true }, dataListProps, { listProps: tslib_1.__assign({ size: size, role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps), open: open, multiple: multiple, selected: (valueState || ''), onSelect: handleChange, anchorRef: bodyInnerRef, onClose: handleClose }), children)));
+            }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: bodyRef }), ref: ref })),
+        react_1.default.createElement(DataList_1.DataList, tslib_1.__assign({ equalAnchorWidth: true }, dataListProps, { listProps: tslib_1.__assign({ size: size, role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps), open: open, multiple: multiple, onClose: handleClose, onSelect: handleChange, anchorRef: bodyInnerRef, 
+            // TODO: add `null` to `DataListSelected`
+            selected: (valueState || null) }), children)));
 };
 exports.Select = (0, react_1.forwardRef)(SelectRender);