@ozen-ui/kit 0.47.2 → 0.49.0

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

@@ -15,6 +15,7 @@ import type { ChipProps as ChiPropsNext } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
+import type { DatePickerProps } from '../DatePicker';
 import type { DialogProps } from '../Dialog';
 import type { DividerProps } from '../Divider';
 import type { DrawerProps } from '../Drawer';
@@ -86,6 +87,7 @@ export type Theme = {
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
         Dialog?: Partial<DialogProps>;
+        DatePicker?: Partial<DatePickerProps>;
         Divider?: Partial<DividerProps>;
         Drawer?: Partial<DrawerProps>;
         FieldControl?: Partial<FieldControlProps>;

package/__inner__/cjs/components/Tooltip/Tooltip.css

@@ -1,6 +1,7 @@
 /* stylelint-disable */
 .Tooltip {
   max-inline-size: 300px;
+  color: var(--color-content-primary);
 }
 .Tooltip_size_xs {
       padding: var(--spacing-2xs) var(--spacing-xs);
@@ -20,9 +21,7 @@
 
       text-transform: var(--typography-text-s-text_transform, none);
     }
-.Tooltip_variant_light {
-      color: var(--color-content-primary);
-    }
-.Tooltip_variant_dark {
-      color: var(--color-content-primary-inverse);
-    }
+.Tooltip_variant_dark,
+  .Tooltip_inverse {
+    color: var(--color-content-primary-inverse);
+  }

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -4,6 +4,7 @@ exports.Tooltip = exports.cnTooltip = void 0;
 var tslib_1 = require("tslib");
 require("./Tooltip.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var useControlled_1 = require("../../hooks/useControlled");
 var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
@@ -15,7 +16,10 @@ var constants_1 = require("./constants");
 exports.cnTooltip = (0, classname_1.cn)('Tooltip');
 exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tooltip' });
-    var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.variant, variant = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_VARIANT : _c, _d = props.offset, offset = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _d, _e = props.delayEnter, delayEnter = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _e, _f = props.delayLeave, delayLeave = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _f, _g = props.arrow, arrow = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _g, _h = props.shouldWrapChildren, shouldWrapChildren = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _h, _j = props.disabled, disabled = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _j, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["trigger", "size", "variant", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
+    var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_INVERSE : _j, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
+    if (process.env.NODE_ENV !== 'production' && variant) {
+        (0, logger_1.deprecate)('Свойство «variant» устарело. Для замены используйте «inverse».');
+    }
     var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
     var _m = tslib_1.__read((0, react_1.useState)(), 2), hasFocus = _m[0], setHasFocus = _m[1];
     var _o = tslib_1.__read((0, react_1.useState)(), 2), hasHover = _o[0], setHasHover = _o[1];
@@ -115,7 +119,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.cloneElement(resolveChildren, composeChildrenProps),
-        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === 'light' ? 'main' : 'main-inverse', radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
+        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
             }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });

package/__inner__/cjs/components/Tooltip/constants.d.ts

@@ -1,7 +1,7 @@
 export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
 export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
 export declare const TOOLTIP_DEFAULT_SIZE = "s";
-export declare const TOOLTIP_DEFAULT_VARIANT = "dark";
+export declare const TOOLTIP_DEFAULT_INVERSE = true;
 export declare const TOOLTIP_DEFAULT_OFFSET: number[];
 export declare const TOOLTIP_DEFAULT_DELAY_ENTER = 100;
 export declare const TOOLTIP_DEFAULT_DELAY_LEAVE = 100;

