@cloud-ru/uikit-product-quota 2.0.14 → 2.0.15-preview-e657b6a5.0

package/dist/cjs/components/QuotaWidget/QuotaWidget.d.ts

@@ -0,0 +1,12 @@
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunctionProps } from '@snack-uikit/button';
+import { QuotaWidgetPropsBase } from '../../types';
+export type QuotaWidgetProps = WithSupportProps<QuotaWidgetPropsBase & {
+    /** Ссылка на страницу квот по проекту */
+    quotasUrl: string;
+    /** Колбек клика по ссылке на страницу квот по проекту */
+    onQuotasUrlClick?: () => void;
+    /** Свойства кнопки открытия виджета */
+    buttonProps?: Pick<ButtonFunctionProps, 'size' | 'className' | 'fullWidth' | 'label' | 'appearance' | 'disabled'>;
+}>;
+export declare function QuotaWidget({ quotas, disableSorting, isLoading, isError, onRefresh, projectName, quotasUrl, canEditQuota, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen, onQuotasUrlClick, buttonProps, ...props }: QuotaWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidget/QuotaWidget.js

@@ -0,0 +1,44 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaWidget = QuotaWidget;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const button_1 = require("@snack-uikit/button");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const icons_1 = require("@snack-uikit/icons");
+const QuotaCardsGrid_1 = require("../../helperComponents/QuotaCardsGrid");
+const ProjectHeader_1 = require("./components/ProjectHeader");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function QuotaWidget(_a) {
+    var { quotas, disableSorting, isLoading, isError, onRefresh, projectName, quotasUrl, canEditQuota, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen, onQuotasUrlClick, buttonProps } = _a, props = __rest(_a, ["quotas", "disableSorting", "isLoading", "isError", "onRefresh", "projectName", "quotasUrl", "canEditQuota", "hideIncreaseQuotaButton", "onIncreaseQuotaClick", "onWidgetOpen", "onQuotasUrlClick", "buttonProps"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const handleOpenChange = (open) => {
+        setIsOpen(open);
+        if (open) {
+            onWidgetOpen === null || onWidgetOpen === void 0 ? void 0 : onWidgetOpen();
+        }
+    };
+    const exhaustedCount = quotas.filter(item => item.remains === 0).length;
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, props, { placement: 'bottom-end', open: isOpen, onOpenChange: handleOpenChange, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(ProjectHeader_1.ProjectHeader, { projectName: projectName, quotasUrl: quotasUrl, canEditQuota: canEditQuota, isError: isError, onIncreaseQuotaClick: onIncreaseQuotaClick, hideIncreaseQuotaButton: hideIncreaseQuotaButton, onQuotasUrlClick: onQuotasUrlClick }), (0, jsx_runtime_1.jsx)(QuotaCardsGrid_1.QuotaCardsGrid, { quotas: quotas, disableSorting: disableSorting, isLoading: isLoading, isError: isError, onRefresh: onRefresh })] }), children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({ label: t('quotas'), icon: isOpen ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {}), counter: exhaustedCount > 0
+                ? {
+                    value: exhaustedCount,
+                    appearance: 'red',
+                }
+                : undefined, size: 's' }, buttonProps)) })));
+}

package/dist/cjs/components/QuotaWidget/components/ProjectHeader/ProjectHeader.d.ts

