@cloud-ru/uikit-product-mobile-layout 2.0.20 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.1.0 (2026-04-14)
+
+
+### Features
+
+* **LK-7542:** quota widget update ([e8ee44b](https://github.com/cloud-ru-tech/uikit-product/commit/e8ee44b30a8a6309409b6af307b87a81945d883a))
+
+
+
+
+
 ## 2.0.20 (2026-04-14)
 
 

package/dist/cjs/helperComponents/Actions/ActionView.js

@@ -14,13 +14,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionView = ActionView;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uikit_product_mobile_tooltip_1 = require("@cloud-ru/uikit-product-mobile-tooltip");
-const uikit_product_quota_1 = require("@cloud-ru/uikit-product-quota");
 const button_1 = require("@snack-uikit/button");
 const ButtonDropdown_1 = require("../ButtonDropdown");
 const ButtonDroplist_1 = require("../ButtonDroplist");
 const ButtonKebab_1 = require("../ButtonKebab");
+const ButtonQuota_1 = require("../ButtonQuota");
 const constants_1 = require("./constants");
 function ActionView(_a) {
+    var _b;
     var { variant, tooltip, hidden = false, layoutType, commonProps } = _a, buttonProps = __rest(_a, ["variant", "tooltip", "hidden", "layoutType", "commonProps"]);
     if (hidden) {
         return null;
@@ -50,7 +51,7 @@ function ActionView(_a) {
             return addTooltip((0, jsx_runtime_1.jsx)(ButtonDroplist_1.ButtonDroplist, { button: Object.assign(Object.assign({}, button), commonProps), list: list, layoutType: layoutType }));
         }
         case constants_1.BUTTON_TYPE.Quota: {
-            return addTooltip((0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaDropdown, Object.assign({}, buttonProps, commonProps, { layoutType: layoutType })));
+            return addTooltip((0, jsx_runtime_1.jsx)(ButtonQuota_1.ButtonQuota, Object.assign({}, buttonProps, { buttonProps: (_b = buttonProps.buttonProps) !== null && _b !== void 0 ? _b : commonProps, layoutType: layoutType })));
         }
         default:
             return null;

package/dist/cjs/helperComponents/Actions/MobileActions.js

@@ -13,7 +13,6 @@ const uikit_product_mobile_dropdown_1 = require("@cloud-ru/uikit-product-mobile-
 const uikit_product_mobile_tooltip_1 = require("@cloud-ru/uikit-product-mobile-tooltip");
 const uikit_product_quota_1 = require("@cloud-ru/uikit-product-quota");
 const button_1 = require("@snack-uikit/button");
-const counter_1 = require("@snack-uikit/counter");
 const utils_1 = require("@snack-uikit/utils");
 const ActionView_1 = require("./ActionView");
 const constants_1 = require("./constants");
@@ -22,8 +21,9 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function MobileActions({ items, maxVisibleItems }) {
     const containerRef = (0, react_2.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+    const [isQuotaWidgetOpen, setIsQuotaWidgetOpen] = (0, react_2.useState)(false);
     const { visibleItems, hiddenItems } = (0, utils_1.useDynamicList)({ parentContainerRef: containerRef, items, maxVisibleItems });
-    const { t: tQuota } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const { t: tQuota } = (0, uikit_product_locale_1.useLocale)('MobileLayout');
     if (!(0, helpers_1.hasVisibleActions)(items)) {
         return null;
     }
@@ -45,21 +45,11 @@ function MobileActions({ items, maxVisibleItems }) {
                             break;
                         }
                         case constants_1.BUTTON_TYPE.Quota: {
-                            const quotaExceededCount = react_2.Children.toArray(action.children).reduce((count, child) => {
-                                var _a, _b, _c, _d, _e, _f;
-                                return (0, react_2.isValidElement)(child) &&
-                                    !((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.loading) &&
-                                    !((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.unlimited) &&
-                                    (0, uikit_product_quota_1.checkExceeded)(((_d = (_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.limit) !== null && _d !== void 0 ? _d : 0) - ((_f = (_e = child === null || child === void 0 ? void 0 : child.props) === null || _e === void 0 ? void 0 : _e.created) !== null && _f !== void 0 ? _f : 0))
-                                    ? count + 1
-                                    : count;
-                            }, 0);
-                            const isQuotaExceededCountVisible = !action.dataError && quotaExceededCount > 0;
                             acc.push(Object.assign(Object.assign({}, action), { type: 'group', divider: acc.length > 0, items: [
                                     Object.assign(Object.assign({}, action), { content: {
                                             option: tQuota('quotas'),
-                                        }, afterContent: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isQuotaExceededCountVisible && ((0, jsx_runtime_1.jsx)(counter_1.Counter, { value: quotaExceededCount, appearance: 'red', size: 'm' })), (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, {})] })), itemWrapRender: item => {
-                                            const content = ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDropdown, { content: (0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaDropdownContent, Object.assign({}, action)), layoutType: 'mobile', children: item }));
+                                        }, onClick: () => setIsQuotaWidgetOpen(prev => !prev), itemWrapRender: item => {
+                                            const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item, (0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaWidgetMobile, Object.assign({}, action, { isOpen: isQuotaWidgetOpen, onClose: () => setIsQuotaWidgetOpen(false) }))] }));
                                             return action.tooltip ? ((0, jsx_runtime_1.jsx)(uikit_product_mobile_tooltip_1.MobileTooltip, Object.assign({}, action.tooltip, { children: content }))) : (content);
                                         } }),
                                 ] }));

package/dist/cjs/helperComponents/Actions/types.d.ts

@@ -1,14 +1,14 @@
 import { TooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { QuotaDropdownProps } from '@cloud-ru/uikit-product-quota';
 import { ButtonFilledProps, ButtonFunctionProps, ButtonOutlineProps, ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { ButtonDropdownProps } from '../ButtonDropdown';
 import { ButtonDroplistProps } from '../ButtonDroplist';
 import { ButtonKebabProps } from '../ButtonKebab';
+import { ButtonQuotaProps } from '../ButtonQuota';
 import { BUTTON_TYPE } from './constants';
 type ButtonDropdownPropsWithoutLayout = Omit<ButtonDropdownProps, 'layoutType'>;
 type ButtonKebabPropsWithoutLayout = Omit<ButtonKebabProps, 'layoutType'>;
 type ButtonDroplistWithoutLayout = Omit<ButtonDroplistProps, 'layoutType'>;
-type ButtonQuotaDropdownWithoutLayout = Omit<QuotaDropdownProps, 'layoutType'>;
+type ButtonQuotaDropdownWithoutLayout = Omit<ButtonQuotaProps, 'layoutType'>;
 export type Action = {
     tooltip?: TooltipProps;
     hidden?: boolean;

package/dist/cjs/helperComponents/ButtonQuota/ButtonQuota.d.ts

@@ -0,0 +1,4 @@
+import { QuotaWidgetMobileProps, QuotaWidgetProps } from '@cloud-ru/uikit-product-quota';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+export type ButtonQuotaProps = WithLayoutType<Omit<QuotaWidgetProps, 'buttonProps'> | Omit<QuotaWidgetMobileProps, 'isOpen' | 'onClose'>> & Pick<QuotaWidgetProps, 'buttonProps'>;
+export declare function ButtonQuota({ layoutType, buttonProps, ...props }: ButtonQuotaProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ButtonQuota/ButtonQuota.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonQuota = ButtonQuota;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_quota_1 = require("@cloud-ru/uikit-product-quota");
+const button_1 = require("@snack-uikit/button");
+function ButtonQuota(_a) {
+    var { layoutType, buttonProps } = _a, props = __rest(_a, ["layoutType", "buttonProps"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('MobileLayout');
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const exhaustedCount = props.quotas.filter(item => item.remains === 0).length;
+    if (layoutType === 'mobile') {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({ label: t('quotas'), icon: isOpen ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, {}), counter: exhaustedCount > 0
+                        ? {
+                            value: exhaustedCount,
+                            appearance: 'red',
+                        }
+                        : undefined, size: 'm' }, buttonProps, { onClick: () => setIsOpen(prev => !prev) })), (0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaWidgetMobile, Object.assign({}, props, { isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
+    }
+    return (0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaWidget, Object.assign({}, props, { buttonProps: Object.assign({ size: 'm' }, buttonProps) }));
+}

package/dist/cjs/helperComponents/ButtonQuota/index.d.ts

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

package/dist/cjs/helperComponents/ButtonQuota/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonQuota"), exports);

package/dist/esm/helperComponents/Actions/ActionView.js

@@ -11,13 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { QuotaDropdown } from '@cloud-ru/uikit-product-quota';
 import { ButtonFilled, ButtonFunction, ButtonOutline, ButtonSimple, ButtonTonal, } from '@snack-uikit/button';
 import { ButtonDropdown } from '../ButtonDropdown';
 import { ButtonDroplist } from '../ButtonDroplist';
 import { ButtonKebab } from '../ButtonKebab';
+import { ButtonQuota } from '../ButtonQuota';
 import { BUTTON_TYPE } from './constants';
 export function ActionView(_a) {
+    var _b;
     var { variant, tooltip, hidden = false, layoutType, commonProps } = _a, buttonProps = __rest(_a, ["variant", "tooltip", "hidden", "layoutType", "commonProps"]);
     if (hidden) {
         return null;
@@ -47,7 +48,7 @@ export function ActionView(_a) {
             return addTooltip(_jsx(ButtonDroplist, { button: Object.assign(Object.assign({}, button), commonProps), list: list, layoutType: layoutType }));
         }
         case BUTTON_TYPE.Quota: {
-            return addTooltip(_jsx(QuotaDropdown, Object.assign({}, buttonProps, commonProps, { layoutType: layoutType })));
+            return addTooltip(_jsx(ButtonQuota, Object.assign({}, buttonProps, { buttonProps: (_b = buttonProps.buttonProps) !== null && _b !== void 0 ? _b : commonProps, layoutType: layoutType })));
         }
         default:
             return null;

package/dist/esm/helperComponents/Actions/MobileActions.js

@@ -1,13 +1,12 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { ChevronDownSVG, KebabSVG } from '@cloud-ru/uikit-product-icons';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { AdaptiveDropdown, MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
 import { MobileTooltip, WithMobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { checkExceeded, QuotaDropdownContent } from '@cloud-ru/uikit-product-quota';
+import { QuotaWidgetMobile } from '@cloud-ru/uikit-product-quota';
 import { ButtonOutline } from '@snack-uikit/button';
-import { Counter } from '@snack-uikit/counter';
 import { useDynamicList } from '@snack-uikit/utils';
 import { ActionView } from './ActionView';
 import { BUTTON_TYPE } from './constants';
@@ -16,8 +15,9 @@ import styles from './styles.module.css';
 export function MobileActions({ items, maxVisibleItems }) {
     const containerRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
+    const [isQuotaWidgetOpen, setIsQuotaWidgetOpen] = useState(false);
     const { visibleItems, hiddenItems } = useDynamicList({ parentContainerRef: containerRef, items, maxVisibleItems });
-    const { t: tQuota } = useLocale('Quota');
+    const { t: tQuota } = useLocale('MobileLayout');
     if (!hasVisibleActions(items)) {
         return null;
     }
@@ -39,21 +39,11 @@ export function MobileActions({ items, maxVisibleItems }) {
                             break;
                         }
                         case BUTTON_TYPE.Quota: {
-                            const quotaExceededCount = Children.toArray(action.children).reduce((count, child) => {
-                                var _a, _b, _c, _d, _e, _f;
-                                return isValidElement(child) &&
-                                    !((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.loading) &&
-                                    !((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.unlimited) &&
-                                    checkExceeded(((_d = (_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.limit) !== null && _d !== void 0 ? _d : 0) - ((_f = (_e = child === null || child === void 0 ? void 0 : child.props) === null || _e === void 0 ? void 0 : _e.created) !== null && _f !== void 0 ? _f : 0))
-                                    ? count + 1
-                                    : count;
-                            }, 0);
-                            const isQuotaExceededCountVisible = !action.dataError && quotaExceededCount > 0;
                             acc.push(Object.assign(Object.assign({}, action), { type: 'group', divider: acc.length > 0, items: [
                                     Object.assign(Object.assign({}, action), { content: {
                                             option: tQuota('quotas'),
-                                        }, afterContent: (_jsxs(_Fragment, { children: [isQuotaExceededCountVisible && (_jsx(Counter, { value: quotaExceededCount, appearance: 'red', size: 'm' })), _jsx(ChevronDownSVG, {})] })), itemWrapRender: item => {
-                                            const content = (_jsx(AdaptiveDropdown, { content: _jsx(QuotaDropdownContent, Object.assign({}, action)), layoutType: 'mobile', children: item }));
+                                        }, onClick: () => setIsQuotaWidgetOpen(prev => !prev), itemWrapRender: item => {
+                                            const content = (_jsxs(_Fragment, { children: [item, _jsx(QuotaWidgetMobile, Object.assign({}, action, { isOpen: isQuotaWidgetOpen, onClose: () => setIsQuotaWidgetOpen(false) }))] }));
                                             return action.tooltip ? (_jsx(MobileTooltip, Object.assign({}, action.tooltip, { children: content }))) : (content);
                                         } }),
                                 ] }));

package/dist/esm/helperComponents/Actions/types.d.ts

@@ -1,14 +1,14 @@
 import { TooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { QuotaDropdownProps } from '@cloud-ru/uikit-product-quota';
 import { ButtonFilledProps, ButtonFunctionProps, ButtonOutlineProps, ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { ButtonDropdownProps } from '../ButtonDropdown';
 import { ButtonDroplistProps } from '../ButtonDroplist';
 import { ButtonKebabProps } from '../ButtonKebab';
+import { ButtonQuotaProps } from '../ButtonQuota';
 import { BUTTON_TYPE } from './constants';
 type ButtonDropdownPropsWithoutLayout = Omit<ButtonDropdownProps, 'layoutType'>;
 type ButtonKebabPropsWithoutLayout = Omit<ButtonKebabProps, 'layoutType'>;
 type ButtonDroplistWithoutLayout = Omit<ButtonDroplistProps, 'layoutType'>;
-type ButtonQuotaDropdownWithoutLayout = Omit<QuotaDropdownProps, 'layoutType'>;
+type ButtonQuotaDropdownWithoutLayout = Omit<ButtonQuotaProps, 'layoutType'>;
 export type Action = {
     tooltip?: TooltipProps;
     hidden?: boolean;

package/dist/esm/helperComponents/ButtonQuota/ButtonQuota.d.ts

@@ -0,0 +1,4 @@
+import { QuotaWidgetMobileProps, QuotaWidgetProps } from '@cloud-ru/uikit-product-quota';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+export type ButtonQuotaProps = WithLayoutType<Omit<QuotaWidgetProps, 'buttonProps'> | Omit<QuotaWidgetMobileProps, 'isOpen' | 'onClose'>> & Pick<QuotaWidgetProps, 'buttonProps'>;
+export declare function ButtonQuota({ layoutType, buttonProps, ...props }: ButtonQuotaProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ButtonQuota/ButtonQuota.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { QuotaWidget, QuotaWidgetMobile, } from '@cloud-ru/uikit-product-quota';
+import { ButtonFunction } from '@snack-uikit/button';
+export function ButtonQuota(_a) {
+    var { layoutType, buttonProps } = _a, props = __rest(_a, ["layoutType", "buttonProps"]);
+    const { t } = useLocale('MobileLayout');
+    const [isOpen, setIsOpen] = useState(false);
+    const exhaustedCount = props.quotas.filter(item => item.remains === 0).length;
+    if (layoutType === 'mobile') {
+        return (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, Object.assign({ label: t('quotas'), icon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), counter: exhaustedCount > 0
+                        ? {
+                            value: exhaustedCount,
+                            appearance: 'red',
+                        }
+                        : undefined, size: 'm' }, buttonProps, { onClick: () => setIsOpen(prev => !prev) })), _jsx(QuotaWidgetMobile, Object.assign({}, props, { isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
+    }
+    return _jsx(QuotaWidget, Object.assign({}, props, { buttonProps: Object.assign({ size: 'm' }, buttonProps) }));
+}

package/dist/esm/helperComponents/ButtonQuota/index.d.ts

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

package/dist/esm/helperComponents/ButtonQuota/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-layout",
   "title": "Mobile Layout",
-  "version": "2.0.20",
+  "version": "2.1.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,11 +43,10 @@
     "@cloud-ru/uikit-product-mobile-modal": "2.1.2",
     "@cloud-ru/uikit-product-mobile-tooltip": "1.1.11",
     "@cloud-ru/uikit-product-page-layout": "2.1.5",
-    "@cloud-ru/uikit-product-quota": "2.0.14",
+    "@cloud-ru/uikit-product-quota": "2.1.0",
     "@cloud-ru/uikit-product-utils": "9.1.0",
     "@snack-uikit/button": "0.19.7",
     "@snack-uikit/card": "0.20.18",
-    "@snack-uikit/counter": "0.8.9",
     "@snack-uikit/icon-predefined": "0.7.3",
     "@snack-uikit/truncate-string": "0.7.11",
     "@snack-uikit/typography": "0.8.4",
@@ -57,5 +56,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "ce396a9b33a0db755d527f63e003c3a400484bbc"
+  "gitHead": "c029a007c08ef48f731f5620e17747f0cfc70179"
 }

package/src/helperComponents/Actions/ActionView.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 
 import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { QuotaDropdown, QuotaDropdownProps } from '@cloud-ru/uikit-product-quota';
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import {
   ButtonFilled,
@@ -19,6 +18,7 @@ import {
 import { ButtonDropdown, ButtonDropdownProps } from '../ButtonDropdown';
 import { ButtonDroplist, ButtonDroplistProps } from '../ButtonDroplist';
 import { ButtonKebab, ButtonKebabProps } from '../ButtonKebab';
+import { ButtonQuota, ButtonQuotaProps } from '../ButtonQuota';
 import { BUTTON_TYPE } from './constants';
 import { Action } from './types';
 
@@ -72,7 +72,11 @@ export function ActionView({
 
     case BUTTON_TYPE.Quota: {
       return addTooltip(
-        <QuotaDropdown {...(buttonProps as QuotaDropdownProps)} {...commonProps} layoutType={layoutType} />,
+        <ButtonQuota
+          {...(buttonProps as ButtonQuotaProps)}
+          buttonProps={(buttonProps as ButtonQuotaProps).buttonProps ?? commonProps}
+          layoutType={layoutType}
+        />,
       );
     }
     default:

package/src/helperComponents/Actions/MobileActions.tsx

@@ -1,12 +1,11 @@
-import { Children, isValidElement, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { ChevronDownSVG, KebabSVG } from '@cloud-ru/uikit-product-icons';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { AdaptiveDropdown, MobileDroplist, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
 import { MobileTooltip, WithMobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { checkExceeded, QuotaCardProps, QuotaDropdownContent } from '@cloud-ru/uikit-product-quota';
+import { QuotaWidgetMobile } from '@cloud-ru/uikit-product-quota';
 import { ButtonOutline } from '@snack-uikit/button';
-import { Counter } from '@snack-uikit/counter';
 import { useDynamicList } from '@snack-uikit/utils';
 
 import { ActionView } from './ActionView';
@@ -19,9 +18,10 @@ export function MobileActions({ items, maxVisibleItems }: ActionsProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isQuotaWidgetOpen, setIsQuotaWidgetOpen] = useState(false);
   const { visibleItems, hiddenItems } = useDynamicList({ parentContainerRef: containerRef, items, maxVisibleItems });
 
-  const { t: tQuota } = useLocale('Quota');
+  const { t: tQuota } = useLocale('MobileLayout');
 
   if (!hasVisibleActions(items)) {
     return null;
@@ -67,19 +67,6 @@ export function MobileActions({ items, maxVisibleItems }: ActionsProps) {
                   break;
                 }
                 case BUTTON_TYPE.Quota: {
-                  const quotaExceededCount = Children.toArray(action.children).reduce<number>(
-                    (count, child) =>
-                      isValidElement<QuotaCardProps>(child) &&
-                      !child?.props?.loading &&
-                      !child?.props?.unlimited &&
-                      checkExceeded((child?.props?.limit ?? 0) - (child?.props?.created ?? 0))
-                        ? count + 1
-                        : count,
-                    0,
-                  );
-
-                  const isQuotaExceededCountVisible = !action.dataError && quotaExceededCount > 0;
-
                   acc.push({
                     ...action,
                     type: 'group',
@@ -90,20 +77,17 @@ export function MobileActions({ items, maxVisibleItems }: ActionsProps) {
                         content: {
                           option: tQuota('quotas'),
                         },
-                        afterContent: (
-                          <>
-                            {isQuotaExceededCountVisible && (
-                              <Counter value={quotaExceededCount} appearance='red' size='m' />
-                            )}
-                            <ChevronDownSVG />
-                          </>
-                        ),
-
+                        onClick: () => setIsQuotaWidgetOpen(prev => !prev),
                         itemWrapRender: item => {
                           const content = (
-                            <AdaptiveDropdown content={<QuotaDropdownContent {...action} />} layoutType='mobile'>
+                            <>
                               {item}
-                            </AdaptiveDropdown>
+                              <QuotaWidgetMobile
+                                {...action}
+                                isOpen={isQuotaWidgetOpen}
+                                onClose={() => setIsQuotaWidgetOpen(false)}
+                              />
+                            </>
                           );
 
                           return action.tooltip ? (

package/src/helperComponents/Actions/types.ts

@@ -1,5 +1,4 @@
 import { TooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { QuotaDropdownProps } from '@cloud-ru/uikit-product-quota';
 import {
   ButtonFilledProps,
   ButtonFunctionProps,
@@ -11,12 +10,13 @@ import {
 import { ButtonDropdownProps } from '../ButtonDropdown';
 import { ButtonDroplistProps } from '../ButtonDroplist';
 import { ButtonKebabProps } from '../ButtonKebab';
+import { ButtonQuotaProps } from '../ButtonQuota';
 import { BUTTON_TYPE } from './constants';
 
 type ButtonDropdownPropsWithoutLayout = Omit<ButtonDropdownProps, 'layoutType'>;
 type ButtonKebabPropsWithoutLayout = Omit<ButtonKebabProps, 'layoutType'>;
 type ButtonDroplistWithoutLayout = Omit<ButtonDroplistProps, 'layoutType'>;
-type ButtonQuotaDropdownWithoutLayout = Omit<QuotaDropdownProps, 'layoutType'>;
+type ButtonQuotaDropdownWithoutLayout = Omit<ButtonQuotaProps, 'layoutType'>;
 
 export type Action = {
   tooltip?: TooltipProps;

package/src/helperComponents/ButtonQuota/ButtonQuota.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import {
+  QuotaWidget,
+  QuotaWidgetMobile,
+  QuotaWidgetMobileProps,
+  QuotaWidgetProps,
+} from '@cloud-ru/uikit-product-quota';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunction } from '@snack-uikit/button';
+
+export type ButtonQuotaProps = WithLayoutType<
+  Omit<QuotaWidgetProps, 'buttonProps'> | Omit<QuotaWidgetMobileProps, 'isOpen' | 'onClose'>
+> &
+  Pick<QuotaWidgetProps, 'buttonProps'>;
+
+export function ButtonQuota({ layoutType, buttonProps, ...props }: ButtonQuotaProps) {
+  const { t } = useLocale('MobileLayout');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const exhaustedCount = props.quotas.filter(item => item.remains === 0).length;
+
+  if (layoutType === 'mobile') {
+    return (
+      <>
+        <ButtonFunction
+          label={t('quotas')}
+          icon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          counter={
+            exhaustedCount > 0
+              ? {
+                  value: exhaustedCount,
+                  appearance: 'red',
+                }
+              : undefined
+          }
+          size='m'
+          {...buttonProps}
+          onClick={() => setIsOpen(prev => !prev)}
+        />
+        <QuotaWidgetMobile {...(props as QuotaWidgetMobileProps)} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+      </>
+    );
+  }
+
+  return <QuotaWidget {...(props as QuotaWidgetProps)} buttonProps={{ size: 'm', ...buttonProps }} />;
+}

package/src/helperComponents/ButtonQuota/index.ts

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