@ozen-ui/kit 0.18.0 → 0.20.0

package/__inner__/esm/components/Button/Button.js

@@ -6,6 +6,7 @@ import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { renderContent } from '../../utils/renderContent';
 import { Loader } from '../Loader';
 import { BUTTON_DEFAULT_SIZE, BUTTON_DEFAULT_VARIANT, BUTTON_DEFAULT_COLOR, BUTTON_DEFAULT_TAG, } from './constants';
 export var buttonVariant = [
@@ -28,19 +29,27 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'Button',
     });
-    var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, IconLeft = props.iconLeft, IconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
+    var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
     var iconSize = getIconSizeToFormElement(size);
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
             onClick(event);
         }
     };
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+            },
+        });
+    };
     var isInteractionPrevented = disabled || loading;
     var childContent = (React.createElement(React.Fragment, null,
         React.createElement("span", { className: cnButton('Label') },
-            IconLeft && React.createElement(IconLeft, { size: iconSize }),
+            renderIcon(iconLeft),
             children,
-            IconRight && React.createElement(IconRight, { size: iconSize })),
+            renderIcon(iconRight)),
         React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
             React.createElement(Loader, { size: iconSize, color: "var(--color-content-disabled)", className: cnButton('Loader') }))));
     return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButton({

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

@@ -33,4 +33,7 @@ export type ChipBaseProps = {
     'data-testid'?: string;
 };
 export type ChipProps = ExtendableProps<InputHTMLAttributes<HTMLInputElement>, ChipBaseProps>;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ChipNext
+ */
 export declare const Chip: React.ForwardRefExoticComponent<ChipBaseProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof ChipBaseProps> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/esm/components/Chip/Chip.js

@@ -8,6 +8,9 @@ import { CHIP_DEFAULT_SIZE, CHIP_DEFAULT_VARIANT, CHIP_DEFAULT_DISABLED, } from
 export var cnChip = cn('Chip');
 export var chipSizeVariant = ['xs', 's', 'm', 'l'];
 export var chipColorVariant = ['primary', 'secondary'];
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ChipNext
+ */
 export var Chip = forwardRef(function (inProps, ref) {
     var _a = useThemeProps({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
     var iconSize = useMemo(function () { return getIconSizeToFormElement(size); }, [size]);

package/__inner__/esm/components/ChipNext/Chip.css

@@ -0,0 +1,108 @@
+/* stylelint-disable */
+.ChipNext {
+  --chip-border-radius: 24px;
+  --chip-text-wrap: nowrap;
+  background-color: var(--chip-bg-color);
+  border-radius: var(--chip-border-radius);
+  min-block-size: var(--chip-height);
+  padding: 0 var(--chip-padding-x);
+  min-inline-size: var(--chip-min-width);
+  color: var(--chip-text-color);
+  gap: var(--space-s);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  outline: none;
+  transition:
+    border-color var(--transition-default),
+    color var(--transition-default),
+    background-color var(--transition-default),
+    box-shadow var(--transition-default);
+}
+.ChipNext-Content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: var(--chip-text-wrap);
+  }
+.ChipNext-Icon {
+    color: inherit;
+    flex-shrink: 0;
+  }
+.ChipNext_multiline {
+    --chip-text-wrap: normal;
+  }
+.ChipNext_size_xs {
+      font: var(--typography-text-2xs-font);
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs-text_transform, none);
+
+      --chip-min-width: 64px;
+      --chip-height: var(--space-xl);
+      --chip-padding-x: var(--space-m);
+    }
+.ChipNext_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --chip-min-width: 72px;
+      --chip-height: var(--space-2xl);
+      --chip-padding-x: var(--space-l);
+    }
+.ChipNext_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --chip-min-width: 80px;
+      --chip-height: var(--space-3xl);
+      --chip-padding-x: 20px;
+    }
+.ChipNext_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --chip-min-width: 88px;
+      --chip-height: var(--space-4xl);
+      --chip-padding-x: var(--space-xl);
+    }
+.ChipNext_color_primary {
+      --chip-bg-color: var(--color-background-action-light);
+      --chip-bg-color-hover: var(--color-background-action-light-hover);
+      --chip-bg-color-active: var(--color-background-action-light-pressed);
+      --chip-text-color: var(--color-content-action-dark);
+    }
+.ChipNext_color_secondary {
+      --chip-bg-color: var(--color-background-secondary);
+      --chip-bg-color-hover: var(--color-background-secondary-hover);
+      --chip-bg-color-active: var(--color-background-secondary-pressed);
+      --chip-text-color: var(--color-content-primary);
+    }
+.ChipNext:hover {
+    --chip-bg-color: var(--chip-bg-color-hover);
+  }
+.ChipNext:active {
+    --chip-bg-color: var(--chip-bg-color-active);
+  }
+.ChipNext:focus {
+    box-shadow: var(--shadow-outline-focused);
+  }
+.ChipNext:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+.ChipNext_checked,
+  .ChipNext_checked:hover,
+  .ChipNext_checked:active {
+    --chip-bg-color: var(--color-background-action);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-disabled);
+    --chip-text-color: var(--color-content-disabled);
+    pointer-events: none;
+  }

