@cloud-ru/uikit-product-site-selector-platform-drop-list 0.1.4

package/dist/cjs/helperComponents/SelectorPlatformDropListPrivate/SelectorPlatformDropListPrivate.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectorPlatformDropListPrivate = SelectorPlatformDropListPrivate;
+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_mobile_dropdown_1 = require("@cloud-ru/uikit-product-mobile-dropdown");
+const uikit_product_mobile_modal_1 = require("@cloud-ru/uikit-product-mobile-modal");
+const typography_1 = require("@snack-uikit/typography");
+const helperComponents_1 = require("../../helperComponents");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function SelectorPlatformDropListPrivate({ items, value, onChange, footer, title, baseTitle, baseIcon, layoutType, mode, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [tooltipMobile, setTooltipMobile] = (0, react_1.useState)({
+        open: false,
+    });
+    const handleCloseTooltipMobile = () => {
+        setTooltipMobile({
+            open: false,
+        });
+    };
+    const itemsView = (0, react_1.useMemo)(() => items.map(item => ({
+        id: item.id,
+        content: (0, jsx_runtime_1.jsx)(helperComponents_1.ContentItemList, { title: item.title }),
+        beforeContent: (0, jsx_runtime_1.jsx)(helperComponents_1.IconItemList, { icon: item.icon }),
+        afterContent: ((0, jsx_runtime_1.jsx)(helperComponents_1.Tooltip, { setTooltipMobile: setTooltipMobile, tooltipText: item.tooltipText, layoutType: layoutType })),
+        className: styles_module_scss_1.default.rowItem,
+        onClick: item.onClick,
+    })), [items, layoutType]);
+    const itemsWithDivider = (0, react_1.useMemo)(() => [...itemsView, { type: 'group', divider: true, items: [] }], [itemsView]);
+    const selection = (0, react_1.useMemo)(() => mode === 'multiple'
+        ? { value, onChange, mode: 'multiple' }
+        : { value, onChange, mode: 'single' }, [mode, onChange, value]);
+    const foundItems = (0, react_1.useMemo)(() => (0, utils_1.findItems)(items, value), [items, value]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDroplist
+            // @ts-expect-error label существует только у MobileDroplist, отсутствует у Droplist
+            , { 
+                // @ts-expect-error label существует только у MobileDroplist, отсутствует у Droplist
+                label: (0, jsx_runtime_1.jsx)(helperComponents_1.TitleWithGoBack, { title: '\u041E\u0431\u043B\u0430\u0447\u043D\u0430\u044F \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430' }), layoutType: layoutType, trigger: 'click', open: isOpen, items: footer ? itemsWithDivider : itemsView, onOpenChange: setIsOpen, selection: selection, footer: footer, closeDroplistOnItemClick: true, size: 'm', children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-focus": isOpen, role: 'button', children: [(0, jsx_runtime_1.jsx)(helperComponents_1.BaseIcon, { baseIcon: baseIcon, value: foundItems, lengthDroplist: items.length }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleContainer, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { className: styles_module_scss_1.default.valueLabel, family: 'sans', purpose: 'body', size: 's', children: title }), (0, jsx_runtime_1.jsx)(helperComponents_1.SelectedItemList, { lengthDroplist: items.length, baseTitle: baseTitle, value: foundItems })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconContainer, children: isOpen ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronUpSVG, { className: styles_module_scss_1.default.icon }) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, { className: styles_module_scss_1.default.icon }) })] }) }), (0, jsx_runtime_1.jsxs)(uikit_product_mobile_modal_1.MobileModalCustom, { open: tooltipMobile.open, onClose: handleCloseTooltipMobile, children: [(0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModalCustom.Header, { title: (0, jsx_runtime_1.jsx)(helperComponents_1.TitleWithGoBack, { onGoBack: handleCloseTooltipMobile, title: '\u041E\u0431\u043B\u0430\u0447\u043D\u0430\u044F \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430' }) }), (0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModalCustom.Body, { content: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { children: tooltipMobile.text }) })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export { SelectorPlatformDropListPrivate } from './SelectorPlatformDropListPrivate';
+export type { SelectorPlatformDropListPrivateProps } from './SelectorPlatformDropListPrivate';

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

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

package/dist/cjs/helperComponents/SelectorPlatformDropListPrivate/styles.module.css

@@ -0,0 +1,54 @@
+.root{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  gap:8px;
+  height:48px;
+  padding:4px 12px 4px 8px;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  box-sizing:border-box;
+}
+.root:hover{
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.root[data-focus=true]{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-accent-default, #26d07c);
+  outline-color:var(--sys-primary-decor-activated, #8ee7bb);
+}
+
+.titleContainer{
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  height:36px;
+  width:100%;
+  flex:1 1 auto;
+  min-width:0;
+}
+
+.iconContainer{
+  width:24px;
+  height:24px;
+}
+
+.valueLabel{
+  cursor:pointer;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.valueTitle{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.icon{
+  color:var(--sys-graphite-text-main, #222222);
+}
+
+.rowItem{
+  box-sizing:border-box;
+}

package/dist/cjs/helperComponents/SelectorPlatformDropListPrivate/utils.d.ts

@@ -0,0 +1,2 @@
+import { Item } from '../../types';
+export declare function findItems(items: Array<Item>, value: Array<string> | string | undefined): Item[];

package/dist/cjs/helperComponents/SelectorPlatformDropListPrivate/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findItems = findItems;
+function findItems(items, value) {
+    if (!value)
+        return [];
+    if (typeof value === 'string') {
+        const foundItem = items.find(item => item.id === value);
+        if (!foundItem) {
+            return [];
+        }
+        return [foundItem];
+    }
+    return items.filter(item => value.find(val => val === item.id));
+}

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

@@ -0,0 +1,7 @@
+import { MouseEventHandler, ReactNode } from 'react';
+type TitleWithGoBackProps = {
+    title: ReactNode;
+    onGoBack?: MouseEventHandler<SVGElement>;
+};
+export declare function TitleWithGoBack({ onGoBack, title }: TitleWithGoBackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/TitleWithGoBack/TitleWithGoBack.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleWithGoBack = TitleWithGoBack;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TitleWithGoBack({ onGoBack, title }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, "data-icon-back": Boolean(onGoBack), children: [onGoBack && (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ArrowLeftSVG, { size: 24, className: styles_module_scss_1.default.arrow, onClick: onGoBack }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { children: title }), onGoBack && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.buttonStub })] }));
+}

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

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

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

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

package/dist/cjs/helperComponents/TitleWithGoBack/styles.module.css

@@ -0,0 +1,17 @@
+.wrapper{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  width:calc(100vw - 32px);
+}
+.wrapper[data-icon-back=false]{
+  justify-content:center;
+}
+
+.arrow{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.buttonStub{
+  width:24px;
+}

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

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { TooltipMobile } from '../../types';
+type TooltipProps = WithLayoutType<{
+    tooltipText?: string;
+    setTooltipMobile: Dispatch<SetStateAction<TooltipMobile>>;
+}>;
+export declare function Tooltip({ layoutType, tooltipText, setTooltipMobile }: TooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/helperComponents/Tooltip/Tooltip.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = Tooltip;
+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 styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Tooltip({ layoutType, tooltipText, setTooltipMobile }) {
+    if (!tooltipText) {
+        return null;
+    }
+    if (layoutType !== 'mobile') {
+        return (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { className: styles_module_scss_1.default.questionTooltip, tip: tooltipText });
+    }
+    const handleOpen = (event) => {
+        event.stopPropagation();
+        setTooltipMobile({
+            open: true,
+            text: tooltipText,
+        });
+    };
+    return (0, jsx_runtime_1.jsx)(uikit_product_icons_1.QuestionSVG, { className: styles_module_scss_1.default.icon, onClick: handleOpen, size: 16 });
+}

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

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

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

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

package/dist/cjs/helperComponents/Tooltip/styles.module.css

@@ -0,0 +1,8 @@
+.questionTooltip{
+  margin:auto 0;
+}
+
+.icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  margin:auto 0;
+}

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

@@ -0,0 +1,7 @@
+export { SelectedItemList } from './SelectedItemList';
+export { ContentItemList } from './ContentItemList';
+export { IconItemList } from './IconItemList';
+export { BaseIcon } from './BaseIcon';
+export { TitleWithGoBack } from './TitleWithGoBack';
+export { Tooltip } from './Tooltip';
+export { SelectorPlatformDropListPrivate } from './SelectorPlatformDropListPrivate';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectorPlatformDropListPrivate = exports.Tooltip = exports.TitleWithGoBack = exports.BaseIcon = exports.IconItemList = exports.ContentItemList = exports.SelectedItemList = void 0;
+var SelectedItemList_1 = require("./SelectedItemList");
+Object.defineProperty(exports, "SelectedItemList", { enumerable: true, get: function () { return SelectedItemList_1.SelectedItemList; } });
+var ContentItemList_1 = require("./ContentItemList");
+Object.defineProperty(exports, "ContentItemList", { enumerable: true, get: function () { return ContentItemList_1.ContentItemList; } });
+var IconItemList_1 = require("./IconItemList");
+Object.defineProperty(exports, "IconItemList", { enumerable: true, get: function () { return IconItemList_1.IconItemList; } });
+var BaseIcon_1 = require("./BaseIcon");
+Object.defineProperty(exports, "BaseIcon", { enumerable: true, get: function () { return BaseIcon_1.BaseIcon; } });
+var TitleWithGoBack_1 = require("./TitleWithGoBack");
+Object.defineProperty(exports, "TitleWithGoBack", { enumerable: true, get: function () { return TitleWithGoBack_1.TitleWithGoBack; } });
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+var SelectorPlatformDropListPrivate_1 = require("./SelectorPlatformDropListPrivate");
+Object.defineProperty(exports, "SelectorPlatformDropListPrivate", { enumerable: true, get: function () { return SelectorPlatformDropListPrivate_1.SelectorPlatformDropListPrivate; } });

package/dist/cjs/index.d.ts

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

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

package/dist/cjs/types.d.ts

@@ -0,0 +1,32 @@
+import { JSXElementConstructor } from 'react';
+export type IconSelector = JSXElementConstructor<{
+    size?: number;
+    className?: string;
+}>;
+export type Item = {
+    id: string;
+    title: string;
+    icon: IconSelector;
+    onClick?: () => void;
+    tooltipText?: string;
+};
+export type TooltipMobile = {
+    open: boolean;
+    text?: string;
+};
+export type MultipleSelectorPlatformDropListProps = {
+    /** Режим выбора */
+    mode: 'multiple';
+    /** Controlled состояние */
+    value: Array<string>;
+    /** Controlled обработчик изменения состояния */
+    onChange(value: Array<string>): void;
+};
+export type SingleSelectorPlatformDropListProps = {
+    /** Режим выбора */
+    mode: 'single';
+    /** Controlled состояние */
+    value: string | undefined;
+    /** Controlled обработчик изменения состояния */
+    onChange(value: string | undefined): void;
+};

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/SelectorPlatformDropList/SelectorPlatformDropList.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { MultipleSelectorPlatformDropListProps, SingleSelectorPlatformDropListProps } from '../../types';
+export type PlatformType = 'advanced' | 'evolution' | 'vmware' | 'all';
+export type Platform = {
+    /** Тип элемента */
+    type: PlatformType;
+    /** Колбек клика на элемент */
+    onClick?: () => void;
+};
+type BaseSelectorPlatformDropListProps = WithLayoutType<{
+    /** Список элементов droplist */
+    items: Array<Platform>;
+    /** Нижняя часть под списком droplist */
+    footer?: ReactNode;
+}>;
+export type SelectorPlatformDropListProps = BaseSelectorPlatformDropListProps & (MultipleSelectorPlatformDropListProps | SingleSelectorPlatformDropListProps);
+export declare function SelectorPlatformDropList({ items, value, footer, onChange, layoutType, mode, }: SelectorPlatformDropListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/SelectorPlatformDropList/SelectorPlatformDropList.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CloudSVG } from '@cloud-ru/uikit-product-icons';
+import { SelectorPlatformDropListPrivate } from '../../helperComponents';
+import { PLATFORMS } from './platforms';
+export function SelectorPlatformDropList({ items, value, footer, onChange, layoutType, mode, }) {
+    const selection = useMemo(() => mode === 'multiple'
+        ? {
+            value,
+            onChange,
+            mode: 'multiple',
+        }
+        : {
+            value,
+            onChange,
+            mode: 'single',
+        }, [mode, value, onChange]);
+    const itemsView = useMemo(() => items.map(({ type, onClick }) => (Object.assign(Object.assign({}, PLATFORMS[type]), { onClick }))), [items]);
+    return (_jsx(SelectorPlatformDropListPrivate, Object.assign({ layoutType: layoutType === 'tablet' ? 'mobile' : layoutType, items: itemsView, title: 'Облачная платформа', baseTitle: 'Все платформы', baseIcon: CloudSVG, footer: footer }, selection)));
+}

package/dist/esm/components/SelectorPlatformDropList/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectorPlatformDropList } from './SelectorPlatformDropList';
+export type { SelectorPlatformDropListProps, PlatformType, Platform } from './SelectorPlatformDropList';

package/dist/esm/components/SelectorPlatformDropList/index.js

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

package/dist/esm/components/SelectorPlatformDropList/platforms.d.ts

@@ -0,0 +1,5 @@
+import { Item } from '../../types';
+import { PlatformType } from './SelectorPlatformDropList';
+export declare const PLATFORMS: {
+    [key in PlatformType]: Item;
+};

package/dist/esm/components/SelectorPlatformDropList/platforms.js

@@ -0,0 +1,27 @@
+import { AdvancedSVG, CloudSVG, EvolutionSVG, VMwareBackupServerSVG } from '@cloud-ru/uikit-product-icons';
+export const PLATFORMS = {
+    evolution: {
+        id: 'evolution',
+        title: 'Evolution',
+        icon: EvolutionSVG,
+        tooltipText: 'Платформа собственной разработки с доступом к IaaS- и PaaS-сервисам, вычислительным мощностям с GPU, аренде выделенных физических серверов и AI-инструментам.',
+    },
+    advanced: {
+        id: 'advanced',
+        title: 'Advanced',
+        icon: AdvancedSVG,
+        tooltipText: 'Вендорская платформа с широким набором IaaS- и PaaS-сервисов от одного из лидеров мирового рынка облачных услуг.',
+    },
+    vmware: {
+        id: 'vmware',
+        title: 'Облако VMware',
+        icon: VMwareBackupServerSVG,
+        tooltipText: 'Вендорская платформа, предоставляющая инфраструктуру как услугу, основанную на технологиях VMware — ведущего поставщика решений IaaS.',
+    },
+    all: {
+        id: 'all',
+        title: 'Все платформы',
+        icon: CloudSVG,
+        tooltipText: 'Совокупность сервисов, программных и/или аппаратных средств, решающих определенную задачу или группу задач.',
+    },
+};

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

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

package/dist/esm/components/index.js

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

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

@@ -0,0 +1,8 @@
+import { IconSelector, Item } from '../../types';
+type BaseIconProps = {
+    baseIcon?: IconSelector;
+    value: Array<Item>;
+    lengthDroplist: number;
+};
+export declare function BaseIcon({ baseIcon, value, lengthDroplist }: BaseIconProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/helperComponents/BaseIcon/BaseIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconItemList } from '../IconItemList';
+export function BaseIcon({ baseIcon, value, lengthDroplist }) {
+    if (value.length === 1) {
+        return _jsx(IconItemList, { icon: value[0].icon });
+    }
+    if (!baseIcon || (value.length > 1 && lengthDroplist !== value.length)) {
+        return null;
+    }
+    return _jsx(IconItemList, { icon: baseIcon });
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+type ContentItemListProps = {
+    title: string;
+};
+export declare function ContentItemList({ title }: ContentItemListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/ContentItemList/ContentItemList.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function ContentItemList({ title }) {
+    return (_jsx("div", { className: styles.container, children: _jsx(Typography.SansTitleS, { children: title }) }));
+}

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

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

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

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

package/dist/esm/helperComponents/ContentItemList/styles.module.css

@@ -0,0 +1,5 @@
+.container{
+  display:flex;
+  align-items:center;
+  min-height:24px;
+}

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

@@ -0,0 +1,6 @@
+import { IconSelector } from '../../types';
+type IconItemListProps = {
+    icon: IconSelector;
+};
+export declare function IconItemList({ icon: IconComponent }: IconItemListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/IconItemList/IconItemList.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './styles.module.css';
+export function IconItemList({ icon: IconComponent }) {
+    return (_jsx("div", { className: styles.container, children: _jsx(IconComponent, { size: 24, className: styles.icon }) }));
+}

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

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

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

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

package/dist/esm/helperComponents/IconItemList/styles.module.css

@@ -0,0 +1,12 @@
+.container{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  min-width:32px;
+  min-height:32px;
+  background:var(--sys-graphite-background, #f4f4f4);
+}
+
+.icon{
+  color:var(--sys-neutral-text-main, #41424e);
+}

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

@@ -0,0 +1,8 @@
+import { Item } from '../../types';
+type SelectedItemListProps = {
+    baseTitle: string;
+    value: Array<Item>;
+    lengthDroplist: number;
+};
+export declare function SelectedItemList({ baseTitle, value, lengthDroplist }: SelectedItemListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/SelectedItemList/SelectedItemList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function SelectedItemList({ baseTitle, value, lengthDroplist }) {
+    var _a;
+    if (value.length === 0 || value.length === lengthDroplist) {
+        return _jsx(Typography.SansTitleS, { className: styles.text, children: baseTitle });
+    }
+    if (value.length === 1) {
+        return _jsx(Typography.SansTitleS, { className: styles.text, children: (_a = value[0]) === null || _a === void 0 ? void 0 : _a.title });
+    }
+    return (_jsx("div", { className: styles.container, children: value.map(({ title, icon: IconComponent }, index) => (_jsxs("div", { className: styles.item, children: [IconComponent && _jsx(IconComponent, { size: 12, className: styles.icon }), _jsx(Typography.SansLabelM, { className: styles.text, children: `${title}${index !== value.length - 1 ? ',' : ''}` })] }, title))) }));
+}

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

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

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

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

package/dist/esm/helperComponents/SelectedItemList/styles.module.css

@@ -0,0 +1,32 @@
+.iconPlatform{
+  color:var(--sys-primary-text-light, #6aaf90);
+}
+
+.text{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.container{
+  display:flex;
+  gap:8px;
+  flex-wrap:nowrap;
+  align-items:center;
+  margin-bottom:2px;
+  width:100%;
+  flex:1 1 auto;
+  min-width:0;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+
+.item{
+  display:flex;
+  gap:4px;
+  flex-wrap:nowrap;
+  align-items:center;
+}
+
+.icon{
+  color:var(--sys-primary-text-light, #6aaf90);
+}

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { IconSelector, Item, MultipleSelectorPlatformDropListProps, SingleSelectorPlatformDropListProps } from '../../types';
+type BaseSelectorPlatformDropListPrivateProps = WithLayoutType<{
+    /** Заголовок верхней части блока выбора */
+    title: string;
+    /** Базовый заголовок нижней части блока выбора, отображается когда ничего не выбрано */
+    baseTitle: string;
+    /** Базовая иконка блока выбора слева, отображается когда ничего не выбрано */
+    baseIcon?: IconSelector;
+    /** Список элементов droplist */
+    items: Array<Item>;
+    /** Нижняя часть под списком droplist */
+    footer?: ReactNode;
+}>;
+export type SelectorPlatformDropListPrivateProps = BaseSelectorPlatformDropListPrivateProps & (MultipleSelectorPlatformDropListProps | SingleSelectorPlatformDropListProps);
+export declare function SelectorPlatformDropListPrivate({ items, value, onChange, footer, title, baseTitle, baseIcon, layoutType, mode, }: SelectorPlatformDropListPrivateProps): import("react/jsx-runtime").JSX.Element;
+export {};