package/__inner__/cjs/components/Tooltip/constants.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOOLTIP_DEFAULT_DISABLED = exports.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = exports.TOOLTIP_DEFAULT_ARROW = exports.TOOLTIP_DEFAULT_DELAY_LEAVE = exports.TOOLTIP_DEFAULT_DELAY_ENTER = exports.TOOLTIP_DEFAULT_OFFSET = exports.TOOLTIP_DEFAULT_VARIANT = exports.TOOLTIP_DEFAULT_SIZE = exports.TOOLTIP_DEFAULT_TRIGGER = exports.TOOLTIP_DEFAULT_TAG = void 0;
+exports.TOOLTIP_DEFAULT_DISABLED = exports.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = exports.TOOLTIP_DEFAULT_ARROW = exports.TOOLTIP_DEFAULT_DELAY_LEAVE = exports.TOOLTIP_DEFAULT_DELAY_ENTER = exports.TOOLTIP_DEFAULT_OFFSET = exports.TOOLTIP_DEFAULT_INVERSE = exports.TOOLTIP_DEFAULT_SIZE = exports.TOOLTIP_DEFAULT_TRIGGER = exports.TOOLTIP_DEFAULT_TAG = void 0;
 var Paper_1 = require("../Paper");
 exports.TOOLTIP_DEFAULT_TAG = Paper_1.Paper;
 exports.TOOLTIP_DEFAULT_TRIGGER = 'hover';
 exports.TOOLTIP_DEFAULT_SIZE = 's';
-exports.TOOLTIP_DEFAULT_VARIANT = 'dark';
+exports.TOOLTIP_DEFAULT_INVERSE = true;
 exports.TOOLTIP_DEFAULT_OFFSET = [0, 8];
 exports.TOOLTIP_DEFAULT_DELAY_ENTER = 100;
 exports.TOOLTIP_DEFAULT_DELAY_LEAVE = 100;

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

@@ -8,6 +8,13 @@ export declare const tooltipVariant: readonly ["light", "dark"];
 export type TooltipVariant = (typeof tooltipVariant)[number];
 export declare const tooltipTriggerVariant: readonly ["hover", "focus", "click", "hover&focus"];
 export type TooltipTriggerVariant = (typeof tooltipTriggerVariant)[number];
+type TooltipPropsDeprecated = {
+    /**
+     * Вариант представления
+     * @deprecated Используйте на замену свойство «inverse»
+     * */
+    variant?: TooltipVariant;
+};
 export type TooltipBaseProps = {
     /** Признак по которому тултип будет представлен */
     open?: boolean;
@@ -19,8 +26,8 @@ export type TooltipBaseProps = {
     label?: ReactNode;
     /** Размер тултипа */
     size?: TooltipSizeVariant;
-    /** Вариант представления */
-    variant?: TooltipVariant;
+    /** Если {true} инвертирует основные цвета компонента */
+    inverse?: boolean;
     /** Если {true} отключает отображение тултипа */
     disabled?: boolean;
     /** События вызова тултипа */
@@ -41,6 +48,7 @@ export type TooltipBaseProps = {
     'data-testid'?: string;
     /** Дополнительные CSS-классы */
     className?: string;
-} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
+} & TooltipPropsDeprecated & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
 export type TooltipRef = ComponentRef<typeof TOOLTIP_DEFAULT_TAG>;
 export type TooltipProps<As extends ElementType = typeof TOOLTIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<TooltipBaseProps, As>;
+export {};

package/__inner__/cjs/locale/locale.js

@@ -68,6 +68,10 @@ exports.ruRU = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Очистить',
+            placeholder: 'ДД.ММ.ГГГГ',
+        },
     },
 };
 exports.kkKZ = {
@@ -136,6 +140,10 @@ exports.kkKZ = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Тазалау',
+            placeholder: 'КК.АА.ЖЖЖЖ',
+        },
     },
 };
 exports.enUS = {
@@ -205,5 +213,9 @@ exports.enUS = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Clear',
+            placeholder: 'DD.MM.YYYY',
+        },
     },
 };

package/__inner__/esm/components/Alert/Alert.css