@@ -0,0 +1,7 @@
+import { QuotaWidgetPropsBase } from '../../../../types';
+type ProjectHeaderProps = Pick<QuotaWidgetPropsBase, 'projectName' | 'canEditQuota' | 'isError' | 'hideIncreaseQuotaButton' | 'onIncreaseQuotaClick'> & {
+    quotasUrl: string;
+    onQuotasUrlClick?: () => void;
+};
+export declare function ProjectHeader({ projectName, quotasUrl, canEditQuota, isError, onIncreaseQuotaClick, hideIncreaseQuotaButton, onQuotasUrlClick, }: ProjectHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/QuotaWidget/components/ProjectHeader/ProjectHeader.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectHeader = ProjectHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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_title_clickable_1 = require("@cloud-ru/uikit-product-title-clickable");
+const button_1 = require("@snack-uikit/button");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ProjectHeader({ projectName, quotasUrl, canEditQuota, isError, onIncreaseQuotaClick, hideIncreaseQuotaButton, onQuotasUrlClick, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.projectWrapper, children: [(0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { title: projectName, href: quotasUrl, target: '_blank', icon: uikit_product_icons_1.CloudFolderSVG, onClick: onQuotasUrlClick }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.subtitle, children: t('widgetSubtitle') })] }), canEditQuota && !isError && !hideIncreaseQuotaButton && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { appearance: 'neutral', label: t('increaseQuota'), size: 's', onClick: onIncreaseQuotaClick }))] }));
+}

package/dist/cjs/components/QuotaWidget/components/ProjectHeader/index.d.ts

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

package/dist/cjs/components/{QuotaButtonDropdown/components → QuotaWidget/components/ProjectHeader}/index.js

@@ -14,4 +14,4 @@ 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("./QuotaDropdownContent"), exports);
+__exportStar(require("./ProjectHeader"), exports);

package/dist/cjs/components/QuotaWidget/components/ProjectHeader/styles.module.css

@@ -0,0 +1,17 @@
+.header{
+  display:grid;
+  grid-template-columns:minmax(0, 1fr) 128px;
+  align-items:center;
+  justify-content:space-between;
+  -moz-column-gap:12px;
+       column-gap:12px;
+}
+
+.projectWrapper{
+  min-width:0;
+}
+
+.subtitle{
+  display:block;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

package/dist/cjs/components/QuotaWidget/index.d.ts

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

package/dist/cjs/components/{QuotaButtonDropdown → QuotaWidget}/index.js

@@ -14,5 +14,4 @@ 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("./QuotaDropdown"), exports);
-__exportStar(require("./components/QuotaDropdownContent"), exports);
+__exportStar(require("./QuotaWidget"), exports);

package/dist/cjs/components/QuotaWidget/styles.module.css

@@ -0,0 +1,9 @@
+.content{
+  width:620px;
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  padding:12px 16px 0;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-radius:12px;
+}

package/dist/cjs/components/QuotaWidgetCard/QuotaWidgetCard.d.ts

@@ -0,0 +1,7 @@
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { QuotaItem } from '../../types';
+export type QuotaWidgetCardProps = WithSupportProps<{
+    /** Отображаемая квота */
+    quota: QuotaItem;
+}>;
+export declare function QuotaWidgetCard({ quota, ...props }: QuotaWidgetCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidgetCard/QuotaWidgetCard.js

@@ -0,0 +1,56 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaWidgetCard = QuotaWidgetCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const progress_bar_1 = require("@snack-uikit/progress-bar");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const formatNumber_1 = require("../../utils/formatNumber");
+const getPercent_1 = require("../../utils/getPercent");
+const QuotaTooltip_1 = require("./components/QuotaTooltip");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const QUOTA_USAGE_PROGRESS = {
+    HIGH: 90,
+    MEDIUM: 70,
+};
+function getProgressAppearance(percent) {
+    if (percent >= QUOTA_USAGE_PROGRESS.HIGH) {
+        return 'red';
+    }
+    else if (percent >= QUOTA_USAGE_PROGRESS.MEDIUM) {
+        return 'orange';
+    }
+    return 'green';
+}
+function QuotaWidgetCard(_a) {
+    var { quota } = _a, props = __rest(_a, ["quota"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const percent = (0, getPercent_1.getPercent)(quota);
+    const rows = [
+        {
+            label: t('cardAvailable'),
+            value: quota.limit,
+        },
+        {
+            label: t('cardRemaining'),
+            value: quota.remains,
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { triggerClassName: styles_module_scss_1.default.tooltip, hoverDelayOpen: 500, tip: (0, jsx_runtime_1.jsx)(QuotaTooltip_1.QuotaTooltip, { quota: quota }), children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: styles_module_scss_1.default.card, "data-exhausted": quota.remains === 0 }, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: 2, text: quota.name }) }), (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansLabelM, { className: styles_module_scss_1.default.percent, children: [(0, formatNumber_1.formatNumber)(percent), "%"] })] }), (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, { progress: percent, size: 'xs', appearance: getProgressAppearance(percent) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.info, children: rows.map(row => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.row, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { className: styles_module_scss_1.default.label, children: row.label }), (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansLabelL, { className: styles_module_scss_1.default.value, children: [(0, formatNumber_1.formatNumber)(row.value), " ", (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.unit, children: quota.unitDisplayName })] })] }, row.label))) })] })) }));
+}

