@ozen-ui/kit 0.19.0 → 0.21.0

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

@@ -1,31 +1,31 @@
 .ListItemButton {
   inline-size: calc(100% - 2 * var(--list-gutter));
+  min-block-size: var(--list-item-min-height);
+  padding: var(--list-item-padding);
+  color: var(--list-item-color);
+  border-radius: var(--list-item-border-radius);
+  background-color: var(--list-item-bg-color);
+  margin: 0 var(--list-gutter);
+  transition: background-color var(--transition-default);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   box-sizing: border-box;
-  min-block-size: var(--list-item-min-height);
-  padding: var(--list-item-padding);
-  color: var(--color-content-primary);
   outline: none;
   text-decoration: none;
-  border-radius: var(--list-item-border-radius);
-  transition: background-color var(--transition-default);
   text-align: start;
-  background-color: transparent;
   cursor: pointer;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
-  margin: 0 var(--list-gutter);
   border: none;
 }
 
   .ListItemButton:hover {
-    background-color: var(--color-background-main-hover);
+    background-color: var(--list-item-bg-color-hover);
   }
 
   .ListItemButton:active {
-    background-color: var(--color-background-main-pressed);
+    background-color: var(--list-item-bg-color-active);
   }
 
   .ListItemButton:focus {
@@ -38,7 +38,7 @@
 
   .ListItemButton_disabled {
     pointer-events: none;
-    color: var(--color-content-tertiary);
+    color: var(--list-item-bg-color-disabled);
   }
 
   .ListItemButton_disabled .ListItemText-TextPrimary,
@@ -50,7 +50,7 @@
     content: '';
     inline-size: var(--list-pipka-width);
     block-size: var(--list-pipka-height);
-    background-color: var(--list-pipka-background-color);
+    background-color: var(--list-pipka-bg-color);
     border-radius: var(--list-pipka-border-radius);
     position: absolute;
     inset-inline-start: 0;

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

@@ -8,6 +8,9 @@ export type ListItemButtonBaseProps = {
     children?: ReactNode;
     /** Если {true} делает элемент неактивным */
     disabled?: boolean;
+    /** Если {true} отображает элемент списка как выбранный */
+    selected?: boolean;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };
 export type ListItemButtonProps<As extends ElementType = typeof LIST_ITEM_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemButtonBaseProps, As>;

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

@@ -9,7 +9,7 @@ import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export var cnListItemButton = cn('ListItemButton');
 export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'ListItemButton' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, other = __rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = __rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
     var tabIndex = useMemo(function () { return (!disabled ? 0 : -1); }, [disabled]);
     var handleClick = function (event) {
         if (!disabled)
@@ -41,6 +41,7 @@ export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref)
     }, [Tag, handleKeyDown]);
     return (React.createElement(Tag, __assign({ className: cnListItemButton({
             disabled: disabled,
+            selected: selected,
         }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));
 });
 ListItemButton.displayName = 'ListItemButton';

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -4,8 +4,6 @@ import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export declare const cnMenuItem: import("@bem-react/classname").ClassNameFormatter;
 export type MenuItemBaseProps = ListItemButtonBaseProps & {
-    /** Если {true} отображает элемент меню как выбранный */
-    selected?: boolean;
     /** Используется для вычисления лейбла выбранного элемента меню в выпадающих списках */
     label?: string;
     /** Используется для вычисления значения выбранного элемента меню в выпадающих списках */

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.js

@@ -4,7 +4,7 @@ import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
-import { cnListItemButton, ListItemButton, } from '../../../List';
+import { ListItemButton } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export var cnMenuItem = cn('MenuItem');
 export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
@@ -17,6 +17,6 @@ export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus, disabled]);
-    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag, disabled: disabled }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
+    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag, disabled: disabled, selected: selected }, other, { ref: useMultiRef([ref, innerRef]), className: cnMenuItem('', [className]), "data-value": value, "data-label": label }), children));
 });
 MenuItem.displayName = 'MenuItem';

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/hooks/useBoolean/useBoolean.d.ts

@@ -1,4 +1,4 @@
-type UseBooleanControllers = {
+export type UseBooleanControllers = {
     /** Установить значение в {true} */
     on: () => void;
     /** Установить значение в {false} */
@@ -6,8 +6,7 @@ type UseBooleanControllers = {
     /** Перевести значение в противоположное состояние */
     toggle: () => void;
 };
-type UseBooleanReturnValue = [boolean, UseBooleanControllers];
+export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
 export declare function useBoolean(
 /** Значение по умолчанию */
 defaultValue?: boolean): UseBooleanReturnValue;
-export {};

package/package.json

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