package/__inner__/esm/components/ChipNext/Chip.d.ts

@@ -0,0 +1,42 @@
+import './Chip.css';
+import type { ReactNode, MouseEvent, ElementType } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+import { CHIP_DEFAULT_TAG } from './constants';
+export declare const cnChip: import("@bem-react/classname").ClassNameFormatter;
+export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
+export declare const chipColorVariant: readonly ["primary", "secondary"];
+export type ChipSizeVariant = (typeof chipSizeVariant)[number];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
+export type ChipIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+export type ChipBaseProps = {
+    /** Размер компонента */
+    size?: ChipSizeVariant;
+    /** Вариант представления компонента */
+    color?: ChipColorVariant;
+    /** Если {true} компонент отображается как заблокированный */
+    disabled?: boolean;
+    /** Если {true} делает элемент выбранным */
+    checked?: boolean;
+    /** Обработчик нажатия */
+    onClick?: (e: MouseEvent<HTMLElement>, payload: {
+        checked: boolean;
+    }) => void;
+    /** Иконка слева */
+    iconLeft?: ChipIcon;
+    /** Иконка справа */
+    iconRight?: ChipIcon;
+    /** Если {true} разбивает длинный текст на несколько строк */
+    multiline?: boolean;
+    /** Дополнительные СSS-классы */
+    className?: string;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type ChipProps<As extends ElementType = typeof CHIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<ChipBaseProps, As>;
+export declare const Chip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipBaseProps, "button">;

package/__inner__/esm/components/ChipNext/Chip.js

@@ -0,0 +1,43 @@
+import { __assign, __read, __rest } from "tslib";
+import './Chip.css';
+import React from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { renderContent } from '../../utils/renderContent';
+import { CHIP_DEFAULT_TAG, CHIP_DEFAULT_SIZE, CHIP_DEFAULT_VARIANT, CHIP_DEFAULT_DISABLED, } from './constants';
+export var cnChip = cn('ChipNext');
+export var chipSizeVariant = ['xs', 's', 'm', 'l'];
+export var chipColorVariant = ['primary', 'secondary'];
+export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
+    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, size = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? CHIP_DEFAULT_TAG : _e, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", 'data-testid']);
+    var _f = __read(useControlled({
+        value: checkedProp,
+        defaultValue: false,
+        name: 'ChipNext',
+        state: 'open',
+    }), 2), checkedState = _f[0], setCheckedState = _f[1];
+    var handleClick = function (event) {
+        if (disabled) {
+            return;
+        }
+        setCheckedState(!checkedState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: !checkedState });
+    };
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+                className: cnChip('Icon'),
+            },
+        });
+    };
+    return (React.createElement(Tag, __assign({ type: "button", "data-testid": dataTestId, disabled: disabled }, other, { className: cnChip({ size: size, disabled: disabled, color: color, multiline: multiline, checked: checkedState }, [className]), onClick: handleClick, ref: ref }),
+        renderIcon(iconLeft),
+        children && React.createElement("span", { className: cnChip('Content') }, children),
+        renderIcon(iconRight)));
+});
+Chip.displayName = 'Chip';

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

