@ozen-ui/kit 0.57.0 → 0.58.1

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

@@ -4,6 +4,7 @@ import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphi
 import type { AccordionProps, AccordionSummaryProps } from '../Accordion';
 import type { AlertProps } from '../Alert';
 import type { AutocompleteProps } from '../Autocomplete';
+import type { AutocompleteProps as AutocompletePropsNext } from '../AutocompleteNext';
 import type { AvatarProps } from '../Avatar';
 import type { BackdropProps } from '../Backdrop';
 import type { BadgeProps } from '../Badge';
@@ -78,6 +79,7 @@ export type Theme = {
         AccordionSummary?: Partial<AccordionSummaryProps>;
         Alert?: Partial<AlertProps>;
         Autocomplete?: Partial<AutocompleteProps>;
+        AutocompleteNext?: Partial<AutocompletePropsNext>;
         Avatar?: Partial<AvatarProps>;
         Backdrop?: Partial<BackdropProps>;
         Badge?: Partial<BadgeProps>;

package/__inner__/cjs/hooks/useElementSize/index.d.ts

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

package/__inner__/cjs/hooks/useElementSize/index.js

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

package/__inner__/cjs/hooks/useElementSize/useElementSize.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions): {
+    ref: import("react").RefObject<T>;
+    width: number;
+    height: number;
+};

package/__inner__/cjs/hooks/useElementSize/useElementSize.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = void 0;
+var tslib_1 = require("tslib");
+var useResizeObserver_1 = require("../useResizeObserver");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useElementSize(options) {
+    var _a = tslib_1.__read((0, useResizeObserver_1.useResizeObserver)(options), 2), ref = _a[0], _b = _a[1], width = _b.width, height = _b.height;
+    return { ref: ref, width: width, height: height };
+}
+exports.useElementSize = useElementSize;

package/__inner__/cjs/hooks/useResizeObserver/index.d.ts

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

package/__inner__/cjs/hooks/useResizeObserver/index.js

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

package/__inner__/cjs/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
+export declare function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions): readonly [import("react").RefObject<T>, ObserverRect];
+export {};

package/__inner__/cjs/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeObserver = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var defaultState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useResizeObserver(options) {
+    var frameID = (0, react_1.useRef)(0);
+    var ref = (0, react_1.useRef)(null);
+    var _a = tslib_1.__read((0, react_1.useState)(defaultState), 2), rect = _a[0], setRect = _a[1];
+    var observer = (0, react_1.useMemo)(function () {
+        return typeof window !== 'undefined' && typeof ResizeObserver !== 'undefined'
+            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                new ResizeObserver(function (entries) {
+                    var entry = entries[0];
+                    if (entry) {
+                        cancelAnimationFrame(frameID.current);
+                        frameID.current = requestAnimationFrame(function () {
+                            if (ref.current) {
+                                setRect(entry.contentRect);
+                            }
+                        });
+                    }
+                })
+            : null;
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (ref.current) {
+            observer === null || observer === void 0 ? void 0 : observer.observe(ref.current, options);
+        }
+        return function () {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            if (frameID.current) {
+                cancelAnimationFrame(frameID.current);
+            }
+        };
+    }, [ref.current]);
+    return [ref, rect];
+}
+exports.useResizeObserver = useResizeObserver;

package/__inner__/cjs/locale/locale.js

@@ -14,6 +14,13 @@ exports.ruRU = {
             clearText: 'Очистить',
             loadingText: 'Загрузка…',
         },
+        AutocompleteNext: {
+            noOptionsText: 'Ничего не найдено',
+            closeText: 'Закрыть',
+            openText: 'Открыть',
+            clearText: 'Очистить',
+            loadingText: 'Загрузка…',
+        },
         Breadcrumbs: {
             'aria-label': 'Навигация',
         },
@@ -87,6 +94,13 @@ exports.kkKZ = {
             clearText: 'Тазалау',
             loadingText: 'Жүктеу…',
         },
+        AutocompleteNext: {
+            noOptionsText: 'Ештеңе табылған жоқ',
+            closeText: 'Жабу',
+            openText: 'Ашу',
+            clearText: 'Тазалау',
+            loadingText: 'Жүктеу…',
+        },
         Breadcrumbs: {
             'aria-label': 'Навигация',
         },
@@ -160,6 +174,13 @@ exports.enUS = {
             clearText: 'Clear',
             loadingText: 'Loading…',
         },
+        AutocompleteNext: {
+            noOptionsText: 'No options',
+            closeText: 'Close',
+            openText: 'Open',
+            clearText: 'Clear',
+            loadingText: 'Loading…',
+        },
         Breadcrumbs: {
             'aria-label': 'Navigation',
         },

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

@@ -0,0 +1 @@
+export declare const isNotNil: <T>(p: T) => p is Exclude<T, null | undefined>;

package/__inner__/cjs/utils/isNotNil.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNotNil = void 0;
+var isNotNil = function (p) {
+    return p !== undefined && p !== null;
+};
+exports.isNotNil = isNotNil;

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