@@ -2,6 +2,10 @@
 .Alert {
   --alert-status-line-width: 8px;
   --alert-status-line-gutter: var(--control-padding-xs);
+  --alert-title-text-color: var(--color-content-primary);
+  --alert-body-text-color: var(--color-content-secondary);
+  --alert-icon-color: var(--color-content-primary);
+  --alert-close-button-color: var(--color-content-primary);
   display: flex;
   overflow: auto;
   inline-size: 100%;
@@ -22,18 +26,13 @@
 
   text-transform: var(--typography-text-xs-text_transform, none);
 }
-.Alert_color_light {
-      --alert-title-text-color: var(--color-content-primary);
-      --alert-body-text-color: var(--color-content-secondary);
-      --alert-icon-color: var(--color-content-primary);
-      --alert-close-button-color: var(--color-content-primary);
-    }
-.Alert_color_dark {
-      --alert-title-text-color: var(--color-content-primary-inverse);
-      --alert-body-text-color: var(--color-content-primary-inverse);
-      --alert-icon-color: var(--color-content-primary-inverse);
-      --alert-close-button-color: var(--color-content-primary-inverse);
-    }
+.Alert_color_dark,
+  .Alert_inverse {
+    --alert-title-text-color: var(--color-content-primary-inverse);
+    --alert-body-text-color: var(--color-content-primary-inverse);
+    --alert-icon-color: var(--color-content-primary-inverse);
+    --alert-close-button-color: var(--color-content-primary-inverse);
+  }
 .Alert_status_info {
       --alert-icon-color: var(--color-content-info);
       --alert-status-line-color: var(--color-background-info);

package/__inner__/esm/components/Alert/Alert.d.ts

@@ -1,43 +1,17 @@
 import './Alert.css';
 import React from 'react';
-import type { HTMLAttributes, ReactElement, ReactNode, MouseEvent } from 'react';
 import type { ButtonProps } from '../ButtonNext';
 export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
-export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
-export declare const alertColorVariant: readonly ["light", "dark"];
-export type AlertStatusVariant = (typeof alertStatusVariant)[number];
-export type AlertColorVariant = (typeof alertColorVariant)[number];
-type AlertBaseProps = {
-    /** Заголовок сообщения */
-    title: ReactNode;
-    /**
-     * Статус сообщения
-     * @default info
-     */
-    status?: AlertStatusVariant;
-    /** Цветовая палитра сообщения */
-    color?: AlertColorVariant;
-    /**
-     * Если {true} отображает иконку со статусом
-     * @default true
-     */
-    showIcon?: boolean;
-    /**
-     * Функция обратного вызова при нажатии на кнопку закрытия
-     */
-    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Основное содержимое элемента
-     * @default null
-     * */
-    children?: ReactNode;
-    /** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
-    action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
-    /** Дополнительные CSS-классы */
-    className?: string;
-    /** Текст для кнопки закрытия компонента */
-    closeText?: string;
-};
-export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
-export declare const Alert: React.ForwardRefExoticComponent<AlertBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Alert: React.ForwardRefExoticComponent<{
+    title: React.ReactNode;
+    status?: "error" | "info" | "success" | "warning" | undefined;
+    inverse?: boolean | undefined;
+    showIcon?: boolean | undefined;
+    onClose?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    children?: React.ReactNode;
+    action?: React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>> | (({ size, className, }: Pick<ButtonProps, "className" | "size">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    className?: string | undefined;
+    closeText?: string | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> & {
+    color?: "dark" | "light" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Alert/Alert.js

@@ -2,32 +2,29 @@ import { __assign, __rest } from "tslib";
 import './Alert.css';
 import React, { forwardRef, useMemo } from 'react';
 import { CrossIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, WarningTriangleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
+import { deprecate } from '@ozen-ui/logger';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButtonNext';
 import { Paper } from '../Paper';
-import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_COLOR, } from './constants';
+import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_INVERSE, } from './constants';
 export var cnAlert = cn('Alert');
-export var alertStatusVariant = [
-    'success',
-    'error',
-    'warning',
-    'info',
-];
-export var alertColorVariant = ['light', 'dark'];
 var matchStatusToIcon = {
-    neutral: React.createElement(InfoCircleFilledIcon, { size: "s" }),
     info: React.createElement(InfoCircleFilledIcon, { size: "s" }),
-    warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
+    neutral: React.createElement(InfoCircleFilledIcon, { size: "s" }),
     success: React.createElement(CheckCircleFilledIcon, { size: "s" }),
     error: React.createElement(WarningCircleFilledIcon, { size: "s" }),
+    warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
 };
 export var Alert = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Alert',
     });
-    var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.color, color = _c === void 0 ? ALERT_DEFAULT_COLOR : _c, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = __rest(props, ["status", "showIcon", "color", "closeText", "children", "action", "onClose", "title", "className"]);
+    var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.inverse, inverse = _c === void 0 ? ALERT_DEFAULT_INVERSE : _c, color = props.color, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = __rest(props, ["status", "showIcon", "inverse", "color", "closeText", "children", "action", "onClose", "title", "className"]);
+    if (process.env.NODE_ENV !== 'production' && color) {
+        deprecate('Свойство «color» устарело. Для замены используйте «inverse».');
+    }
     var action = useMemo(function () {
         var actionProps = {
             size: '2xs',
@@ -41,9 +38,12 @@ export var Alert = forwardRef(function (inProps, ref) {
         }
         return React.cloneElement(actionProp, actionProps);
     }, [actionProp]);
-    return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: color === 'light' ? 'main' : 'main-inverse' }, other, { className: cnAlert({ status: status, hasCloseButton: !!onClose, color: color }, [
-            className,
-        ]), ref: ref }),
+    return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: "main" }, (color === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), other, { className: cnAlert({
+            color: color,
+            status: status,
+            inverse: inverse,
+            hasCloseButton: !!onClose,
+        }, [className]), ref: ref }),
         showIcon && (React.createElement("div", { className: cnAlert('Icon') }, matchStatusToIcon[status])),
         React.createElement("div", { className: cnAlert('Content') },
             React.createElement("div", { className: cnAlert('Title') }, title),

package/__inner__/esm/components/Alert/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const ALERT_DEFAULT_STATUS = "info";
 export declare const ALERT_DEFAULT_SHOW_ICON = true;
-export declare const ALERT_DEFAULT_COLOR = "light";
+export declare const ALERT_DEFAULT_INVERSE = false;

package/__inner__/esm/components/Alert/constants.js

@@ -1,3 +1,3 @@
 export var ALERT_DEFAULT_STATUS = 'info';
 export var ALERT_DEFAULT_SHOW_ICON = true;
-export var ALERT_DEFAULT_COLOR = 'light';
+export var ALERT_DEFAULT_INVERSE = false;

package/__inner__/esm/components/Alert/index.d.ts

@@ -1 +1,2 @@
 export * from './Alert';
+export * from './types';

package/__inner__/esm/components/Alert/index.js

@@ -1 +1,2 @@
 export * from './Alert';
+export * from './types';

package/__inner__/esm/components/Alert/types.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { ButtonProps } from '../ButtonNext';
+export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
+export declare const alertColorVariant: readonly ["light", "dark"];
+export type AlertStatusVariant = (typeof alertStatusVariant)[number];
+export type AlertColorVariant = (typeof alertColorVariant)[number];
+type AlertPropsDeprecated = {
+    /**
+     * Цветовая палитра сообщения
+     * @deprecated Используйте на замену свойство «inverse»
+     * */
+    color?: AlertColorVariant;
+};
+type AlertBaseProps = {
+    /** Заголовок сообщения */
+    title: ReactNode;
+    /**
+     * Статус сообщения
+     * @default info
+     */
+    status?: AlertStatusVariant;
+    /** Если {true} инвертирует основные цвета компонента */
+    inverse?: boolean;
+    /**
+     * Если {true} отображает иконку со статусом
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Функция обратного вызова при нажатии на кнопку закрытия
+     */
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Основное содержимое элемента
+     * @default null
+     * */
+    children?: ReactNode;
+    /** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
+    action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Текст для кнопки закрытия компонента */
+    closeText?: string;
+};
+export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> & AlertPropsDeprecated;
+export {};

package/__inner__/esm/components/Alert/types.js

@@ -0,0 +1,7 @@
+export var alertStatusVariant = [
+    'success',
+    'error',
+    'warning',
+    'info',
+];
+export var alertColorVariant = ['light', 'dark'];

package/__inner__/esm/components/Autocomplete/Autocomplete.js

@@ -2,6 +2,7 @@ import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Autocomplete.css';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useControlled } from '../../hooks/useControlled';
+import { useMultiRef } from '../../hooks/useMultiRef';
 import { useMutableRef } from '../../hooks/useMutableRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
@@ -17,8 +18,10 @@ function AutocompleteRender(inProps, ref) {
         props: inProps,
         name: 'Autocomplete',
     });
