@ozen-ui/kit 0.33.0 → 0.34.1

package/__inner__/esm/components/DataList/DataList.js

@@ -1,8 +1,7 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './DataList.css';
-import React, { useMemo, Children, isValidElement, cloneElement, useRef, useEffect, useState, } from 'react';
+import React, { useMemo, Children, isValidElement, cloneElement, useRef, useEffect, } from 'react';
 import { isFragment } from 'react-is';
-import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useMultiRef } from '../../hooks/useMultiRef';
@@ -10,24 +9,23 @@ import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { scrollContainerToElement } from '../../utils/scrollContainerToElement';
 import { List } from '../List';
 import { Popover } from '../Popover';
 import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN, DATA_LIST_DEFAULT_TAG, } from './constants';
-import { lastSelectedValue, isMultipleParams, isNotMultipleParams, useDataListNavigation, useScrollContainerToElement, } from './helpers';
+import { lastSelectedValue, isMultipleParams, isNotMultipleParams, useDataListNavigation, } from './helpers';
 import { DataListOption } from './index';
 export var cnDataList = cn('DataList');
 var DataListRender = function (inProps, ref) {
-    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps", "className"]);
+    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
     var dataListRef = useRef(null);
     var listRef = useRef(null);
-    // Состояние представленного компонента с завершенной анимацией
-    var _e = __read(useBoolean(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
-    var _g = __read(useControlled({
+    var _e = __read(useControlled({
         name: 'DataList',
         defaultValue: defaultSelected,
         value: selectedProp,
         state: 'selected',
-    }), 2), selectedState = _g[0], setSelected = _g[1];
+    }), 2), selectedState = _e[0], setSelected = _e[1];
     var nodes = useMemo(function () { return new Map(); }, [children]);
     var items = useMemo(function () { return new Array(); }, [children]);
     var resolvedChildren = isFragment(children)
@@ -67,29 +65,34 @@ var DataListRender = function (inProps, ref) {
             setSelected_2(value);
         }
     };
+    var handleOnMouseDownList = function (e) {
+        var _a;
+        e.preventDefault();
+        (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
+    };
     // Навигация по списку
-    var _h = useDataListNavigation({
-        active: opened,
+    var _f = useDataListNavigation({
+        active: open,
         items: items,
         selected: lastSelectedValue(selectedState),
         onSelect: function (event, item) {
             handleSelect(event, item || '');
         },
-    }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
-    var _j = __read(useState({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
+    }), current = _f.current, focused = _f.focused, onKeyDown = _f.onKeyDown, onClick = _f.onClick;
     useEffect(function () {
         var _a, _b;
         var selected = focused || current || '';
         // Находит элемент по ключу
         var idx = nodes.get(selected);
         if (idx !== undefined) {
-            setSelectedElRef({
-                current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+            // Прокрутка списка
+            scrollContainerToElement({
+                container: dataListRef.current,
+                element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+                behavior: focused ? 'smooth' : 'instant',
             });
         }
     }, [focused, current]);
-    // Прокрутка списка
-    useScrollContainerToElement(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
     // Назначает элементу контроля событие управления списком с клавиатуры
     useEventListener({
         eventName: 'keydown',
@@ -133,17 +136,7 @@ var DataListRender = function (inProps, ref) {
     }, [resolvedChildren, selectedState, focused, onClick]);
     return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
             classNames: 'DataList-animation',
-        } }, other, { onEntered: function () {
-            onEntered();
-            onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
-        }, onExited: function () {
-            onExited();
-            onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
-        }, ref: useMultiRef([ref, dataListRef]) }),
-        React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: function (e) {
-                var _a;
-                e.preventDefault();
-                (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
-            }, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
+        } }, other, { ref: useMultiRef([ref, dataListRef]) }),
+        React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
 };
 export var DataList = polymorphicComponentWithRef(DataListRender);

package/__inner__/esm/components/DataList/helpers/useDataListNavigation.js

@@ -1,5 +1,6 @@
 import { __assign, __read } from "tslib";
-import { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
+import { useMutableRef } from '../../../hooks/useMutableRef';
 import { getNextIndex } from '../../../utils/getNextIndex';
 import { getPrevIndex } from '../../../utils/getPrevIndex';
 import { isKey } from '../../../utils/isKey';
@@ -7,19 +8,10 @@ import { isKeys } from '../../../utils/isKeys';
 /** Навигация по элементам списка без перехвата фокуса с элемента контроля */
 export function useDataListNavigation(_a) {
     var selected = _a.selected, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
-    var savedItems = useRef(itemsProps);
-    var savedSelected = useRef();
-    var savedOnSelect = useRef();
+    var savedItems = useMutableRef(itemsProps);
+    var savedSelected = useMutableRef(selected);
+    var savedOnSelect = useMutableRef(onSelect);
     var _c = __read(useState({}), 2), state = _c[0], setState = _c[1];
-    useEffect(function () {
-        savedItems.current = itemsProps;
-    }, [itemsProps]);
-    useEffect(function () {
-        savedOnSelect.current = onSelect;
-    }, [onSelect]);
-    useEffect(function () {
-        savedSelected.current = selected;
-    }, [selected]);
     var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
     useEffect(function () {
         if (!active) {

package/__inner__/esm/components/List/List.css

@@ -82,3 +82,8 @@
       --list-pipka-height: 48px;
       --list-pipka-width: 4px;
     }
+
+  .List_disablePadding,
+  .List:empty {
+    --list-gutter: 0;
+  }

package/__inner__/esm/components/List/List.js

@@ -4,13 +4,13 @@ import React from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
-import { LIST_DEFAULT_SIZE, LIST_DEFAULT_TAG } from './constants';
+import { LIST_DEFAULT_SIZE, LIST_DEFAULT_TAG, LIST_DEFAULT_DISABLE_PADDING, } from './constants';
 import { ListContext } from './ListContext';
 export var cnList = cn('List');
 export var List = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'List' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? LIST_DEFAULT_SIZE : _b, children = props.children, className = props.className, other = __rest(props, ["as", "size", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? LIST_DEFAULT_SIZE : _b, _c = props.disablePadding, disablePadding = _c === void 0 ? LIST_DEFAULT_DISABLE_PADDING : _c, children = props.children, className = props.className, other = __rest(props, ["as", "size", "disablePadding", "children", "className"]);
     return (React.createElement(ListContext.Provider, { value: { size: size } },
-        React.createElement(Tag, __assign({ className: cnList({ size: size }, [className]) }, other, { ref: ref }), children)));
+        React.createElement(Tag, __assign({ className: cnList({ size: size, disablePadding: disablePadding }, [className]) }, other, { ref: ref }), children)));
 });
 List.displayName = 'List';

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

@@ -1,4 +1,5 @@
 export declare const LIST_DEFAULT_SIZE = "m";
+export declare const LIST_DEFAULT_DISABLE_PADDING = false;
 export declare const LIST_DEFAULT_TAG = "ul";
 export declare const LIST_ITEM_DEFAULT_TAG = "li";
 export declare const LIST_ITEM_DEFAULT_ALIGN = "center";

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

@@ -1,4 +1,5 @@
 export var LIST_DEFAULT_SIZE = 'm';
+export var LIST_DEFAULT_DISABLE_PADDING = false;
 export var LIST_DEFAULT_TAG = 'ul';
 export var LIST_ITEM_DEFAULT_TAG = 'li';
 export var LIST_ITEM_DEFAULT_ALIGN = 'center';

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

@@ -11,6 +11,8 @@ export type ListBaseProps = {
     children?: ReactNode;
     /** Размер компонента */
     size?: ListSizeVariant;
+    /** Если {true} отключает боковые отступы */
+    disablePadding?: boolean;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };

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

@@ -1,5 +1,6 @@
 import type { AccordionProps, AccordionSummaryProps } from '../Accordion';
 import type { AlertProps } from '../Alert';
+import type { AutocompleteProps } from '../Autocomplete';
 import type { AvatarProps } from '../Avatar';
 import type { BackdropProps } from '../Backdrop';
 import type { BadgeProps } from '../Badge';
@@ -64,6 +65,7 @@ export type Theme = {
         Accordion?: Partial<AccordionProps>;
         AccordionSummary?: Partial<AccordionSummaryProps>;
         Alert?: Partial<AlertProps>;
+        Autocomplete?: Partial<AutocompleteProps>;
         Avatar?: Partial<AvatarProps>;
         Backdrop?: Partial<BackdropProps>;
         Badge?: Partial<BadgeProps>;

package/__inner__/esm/hooks/useEventListener/useEventListener.js

@@ -1,11 +1,9 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { useEffect, useCallback } from 'react';
+import { useMutableRef } from '../../hooks/useMutableRef';
 /** Хук добавляющий обработчики событий и удаляющий их на выходе */
 export function useEventListener(_a) {
     var eventName = _a.eventName, handler = _a.handler, element = _a.element, options = _a.options, _b = _a.active, active = _b === void 0 ? true : _b;
-    var savedListener = useRef();
-    useEffect(function () {
-        savedListener.current = handler;
-    }, [handler]);
+    var savedListener = useMutableRef(handler);
     var handleEventListener = useCallback(function (event) {
         var _a;
         (_a = savedListener.current) === null || _a === void 0 ? void 0 : _a.call(savedListener, event);

package/__inner__/esm/hooks/useMutableRef/index.d.ts

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

package/__inner__/esm/hooks/useMutableRef/index.js

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

package/__inner__/esm/hooks/useMutableRef/useMutableRef.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useMutableRef<T>(value: T): import("react").MutableRefObject<T>;

package/__inner__/esm/hooks/useMutableRef/useMutableRef.js

@@ -0,0 +1,6 @@
+import { useRef } from 'react';
+export function useMutableRef(value) {
+    var ref = useRef(value);
+    ref.current = value;
+    return ref;
+}

package/__inner__/esm/locale/locale.js

@@ -1,5 +1,12 @@
 export var ruRU = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'Ничего не найдено',
+            closeText: 'Закрыть',
+            openText: 'Открыть',
+            clearText: 'Очистить',
+            loadingText: 'Загрузка…',
+        },
         Loader: {
             'aria-label': 'Загрузка',
         },
@@ -15,6 +22,13 @@ export var ruRU = {
 };
 export var kkKZ = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'Ештеңе табылған жоқ',
+            closeText: 'Жабу',
+            openText: 'Ашу',
+            clearText: 'Тазалау',
+            loadingText: 'Жүктеу…',
+        },
         Loader: {
             'aria-label': 'Жүктеу',
         },
@@ -30,6 +44,13 @@ export var kkKZ = {
 };
 export var enUS = {
     defaultProps: {
+        Autocomplete: {
+            noOptionsText: 'No options',
+            closeText: 'Close',
+            openText: 'Open',
+            clearText: 'Clear',
+            loadingText: 'Loading…',
+        },
         Loader: {
             'aria-label': 'Loading',
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.33.0",
+  "version": "0.34.1",
   "description": "React component library",
   "files": [
     "*"

package/useMutableRef/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/hooks/useMutableRef/index.js",
+	"module": "../__inner__/esm/hooks/useMutableRef/index.js",
+	"types": "../__inner__/esm/hooks/useMutableRef/index.d.ts"
+}