@@ -1,4 +1,7 @@
 import './Autocomplete.css';
 import type { AutocompleteComponent } from './types';
 export declare const cnAutocomplete: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент AutocompleteNext
+ */
 export declare const Autocomplete: AutocompleteComponent;

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

@@ -1,6 +1,7 @@
 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 { useMultiRef } from '../../hooks/useMultiRef';
 import { useMutableRef } from '../../hooks/useMutableRef';
@@ -19,6 +20,9 @@ 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».');
+    }
     var anchorRef = useRef(null);
     var lastInputValue = useRef('');
     var inputBodyRef = useMultiRef([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
@@ -190,4 +194,7 @@ function AutocompleteRender(inProps, ref) {
             !disableShowEmptyOptionsList && (React.createElement(AutocompleteNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText })),
             React.createElement(AutocompleteLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));
 }
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент AutocompleteNext
+ */
 export var Autocomplete = forwardRef(AutocompleteRender);

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

@@ -46,11 +46,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
-    inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        'data-testid'?: string | undefined;
-    }) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
     }) | undefined;
@@ -117,11 +113,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
-    inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        'data-testid'?: string | undefined;
-    }) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
     }) | undefined;

package/__inner__/esm/components/AutocompleteNext/Autocomplete.css

@@ -0,0 +1,226 @@
+.AutocompleteNext {
+  --autocomplete-gutter-x: 0 var(--textfield-gutter-x);
+}
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_2xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_s {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-s);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_m {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-m);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_l {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-l);
+    }
+
+  .AutocompleteNext-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
+  }
+
+  .AutocompleteNext-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .AutocompleteNext-ClearButton_visibility {
+      visibility: visible;
+    }
+
+  .AutocompleteNext .Input-Body {
+    padding: var(--autocomplete-gutter-x);
+    align-items: flex-start;
+  }
+
+  .AutocompleteNext .FieldIcon {
+    block-size: var(--textfield-input-height);
+  }
+
+  .AutocompleteNext-Option {
+    cursor: pointer;
+    transition: background-color var(--transition-default);
+  }
+
+  .AutocompleteNext-Option:hover {
+      background-color: var(--color-background-main-hover);
+    }
+
+  .AutocompleteNext-Option:active {
+      background-color: var(--color-background-main-pressed);
+    }
+
+  .AutocompleteNext-Option_focused {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+
+  .AutocompleteNext-Option_disabled,
+    .AutocompleteNext-Option_disabled:hover,
+    .AutocompleteNext-Option_disabled:active {
+      cursor: not-allowed;
+      background-color: unset;
+    }
+
+  .AutocompleteNext-Option_disabled .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled .ListItemText-TextSecondary,
+      .AutocompleteNext-Option_disabled:hover .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled:hover .ListItemText-TextSecondary,
+      .AutocompleteNext-Option_disabled:active .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled:active .ListItemText-TextSecondary {
+        color: var(--color-content-tertiary);
+      }
+
+  .AutocompleteNext-Input_multiple {
+      display: flex;
+      flex-wrap: wrap;
+      overflow: hidden;
+      inline-size: 100%;
+      align-items: center;
+      box-sizing: border-box;
+      padding: var(--textfield-input-padding);
+      min-block-size: var(--textfield-input-height);
+      gap: var(--spacing-3xs);
+    }
+
+  .AutocompleteNext-Input_multiple input {
+        padding: 0;
+        border: none;
+        outline: none;
+        font: inherit;
+        background: none;
+        box-sizing: border-box;
+        color: var(--textfield-color);
+      }
+
+  .AutocompleteNext-Input_multiple input::placeholder {
+          opacity: 0;
+        }
+
+  .AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder {
+          opacity: 1;
+        }
+
+  .AutocompleteNext-Input_responsive {
+      flex-wrap: nowrap;
+      gap: unset;
+    }
+
+  .AutocompleteNext-Input_responsive .AutocompleteNext-Tag {
+        margin-inline-end: var(--spacing-3xs);
+      }
+
+  .AutocompleteNext-HelperInput {
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    position: absolute;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  .AutocompleteNext-Tag_hidden {
+      inset-block-start: 0;
+      block-size: 0;
+      visibility: hidden;
+      position: absolute;
+    }
+
+  .AutocompleteNext-Tag_disabled {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+  .AutocompleteNext-ClearTag {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    block-size: inherit;
+  }
+
+  .AutocompleteNext-Dropdown {
+    --scroll-bar-size: 12px;
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover,
+    .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .AutocompleteNext-Dropdown {
+    overflow: hidden auto;
+    max-block-size: 40vb;
+}
+.AutocompleteNext-Dropdown-animation-enter {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-enter-active {
+    opacity: 1;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.AutocompleteNext-Dropdown-animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-exit-active {
+    opacity: 0;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }

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

@@ -0,0 +1,4 @@
+import './Autocomplete.css';
+import type { AutocompleteComponent } from './types';
+export declare const cnAutocomplete: import("@bem-react/classname").ClassNameFormatter;
+export declare const Autocomplete: AutocompleteComponent;