@cloud-ru/uikit-product-calculator 0.34.0 → 0.35.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.
 
+# 0.35.0 (2025-11-19)
+
+
+### Features
+
+* **SITE-10199:** update calculator info and fox scroll calculator ([396c783](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/396c78336370e1c87d565e8b16bc5445d636cb28))
+
+
+
+
+
 # 0.34.0 (2025-11-14)
 
 

package/dist/cjs/components/Catalog/Catalog.js

@@ -45,6 +45,8 @@ function Catalog() {
         },
         'data-test-id': dataTestId,
     }));
+    // FIXME: убрать после задачи PDS-3175
+    (0, hooks_1.useCatalogLockBodyScroll)({ catalogOpen: catalogOpen });
     const [openMobileCategory, setOpenMobileCategory] = (0, react_1.useState)(false);
     const isMobile = layoutType !== uikit_product_utils_1.LAYOUT_TYPE.Desktop && layoutType !== uikit_product_utils_1.LAYOUT_TYPE.DesktopSmall;
     const AdaptiveModal = isMobile ? uikit_product_mobile_modal_1.MobileModalCustom : modal_1.ModalCustom;

package/dist/cjs/components/Controls/SelectControl/SelectControl.d.ts

@@ -10,6 +10,7 @@ export type SelectControlItem = {
     icon?: ReactNode;
     disabled?: boolean;
     disabledReason?: ReactNode;
+    afterContent?: ReactNode;
     dataTestId?: string;
     onChangePeriod?: (value: PRICE_PERIOD) => void;
     canChangeWholePricePeriod?: boolean;

package/dist/cjs/components/Controls/SelectControl/SelectControl.js

@@ -19,6 +19,7 @@ function convertItemsToOptions(items) {
             disabled: item.disabled,
             option: (_a = item.label) !== null && _a !== void 0 ? _a : item.value,
             beforeContent: item.icon,
+            afterContent: item.afterContent,
         });
     });
 }

package/dist/cjs/config/platforms/advanced/product-config/AdvancedMySqlDataBase.js

@@ -16,7 +16,7 @@ const bdEngineVersionItems = [
     },
     {
         value: BdEngineVersionItem.General_Purpose,
-        label: 'General Purpose',
+        label: 'General-Purpose',
         description: `Инстансы используют ресурсы процессора совместно с другими инстансами того же класса, размещенными на одном физическом сервере`,
     },
 ];

package/dist/cjs/config/platforms/advanced/product-config/AdvancedPostgreSqlDatabase.js

@@ -33,7 +33,7 @@ const bdEngineVersionItems = [
     },
     {
         value: BdEngineVersionItem.General_Purpose,
-        label: 'General Purpose',
+        label: 'General-Purpose',
         description: `Инстансы используют ресурсы процессора совместно с другими инстансами того же класса, размещенными на одном физическом сервере`,
     },
 ];

package/dist/cjs/config/utils/{diskPostgreSqlMySQL.d.ts → diskPostgreSqlMySQL/diskPostgreSqlMySQL.d.ts}