@@ -0,0 +1,4 @@
+export declare const CHIP_DEFAULT_TAG = "button";
+export declare const CHIP_DEFAULT_VARIANT = "primary";
+export declare const CHIP_DEFAULT_SIZE = "m";
+export declare const CHIP_DEFAULT_DISABLED = false;

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

@@ -0,0 +1,4 @@
+export var CHIP_DEFAULT_TAG = 'button';
+export var CHIP_DEFAULT_VARIANT = 'primary';
+export var CHIP_DEFAULT_SIZE = 'm';
+export var CHIP_DEFAULT_DISABLED = false;

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

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

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

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

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

@@ -1,18 +1,15 @@
 import './FieldIcon.css';
-import type { ComponentPropsWithRef, ComponentRef, FC, ReactElement } from 'react';
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
 import React from 'react';
 import type { IconProps, IconSize } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { RenderContentType } from '../../utils/renderContent';
 export declare const FIELD_ICON_DEFAULT_TAG = "div";
 export type FieldIconRef = ComponentRef<typeof FIELD_ICON_DEFAULT_TAG>;
 export type FieldIconProps = ComponentPropsWithRef<typeof FIELD_ICON_DEFAULT_TAG> & {
-    icon?: string | ReactElement<IconProps & {
+    icon?: RenderContentType<IconProps & {
         size?: IconSize;
-    }> | (() => ReactElement<IconProps & {
-        size?: IconSize;
-    }>) | FC<IconProps & {
-        size?: IconSize;
-    }>;
+    }>['content'];
     size?: FormElementSizeVariant;
     children?: never;
 };

package/__inner__/esm/components/FieldIcon/FieldIcon.js

@@ -1,31 +1,12 @@
 import { __assign, __read, __rest } from "tslib";
 import './FieldIcon.css';
 import React, { forwardRef, useContext } from 'react';
-import { isValidElementType, isElement } from 'react-is';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
+import { renderContent } from '../../utils/renderContent';
 import { FieldControlContext } from '../FieldControl';
 export var FIELD_ICON_DEFAULT_TAG = 'div';
 export var cnFieldIcon = cn('FieldIcon');
-// TODO: взять за основу для всех рендер-функций
-var resolveChildren = function (content, size) {
-    if (typeof content === 'string') {
-        return content;
-    }
-    if (isElement(content)) {
-        return React.cloneElement(content, {
-            size: content.props.size || (size && getIconSizeToFormElement(size)),
-        });
-    }
-    if (typeof content === 'function' && !React.isValidElement(content)) {
-        return content({ size: size && getIconSizeToFormElement(size) });
-    }
-    if (isValidElementType(content)) {
-        var Content = content;
-        return React.createElement(Content, { size: size && getIconSizeToFormElement(size) });
-    }
-    return null;
-};
 export var FieldIcon = forwardRef(function (_a, ref) {
     var icon = _a.icon, className = _a.className, sizeProp = _a.size, other = __rest(_a, ["icon", "className", "size"]);
     var context = useContext(FieldControlContext);
@@ -40,6 +21,9 @@ export var FieldIcon = forwardRef(function (_a, ref) {
             size = fieldControl.size;
         }
     }
-    return (React.createElement(Tag, __assign({ className: cnFieldIcon({ size: size }, [className]) }, other, { ref: ref }), resolveChildren(icon, size)));
+    return (React.createElement(Tag, __assign({ className: cnFieldIcon({ size: size }, [className]) }, other, { ref: ref }), renderContent({
+        content: icon,
+        props: { size: size && getIconSizeToFormElement(size) },
+    })));
 });
 FieldIcon.displayName = 'FieldIcon';

package/__inner__/esm/components/Grid/Grid.css

@@ -158,6 +158,24 @@
 .Grid_rowGap_8xl {
     grid-row-gap: var(--space-8xl);
   }