package/dist/cjs/components/QuotaWidgetCard/components/QuotaTooltip/QuotaTooltip.d.ts

@@ -0,0 +1,6 @@
+import { QuotaItem } from '../../../../types';
+type QuotaTooltipProps = {
+    quota: QuotaItem;
+};
+export declare function QuotaTooltip({ quota }: QuotaTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/QuotaWidgetCard/components/QuotaTooltip/QuotaTooltip.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaTooltip = QuotaTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const typography_1 = require("@snack-uikit/typography");
+const formatNumber_1 = require("../../../../utils/formatNumber");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function QuotaTooltip({ quota }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const rows = [
+        { label: t('tooltipAvailable'), value: quota.limit },
+        { label: t('tooltipUsed'), value: quota.usage },
+        { label: t('tooltipRemaining'), value: quota.remains },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [rows.map(row => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.row, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { children: row.label }), (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyS, { children: [(0, formatNumber_1.formatNumber)(row.value), " ", quota.unitDisplayName] })] }, row.label))), quota.remains === 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.exhausted, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { tag: 'div', children: t('tooltipExhaustedHint.first') }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { tag: 'div', children: t('tooltipExhaustedHint.second') })] }))] }));
+}

package/dist/cjs/components/QuotaWidgetCard/components/QuotaTooltip/index.d.ts

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

package/dist/cjs/components/{QuotaCard/components → QuotaWidgetCard/components/QuotaTooltip}/index.js

@@ -14,6 +14,4 @@ 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("./QuotaCardLayout"), exports);
-__exportStar(require("./NoData"), exports);
-__exportStar(require("./DataRow"), exports);
+__exportStar(require("./QuotaTooltip"), exports);

package/dist/cjs/components/QuotaWidgetCard/components/QuotaTooltip/styles.module.css

@@ -0,0 +1,19 @@
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+  width:216px;
+}
+
+.row{
+  display:flex;
+  justify-content:space-between;
+  -moz-column-gap:8px;
+       column-gap:8px;
+}
+
+.exhausted{
+  margin-top:8px;
+  padding-top:8px;
+  border-top:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}

package/dist/cjs/components/QuotaWidgetCard/index.d.ts

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

package/dist/cjs/components/QuotaWidgetCard/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("./QuotaWidgetCard"), exports);

package/dist/cjs/components/QuotaWidgetCard/styles.module.css

