@ozen-ui/kit 0.68.0 → 0.70.0

package/__inner__/cjs/types/Breakpoints.d.ts

@@ -1,2 +1,25 @@
+import type { ThemeBreakpointTokenVariable } from '../components/OzenProvider';
+import type { ObjectPropertiesWithPrefix } from './object';
+/**
+ * @deprecated Используйте значение из темы
+ */
 export declare const breakpointVariant: readonly ["xs", "s", "m", "l"];
+/**
+ * @deprecated Используйте {@link ThemeBreakpointTokenVariable}
+ */
 export type BreakpointVariant = (typeof breakpointVariant)[number];
+export declare const BREAKPOINT_PREFIX: {
+    readonly IS: "is";
+    readonly IS_A_LARGER_THAN: "isALargerThan";
+    readonly IS_A_LARGER_THAN_OR_IS: "isALargerThanOrIs";
+    readonly IS_A_SMALLER_THAN: "isASmallerThan";
+    readonly IS_A_SMALLER_THAN_OR_IS: "isASmallerThanOrIs";
+};
+export type BreakpointPrefix = (typeof BREAKPOINT_PREFIX)[keyof typeof BREAKPOINT_PREFIX];
+export type IsBreakpoint = ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS, boolean>;
+export type IsALargerBreakpoint = ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_LARGER_THAN, boolean> & ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_LARGER_THAN_OR_IS, boolean>;
+export type IsASmallerBreakpoint = ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_SMALLER_THAN, boolean> & ObjectPropertiesWithPrefix<Capitalize<ThemeBreakpointTokenVariable>, typeof BREAKPOINT_PREFIX.IS_A_SMALLER_THAN_OR_IS, boolean>;
+export type CurrentBreakpoint = {
+    currentBreakpoint: ThemeBreakpointTokenVariable;
+};
+export type BreakpointMatches = IsBreakpoint & IsALargerBreakpoint & IsASmallerBreakpoint & CurrentBreakpoint;

package/__inner__/cjs/types/Breakpoints.js

@@ -1,4 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.breakpointVariant = void 0;
+exports.BREAKPOINT_PREFIX = exports.breakpointVariant = void 0;
+/**
+ * @deprecated Используйте значение из темы
+ */
 exports.breakpointVariant = ['xs', 's', 'm', 'l'];
+exports.BREAKPOINT_PREFIX = {
+    IS: 'is',
+    IS_A_LARGER_THAN: 'isALargerThan',
+    IS_A_LARGER_THAN_OR_IS: 'isALargerThanOrIs',
+    IS_A_SMALLER_THAN: 'isASmallerThan',
+    IS_A_SMALLER_THAN_OR_IS: 'isASmallerThanOrIs',
+};

package/__inner__/cjs/types/object/index.d.ts

@@ -1 +1,2 @@
+export * from './objectPropertiesWithPrefix';
 export * from './withPartial';

package/__inner__/cjs/types/object/index.js

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

package/__inner__/cjs/types/object/objectPropertiesWithPrefix.d.ts

@@ -0,0 +1,3 @@
+export type ObjectPropertiesWithPrefix<ObjectKeys extends string, Prefix extends string, Value> = {
+    [key in `${Prefix}${ObjectKeys}`]: Value;
+};

package/__inner__/cjs/types/object/objectPropertiesWithPrefix.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/types/react/WithDisplayName.d.ts

@@ -0,0 +1,3 @@
+export type WithDisplayName<Value> = Value & {
+    displayName?: string;
+};

package/__inner__/cjs/types/react/WithDisplayName.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/types/react/index.d.ts

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

package/__inner__/cjs/types/react/index.js

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

package/__inner__/cjs/utils/breakpoint/calculateIsBreakpoints.d.ts

@@ -0,0 +1,4 @@
+import type { ThemeBreakpointToken, ThemeBreakpointTokenProperties } from '../../components/OzenProvider';
+import type { BreakpointMatches } from '../../types/Breakpoints';
+export declare const getBreakpointsAscending: (breakpointToken: ThemeBreakpointToken) => (keyof ThemeBreakpointTokenProperties)[];
+export declare const calculateBreakpoints: (breakpointToken: ThemeBreakpointToken, windowWidth: number) => BreakpointMatches;