+.Grid_align_start {
+      align-items: start;
+    }
+.Grid_align_end {
+      align-items: end;
+    }
+.Grid_align_center {
+      align-items: center;
+    }
+.Grid_justify_start {
+      justify-items: start;
+    }
+.Grid_justify_end {
+      justify-items: end;
+    }
+.Grid_justify_center {
+      justify-items: center;
+    }
 @media (min-width: 0) {
       .Grid_gap_xs_0 {
     grid-gap: 0;

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

@@ -5,6 +5,10 @@ export declare const gridColsVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1
 export type GridColsVariant = (typeof gridColsVariant)[number];
 export declare const gridGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
 export type GridGapVariant = (typeof gridGapVariant)[number];
+export declare const gridAlignVariant: readonly ["start", "end", "center"];
+export declare const gridJustifyVariant: readonly ["start", "end", "center"];
+export type GridAlignVariant = (typeof gridAlignVariant)[number];
+export type GridJustifyVariant = (typeof gridJustifyVariant)[number];
 export declare const cnGrid: import("@bem-react/classname").ClassNameFormatter;
 export type GridProps = {
     /** Количество колонок в сетке */
@@ -15,6 +19,10 @@ export type GridProps = {
     colGap?: ResponsiveValue<GridGapVariant>;
     /** Отступы вокруг строки */
     rowGap?: ResponsiveValue<GridGapVariant>;
+    /** Выравнивание */
+    align?: GridAlignVariant;
+    /** Пространство между элементами */
+    justify?: GridJustifyVariant;
     /** Содержимое компонента */
     children?: ReactNode;
     /** Дополнительные СSS-классы */

package/__inner__/esm/components/Grid/Grid.js

@@ -23,13 +23,22 @@ export var gridGapVariant = [
     '7xl',
     '8xl',
 ];
+export var gridAlignVariant = ['start', 'end', 'center'];
+export var gridJustifyVariant = ['start', 'end', 'center'];
 export var cnGrid = cn('Grid');
 export var Grid = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Grid',
     });
-    var _a = props.cols, cols = _a === void 0 ? GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "colGap", "rowGap", "children", "className"]);
-    return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, { cols: cols, gap: gap, colGap: colGap, rowGap: rowGap }), className) }, other, { ref: ref }), children));
+    var _a = props.cols, cols = _a === void 0 ? GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, align = props.align, justify = props.justify, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "colGap", "rowGap", "align", "justify", "children", "className"]);
+    return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, {
+            cols: cols,
+            gap: gap,
+            colGap: colGap,
+            rowGap: rowGap,
+            align: align,
+            justify: justify,
+        }), className) }, other, { ref: ref }), children));
 });
 Grid.displayName = 'Grid';

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/Table/components/TableRow/TableRow.css

@@ -1,7 +1,12 @@
-.TableRow_hover:hover {
+.TableRow {
+  transition: background-color var(--transition-slow);
+}
+
+  .TableRow_hover:hover {
     outline: none;
     background-color: var(--color-background-primary-hover);
   }
+
   .TableRow_hover:active,
   .TableRow_selected {
     outline: none;

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css

@@ -29,7 +29,7 @@
   --color-content-primary-inverse: #fff;
   --color-content-accent-main: #a0a0a0;
   --color-accent-main: #181818;
-  --color-content-accent-primary: #fff;
+  --color-content-accent-primary: #dcdcdc;
   --color-accent-primary: #282828;
   --color-content-accent-disabled: #606060;
   --color-background-main: #fff;
@@ -124,7 +124,7 @@
   --color-accent-tertiary-pressed: #686868;
   --color-accent-disabled: #484848;
   --color-accent-secondary-inverse: #808080;
-  --color-accent-main-inverse: #fff;
+  --color-accent-main-inverse: #dcdcdc;
   --color-additional-a1: #0b6abe;
   --color-additional-a2: #1899e9;
   --color-additional-a3: #b3f1ff;

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css

@@ -30,7 +30,7 @@
   --color-background-main-inverse: #f5f5f5;
   --color-content-accent-main: #a0a0a0;
   --color-accent-main: #181818;
-  --color-content-accent-primary: #fff;
+  --color-content-accent-primary: #dcdcdc;
   --color-accent-primary: #282828;
   --color-content-accent-disabled: #606060;
   --color-background-main-hover: #2c2c2c;

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDefault.css

@@ -29,7 +29,7 @@
   --color-content-primary-inverse: #fff;
   --color-content-accent-main: #a0a0a0;
   --color-accent-main: #181818;
-  --color-content-accent-primary: #fff;
+  --color-content-accent-primary: #dcdcdc;
   --color-accent-primary: #282828;
   --color-content-accent-disabled: #606060;
   --color-background-main: #fff;

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/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/package.json

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