@@ -1,5 +1,5 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { ObjectControl, SelectSingleControl, StepperControl } from '../../components';
+import { ObjectControl, SelectSingleControl, StepperControl } from '../../../components';
 export declare const SpecificationItem: {
     readonly Extreme_SSD: "Extreme SSD";
     readonly Cloud_SSD: "Cloud SSD";
@@ -8,9 +8,11 @@ export declare const SpecificationItem: {
 export declare const specificationItems: ({
     value: "Extreme SSD";
     label: string;
+    afterContent: import("react/jsx-runtime").JSX.Element;
 } | {
     value: "Cloud SSD";
     label: string;
+    afterContent: import("react/jsx-runtime").JSX.Element;
 })[];
 type DiskSpecification = ValueOf<typeof SpecificationItem>;
 type GetDiskProps = {

package/dist/cjs/config/utils/{diskPostgreSqlMySQL.js → diskPostgreSqlMySQL/diskPostgreSqlMySQL.js}

@@ -10,10 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.specificationItems = exports.SpecificationItem = void 0;
 exports.getDisk = getDisk;
-const components_1 = require("../../components");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const components_1 = require("../../../components");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.SpecificationItem = {
     Extreme_SSD: 'Extreme SSD',
     Cloud_SSD: 'Cloud SSD',
@@ -23,10 +30,12 @@ exports.specificationItems = [
     {
         value: exports.SpecificationItem.Extreme_SSD,
         label: 'Extreme SSD',
+        afterContent: ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: '\u0414\u0438\u0441\u043A\u0438 Ultra-high I/O \u0441 \u0443\u0432\u0435\u043B\u0438\u0447\u0435\u043D\u043D\u043E\u0439 \u043F\u0440\u043E\u043F\u0443\u0441\u043A\u043D\u043E\u0439 \u0441\u043F\u043E\u0441\u043E\u0431\u043D\u043E\u0441\u0442\u044C\u044E', children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.QuestionRoundSVG, { size: 20, className: styles_module_scss_1.default.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) })),
     },
     {
         value: exports.SpecificationItem.Cloud_SSD,
         label: 'Cloud SSD',
+        afterContent: ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: '\u0414\u0438\u0441\u043A\u0438 Ultra-high I/O', children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.QuestionRoundSVG, { size: 20, className: styles_module_scss_1.default.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) })),
     },
 ];
 function getDisk({ space, specification }) {

package/dist/cjs/config/utils/diskPostgreSqlMySQL/index.d.ts

@@ -0,0 +1 @@
+export { getDisk } from './diskPostgreSqlMySQL';

package/dist/cjs/config/utils/diskPostgreSqlMySQL/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisk = void 0;
+var diskPostgreSqlMySQL_1 = require("./diskPostgreSqlMySQL");
+Object.defineProperty(exports, "getDisk", { enumerable: true, get: function () { return diskPostgreSqlMySQL_1.getDisk; } });

package/dist/cjs/config/utils/diskPostgreSqlMySQL/styles.module.css

@@ -0,0 +1,6 @@
+.icon{
+  flex-shrink:0;
+  box-sizing:content-box;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  margin:auto 0;
+}

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

@@ -1,4 +1,5 @@
 export * from './useAdaptive';
 export * from './useCatalogCardClick';
+export * from './useCatalogLockBodyScroll';
 export * from './useProductClick';
 export * from './useProductDelete';

package/dist/cjs/hooks/index.js

@@ -16,5 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useAdaptive"), exports);
 __exportStar(require("./useCatalogCardClick"), exports);
+__exportStar(require("./useCatalogLockBodyScroll"), exports);
 __exportStar(require("./useProductClick"), exports);
 __exportStar(require("./useProductDelete"), exports);

package/dist/cjs/hooks/useCatalogLockBodyScroll.d.ts

@@ -0,0 +1,5 @@
+type UseLockBodyScrollProps = {
+    catalogOpen: boolean;
+};
+export declare const useCatalogLockBodyScroll: ({ catalogOpen }: UseLockBodyScrollProps) => void;
+export {};

package/dist/cjs/hooks/useCatalogLockBodyScroll.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalogLockBodyScroll = void 0;
+const react_1 = require("react");
+// FIXME: убрать после задачи PDS-3175
+const useCatalogLockBodyScroll = ({ catalogOpen }) => {
+    (0, react_1.useEffect)(() => {
+        if (catalogOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, [catalogOpen]);
+};
+exports.useCatalogLockBodyScroll = useCatalogLockBodyScroll;

package/dist/esm/components/Catalog/Catalog.js

@@ -14,7 +14,7 @@ import { ModalCustom } from '@snack-uikit/modal';
 import { Tag } from '@snack-uikit/tag';
 import { Tooltip } from '@snack-uikit/tooltip';
 import { useCalculatorContext } from '../../contexts';
-import { useCatalogCardClick } from '../../hooks';
+import { useCatalogCardClick, useCatalogLockBodyScroll } from '../../hooks';
 import { parseKeyToDataTest } from '../../utils';
 import { PrivateCardHeader } from './components';
 import styles from './styles.module.css';
@@ -39,6 +39,8 @@ export function Catalog() {
         },
         'data-test-id': dataTestId,
     }));