@@ -0,0 +1,66 @@
+.tooltip{
+  display:block;
+}
+
+.card{
+  display:flex;
+  flex-direction:column;
+  row-gap:4px;
+  padding:8px;
+  background-color:var(--sys-neutral-background-opacity, rgba(238, 239, 243, 0.5019607843));
+  border-radius:4px;
+  height:-webkit-fill-available;
+  height:-moz-available;
+  height:stretch;
+}
+.card[data-exhausted=true]{
+  background-color:var(--sys-red-background, #fdf1ef);
+}
+
+.header{
+  display:flex;
+  align-items:flex-end;
+  justify-content:space-between;
+  -moz-column-gap:4px;
+       column-gap:4px;
+  flex:1;
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  align-self:flex-start;
+}
+
+.percent[data-family=sans][data-purpose=label][data-size=m]{
+  font-weight:400;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.info{
+  display:flex;
+  flex-direction:column;
+  row-gap:2px;
+}
+
+.row{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  -moz-column-gap:8px;
+       column-gap:8px;
+}
+
+.label[data-family=sans][data-purpose=label][data-size=m]{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  font-weight:400;
+}
+
+.value[data-family=sans][data-purpose=label][data-size=l]{
+  color:var(--sys-neutral-text-main, #41424e);
+  white-space:nowrap;
+  font-weight:400;
+}
+
+.unit{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

package/dist/cjs/components/QuotaWidgetMini/QuotaWidgetMini.d.ts

@@ -0,0 +1,7 @@
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { QuotaWidgetPropsBase } from '../../types';
+export type QuotaWidgetMiniProps = WithSupportProps<QuotaWidgetPropsBase & {
+    /** Флаг раскрытия аккордиона по умолчанию */
+    isExpandedDefault?: boolean;
+}>;
+export declare function QuotaWidgetMini({ quotas, disableSorting, isLoading, isError, onRefresh, projectName, canEditQuota, isExpandedDefault, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen, ...props }: QuotaWidgetMiniProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidgetMini/QuotaWidgetMini.js

@@ -0,0 +1,38 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaWidgetMini = QuotaWidgetMini;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const accordion_1 = require("@snack-uikit/accordion");
+const button_1 = require("@snack-uikit/button");
+const counter_1 = require("@snack-uikit/counter");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const QuotaCardsGrid_1 = require("../../helperComponents/QuotaCardsGrid");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const ACCORDION_ID = 'quotas-widget-accordion';
+function QuotaWidgetMini(_a) {
+    var { quotas, disableSorting, isLoading, isError, onRefresh, projectName, canEditQuota, isExpandedDefault, hideIncreaseQuotaButton, onIncreaseQuotaClick, onWidgetOpen } = _a, props = __rest(_a, ["quotas", "disableSorting", "isLoading", "isError", "onRefresh", "projectName", "canEditQuota", "isExpandedDefault", "hideIncreaseQuotaButton", "onIncreaseQuotaClick", "onWidgetOpen"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    const exhaustedCount = quotas.filter(item => item.remains === 0).length;
+    const handleExpandedChange = (expanded) => {
+        if (expanded) {
+            onWidgetOpen === null || onWidgetOpen === void 0 ? void 0 : onWidgetOpen();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary, Object.assign({}, props, { expandedDefault: isExpandedDefault ? ACCORDION_ID : undefined, onExpandedChange: handleExpandedChange, children: (0, jsx_runtime_1.jsxs)(accordion_1.AccordionPrimary.CollapseBlock, { id: ACCORDION_ID, className: styles_module_scss_1.default.collapse, header: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.title, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: 1, text: t('quotas') }) }), exhaustedCount > 0 && (0, jsx_runtime_1.jsx)(counter_1.Counter, { value: exhaustedCount, size: 's', appearance: 'red' })] }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.subtitle, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: 1, text: projectName }) })] }), children: [(0, jsx_runtime_1.jsx)(QuotaCardsGrid_1.QuotaCardsGrid, { isAccordion: true, quotas: quotas, disableSorting: disableSorting, isLoading: isLoading, isError: isError, onRefresh: onRefresh, isMobile: true }), !isError && canEditQuota && !hideIncreaseQuotaButton && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { className: styles_module_scss_1.default.button, fullWidth: true, appearance: 'neutral', label: t('increaseQuota'), size: 's', onClick: onIncreaseQuotaClick }))] }) })));
+}

package/dist/cjs/components/QuotaWidgetMini/index.d.ts

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