package/__inner__/cjs/utils/breakpoint/calculateIsBreakpoints.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateBreakpoints = exports.getBreakpointsAscending = void 0;
+var tslib_1 = require("tslib");
+var Breakpoints_1 = require("../../types/Breakpoints");
+var capitalizeFirstLetter_1 = require("../capitalizeFirstLetter");
+var memoizedBreakpointsMatches = {};
+var generateIsBreakpointKey = function (prefix, breakpoint) {
+    return "".concat(prefix).concat((0, capitalizeFirstLetter_1.capitalizeFirstLetter)(breakpoint));
+};
+var checkIsCurrentBreakpoint = function (isBreakpoint, breakpoint) { return isBreakpoint[generateIsBreakpointKey(Breakpoints_1.BREAKPOINT_PREFIX.IS, breakpoint)]; };
+var checkHasALargerThan = function (breakpointsAscending, isBreakpoint, breakpoint) {
+    var breakpointIndex = breakpointsAscending.indexOf(breakpoint);
+    var largerBreakpoints = breakpointsAscending.slice(breakpointIndex + 1, breakpointsAscending.length);
+    var hasLargerBreakpointThanThis = largerBreakpoints.some(function (breakpoint) {
+        return checkIsCurrentBreakpoint(isBreakpoint, breakpoint);
+    });
+    return hasLargerBreakpointThanThis;
+};
+var checkHasASmallerThan = function (breakpointsAscending, isBreakpoint, breakpoint) {
+    var breakpointIndex = breakpointsAscending.indexOf(breakpoint);
+    var smallerBreakpoints = breakpointsAscending.slice(0, breakpointIndex);
+    var hasSmallerBreakpointThanThis = smallerBreakpoints.some(function (breakpoint) {
+        return checkIsCurrentBreakpoint(isBreakpoint, breakpoint);
+    });
+    return hasSmallerBreakpointThanThis;
+};
+var checkIsBreakpoint = function (minWidthByBreakpoint, breakpointsAscending, windowWidth, breakpoint) {
+    var breakpointIndex = breakpointsAscending.indexOf(breakpoint);
+    var previousBreakpoint = minWidthByBreakpoint[breakpointsAscending[breakpointIndex - 1]];
+    var currentBreakpoint = minWidthByBreakpoint[breakpoint];
+    var nextBreakpoint = minWidthByBreakpoint[breakpointsAscending[breakpointIndex + 1]];
+    var isTheSmallestBreakpoint = breakpointIndex === 0;
+    if (isTheSmallestBreakpoint) {
+        return windowWidth < nextBreakpoint;
+    }
+    var isTheLargestBreakpoint = breakpointIndex === breakpointsAscending.length - 1;
+    if (isTheLargestBreakpoint) {
+        return windowWidth >= currentBreakpoint && windowWidth > previousBreakpoint;
+    }
+    return (windowWidth >= minWidthByBreakpoint[breakpoint] &&
+        windowWidth < nextBreakpoint);
+};
+var getBreakpointsAscending = function (breakpointToken) {
+    return Object.entries(breakpointToken.properties)
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .sort(function (_c, _d) {
+        var _e = tslib_1.__read(_c, 2), _a = _e[0], breakpointA = _e[1];
+        var _f = tslib_1.__read(_d, 2), _b = _f[0], breakpointB = _f[1];
+        return breakpointA - breakpointB;
+    })
+        .map(function (_c) {
+        var _d = tslib_1.__read(_c, 1), deviceSize = _d[0];
+        return deviceSize;
+    });
+};
+exports.getBreakpointsAscending = getBreakpointsAscending;
+var calculateBreakpoints = function (breakpointToken, windowWidth) {
+    var e_1, _c;
+    var matches = {};
+    var breakpointsAscending = (0, exports.getBreakpointsAscending)(breakpointToken);
+    try {
+        for (var breakpointsAscending_1 = tslib_1.__values(breakpointsAscending), breakpointsAscending_1_1 = breakpointsAscending_1.next(); !breakpointsAscending_1_1.done; breakpointsAscending_1_1 = breakpointsAscending_1.next()) {
+            var breakpoint = breakpointsAscending_1_1.value;
+            var isThisBreakpoint = checkIsBreakpoint(breakpointToken.properties, breakpointsAscending, windowWidth, breakpoint);
+            matches[generateIsBreakpointKey(Breakpoints_1.BREAKPOINT_PREFIX.IS, breakpoint)] =
+                isThisBreakpoint;
+            if (isThisBreakpoint) {
+                var memoizedValue = memoizedBreakpointsMatches[breakpoint];
+                if (memoizedValue) {
+                    return memoizedValue;
+                }
+                matches.currentBreakpoint = breakpoint;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (breakpointsAscending_1_1 && !breakpointsAscending_1_1.done && (_c = breakpointsAscending_1.return)) _c.call(breakpointsAscending_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    breakpointsAscending.forEach(function (breakpoint) {
+        var isCurrentBreakpoint = checkIsCurrentBreakpoint(matches, breakpoint);
+        var hasALargerThan = checkHasALargerThan(breakpointsAscending, matches, breakpoint);
+        var hasASmallerThan = checkHasASmallerThan(breakpointsAscending, matches, breakpoint);
+        matches[generateIsBreakpointKey(Breakpoints_1.BREAKPOINT_PREFIX.IS_A_LARGER_THAN, breakpoint)] = hasALargerThan;
+        matches[generateIsBreakpointKey(Breakpoints_1.BREAKPOINT_PREFIX.IS_A_SMALLER_THAN, breakpoint)] = hasASmallerThan;
+        matches[generateIsBreakpointKey(Breakpoints_1.BREAKPOINT_PREFIX.IS_A_LARGER_THAN_OR_IS, breakpoint)] = hasALargerThan || isCurrentBreakpoint;
+        matches[generateIsBreakpointKey(Breakpoints_1.BREAKPOINT_PREFIX.IS_A_SMALLER_THAN_OR_IS, breakpoint)] = hasASmallerThan || isCurrentBreakpoint;
+    });
+    memoizedBreakpointsMatches[matches.currentBreakpoint] = matches;
+    return matches;
+};
+exports.calculateBreakpoints = calculateBreakpoints;

package/__inner__/cjs/utils/breakpoint/index.d.ts

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

package/__inner__/cjs/utils/breakpoint/index.js

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

package/__inner__/cjs/utils/getScrollBarSize/getScrollbarSize.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScrollbarSize = void 0;
+var environment_1 = require("../../constants/environment");
 var getScrollbarSize = function (el) {
+    if (environment_1.isServer) {
+        return 0;
+    }
     if (!el || el === document.body) {
         return window.innerWidth - document.documentElement.clientWidth;
     }

package/__inner__/cjs/utils/react/index.d.ts

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

package/__inner__/cjs/utils/react/index.js

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

package/__inner__/cjs/utils/react/isRef.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const isRef: (value: unknown) => value is RefObject<unknown>;

package/__inner__/cjs/utils/react/isRef.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRef = void 0;
+var object_1 = require("../object");
+var isRef = function (value) {
+    return (0, object_1.isPlainObject)(value) && Object.keys(value).length === 1 && 'current' in value;
+};
+exports.isRef = isRef;

package/__inner__/cjs/utils/shallowEqual/index.d.ts

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

package/__inner__/cjs/utils/shallowEqual/index.js

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

package/__inner__/cjs/utils/shallowEqual/shallowEqual.d.ts

@@ -0,0 +1 @@
+export declare const shallowEqual: (a: unknown, b: unknown) => boolean;

package/__inner__/cjs/utils/shallowEqual/shallowEqual.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shallowEqual = void 0;
+var array_1 = require("../array");
+var shallowEqualArrays = function (arrayA, arrayB) {
+    if (arrayA === arrayB) {
+        return true;
+    }
+    if (!arrayA || !arrayB) {
+        return false;
+    }
+    var length = arrayA.length;
+    if (arrayB.length !== length) {
+        return false;
+    }
+    for (var i = 0; i < length; i++) {
+        if (arrayA[i] !== arrayB[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+var shallowEqualObjects = function (objectA, objectB) {
+    if (objectA === objectB) {
+        return true;
+    }
+    if (!objectA || !objectB) {
+        return false;
+    }
+    var aKeys = Object.keys(objectA);
+    var bKeys = Object.keys(objectB);
+    var len = aKeys.length;
+    if (bKeys.length !== len) {
+        return false;
+    }
+    for (var i = 0; i < len; i++) {
+        var key = aKeys[i];
+        if (objectA[key] !== objectB[key] ||
+            !Object.prototype.hasOwnProperty.call(objectB, key)) {
+            return false;
+        }
+    }
+    return true;
+};
+var shallowEqual = function (a, b) {
+    var aIsArray = (0, array_1.isArray)(a);
+    var bIsArray = (0, array_1.isArray)(b);
+    if (aIsArray !== bIsArray) {
+        return false;
+    }
+    if (aIsArray && bIsArray) {
+        return shallowEqualArrays(a, b);
+    }
+    return shallowEqualObjects(a, b);
+};
+exports.shallowEqual = shallowEqual;

package/__inner__/cjs/utils/string/index.d.ts

@@ -0,0 +1,4 @@
+export * from './toCamelCase';
+export * from './toKebabCase';
+export * from './toPascalCase';
+export * from './toSnakeCase';

package/__inner__/cjs/utils/string/index.js

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

package/__inner__/cjs/utils/string/toCamelCase.d.ts

@@ -0,0 +1 @@
+export declare const toCamelCase: (value: string) => string;

package/__inner__/cjs/utils/string/toCamelCase.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCamelCase = void 0;
+var toCamelCase = function (value) {
+    return value
+        .replace(/[-_]+(.)?/g, function (_, chr) { return (chr ? chr.toUpperCase() : ''); })
+        .replace(/^\w/, function (chr) { return chr.toLowerCase(); });
+};
+exports.toCamelCase = toCamelCase;

package/__inner__/cjs/utils/string/toKebabCase.d.ts

@@ -0,0 +1 @@
+export declare const toKebabCase: (value: string) => string;

package/__inner__/cjs/utils/string/toKebabCase.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toKebabCase = void 0;
+var toKebabCase = function (value) {
+    return value
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/\s+/g, '-')
+        .replace(/_/g, '-')
+        .toLowerCase();
+};
+exports.toKebabCase = toKebabCase;

package/__inner__/cjs/utils/string/toPascalCase.d.ts

@@ -0,0 +1 @@
+export declare const toPascalCase: (value: string) => string;

package/__inner__/cjs/utils/string/toPascalCase.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPascalCase = void 0;
+var toPascalCase = function (value) {
+    return value
+        .replace(/[-_]+(.)?/g, function (_, chr) { return (chr ? chr.toUpperCase() : ''); })
+        .replace(/^\w/, function (chr) { return chr.toUpperCase(); });
+};
+exports.toPascalCase = toPascalCase;

package/__inner__/cjs/utils/string/toSnakeCase.d.ts

@@ -0,0 +1 @@
+export declare const toSnakeCase: (value: string) => string;

package/__inner__/cjs/utils/string/toSnakeCase.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toSnakeCase = void 0;
+var toSnakeCase = function (value) {
+    return value
+        .replace(/([a-z0-9])([A-Z])/g, '$1_$2') // Разделяем camelCase -> camel_Case
+        .replace(/\W+/g, '_') // Заменяем пробелы и символы на _
+        .replace(/^_|_$/g, '') // Удаляем _ в начале/конце
+        .toLowerCase();
+};
+exports.toSnakeCase = toSnakeCase;

package/__inner__/cjs/utils/test-utils.d.ts

@@ -3,5 +3,6 @@ import { type RenderResult, type RenderOptions } from '@testing-library/react';
 export type RenderFn = (component: ReactElement, options?: RenderOptions) => RenderResult;
 export type MatchesFn = (component: ReactElement, options?: RenderOptions) => ChildNode | HTMLCollection | null;
 export declare const render: RenderFn;
+export declare const renderInAct: (ui: ReactElement, options?: RenderOptions) => Promise<RenderResult>;
 declare const matches: MatchesFn;
 export default matches;

package/__inner__/cjs/utils/test-utils.js

@@ -1,18 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.render = void 0;
+exports.renderInAct = exports.render = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var react_2 = require("@testing-library/react");
-var ThemeProvider_1 = require("../components/ThemeProvider");
+var OzenProvider_1 = require("../components/OzenProvider");
 var WithProviders = function (_a) {
     var children = _a.children;
-    return (react_1.default.createElement(ThemeProvider_1.ThemeProvider, { theme: ThemeProvider_1.themeOzenDefault }, children));
+    return (react_1.default.createElement(OzenProvider_1.OzenProvider, { ssr: { isEnabled: false }, theme: OzenProvider_1.themeOzenDefault }, children));
 };
 var render = function (component, options) {
     return (0, react_2.render)(component, tslib_1.__assign({ wrapper: WithProviders }, options));
 };
 exports.render = render;
+var renderInAct = function (ui, options) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var component;
+    return tslib_1.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, (0, react_2.act)(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    return tslib_1.__generator(this, function (_a) {
+                        component = (0, exports.render)(ui, options);
+                        return [2 /*return*/];
+                    });
+                }); })];
+            case 1:
+                _a.sent();
+                return [2 /*return*/, component];
+        }
+    });
+}); };
+exports.renderInAct = renderInAct;
 var matches = function () {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {

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

@@ -2,7 +2,7 @@ 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 { useDeprecatedProperty } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButtonNext';
@@ -22,9 +22,7 @@ export var Alert = forwardRef(function (inProps, ref) {
         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.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».');
-    }
+    useDeprecatedProperty(!!color, 'color', 'inverse');
     var action = useMemo(function () {
         var actionProps = {
             size: '2xs',

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

@@ -1,8 +1,8 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Autocomplete.css';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import { deprecate } from '@ozen-ui/logger';
 import { useControlled } from '../../hooks/useControlled';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useMutableRef } from '../../hooks/useMutableRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
@@ -20,9 +20,7 @@ function AutocompleteRender(inProps, ref) {
         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, 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"]);
-    if (process.env.NODE_ENV !== 'production') {
-        deprecate('Компонент «Autocomplete» устарел. Для замены используйте компонент «AutocompleteNext».');
-    }
+    useDeprecatedComponent('Autocomplete');
     var anchorRef = useRef(null);
     var lastInputValue = useRef('');
     var inputBodyRef = useMultiRef([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
@@ -198,3 +196,4 @@ function AutocompleteRender(inProps, ref) {
  * @deprecated Компонент устарел. Для замены используйте компонент AutocompleteNext
  */
 export var Autocomplete = forwardRef(AutocompleteRender);
+Autocomplete.displayName = 'Autocomplete';

package/__inner__/esm/components/Autocomplete/helper.d.ts

@@ -31,21 +31,21 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
     disableShowEmptyOptionsList?: boolean;
     disableShowChevron?: boolean;
-    dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">>;
+    dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "multiple" | "onClose" | "selected" | "anchorRef">>;
     ref?: import("react").Ref<HTMLDivElement>;
 } & {
     error?: boolean | undefined;
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
+    autoFocus?: boolean | undefined;
     className?: string | undefined;
     onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     required?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    disableStroke?: boolean | undefined;
     hint?: string | null | undefined;
+    disableStroke?: boolean | undefined;
     renderLeft?: import("../FieldIcon").FieldIconProps["icon"];
     renderRight?: import("../FieldIcon").FieldIconProps["icon"];
     inputProps?: import("../FieldInput").FieldInputProps | undefined;

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

@@ -1,5 +1,6 @@
 import type { ChangeEvent, ReactElement, ReactNode, Ref, SyntheticEvent } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { WithDisplayName } from '../../types/react';
 import type { DataListProps } from '../DataList';
 import type { InputProps } from '../Input';
 export type AutocompleteRenderOptionProps<OPTION> = {
@@ -94,5 +95,5 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
 } ? object : {
     getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
 });
-export type AutocompleteComponent = <OPTION = AutocompleteDefaultOption>(props: AutocompleteProps<OPTION>) => ReactElement | null;
+export type AutocompleteComponent = WithDisplayName<(<OPTION = AutocompleteDefaultOption>(props: AutocompleteProps<OPTION>) => ReactElement | null)>;
 export {};

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

@@ -0,0 +1,6 @@
+import './modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.css';
+import './modules/AutocompleteBaseInput/AutocompleteBaseInput.css';
+import './modules/AutocompleteBaseInputTag/AutocompleteBaseInputTag.css';
+import React from 'react';
+import type { AutocompleteBaseProps } from './types';
+export declare const AutocompleteBase: <Option, Multiple extends boolean = false>(inProps: AutocompleteBaseProps<Option, Multiple>) => React.JSX.Element;

package/__inner__/esm/components/AutocompleteBase/AutocompleteBase.js

@@ -0,0 +1,95 @@
+import { __assign } from "tslib";
+import './modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.css';
+import './modules/AutocompleteBaseInput/AutocompleteBaseInput.css';
+import './modules/AutocompleteBaseInputTag/AutocompleteBaseInputTag.css';
+import React, { useRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { renderContent } from '../../utils/renderContent';
+import { AutocompleteBaseContext } from './AutocompleteBaseContext';
+import { AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT, AUTOCOMPLETE_BASE_DEFAULT_DISABLED, AUTOCOMPLETE_BASE_DEFAULT_ERROR, AUTOCOMPLETE_BASE_DEFAULT_LOADING, AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE, AUTOCOMPLETE_BASE_DEFAULT_SIZE, } from './constants';
+import { useAutocompleteBaseDropdown, useAutocompleteBaseSearch, useAutocompleteBaseInput, useAutocompleteBaseInputEvents, useAutocompleteBaseOptions, useAutocompleteBaseValue, } from './hooks';
+import { autocompleteBaseDefaultPrepareOption } from './utils';
+export var AutocompleteBase = function (inProps) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'AutocompleteBase',
+    });
+    var renderDropdown = props.renderDropdown, renderInput = props.renderInput, inputValueProp = props.inputValue, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange;
+    var anchorRef = useRef(null);
+    var inputRef = useRef(null);
+    var dropdownControl = useAutocompleteBaseDropdown({
+        open: openProp,
+        defaultOpen: defaultOpen,
+        onOpen: onOpen,
+        onClose: onClose,
+    });
+    var searchControl = useAutocompleteBaseSearch(searchFunctionProp);
+    var prepareOption = function (option) { return (__assign(__assign({}, prepareOptionProp(option)), { raw: option })); };
+    var inputControl = useAutocompleteBaseInput({
+        inputValue: inputValueProp,
+        onChange: function (event, value) {
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, value);
+        },
+    });
+    var valueControl = useAutocompleteBaseValue({
+        value: valueProp,
+        defaultValue: defaultValue,
+        onChange: function (event, value, params) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, value, params);
+            if (params.source === 'select' && closeOnSelect) {
+                dropdownControl.close();
+            }
+        },
+        prepareOption: prepareOption,
+        inProps: inProps,
+        inputControl: inputControl,
+        searchControl: searchControl,
+        multiple: multiple,
+    });
+    var optionsControl = useAutocompleteBaseOptions({
+        options: optionsProp,
+        prepare: prepareOption,
+        valueControl: valueControl,
+        searchControl: searchControl,
+        multiple: multiple,
+    });
+    var inputEventsControl = useAutocompleteBaseInputEvents({
+        multiple: multiple,
+        inputControl: inputControl,
+        valueControl: valueControl,
+        dropdownControl: dropdownControl,
+        allowCustomValue: allowCustomValue,
+        searchControl: searchControl,
+    });
+    var clear = function (event) {
+        valueControl.setValue(event, null, {
+            source: 'unknown',
+        });
+        inputControl.setValue(null, '');
+    };
+    var contextValue = {
+        anchorRef: anchorRef,
+        inputRef: inputRef,
+        dropdownControl: dropdownControl,
+        searchControl: searchControl,
+        optionsControl: optionsControl,
+        inputControl: inputControl,
+        inputEventsControl: inputEventsControl,
+        valueControl: valueControl,
+        clear: clear,
+        size: size,
+        disabled: disabled,
+        multiple: multiple,
+        loading: loading,
+        error: error,
+    };
+    return (React.createElement(AutocompleteBaseContext.Provider, { value: contextValue },
+        renderContent({
+            content: renderInput,
+            props: {},
+        }),
+        renderContent({
+            content: renderDropdown,
+            props: {},
+        })));
+};