@ozen-ui/kit 0.17.0 → 0.19.0

package/__inner__/esm/components/Modal/Modal.js

@@ -19,7 +19,6 @@ export var Modal = forwardRef(function (_a, ref) {
     var hasBackdrop = !hideBackdrop;
     var modalInnerRef = useRef(null);
     var focusedElement = useRef(null);
-    var isClickOutSide = useRef(null);
     var _h = __read(useState(false), 2), openState = _h[0], setOpenState = _h[1];
     var _j = __read(useState(false), 2), opened = _j[0], setOpened = _j[1];
     var _k = useModalManager(modalInnerRef, 1000, openState), isTop = _k.isTop, refsClickOutside = _k.refsClickOutside;
@@ -28,7 +27,6 @@ export var Modal = forwardRef(function (_a, ref) {
             modalInnerRef
         ], __read(refsClickOutside), false), __read((ignoreClickOutsideRefs || [])), false),
         handler: function () {
-            isClickOutSide.current = true;
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
         active: !disableClickOutside,
@@ -40,7 +38,6 @@ export var Modal = forwardRef(function (_a, ref) {
         // Сохраняем фокус активного элемента до момента открытия всплывающего окна
         if (open) {
             setOpened(true);
-            isClickOutSide.current = null;
             focusedElement.current =
                 document.activeElement;
             (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.blur();
@@ -54,10 +51,9 @@ export var Modal = forwardRef(function (_a, ref) {
     var onExited = useCallback(function () {
         var _a, _b;
         // Возвращаем фокус активного элемента
-        if (!isClickOutSide.current &&
-            (((_a = modalInnerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
-                document.activeElement === document.body)) {
-            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
+        if (((_a = modalInnerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
+            document.activeElement === document.body) {
+            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
         }
         setOpened(false);
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();

package/__inner__/esm/components/Popover/Popover.js

@@ -20,7 +20,6 @@ export var cnPopover = cn('Popover');
 export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Popover' });
     var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _h = props.as, as = _h === void 0 ? POPOVER_DEFAULT_TAG : _h, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
-    var isClickOutSide = useRef(null);
     var _j = __read(useState(false), 2), openState = _j[0], setOpenState = _j[1];
     var focusedElement = useRef(null);
     var popoverRef = useRef(null);
@@ -46,7 +45,6 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
             popoverRef
         ], __read(refsClickOutside), false), __read((anchorRef ? [anchorRef] : [])), false), __read((ignoreClickOutsideRefs || [])), false),
         handler: function () {
-            isClickOutSide.current = true;
             onClose === null || onClose === void 0 ? void 0 : onClose();
         },
         active: openState && !disableClickOutside,
@@ -55,10 +53,9 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
         var _a, _b;
         // Возвращаем фокус активного элемента
         if (!disableReturnFocus &&
-            !isClickOutSide.current &&
             (((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
                 document.activeElement === document.body)) {
-            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
+            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
         }
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
     }, [onExitedProp]);
@@ -133,7 +130,6 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
         var _a;
         // Сохраняем фокус активного элемента до момента открытия всплывающего окна
         if (open && !disableReturnFocus) {
-            isClickOutSide.current = null;
             focusedElement.current =
                 document.activeElement;
             (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.blur();

package/__inner__/esm/components/Select/Select.js

@@ -6,7 +6,7 @@ import { useControlled } from '../../hooks/useControlled';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { isKey } from '../../utils/isKey';
+import { isKeys } from '../../utils/isKeys';
 import { DataList, DataListOption } from '../DataList';
 import { SelectInput } from './components';
 import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_SIZE, } from './constants';
@@ -90,10 +90,7 @@ var SelectRender = function (inProps, ref) {
     };
     /** Управление элементом контроля через клавиатуру */
     var handleKeyDown = function (event) {
-        if ((isKey(event, 'Space') ||
-            isKey(event, 'ArrowDown') ||
-            isKey(event, 'ArrowUp')) &&
-            !open) {
+        if (isKeys(event, ['Space', 'ArrowDown', 'ArrowUp']) && !open) {
             event.preventDefault();
             handleToggle();
         }

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

@@ -8,6 +8,7 @@ import type { CardProps } from '../Card';
 import type { CheckboxProps } from '../Checkbox';
 import type { CheckboxGroupProps } from '../CheckboxGroup';
 import type { ChipProps } from '../Chip';
+import type { ChipProps as ChiPropsNext } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
@@ -69,6 +70,7 @@ export type Theme = {
         Checkbox?: Partial<CheckboxProps>;
         CheckboxGroup?: Partial<CheckboxGroupProps>;
         Chip?: Partial<ChipProps>;
+        ChipNext?: Partial<ChiPropsNext>;
         Collapse?: Partial<CollapseProps>;
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;

package/__inner__/esm/hooks/useFocusList/useFocusList.js

@@ -2,15 +2,24 @@ import { useCallback } from 'react';
 import { getNextIndex } from '../../utils/getNextIndex';
 import { getPrevIndex } from '../../utils/getPrevIndex';
 import { isKey } from '../../utils/isKey';
+import { isKeys } from '../../utils/isKeys';
 import { useUniqueId } from '../useUniqueId';
 export function useFocusList() {
     var name = useUniqueId();
     var onKeyDown = useCallback(function (event) {
-        if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
+        if (!isKeys(event, ['ArrowUp', 'ArrowDown', 'Home', 'End'])) {
             return;
         }
         event.preventDefault();
         var items = document.querySelectorAll("[data-focus-list=\"".concat(name, "\"]"));
+        if (isKey(event, 'Home')) {
+            items.item(0).focus();
+            return;
+        }
+        if (isKey(event, 'Home')) {
+            items.item(items.length - 1).focus();
+            return;
+        }
         var currentEl = event.target;
         var currentIndex = Array.from(items).indexOf(currentEl);
         var newIndex = isKey(event, 'ArrowUp')

package/__inner__/esm/hooks/useMultiRef/useMultiRef.js

@@ -1,4 +1,5 @@
 import { useMemo, useRef } from 'react';
+import { setRef } from '../../utils/setRef';
 /** Создает несколько ссылок (ref) на один DOM-элемент. */
 export function useMultiRef(refs) {
     // Мемоизирует массив ref'ов
@@ -9,13 +10,7 @@ export function useMultiRef(refs) {
         }
         return function (node) {
             arrRefs.current.forEach(function (ref) {
-                if (typeof ref === 'function') {
-                    ref(node);
-                }
-                else if (ref) {
-                    // eslint-disable-next-line no-param-reassign
-                    ref.current = node;
-                }
+                setRef(ref, node);
             });
         };
     }, [arrRefs]);

package/__inner__/esm/utils/isKeys.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import type { KeyCode } from '../types/KeyCode';
+export declare const isKeys: (event: KeyboardEvent | ReactKeyboardEvent, keys: KeyCode[]) => boolean;

package/__inner__/esm/utils/isKeys.js

@@ -0,0 +1,2 @@
+import { isKey } from './isKey';
+export var isKeys = function (event, keys) { return keys.some(function (key) { return isKey(event, key); }); };

package/__inner__/esm/utils/renderContent/index.d.ts

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

package/__inner__/esm/utils/renderContent/index.js

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

package/__inner__/esm/utils/renderContent/renderContent.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactElement, ReactNode } from 'react';
+export type RenderContentType<Props extends object> = {
+    content?: string | number | FC<Props> | ReactElement<Props> | (() => ReactElement<Props>);
+    props?: Props;
+};
+export declare function renderContent<Props extends object>({ content, props, }: RenderContentType<Props>): ReactNode;

package/__inner__/esm/utils/renderContent/renderContent.js

@@ -0,0 +1,25 @@
+import { __assign } from "tslib";
+import React, { isValidElement, cloneElement } from 'react';
+import { isElement, isValidElementType } from 'react-is';
+import { mergeDeep } from '../../utils/mergeDeep';
+export function renderContent(_a) {
+    var content = _a.content, props = _a.props;
+    // primitives: string or number
+    if (typeof content === 'string' || typeof content === 'number') {
+        return content;
+    }
+    // react-element
+    if (isElement(content)) {
+        return cloneElement(content, mergeDeep(props, content.props));
+    }
+    // render-function
+    if (typeof content === 'function' && !isValidElement(content)) {
+        return content(props);
+    }
+    // react-component
+    if (isValidElementType(content)) {
+        var Content = content;
+        return React.createElement(Content, __assign({}, props));
+    }
+    return null;
+}

package/__inner__/esm/utils/setRef.d.ts

@@ -0,0 +1,4 @@
+import type { Dispatch, SetStateAction, Ref as ReactRef } from 'react';
+type Ref<T> = ReactRef<T> | Dispatch<SetStateAction<T | undefined>> | null;
+export declare const setRef: <T>(ref: Ref<T> | undefined, value: T) => void;
+export {};

package/__inner__/esm/utils/setRef.js

@@ -0,0 +1,9 @@
+export var setRef = function (ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = value;
+    }
+};

package/package.json

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