package/dist/cjs/components/QuotaWidgetMini/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("./QuotaWidgetMini"), exports);

package/dist/cjs/components/QuotaWidgetMini/styles.module.css

@@ -0,0 +1,19 @@
+.collapse{
+  padding:16px 24px;
+}
+
+.title{
+  display:flex;
+  align-items:center;
+  -moz-column-gap:4px;
+       column-gap:4px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.subtitle{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.button{
+  margin-top:12px;
+}

package/dist/cjs/components/QuotaWidgetMobile/QuotaWidgetMobile.d.ts

@@ -0,0 +1,9 @@
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { QuotaWidgetPropsBase } from '../../types';
+export type QuotaWidgetMobileProps = WithSupportProps<QuotaWidgetPropsBase & {
+    /** Флаг открытия модального окна */
+    isOpen: boolean;
+    /** Колбек на закрытие модального окна */
+    onClose: () => void;
+}>;
+export declare function QuotaWidgetMobile({ quotas, disableSorting, isLoading, isError, onRefresh, projectName, canEditQuota, isOpen, onClose, onIncreaseQuotaClick, hideIncreaseQuotaButton, ...props }: QuotaWidgetMobileProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/QuotaWidgetMobile/QuotaWidgetMobile.js

@@ -0,0 +1,31 @@
+"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.QuotaWidgetMobile = QuotaWidgetMobile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_mobile_modal_1 = require("@cloud-ru/uikit-product-mobile-modal");
+const QuotaCardsGrid_1 = require("../../helperComponents/QuotaCardsGrid");
+function QuotaWidgetMobile(_a) {
+    var { quotas, disableSorting, isLoading, isError, onRefresh, projectName, canEditQuota, isOpen, onClose, onIncreaseQuotaClick, hideIncreaseQuotaButton } = _a, props = __rest(_a, ["quotas", "disableSorting", "isLoading", "isError", "onRefresh", "projectName", "canEditQuota", "isOpen", "onClose", "onIncreaseQuotaClick", "hideIncreaseQuotaButton"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('Quota');
+    return (
+    // @ts-expect-error no approve button needed
+    (0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModal, Object.assign({}, props, { closeButtonEnabled: true, open: isOpen, onClose: onClose, title: t('quotas'), subtitle: projectName, cancelButton: isError || !canEditQuota || hideIncreaseQuotaButton
+            ? undefined
+            : {
+                appearance: 'neutral',
+                label: t('increaseQuota'),
+                onClick: onIncreaseQuotaClick,
+            }, content: (0, jsx_runtime_1.jsx)(QuotaCardsGrid_1.QuotaCardsGrid, { quotas: quotas, disableSorting: disableSorting, isLoading: isLoading, isError: isError, onRefresh: onRefresh, isMobile: true }) })));
+}

package/dist/cjs/components/QuotaWidgetMobile/index.d.ts

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

package/dist/cjs/components/QuotaWidgetMobile/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("./QuotaWidgetMobile"), exports);

package/dist/cjs/components/index.d.ts

@@ -1,2 +1,4 @@
-export * from './QuotaCard';
-export * from './QuotaButtonDropdown';
+export * from './QuotaWidget';
+export * from './QuotaWidgetMini';
+export * from './QuotaWidgetMobile';
+export * from './QuotaWidgetCard';

package/dist/cjs/components/index.js

@@ -14,5 +14,7 @@ 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("./QuotaCard"), exports);
-__exportStar(require("./QuotaButtonDropdown"), exports);
+__exportStar(require("./QuotaWidget"), exports);
+__exportStar(require("./QuotaWidgetMini"), exports);
+__exportStar(require("./QuotaWidgetMobile"), exports);
+__exportStar(require("./QuotaWidgetCard"), exports);

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

@@ -0,0 +1,7 @@
+import { QuotaWidgetPropsBase } from '../../types';
+type QuotaCardsGridProps = Pick<QuotaWidgetPropsBase, 'quotas' | 'disableSorting' | 'isLoading' | 'isError' | 'onRefresh'> & {
+    isAccordion?: boolean;
+    isMobile?: boolean;
+};
+export declare function QuotaCardsGrid({ quotas, isLoading, isError, onRefresh, disableSorting, isAccordion, isMobile, }: QuotaCardsGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/QuotaCardsGrid/QuotaCardsGrid.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotaCardsGrid = QuotaCardsGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scroll_1 = require("@snack-uikit/scroll");
+const Grid_1 = require("./components/Grid");
+const QuotaError_1 = require("./components/QuotaError");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function QuotaCardsGrid({ quotas, isLoading, isError, onRefresh, disableSorting = false, isAccordion = false, isMobile = false, }) {
+    const wrapperAttributes = {
+        className: styles_module_scss_1.default.wrapper,
+        'data-accordion': isAccordion,
+    };
+    const gridProps = {
+        quotas,
+        isLoading,
+        disableSorting,
+        isAccordion,
+        isMobile,
+    };
+    if (isError) {
+        return isMobile ? ((0, jsx_runtime_1.jsx)(QuotaError_1.QuotaError, { onRefresh: onRefresh })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({}, wrapperAttributes, { children: (0, jsx_runtime_1.jsx)(QuotaError_1.QuotaError, { onRefresh: onRefresh }) })));
+    }
+    return isMobile ? ((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({}, gridProps))) : ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, Object.assign({}, wrapperAttributes, { size: 's', children: (0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({}, gridProps)) })));
+}

package/dist/cjs/helperComponents/QuotaCardsGrid/components/Grid/Grid.d.ts

@@ -0,0 +1,7 @@
+import { QuotaWidgetPropsBase } from '../../../../types';
+type GridProps = Pick<QuotaWidgetPropsBase, 'quotas' | 'isLoading' | 'disableSorting'> & {
+    isAccordion?: boolean;
+    isMobile?: boolean;
+};
+export declare function Grid({ quotas, isLoading, disableSorting, isAccordion, isMobile }: GridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/QuotaCardsGrid/components/Grid/Grid.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = Grid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const QuotaWidgetCard_1 = require("../../../../components/QuotaWidgetCard");
+const getPercent_1 = require("../../../../utils/getPercent");
+const QuotaWidgetCardsSkeleton_1 = require("./components/QuotaWidgetCardsSkeleton");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function sortQuotas(quotas) {
+    return [...quotas].sort((first, second) => {
+        const percentFirst = (0, getPercent_1.getPercent)(first);
+        const percentSecond = (0, getPercent_1.getPercent)(second);
+        if (percentSecond !== percentFirst) {
+            return percentSecond - percentFirst;
+        }
+        return first.name.localeCompare(second.name);
+    });
+}
+function Grid({ quotas, isLoading, disableSorting = false, isAccordion = false, isMobile = false }) {
+    const sortedQuotas = disableSorting ? quotas : sortQuotas(quotas);
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.grid, "data-single": (quotas.length <= 1 && !isLoading) || isMobile || isAccordion, children: (0, jsx_runtime_1.jsx)(QuotaWidgetCardsSkeleton_1.QuotaWidgetCardsSkeleton, { isLoading: isLoading, children: sortedQuotas.map((quota, index) => ((0, jsx_runtime_1.jsx)(QuotaWidgetCard_1.QuotaWidgetCard, { quota: quota }, index))) }) }));
+}

package/dist/cjs/helperComponents/QuotaCardsGrid/components/Grid/components/QuotaWidgetCardsSkeleton/QuotaCardsSkeleton.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+type QuotaWidgetCardsSkeletonProps = PropsWithChildren<{
+    isLoading: boolean;
+}>;
+export declare function QuotaWidgetCardsSkeleton({ isLoading, children }: QuotaWidgetCardsSkeletonProps): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export {};