+    // FIXME: убрать после задачи PDS-3175
+    useCatalogLockBodyScroll({ catalogOpen: catalogOpen });
     const [openMobileCategory, setOpenMobileCategory] = useState(false);
     const isMobile = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
     const AdaptiveModal = isMobile ? MobileModalCustom : ModalCustom;

package/dist/esm/components/Controls/SelectControl/SelectControl.d.ts

@@ -10,6 +10,7 @@ export type SelectControlItem = {
     icon?: ReactNode;
     disabled?: boolean;
     disabledReason?: ReactNode;
+    afterContent?: ReactNode;
     dataTestId?: string;
     onChangePeriod?: (value: PRICE_PERIOD) => void;
     canChangeWholePricePeriod?: boolean;

package/dist/esm/components/Controls/SelectControl/SelectControl.js

@@ -12,6 +12,7 @@ function convertItemsToOptions(items) {
             disabled: item.disabled,
             option: (_a = item.label) !== null && _a !== void 0 ? _a : item.value,
             beforeContent: item.icon,
+            afterContent: item.afterContent,
         });
     });
 }

package/dist/esm/config/platforms/advanced/product-config/AdvancedMySqlDataBase.js

@@ -13,7 +13,7 @@ const bdEngineVersionItems = [
     },
     {
         value: BdEngineVersionItem.General_Purpose,
-        label: 'General Purpose',
+        label: 'General-Purpose',
         description: `Инстансы используют ресурсы процессора совместно с другими инстансами того же класса, размещенными на одном физическом сервере`,
     },
 ];

package/dist/esm/config/platforms/advanced/product-config/AdvancedPostgreSqlDatabase.js

@@ -30,7 +30,7 @@ const bdEngineVersionItems = [
     },
     {
         value: BdEngineVersionItem.General_Purpose,
-        label: 'General Purpose',
+        label: 'General-Purpose',
         description: `Инстансы используют ресурсы процессора совместно с другими инстансами того же класса, размещенными на одном физическом сервере`,
     },
 ];

package/dist/esm/config/utils/{diskPostgreSqlMySQL.d.ts → diskPostgreSqlMySQL/diskPostgreSqlMySQL.d.ts}