-    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return React.createElement(Input, __assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, renderRight = _a.renderRight, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "renderRight", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
+    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return React.createElement(Input, __assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, renderRight = _a.renderRight, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "renderRight", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
     var anchorRef = useRef(null);
+    var lastInputValue = useRef('');
+    var inputBodyRef = useMultiRef([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
     var _o = __read(useControlled({
         value: inputValueProp,
         defaultValue: '',
@@ -51,47 +54,43 @@ function AutocompleteRender(inProps, ref) {
     var showNoOptions = !hasOptions && !loading;
     var showLoading = !hasOptions && !!loading;
     var _s = __read(useState(undefined), 2), search = _s[0], setSearch = _s[1];
-    /** Эффект – фильтрация списка */
+    var changeInputValue = function (e, value) {
+        var _a;
+        setInputValue(value);
+        (_a = savedOnInputChange.current) === null || _a === void 0 ? void 0 : _a.call(savedOnInputChange, e, value);
+    };
+    var callOnChange = function (e, value) {
+        var inputValue = value ? getOptionLabel(value) : '';
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+        changeInputValue(null, inputValue);
+    };
+    /** Эффект – фильтрация списка при изменении опций */
     useEffect(function () {
-        if (!open) {
+        if (!open)
             return;
-        }
         setFilteredOptions(search ? search(options) : __spreadArray([], __read(options), false));
     }, [search, options, open, searchFunctionProp]);
     /** Эффект – синхронизируем значение текстового поля со значением в списке */
     useEffect(function () {
-        var _a, _b;
-        var value = valueState ? (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, valueState) : '';
-        if (allowCustomValue) {
-            value = inputValue || '';
-        }
-        if (value !== inputValue) {
-            setInputValue(value);
-            (_b = savedOnInputChange.current) === null || _b === void 0 ? void 0 : _b.call(savedOnInputChange, null, value);
+        var _a;
+        if (allowCustomValue)
+            return;
+        lastInputValue.current = valueState
+            ? (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, valueState)
+            : '';
+        if (lastInputValue.current !== inputValue) {
+            changeInputValue(null, lastInputValue.current);
         }
-    }, [valueState]);
+    }, [valueState, allowCustomValue]);
     /** Эффект – автофокусировка в текстовом поле */
     useEffect(function () {
         var _a;
-        if (autoFocus) {
+        if (autoFocus)
             (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
     }, [autoFocus]);
-    /** Актуализация значения текстового поля после его покидания */
-    var onBlur = function (e) {
-        var _a;
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-        if (allowCustomValue) {
-            return;
-        }
-        var value = valueState ? getOptionLabel(valueState) : '';
-        if (inputValue !== value) {
-            setInputValue(value);
-            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, value);
-        }
-    };
-    /** Ждем выполнения анимации на закрытие и делаем сброс */
-    var onExited = function () {
+    /** Ждём выполнения анимации на закрытие и делаем сброс функции фильтрации */
+    var handleExited = function () {
         var _a;
         setSearch(undefined);
         (_a = dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.onExited) === null || _a === void 0 ? void 0 : _a.call(dataListProps);
@@ -110,21 +109,26 @@ function AutocompleteRender(inProps, ref) {
     var handleToggle = function () {
         if (disabled)
             return;
-        if (open) {
+        if (open)
             handleClose();
-        }
-        else {
+        else
             handleOpen();
-        }
     };
     /** Очистка поля */
-    var onClear = function (e) {
-        setValueState(null);
-        setInputValue('');
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, null);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, '');
+    var handleClear = function (e) {
+        callOnChange(e, null);
         setSearch(undefined);
     };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        if (allowCustomValue)
+            return;
+        if (inputValue !== lastInputValue.current) {
+            changeInputValue(null, lastInputValue.current);
+        }
+    };
     /** Открытие списка по клику на текстовом поле */
     var handleClickOnInput = function (e) {
         var _a;
@@ -132,49 +136,39 @@ function AutocompleteRender(inProps, ref) {
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
     };
     /** Управление элементом контроля через клавиатуру */
-    var handleKeyDown = function (event) {
-        if (isKeys(event, ['ArrowDown', 'ArrowUp']) && !open) {
-            event.preventDefault();
+    var handleKeyDown = function (e) {
+        if (isKeys(e, ['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 handleChangeInput = function (e) {
         var value = e.target.value;
         // Открываем список при вводе первого символа (при условии, что список еще не открыт)
-        if (value.length && !open) {
+        if (value.length && !open)
             handleOpen();
+        if (value) {
+            changeInputValue(e, value);
         }
-        // Делаем сброс при пустом значении в текстовом поле
-        if (!value) {
-            setValueState(null);
-            onChange === null || onChange === void 0 ? void 0 : onChange(e, null);
+        else {
+            callOnChange(e, null);
         }
-        // Назначаем значение
-        setInputValue(value);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
         // Задаем функцию фильтрации
         setSearch(function () { return function (options) { return searchFunction(__spreadArray([], __read(options), false), value); }; });
     };
     /** Событие выбора значения из раскрывающегося списка */
-    var handleChangeDataList = function (event, _a) {
+    var handleChangeDataList = function (e, _a) {
         var value = _a.value;
         var selectedOption = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.find(function (option) { return (getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option)) === value; });
-        if (selectedOption) {
-            var newInputValue = getOptionLabel(selectedOption);
-            setValueState(selectedOption);
-            onChange === null || onChange === void 0 ? void 0 : onChange(event, selectedOption);
-            setInputValue(newInputValue);
-            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, newInputValue);
-        }
+        callOnChange(e, selectedOption || null);
         // Закрываем список после выбора
-        if (!disableCloseOnSelect) {
+        if (!disableCloseOnSelect)
             handleClose();
-        }
     };
     /** Отображение текстового поля */
-    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: onClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: onBlur, onClick: handleClickOnInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
+    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: handleClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: inputBodyRef }), className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
             className,
         ]), ref: ref }));
     /** Отображение опций */
@@ -191,7 +185,7 @@ function AutocompleteRender(inProps, ref) {
     });
     return (React.createElement(React.Fragment, null,
         input,
-        React.createElement(DataList, __assign({ size: size, equalAnchorWidth: true, offset: [0, 4], placement: "bottom-start" }, dataListProps, { open: open, onExited: onExited, onClose: handleClose, anchorRef: anchorRef, selected: dataListValue, onSelect: handleChangeDataList, listProps: __assign({ role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps) }),
+        React.createElement(DataList, __assign({ size: size, equalAnchorWidth: true, offset: [0, 4], placement: "bottom-start" }, dataListProps, { open: open, onClose: handleClose, anchorRef: anchorRef, onExited: handleExited, selected: dataListValue, onSelect: handleChangeDataList, listProps: __assign({ role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps) }),
             renderOptions,
             !disableShowEmptyOptionsList && (React.createElement(AutocompleteNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText })),
             React.createElement(AutocompleteLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));