@ozen-ui/kit 0.84.3 → 0.84.4

package/__inner__/cjs/components/Menu/Menu.css

@@ -28,6 +28,14 @@
   }
   .Menu {
   overflow: hidden auto;
-  max-block-size: 40vh;
-  background-color: transparent;
+  max-block-size: var(--menu-max-height);
+  background-color: var(--menu-bg-color);
 }
+
+  .Menu_color_main {
+    --menu-bg-color: var(--color-background-main);
+  }
+
+  .Menu_color_accent {
+    --menu-bg-color: var(--color-accent-main);
+  }

package/__inner__/cjs/components/Menu/Menu.js

@@ -6,6 +6,7 @@ require("./Menu.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useDeprecated_1 = require("../../hooks/useDeprecated");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
+var utils_1 = require("../../utils");
 var classname_1 = require("../../utils/classname");
 var getPaperSizeToFormElement_1 = require("../../utils/getPaperSizeToFormElement");
 var Paper_1 = require("../Paper");
@@ -14,11 +15,26 @@ var components_1 = require("./components");
 var constants_1 = require("./constants");
 exports.cnMenu = (0, classname_1.cn)('Menu');
 exports.Menu = (0, react_1.forwardRef)(function (inProps, ref) {
+    var _a;
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Menu' });
-    var _a = props.size, size = _a === void 0 ? constants_1.MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, _b = props.color, color = _b === void 0 ? constants_1.MENU_DEFAULT_COLOR : _b, other = tslib_1.__rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className", "color"]);
+    var _b = props.size, size = _b === void 0 ? constants_1.MENU_DEFAULT_SIZE : _b, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, _c = props.color, color = _c === void 0 ? constants_1.MENU_DEFAULT_COLOR : _c, _d = props.maxHeight, maxHeightProp = _d === void 0 ? constants_1.MENU_DEFAULT_MAX_HEIGHT : _d, other = tslib_1.__rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className", "color", "maxHeight"]);
     var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
     (0, useDeprecated_1.useDeprecatedProperty)(!!menuListRef, 'menuListRef', 'menuListProps.ref');
-    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: Paper_1.Paper, offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: (0, exports.cnMenu)('', [className]), disableEnforceFocus: true, ref: ref }),
+    var maxHeight = (function () {
+        if ((0, utils_1.isString)(maxHeightProp)) {
+            return maxHeightProp;
+        }
+        if ((0, utils_1.isNumber)(maxHeightProp)) {
+            return "".concat(maxHeightProp, "px");
+        }
+        if (maxHeightProp) {
+            return constants_1.MENU_DEFAULT_MAX_HEIGHT;
+        }
+        return 'initial';
+    })();
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: Paper_1.Paper, offset: [0, 4], radius: radius }, other, { style: tslib_1.__assign(tslib_1.__assign({}, other.style), (0, utils_1.generateCSSVariables)((_a = {},
+            _a[constants_1.MENU_CSS_VARIABLES.MAX_HEIGHT] = maxHeight,
+            _a))), open: open, onClose: onClose, className: (0, exports.cnMenu)({ color: color }, [className]), disableEnforceFocus: true, ref: ref }),
         react_1.default.createElement(components_1.MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: tslib_1.__assign(tslib_1.__assign({ size: size, color: color }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 exports.Menu.displayName = 'Menu';

package/__inner__/cjs/components/Menu/constants.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MENU_DEFAULT_COLOR = exports.MENU_DEFAULT_SIZE = void 0;
+exports.MENU_CSS_VARIABLES = exports.MENU_DEFAULT_MAX_HEIGHT = exports.MENU_DEFAULT_COLOR = exports.MENU_DEFAULT_SIZE = void 0;
 exports.MENU_DEFAULT_SIZE = 'm';
 exports.MENU_DEFAULT_COLOR = 'main';
+exports.MENU_DEFAULT_MAX_HEIGHT = '40vh';
+exports.MENU_CSS_VARIABLES = {
+    MAX_HEIGHT: 'menu-max-height',
+};

package/__inner__/esm/components/Menu/Menu.css

@@ -28,6 +28,14 @@
   }
   .Menu {
   overflow: hidden auto;
-  max-block-size: 40vh;
-  background-color: transparent;
+  max-block-size: var(--menu-max-height);
+  background-color: var(--menu-bg-color);
 }
+
+  .Menu_color_main {
+    --menu-bg-color: var(--color-background-main);
+  }
+
+  .Menu_color_accent {
+    --menu-bg-color: var(--color-accent-main);
+  }

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

@@ -3,19 +3,35 @@ import './Menu.css';
 import React, { forwardRef } from 'react';
 import { useDeprecatedProperty } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
+import { generateCSSVariables, isNumber, isString } from '../../utils';
 import { cn } from '../../utils/classname';
 import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
 import { Paper } from '../Paper';
 import { Popover } from '../Popover';
 import { MenuContextConsumer } from './components';
-import { MENU_DEFAULT_COLOR, MENU_DEFAULT_SIZE } from './constants';
+import { MENU_CSS_VARIABLES, MENU_DEFAULT_COLOR, MENU_DEFAULT_SIZE, MENU_DEFAULT_MAX_HEIGHT, } from './constants';
 export var cnMenu = cn('Menu');
 export var Menu = forwardRef(function (inProps, ref) {
+    var _a;
     var props = useThemeProps({ props: inProps, name: 'Menu' });
-    var _a = props.size, size = _a === void 0 ? MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, _b = props.color, color = _b === void 0 ? MENU_DEFAULT_COLOR : _b, other = __rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className", "color"]);
+    var _b = props.size, size = _b === void 0 ? MENU_DEFAULT_SIZE : _b, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, _c = props.color, color = _c === void 0 ? MENU_DEFAULT_COLOR : _c, _d = props.maxHeight, maxHeightProp = _d === void 0 ? MENU_DEFAULT_MAX_HEIGHT : _d, other = __rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className", "color", "maxHeight"]);
     var radius = getPaperSizeToFormElement(size);
     useDeprecatedProperty(!!menuListRef, 'menuListRef', 'menuListProps.ref');
-    return (React.createElement(Popover, __assign({ as: Paper, offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: cnMenu('', [className]), disableEnforceFocus: true, ref: ref }),
+    var maxHeight = (function () {
+        if (isString(maxHeightProp)) {
+            return maxHeightProp;
+        }
+        if (isNumber(maxHeightProp)) {
+            return "".concat(maxHeightProp, "px");
+        }
+        if (maxHeightProp) {
+            return MENU_DEFAULT_MAX_HEIGHT;
+        }
+        return 'initial';
+    })();
+    return (React.createElement(Popover, __assign({ as: Paper, offset: [0, 4], radius: radius }, other, { style: __assign(__assign({}, other.style), generateCSSVariables((_a = {},
+            _a[MENU_CSS_VARIABLES.MAX_HEIGHT] = maxHeight,
+            _a))), open: open, onClose: onClose, className: cnMenu({ color: color }, [className]), disableEnforceFocus: true, ref: ref }),
         React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: __assign(__assign({ size: size, color: color }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 Menu.displayName = 'Menu';

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

@@ -1,2 +1,6 @@
 export var MENU_DEFAULT_SIZE = 'm';
 export var MENU_DEFAULT_COLOR = 'main';
+export var MENU_DEFAULT_MAX_HEIGHT = '40vh';
+export var MENU_CSS_VARIABLES = {
+    MAX_HEIGHT: 'menu-max-height',
+};

package/__inner__/types/components/Menu/constants.d.ts

@@ -1,2 +1,6 @@
 export declare const MENU_DEFAULT_SIZE = "m";
 export declare const MENU_DEFAULT_COLOR = "main";
+export declare const MENU_DEFAULT_MAX_HEIGHT = "40vh";
+export declare const MENU_CSS_VARIABLES: {
+    MAX_HEIGHT: string;
+};

package/__inner__/types/components/Menu/types.d.ts

@@ -4,6 +4,7 @@ import type { PopoverBaseProps } from '../Popover';
 import type { MenuListProps } from './components';
 import type { MenuColorVariant, MenuSizeVariant } from './entities';
 export type MenuRef = ComponentRef<'div'>;
+export type MenuMaxHeight = boolean | number | string;
 export type MenuProps = ExtendableComponentPropsWithRef<{
     /** Свойства компонента MenuList */
     menuListProps?: Omit<MenuListProps, 'children'>;
@@ -16,4 +17,6 @@ export type MenuProps = ExtendableComponentPropsWithRef<{
     size?: MenuSizeVariant;
     /** Цвет компонента */
     color?: MenuColorVariant;
+    /** Свойство максимальной высоты меню */
+    maxHeight?: MenuMaxHeight;
 } & Omit<PopoverBaseProps, 'disableEnforceFocus'>, 'div'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.84.3",
+  "version": "0.84.4",
   "description": "React component library",
   "files": [
     "*"
@@ -29,9 +29,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/logger": "0.84.3",
-    "@ozen-ui/fonts": "0.84.3",
-    "@ozen-ui/icons": "0.84.3"
+    "@ozen-ui/fonts": "0.84.4",
+    "@ozen-ui/logger": "0.84.4",
+    "@ozen-ui/icons": "0.84.4"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"