@@ -1,5 +1,5 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { ObjectControl, SelectSingleControl, StepperControl } from '../../components';
+import { ObjectControl, SelectSingleControl, StepperControl } from '../../../components';
 export declare const SpecificationItem: {
     readonly Extreme_SSD: "Extreme SSD";
     readonly Cloud_SSD: "Cloud SSD";
@@ -8,9 +8,11 @@ export declare const SpecificationItem: {
 export declare const specificationItems: ({
     value: "Extreme SSD";
     label: string;
+    afterContent: import("react/jsx-runtime").JSX.Element;
 } | {
     value: "Cloud SSD";
     label: string;
+    afterContent: import("react/jsx-runtime").JSX.Element;
 })[];
 type DiskSpecification = ValueOf<typeof SpecificationItem>;
 type GetDiskProps = {

package/dist/esm/config/utils/{diskPostgreSqlMySQL.js → diskPostgreSqlMySQL/diskPostgreSqlMySQL.js}

@@ -9,7 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { CONTROL } from '../../components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QuestionRoundSVG } from '@cloud-ru/uikit-product-icons';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { CONTROL } from '../../../components';
+import styles from './styles.module.css';
 export const SpecificationItem = {
     Extreme_SSD: 'Extreme SSD',
     Cloud_SSD: 'Cloud SSD',
@@ -19,10 +23,12 @@ export const specificationItems = [
     {
         value: SpecificationItem.Extreme_SSD,
         label: 'Extreme SSD',
+        afterContent: (_jsx(Tooltip, { tip: '\u0414\u0438\u0441\u043A\u0438 Ultra-high I/O \u0441 \u0443\u0432\u0435\u043B\u0438\u0447\u0435\u043D\u043D\u043E\u0439 \u043F\u0440\u043E\u043F\u0443\u0441\u043A\u043D\u043E\u0439 \u0441\u043F\u043E\u0441\u043E\u0431\u043D\u043E\u0441\u0442\u044C\u044E', children: _jsx(QuestionRoundSVG, { size: 20, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) })),
     },
     {
         value: SpecificationItem.Cloud_SSD,
         label: 'Cloud SSD',
+        afterContent: (_jsx(Tooltip, { tip: '\u0414\u0438\u0441\u043A\u0438 Ultra-high I/O', children: _jsx(QuestionRoundSVG, { size: 20, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) })),
     },
 ];
 export function getDisk({ space, specification }) {

package/dist/esm/config/utils/diskPostgreSqlMySQL/index.d.ts

@@ -0,0 +1 @@
+export { getDisk } from './diskPostgreSqlMySQL';

package/dist/esm/config/utils/diskPostgreSqlMySQL/index.js

@@ -0,0 +1 @@
+export { getDisk } from './diskPostgreSqlMySQL';

package/dist/esm/config/utils/diskPostgreSqlMySQL/styles.module.css

@@ -0,0 +1,6 @@
+.icon{
+  flex-shrink:0;
+  box-sizing:content-box;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  margin:auto 0;
+}

package/dist/esm/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useAdaptive';
 export * from './useCatalogCardClick';
+export * from './useCatalogLockBodyScroll';
 export * from './useProductClick';
 export * from './useProductDelete';

package/dist/esm/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './useAdaptive';
 export * from './useCatalogCardClick';
+export * from './useCatalogLockBodyScroll';
 export * from './useProductClick';
 export * from './useProductDelete';

package/dist/esm/hooks/useCatalogLockBodyScroll.d.ts

@@ -0,0 +1,5 @@
+type UseLockBodyScrollProps = {
+    catalogOpen: boolean;
+};
+export declare const useCatalogLockBodyScroll: ({ catalogOpen }: UseLockBodyScrollProps) => void;
+export {};

package/dist/esm/hooks/useCatalogLockBodyScroll.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+// FIXME: убрать после задачи PDS-3175
+export const useCatalogLockBodyScroll = ({ catalogOpen }) => {
+    useEffect(() => {
+        if (catalogOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, [catalogOpen]);
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-calculator",
   "title": "Calculator",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -71,5 +71,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.13"
   },
-  "gitHead": "6380c68516813bbe2c59dbe0b4d7ed89093cc9c7"
+  "gitHead": "021abe9a1bb7c6d6bc751ee4e4b6f4bcd3e7b4e7"
 }

package/src/components/Catalog/Catalog.tsx

@@ -15,7 +15,7 @@ import { Tag } from '@snack-uikit/tag';
 import { Tooltip } from '@snack-uikit/tooltip';
 
 import { useCalculatorContext } from '../../contexts';
-import { useCatalogCardClick } from '../../hooks';
+import { useCatalogCardClick, useCatalogLockBodyScroll } from '../../hooks';
 import { CatalogConfig, PlatformType } from '../../types';
 import { parseKeyToDataTest } from '../../utils';
 import { PrivateCardHeader } from './components';
@@ -67,6 +67,9 @@ export function Catalog() {
     'data-test-id': dataTestId,
   }));
 
+  // FIXME: убрать после задачи PDS-3175
+  useCatalogLockBodyScroll({ catalogOpen: catalogOpen });
+
   const [openMobileCategory, setOpenMobileCategory] = useState<boolean>(false);
 
   const isMobile = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;

package/src/components/Controls/SelectControl/SelectControl.tsx

@@ -17,6 +17,7 @@ export type SelectControlItem = {
   icon?: ReactNode;
   disabled?: boolean;
   disabledReason?: ReactNode;
+  afterContent?: ReactNode;
   dataTestId?: string;
   onChangePeriod?: (value: PRICE_PERIOD) => void;
   canChangeWholePricePeriod?: boolean;
@@ -65,6 +66,7 @@ function convertItemsToOptions(items: SelectControlItem[]): BaseOptionProps[] {
     disabled: item.disabled,
     option: item.label ?? item.value,
     beforeContent: item.icon,
+    afterContent: item.afterContent,
   }));
 }
 

package/src/config/platforms/advanced/product-config/AdvancedMySqlDataBase.ts

@@ -15,7 +15,7 @@ const bdEngineVersionItems = [
   },
   {
     value: BdEngineVersionItem.General_Purpose,
-    label: 'General Purpose',
+    label: 'General-Purpose',
     description: `Инстансы используют ресурсы процессора совместно с другими инстансами того же класса, размещенными на одном физическом сервере`,
   },
 ];

package/src/config/platforms/advanced/product-config/AdvancedPostgreSqlDatabase.ts

@@ -34,7 +34,7 @@ const bdEngineVersionItems = [
   },
   {
     value: BdEngineVersionItem.General_Purpose,
-    label: 'General Purpose',
+    label: 'General-Purpose',
     description: `Инстансы используют ресурсы процессора совместно с другими инстансами того же класса, размещенными на одном физическом сервере`,
   },
 ];

package/src/config/utils/{diskPostgreSqlMySQL.ts → diskPostgreSqlMySQL/diskPostgreSqlMySQL.tsx}

@@ -1,6 +1,9 @@
+import { QuestionRoundSVG } from '@cloud-ru/uikit-product-icons';
+import { Tooltip } from '@snack-uikit/tooltip';
 import { ValueOf } from '@snack-uikit/utils';
 
-import { CONTROL, ObjectControl, SelectSingleControl, StepperControl } from '../../components';
+import { CONTROL, ObjectControl, SelectSingleControl, StepperControl } from '../../../components';
+import styles from './styles.module.scss';
 
 export const SpecificationItem = {
   Extreme_SSD: 'Extreme SSD',
@@ -12,10 +15,20 @@ export const specificationItems = [
   {
     value: SpecificationItem.Extreme_SSD,
     label: 'Extreme SSD',
+    afterContent: (
+      <Tooltip tip='Диски Ultra-high I/O с увеличенной пропускной способностью'>
+        <QuestionRoundSVG size={20} className={styles.icon} data-test-id='field-decorator__label-tooltip-trigger' />
+      </Tooltip>
+    ),
   },
   {
     value: SpecificationItem.Cloud_SSD,
     label: 'Cloud SSD',
+    afterContent: (
+      <Tooltip tip='Диски Ultra-high I/O'>
+        <QuestionRoundSVG size={20} className={styles.icon} data-test-id='field-decorator__label-tooltip-trigger' />
+      </Tooltip>
+    ),
   },
 ];
 

package/src/config/utils/diskPostgreSqlMySQL/index.ts

@@ -0,0 +1 @@
+export { getDisk } from './diskPostgreSqlMySQL';

package/src/config/utils/diskPostgreSqlMySQL/styles.module.scss

@@ -0,0 +1,8 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields' as styles-tokens-fields;
+
+.icon {
+  flex-shrink: 0;
+  box-sizing: content-box;
+  color: styles-tokens-fields.$sys-neutral-text-light;
+  margin: auto 0;
+}

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
 export * from './useAdaptive';
 
 export * from './useCatalogCardClick';
+export * from './useCatalogLockBodyScroll';
 
 export * from './useProductClick';
 export * from './useProductDelete';

package/src/hooks/useCatalogLockBodyScroll.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+type UseLockBodyScrollProps = {
+  catalogOpen: boolean;
+};
+
+// FIXME: убрать после задачи PDS-3175
+export const useCatalogLockBodyScroll = ({ catalogOpen }: UseLockBodyScrollProps) => {
+  useEffect(() => {
+    if (catalogOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [catalogOpen]);
+};