{ "generatedAt": "2026-09-21T13:53:31.646Z", "libVersion": "1.20.0", "components": { "Accordion": { "name": "Accordion", "group": "components", "folderName": "Accordion", "role": "primary", "description": "Список сворачиваемых секций с заголовками — для скрытия объёмного контента до клика", "props": [], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Accordion/Accordion.d.ts", "type": "wrapper", "atomicBase": "Accordion", "category": "Локальные компоненты", "keywords": [ "сворачиваемые блоки", "expand collapse", "раскрывающийся список" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "defaultActiveEventKey", "type": "number[]", "required": false, "inheritedFrom": "Accordion", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Accordion", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "((index?: number, value?: boolean) => void) | undefined", "required": false, "inheritedFrom": "Accordion", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "singleActive", "type": "boolean", "required": false, "inheritedFrom": "Accordion", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"s\" | \"l\" | \"m\" | \"xs\"", "required": false, "inheritedFrom": "Accordion", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretching", "type": "\"filled\" | \"fixed\"", "required": false, "inheritedFrom": "Accordion", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\"", "required": false, "inheritedFrom": "Accordion", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Accordion } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в LeftPanel.stories.tsx", "type": "usage", "code": "\n \n \n \n Aaa +{' '}\n {index % 2 === 0\n ? 'aaaaa aaaaaaaaa aaaaaaa aaaaaaaaa'.repeat(\n // eslint-disable-next-line prettier/prettier\n 10,\n )\n : ''}\n \n \n \n ", "sourceFile": "packages/storybook/src/stories/LeftPanel/LeftPanel.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Примеры Accordion", "type": "vendor", "code": "import React from 'react';\nimport { Accordion, AccordionItem } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Использование AccordionItem атрибута Type", "type": "vendor", "code": "import React from 'react';\nimport { Accordion, AccordionItem } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n \n
\n );\n}" } ] }, "AccordionItem": { "name": "AccordionItem", "group": "components", "folderName": "Accordion", "role": "primary", "description": "Одна секция аккордеона с заголовком и телом — используется внутри Accordion", "props": [ { "name": "alignWithTitle", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "bodyProps", "type": "React.HTMLAttributes | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "defaultIconContent", "type": "AccordionItemDefaultIconContent | undefined", "required": false, "description": "" }, { "name": "defaultIconPlacement", "type": "AccordionItemDefaultIconPlacement | undefined", "required": false, "description": "" }, { "name": "eventKey", "type": "number | undefined", "required": false, "description": "" }, { "name": "index", "type": "number | undefined", "required": false, "description": "" }, { "name": "onChange", "type": "((index: number, value: boolean) => void) | undefined", "required": false, "description": "" }, { "name": "onClick", "type": "(React.MouseEventHandler & ((index: number, value: boolean) => void)) | undefined", "required": false, "description": "" }, { "name": "opened", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "titleProps", "type": "React.HTMLAttributes | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"clear\" | \"arrow\" | \"sign\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "view", "type": "string | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "секция аккордеона", "collapsible panel", "раскрывающийся блок" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { AccordionItem } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в LeftPanel.stories.tsx", "type": "usage", "code": "\n \n \n Aaa +{' '}\n {index % 2 === 0\n ? 'aaaaa aaaaaaaaa aaaaaaa aaaaaaaaa'.repeat(\n // eslint-disable-next-line prettier/prettier\n 10,\n )\n : ''}\n \n \n ", "sourceFile": "packages/storybook/src/stories/LeftPanel/LeftPanel.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Примеры Accordion", "type": "vendor", "code": "import React from 'react';\nimport { Accordion, AccordionItem } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Использование AccordionItem атрибута Type", "type": "vendor", "code": "import React from 'react';\nimport { Accordion, AccordionItem } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива\n \n
\n );\n}" } ] }, "AiAgentPopover": { "name": "AiAgentPopover", "group": "components", "folderName": "AiAgentPopover", "role": "primary", "description": "Плавающий перетаскиваемый и изменяемый по размеру popover для AI-ассистента поверх экрана", "props": [ { "name": "calculateOffset", "type": "boolean | undefined", "required": false, "description": "Включить / Выключить перерасчёт offset для кастомных значений placement. top-right, top-left, bottom-right, bottom-left, чтобы стрелка popover была в центре target элемента, а контент пропорционально смещен в зависимости от placement.", "default": "true" }, { "name": "calculatePlacement", "type": "boolean | undefined", "required": false, "description": "Включить / Выключить перерасчёт placement в режиме draggable.", "default": "true" }, { "name": "defaultPosition", "type": "AiAgentPopoverCustomPlacement | AiAgentPopoverPosition | undefined", "required": false, "description": "Начальная позиция при первом рендере (используется только если НЕ передан positionState и НЕ используется useStorage)", "default": "'bottom-right'" }, { "name": "dragBoundary", "type": "AiAgentPopoverDragBoundary | undefined", "required": false, "description": "Ограничение области в рамках которой можно перемещать элемент" }, { "name": "draggable", "type": "boolean | undefined", "required": false, "description": "Включить / Выключить перетаскивание", "default": "false" }, { "name": "ignoreToggleOnDrag", "type": "boolean | undefined", "required": false, "description": "В момент драга сохранять текущий стейт видимости popover. При перетаскивании закрытого popover в момент завершения перетаскивания popover не откроется, если этот пропс активен. Аналогично с открытым состоянием.", "default": "true" }, { "name": "onPositionChange", "type": "((pos: { x: number; y: number; }) => void) | undefined", "required": false, "description": "Callback смены позиции в draggable режиме в момент перетаскивания" }, { "name": "placement", "type": "AiAgentPopoverPlacement", "required": false, "description": "Позиция отображения popover.", "default": "'auto'" }, { "name": "positionState", "type": "AiAgentPopoverPositionState | undefined", "required": false, "description": "Внешний стейт позиции [position, setPosition].\nЕсли не передан, будет использован внутренний стейт. Не используется для интеграции с localStorage. Данное поле отвечает за полное внешнее управление позицией" }, { "name": "resizable", "type": "boolean | ((placement: AiAgentPopoverPlacement) => Partial<{ disabled?: boolean | undefined; directions?: ResizeDirections | undefined; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; minWidth?: number | undefined; minHeight?: number | undefined; maxWidth?: number | undefined; maxHeight?: number | undefined; icons?: { topRight?: React.ReactNode; bottomRight?…", "required": false, "description": "Включить / настроить resizable-режим.\n- `true`: включить с дефолтной конфигурацией (иконка ресайза автоматически позиционируется в зависимости от placement).\n- `(placement: AiAgentPopoverPlacement) => config`: функция для кастомной конфигурации. Принимает текущий placement,\n возвращает частичную конфигурацию, которая мержится с дефолтной.", "default": "undefined" }, { "name": "targetDataAttributes", "type": "DataAttributes | undefined", "required": false, "description": "Data-атрибуты для target-кнопки (MagicButton). Например: data-onboarding-id, data-testid" }, { "name": "useStorage", "type": "string | boolean | undefined", "required": false, "description": "Сохранять ли позицию в localStorage.\n- `true`: автосохранение с ключом `ai-agent-popover-position`.\n- `string`: кастомный ключ (например, `my-popover-position`).\n- `false`: отключено.", "default": "false" }, { "name": "animated", "type": "boolean | undefined", "required": false, "description": "Анимированное появление Popover" }, { "name": "closeOnEsc", "type": "boolean | undefined", "required": false, "description": "Закрывать окно при нажатии ESC.", "default": "true" }, { "name": "closeOnOverlayClick", "type": "boolean | undefined", "required": false, "description": "Закрывать окно при нажатии вне области окна. (Если trigger === 'click')" }, { "name": "frame", "type": "string | React.RefObject | undefined", "required": false, "description": "В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него." }, { "name": "hasArrow", "type": "boolean | undefined", "required": false, "description": "Есть ли стрелка над элементом." }, { "name": "isFocusTrapped", "type": "boolean | undefined", "required": false, "description": "Блокировать ли фокус на всплывающем окне.", "default": "true" }, { "name": "offset", "type": "[number, number] | undefined", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 14]" }, { "name": "onResizeEnd", "type": "((resizableContainer?: React.RefObject | undefined) => void) | undefined", "required": false, "description": "Обработчик остановки ресайза." }, { "name": "onResizeStart", "type": "((resizableContainer?: React.RefObject | undefined) => void) | undefined", "required": false, "description": "Обработчик начала ресайза." }, { "name": "onToggle", "type": "((isOpen: boolean, event: Event | React.SyntheticEvent) => void) | undefined", "required": false, "description": "Событие сворачивания/разворачивания всплывающего окна." }, { "name": "opened", "type": "boolean | undefined", "required": false, "description": "Всплывающее окно раскрыто или нет." }, { "name": "preventOverflow", "type": "boolean | undefined", "required": false, "description": "Предотвратить автоматическое изменение положения." }, { "name": "stretchHeight", "type": "boolean | undefined", "required": false, "description": "Растянуть Popover до границы доступной области по вертикали." }, { "name": "target", "type": "string | number | boolean | React.ReactElement> | Iterable | React.ReactPortal | ((instance: HTMLElement | null) => void) | React.RefObject | null | undefined", "required": false, "description": "Элемент или ref на элемент, рядом с которым произойдет вызов всплывающего окна." }, { "name": "trigger", "type": "PopoverTrigger | undefined", "required": false, "description": "Способ открытия всплывающего окна - наведение или клик мышью.", "default": "'click'" }, { "name": "usePortal", "type": "boolean | undefined", "required": false, "description": "Находится ли в портале.", "default": "false" }, { "name": "zIndex", "type": "string | undefined", "required": false, "description": "Значение z-index для Popover." }, { "name": "contentContainerClassNames", "type": "string | undefined", "required": false, "description": "" }, { "name": "isOpen", "type": "boolean | undefined", "required": false, "description": "", "deprecated": true } ], "propsTypeName": "AiAgentPopoverProps", "sourceFile": "packages/ui-kit/src/components/AiAgentPopover/AiAgentPopover.tsx", "type": "wrapper", "category": "Локальные компоненты", "hint": "Не путать с PopoverDF — тот универсальный. AiAgentPopover только для команды AI-агента.", "keywords": [ "ai-ассистент", "draggable popover", "плавающее окно" ], "scope": "internal", "docs": "# AiAgentPopover\n\nОбёртка над [SDDS Popover](https://plasma.sberdevices.ru/sdds-finai/components/popover/) — компонент для отображения контекстного попапа рядом с элементом.\nИспользуется, например, для показа AI-ассистента или справочной информации.\n\n## Ключевые особенности\n\n- Гибкое позиционирование с автоматической коррекцией (`calculatePlacement`, `calculateOffset`)\n- Режим перетаскивания (`draggable`) с порогом срабатывания и границами\n- Кастомные anchor-точки для точного размещения (`defaultPosition`)\n- Автосохранение позиции в localStorage (`useStorage`)\n- Resizable-режим с автоматическим позиционированием иконки ресайза\n- Контролируемый стейт видимости через `opened` / `onToggle`\n\n## Особенности\n\n**Режим перетаскивания (draggable)**\n\n```tsx\n\n Контент попапа\n\n```\n\nОсобенности работы:\n\n- Порог срабатывания (5px) - предотвращает случайные срабатывания при клике\n- Границы перемещения - ограничиваются областью окна с учетом dragBoundary\n- Игнор кликов - при активации ignoreToggleOnDrag не открывает popover после перетаскивания\n\n**Автоматические расчеты** `calculatePlacement` и `calculateOffset`\n\n```tsx\n\n Контент попапа с выключенными расчётами В данном примере, несмотря на\n использования кастомного значения placement, корректировка offset работать не\n будет, так как ее отключили. calculatePlacement также не будет работать,\n потому сама опция выключена, к тому же нет draggable режима.\n\n```\n\nОсобенности работы:\n\n- calculatePlacement и calculateOffset включены по умолчанию\n- calculatePlacement используется в режиме draggable. Процесс вычисления нужного значения placement происходит в момент перетаскивания target. Фича делит экран на 6 секторов. Для каждого сектора свой placement. 1 - bottom-left, 2 - bottom, 3 - bottom-right, 4 - top-right, 5 - top, 6 - top-left. Если в момент вычисления placement контент popover выходит за границы экрана, то будет применено значение auto, корректировки offset в таком случае не будет и popover будет вести себя стандартно, как ведет себя атомарный компонент.\n- calculateOffset необходим для вычисления правильного (с точки зрения дизайн-макетов) значения offset для каждого кастомного значения placement (bottom-left, bottom-right, top-left, top-right).\n\n**Кастомные позиции**\n\n```tsx\n// Вариант 1: Координаты\n\n\n// Вариант 2: Кастомное размещение\n\n\n// Вариант 3: Нужные кастомные значения, но чтобы popover открывался вниз со смещением влево\n\n```\n\nЛогика расчёта:\n\ndefaultPosition может быть как объектом с координатами, так и строковым значением (как кастомные placement). Если вы выбираете defaultPosition как строковую позицию (top-left, top-right, bottom-left, bottom-right), то target элемент popover встанет в нужную заранее подготовленную позицию. Такое поведение актуально, если НЕ активирован useStorage (иначе позиция берется из localStorage) и НЕ заданы значения dragBoundary, которые не позволяют ему там находиться и НЕ используется positionState (внешний [стейт, сеттер] позиции)\n\n**Resizable-режим**\n\n```tsx\n// Вариант 1: Дефолтная конфигурация — иконка ресайза позиционируется автоматически\n\n Контент попапа\n\n\n// Вариант 2: Callback — получаем текущий placement, переопределяем нужные поля\n ({\n defaultSize: { width: 300, height: 200 },\n minWidth: 250,\n maxWidth: 600,\n })}\n>\n Контент попапа\n\n```\n\nОсобенности работы:\n\n- Проп `resizable` принимает `boolean` или callback-функцию `(placement) => Partial`\n- При `resizable={true}` иконка ресайза (`IconResizeCorneredFill`) автоматически позиционируется в угол, диагонально противоположный target-элементу, в зависимости от текущего placement:\n - `bottom-right` / `bottom` → иконка в правом нижнем углу\n - `bottom-left` → иконка в левом нижнем углу\n - `top-right` / `top` → иконка в правом верхнем углу\n - `top-left` → иконка в левом верхнем углу\n- Иконка автоматически отзеркаливается (`scaleX`/`scaleY`) для корректного визуального отображения в каждом углу\n- При передаче callback-функции результат мержится с дефолтной конфигурацией — можно переопределить только нужные поля (`defaultSize`, `minWidth`, `icons`, `hiddenIcons` и т.д.)\n- Свойства `onResizeStart` и `onResizeEnd` передаются отдельными пропсами, как и раньше\n\n**Рекомендации по использованию**\n\nОптимальные параметры для AI-ассистента:\n\n```tsx\n\n
\n

AI Assistant

\n \n Пример содержимого AI-ассистента\n \n
\n \n Отмена\n \n \n
\n
\n\n```\n\n**Отключение автоматики:**\n\n```tsx\n\n
\n

AI Assistant

\n \n Пример содержимого AI-ассистента\n \n
\n \n Отмена\n \n \n
\n
\n\n```\n\n**Контролирование стейта видимости снаружи:**\n\n```tsx\nfunction Example() {\n const [isOpen, setIsOpen] = useState(false);\n return (\n
\n \n setIsOpen(false)} />\n \n
\n );\n}\n```\n\n> Подробнее о типах и пропсах — [AiAgentPopover API](?path=/docs/локальные-компоненты-aiagentpopover-api--docs)", "apiDocs": "# AiAgentPopover API\n\n## AiAgentPopoverProps\n\n> Базовые пропсы наследуются от `PopoverProps`: [SDDS Popover](https://plasma.sberdevices.ru/sdds-finai/components/popover/)\n\n```typescript\ntype AiAgentPopoverProps = Omit<\n PopoverProps,\n 'view' | 'placement' | 'resizable'\n> & {\n contentContainerClassNames?: string;\n /**\n * Включить / Выключить перерасчёт offset для кастомных значений placement. top-right, top-left, bottom-right, bottom-left, чтобы стрелка popover была в центре target элемента, а контент пропорционально смещен в зависимости от placement.\n * @default true\n */\n calculateOffset?: boolean;\n /**\n * Включить / Выключить перерасчёт placement в режиме draggable.\n * @default true\n */\n calculatePlacement?: boolean;\n /**\n * Позиция отображения popover.\n * @default auto\n */\n placement?: AiAgentPopoverPlacement;\n /**\n * Включить / Выключить перетаскивание\n * @default false\n */\n draggable?: boolean;\n /**\n * Внешний стейт позиции [position, setPosition].\n * Если не передан, будет использован внутренний стейт. Не используется для интеграции с localStorage. Данное поле отвечает за полное внешнее управление позицией\n */\n positionState?: AiAgentPopoverPositionState;\n /**\n * Начальная позиция при первом рендере (используется только если НЕ передан positionState и НЕ используется useStorage)\n * @default \"bottom-right\"\n */\n defaultPosition?: AiAgentPopoverPosition | AiAgentPopoverCustomPlacement;\n /**\n * Ограничение области в рамках которой можно перемещать элемент\n */\n dragBoundary?: AiAgentPopoverDragBoundary;\n /**\n * В момент драга сохранять текущий стейт видимости popover. При перетаскивании закрытого popover в момент завершения перетаскивания popover не откроется, если этот пропс активен. Аналогично с открытым состоянием.\n * @default true\n */\n ignoreToggleOnDrag?: boolean;\n /**\n * Callback смены позиции в draggable режиме в момент перетаскивания\n */\n onPositionChange?: (pos: { x: number; y: number }) => void;\n /**\n * Сохранять ли позицию в localStorage.\n * - `true`: автосохранение с ключом `ai-agent-popover-position`.\n * - `string`: кастомный ключ (например, `my-popover-position`).\n * - `false`: отключено.\n * @default false\n */\n useStorage?: boolean | string;\n /**\n * Включить / настроить resizable-режим.\n * - `true`: включить с дефолтной конфигурацией (иконка ресайза автоматически позиционируется в зависимости от placement).\n * - `(placement: AiAgentPopoverPlacement) => config`: функция для кастомной конфигурации. Принимает текущий placement,\n * возвращает частичную конфигурацию, которая мержится с дефолтной.\n * @default undefined\n */\n resizable?:\n | boolean\n | ((\n placement: AiAgentPopoverPlacement,\n ) => Partial);\n\n /**\n * Data-атрибуты для target-кнопки (MagicButton). Например: data-onboarding-id, data-testid\n */\n targetDataAttributes?: DataAttributes;\n};\n```\n\n## AiAgentPopoverCustomPlacement\n\n```typescript\ntype AiAgentPopoverCustomPlacement =\n | 'top-right'\n | 'top-left'\n | 'bottom-right'\n | 'bottom-left';\n```\n\n## AiAgentPopoverPlacement\n\n```typescript\ntype AiAgentPopoverPlacement =\n | PopoverProps['placement']\n | AiAgentPopoverCustomPlacement;\n```", "curatedStories": [ { "exportName": "Resizable", "displayName": "Resizable", "type": "full-code", "code": "import { AiAgentPopover } from '@daisforge/ui';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/AiAgentPopover/AiAgentPopover.stories.tsx',\n 'PopoverContent',\n)}\n\nrender() {\n return (\n \n ({ minWidth: 250 })}\n onResizeStart={() => {\n // eslint-disable-next-line no-console\n console.debug('resize start');\n }}\n onResizeEnd={() => {\n // eslint-disable-next-line no-console\n console.debug('resize end');\n }}\n useStorage\n targetDataAttributes={{\n 'data-testid': 'aiAgentPopover',\n }}\n >\n alert('close')} />\n \n \n );\n }" }, { "exportName": "Uncontrolled", "displayName": "Example", "type": "full-code", "code": "import { AiAgentPopover } from '@daisforge/ui';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/AiAgentPopover/AiAgentPopover.stories.tsx',\n 'PopoverContent',\n)}\n\nrender() {\n return (\n \n {\n // eslint-disable-next-line no-console\n console.debug('pos', pos);\n }}\n useStorage\n targetDataAttributes={{\n 'data-testid': 'aiAgentPopover',\n }}\n >\n alert('close')} />\n \n \n );\n }" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { AiAgentPopover } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Resizable", "displayName": "Resizable", "type": "full-code", "code": "import { AiAgentPopover } from '@daisforge/ui';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/AiAgentPopover/AiAgentPopover.stories.tsx',\n 'PopoverContent',\n)}\n\nrender() {\n return (\n \n ({ minWidth: 250 })}\n onResizeStart={() => {\n // eslint-disable-next-line no-console\n console.debug('resize start');\n }}\n onResizeEnd={() => {\n // eslint-disable-next-line no-console\n console.debug('resize end');\n }}\n useStorage\n targetDataAttributes={{\n 'data-testid': 'aiAgentPopover',\n }}\n >\n alert('close')} />\n \n \n );\n }" }, { "exportName": "Uncontrolled", "displayName": "Example", "type": "full-code", "code": "import { AiAgentPopover } from '@daisforge/ui';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/AiAgentPopover/AiAgentPopover.stories.tsx',\n 'PopoverContent',\n)}\n\nrender() {\n return (\n \n {\n // eslint-disable-next-line no-console\n console.debug('pos', pos);\n }}\n useStorage\n targetDataAttributes={{\n 'data-testid': 'aiAgentPopover',\n }}\n >\n alert('close')} />\n \n \n );\n }" }, { "exportName": "Usage1", "displayName": "Использование в AiAgentPopover.stories.tsx", "type": "usage", "code": " ({ minWidth: 250 })}\n onResizeStart={() => {\n // eslint-disable-next-line no-console\n console.debug('resize start');\n }}\n onResizeEnd={() => {\n // eslint-disable-next-line no-console\n console.debug('resize end');\n }}\n useStorage\n targetDataAttributes={{\n 'data-testid': 'aiAgentPopover',\n }}\n >\n alert('close')} />\n ", "sourceFile": "packages/storybook/src/stories/AiAgentPopover/AiAgentPopover.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в AiAgentPopover.stories.tsx", "type": "usage", "code": " {\n // eslint-disable-next-line no-console\n console.debug('pos', pos);\n }}\n useStorage\n targetDataAttributes={{\n 'data-testid': 'aiAgentPopover',\n }}\n >\n alert('close')} />\n ", "sourceFile": "packages/storybook/src/stories/AiAgentPopover/AiAgentPopover.stories.tsx" } ] }, "AnalyticalWidget": { "name": "AnalyticalWidget", "group": "components", "folderName": "AnalyticalWidget", "role": "primary", "description": "Карточка-виджет фиксированного размера со слотами шапки, фильтров, табов и контента", "props": [ { "name": "contentSlot", "type": "React.ReactNode", "required": true, "description": "ReactNode с контентом" }, { "name": "size", "type": "AnalyticalWidgetSize", "required": true, "description": "Размер виджета", "default": "'l'" }, { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для основного контейнера виджета" }, { "name": "classes", "type": "AnalyticalWidgetClasses | undefined", "required": false, "description": "Кастомные классы для слотов и самого компонента" }, { "name": "headerSlot", "type": "React.ReactNode", "required": false, "description": "ReactNode для шапки" }, { "name": "middleSlot", "type": "React.ReactNode", "required": false, "description": "ReactNode (в основном для табов. Отображается только в режиме l)" }, { "name": "scrollable", "type": "boolean | undefined", "required": false, "description": "Добавление или удаление скролла у contentSlot", "default": "true" }, { "name": "topSlot", "type": "React.ReactNode", "required": false, "description": "ReactNode (в основном для фильтров)" } ], "propsTypeName": "AnalyticalWidgetProps", "compoundParts": [ { "name": "Header", "typeName": "AnalyticalWidgetHeaderProps", "props": [ { "name": "badge", "type": "string | undefined", "required": false, "description": "Метка справа от заголовка" }, { "name": "badgeStyles", "type": "React.CSSProperties | undefined", "required": false, "description": "Стили для метки (badge). Позволяет переопределить, например, text-transform" }, { "name": "infoTooltipProps", "type": "Omit | undefined", "required": false, "description": "Пропсы для Tooltip иконки i, справа от тега." }, { "name": "infoTooltipText", "type": "string | undefined", "required": false, "description": "Текст Tooltip при наведении на иконку i, справа от тега. Если не передать этот параметр, то иконка отображаться не будет" }, { "name": "rightSlot", "type": "React.ReactNode", "required": false, "description": "Слот для контента в правой части шапки" }, { "name": "subtitle", "type": "React.ReactNode", "required": false, "description": "Подзаголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\nна обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\nвремя загрузки) — он рендерится как есть, без тултипа." }, { "name": "subtitleTooltipProps", "type": "Omit | undefined", "required": false, "description": "Пропсы для Tooltip подзаголовка" }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "Заголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\nна обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\nвремя загрузки данных с бэкенда) — он рендерится как есть, без тултипа." }, { "name": "titleLinkProps", "type": "Omit &…", "required": false, "description": "Если необходимо title сделать ссылкой.\nПропсы для компонента Link, который оборачивает заголовок.", "default": "underline=\"none\"" }, { "name": "titleTooltipProps", "type": "Omit | undefined", "required": false, "description": "Пропсы для Tooltip заголовка" }, { "name": "hrefProps", "type": "{ onClick?: React.MouseEventHandler | undefined; onKeyDown?: React.KeyboardEventHandler | undefined; } | undefined", "required": false, "description": "", "deprecated": true } ] }, { "name": "FilterIconButton", "typeName": "IconButtonFilterProps", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "dropdownProps", "type": "(Omit, \"view\" | \"size\"> & Pick & { items: ItemOption[]; trigger?: DropdownTrigger | undefined; placement?: DropdownPlacement | undefined; children?: React.ReactNode; variant?: \"normal\" | \"tight\" | undefined; zIndex?: Property.ZInd…", "required": false, "description": "" }, { "name": "iconSize", "type": "\"xs\" | \"s\" | \"m\" | undefined", "required": false, "description": "" }, { "name": "redSquare", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"xs\" | \"s\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"auto\" | \"filled\" | \"fixed\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"clear\" | \"default\" | \"secondary\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"black\" | \"white\" | \"gradient\" | undefined", "required": false, "description": "" } ] }, { "name": "DotsIconButton", "typeName": "AnalyticalWidgetIconButtonDotsProps", "props": [ { "name": "absolute", "type": "boolean | undefined", "required": false, "description": "Позиционировать кнопку абсолютом в правом верхнем углу ближайшего\nrelative-контейнера. Для потребителей (напр. GridDND рабочих столов),\nу которых нет доступа к контенту виджета.", "default": "false" }, { "name": "absoluteOffset", "type": "number | undefined", "required": false, "description": "Отступ (top/right) при `absolute`.", "default": "12" }, { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "dropdownProps", "type": "(Omit, \"view\" | \"size\"> & Pick & { items: ItemOption[]; trigger?: DropdownTrigger | undefined; placement?: DropdownPlacement | undefined; children?: React.ReactNode; variant?: \"normal\" | \"tight\" | undefined; zIndex?: Property.ZInd…", "required": false, "description": "" }, { "name": "iconOrientation", "type": "\"horizontal\" | \"vertical\" | undefined", "required": false, "description": "", "default": "'vertical'" }, { "name": "iconSize", "type": "\"xs\" | \"s\" | \"m\" | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "position", "type": "any", "required": false, "description": "" }, { "name": "size", "type": "\"xs\" | \"s\" | \"m\" | \"l\" | undefined", "required": false, "description": "", "default": "'m'" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"secondary\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"gradient\" | \"info\" | undefined", "required": false, "description": "", "default": "'default'" } ] }, { "name": "Chips", "typeName": "AnalyticalWidgetChipsGroupProps", "props": [ { "name": "chips", "type": "AnalyticalWidgetFixedChipProps[]", "required": true, "description": "Пропсы для чипов" }, { "name": "opened", "type": "boolean", "required": true, "description": "", "default": "false" }, { "name": "commonSize", "type": "\"xs\" | \"s\" | \"m\" | undefined", "required": false, "description": "", "default": "'xs'" }, { "name": "commonView", "type": "\"clear\" | \"default\" | \"accent\" | undefined", "required": false, "description": "", "default": "'default'" } ] } ], "sourceFile": "packages/ui-kit/src/components/AnalyticalWidget/AnalyticalWidget.tsx", "type": "composition", "category": "Композиции", "hint": "Это layout, не фильтрация. Compound-компоненты (Header, Chips, FilterIconButton) — это примеры наполнения, а не обязательная часть. Widget — универсальный аналог.", "keywords": [ "дашборд-виджет", "аналитическая карточка", "панель с фильтрами" ], "scope": "internal", "docs": "# AnalyticalWidget\n\nАналитический виджет с адаптивным поведением и слотами для контента.\n\n## Ключевые особенности\n\n- Три размера (`L`, `M`, `S`) с разными параметрами высоты, ширины, border-radius и padding\n- Слоты: `headerSlot`, `topSlot`, `middleSlot` (только для `L`), `contentSlot`\n- `middleSlot` видим только при размере `L`\n- Прокрутка контентной области (`scrollable`)\n- Кастомизация через `classes`, `$css` и CSS-переменные\n\n## Compound-компоненты\n\n```ts\nAnalyticalWidget.Header = AnalyticalWidgetHeader;\nAnalyticalWidget.FilterIconButton = IconButtonFilter;\nAnalyticalWidget.DotsIconButton = IconButtonDots;\nAnalyticalWidget.Chips = AnalyticalWidgetChipsGroup;\n```\n\n- `AnalyticalWidget.Header` — шапка виджета с заголовком и слотами для действий\n- `AnalyticalWidget.FilterIconButton` — кнопка-иконка для фильтров (с поддержкой Dropdown). Поддерживает красный индикатор применения фильтров\n- `AnalyticalWidget.DotsIconButton` — кнопка-иконка для дополнительных действий (с поддержкой Dropdown)\n- `AnalyticalWidget.Chips` — чипы для отображения применённых фильтров\n\n## CSS-переменные\n\n- `--analytical-widget-bg` — фон всего виджета\n- `--analytical-widget-padding` — внутренние отступы контейнера\n- `--analytical-widget-br` — радиус скругления углов\n- `--analytical-widget-min-height` — минимальная высота контентной области\n\n## Особенности\n\n- Все параметры можно переопределить через CSS-переменные, нативные/кастомные классы компонента или проп `$css` для основного контейнера. Объект `analyticalWidgetClassNames` доступен для импорта\n- Кнопка троеточия вставляется через микрофронт другой командой — место под неё зарезервировано. В stories показан пример через `position: absolute`\n- Высота, ширина, border-radius, padding зависят от размера и имеют фиксированные значения\n\n\n\nОписание типов и compound-пропсов — в разделе [API](/docs/композиции-analyticalwidget-api--docs).", "apiDocs": "# AnalyticalWidget API\n\n## AnalyticalWidgetProps\n\n```typescript\ntype AnalyticalWidgetProps = {\n /**\n * Размер виджета\n */\n size: AnalyticalWidgetSize;\n /**\n * Добавление или удаление скролла у contentSlot\n */\n scrollable?: boolean;\n /**\n * ReactNode для шапки\n */\n headerSlot?: ReactNode;\n /**\n * ReactNode (в основном для фильтров)\n */\n topSlot?: ReactNode;\n /**\n * ReactNode (в основном для табов. Отображается только в режиме l)\n */\n middleSlot?: ReactNode;\n /**\n * ReactNode с контентом\n */\n contentSlot: ReactNode;\n /**\n * Кастомные классы для слотов и самого компонента\n */\n classes?: AnalyticalWidgetClasses;\n /**\n * Кастомные стили styled-components для основного контейнера виджета\n */\n $css?: string | CSSObject | FlattenSimpleInterpolation;\n};\n```\n\n## AnalyticalWidgetSize\n\n```typescript\ntype AnalyticalWidgetSize = 'l' | 'm' | 's';\n```\n\n## AnalyticalWidgetClasses\n\n```typescript\ntype AnalyticalWidgetClasses = {\n /**\n * Кастомный класс для root элемента\n */\n root?: string;\n /**\n * Кастомный класс для topSlot элемента\n */\n topSlot?: string;\n /**\n * Кастомный класс для middleSlot элемента\n */\n middleSlot?: string;\n /**\n * Кастомный класс для contentSlot элемента\n */\n contentSlot?: string;\n};\n```\n\n## Compound types\n\n### AnalyticalWidget.Header\n\n```typescript\ninterface AnalyticalWidgetHeaderProps {\n /**\n * Заголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\n * на обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\n * время загрузки данных с бэкенда) — он рендерится как есть, без тултипа.\n */\n title?: ReactNode;\n /**\n * Пропсы для Tooltip заголовка\n */\n titleTooltipProps?: Omit;\n /**\n * Метка справа от заголовка\n */\n badge?: string;\n /**\n * Стили для метки (badge). Позволяет переопределить, например, text-transform\n */\n badgeStyles?: CSSProperties;\n /**\n * Подзаголовок. Строка обрезается троеточием (truncated text) с Tooltip при наведении\n * на обрезанный текст. Можно передать произвольный ReactNode (например, Skeleton на\n * время загрузки) — он рендерится как есть, без тултипа.\n */\n subtitle?: ReactNode;\n /**\n * Пропсы для Tooltip подзаголовка\n */\n subtitleTooltipProps?: Omit;\n /**\n * Текст Tooltip при наведении на иконку i, справа от тега. Если не передать этот параметр, то иконка отображаться не будет\n */\n infoTooltipText?: string;\n /**\n * Пропсы для Tooltip иконки i, справа от тега.\n */\n infoTooltipProps?: Omit;\n /**\n * @deprecated Стрелка больше не рисуется. Используйте `titleLinkProps`.\n */\n href?: string;\n /**\n * @deprecated Стрелка больше не рисуется. Используйте `titleLinkProps`.\n */\n hrefProps?: {\n onClick?: MouseEventHandler;\n onKeyDown?: KeyboardEventHandler;\n };\n /**\n * Если необходимо title сделать ссылкой.\n * Пропсы для компонента Link, который оборачивает заголовок.\n * @default underline=\"none\"\n */\n titleLinkProps?: Omit;\n /**\n * Слот для контента в правой части шапки\n */\n rightSlot?: ReactNode;\n /**\n * Имя класса для шапки\n */\n className?: string;\n}\n```\n\n### AnalyticalWidget.Chips\n\n```typescript\ntype AnalyticalWidgetFixedChipProps = ChipCompProps & {\n key?: string | number;\n};\n```\n\n### AnalyticalWidget.FilterIconButton\n\n```typescript\ntype IconButtonFilterProps = IconButtonProps & {\n redSquare?: boolean;\n dropdownProps?: ComponentProps;\n iconSize?: ComponentProps['size'];\n};\n```\n\n### AnalyticalWidget.DotsIconButton\n\n```typescript\ntype IconButtonDotsProps = IconButtonProps & {\n dropdownProps?: ComponentProps;\n iconSize?: ComponentProps['size'];\n iconOrientation?: 'horizontal' | 'vertical';\n};\n```", "curatedStories": [ { "exportName": "AnalyticalWidgetL", "displayName": "AnalyticalWidgetL", "type": "full-code", "code": "import {\n Box,\n Combobox,\n Flow,\n SegmentGroup,\n SegmentProvider,\n TooltipList,\n useFiltersList,\n IconDone,\n SegmentItem,\n AnalyticalWidget,\n textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n searchedV: string;\n blocks: string[];\n tribes: string[];\n allocation: string;\n year: number | null;\n filterButton: string;\n dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n searchedV: '',\n blocks: [],\n tribes: [],\n allocation: '',\n year: null,\n filterButton: '',\n dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n searchedV: 'Поиск',\n blocks: 'Блок',\n tribes: 'Трайб',\n allocation: 'Аллокация',\n year: 'Год',\n filterButton: 'Фильтры',\n dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n useMemo(\n () =>\n Array(num)\n .fill(0)\n .map((_, i) => ({\n label: \\\n\n() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n const someItems = Array(3).fill(0);\n\n const { filterList, filterListOpened } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const chipsList = filterList\n .map((item) => {\n if ('groupLabel' in item) {\n return item.items.map((innerItem) => ({\n text: String(innerItem.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: innerItem.onClick,\n }));\n }\n return {\n text: String(item.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: item.onClick,\n };\n })\n .flat();\n\n return (\n \n \n \n \n \n {someItems.map((_, i) => (\n \n ))}\n \n \n }\n infoTooltipText=\"Info\"\n href=\"/\"\n />\n }\n topSlot={\n \n \n \n }\n contentSlot={\n \n {longText()}\n \n }\n classes={{\n topSlot: 'myCustomClassForTopSlot',\n middleSlot: 'myCustomClassForMiddleSlot',\n contentSlot: 'myCustomClassForContentSlot',\n root: 'myCustomClassForRoot',\n }}\n />\n \n \n \n \n );\n }" }, { "exportName": "AnalyticalWidgetM", "displayName": "AnalyticalWidgetM", "type": "full-code", "code": "import {\n Box,\n Combobox,\n Flow,\n SegmentGroup,\n SegmentProvider,\n TooltipList,\n useFiltersList,\n IconDone,\n SegmentItem,\n AnalyticalWidget,\n textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n searchedV: string;\n blocks: string[];\n tribes: string[];\n allocation: string;\n year: number | null;\n filterButton: string;\n dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n searchedV: '',\n blocks: [],\n tribes: [],\n allocation: '',\n year: null,\n filterButton: '',\n dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n searchedV: 'Поиск',\n blocks: 'Блок',\n tribes: 'Трайб',\n allocation: 'Аллокация',\n year: 'Год',\n filterButton: 'Фильтры',\n dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n useMemo(\n () =>\n Array(num)\n .fill(0)\n .map((_, i) => ({\n label: \\\n\n() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n const someItems = Array(3).fill(0);\n\n const { filterList, filterListOpened } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const chipsList = filterList\n .map((item, index) => {\n if ('groupLabel' in item) {\n return item.items.map((innerItem, innerIdex) => ({\n text: String(innerItem.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: innerItem.onClick,\n key: `chip-key${index}-${innerIdex}-${innerItem.label}`,\n }));\n }\n return {\n text: String(item.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: item.onClick,\n key: `chip-key-${index}-${item.label}`,\n };\n })\n .flat();\n\n return (\n \n \n \n \n \n {someItems.map((_, i) => (\n \n ))}\n \n \n }\n infoTooltipText=\"Info\"\n href=\"/\"\n />\n }\n topSlot={\n \n \n \n }\n contentSlot={\n \n {longText()}\n \n }\n classes={{\n topSlot: 'myCustomClassForTopSlot',\n middleSlot: 'myCustomClassForMiddleSlot',\n contentSlot: 'myCustomClassForContentSlot',\n root: 'myCustomClassForRoot',\n }}\n />\n \n \n \n \n );\n }" }, { "exportName": "AnalyticalWidgetS", "displayName": "AnalyticalWidgetS", "type": "full-code", "code": "import {\n Box,\n Combobox,\n Flow,\n SegmentGroup,\n SegmentProvider,\n TooltipList,\n useFiltersList,\n IconDone,\n SegmentItem,\n AnalyticalWidget,\n textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n searchedV: string;\n blocks: string[];\n tribes: string[];\n allocation: string;\n year: number | null;\n filterButton: string;\n dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n searchedV: '',\n blocks: [],\n tribes: [],\n allocation: '',\n year: null,\n filterButton: '',\n dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n searchedV: 'Поиск',\n blocks: 'Блок',\n tribes: 'Трайб',\n allocation: 'Аллокация',\n year: 'Год',\n filterButton: 'Фильтры',\n dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n useMemo(\n () =>\n Array(num)\n .fill(0)\n .map((_, i) => ({\n label: \\\n\n() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n\n const { filterList, filterListOpened } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const chipsList = filterList\n .map((item) => {\n if ('groupLabel' in item) {\n return item.items.map((innerItem) => ({\n text: String(innerItem.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: innerItem.onClick,\n }));\n }\n return {\n text: String(item.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: item.onClick,\n };\n })\n .flat();\n\n return (\n \n \n \n \n }\n topSlot={\n \n \n \n }\n contentSlot={\n \n {longText()}\n \n }\n classes={{\n topSlot: 'myCustomClassForTopSlot',\n middleSlot: 'myCustomClassForMiddleSlot',\n contentSlot: 'myCustomClassForContentSlot',\n root: 'myCustomClassForRoot',\n }}\n />\n \n \n \n \n );\n }" }, { "exportName": "AnalyticalWidgetCustomTopSlot", "displayName": "Custom topSlot + rightSlot", "type": "full-code", "code": "() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n const [period, setPeriod] = useState('month');\n\n const { filterList } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const customChips = filterList.flatMap((item) =>\n 'groupLabel' in item\n ? item.items.map((inner) => ({\n label: String(inner.label),\n onClick: inner.onClick,\n }))\n : [{ label: String(item.label), onClick: item.onClick }],\n );\n const hasChips = customChips.length > 0;\n const lastRef = useRef(customChips);\n if (hasChips) {\n lastRef.current = customChips;\n }\n const renderedChips = hasChips ? customChips : lastRef.current;\n\n return (\n
\n
\n setPeriod(v as string)}\n items={[\n { label: 'Месяц', value: 'month' },\n { label: 'Квартал', value: 'quarter' },\n { label: 'Год', value: 'year' },\n ]}\n />\n }\n />\n }\n topSlot={\n
\n \n \n {renderedChips.map((chip, index) => (\n \n {chip.label}\n \n ))}\n
\n \n
\n }\n contentSlot={\n
{longText()}
\n }\n />\n \n
\n \n );\n }" }, { "exportName": "AnalyticalWidgetHeaderSkeleton", "displayName": "Header: skeleton title/subtitle", "type": "full-code", "code": "() => {\n const [loading, setLoading] = useState(true);\n\n return (\n
\n
\n \n
\n
\n \n ) : (\n 'Аналитический виджет'\n )\n }\n badge={loading ? undefined : 'TA'}\n subtitle={\n loading ? (\n \n ) : (\n 'Данные за месяц'\n )\n }\n infoTooltipText=\"Info\"\n />\n }\n contentSlot={\n
{longText()}
\n }\n />\n
\n
\n );\n }" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { AnalyticalWidget } from '@daisforge/ui';", "minimalUsage": "\n {/* части: AnalyticalWidget.Header, AnalyticalWidget.FilterIconButton, AnalyticalWidget.DotsIconButton, AnalyticalWidget.Chips */}\n", "examples": [ { "exportName": "AnalyticalWidgetL", "displayName": "AnalyticalWidgetL", "type": "full-code", "code": "import {\n Box,\n Combobox,\n Flow,\n SegmentGroup,\n SegmentProvider,\n TooltipList,\n useFiltersList,\n IconDone,\n SegmentItem,\n AnalyticalWidget,\n textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n searchedV: string;\n blocks: string[];\n tribes: string[];\n allocation: string;\n year: number | null;\n filterButton: string;\n dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n searchedV: '',\n blocks: [],\n tribes: [],\n allocation: '',\n year: null,\n filterButton: '',\n dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n searchedV: 'Поиск',\n blocks: 'Блок',\n tribes: 'Трайб',\n allocation: 'Аллокация',\n year: 'Год',\n filterButton: 'Фильтры',\n dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n useMemo(\n () =>\n Array(num)\n .fill(0)\n .map((_, i) => ({\n label: \\\n\n() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n const someItems = Array(3).fill(0);\n\n const { filterList, filterListOpened } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const chipsList = filterList\n .map((item) => {\n if ('groupLabel' in item) {\n return item.items.map((innerItem) => ({\n text: String(innerItem.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: innerItem.onClick,\n }));\n }\n return {\n text: String(item.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: item.onClick,\n };\n })\n .flat();\n\n return (\n \n \n \n \n \n {someItems.map((_, i) => (\n \n ))}\n \n \n }\n infoTooltipText=\"Info\"\n href=\"/\"\n />\n }\n topSlot={\n \n \n \n }\n contentSlot={\n \n {longText()}\n \n }\n classes={{\n topSlot: 'myCustomClassForTopSlot',\n middleSlot: 'myCustomClassForMiddleSlot',\n contentSlot: 'myCustomClassForContentSlot',\n root: 'myCustomClassForRoot',\n }}\n />\n \n \n \n \n );\n }" }, { "exportName": "AnalyticalWidgetM", "displayName": "AnalyticalWidgetM", "type": "full-code", "code": "import {\n Box,\n Combobox,\n Flow,\n SegmentGroup,\n SegmentProvider,\n TooltipList,\n useFiltersList,\n IconDone,\n SegmentItem,\n AnalyticalWidget,\n textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n searchedV: string;\n blocks: string[];\n tribes: string[];\n allocation: string;\n year: number | null;\n filterButton: string;\n dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n searchedV: '',\n blocks: [],\n tribes: [],\n allocation: '',\n year: null,\n filterButton: '',\n dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n searchedV: 'Поиск',\n blocks: 'Блок',\n tribes: 'Трайб',\n allocation: 'Аллокация',\n year: 'Год',\n filterButton: 'Фильтры',\n dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n useMemo(\n () =>\n Array(num)\n .fill(0)\n .map((_, i) => ({\n label: \\\n\n() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n const someItems = Array(3).fill(0);\n\n const { filterList, filterListOpened } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const chipsList = filterList\n .map((item, index) => {\n if ('groupLabel' in item) {\n return item.items.map((innerItem, innerIdex) => ({\n text: String(innerItem.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: innerItem.onClick,\n key: `chip-key${index}-${innerIdex}-${innerItem.label}`,\n }));\n }\n return {\n text: String(item.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: item.onClick,\n key: `chip-key-${index}-${item.label}`,\n };\n })\n .flat();\n\n return (\n \n \n \n \n \n {someItems.map((_, i) => (\n \n ))}\n \n \n }\n infoTooltipText=\"Info\"\n href=\"/\"\n />\n }\n topSlot={\n \n \n \n }\n contentSlot={\n \n {longText()}\n \n }\n classes={{\n topSlot: 'myCustomClassForTopSlot',\n middleSlot: 'myCustomClassForMiddleSlot',\n contentSlot: 'myCustomClassForContentSlot',\n root: 'myCustomClassForRoot',\n }}\n />\n \n \n \n \n );\n }" }, { "exportName": "AnalyticalWidgetS", "displayName": "AnalyticalWidgetS", "type": "full-code", "code": "import {\n Box,\n Combobox,\n Flow,\n SegmentGroup,\n SegmentProvider,\n TooltipList,\n useFiltersList,\n IconDone,\n SegmentItem,\n AnalyticalWidget,\n textInfo\n} from '@daisforge/ui';\nimport type { ItemOrGroup } from '@daisforge/ui';\n\nimport React, { useMemo, useReducer, useState } from 'react';\n\ntype Filters = {\n searchedV: string;\n blocks: string[];\n tribes: string[];\n allocation: string;\n year: number | null;\n filterButton: string;\n dotsButton: string;\n};\n\nconst DEFAULT_FILTERS: Filters = {\n searchedV: '',\n blocks: [],\n tribes: [],\n allocation: '',\n year: null,\n filterButton: '',\n dotsButton: '',\n};\n\nconst LABELS: { [key in keyof Filters]: string } = {\n searchedV: 'Поиск',\n blocks: 'Блок',\n tribes: 'Трайб',\n allocation: 'Аллокация',\n year: 'Год',\n filterButton: 'Фильтры',\n dotsButton: 'Меню',\n};\n\nconst useFetch = (key: 'blocks' | 'tribes' | 'allocation', num = 10) =>\n useMemo(\n () =>\n Array(num)\n .fill(0)\n .map((_, i) => ({\n label: \\\n\n() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n\n const { filterList, filterListOpened } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const chipsList = filterList\n .map((item) => {\n if ('groupLabel' in item) {\n return item.items.map((innerItem) => ({\n text: String(innerItem.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: innerItem.onClick,\n }));\n }\n return {\n text: String(item.label),\n view: 'default' as const,\n hasClear: false as const,\n onClick: item.onClick,\n };\n })\n .flat();\n\n return (\n \n \n \n \n }\n topSlot={\n \n \n \n }\n contentSlot={\n \n {longText()}\n \n }\n classes={{\n topSlot: 'myCustomClassForTopSlot',\n middleSlot: 'myCustomClassForMiddleSlot',\n contentSlot: 'myCustomClassForContentSlot',\n root: 'myCustomClassForRoot',\n }}\n />\n \n \n \n \n );\n }" }, { "exportName": "AnalyticalWidgetCustomTopSlot", "displayName": "Custom topSlot + rightSlot", "type": "full-code", "code": "() => {\n const [filters, updateFilters] = useReducer(\n filtersReducer,\n DEFAULT_FILTERS,\n );\n const filtersBlocksOption = useFetch('blocks', 10);\n const filtersTribesOption = useFetch('tribes', 15);\n const filtersAllocationOption = useFetch('allocation', 10);\n const [period, setPeriod] = useState('month');\n\n const { filterList } = useFiltersList({\n filters,\n options: {\n blocks: filtersBlocksOption,\n tribes: filtersTribesOption,\n allocation: filtersAllocationOption,\n filterButton: filterButtonOptions,\n dotsButton: dotsButtonOptions,\n } as Record,\n updateFilters: (key, newV) => updateFilters({ [key]: newV }),\n filtersInfo: {\n searchedV: { label: 'Поиск', clearedValue: '' },\n blocks: { label: 'Блок', clearedValue: [] },\n tribes: { label: 'Трайб', clearedValue: [] },\n allocation: { label: 'Аллокация', clearedValue: '' },\n year: { label: 'Год', clearedValue: null },\n filterButton: { label: 'Фильтр', clearedValue: '' },\n dotsButton: { label: 'Меню', clearedValue: '' },\n },\n });\n\n const customChips = filterList.flatMap((item) =>\n 'groupLabel' in item\n ? item.items.map((inner) => ({\n label: String(inner.label),\n onClick: inner.onClick,\n }))\n : [{ label: String(item.label), onClick: item.onClick }],\n );\n const hasChips = customChips.length > 0;\n const lastRef = useRef(customChips);\n if (hasChips) {\n lastRef.current = customChips;\n }\n const renderedChips = hasChips ? customChips : lastRef.current;\n\n return (\n
\n
\n setPeriod(v as string)}\n items={[\n { label: 'Месяц', value: 'month' },\n { label: 'Квартал', value: 'quarter' },\n { label: 'Год', value: 'year' },\n ]}\n />\n }\n />\n }\n topSlot={\n
\n \n \n {renderedChips.map((chip, index) => (\n \n {chip.label}\n \n ))}\n
\n \n
\n }\n contentSlot={\n
{longText()}
\n }\n />\n \n
\n \n );\n }" } ] }, "ApprovalCenter": { "name": "ApprovalCenter", "group": "components", "folderName": "ApprovalCenter", "role": "primary", "description": "Панель согласования с превью, историей действий и жизненным циклом стадий по вкладкам", "props": [ { "name": "tabs", "type": "ApprovalCenterTabs", "required": true, "description": "Параметры вкладок" }, { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные CSS-стили для контейнера" }, { "name": "history", "type": "HistoryItem[] | undefined", "required": false, "description": "Параметры вкладки истории" }, { "name": "lifeCycle", "type": "LifeCycleItem[] | undefined", "required": false, "description": "Параметры вкладки жизненного цикла" }, { "name": "preview", "type": "ApprovalCenterPreview | undefined", "required": false, "description": "Параметры превью" } ], "propsTypeName": "ApprovalCenterProps", "sourceFile": "packages/ui-kit/src/components/ApprovalCenter/ApprovalCenter.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "согласование заявки", "workflow approval", "история действий" ], "docs": "# ApprovalCenter\n\nКомпонент согласований. Используется в случаях, когда необходимо необходимо отобразить последовательные согласования между группами лиц. Показывает текущее состояние, а также общую историю.\n\n## Ключевые особенности\n\n- Поддержка превью `preview` - экран, необходимый для кейсов, когда данные ещё не были получены\n- Возможность переключения и скрытия вкладок `tabs` - управление состоянием вкладок (`Tabs`)\n- Управление жизненным циклом `lifeCycle` - параметры отображения вкладки жизненного цикла\n- Управление историей `history` - параметры отображения вкладки истории\n- Кастомизация через `$css` - передача собственных CSS стилей в корневой элемент компонента", "apiDocs": "# ApprovalCenter API\n\n## ApprovalCenterProps\n\n```typescript\ntype ApprovalCenterProps = {\n /**\n * Дополнительный класс для корневого элемента\n */\n className?: string;\n /**\n * Кастомные CSS-стили для контейнера\n */\n $css?: string | CSSObject | FlattenSimpleInterpolation;\n /**\n * Параметры превью\n */\n preview?: ApprovalCenterPreview;\n /**\n * Параметры вкладок\n */\n tabs: ApprovalCenterTabs;\n /**\n * Параметры вкладки жизненного цикла\n */\n lifeCycle?: LifeCycleItem[];\n /**\n * Параметры вкладки истории\n */\n history?: HistoryItem[];\n};\n```\n\n## ApprovalCenterPreview\n\n```typescript\ntype ApprovalCenterPreview = {\n /**\n * Параметры кнопки превью\n */\n button?: PreviewButton;\n /**\n * Переключить превью в режим загрузки\n */\n loading?: boolean;\n};\n```\n\n## PreviewButton\n\n```typescript\ntype PreviewButton = {\n /**\n * Колбэк, вызываемый по клику\n */\n onClick: () => void;\n /**\n * Текстовая надпись\n */\n text: string;\n};\n```\n\n## ApprovalCenterTabs\n\n```typescript\ntype ApprovalCenterTabs = {\n /**\n * Текущая открытая вкладка\n */\n active: 'LIFE_CYCLE';\n /**\n * Список доступных вкладок\n */\n available:\n | ['LIFE_CYCLE', 'HISTORY']\n | ['HISTORY', 'LIFE_CYCLE']\n | ['HISTORY']\n | ['LIFE_CYCLE'];\n};\n```\n\n## LifeCycleItem\n\n```typescript\ntype LifeCycleItem = {\n /**\n * Статус\n */\n status: LifeCycleStatus;\n /**\n * Заголовок\n */\n title: string;\n /**\n * Заголовок выполненного действия\n */\n actionTitle?: string;\n /**\n * Дата выполненного действия\n */\n actionDate?: string;\n /**\n * Этапы (аккордеон)\n */\n stages?: StageItem[];\n /**\n * Вспомогательные кнопки\n */\n buttons?: LifeCycleButton[];\n};\n```\n\n## LifeCycleStatus\n\n```typescript\ntype LifeCycleStatus = 'DEFAULT' | 'WAIT' | 'SUCCESSFUL' | 'FAILURE';\n```\n\n## StageItem\n\n```typescript\ntype StageItem = {\n /**\n * Статус\n */\n status: StageStatus;\n /**\n * Заголовок\n */\n title: string;\n /**\n * Открыт ли элемент аккордеона\n */\n open?: boolean;\n /**\n * Комментарий\n */\n comment?: string;\n /**\n * Тултип на иконке статуса\n */\n tooltip?: { text: string };\n /**\n * Пометка (обычно звёздочка)\n */\n mark?: { tooltip: { text: string }; icon: ReactNode };\n /**\n * Заголовок действия\n */\n actionTitle?: string;\n /**\n * Заголовок даты\n */\n actionDate?: string;\n /**\n * ФИО людей, отвечающих за согласование\n */\n assignee?: [string, ...string[]];\n /**\n * Вспомогательные кнопки\n */\n buttons?: LifeCycleButton[];\n};\n```\n\n## StageStatus\n\n```typescript\ntype StageStatus = 'DEFAULT' | 'WAIT' | 'SUCCESSFUL' | 'FAILURE';\n```\n\n## LifeCycleButton\n\n```typescript\ntype LifeCycleButton = {\n /**\n * Слот для контента слева\n */\n contentLeft: ReactNode;\n /**\n * Колбэк, вызываемый по клику\n */\n onClick: () => void;\n /**\n * Текстовая надпись\n */\n text: string;\n};\n```\n\n## HistoryItem\n\n```typescript\ntype HistoryItem = {\n /**\n * Статус\n */\n status: HistoryItemStatus;\n /**\n * Заголовок действия\n */\n actionTitle: string;\n /**\n * Дата действия\n */\n actionDate: string;\n};\n```\n\n## HistoryItemStatus\n\n```typescript\ntype HistoryItemStatus = 'DEFAULT' | 'WAIT' | 'SUCCESSFUL' | 'FAILURE';\n```", "curatedStories": [ { "exportName": "Preview", "displayName": "Preview", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE', 'HISTORY'],\n },\n preview: {\n button: {\n onClick: () => {},\n text: 'Показать жизненный цикл',\n },\n loading: false,\n },\n }" }, { "exportName": "LoadingPreview", "displayName": "Loading preview", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE', 'HISTORY'],\n },\n preview: {\n button: {\n onClick: () => {},\n text: 'Показать жизненный цикл',\n },\n loading: true,\n },\n }" }, { "exportName": "WithTabs", "displayName": "With tabs", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE', 'HISTORY'],\n },\n lifeCycle,\n history,\n }" }, { "exportName": "WithoutTabs", "displayName": "Without tabs", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE'],\n },\n lifeCycle,\n history,\n }" }, { "exportName": "WithScroll", "displayName": "With scroll", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE', 'HISTORY'],\n },\n lifeCycle,\n history,\n }" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { ApprovalCenter } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Preview", "displayName": "Preview", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE', 'HISTORY'],\n },\n preview: {\n button: {\n onClick: () => {},\n text: 'Показать жизненный цикл',\n },\n loading: false,\n },\n }" }, { "exportName": "LoadingPreview", "displayName": "Loading preview", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE', 'HISTORY'],\n },\n preview: {\n button: {\n onClick: () => {},\n text: 'Показать жизненный цикл',\n },\n loading: true,\n },\n }" }, { "exportName": "WithTabs", "displayName": "With tabs", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE', 'HISTORY'],\n },\n lifeCycle,\n history,\n }" }, { "exportName": "WithoutTabs", "displayName": "Without tabs", "type": "args-only", "code": "{\n tabs: {\n active: 'LIFE_CYCLE',\n available: ['LIFE_CYCLE'],\n },\n lifeCycle,\n history,\n }" } ] }, "Attach": { "name": "Attach", "group": "components", "folderName": "Attach", "role": "primary", "description": "Поле для прикрепления локального файла к форме", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "acceptedFileFormats", "type": "string[] | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "buttonType", "type": "\"button\" | \"iconButton\" | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "customIcon", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "dropdownOptions", "type": "DropdownOptions | undefined", "required": false, "description": "" }, { "name": "files", "type": "File[] | undefined", "required": false, "description": "" }, { "name": "flow", "type": "\"horizontal\" | \"vertical\" | \"auto\" | undefined", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "hasAttachment", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "helperText", "type": "string | undefined", "required": false, "description": "" }, { "name": "helperTextView", "type": "\"default\" | \"negative\" | undefined", "required": false, "description": "" }, { "name": "hideButtonOnAttach", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "onClear", "type": "((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fileInfo: FileInfo) => void) | ((fi…", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"auto\" | \"filled\" | \"fixed\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"accent\" | \"secondary\" | \"clear\" | \"success\" | \"warning\" | \"critical\" | \"dark\" | \"black\" | \"white\" | undefined", "required": false, "description": "" }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false, "description": "" }, { "name": "onChange", "type": "(React.ChangeEventHandler & React.FormEventHandler) | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "((string | number | readonly string[]) & (string | number)) | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Attach/Attach.d.ts", "type": "wrapper", "atomicBase": "Attach", "category": "Локальные компоненты", "keywords": [ "загрузка файла", "file upload", "прикрепить документ" ], "hasCuratedMeta": true, "inheritedProps": [], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Attach } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { Attach } from '@daisforge/ui';\nexport function App() {\n return (\n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Фильтр форматов файлов", "type": "vendor", "code": "import React from 'react';\nimport { Attach } from '@daisforge/ui';\nexport function App() {\n return (\n \n );\n}" } ] }, "Autocomplete": { "name": "Autocomplete", "group": "components", "folderName": "Autocomplete", "role": "primary", "description": "Поле ввода с подсказками из выпадающего списка и кнопкой очистки значения", "props": [ { "name": "onClear", "type": "(() => void) | undefined", "required": false, "description": "Callback при нажатии на кнопку очистки поля ввода." }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false, "description": "" }, { "name": "onChange", "type": "React.ChangeEventHandler | undefined", "required": false, "description": "" }, { "name": "type", "type": "React.HTMLInputTypeAttribute | undefined", "required": false, "description": "" } ], "propsTypeName": "AutocompleteProps", "sourceFile": "packages/ui-kit/src/components/Autocomplete/Autocomplete.tsx", "type": "wrapper", "atomicBase": "Autocomplete", "formVariant": "FormAutocomplete", "category": "Локальные компоненты", "keywords": [ "поле с подсказками", "search input", "выбор из списка при вводе", "автокомплит" ], "docs": "# Autocomplete\n\nКомпонент Autocomplete - обертка над `Autocomplete` из `@salutejs/sdds-finai` с добавлением логики отображения иконки замка при `disabled` или `readOnly`.\n\n## Ключевые особенности\n\n- Поле ввода с автодополнением на основе SDDS Autocomplete\n- Автоматическое отображение иконки замка при `disabled` или `readOnly`\n- Поддержка `onClear` с крестиком очистки\n- Доступные размеры: `s`, `xs`\n\n> Подробнее о типах и пропсах — [Autocomplete API](?path=/docs/локальные-компоненты-autocomplete-api--docs)", "apiDocs": "# Autocomplete API\n\nОбёртка над `Autocomplete` из `@salutejs/sdds-finai`. Добавляет `onClear`.\n\n## Кастомные пропсы (добавлены в обёртке)\n\n```typescript\ntype AutocompleteProps = AutocompleteBaseProps & {\n /**\n * Callback при нажатии на кнопку очистки поля ввода.\n */\n onClear?: () => void;\n};\n```\n\n## Пропсы из @salutejs/sdds-finai\n\nКомпонент принимает все пропсы атомарного `Autocomplete` из `@salutejs/sdds-finai` (включая пропсы `TextField`).\n\nПолное описание — в документации: [Autocomplete](https://plasma.sberdevices.ru/sdds-finai/components/autocomplete/)", "curatedStories": [ { "exportName": "Default", "displayName": "Default", "type": "full-code", "code": "import { Autocomplete } from '@daisforge/ui';\n\n(args: AutocompleteProps) => {\n const [value, setValue] = useState('');\n\n return (\n
\n ) =>\n setValue(e.target.value)\n }\n onSuggestionSelect={(item) => setValue(item.label)}\n suggestions={mockData}\n />\n
\n );\n }" }, { "exportName": "Sizes", "displayName": "Размеры", "type": "full-code", "code": "import { Autocomplete } from '@daisforge/ui';\n\n(args: AutocompleteProps) => {\n const sizes = ['s', 'xs'] as const;\n const [values, setValues] = useState>({\n l: '',\n m: '',\n s: '',\n xs: '',\n });\n\n return (\n \n {sizes.map((size) => (\n ) =>\n setValues((prev) => ({ ...prev, [size]: e.target.value }))\n }\n onSuggestionSelect={(item) =>\n setValues((prev) => ({ ...prev, [size]: item.label }))\n }\n suggestions={mockData}\n />\n ))}\n \n );\n }" }, { "exportName": "WithClear", "displayName": "Различные варианты", "type": "full-code", "code": "import { Autocomplete } from '@daisforge/ui';\n\n(args: AutocompleteProps) => {\n const [value1, setValue1] = useState('Алексей');\n const [value2, setValue2] = useState('Екатерина');\n const [value3, setValue3] = useState('');\n const [value4, setValue4] = useState('Дмитрий');\n\n return (\n \n {/* Сценарий 3: onClear + value → только крестик */}\n ) =>\n setValue1(e.target.value)\n }\n onSuggestionSelect={(item) => setValue1(item.label)}\n onClear={() => setValue1('')}\n suggestions={mockData}\n />\n\n {/* Сценарий 2: onClear + value + contentRight → [крестик | иконка] рядом */}\n }\n onChange={(e: ChangeEvent) =>\n setValue2(e.target.value)\n }\n onSuggestionSelect={(item) => setValue2(item.label)}\n onClear={() => setValue2('')}\n suggestions={mockData}\n />\n\n {/* Сценарий 4: onClear без value → крестик скрыт, contentRight как есть */}\n }\n onChange={(e: ChangeEvent) =>\n setValue3(e.target.value)\n }\n onSuggestionSelect={(item) => setValue3(item.label)}\n onClear={() => setValue3('')}\n suggestions={mockData}\n />\n\n {/* Сценарий 1: readOnly → замок (заменяет всё) */}\n }\n onClear={() => {}}\n suggestions={mockData}\n />\n\n {/* Сценарий 1: disabled → замок (заменяет всё) */}\n }\n onClear={() => {}}\n suggestions={mockData}\n />\n\n {/* Сценарий 4: только contentRight, без onClear */}\n }\n onChange={(e: ChangeEvent) =>\n setValue4(e.target.value)\n }\n onSuggestionSelect={(item) => setValue4(item.label)}\n suggestions={mockData}\n />\n \n );\n }" } ], "chooseWhen": "Вне react-hook-form — самостоятельное поле с value/onChange, без встроенной интеграции с формой.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "afterList", "type": "ReactNode", "required": false, "description": "Ячейка для контента в конце выпадающего списка.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "beforeList", "type": "ReactNode", "required": false, "description": "Ячейка для контента в начале выпадающего списка.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "clear", "type": "boolean", "required": false, "description": "view применяется с clear-токенами", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactElement>", "required": false, "description": "Слот для контента слева.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactElement>", "required": false, "description": "Слот для контента справа.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultValue", "type": "string", "required": false, "description": "Значение поля ввода по-умолчанию.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "filter", "type": "((data: T) => boolean)", "required": false, "description": "Коллбэк фильтра подсказок.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "flip", "type": "boolean", "required": false, "description": "Отображение выпадающего списка сверху, если снизу недостаточно места.", "default": "false", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasDivider", "type": "boolean", "required": false, "description": "отобразить ли divider", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "description": "Видимость стрелки (хвоста).", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 8]", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "description": "Направление раскрытия тултипа.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPortal", "type": "string | RefObject", "required": false, "description": "Портал для окна подсказки. Принимает id контейнера или ref.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "description": "Иконка, рядом с которым произойдет вызов всплывающего окна.\nЕсли свойство не задано, применится иконка по умолчанию.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение иконки подсказки, когда отсутствует label\nили же он имеет labelPlacement='inner'.", "default": "`outer`", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "description": "Текст тултипа", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "description": "Способ открытия тултипа - наведение или клик мышью", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "description": "Ширина окна (в rem).", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "keepPlaceholder", "type": "boolean", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftHelper", "type": "ReactNode", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "listMaxHeight", "type": "string", "required": false, "description": "Максимальная высота выпадающего списка подсказок.", "default": "25rem", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "listWidth", "type": "string", "required": false, "description": "Ширина выпадающего списка подсказок.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onScroll", "type": "((e: UIEvent) => void)", "required": false, "description": "Коллбэк, срабатывающий при скролле.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onSearch", "type": "(((value: string, event?: KeyboardEvent) => void) & ((value: string, event?: KeyboardEvent) => void)) | undefined", "required": false, "description": "Callback по нажатию Enter", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onSuggestionSelect", "type": "((data: T) => void)", "required": false, "description": "Коллбэк, который срабатывает при выборе подсказки.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optional", "type": "boolean", "required": false, "description": "Флаг необязательности поля", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optionalText", "type": "string", "required": false, "description": "Подпись для указания необязательности поля", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "portal", "type": "string | RefObject", "required": false, "description": "Портал для выпадающего списка. Принимает id контейнера или ref.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderItem", "type": "((item: T) => ReactNode)", "required": false, "description": "Callback для кастомной настройки элемента в выпадающем списке.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderList", "type": "((data?: T[]) => ReactNode)", "required": false, "description": "Коллбэк для рендера кастомного списка подсказок.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderListEnd", "type": "(() => ReactNode)", "required": false, "description": "Коллбэк для рендера элемента в конце выпадающего списка.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "rightHelper", "type": "ReactNode", "required": false, "description": "Вспомогательный текст снизу справа для поля ввода.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "rootClassName", "type": "string", "required": false, "description": "ClassName для внешней обертки компонента.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "rootStyle", "type": "CSSProperties", "required": false, "description": "Style для внешней обертки компонента.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "suggestions", "type": "T[]", "required": false, "description": "Массив подсказок.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textAfter", "type": "string", "required": false, "description": "Слот для вспомогательного текста справа.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textBefore", "type": "string", "required": false, "description": "Слот для вспомогательного текста слева.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "threshold", "type": "number", "required": false, "description": "Минимальное число введенных символов, при котором открывается дропдаун.", "default": "2", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleCaption", "type": "ReactNode", "required": false, "description": "Метка-подпись к элементу справа.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string", "required": false, "description": "Значение поля ввода.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "virtual", "type": "boolean", "required": false, "description": "Виртуализация в выпадающем списке.", "default": "false", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "ZIndex", "required": false, "description": "CSS-свойство z-index для выпадающего списка.", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"viewMode\"", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "\"outer\" | \"inner\"", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "default": "'s'", "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"edited\"", "required": false, "inheritedFrom": "Autocomplete", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Autocomplete } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Default", "displayName": "Default", "type": "full-code", "code": "import { Autocomplete } from '@daisforge/ui';\n\n(args: AutocompleteProps) => {\n const [value, setValue] = useState('');\n\n return (\n
\n ) =>\n setValue(e.target.value)\n }\n onSuggestionSelect={(item) => setValue(item.label)}\n suggestions={mockData}\n />\n
\n );\n }" }, { "exportName": "Sizes", "displayName": "Размеры", "type": "full-code", "code": "import { Autocomplete } from '@daisforge/ui';\n\n(args: AutocompleteProps) => {\n const sizes = ['s', 'xs'] as const;\n const [values, setValues] = useState>({\n l: '',\n m: '',\n s: '',\n xs: '',\n });\n\n return (\n \n {sizes.map((size) => (\n ) =>\n setValues((prev) => ({ ...prev, [size]: e.target.value }))\n }\n onSuggestionSelect={(item) =>\n setValues((prev) => ({ ...prev, [size]: item.label }))\n }\n suggestions={mockData}\n />\n ))}\n \n );\n }" }, { "exportName": "WithClear", "displayName": "Различные варианты", "type": "full-code", "code": "import { Autocomplete } from '@daisforge/ui';\n\n(args: AutocompleteProps) => {\n const [value1, setValue1] = useState('Алексей');\n const [value2, setValue2] = useState('Екатерина');\n const [value3, setValue3] = useState('');\n const [value4, setValue4] = useState('Дмитрий');\n\n return (\n \n {/* Сценарий 3: onClear + value → только крестик */}\n ) =>\n setValue1(e.target.value)\n }\n onSuggestionSelect={(item) => setValue1(item.label)}\n onClear={() => setValue1('')}\n suggestions={mockData}\n />\n\n {/* Сценарий 2: onClear + value + contentRight → [крестик | иконка] рядом */}\n }\n onChange={(e: ChangeEvent) =>\n setValue2(e.target.value)\n }\n onSuggestionSelect={(item) => setValue2(item.label)}\n onClear={() => setValue2('')}\n suggestions={mockData}\n />\n\n {/* Сценарий 4: onClear без value → крестик скрыт, contentRight как есть */}\n }\n onChange={(e: ChangeEvent) =>\n setValue3(e.target.value)\n }\n onSuggestionSelect={(item) => setValue3(item.label)}\n onClear={() => setValue3('')}\n suggestions={mockData}\n />\n\n {/* Сценарий 1: readOnly → замок (заменяет всё) */}\n }\n onClear={() => {}}\n suggestions={mockData}\n />\n\n {/* Сценарий 1: disabled → замок (заменяет всё) */}\n }\n onClear={() => {}}\n suggestions={mockData}\n />\n\n {/* Сценарий 4: только contentRight, без onClear */}\n }\n onChange={(e: ChangeEvent) =>\n setValue4(e.target.value)\n }\n onSuggestionSelect={(item) => setValue4(item.label)}\n suggestions={mockData}\n />\n \n );\n }" }, { "exportName": "Usage1", "displayName": "Использование в Autocomplete.stories.tsx", "type": "usage", "code": ") =>\n setValues((prev) => ({ ...prev, [size]: e.target.value }))\n }\n onSuggestionSelect={(item) =>\n setValues((prev) => ({ ...prev, [size]: item.label }))\n }\n suggestions={mockData}\n />", "sourceFile": "packages/storybook/src/stories/Autocomplete/Autocomplete.stories.tsx" } ] }, "AutocompleteSearch": { "name": "AutocompleteSearch", "group": "components", "folderName": "AutocompleteSearch", "role": "primary", "description": "Поле поиска на основе Autocomplete с иконкой лупы, счётчиком найденного и пустым состоянием", "props": [ { "name": "beforeListTotal", "type": "number | boolean | undefined", "required": false, "description": "Показать/Скрыть count значение в начале выпадающего листа. Или указать собственное число" }, { "name": "beforeListTotalEntity", "type": "string | undefined", "required": false, "description": "Добавление названия сущности в начале выпадающего списка" }, { "name": "onClear", "type": "((() => void) & (() => void)) | undefined", "required": false, "description": "Действие при выполнении нажатия на кнопку очистки поля ввода\nCallback при нажатии на кнопку очистки поля ввода." }, { "name": "size", "type": "\"s\" | \"xs\" | undefined", "required": false, "description": "Размер Поля ввода", "default": "'s'" }, { "name": "afterList", "type": "React.ReactNode", "required": false, "description": "Ячейка для контента в конце выпадающего списка." }, { "name": "beforeList", "type": "React.ReactNode", "required": false, "description": "Ячейка для контента в начале выпадающего списка." }, { "name": "contentLeft", "type": "React.ReactElement> | undefined", "required": false, "description": "Слот для контента слева." }, { "name": "contentRight", "type": "React.ReactElement> | undefined", "required": false, "description": "Слот для контента справа." }, { "name": "defaultValue", "type": "string | undefined", "required": false, "description": "Значение поля ввода по-умолчанию." }, { "name": "filter", "type": "((data: SuggestionItemType) => boolean) | undefined", "required": false, "description": "Коллбэк фильтра подсказок." }, { "name": "flip", "type": "boolean | undefined", "required": false, "description": "Отображение выпадающего списка сверху, если снизу недостаточно места.", "default": "false" }, { "name": "hasDivider", "type": "boolean | undefined", "required": false, "description": "отобразить ли divider" }, { "name": "hasRequiredIndicator", "type": "boolean | undefined", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false" }, { "name": "hintContentLeft", "type": "React.ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`." }, { "name": "hintHasArrow", "type": "boolean | undefined", "required": false, "description": "Видимость стрелки (хвоста)." }, { "name": "hintOffset", "type": "[number, number] | undefined", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 8]" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[] | undefined", "required": false, "description": "Направление раскрытия тултипа." }, { "name": "hintPortal", "type": "string | React.RefObject | undefined", "required": false, "description": "Портал для окна подсказки. Принимает id контейнера или ref." }, { "name": "hintTargetIcon", "type": "React.ReactNode", "required": false, "description": "Иконка, рядом с которым произойдет вызов всплывающего окна.\nЕсли свойство не задано, применится иконка по умолчанию." }, { "name": "hintTargetPlacement", "type": "\"inner\" | \"outer\" | undefined", "required": false, "description": "Расположение иконки подсказки, когда отсутствует label\nили же он имеет labelPlacement='inner'.", "default": "`outer`" }, { "name": "hintText", "type": "string | undefined", "required": false, "description": "Текст тултипа" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\" | undefined", "required": false, "description": "Способ открытия тултипа - наведение или клик мышью" }, { "name": "hintWidth", "type": "string | undefined", "required": false, "description": "Ширина окна (в rem)." }, { "name": "keepPlaceholder", "type": "boolean | undefined", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)" }, { "name": "leftHelper", "type": "React.ReactNode", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода." }, { "name": "listMaxHeight", "type": "string | undefined", "required": false, "description": "Максимальная высота выпадающего списка подсказок.", "default": "25rem" }, { "name": "listWidth", "type": "string | undefined", "required": false, "description": "Ширина выпадающего списка подсказок." }, { "name": "onScroll", "type": "((e: React.UIEvent) => void) | undefined", "required": false, "description": "Коллбэк, срабатывающий при скролле." }, { "name": "onSearch", "type": "(((value: string, event?: React.KeyboardEvent | undefined) => void) & ((value: string, event?: React.KeyboardEvent | undefined) => void)) | undefined", "required": false, "description": "Callback по нажатию Enter" }, { "name": "onSuggestionSelect", "type": "((data: SuggestionItemType) => void) | undefined", "required": false, "description": "Коллбэк, который срабатывает при выборе подсказки." }, { "name": "optional", "type": "boolean | undefined", "required": false, "description": "Флаг необязательности поля" }, { "name": "optionalText", "type": "string | undefined", "required": false, "description": "Подпись для указания необязательности поля" }, { "name": "portal", "type": "string | React.RefObject | undefined", "required": false, "description": "Портал для выпадающего списка. Принимает id контейнера или ref." }, { "name": "renderItem", "type": "((item: SuggestionItemType) => React.ReactNode) | undefined", "required": false, "description": "Callback для кастомной настройки элемента в выпадающем списке." }, { "name": "renderList", "type": "((data?: SuggestionItemType[] | undefined) => React.ReactNode) | undefined", "required": false, "description": "Коллбэк для рендера кастомного списка подсказок." }, { "name": "renderListEnd", "type": "(() => React.ReactNode) | undefined", "required": false, "description": "Коллбэк для рендера элемента в конце выпадающего списка." }, { "name": "requiredPlacement", "type": "\"left\" | \"right\" | undefined", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right" }, { "name": "rightHelper", "type": "React.ReactNode", "required": false, "description": "Вспомогательный текст снизу справа для поля ввода." }, { "name": "rootClassName", "type": "string | undefined", "required": false, "description": "ClassName для внешней обертки компонента." }, { "name": "rootStyle", "type": "React.CSSProperties | undefined", "required": false, "description": "Style для внешней обертки компонента." }, { "name": "suggestions", "type": "SuggestionItemType[] | undefined", "required": false, "description": "Массив подсказок." }, { "name": "textAfter", "type": "string | undefined", "required": false, "description": "Слот для вспомогательного текста справа." }, { "name": "textBefore", "type": "string | undefined", "required": false, "description": "Слот для вспомогательного текста слева." }, { "name": "threshold", "type": "number | undefined", "required": false, "description": "Минимальное число введенных символов, при котором открывается дропдаун.", "default": "2" }, { "name": "titleCaption", "type": "React.ReactNode", "required": false, "description": "Метка-подпись к элементу справа." }, { "name": "value", "type": "string | undefined", "required": false, "description": "Значение поля ввода." }, { "name": "virtual", "type": "boolean | undefined", "required": false, "description": "Виртуализация в выпадающем списке.", "default": "false" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "CSS-свойство z-index для выпадающего списка." }, { "name": "appearance", "type": "\"default\" | \"viewMode\" | undefined", "required": false, "description": "" }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false, "description": "" }, { "name": "hintSize", "type": "\"s\" | \"m\" | undefined", "required": false, "description": "" }, { "name": "hintView", "type": "\"default\" | undefined", "required": false, "description": "" }, { "name": "labelPlacement", "type": "\"inner\" | \"outer\" | undefined", "required": false, "description": "" }, { "name": "onChange", "type": "React.ChangeEventHandler | undefined", "required": false, "description": "" }, { "name": "type", "type": "React.HTMLInputTypeAttribute | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"warning\" | \"negative\" | \"positive\" | \"edited\" | undefined", "required": false, "description": "" }, { "name": "handlerClear", "type": "(() => void) | undefined", "required": false, "description": "Действие при выполнении нажатия на кнопку очистки поля ввода", "deprecated": true }, { "name": "clear", "type": "boolean | undefined", "required": false, "description": "view применяется с clear-токенами", "deprecated": true } ], "propsTypeName": "AutocompleteSearchProps", "sourceFile": "packages/ui-kit/src/components/AutocompleteSearch/AutocompleteSearch.tsx", "type": "composition", "category": "Композиции", "keywords": [ "строка поиска", "search field", "поиск с автодополнением" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { AutocompleteSearch } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в AutoCompleteSearch.stories.tsx", "type": "usage", "code": ") =>\n setValues((prev) => ({ ...prev, [size]: e.target.value }))\n }\n onSuggestionSelect={(item) =>\n setValues((prev) => ({ ...prev, [size]: item.label }))\n }\n onClear={() => setValues((prev) => ({ ...prev, [size]: '' }))}\n suggestions={mockData}\n />", "sourceFile": "packages/storybook/src/stories/AutoCompleteSearch/AutoCompleteSearch.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в AutoCompleteSearch.stories.tsx", "type": "usage", "code": ") =>\n setValue(e.target.value)\n }\n onSuggestionSelect={(item) => setValue(item.label)}\n onClear={() => setValue('')}\n suggestions={mockData}\n beforeListTotal\n beforeListTotalEntity=\"[сущность]\"\n />", "sourceFile": "packages/storybook/src/stories/AutoCompleteSearch/AutoCompleteSearch.stories.tsx" } ] }, "Avatar": { "name": "Avatar", "group": "components", "folderName": "Avatar", "role": "primary", "description": "Изображение или инициалы пользователя с индикатором статуса и формой отображения", "props": [], "propsTypeName": "AvatarProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Avatar/Avatar.d.ts", "type": "wrapper", "atomicBase": "Avatar", "category": "Локальные компоненты", "keywords": [ "аватар пользователя", "user photo", "иконка профиля" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "badgeView", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"light\"", "required": false, "description": "Вид Badge", "default": "default", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "description": "Слот для контента справа, например `Icon`", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "count", "type": "number", "required": false, "description": "Отображаемое число. Не может быть меньше 1.", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "counterView", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"light\"", "required": false, "description": "Вид Counter", "default": "default", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customBackgroundColor", "type": "string", "required": false, "description": "Пользовательский цвет фона", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customBorderRadius", "type": "string | number", "required": false, "description": "Кастомный border-radius для fit варианта", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customColor", "type": "string", "required": false, "description": "Пользовательский цвет текста и иконок", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customText", "type": "string", "required": false, "description": "Кастомный текст вместо фотографии", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "extraPlacement", "type": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"", "required": false, "description": "Расположение дополнительного элемента", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focused", "type": "boolean", "required": false, "description": "Фокус", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasExtra", "type": "boolean", "required": false, "description": "Включить отображение дополнительного элемента", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isScalable", "type": "boolean", "required": false, "description": "Масштабируемый при наведении", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxCount", "type": "number", "required": false, "description": "Максимальное отображаемое число. Не может быть меньше 1.", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pilled", "type": "boolean", "required": false, "description": "Компонент c округлым border-radius", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"xxl\" | \"s\" | \"l\" | \"m\" | \"fit\"", "required": false, "description": "Размер аватара", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "status", "type": "\"active\" | \"inactive\"", "required": false, "description": "Статус профиля", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "statusLabels", "type": "StatusLabels", "required": false, "description": "Словарь для озвучивания значений свойства status [a11y]", "default": "{ active: 'Активен', inactive: 'Неактивен' }", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "description": "Текстовая надпись", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "type", "type": "\"badge\" | \"counter\"", "required": false, "description": "Тип дополнительного элемента", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "url", "type": "string", "required": false, "description": "Ссылка на фотографию", "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "clear", "type": "boolean", "required": false, "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "name", "type": "string", "required": false, "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shape", "type": "\"circled\"", "required": false, "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "transparent", "type": "boolean", "required": false, "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "inheritedFrom": "Avatar", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Avatar } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в Widget.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/Widget/Widget.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в TableCanvas.highlightActiveTypeSplitView.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/TableCanvas/TableCanvas.HighlightActiveType/TableCanvas.highlightActiveTypeSplitView.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Инициалы вместо фотографии", "type": "vendor", "code": "import React from 'react';\nimport { Avatar } from '@daisforge/ui';\nexport function App() {\n return (\n <>\n \n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Увеличение при наведении", "type": "vendor", "code": "import React from 'react';\nimport { Avatar } from '@daisforge/ui';\nexport function App() {\n return (\n <>\n \n \n );\n}" } ] }, "AvatarGroup": { "name": "AvatarGroup", "group": "components", "folderName": "AvatarGroup", "role": "primary", "description": "Группа перекрывающихся аватаров для отображения нескольких участников компактно", "props": [], "propsTypeName": "AvatarGroupProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/AvatarGroup/AvatarGroup.d.ts", "type": "wrapper", "atomicBase": "AvatarGroup", "category": "Локальные компоненты", "keywords": [ "список участников", "stacked avatars", "команда пользователей" ], "hasCuratedMeta": true, "inheritedProps": [], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { AvatarGroup } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor", "displayName": "Example 1", "type": "vendor", "code": "import React from 'react';\nimport { Avatar, AvatarGroup } from '@daisforge/ui';\nexport function App() {\n return (\n \n {\n Array(5).fill(true).map(() => (\n \n ))\n }\n \n );\n}" } ] }, "Badge": { "name": "Badge", "group": "components", "folderName": "Badge", "role": "primary", "description": "Небольшая цветная метка со счётчиком или статусом рядом с элементом интерфейса", "props": [], "propsTypeName": "BadgeProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Badge/Badge.d.ts", "type": "wrapper", "atomicBase": "Badge", "category": "Локальные компоненты", "keywords": [ "метка статуса", "counter label", "индикатор количества" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "appearance", "type": "\"clear\" | \"transparent\" | \"default\"", "required": false, "description": "Стиль для UI конфигурации\nВлияет на выбор предустановленного набора токенов", "default": "default", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "description": "Слот для контента справа, например `Icon`", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customBackgroundColor", "type": "string", "required": false, "description": "Пользовательский цвет фона", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customColor", "type": "string", "required": false, "description": "Пользовательский цвет текста и иконок", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxWidth", "type": "Width", "required": false, "description": "Обрезает контент по максимальной ширине и добавляет ...", "default": "'auto'", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pilled", "type": "boolean", "required": false, "description": "Компонент c округлым border-radius", "default": "false", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"l\" | \"m\" | \"xs\"", "required": false, "description": "Размер Badge", "default": "m", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "description": "Текстовая надпись", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"light\"", "required": false, "description": "Вид Badge", "default": "default", "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "clear", "type": "boolean", "required": false, "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "transparent", "type": "boolean", "required": false, "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "truncate", "type": "boolean", "required": false, "inheritedFrom": "Badge", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Badge } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в Widget.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/Widget/Widget.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в BlockTitle.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/BlockTitle/BlockTitle.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Размер badge", "type": "vendor", "code": "import React from 'react';\nimport { Badge } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Скругленность badge", "type": "vendor", "code": "import React from 'react';\nimport { Badge } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n \n \n
\n );\n}" } ] }, "BlockGradientScroll": { "name": "BlockGradientScroll", "group": "components", "folderName": "BlockGradientScroll", "role": "primary", "description": "Прокручиваемый блок с градиентной тенью у краёв, сигнализирующей о скрытом контенте", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components." }, { "name": "variant", "type": "BlockGradientScrollVariant | undefined", "required": false, "description": "Варианты отображения градиента, white | gray. По умолчанию white", "default": "'white'" } ], "propsTypeName": "BlockGradientScrollProps", "sourceFile": "packages/ui-kit/src/components/BlockGradientScroll/BlockGradientScroll.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "скролл с тенью", "fade scroll", "индикатор прокрутки" ], "docs": "# BlockGradientScroll\n\nГрадиент-индикатор скролла — визуальная подсказка пользователю, что контент можно скроллить.\n\n## Ключевые особенности\n\n- Автоматически появляется при наличии скролла\n- Плавно исчезает при достижении конца\n- Доступен как компонент и как миксин для styled-components\n\n## Особенности\n\n- Основано на CSS `animation-timeline` — [поддержка браузеров](https://caniuse.com/?search=animation-timeline)\n- Тема определяется один раз в момент создания компонента/стилей (`getActiveTheme()`), при переключении темы градиент не обновится автоматически\n- Компонент автоматически получает padding через `getComputedStyle` — prop не нужен\n- Миксин принимает padding и сам применяет его к контейнеру — дублирование не требуется\n- Variant `white` (default) — белый/тёмный фон; `gray` — серый фон\n- `$css` позволяет передать дополнительные стили через styled-components\n\n## Экспорты\n\n### Компонент\n\n- `BlockGradientScroll` — React-компонент (`@daisforge/ui`)\n- `BlockGradientScrollProps` — Тип пропсов (`@daisforge/ui`)\n\n### Миксин\n\n- `BlockGradientScrollMixin` — Основной миксин (`@daisforge/ui/mixins`)\n- `BlockGradientScrollPadding` — Тип для padding (`@daisforge/ui/mixins`)\n- `BlockGradientScrollVariant` — Тип для variant (`@daisforge/ui/mixins`)\n- `BlockGradientScrollOptions` — Тип опций миксина (`@daisforge/ui/mixins`)\n\n### Внутренние (для кастомизации)\n\n- `blockGradientScrollContainerStyles` — Базовые стили контейнера\n- `blockGradientScrollAfterStyles` — Стили псевдоэлемента ::after\n- `blockGradientScrollKeyframes` — Keyframes анимации\n\n---\n\n## Использование\n\n### Компонент\n\nКомпонент **автоматически** получает padding'и из ваших стилей — просто укажите их в `style`, `className` или `$css`:\n\n\n {children}\n\n`}\n/>\n\n### Миксин\n\nМиксин **сам применяет padding** к контейнеру — не нужно дублировать:\n\n\n\n---\n\n## Примеры\n\n### 1. Базовый компонент\n\n\n \n \n \n\n`} />\n\n\n\n### 2. Миксин (styled-components)\n\n\n \n \n\n`} />\n\n\n\n### 3. Мало контента — градиент скрыт\n\nЕсли контент помещается без скролла, градиент автоматически скрыт (`opacity: 0`).\n\n\n\n### 4. Несколько контейнеров\n\nКаждый контейнер работает независимо благодаря `scroll-timeline`.\n\n\n\n### 5. Способы стилизации\n\nКомпонент поддерживает три способа кастомизации: `style`, `className`, `$css`.\n\n\n\n> Подробнее о типах и пропсах — [BlockGradientScroll API](?path=/docs/локальные-компоненты-blockgradientscroll-api--docs)", "apiDocs": "# BlockGradientScroll API\n\n## BlockGradientScrollProps (компонент)\n\n```typescript\ntype BlockGradientScrollProps = Omit<\n ComponentProps<'div'>,\n 'children' | 'ref'\n> & {\n /**\n * Контент внутри scroll-контейнера\n */\n children?: ReactNode;\n /**\n * Кастомные стили styled-components.\n *\n * @remarks\n * Приоритет стилей (от низкого к высокому):\n * 1. Базовые стили компонента\n * 2. `$css` (styled-components стили)\n * 3. `className` (CSS классы)\n * 4. `style` (inline стили) — наивысший приоритет\n *\n * Padding из `style` автоматически подхватывается для градиента.\n */\n $css?: string | CSSObject | FlattenSimpleInterpolation;\n /**\n * Варианты отображения градиента, white | gray. По умолчанию white\n */\n variant?: BlockGradientScrollVariant;\n};\n```\n\n## BlockGradientScrollPadding (миксин)\n\n```typescript\ntype BlockGradientScrollPadding =\n | number\n | {\n /** Верхний отступ */\n top?: number;\n /** Shorthand для left и right (применяется если left/right не указаны) */\n inline?: number;\n /** Левый отступ (приоритет над inline) */\n left?: number;\n /** Правый отступ (приоритет над inline) */\n right?: number;\n /** Нижний отступ */\n bottom?: number;\n };\n```\n\n## BlockGradientScrollVariant\n\n```typescript\ntype BlockGradientScrollVariant = 'white' | 'gray';\n```", "curatedStories": [ { "exportName": "Default", "displayName": "1. Базовый компонент", "type": "args-only", "code": "{\n variant: 'white',\n style: {\n maxHeight: 300,\n overflowY: 'auto',\n padding: 24,\n background: surfaceSolidCard,\n borderRadius: 8,\n border: `1px solid ${outlineAccent}`,\n },\n children: generateItems(8),\n }" }, { "exportName": "MixinUsage", "displayName": "2. Миксин (styled-components)", "type": "full-code", "code": "() => (\n \n
\n
\n

variant: white

\n {generateItems(6)}\n
\n
\n

variant: gray

\n {generateItems(6)}\n
\n
\n \n )" }, { "exportName": "NoScroll", "displayName": "3. Мало контента (без скролла)", "type": "args-only", "code": "{\n variant: 'white',\n style: {\n maxHeight: 300,\n overflowY: 'auto',\n padding: 24,\n borderRadius: 8,\n border: `1px solid ${outlineAccent}`,\n },\n children: generateItems(2),\n }" }, { "exportName": "MultipleContainers", "displayName": "4. Несколько контейнеров", "type": "full-code", "code": "() => (\n \n
\n \n {generateItems(6)}\n \n\n \n {generateItems(6)}\n \n\n \n {generateItems(6)}\n \n
\n \n )" }, { "exportName": "DynamicContent", "displayName": "5. Динамический контент", "type": "full-code", "code": "function DynamicContentRender() {\n const [items, setItems] = useState([1, 2, 3]);\n\n const addItem = () => {\n setItems((prev) => [...prev, Math.max(...prev, 0) + 1]);\n };\n\n const removeItem = () => {\n setItems((prev) => (prev.length > 0 ? prev.slice(0, -1) : prev));\n };\n\n const reset = () => {\n setItems([1, 2, 3]);\n };\n\n return (\n \n
\n \n + Добавить\n \n \n − Удалить\n \n \n Сбросить\n \n \n Элементов: {items.length}\n \n
\n\n \n {items.map((id) => (\n \n

Элемент {id}

\n \n ))}\n {items.length === 0 && (\n \n Пусто. Добавь элементы.\n \n )}\n \n \n );\n }" }, { "exportName": "StylingMethods", "displayName": "6. Способы стилизации (style, className, $css)", "type": "full-code", "code": "() => (\n \n \n\n
\n {/* style prop */}\n
\n

\n 1. Через style prop\n

\n \n {`\n {children}\n`}\n \n \n {generateItems(5)}\n \n
\n\n {/* className prop */}\n
\n

2. Через className

\n \n {`.custom-gradient-box {\n max-height: 200px;\n overflow-y: auto;\n padding: 20px;\n background: #fff8e1;\n border: 2px dashed #ffa000;\n}\n\n\n {children}\n`}\n \n \n {generateItems(5)}\n \n
\n\n {/* $css prop */}\n
\n

\n 3. Через $css (styled-components)\n

\n \n {`\n {children}\n`}\n \n \n {generateItems(5)}\n \n
\n
\n \n )" }, { "exportName": "AdaptiveLessThan1280", "displayName": "1280 Адаптив", "type": "full-code", "code": "() => (\n \n \n
\n

\n Компонент `BlockGradientScroll`\n

\n \n {generateItems(8)}\n \n
\n\n
\n

\n Миксин `BlockGradientScrollMixin`\n

\n {generateItems(8)}\n
\n \n \n )" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { BlockGradientScroll } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "MixinUsage", "displayName": "2. Миксин (styled-components)", "type": "full-code", "code": "() => (\n \n
\n
\n

variant: white

\n {generateItems(6)}\n
\n
\n

variant: gray

\n {generateItems(6)}\n
\n
\n \n )" }, { "exportName": "MultipleContainers", "displayName": "4. Несколько контейнеров", "type": "full-code", "code": "() => (\n \n
\n \n {generateItems(6)}\n \n\n \n {generateItems(6)}\n \n\n \n {generateItems(6)}\n \n
\n \n )" }, { "exportName": "DynamicContent", "displayName": "5. Динамический контент", "type": "full-code", "code": "function DynamicContentRender() {\n const [items, setItems] = useState([1, 2, 3]);\n\n const addItem = () => {\n setItems((prev) => [...prev, Math.max(...prev, 0) + 1]);\n };\n\n const removeItem = () => {\n setItems((prev) => (prev.length > 0 ? prev.slice(0, -1) : prev));\n };\n\n const reset = () => {\n setItems([1, 2, 3]);\n };\n\n return (\n \n
\n \n + Добавить\n \n \n − Удалить\n \n \n Сбросить\n \n \n Элементов: {items.length}\n \n
\n\n \n {items.map((id) => (\n \n

Элемент {id}

\n \n ))}\n {items.length === 0 && (\n \n Пусто. Добавь элементы.\n \n )}\n \n \n );\n }" }, { "exportName": "StylingMethods", "displayName": "6. Способы стилизации (style, className, $css)", "type": "full-code", "code": "() => (\n \n \n\n
\n {/* style prop */}\n
\n

\n 1. Через style prop\n

\n \n {`\n {children}\n`}\n \n \n {generateItems(5)}\n \n
\n\n {/* className prop */}\n
\n

2. Через className

\n \n {`.custom-gradient-box {\n max-height: 200px;\n overflow-y: auto;\n padding: 20px;\n background: #fff8e1;\n border: 2px dashed #ffa000;\n}\n\n\n {children}\n`}\n \n \n {generateItems(5)}\n \n
\n\n {/* $css prop */}\n
\n

\n 3. Через $css (styled-components)\n

\n \n {`\n {children}\n`}\n \n \n {generateItems(5)}\n \n
\n
\n \n )" } ] }, "BlockTitle": { "name": "BlockTitle", "group": "components", "folderName": "BlockTitle", "role": "primary", "description": "Заголовок раздела страницы с подзаголовком, кнопкой назад и слотами для действий", "props": [ { "name": "containerProps", "type": "({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: DefaultTheme | undefined; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined", "required": false, "description": "Передача props в контейнер" }, { "name": "description", "type": "string | undefined", "required": false, "description": "Текст Заголовка" }, { "name": "onBackButtonClick", "type": "(() => void) | undefined", "required": false, "description": "Callback при клике на кнопку со стрелкой назад слева от заголовка" }, { "name": "rightSlot", "type": "BlockTitleAdaptiveSlot", "required": false, "description": "Слот для правой части" }, { "name": "titleLeftSlot", "type": "BlockTitleAdaptiveSlot", "required": false, "description": "Иконка слева от заголовка (обычно используется иконка)" }, { "name": "titleRightSlot", "type": "BlockTitleAdaptiveSlot", "required": false, "description": "Иконка справа от заголовка (обычно используется иконка)" }, { "name": "titleSize", "type": "\"BodyL\" | \"BodyM\" | \"BodyS\" | \"BodyXS\" | \"BodyXXS\" | \"DsplL\" | \"DsplM\" | \"DsplS\" | \"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"TextL\" | \"TextM\" | \"TextS\" | \"TextXS\" | undefined", "required": false, "description": "Размер заголовка", "default": "'H2'" }, { "name": "titleTooltipProps", "type": "Omit | undefined", "required": false, "description": "Пропсы тултипа, которым оборачивается обрезанный `title`." }, { "name": "topSlot", "type": "BlockTitleAdaptiveSlot", "required": false, "description": "Слот для верхней части" }, { "name": "disableMediaAdaptive", "type": "boolean | undefined", "required": false, "description": "Отключает принудительный адаптив компонента на viewport <= 1280px.", "deprecated": true, "default": "false" } ], "propsTypeName": "BlockTitleProps", "sourceFile": "packages/ui-kit/src/components/BlockTitle/BlockTitle.tsx", "type": "composition", "category": "Композиции", "keywords": [ "заголовок раздела", "page heading", "шапка блока" ], "docs": "# BlockTitle\n\nКомпонент заголовка блока с поддержкой слотов для дополнительных элементов и кнопки «назад».\n\n## Ключевые особенности\n\n- Настраиваемый размер заголовка через вариант типографики (`titleSize`)\n- Описание под заголовком (`description`)\n- Слоты: `titleLeftSlot`, `titleRightSlot`, `topSlot`, `rightSlot`\n- Настройка тултипа обрезанного заголовка (ширина, позиция) через `titleTooltipProps`\n- Кнопка «назад» через `onBackButtonClick`\n- Кастомизация контейнера через `containerProps` (Box с `$css`)\n\n## Особенности\n\n- Компонент можно стилизовать: обернув в `styled`, используя `$css` в `containerProps`, или используя объект `blockTitleClassNames` для обращения к подэлементам\n- Слоты `titleLeftSlot`, `titleRightSlot`, `topSlot`, `rightSlot` принимают `ReactNode` или callback с размерами для адаптива\n- По умолчанию адаптив на viewport `<= 1280px` включен; временно отключить его можно через deprecated-проп `disableMediaAdaptive`\n\n## Тултип заголовка\n\n`title` оборачивается в `TypographyWithAutoTooltip`: если текст не помещается в две строки, при наведении показывается тултип с полным заголовком. По умолчанию ширина тултипа не ограничена, поэтому длинный заголовок вытягивается в одну строку. Ограничить ширину и задать позицию можно через `titleTooltipProps`:\n\n```tsx\n\n```\n\n`titleTooltipProps` принимает пропсы `Tooltip` (кроме `text`, `target`, `trigger`, `opened`, которыми управляет сам компонент): `maxWidth`, `minWidth`, `placement`, `view`, `offset`, `mouseEnterDelay` и другие.\n\n## Использование адаптивных слотов\n\nЕсли слот не должен менять размеры, передавайте обычный `ReactNode`:\n\n```tsx\n} />\n```\n\nЕсли в слоте есть иконка, Badge или кнопки, передавайте callback и используйте размеры из аргумента:\n\n```tsx\n (\n \n )}\n rightSlot={({ buttonSize, actionIconSize }) => (\n
\n \n \n \n \n \n
\n )}\n/>\n```\n\nРазмеры, которые приходят в callback (в зависимости от viewport):\n\n```\n| Поле | <= 1280px | > 1280px |\n| -------------------------------------------- | --------- | -------- |\n| buttonSize | xs | s |\n| actionIconSize | xs | s |\n| titleIconSize (для H4/H5) | xs | s |\n| titleBadgeSize (для H4/H5) | s | m |\n| titleIconSize (для остальных) | s | s |\n| titleBadgeSize (для остальных) | m | m |\n```\n\n> Подробнее о типах и пропсах — [BlockTitle API](?path=/docs/композиции-blocktitle-api--docs)", "apiDocs": "# BlockTitle API\n\n## BlockTitleProps\n\n```typescript\ntype BlockTitleProps = {\n /**\n * Текст заголовка\n */\n title?: string;\n /**\n * Размер заголовка\n */\n titleSize?: ComponentProps['variant'];\n /**\n * Пропсы тултипа, которым оборачивается обрезанный `title`.\n *\n * @remarks\n * Тултип показывается автоматически, когда `title` не помещается в две строки.\n * По умолчанию ширина тултипа не ограничена, из-за чего длинный заголовок\n * растягивается в одну строку — ограничьте её через `maxWidth`.\n *\n * @example\n * ```tsx\n * \n * ```\n */\n titleTooltipProps?: TypographyWithAutoTooltipProps<'H2'>['tooltipProps'];\n /**\n * Иконка слева от заголовка (обычно используется иконка)\n */\n titleLeftSlot?: BlockTitleAdaptiveSlot;\n /**\n * Иконка справа от заголовка (обычно используется иконка)\n */\n titleRightSlot?: BlockTitleAdaptiveSlot;\n /**\n * Текст Заголовка\n */\n description?: string;\n /**\n * Слот для верхней части\n */\n topSlot?: BlockTitleAdaptiveSlot;\n /**\n * Слот для правой части\n */\n rightSlot?: BlockTitleAdaptiveSlot;\n /**\n * Отключает принудительный адаптив компонента на viewport <= 1280px.\n *\n * @deprecated Используйте только в крайних случаях, когда команда временно не готова адаптировать вёрстку под 1280px.\n *\n * @remarks\n * При `true` компонент использует desktop-размеры для слотов и кнопки назад даже на viewport <= 1280px.\n * Это временный escape hatch, не основной сценарий использования.\n *\n * @default false\n */\n disableMediaAdaptive?: boolean;\n /**\n * Передача props в контейнер\n */\n containerProps?: ComponentProps;\n /**\n * Callback при клике на кнопку со стрелкой назад слева от заголовка\n */\n onBackButtonClick?: () => void;\n};\n```\n\n## BlockTitleSlotSizesProps\n\n```typescript\ntype BlockTitleSlotSizesProps = {\n /**\n * Размер иконки рядом с заголовком\n */\n titleIconSize: 's' | 'xs';\n /**\n * Размер Badge рядом с заголовком\n */\n titleBadgeSize: 'm' | 's';\n /**\n * Размер кнопок в правом слоте\n */\n buttonSize: 's' | 'xs';\n /**\n * Размер иконок внутри кнопок в правом слоте\n */\n actionIconSize: 's' | 'xs';\n};\n```\n\n## BlockTitleAdaptiveSlot\n\n```typescript\ntype BlockTitleAdaptiveSlot =\n | ReactNode\n | ((props: BlockTitleSlotSizesProps) => ReactNode);\n```", "curatedStories": [ { "exportName": "BlockTitleSlots", "displayName": "BlockTitle Slots", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n {/* Компонент левой панели */}\n \n \n (\n \n )}\n titleRightSlot={({ titleIconSize }: BlockTitleSlotSizesProps) => (\n \n )}\n /* Кастомный блок сверху */\n topSlot={\n \n BlockTitle topSlot\n \n }\n /* Правая часть */\n rightSlot={\n \n BlockTitle rightSlot\n \n }\n />\n \n \n )" }, { "exportName": "BlockTitleExample", "displayName": "BlockTitle Example", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n {/* Компонент левой панели */}\n \n \n (\n
\n \n \n \n
\n )}\n /* Правая часть */\n rightSlot={renderRightActionsSlot}\n />\n \n \n )" }, { "exportName": "BlockTitleWithBadge", "displayName": "BlockTitle с Badge", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n \n \n (\n \n )}\n rightSlot={renderRightActionsSlot}\n />\n \n \n )" }, { "exportName": "BlockTitleWithBackButton", "displayName": "BlockTitle с кнопкой назад", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n \n \n alert('onBackClick')}\n titleRightSlot={({ titleBadgeSize }: BlockTitleSlotSizesProps) => (\n \n )}\n rightSlot={renderRightActionsSlot}\n />\n \n \n )" }, { "exportName": "BlockTitleWithBackButtonAndIcon", "displayName": "BlockTitle с кнопкой назад и иконкой", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n \n \n alert('onBackClick')}\n titleRightSlot={({ titleIconSize }: BlockTitleSlotSizesProps) => (\n \n )}\n rightSlot={renderRightActionsSlot}\n />\n \n \n )" }, { "exportName": "BlockTitleWithTooltipProps", "displayName": "BlockTitle с настройкой тултипа заголовка", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n \n \n \n \n \n )" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { BlockTitle } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "BlockTitleSlots", "displayName": "BlockTitle Slots", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n {/* Компонент левой панели */}\n \n \n (\n \n )}\n titleRightSlot={({ titleIconSize }: BlockTitleSlotSizesProps) => (\n \n )}\n /* Кастомный блок сверху */\n topSlot={\n \n BlockTitle topSlot\n \n }\n /* Правая часть */\n rightSlot={\n \n BlockTitle rightSlot\n \n }\n />\n \n \n )" }, { "exportName": "BlockTitleExample", "displayName": "BlockTitle Example", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n {/* Компонент левой панели */}\n \n \n (\n
\n \n \n \n
\n )}\n /* Правая часть */\n rightSlot={renderRightActionsSlot}\n />\n \n \n )" }, { "exportName": "BlockTitleWithBadge", "displayName": "BlockTitle с Badge", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n \n \n (\n \n )}\n rightSlot={renderRightActionsSlot}\n />\n \n \n )" }, { "exportName": "BlockTitleWithBackButton", "displayName": "BlockTitle с кнопкой назад", "type": "full-code", "code": "import { useState } from 'react';\n import {\n Box,\n Button,\n IconButton,\n BlockTitle,\n type BlockTitleSlotSizesProps\n } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => (\n \n \n \n alert('onBackClick')}\n titleRightSlot={({ titleBadgeSize }: BlockTitleSlotSizesProps) => (\n \n )}\n rightSlot={renderRightActionsSlot}\n />\n \n \n )" } ] }, "Box": { "name": "Box", "group": "components", "folderName": "Box", "role": "primary", "description": "Базовый div-контейнер с пропсами отступов, размеров и рамки вместо инлайн-стилей", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"form\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"search\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"div\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" …", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ], "propsTypeName": "BoxProps", "sourceFile": "packages/ui-kit/src/components/Box/Box.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "контейнер-обёртка", "layout box", "утилитарный div" ], "docs": "# Box\n\nАналог компонента Box из [MUI](https://mui.com/material-ui/react-box/).\nПрименяется для создания кастомных контейнеров.\n\n## Ключевые особенности\n\n- Принимает любые CSS-свойства напрямую как пропсы (display, padding, margin и т.д.)\n- Поддержка `$css` для кастомных стилей через styled-components\n- Полиморфный компонент — проп `as` позволяет менять HTML-элемент (`div`, `li`, `section` и т.д.)\n- Проп `hidden` для скрытия элемента\n\n> Подробнее о типах и пропсах — [Box API](?path=/docs/локальные-компоненты-box-api--docs)", "apiDocs": "# Box API\n\nБазовый контейнер-обёртка. Собственный компонент (не из `@salutejs/sdds-finai`). Принимает CSS-свойства как пропсы.\n\n## BoxProps\n\n```typescript\ntype BoxProps = ComponentProps & BoxBaseProps;\n```\n\n## Основные пропсы\n\n- `$css` (`string | CSSObject`) — кастомные стили styled-components\n- `hidden` (`boolean`) — скрыть элемент (`display: none`)\n- `as` (`ElementType`) — HTML-тег или компонент для корневого узла (`div`, `li`, `section` и т.д.)\n\n## CSS-пропсы (передаются напрямую)\n\nРазмеры: `width`, `maxWidth`, `minWidth`, `height`, `maxHeight`, `minHeight`\n\nОтступы: `margin`, `marginLeft/Right/Top/Bottom`, `padding`, `paddingLeft/Right/Top/Bottom`\n\nFlexbox: `display`, `flexDirection`, `justifyContent`, `justifyItems`, `justifySelf`, `flexGrow`, `flexWrap`, `flexShrink`, `gap`\n\nПозиционирование: `position`, `top`, `left`, `right`, `bottom`, `zIndex`\n\nВизуальные: `background`, `backgroundColor`, `opacity`, `border`, `borderWidth`, `borderColor`, `borderStyle`, `borderRadius`\n\nПрочие: `boxSizing`, `overflow`, `cursor`", "curatedStories": [ { "exportName": "Default", "displayName": "Box", "type": "full-code", "code": "// textAccent - токен акцентного цвета\nimport { Box, textAccent, textNegative } from '@daisforge/ui';\n\n() => (\n \n Box №1\n \n Box №2\n \n \n )" }, { "exportName": "CSSObject", "displayName": "Стилизация через CSS Object", "type": "full-code", "code": "import { Box, textAccent } from '@daisforge/ui';\n\n() => (\n \n )" }, { "exportName": "CSSString", "displayName": "Стилизация через CSS String", "type": "full-code", "code": "import { Box, textPositive } from '@daisforge/ui';\n\n() => (\n \n )" }, { "exportName": "CSSProps", "displayName": "Стилизация через props", "type": "full-code", "code": "import { Box } from '@daisforge/ui';\n\n() => (\n \n )" }, { "exportName": "BoxAnyComponent", "displayName": "React компонент корневого узла", "type": "full-code", "code": "import { Box, Button } from '@daisforge/ui';\n\n() => (\n alert('Я кнопка')}>\n Теперь это кнопка (нажми на меня)\n \n )" }, { "exportName": "BoxHtmlComponent", "displayName": "HTML корневого узла", "type": "full-code", "code": "import { Box } from '@daisforge/ui';\n\n() => " } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Box } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Default", "displayName": "Box", "type": "full-code", "code": "// textAccent - токен акцентного цвета\nimport { Box, textAccent, textNegative } from '@daisforge/ui';\n\n() => (\n \n Box №1\n \n Box №2\n \n \n )" }, { "exportName": "CSSObject", "displayName": "Стилизация через CSS Object", "type": "full-code", "code": "import { Box, textAccent } from '@daisforge/ui';\n\n() => (\n \n )" }, { "exportName": "CSSString", "displayName": "Стилизация через CSS String", "type": "full-code", "code": "import { Box, textPositive } from '@daisforge/ui';\n\n() => (\n \n )" }, { "exportName": "CSSProps", "displayName": "Стилизация через props", "type": "full-code", "code": "import { Box } from '@daisforge/ui';\n\n() => (\n \n )" } ] }, "Breadcrumbs": { "name": "Breadcrumbs", "group": "components", "folderName": "Breadcrumbs", "role": "primary", "description": "Цепочка навигационных ссылок, показывающая путь пользователя по разделам", "props": [], "propsTypeName": "BreadcrumbsProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Breadcrumbs/Breadcrumbs.d.ts", "type": "wrapper", "atomicBase": "Breadcrumbs", "category": "Локальные компоненты", "keywords": [ "хлебные крошки", "navigation trail", "путь по разделам" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "items", "type": "BreadcrumbsItem[]", "required": true, "description": "Элементы Breadcrumbs", "inheritedFrom": "Breadcrumbs", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "separator", "type": "ReactNode", "required": false, "description": "Элемент разделителя", "inheritedFrom": "Breadcrumbs", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "showItems", "type": "number", "required": false, "description": "Количество показываемых элементов - все остальные сокращаются", "inheritedFrom": "Breadcrumbs", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"l\" | \"m\" | \"xs\"", "required": false, "description": "Размер компонента", "inheritedFrom": "Breadcrumbs", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "inheritedFrom": "Breadcrumbs", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Breadcrumbs } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Example 3", "type": "vendor", "code": "import React from 'react';\nimport { Breadcrumbs } from '@daisforge/ui';\nexport function App() {\n const items = [\n { title: 'Home', href: '/' },\n { title: 'About as', href: '/' },\n { renderItem: () => Custom Item },\n { title: 'Contacts' },\n ];\n return (\n
\n
\n \n
\n
\n \n
\n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Example 2", "type": "vendor", "code": "import React from 'react';\nimport { Breadcrumbs } from '@daisforge/ui';\nexport function App() {\n const items = [\n { title: 'Home', href: '/' },\n { title: 'Without link' },\n { title: 'Disabled', disabled: true },\n { title: 'Disabled with link', href: '/', disabled: true },\n {\n title: 'On Click',\n onClick: () => {\n alert('On Click');\n },\n },\n { renderItem: () => Custom },\n { title: 'Main' },\n ];\n return (\n
\n \n
\n );\n}" } ] }, "Button": { "name": "Button", "group": "components", "folderName": "Button", "role": "primary", "description": "Стандартная кнопка действия с вариантами размера, цвета, иконкой и состоянием загрузки", "props": [ { "name": "as", "type": "((React.ComponentType | keyof JSX.IntrinsicElements) & \"button\") | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ButtonProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Button/Button.d.ts", "type": "wrapper", "atomicBase": "Button", "category": "Локальные компоненты", "keywords": [ "кнопка действия", "primary action", "call to action" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "additionalContent", "type": "ReactNode", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"outline\"", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\"", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentPlacing", "type": "ContentPlacing", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focused", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isLoading", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "loader", "type": "ReactNode", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "outlined", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\"", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftLeft", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftRight", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\"", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "square", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretch", "type": "boolean", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretching", "type": "\"auto\" | \"filled\" | \"fixed\"", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"secondary\" | \"black\" | \"white\"", "required": false, "inheritedFrom": "Button", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Button } from '@daisforge/ui';", "minimalUsage": "", "sourceFile": "packages/storybook/src/stories/AiChatDAIS/AiChatDAIS.tsx" }, { "exportName": "Usage2", "displayName": "Использование в Stories.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/Stories/Stories.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Гиперссылка Гиперссылка Компонент поддерживает вывод в виде тега , для этого необходимо указать свойство as", "type": "vendor", "code": "import React from 'react';\nimport { Button } from '@daisforge/ui';\nexport function App() {\n return (\n \n \n \n \n \n );\n}" }, { "exportName": "Horizontal", "displayName": "Горизонтальная ориентация", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n orientation: 'horizontal',\n }" }, { "exportName": "Unmount", "displayName": "Unmount", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n unMountOnClose: true,\n }" }, { "exportName": "Duration", "displayName": "Длительность анимации", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n duration: 5,\n }" }, { "exportName": "Animation", "displayName": "Тип анимации", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n animation: {\n open: 'steps(3)',\n close: 'cubic-bezier(.29, 1.01, 1, -0.68)',\n },\n duration: 2,\n }" }, { "exportName": "OpenedSize", "displayName": "Размер открытого контейнера", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n sizeOnOpen: 20,\n }" }, { "exportName": "ClosedSize", "displayName": "Размер закрытого контейнера", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n sizeOnClose: 20,\n }" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Collapse } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Default", "displayName": "Collapse", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}" }, { "exportName": "Horizontal", "displayName": "Горизонтальная ориентация", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n orientation: 'horizontal',\n }" }, { "exportName": "Unmount", "displayName": "Unmount", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n unMountOnClose: true,\n }" }, { "exportName": "Duration", "displayName": "Длительность анимации", "type": "full-code", "code": "const StoryRender: FC = (args) => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n \n \n \n \n \n \n );\n}\n\n// Props:\n{\n duration: 5,\n }" } ] }, "Combobox": { "name": "Combobox", "group": "components", "folderName": "Combobox", "role": "primary", "description": "Выпадающий список с поиском и мультивыбором значений в виде чипов", "props": [ { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false, "description": "" }, { "name": "type", "type": "React.HTMLInputTypeAttribute | undefined", "required": false, "description": "" } ], "propsTypeName": "ComboboxProps", "rawType": "export type Props = DistributiveOmit, PropsFromConfig> & DistributivePick, PropsFromConfig> & {\n appearance?: 'default' | 'viewMode';\n};", "isGeneric": true, "sourceFile": "packages/ui-kit/src/components/Combobox/Combobox.tsx", "type": "wrapper", "atomicBase": "Combobox", "formVariant": "FormCombobox", "category": "Локальные компоненты", "keywords": [ "автокомплит", "мультиselect", "поиск по списку" ], "chooseWhen": "Вне react-hook-form — самостоятельный компонент с value/onChange для мультивыбора с поиском.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "items", "type": "T[]", "required": true, "description": "Список элементов.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "afterList", "type": "ReactNode", "required": false, "description": "Ячейка для контента в конце выпадающего списка.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "alwaysOpened", "type": "boolean", "required": false, "description": "Дропдаун открыт всегда.", "default": "false", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "arrowPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Сторона расположения стрелки скрытия/раскрытия.", "default": "left", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "beforeList", "type": "ReactNode", "required": false, "description": "Ячейка для контента в начале выпадающего списка.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeAfterSelect", "type": "boolean", "required": false, "description": "Закрывать ли выпадающий список после выбора элемента.", "default": "если single, то true; если multiple, то false; если передан alwaysOpened, то false", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactElement>", "required": false, "description": "Слот для контента слева.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactElement>", "required": false, "description": "Слот для контента справа.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "emptyStateDescription", "type": "ReactNode", "required": false, "description": "Текст для состояния когда нет результата.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "filter", "type": "((item: T, textValue: string) => boolean)", "required": false, "description": "Функция фильтрации элементов.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "filterValue", "type": "((value: string) => boolean)", "required": false, "description": "Функция валидации вводимых значений.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "flip", "type": "boolean", "required": false, "description": "Коррекция placement, если выпадающий список находится за пределами экрана.", "default": "false", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "helperText", "type": "string", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "description": "Видимость стрелки (хвоста).", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 8]", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "description": "Направление раскрытия тултипа.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPortal", "type": "string | RefObject", "required": false, "description": "Портал для окна подсказки. Принимает id контейнера или ref.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "description": "Иконка, рядом с которым произойдет вызов всплывающего окна.\nЕсли свойство не задано, применится иконка по умолчанию.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение иконки подсказки, когда отсутствует label\nили же он имеет labelPlacement='inner'.", "default": "`outer`", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "description": "Текст тултипа", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "description": "Способ открытия тултипа - наведение или клик мышью", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "description": "Ширина окна (в rem).", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "keepPlaceholder", "type": "boolean", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение лейбла.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "listMaxHeight", "type": "Height", "required": false, "description": "Максимальная высота выпадающего списка.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "listWidth", "type": "Width", "required": false, "description": "Значение css width для выпадающего списка.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "mode", "type": "\"radio\" | \"default\"", "required": false, "description": "Режим работы взаимодействия с элементами.\n- default: элемент можно выбрать и можно отменить его выбор.\n- radio: если элемент выбран, то отменить его выбор нельзя. Только для single-режима.", "default": "default", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangeValue", "type": "((value: string) => void)", "required": false, "description": "Обработчик изменения значения в строке поиска.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onScroll", "type": "((e: UIEvent) => void)", "required": false, "description": "Коллбэк, срабатывающий при скролле.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onToggle", "type": "((isOpen: boolean) => void)", "required": false, "description": "Событие сворачивания/разворачивания выпадающего списка.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optional", "type": "boolean", "required": false, "description": "Флаг необязательности поля", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optionalText", "type": "string", "required": false, "description": "Подпись для указания необязательности поля", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "Placement", "required": false, "description": "Сторона открытия дропдауна относительно target элемента.", "default": "bottom-start", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "portal", "type": "string | RefObject", "required": false, "description": "Портал для выпадающего списка. Принимает id контейнера или ref.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderItem", "type": "((item: T) => ReactNode)", "required": false, "description": "Callback для кастомной настройки элемента в выпадающем списке.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderSelectionIcon", "type": "((selected: boolean | \"indeterminate\") => ReactNode)", "required": false, "description": "Callback для кастомной настройки иконки выбранного элемента.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shift", "type": "boolean", "required": false, "description": "Смещение выпадающего списка при соприкосновении с границами экрана.", "default": "false", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "singleLine", "type": "boolean", "required": false, "description": "Label в элементе выпадающего списка в одну строку или с переносом строк.", "default": "true", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textAfter", "type": "string", "required": false, "description": "Слот для вспомогательного текста слева.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textBefore", "type": "string", "required": false, "description": "Слот для вспомогательного текста справа.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "treeView", "type": "boolean", "required": false, "description": "Режим отображения выпадающего списка в виде дерева.", "default": "false", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "variant", "type": "\"normal\" | \"tight\"", "required": false, "description": "Вариант: обычный или сжатый", "default": "normal", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "virtual", "type": "boolean", "required": false, "description": "Виртуализация в выпадающем списке.\nНе поддерживается в многоуровневых списках.", "default": "false", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "ZIndex", "required": false, "description": "CSS-свойство z-index для выпадающего списка.", "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "_offset", "type": "[number, number]", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"viewMode\"", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipClickArea", "type": "\"full\" | \"close-icon\"", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipView", "type": "\"default\" | \"accent\" | \"secondary\"", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultValue", "type": "string | string[]", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isTargetAmount", "type": "boolean", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "multiple", "type": "boolean", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "ChangeEventHandler | ((value: string, item: T | null) => void) | ((value: string[], item: T | null) => void)", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placeholder", "type": "string", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderValue", "type": "((item: T) => string)", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "selectAllOptions", "type": "SelectAllProps", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "targetAmount", "type": "number", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | string[]", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"edited\"", "required": false, "inheritedFrom": "Combobox", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Combobox } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в FiltersActions.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/FiltersActions/FiltersActions.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в TableCanvas.filtering.stories.tsx", "type": "usage", "code": " setDraftValue(next)}\n closeAfterSelect={false}\n placeholder=\"Выберите Issue Type\"\n afterList={\n \n \n \n setFilters((prev) => ({\n ...prev,\n issueTypeCustom: draftValue,\n }))\n }\n >\n Применить\n \n \n }\n />", "sourceFile": "packages/storybook/src/stories/TableCanvas/TableCanvas.Filtering/TableCanvas.filtering.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Appearance Appearance appearance=\"viewMode\" — режим просмотра.", "type": "vendor", "code": "import React from 'react';\nimport { Combobox } from '@daisforge/ui';\nexport function App() {\n const items = [\n { value: 'option_1', label: 'Опция 1' },\n { value: 'option_2', label: 'Опция 2' },\n ];\n return (\n
\n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Использование Использование Обязательным параметром является только items . Внутри items может быть такой же вложенный массив items. Формат следующий", "type": "vendor", "code": "type Items = Array<{\n /**\n * Значение у item.\n */\n value: string;\n /**\n * Метка-подпись к item.\n */\n label: string;\n /**\n * Сторона открытия вложенного дропдауна относительно текущего элемента.\n * @default bottom-start\n */\n placement?: Placement;\n /**\n * Список дочерних items.\n */\n items?: Array;\n /**\n * Item не активен.\n */\n disabled?: boolean;\n /**\n * Слот для контента слева.\n */\n contentLeft?: ReactNode;\n /**\n * Слот для контента справа.\n */\n contentRight?: ReactNode;\n /**\n * Classname для item.\n */\n className?: string;\n /**\n * Максимальная высота дочернего выпадающего списка.\n */\n listMaxHeight?: CSSProperties['height'];\n}>;" } ] }, "Counter": { "name": "Counter", "group": "components", "folderName": "Counter", "role": "primary", "description": "Числовой бейдж для отображения количества (например, уведомлений)", "props": [], "propsTypeName": "CounterProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Counter/Counter.d.ts", "type": "wrapper", "atomicBase": "Counter", "category": "Локальные компоненты", "keywords": [ "бейдж числа", "счётчик уведомлений", "badge" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "count", "type": "number", "required": true, "description": "Отображаемое число. Не может быть меньше 1.", "inheritedFrom": "Counter", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxCount", "type": "number", "required": false, "description": "Максимальное отображаемое число. Не может быть меньше 1.", "inheritedFrom": "Counter", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"l\" | \"m\" | \"xs\" | \"xxs\"", "required": false, "description": "Размер Counter", "default": "xs", "inheritedFrom": "Counter", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"light\"", "required": false, "description": "Вид Counter", "default": "default", "inheritedFrom": "Counter", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Counter } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в Widget.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/Widget/Widget.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Размер числового badge", "type": "vendor", "code": "import React from 'react';\nimport { Counter } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Максимальное значение числового badge", "type": "vendor", "code": "import React from 'react';\nimport { Counter } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n
\n );\n}" } ] }, "DatePicker": { "name": "DatePicker", "group": "components", "folderName": "DatePicker", "role": "primary", "description": "Поле выбора одной даты со встроенным календарём и иконкой", "props": [ { "name": "onChangeVisibleDate", "type": "((date: Date) => void) | undefined", "required": false, "description": "Обработчик изменения отображаемых месяца или года при навигации по календарю." } ], "propsTypeName": "DatePickerProps", "sourceFile": "packages/ui-kit/src/components/DatePicker/DatePicker.tsx", "type": "wrapper", "atomicBase": "DatePicker", "formVariant": "FormDatePicker", "category": "Локальные компоненты", "keywords": [ "выбор даты", "календарь", "date input" ], "chooseWhen": "Вне react-hook-form — самостоятельный выбор даты с value/onChange.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "appearance", "type": "\"default\" | \"viewMode\"", "required": false, "description": "Вид компонента", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "calendarContainerHeight", "type": "string | number", "required": false, "description": "Высота календаря", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "calendarContainerWidth", "type": "string | number", "required": false, "description": "Ширина календаря", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeAfterDateSelect", "type": "boolean", "required": false, "description": "Закрыть календарь после выбора дат", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnEsc", "type": "boolean", "required": false, "description": "Закрывать календарь при нажатии Escape.", "default": "true", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnOverlayClick", "type": "boolean", "required": false, "description": "Закрывать календарь при нажатии вне области элемента.", "default": "true", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactElement>", "required": false, "description": "Слот для контента слева.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactElement>", "required": false, "description": "Слот для контента справа.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateShortcuts", "type": "DateShortcutItem[]", "required": false, "description": "Список предустановленных дат,\nкоторые можно выбрать в выпадающем календаре", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateShortcutsPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Положение списка предустановленных дат", "default": "'left'", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateShortcutsWidth", "type": "Width", "required": false, "description": "Ширина списка предустановленных дат", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultDate", "type": "Date", "required": false, "description": "Выбранное значение по умолчанию.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных дней.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledMonthList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных месяцев.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledQuarterList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных кварталов.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledYearList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных годов.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disableFlip", "type": "boolean", "required": false, "description": "Отключить автоматическое переворачивание дропдауна при нехватке места", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventList", "type": "EventDay[]", "required": false, "description": "Список событий.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventMonthList", "type": "EventDay[]", "required": false, "description": "Список событий по месяцам.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventQuarterList", "type": "EventDay[]", "required": false, "description": "Список событий по кварталам.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventTooltipOptions", "type": "EventTooltipOptions", "required": false, "description": "Свойства всплывающей подсказки для событий.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventYearList", "type": "EventDay[]", "required": false, "description": "Список событий по годам.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "format", "type": "string", "required": false, "description": "Формат даты.", "default": "`DD.MM.YYYY`", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "frame", "type": "string | RefObject", "required": false, "description": "В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasClearDivider", "type": "boolean", "required": false, "description": "Флаг наличия разделителя для clear appearance", "default": "false", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "description": "Видимость стрелки (хвоста).", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 8]", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "description": "Направление раскрытия тултипа.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPortal", "type": "string | RefObject", "required": false, "description": "Портал для окна подсказки. Принимает id контейнера или ref.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "description": "Размер тултипа", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "description": "Иконка, рядом с которым произойдет вызов всплывающего окна.\nЕсли свойство не задано, применится иконка по умолчанию.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение иконки подсказки, когда отсутствует label\nили же он имеет labelPlacement='inner'.", "default": "`outer`", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "description": "Текст тултипа", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "description": "Способ открытия тултипа - наведение или клик мышью", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "description": "Вид тултипа", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "description": "Ширина окна (в rem).", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "includeEdgeDates", "type": "boolean", "required": false, "description": "Должны ли значения минимального и максимального дня включаться в диапазон.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isOpen", "type": "boolean", "required": false, "description": "Видимость календаря.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "keepPlaceholder", "type": "boolean", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "string", "required": false, "description": "Расположение лейбла.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "lang", "type": "\"ru\" | \"en\"", "required": false, "description": "Язык в маске ввода", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftHelper", "type": "string", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maskWithFormat", "type": "boolean", "required": false, "description": "Формат применяется в качестве маски ввода.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "max", "type": "Date", "required": false, "description": "Максимальное значение даты.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "min", "type": "Date", "required": false, "description": "Минимальное значение даты.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "offset", "type": "[number, number]", "required": false, "description": "Отступ календаря относительно поля ввода.", "default": "[0, 0]", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "(((event: { target: { value?: string; name?: string; originalDate?: DateType; isoDate?: string | undefined; }; }) => void) & FormEventHandler) | undefined", "required": false, "description": "Свойство устарело, используется формой. Вместо используйте onChangeValue и onCommitDate", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangeValue", "type": "((event: SyntheticEvent | null, value?: string, originalDate?: DateType, isoDate?: string) => void) | undefined", "required": false, "description": "Обработчик изменения значения.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onCommitDate", "type": "OnCommitDateCallback", "required": false, "description": "Callback по нажатию Enter в поле ввода или выборе дня на календаре.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onToggle", "type": "((isOpen: boolean, event?: Event | SyntheticEvent) => void)", "required": false, "description": "Событие сворачивания/разворачивания календаря.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "opened", "type": "boolean", "required": false, "description": "Видимость календаря.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "DatePickerPlacement | DatePickerPlacementBasic[]", "required": false, "description": "Сторона открытия календаря относительно поля ввода.", "default": "[\"bottom\", \"top\"]", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "preserveInvalidOnBlur", "type": "boolean", "required": false, "description": "Сохранять невалидное значение после блюра поля ввода", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderFromDate", "type": "Date", "required": false, "description": "Дата с которой начинается календарная сетка.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "description": "Размер контрола.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretched", "type": "boolean", "required": false, "description": "Растянуть поле ввода на всю доступную ширину, а календарь — на всю доступную ширину и высоту", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textAfter", "type": "string", "required": false, "description": "Слот для вспомогательного текста слева.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textBefore", "type": "string", "required": false, "description": "Слот для вспомогательного текста справа.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleCaption", "type": "ReactNode", "required": false, "description": "Метка-подпись к элементу справа.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "type", "type": "\"Days\" | \"Months\" | \"Years\" | \"Quarters\"", "required": false, "description": "Тип отображения календаря: дни, месяца, года.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "usePortal", "type": "boolean", "required": false, "description": "Находится ли в портале.", "default": "false", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | Date | null", "required": false, "description": "Выбранное значение.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valueEdited", "type": "boolean", "required": false, "description": "Отредактированное значение даты", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valueError", "type": "boolean", "required": false, "description": "Некорректное значение даты", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valueSuccess", "type": "boolean", "required": false, "description": "Корректное значение даты", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "description": "Вид контрола.", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "string", "required": false, "description": "CSS-свойство z-index для выпадающего календаря", "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "autoComplete", "type": "string", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventTooltipSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "name", "type": "string", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placeholder", "type": "string", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "DatePicker", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { DatePicker } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в Table.filtering.stories.tsx", "type": "usage", "code": " {\n if (setFilters && !(v instanceof Date))\n setFilters((prev) => ({\n ...prev,\n date: v,\n }));\n }}\n size=\"s\"\n style={{\n width: '100%',\n }}\n />", "sourceFile": "packages/storybook/src/stories/Table/Table.filtering/Table.filtering.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Всплывающая подсказка для событий календаря", "type": "vendor", "code": "type EventDay {\n date: Date;\n color?: string;\n eventInfo?: ReactNode;\n }" }, { "exportName": "Vendor2", "displayName": "Независимый выбор дат", "type": "vendor", "code": "import React from 'react';\nimport { DatePickerRange } from '@daisforge/ui';\nexport function App() {\n return (\n \n );\n}" } ] }, "DatePickerRange": { "name": "DatePickerRange", "group": "components", "folderName": "DatePicker", "role": "primary", "description": "Выбор диапазона дат (от-до) с ярлыками-шорткатами и двойным календарём", "props": [ { "name": "dateShortcuts", "type": "DateShortcutItem[] | undefined", "required": false, "description": "Список предустановленных дат,\nкоторые можно выбрать в выпадающем календаре" }, { "name": "defaultFirstDate", "type": "Date | undefined", "required": false, "description": "Значение по умолчанию для первого поля." }, { "name": "defaultSecondDate", "type": "Date | undefined", "required": false, "description": "Значение по умолчанию для второго поля." }, { "name": "hasRequiredIndicator", "type": "boolean | undefined", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false" }, { "name": "isCalendarPositionedByInput", "type": "boolean | undefined", "required": false, "description": "Позиционировать одиночный календарь относительно активного поля ввода", "default": "false" }, { "name": "isDoubleCalendar", "type": "boolean | undefined", "required": false, "description": "Отобразить двойной календарь" }, { "name": "onChangeFirstValue", "type": "ChangeInstanceCallback | undefined", "required": false, "description": "Коллбэк, вызываемый при изменении первого поля ввода" }, { "name": "onChangeSecondValue", "type": "ChangeInstanceCallback | undefined", "required": false, "description": "Коллбэк, вызываемый при изменении второго поля ввода" }, { "name": "onCommitFirstDate", "type": "CommitInstanceCallback | undefined", "required": false, "description": "Callback по нажатию Enter в поле ввода или выборе дня на календаре для первой даты." }, { "name": "onCommitSecondDate", "type": "CommitInstanceCallback | undefined", "required": false, "description": "Callback по нажатию Enter в поле ввода или выборе дня на календаре для второй даты." }, { "name": "placement", "type": "DatePickerRangePlacement | DatePickerRangePlacementBasic[] | undefined", "required": false, "description": "Сторона открытия календаря относительно поля ввода.", "default": "[\"bottom\", \"top\"]" }, { "name": "preserveInvalidOnBlur", "type": "boolean | undefined", "required": false, "description": "Сохранять невалидное значение после блюра полей ввода" }, { "name": "requiredPlacement", "type": "\"left\" | \"right\" | undefined", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right" }, { "name": "value", "type": "[string | DateType, string | DateType] | undefined", "required": false, "description": "Выбранные значения." }, { "name": "appearance", "type": "\"default\" | \"clear\" | undefined", "required": false, "description": "Вид компонента\nСтиль для UI конфигурации\nВлияет на выбор предустановленого набора токенов" }, { "name": "calendarContainerHeight", "type": "string | number | undefined", "required": false, "description": "Высота календаря" }, { "name": "calendarContainerWidth", "type": "string | number | undefined", "required": false, "description": "Ширина календаря" }, { "name": "closeAfterDateSelect", "type": "boolean | undefined", "required": false, "description": "Закрыть календарь после выбора дат" }, { "name": "closeOnEsc", "type": "boolean | undefined", "required": false, "description": "Закрывать календарь при нажатии Escape.", "default": "true" }, { "name": "closeOnOverlayClick", "type": "boolean | undefined", "required": false, "description": "Закрывать календарь при нажатии вне области элемента.", "default": "true" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "Слот для контента слева" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "Слот для контента справа" }, { "name": "dateShortcutsPlacement", "type": "\"left\" | \"right\" | undefined", "required": false, "description": "Положение списка предустановленных дат", "default": "'left'" }, { "name": "dateShortcutsWidth", "type": "Property.Width | undefined", "required": false, "description": "Ширина списка предустановленных дат" }, { "name": "disabledList", "type": "DisabledDay[] | undefined", "required": false, "description": "Список отключенных дней." }, { "name": "disabledMonthList", "type": "DisabledDay[] | undefined", "required": false, "description": "Список отключенных месяцев." }, { "name": "disabledQuarterList", "type": "DisabledDay[] | undefined", "required": false, "description": "Список отключенных кварталов." }, { "name": "disabledYearList", "type": "DisabledDay[] | undefined", "required": false, "description": "Список отключенных годов." }, { "name": "disableFlip", "type": "boolean | undefined", "required": false, "description": "Отключить автоматическое переворачивание дропдауна при нехватке места" }, { "name": "eventList", "type": "EventDay[] | undefined", "required": false, "description": "Список событий." }, { "name": "eventMonthList", "type": "EventDay[] | undefined", "required": false, "description": "Список событий по месяцам." }, { "name": "eventQuarterList", "type": "EventDay[] | undefined", "required": false, "description": "Список событий по кварталам." }, { "name": "eventTooltipOptions", "type": "EventTooltipOptions | undefined", "required": false, "description": "Свойства всплывающей подсказки для событий." }, { "name": "eventYearList", "type": "EventDay[] | undefined", "required": false, "description": "Список событий по годам." }, { "name": "firstPlaceholder", "type": "string | undefined", "required": false, "description": "Значение первого поля ввода" }, { "name": "firstTextfieldContentLeft", "type": "React.ReactElement> | undefined", "required": false, "description": "Слот для контента слева для первого поля ввода" }, { "name": "firstTextfieldContentRight", "type": "React.ReactElement> | undefined", "required": false, "description": "Слот для контента справа для второго поля ввода" }, { "name": "firstTextfieldTextAfter", "type": "string | undefined", "required": false, "description": "Слот для вспомогательного текста справа для первого поля ввода" }, { "name": "firstValueEdited", "type": "boolean | undefined", "required": false, "description": "Отредактированное значение первого поля ввода" }, { "name": "firstValueError", "type": "boolean | undefined", "required": false, "description": "Некорректное значение первого поля ввода" }, { "name": "firstValueSuccess", "type": "boolean | undefined", "required": false, "description": "Корректное значение первого поля ввода" }, { "name": "format", "type": "string | undefined", "required": false, "description": "Формат даты.", "default": "`DD.MM.YYYY`" }, { "name": "frame", "type": "string | React.RefObject | undefined", "required": false, "description": "В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него." }, { "name": "hasClearDivider", "type": "boolean | undefined", "required": false, "description": "Флаг наличия разделителя для clear appearance\nОтображение разделителя для `appearance='clear'`", "default": "false" }, { "name": "hintContentLeft", "type": "React.ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`." }, { "name": "hintHasArrow", "type": "boolean | undefined", "required": false, "description": "Видимость стрелки (хвоста)." }, { "name": "hintOffset", "type": "[number, number] | undefined", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 8]" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[] | undefined", "required": false, "description": "Направление раскрытия тултипа." }, { "name": "hintSize", "type": "string | undefined", "required": false, "description": "Размер тултипа" }, { "name": "hintTargetIcon", "type": "React.ReactNode", "required": false, "description": "Иконка, рядом с которым произойдет вызов всплывающего окна.\nЕсли свойство не задано, применится иконка по умолчанию." }, { "name": "hintTargetPlacement", "type": "\"inner\" | \"outer\" | undefined", "required": false, "description": "Расположение иконки подсказки, когда отсутствует label\nили же он имеет labelPlacement='inner'.", "default": "`outer`" }, { "name": "hintText", "type": "string | undefined", "required": false, "description": "Текст тултипа" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\" | undefined", "required": false, "description": "Способ открытия тултипа - наведение или клик мышью" }, { "name": "hintView", "type": "string | undefined", "required": false, "description": "Вид тултипа" }, { "name": "hintWidth", "type": "string | undefined", "required": false, "description": "Ширина окна (в rem)." }, { "name": "includeEdgeDates", "type": "boolean | undefined", "required": false, "description": "Должны ли значения минимального и максимального дня включаться в диапазон." }, { "name": "inputWrapperRef", "type": "React.Ref | undefined", "required": false, "description": "Ссылка на обертку полей ввода" }, { "name": "lang", "type": "\"ru\" | \"en\" | undefined", "required": false, "description": "Язык в маске ввода" }, { "name": "leftHelper", "type": "string | undefined", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода." }, { "name": "maskWithFormat", "type": "boolean | undefined", "required": false, "description": "Формат применяется в качестве маски ввода." }, { "name": "max", "type": "Date | undefined", "required": false, "description": "Максимальное значение даты." }, { "name": "min", "type": "Date | undefined", "required": false, "description": "Минимальное значение даты." }, { "name": "offset", "type": "[number, number] | undefined", "required": false, "description": "Отступ календаря относительно поля ввода.", "default": "[0, 0]" }, { "name": "onBlurFirstTextfield", "type": "((event: React.FocusEvent) => void) | undefined", "required": false, "description": "Коллбэк, вызываемый при потере фокуса первым полем ввода" }, { "name": "onBlurSecondTextfield", "type": "((event: React.FocusEvent) => void) | undefined", "required": false, "description": "Коллбэк, вызываемый при потере фокуса вторым полем ввода" }, { "name": "onChangeVisibleDate", "type": "((date: Date) => void) | undefined", "required": false, "description": "Обработчик изменения отображаемых месяца или года при навигации по календарю." }, { "name": "onFocusFirstTextfield", "type": "((event: React.FocusEvent) => void) | undefined", "required": false, "description": "Коллбэк, вызываемый при фокусе на первое поле ввода" }, { "name": "onFocusSecondTextfield", "type": "((event: React.FocusEvent) => void) | undefined", "required": false, "description": "Коллбэк, вызываемый при фокусе на второе поле ввода" }, { "name": "onToggle", "type": "((isOpen: boolean, event?: Event | React.SyntheticEvent | undefined) => void) | undefined", "required": false, "description": "Событие сворачивания/разворачивания календаря." }, { "name": "opened", "type": "boolean | undefined", "required": false, "description": "Видимость календаря." }, { "name": "renderFromDate", "type": "Date | undefined", "required": false, "description": "Дата с которой начинается календарная сетка." }, { "name": "requiredIndicatorPlacement", "type": "\"left\" | \"right\" | undefined", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right" }, { "name": "secondPlaceholder", "type": "string | undefined", "required": false, "description": "Значение второго поля ввода" }, { "name": "secondTextfieldContentLeft", "type": "React.ReactElement> | undefined", "required": false, "description": "Слот для контента слева для первого поля ввода" }, { "name": "secondTextfieldContentRight", "type": "React.ReactElement> | undefined", "required": false, "description": "Слот для контента справа для второго поля ввода" }, { "name": "secondTextfieldTextAfter", "type": "string | undefined", "required": false, "description": "Слот для вспомогательного текста справа для второго поля ввода" }, { "name": "secondValueEdited", "type": "boolean | undefined", "required": false, "description": "Отредактированное значение второго поля ввода" }, { "name": "secondValueError", "type": "boolean | undefined", "required": false, "description": "Некорректное значение второго поля ввода" }, { "name": "secondValueSuccess", "type": "boolean | undefined", "required": false, "description": "Корректное значение второго поля ввода" }, { "name": "size", "type": "string | undefined", "required": false, "description": "Размер контрола.\nРазмер компонента" }, { "name": "stretched", "type": "boolean | undefined", "required": false, "description": "Растянуть поле ввода на всю доступную ширину, а календарь — на всю доступную ширину и высоту" }, { "name": "titleCaption", "type": "React.ReactNode", "required": false, "description": "Метка-подпись к элементу справа" }, { "name": "type", "type": "\"Days\" | \"Months\" | \"Years\" | \"Quarters\" | undefined", "required": false, "description": "Тип отображения календаря: дни, месяца, года." }, { "name": "usePortal", "type": "boolean | undefined", "required": false, "description": "Находится ли в портале.", "default": "false" }, { "name": "view", "type": "string | undefined", "required": false, "description": "Вид контрола.\nВариант отображения" }, { "name": "zIndex", "type": "string | undefined", "required": false, "description": "CSS-свойство z-index для выпадающего календаря" }, { "name": "dividerIcon", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "dividerVariant", "type": "\"none\" | \"dash\" | \"icon\" | undefined", "required": false, "description": "" }, { "name": "firstTextfieldTextBefore", "type": "string | undefined", "required": false, "description": "" }, { "name": "secondTextfieldTextBefore", "type": "string | undefined", "required": false, "description": "" }, { "name": "onChange", "type": "(((event: { target: { value?: string | undefined; name?: string | undefined; }; }) => void) & React.FormEventHandler) | undefined", "required": false, "description": "Свойство устарело, используется формой. Вместо используйте onCommitFirstDate и onCommitSecondDate", "deprecated": true }, { "name": "isOpen", "type": "boolean | undefined", "required": false, "description": "Видимость календаря.", "deprecated": true } ], "propsTypeName": "DatePickerRangeProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/DatePicker/DatePicker.d.ts", "type": "wrapper", "atomicBase": "DatePickerRange", "formVariant": "FormDatePickerRange", "category": "Локальные компоненты", "keywords": [ "диапазон дат", "date range", "период от и до" ], "chooseWhen": "Вне react-hook-form — самостоятельный выбор диапазона дат с value/onChange.", "hasCuratedMeta": true, "atomicDataMissing": true, "importPath": "@daisforge/ui", "importStatement": "import { DatePickerRange } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Независимый выбор дат", "type": "vendor", "code": "import React from 'react';\nimport { DatePickerRange } from '@daisforge/ui';\nexport function App() {\n return (\n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Ограничение диапазона дат", "type": "vendor", "code": "import React from 'react';\nimport { DatePickerRange } from '@daisforge/ui';\nexport function App() {\n const today = new Date();\n const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());\n return (\n \n );\n}" } ] }, "DateTimePicker": { "name": "DateTimePicker", "group": "components", "folderName": "DateTimePicker", "role": "primary", "description": "Поле для ввода даты и времени одновременно в одном контроле", "props": [ { "name": "onChangeVisibleDate", "type": "((date: Date) => void) | undefined", "required": false, "description": "Обработчик изменения отображаемых месяца или года при навигации по календарю." }, { "name": "hasTimeFormat", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false, "description": "" }, { "name": "onChange", "type": "React.ChangeEventHandler | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/DateTimePicker/DateTimePicker.d.ts", "type": "wrapper", "atomicBase": "DateTimePicker", "category": "Локальные компоненты", "keywords": [ "выбор даты и времени", "datetime input", "дата время" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "calendarContainerHeight", "type": "string | number", "required": false, "description": "Высота календаря", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "calendarContainerWidth", "type": "string | number", "required": false, "description": "Ширина календаря", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnEsc", "type": "boolean", "required": false, "description": "Закрывать календарь при нажатии Escape.", "default": "true", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnOverlayClick", "type": "boolean", "required": false, "description": "Закрывать календарь при нажатии вне области элемента.", "default": "true", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactElement>", "required": false, "description": "Слот для контента слева.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactElement>", "required": false, "description": "Слот для контента справа.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateShortcuts", "type": "DateShortcutItem[]", "required": false, "description": "Список предустановленных дат,\nкоторые можно выбрать в выпадающем календаре", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateShortcutsPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Положение списка предустановленных дат", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateShortcutsWidth", "type": "Width", "required": false, "description": "Ширина списка предустановленных дат", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultDate", "type": "Date", "required": false, "description": "Выбранное значение по умолчанию.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных дней.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledMonthList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных месяцев.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledQuarterList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных кварталов.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledYearList", "type": "DisabledDay[]", "required": false, "description": "Список отключенных годов.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disableFlip", "type": "boolean", "required": false, "description": "Отключить автоматическое переворачивание дропдауна при нехватке места", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventList", "type": "EventDay[]", "required": false, "description": "Список событий.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventMonthList", "type": "EventDay[]", "required": false, "description": "Список событий по месяцам.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventQuarterList", "type": "EventDay[]", "required": false, "description": "Список событий по кварталам.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventTooltipOptions", "type": "EventTooltipOptions", "required": false, "description": "Свойства всплывающей подсказки для событий.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventYearList", "type": "EventDay[]", "required": false, "description": "Список событий по годам.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "frame", "type": "string | RefObject", "required": false, "description": "В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "includeEdgeDates", "type": "boolean", "required": false, "description": "Должны ли значения минимального и максимального дня включаться в диапазон.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "keepPlaceholder", "type": "boolean", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "string", "required": false, "description": "Расположение лейбла.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "lang", "type": "\"ru\" | \"en\"", "required": false, "description": "Язык в маске ввода", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftHelper", "type": "string", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "max", "type": "(Date & (string | number))", "required": false, "description": "Максимальное значение даты.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "min", "type": "(Date & (string | number))", "required": false, "description": "Минимальное значение даты.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "offset", "type": "[number, number]", "required": false, "description": "Отступ календаря относительно поля ввода.", "default": "[0, 0]", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onToggle", "type": "((isOpen: boolean, event?: Event | SyntheticEvent) => void)", "required": false, "description": "Событие сворачивания/разворачивания календаря.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "opened", "type": "boolean", "required": false, "description": "Видимость календаря.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "DatePickerPlacement | DatePickerPlacementBasic[]", "required": false, "description": "Сторона открытия календаря относительно поля ввода.", "default": "[\"bottom\", \"top\"]", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "preserveInvalidOnBlur", "type": "boolean", "required": false, "description": "Сохранять невалидное значение после блюра поля ввода", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderFromDate", "type": "Date", "required": false, "description": "Дата с которой начинается календарная сетка.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretched", "type": "boolean", "required": false, "description": "Растянуть поле ввода на всю доступную ширину, а календарь — на всю доступную ширину и высоту", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textAfter", "type": "string", "required": false, "description": "Слот для вспомогательного текста слева.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textBefore", "type": "string", "required": false, "description": "Слот для вспомогательного текста справа.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleCaption", "type": "ReactNode", "required": false, "description": "Метка-подпись к элементу справа.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "type", "type": "\"Days\" | \"Months\" | \"Years\" | \"Quarters\"", "required": false, "description": "Тип отображения календаря: дни, месяца, года.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "usePortal", "type": "boolean", "required": false, "description": "Находится ли в портале.", "default": "false", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | Date | null", "required": false, "description": "Выбранное значение.", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valueEdited", "type": "boolean", "required": false, "description": "Отредактированное значение даты", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valueError", "type": "boolean", "required": false, "description": "Некорректное значение даты", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valueSuccess", "type": "boolean", "required": false, "description": "Корректное значение даты", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "string", "required": false, "description": "CSS-свойство z-index для выпадающего календаря", "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"clear\" | \"default\" | \"viewMode\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "autoComplete", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateFormat", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateOnTimeSelectOnly", "type": "Date", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dateTimeSeparator", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "eventTooltipSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasClearDivider", "type": "boolean", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPortal", "type": "string | RefObject", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isDouble", "type": "boolean", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maskWithFormat", "type": "boolean", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "name", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangeValue", "type": "((event: SyntheticEvent | null, value?: string, formattedValues?: Omit) => void) | undefined", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onCommitDate", "type": "((value: string, formattedValues: FormattedValues) => void)", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onSearch", "type": "((event?: KeyboardEvent, value?: string) => void) | undefined", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placeholder", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "timeFormat", "type": "string", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "inheritedFrom": "DateTimePicker", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { DateTimePicker } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Всплывающая подсказка для событий календаря", "type": "vendor", "code": "type EventDay {\n date: Date;\n color?: string;\n eventInfo?: ReactNode;\n }" }, { "exportName": "Vendor2", "displayName": "Подсказки Подсказки Для вывода подсказки снизу от поля используйте свойство leftHelper ,", "type": "vendor", "code": "import React from 'react';\nimport { DateTimePicker } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" } ] }, "Divider": { "name": "Divider", "group": "components", "folderName": "Divider", "role": "primary", "description": "Разделительная линия между блоками контента, гориз. или верт.", "props": [ { "name": "length", "type": "string | number | undefined", "required": false, "description": "Размер разделителя", "default": "'100%'" }, { "name": "orientation", "type": "string | undefined", "required": false, "description": "Направление разделителя", "default": "'horizontal'" }, { "name": "size", "type": "string | undefined", "required": false, "description": "Размер разделителя", "default": "'m'" }, { "name": "view", "type": "string | undefined", "required": false, "description": "Вид разделителя", "default": "'default'" } ], "propsTypeName": "DividerProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Divider/Divider.d.ts", "type": "wrapper", "atomicBase": "Divider", "category": "Локальные компоненты", "keywords": [ "разделитель блоков", "линия-сепаратор", "отступ между секциями" ], "hasCuratedMeta": true, "atomicDataMissing": true, "importPath": "@daisforge/ui", "importStatement": "import { Divider } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в SplitView.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/SplitView/SplitView.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в MessageBubble.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/AiChatDAIS/components/MessageBubble.tsx" } ] }, "Drawer": { "name": "Drawer", "group": "components", "folderName": "Drawer", "role": "primary", "description": "Базовая выезжающая боковая панель поверх контента страницы", "props": [ { "name": "overlayProps", "type": "DrawerOverlayProps | undefined", "required": false, "description": "Настройки подложки.\nПо умолчанию `position` равен `fixed` для document и `absolute` для остальных frame." } ], "propsTypeName": "DrawerProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Drawer/Drawer.d.ts", "type": "wrapper", "atomicBase": "Drawer", "category": "Локальные компоненты", "keywords": [ "боковая панель", "side panel", "выезжающая шторка" ], "hasCuratedMeta": true, "relatedExports": [ "DrawerContent", "DrawerFooter", "DrawerHeader" ], "inheritedProps": [ { "name": "animationInfo", "type": "DrawerAnimationInfo", "required": false, "description": "Информация об анимации.\nСвойство может содержать поля `enter` и `exit`", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "asModal", "type": "boolean", "required": false, "description": "Поведение аналогичное Modal.", "default": "true", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "borderRadius", "type": "\"none\" | \"default\"", "required": false, "description": "Скругление компонента.", "default": "none", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnEsc", "type": "boolean", "required": false, "description": "Закрывать модальное окно при нажатии на ESC(по умолчанию true).", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnOverlayClick", "type": "boolean", "required": false, "description": "Закрывать модальное окно при нажатии вне области модального окна(по умолчанию true),", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customBackgroundColor", "type": "string", "required": false, "description": "Пользовательский цвет фона Panel.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customContentBackgroundColor", "type": "string", "required": false, "description": "Пользовательский цвет фона контента Panel.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focusAfterRef", "type": "RefObject", "required": false, "description": "Элемент для фокуса после закрытия модального окна\n(по умолчанию фокус на последнем перед открытием активном элементе).", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "frame", "type": "string | RefObject", "required": false, "description": "В каком контейнере позиционируется (по умолчанию document), можно также указать id элемента или ref для него.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "initialFocusRef", "type": "RefObject", "required": false, "description": "Первый элемент для фокуса внутри модального окна.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "offset", "type": "[number, number] | [string, string]", "required": false, "description": "Смещение относительно текущей позиции.\n(x, y) - [number, number], [string, string].\nПри передаче number расчёт в rem.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onClose", "type": "(() => void)", "required": false, "description": "Общий обработчик клика по кнопке \"закрыть\".", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onEscKeyDown", "type": "((event: KeyboardEvent) => void)", "required": false, "description": "Обработчик клика при нажатии на ESC(если не передан, то при нажатии используется onClose).", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onOverlayClick", "type": "((event: MouseEvent) => void)", "required": false, "description": "Обработчик клика при нажатии вне области модального окна\n(если не передан, то при нажатии используется onClose).", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "opened", "type": "boolean", "required": false, "description": "Отображение Popup.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "overlay", "type": "ReactNode", "required": false, "description": "Соседний элемент для окна в портале.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "\"top\" | \"bottom\" | \"right\" | \"left\"", "required": false, "description": "Позиция на экране\ncenter - по умолчанию\nleft, right, top, bottom и их комбинации\nРасположение Drawer.", "default": "left", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "popupInfo", "type": "PopupInfo", "required": false, "description": "Дополнительная информация для программного взаимодействия с окном через контекст.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "positionFixed", "type": "boolean", "required": false, "description": "Если `frame` отличается от `document` применяет `position='fixed'`", "default": "false", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"m\"", "required": false, "description": "Размер компонента.", "default": "m", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "description": "Вид компонента.", "default": "default", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "withAnimation", "type": "boolean", "required": false, "description": "Использовать ли анимацию.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "withBlur", "type": "boolean", "required": false, "description": "Нужно ли применять blur для подложки.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "string", "required": false, "description": "Значение z-index для Popup.", "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "children", "type": "ReactNode", "required": false, "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "height", "type": "string | number", "required": false, "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isOpen", "type": "boolean", "required": false, "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "width", "type": "string | number", "required": false, "inheritedFrom": "Drawer", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Drawer } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Использование Использование Перед использованием убедитесь, что PopupProvider подключен.", "type": "vendor", "code": "import ReactDOM from 'react-dom';\nimport { PopupProvider } from '@daisforge/ui';\nimport { App } from './App';\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);" }, { "exportName": "Vendor2", "displayName": "Анимация Анимация Для работы с анимацией необходимо использовать свойство animationInfo .", "type": "vendor", "code": "import React from 'react';\nimport { IconDone } from '@salutejs/plasma-icons';\nimport { createGlobalStyle } from 'styled-components';\nimport { H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@daisforge/ui';\nexport function App() {\n const [isOpenA, setIsOpenA] = React.useState(false);\n const [isOpenB, setIsOpenB] = React.useState(false);\n const animationInfo = {\n enter: 'enterAnimation 0.2s forwards',\n exit: 'exitAnimation 0.2s forwards',\n }\n const GlobalAnimations = createGlobalStyle`\n @keyframes enterAnimation {\n from {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n to {\n transform: translate(0, -50%);\n opacity: 1;\n }\n }\n @keyframes exitAnimation {\n from {\n transform: translate(0, -50%);\n opacity: 1;\n }\n to {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n }\n `;\n return (\n <>\n \n \n
\n
\n setIsOpenA(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n
\n setIsOpenA(false)}\n placement=\"right\"\n withBlur={false}\n closeOnEsc={true}\n closeOnOverlayClick={true}\n asModal={true}\n width=\"25vw\"\n height=\"100vh\"\n >\n ", "examples": [ { "exportName": "Vendor1", "displayName": "Анимация Анимация Для работы с анимацией необходимо использовать свойство animationInfo .", "type": "vendor", "code": "import React from 'react';\nimport { IconDone } from '@salutejs/plasma-icons';\nimport { createGlobalStyle } from 'styled-components';\nimport { H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@daisforge/ui';\nexport function App() {\n const [isOpenA, setIsOpenA] = React.useState(false);\n const [isOpenB, setIsOpenB] = React.useState(false);\n const animationInfo = {\n enter: 'enterAnimation 0.2s forwards',\n exit: 'exitAnimation 0.2s forwards',\n }\n const GlobalAnimations = createGlobalStyle`\n @keyframes enterAnimation {\n from {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n to {\n transform: translate(0, -50%);\n opacity: 1;\n }\n }\n @keyframes exitAnimation {\n from {\n transform: translate(0, -50%);\n opacity: 1;\n }\n to {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n }\n `;\n return (\n <>\n \n \n
\n
\n setIsOpenA(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n
\n setIsOpenA(false)}\n placement=\"right\"\n withBlur={false}\n closeOnEsc={true}\n closeOnOverlayClick={true}\n asModal={true}\n width=\"25vw\"\n height=\"100vh\"\n >\n \n
\n
\n setIsOpenA(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n setIsOpenB(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n
\n setIsOpenA(false)}\n placement=\"right\"\n withBlur={false}\n closeOnEsc={true}\n closeOnOverlayClick={true}\n asModal={true}\n width=\"25vw\"\n height=\"100vh\"\n >\n \n \n \n )}\n onClose={() => setIsOpenA(false)}\n >\n

Header

\n ", "examples": [ { "exportName": "Vendor1", "displayName": "Анимация Анимация Для работы с анимацией необходимо использовать свойство animationInfo .", "type": "vendor", "code": "import React from 'react';\nimport { IconDone } from '@salutejs/plasma-icons';\nimport { createGlobalStyle } from 'styled-components';\nimport { H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@daisforge/ui';\nexport function App() {\n const [isOpenA, setIsOpenA] = React.useState(false);\n const [isOpenB, setIsOpenB] = React.useState(false);\n const animationInfo = {\n enter: 'enterAnimation 0.2s forwards',\n exit: 'exitAnimation 0.2s forwards',\n }\n const GlobalAnimations = createGlobalStyle`\n @keyframes enterAnimation {\n from {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n to {\n transform: translate(0, -50%);\n opacity: 1;\n }\n }\n @keyframes exitAnimation {\n from {\n transform: translate(0, -50%);\n opacity: 1;\n }\n to {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n }\n `;\n return (\n <>\n \n \n
\n
\n setIsOpenA(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n
\n setIsOpenA(false)}\n placement=\"right\"\n withBlur={false}\n closeOnEsc={true}\n closeOnOverlayClick={true}\n asModal={true}\n width=\"25vw\"\n height=\"100vh\"\n >\n \n
\n
\n setIsOpenA(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n setIsOpenB(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n
\n setIsOpenA(false)}\n placement=\"right\"\n withBlur={false}\n closeOnEsc={true}\n closeOnOverlayClick={true}\n asModal={true}\n width=\"25vw\"\n height=\"100vh\"\n >\n \n \n \n )}\n onClose={() => setIsOpenA(false)}\n >\n

Header

\n void) | undefined", "required": false, "description": "Обработчик клика по кнопке закрытия." }, { "name": "view", "type": "string | undefined", "required": false, "description": "Вид верхней части Panel." } ], "propsTypeName": "DrawerHeaderProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Drawer/Drawer.d.ts", "type": "wrapper", "atomicBase": "DrawerHeader", "category": "Локальные компоненты", "keywords": [ "заголовок шторки", "drawer header", "кнопка закрытия" ], "hasCuratedMeta": true, "parentComponent": "Drawer", "atomicDataMissing": true, "importPath": "@daisforge/ui", "importStatement": "import { DrawerHeader } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Анимация Анимация Для работы с анимацией необходимо использовать свойство animationInfo .", "type": "vendor", "code": "import React from 'react';\nimport { IconDone } from '@salutejs/plasma-icons';\nimport { createGlobalStyle } from 'styled-components';\nimport { H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@daisforge/ui';\nexport function App() {\n const [isOpenA, setIsOpenA] = React.useState(false);\n const [isOpenB, setIsOpenB] = React.useState(false);\n const animationInfo = {\n enter: 'enterAnimation 0.2s forwards',\n exit: 'exitAnimation 0.2s forwards',\n }\n const GlobalAnimations = createGlobalStyle`\n @keyframes enterAnimation {\n from {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n to {\n transform: translate(0, -50%);\n opacity: 1;\n }\n }\n @keyframes exitAnimation {\n from {\n transform: translate(0, -50%);\n opacity: 1;\n }\n to {\n transform: translate(100%, -150%);\n opacity: 0;\n }\n }\n `;\n return (\n <>\n \n \n
\n
\n setIsOpenA(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n
\n setIsOpenA(false)}\n placement=\"right\"\n withBlur={false}\n closeOnEsc={true}\n closeOnOverlayClick={true}\n asModal={true}\n width=\"25vw\"\n height=\"100vh\"\n >\n \n
\n
\n setIsOpenA(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n setIsOpenB(true)}\n style={{\n marginTop: \"1rem\",\n width: \"15rem\"\n }}\n />\n
\n setIsOpenA(false)}\n placement=\"right\"\n withBlur={false}\n closeOnEsc={true}\n closeOnOverlayClick={true}\n asModal={true}\n width=\"25vw\"\n height=\"100vh\"\n >\n \n \n \n )}\n onClose={() => setIsOpenA(false)}\n >\n

Header

\n | undefined", "required": false, "description": "В каком контейнере позиционируется (по умолчанию document), можно также указать id элемента или ref для него." }, { "name": "offset", "type": "[number, number] | [string, string] | undefined", "required": false, "description": "Смещение относительно текущей позиции.\n(x, y) - [number, number], [string, string].\nПри передаче number расчёт в rem." }, { "name": "opened", "type": "boolean | undefined", "required": false, "description": "Отображение Popup." }, { "name": "overlay", "type": "React.ReactNode", "required": false, "description": "Соседний элемент для окна в портале." }, { "name": "placement", "type": "\"left\" | \"right\" | \"top\" | \"bottom\" | undefined", "required": false, "description": "Позиция на экране\ncenter - по умолчанию\nleft, right, top, bottom и их комбинации" }, { "name": "popupInfo", "type": "PopupInfo | undefined", "required": false, "description": "Дополнительная информация для программного взаимодействия с окном через контекст." }, { "name": "positionFixed", "type": "boolean | undefined", "required": false, "description": "Если `frame` отличается от `document` применяет `position='fixed'`", "default": "false" }, { "name": "size", "type": "\"m\" | undefined", "required": false, "description": "Размер компонента." }, { "name": "view", "type": "\"default\" | undefined", "required": false, "description": "Вид компонента." }, { "name": "withAnimation", "type": "boolean | undefined", "required": false, "description": "Использовать ли анимацию." }, { "name": "zIndex", "type": "string | undefined", "required": false, "description": "Значение z-index для Popup." }, { "name": "footer", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "header", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "main", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "onBackClick", "type": "(() => void) | undefined", "required": false, "description": "" }, { "name": "showBackButton", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "animationInfo", "type": "DrawerAnimationInfo | undefined", "required": false, "description": "" }, { "name": "asModal", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "closeOnEsc", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "closeOnOverlayClick", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "focusAfterRef", "type": "React.RefObject | undefined", "required": false, "description": "" }, { "name": "initialFocusRef", "type": "React.RefObject | undefined", "required": false, "description": "" }, { "name": "onClose", "type": "(() => void) | undefined", "required": false, "description": "" }, { "name": "onEscKeyDown", "type": "((event: KeyboardEvent) => void) | undefined", "required": false, "description": "" }, { "name": "onOverlayClick", "type": "((event: React.MouseEvent) => void) | undefined", "required": false, "description": "" }, { "name": "overlayProps", "type": "DrawerOverlayProps | undefined", "required": false, "description": "" }, { "name": "withBlur", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isOpen", "type": "boolean | undefined", "required": false, "description": "", "deprecated": true } ], "propsTypeName": "DrawerDFProps", "compoundParts": [ { "name": "Content", "typeName": "DrawerDFContentProps", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"label\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"button\" | \"image\" | \"search\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"center\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "$isFirstSingleContent", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "$isLastSingleContent", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "fixedWidth", "type": "string | undefined", "required": false, "description": "" }, { "name": "refEl", "type": "React.Ref | undefined", "required": false, "description": "" } ] }, { "name": "Header", "typeName": "DrawerDFHeaderProps", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"label\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"button\" | \"image\" | \"search\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"center\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "badge", "type": "(((((Omit | undefined", "required": false, "description": "" }, { "name": "rightBlock", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "subTitle", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "" } ] }, { "name": "DotsIconButton", "typeName": "DrawerDFDotsIconButtonProps", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "dropdownProps", "type": "(Omit, \"size\" | \"view\"> & Pick & { items: ItemOption[]; trigger?: DropdownTrigger | undefined; placement?: DropdownPlacement | undefined; children?: React.ReactNode; variant?: \"normal\" | \"tight\" | undefined; zIndex?: Property.ZInd…", "required": false, "description": "" }, { "name": "iconSize", "type": "\"s\" | \"xs\" | \"m\" | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"auto\" | \"fixed\" | \"filled\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"clear\" | \"black\" | \"white\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"secondary\" | \"gradient\" | undefined", "required": false, "description": "" } ] }, { "name": "Footer", "typeName": "DrawerDFFooterProps", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"label\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"button\" | \"image\" | \"search\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"center\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "refEl", "type": "React.LegacyRef | undefined", "required": false, "description": "" } ] } ], "sourceFile": "packages/ui-kit/src/components/DrawerDF/DrawerDF.tsx", "type": "wrapper", "category": "Локальные компоненты", "keywords": [ "боковая панель с разметкой", "side panel layout", "шторка с шапкой и футером" ], "docs": "# DrawerDF\n\nРасширенный `Drawer` ([документация SDDS](https://plasma.sberdevices.ru/sdds-finai/components/drawer/)) с готовыми layout-ами для шапки/контента/футера, кнопкой «назад» и сервисными элементами. Из блоков можно собрать как простой выезжающий сайдбар, так и сложные многоколоночные сценарии.\n\n## Ключевые особенности\n\n- Набор compound-компонентов (`Header`, `Content`, `Footer`, `DotsIconButton`, `BackIconButton`)\n- Поддержка множественных контентных колонок с автоматическими отступами\n- Управление кнопкой «назад» на уровне родительского компонента (`showBackButton`, `onBackClick`)\n- Готовые стили для бейджей, правого блока действий и табов в шапке\n\n## Compound-компоненты\n\n```ts\nDrawerDF.Header; // Шапка: заголовок, подзаголовок, бейдж, правый блок, футер-блок (табы)\nDrawerDF.Content; // Контейнер контента с поддержкой фиксированной ширины\nDrawerDF.Footer; // Футер с преднастроенными отступами\nDrawerDF.DotsIconButton; // Иконка «три точки» с Dropdown\nDrawerDF.BackIconButton; // Кнопка «назад»\n```\n\n- `DrawerDF.Header` — автоматически выстраивает заголовок, подзаголовок, бейдж, правый блок и нижний блок (табы)\n- `DrawerDF.Content` — поддерживает `fixedWidth` для формирования колонок\n- `DrawerDF.Footer` — имеет преднастроенные отступы, принимает любые элементы управления\n- `DrawerDF.DotsIconButton` — иконка меню с `dropdownProps`\n- `DrawerDF.BackIconButton` — используется в кнопке «назад», доступен для произвольного использования\n\n## Особенности\n\n- `main` принимает одиночный `DrawerDF.Content` или массив — при массиве автоматически формируются колонки\n- `showBackButton` заменяет крестик закрытия на кнопку «назад»\n\nОписание типов и compound-пропсов — в разделе [API](/docs/локальные-компоненты-drawerdf-api--docs).", "apiDocs": "# DrawerDF API\n\n## DrawerDFProps\n\n```typescript\ntype DrawerDFProps = {\n main?: ReactNode;\n footer?: ReactNode;\n header?: ReactNode;\n showBackButton?: boolean;\n onBackClick?: () => void;\n} & Omit;\n```\n\n## Compound types\n\n### DrawerDF.Header\n\n```typescript\ntype DrawerDFHeaderProps = BoxProps & {\n refEl?: LegacyRef;\n title?: ReactNode;\n subTitle?: ReactNode;\n badge?: (BadgeCompProps & { text: string }) | undefined;\n rightBlock?: ReactNode;\n footerBlock?: ReactNode;\n};\n```\n\n### DrawerDF.Content\n\n```typescript\ntype DrawerDFContentProps = BoxProps & {\n fixedWidth?: string;\n refEl?: Ref;\n $isFirstSingleContent?: boolean;\n $isLastSingleContent?: boolean;\n};\n```\n\n### DrawerDF.Footer\n\n```typescript\ntype DrawerDFFooterProps = BoxProps & {\n refEl?: LegacyRef;\n};\n```\n\n### DrawerDF.DotsIconButton\n\n```typescript\ntype DrawerDFDotsIconButtonProps = ComponentProps & {\n dropdownProps?: ComponentProps;\n iconSize?: ComponentProps['size'];\n};\n```\n\n### DrawerDF.BackIconButton\n\n```typescript\ntype DrawerDFBackIconButtonProps = ComponentProps & {\n iconSize?: ComponentProps['size'];\n};\n```", "curatedStories": [ { "exportName": "DrawerWithOneMainContent", "displayName": "DrawerDF with one content", "type": "full-code", "code": "import { Button, DrawerDF, Flow } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { longLorem } from './data';\nimport { TabsComp } from './Tabs';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerWithOneMainContentExample',\n)}" }, { "exportName": "DrawerDFWithMultipleMainContent", "displayName": "DrawerDF with multiple content", "type": "full-code", "code": "import { Button, DrawerDF, Flow } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { longLorem, shortLorem } from './data';\nimport { TabsComp } from './Tabs';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerWithMultipleContentExample',\n)}" }, { "exportName": "DrawerWithSingleContentNoHeaderNoFooter", "displayName": "DrawerDF with single content (no header, no footer)", "type": "full-code", "code": "import { Button, DrawerDF } from '@daisforge/ui';\nimport { longLorem } from './data';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerSingleContentNoHeaderExample',\n)}" }, { "exportName": "DrawerWithBackButton", "displayName": "DrawerDF with back button", "type": "full-code", "code": "import { Button, DrawerDF, Flow } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { longLorem } from './data';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerWithBackButtonExample',\n)}" } ], "hasCuratedMeta": true, "relatedExports": [ "DrawerDFContent", "DrawerDFFooter", "DrawerDFHeader" ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { DrawerDF } from '@daisforge/ui';", "minimalUsage": "\n {/* части: DrawerDF.Content, DrawerDF.Header, DrawerDF.DotsIconButton, DrawerDF.Footer */}\n", "examples": [ { "exportName": "DrawerWithOneMainContent", "displayName": "DrawerDF with one content", "type": "full-code", "code": "import { Button, DrawerDF, Flow } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { longLorem } from './data';\nimport { TabsComp } from './Tabs';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerWithOneMainContentExample',\n)}" }, { "exportName": "DrawerDFWithMultipleMainContent", "displayName": "DrawerDF with multiple content", "type": "full-code", "code": "import { Button, DrawerDF, Flow } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { longLorem, shortLorem } from './data';\nimport { TabsComp } from './Tabs';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerWithMultipleContentExample',\n)}" }, { "exportName": "DrawerWithSingleContentNoHeaderNoFooter", "displayName": "DrawerDF with single content (no header, no footer)", "type": "full-code", "code": "import { Button, DrawerDF } from '@daisforge/ui';\nimport { longLorem } from './data';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerSingleContentNoHeaderExample',\n)}" }, { "exportName": "DrawerWithBackButton", "displayName": "DrawerDF with back button", "type": "full-code", "code": "import { Button, DrawerDF, Flow } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { longLorem } from './data';\nimport React, { useState } from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx',\n 'DrawerWithBackButtonExample',\n)}" } ] }, "DrawerDFContent": { "name": "DrawerDFContent", "group": "components", "folderName": "DrawerDF", "role": "part", "description": "Прокручиваемая область содержимого DrawerDF с отступами и фиксированной шириной блока", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"label\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"button\" | \"image\" | \"search\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"center\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "$isFirstSingleContent", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "$isLastSingleContent", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "fixedWidth", "type": "string | undefined", "required": false, "description": "" }, { "name": "refEl", "type": "React.Ref | undefined", "required": false, "description": "" } ], "propsTypeName": "DrawerDFContentProps", "sourceFile": "packages/ui-kit/src/components/DrawerDF/DrawerDFCompounds.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "контент шторки", "scrollable content", "тело drawer" ], "hasCuratedMeta": true, "parentComponent": "DrawerDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "DrawerDF", "part": "Content" }, "importPath": "@daisforge/ui", "importStatement": "import { DrawerDFContent } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в DrawerDF.stories.tsx", "type": "usage", "code": "\n {longLorem}\n ", "sourceFile": "packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в DrawerDF.stories.tsx", "type": "usage", "code": "\n \n {shortLorem}\n ", "sourceFile": "packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx" } ] }, "DrawerDFFooter": { "name": "DrawerDFFooter", "group": "components", "folderName": "DrawerDF", "role": "part", "description": "Нижний блок DrawerDF для кнопок и действий, закреплённый под содержимым", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"label\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"button\" | \"image\" | \"search\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"center\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "refEl", "type": "React.LegacyRef | undefined", "required": false, "description": "" } ], "propsTypeName": "DrawerDFFooterProps", "sourceFile": "packages/ui-kit/src/components/DrawerDF/DrawerDFCompounds.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "футер шторки", "кнопки внизу панели", "drawer footer" ], "hasCuratedMeta": true, "parentComponent": "DrawerDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "DrawerDF", "part": "Footer" }, "importPath": "@daisforge/ui", "importStatement": "import { DrawerDFFooter } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в DrawerDF.stories.tsx", "type": "usage", "code": "\n \n
\n \n \n
\n ", "sourceFile": "packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в DrawerDF.stories.tsx", "type": "usage", "code": "\n \n
\n \n \n
\n ", "sourceFile": "packages/storybook/src/stories/DrawerDF/DrawerDF.stories.tsx" } ] }, "DrawerDFHeader": { "name": "DrawerDFHeader", "group": "components", "folderName": "DrawerDF", "role": "part", "description": "Шапка DrawerDF: заголовок, подзаголовок, бейдж и дополнительный блок справа", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"label\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"button\" | \"image\" | \"search\" | \"text\" | \"time\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"center\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "badge", "type": "(((((Omit | undefined", "required": false, "description": "" }, { "name": "rightBlock", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "subTitle", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "" } ], "propsTypeName": "DrawerDFHeaderProps", "sourceFile": "packages/ui-kit/src/components/DrawerDF/DrawerDFCompounds.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "шапка шторки", "заголовок панели", "drawer header" ], "hasCuratedMeta": true, "parentComponent": "DrawerDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "DrawerDF", "part": "Header" }, "importPath": "@daisforge/ui", "importStatement": "import { DrawerDFHeader } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в DrawerDF.stories.tsx", "type": "usage", "code": "\n \n
\n );\n}" } ] }, "Dropzone": { "name": "Dropzone", "group": "components", "folderName": "Dropzone", "role": "primary", "description": "Зона перетаскивания (drag-and-drop) файлов для загрузки", "props": [ { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false, "description": "" }, { "name": "onChange", "type": "React.ChangeEventHandler | undefined", "required": false, "description": "" }, { "name": "type", "type": "React.HTMLInputTypeAttribute | undefined", "required": false, "description": "" } ], "propsTypeName": "DropzoneProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Dropzone/Dropzone.d.ts", "type": "wrapper", "atomicBase": "Dropzone", "category": "Локальные компоненты", "keywords": [ "загрузка файлов", "drag and drop", "перетаскивание файла" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "description", "type": "ReactNode", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "files", "type": "File[]", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "icon", "type": "ReactNode", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "iconPlacement", "type": "\"top\" | \"left\"", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChoseFiles", "type": "FileProcessHandler", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onDragEnter", "type": "((event: DragEvent) => void)", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onDragLeave", "type": "((event: DragEvent) => void)", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onDragOver", "type": "((event: DragEvent) => void)", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onDrop", "type": "FileProcessHandler", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"m\"", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretch", "type": "boolean", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "title", "type": "ReactNode", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "validator", "type": "((files: File[]) => ValidatorReturnType)", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "inheritedFrom": "Dropzone", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Dropzone } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Растягивание Растягивание С помощью свойства stretch компонент растягивается на всю доступную ширину", "type": "vendor", "code": "import React from 'react';\nimport { Dropzone } from '@daisforge/ui';\nexport function App() {\n return (\n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Множественный выбор", "type": "vendor", "code": "import React from 'react';\nimport { Dropzone } from '@daisforge/ui';\nexport function App() {\n return (\n console.log('Выбрано файлов:', acceptedFiles.length)}\n />\n );\n}" } ] }, "EmbedIconButton": { "name": "EmbedIconButton", "group": "components", "folderName": "EmbedIconButton", "role": "primary", "description": "Компактная кнопка только с иконкой — для встраивания в текст, таблицы и плотные блоки UI", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "type", "type": "\"submit\" | \"reset\" | \"button\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/EmbedIconButton/EmbedIconButton.d.ts", "type": "wrapper", "atomicBase": "EmbedIconButton", "category": "Локальные компоненты", "keywords": [ "иконка-кнопка", "inline button", "компактное действие" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "additionalContent", "type": "ReactNode", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"outline\"", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\"", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentPlacing", "type": "ContentPlacing", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focused", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isLoading", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "loader", "type": "ReactNode", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "outlined", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\"", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftLeft", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftRight", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"l\" | \"m\"", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "square", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretch", "type": "boolean", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretching", "type": "Stretching", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"info\"", "required": false, "inheritedFrom": "EmbedIconButton", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { EmbedIconButton } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в TableCanvas.multipleFeatures.stories.tsx", "type": "usage", "code": " {\n alert('Click on statusSelect in ControlBlock');\n }}\n title=\"custom feature status\"\n style={{\n width: '40px',\n height: '40px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n \n ", "sourceFile": "packages/storybook/src/stories/TableCanvas/TableCanvas.MultipleFeatures/TableCanvas.multipleFeatures.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в Table.multipleFeatures.stories.tsx", "type": "usage", "code": " {\n // eslint-disable-next-line no-alert\n alert('Click on customFeatureLabel2 in ControlBlock');\n }}\n title=\"custom feature 2\"\n style={{\n width: '40px',\n height: '40px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n \n ", "sourceFile": "packages/storybook/src/stories/Table/Table.multipleFeatures.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Использование Использование Компонент EmbedIconButton может содержать иконку, которая указывается напрямую через children .", "type": "vendor", "code": "import React from 'react';\nimport { EmbedIconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Размер кнопки", "type": "vendor", "code": "import React from 'react';\nimport { EmbedIconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n \n \n \n \n \n \n
\n );\n}" } ] }, "EmbeddedButtonBeta": { "name": "EmbeddedButtonBeta", "group": "components", "folderName": "EmbeddedButtonBeta", "role": "primary", "description": "Кнопка-иконка для встраивания в поле ввода, карточку или контейнер (beta)", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "position", "type": "any", "required": false, "description": "" }, { "name": "size", "type": "\"l\" | \"m\" | \"s\" | \"xs\" | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"submit\" | \"reset\" | \"button\" | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"accent\" | \"secondary\" | \"positive\" | \"warning\" | \"negative\" | \"info\" | \"gradient\" | undefined", "required": false, "description": "" } ], "propsTypeName": "EmbeddedButtonBetaCompProps", "sourceFile": "node_modules/@salutejs/sdds-finai/dist/beta/types/EmbeddedButton/EmbeddedButton.d.ts", "type": "wrapper", "atomicBase": "EmbeddedButton", "atomicSubpath": "beta", "category": "Локальные компоненты", "keywords": [ "кнопка внутри поля", "icon button", "встроенная кнопка" ], "hasCuratedMeta": true, "inheritedProps": [], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { EmbeddedButtonBeta } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "EmptyState": { "name": "EmptyState", "group": "components", "folderName": "EmptyState", "role": "primary", "description": "Экран-заглушка с иллюстрацией, заголовком и кнопками для пустых или ошибочных состояний", "props": [ { "name": "size", "type": "\"l\" | \"m\" | \"s\"", "required": true, "description": "Размер компонента (small, medium, large)" }, { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные CSS-стили для контейнера" }, { "name": "buttons", "type": "EmptyStateButtonProps[] | undefined", "required": false, "description": "Массив кнопок (до 2 для size='l', до 1 для других размеров)", "default": "[]" }, { "name": "centered", "type": "boolean | undefined", "required": false, "description": "Центрировать контент по вертикали и горизонтали", "default": "false" }, { "name": "classes", "type": "EmptyStateClasses | undefined", "required": false, "description": "Объект с классами для внутренних элементов", "default": "{}" }, { "name": "extraButton", "type": "EmptyStateButtonProps | undefined", "required": false, "description": "Дополнительная кнопка (только для size='l')" }, { "name": "subtitle", "type": "React.ReactNode", "required": false, "description": "Дополнительный поясняющий текст" }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "Основной заголовок состояния" }, { "name": "variant", "type": "EmptyStateImageVariant | undefined", "required": false, "description": "Вариант изображения для отображения\nПоддерживаются варианты EmptyState (loading, life-circle, need-access, no-access, no-content, not-found, not-result)\nи варианты ErrorPage (400, 401, 403, 404, 500, 502, 503, unidentified)" }, { "name": "icon", "type": "React.FC | undefined", "required": false, "description": "", "deprecated": true }, { "name": "iconProps", "type": "Omit | undefined", "required": false, "description": "", "deprecated": true } ], "propsTypeName": "EmptyStateProps", "sourceFile": "packages/ui-kit/src/components/EmptyState/EmptyState.tsx", "type": "composition", "category": "Композиции", "keywords": [ "пустое состояние", "no data placeholder", "заглушка контента" ], "docs": "# EmptyState\n\nКомпонент для отображения состояния пустого контента с вариациями размеров и действий.\n\n## Ключевые особенности\n\n- Три размера: `s` (компактный, без иконки), `m`, `l` (с кнопками и доп. действиями)\n- Варианты: `loading`, `need-access`, `no-access`, `no-content`, `not-found`, `success`\n- Поддержка кнопок и ссылок через массив `buttons`\n- Дополнительная кнопка `extraButton` (только для размера `l`)\n- Кастомизация через `classes` и `$css`\n- Режим центрирования (`centered`)\n\n## Особенности\n\n- Картинки подставляются в зависимости от варианта на продуктовых сборках. В Storybook при смене вариантов картинка не меняется\n- Вариант `not-result` устарел (deprecated) — используйте `not-found`\n- Для размера `l` доступно до 2 кнопок в `buttons` и 1 `extraButton`\n- Для остальных размеров — максимум 1 кнопка\n- Пропсы `icon` и `iconProps` устарели — используйте `variant` для выбора картинки\n\nОписание типов — в разделе [API](/docs/композиции-emptystate-api--docs).", "apiDocs": "# EmptyState API\n\n## EmptyStateProps\n\n```typescript\ntype EmptyStateProps = {\n /**\n * Размер компонента (small, medium, large)\n * */\n size: 's' | 'm' | 'l';\n /**\n * Основной заголовок состояния\n * */\n title?: ReactNode;\n /**\n * Дополнительный поясняющий текст\n * */\n subtitle?: ReactNode;\n /**\n * Вариант изображения для отображения\n * Поддерживаются варианты EmptyState (loading, life-circle, need-access, no-access, no-content, not-found, not-result)\n * и варианты ErrorPage (400, 401, 403, 404, 500, 502, 503, unidentified)\n */\n variant?: EmptyStateImageVariant;\n /**\n * @deprecated Используйте prop `variant` для отображения изображений.\n * Компонент иконки (только для size='m' или для size='s')\n * Оставлено для обратной совместимости.\n */\n icon?: React.FC;\n /**\n * @deprecated Используйте prop `variant` для отображения изображений.\n * Дополнительные пропсы для иконки\n * Оставлено для обратной совместимости.\n */\n iconProps?: Omit;\n /**\n * Массив кнопок (до 2 для size='l', до 1 для других размеров)\n */\n buttons?: EmptyStateButtonProps[];\n /**\n * Дополнительная кнопка (только для size='l')\n */\n extraButton?: EmptyStateButtonProps;\n /**\n * Дополнительный класс для корневого элемента\n */\n className?: string;\n /**\n * Объект с классами для внутренних элементов\n */\n classes?: EmptyStateClasses;\n /**\n * Центрировать контент по вертикали и горизонтали\n */\n centered?: boolean;\n /**\n * Кастомные CSS-стили для контейнера\n */\n $css?: string | CSSObject | FlattenSimpleInterpolation;\n};\n```\n\n## EmptyStateVariant\n\n```typescript\ntype EmptyStateVariant =\n | 'loading'\n | 'life-circle'\n | 'need-access'\n | 'no-access'\n | 'no-content'\n | 'not-found'\n /** @deprecated Используйте `'not-found'` */\n | 'not-result'\n | 'success';\n```\n\n## EmptyStateClasses\n\n```typescript\ntype EmptyStateClasses = {\n root?: string;\n icon?: string;\n title?: string;\n subtitle?: string;\n buttons?: string;\n extraButton?: string;\n};\n```\n\n## EmptyStateButtonProps\n\n```typescript\ntype EmptyStateButtonProps = ButtonVariant | LinkButtonVariant;\n```", "curatedStories": [ { "exportName": "SizeS", "displayName": "Small (s)", "type": "args-only", "code": "{\n size: 's',\n title: 'Ничего не нашлось',\n subtitle: 'Попробуйте изменить или сбросить фильтры',\n variant: 'no-content',\n buttons: [\n {\n type: 'link',\n props: {\n text: 'Сбросить фильтры',\n view: 'accent',\n },\n },\n ],\n }" }, { "exportName": "SizeM", "displayName": "Medium (m)", "type": "args-only", "code": "{\n size: 'm',\n title: 'Ничего не нашлось',\n subtitle: 'Попробуйте изменить параметры поиска',\n variant: 'not-found',\n buttons: [\n {\n type: 'button',\n props: {\n text: 'Сбросить фильтры',\n view: 'secondary', // Кнопка secondary\n },\n },\n ],\n }" }, { "exportName": "SizeL", "displayName": "Large (l)", "type": "args-only", "code": "{\n size: 'l',\n title: 'Отчётов пока нет',\n variant: 'no-content',\n subtitle: 'Здесь вы можете создавать отчёты и работать над ними ',\n buttons: [\n {\n type: 'button',\n props: {\n text: 'Обновить',\n view: 'secondary', // Первая кнопка secondary\n },\n },\n {\n type: 'button',\n props: {\n text: 'Создать отчёт',\n view: 'accent', // Вторая кнопка accent\n },\n },\n ],\n extraButton: {\n type: 'link',\n props: {\n text: 'Справка',\n view: 'default',\n },\n },\n }" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { EmptyState } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в TableCanvasContextMenu.stories.tsx", "type": "usage", "code": "\n menu.row && menu.key && load(menu.row, menu.key),\n },\n },\n ]}\n />", "sourceFile": "packages/storybook/src/stories/TableCanvas/TableCanvas.ContextMenu/TableCanvasContextMenu.stories.tsx" }, { "exportName": "Vendor", "displayName": "Примеры Примеры", "type": "vendor", "code": "import React from 'react';\nimport { Autocomplete, EmptyState, Spinner } from '@daisforge/ui';\nimport { IconRefresh } from '@salutejs/plasma-icons';\nexport function App() {\n const mockData = [\n { label: 'Алексей Смирнов' },\n { label: 'Екатерина Иванова' },\n { label: 'Дмитрий Петров' },\n { label: 'Ольга Васильева' },\n { label: 'Сергей Сидоров' },\n { label: 'Мария Кузнецова' },\n { label: 'Андрей Попов' },\n { label: 'Анна Николаева' },\n { label: 'Иван Федоров' },\n { label: 'Наталья Морозова' },\n { label: 'Михаил Павлов' },\n { label: 'Елена Романова' },\n { label: 'Владимир Киселев' },\n { label: 'Татьяна Захарова' },\n { label: 'Николай Семенов' },\n { label: 'Юлия Белова' },\n { label: 'Александр Гусев' },\n { label: 'Оксана Яковлева' },\n { label: 'Игорь Егорова' },\n { label: 'Вера Тихомирова' },\n { label: 'Артем Григорьев' },\n { label: 'Евгения Козлова' },\n { label: 'Максим Лебедев' },\n { label: 'Виктория Калашникова' },\n { label: 'Константин Абрамов' },\n { label: 'Светлана Новикова' },\n { label: 'Юрий Волков' },\n { label: 'Валентина Воробьева' },\n { label: 'Павел Сергеев' },\n { label: 'Людмила Виноградова' },\n { label: 'Антон Соловьев' },\n { label: 'Маргарита Цветкова' },\n { label: 'Роман Трофимов' },\n { label: 'Лариса Зайцева' },\n { label: 'Евгений Никитин' },\n { label: 'Галина Михайлова' },\n { label: 'Владислав Антонов' },\n { label: 'Дарья Филатова' },\n { label: 'Олег Буров' },\n { label: 'Инна Медведева' },\n { label: 'Вячеслав Крылов' },\n { label: 'Тамара Беляева' },\n { label: 'Кирилл Марков' },\n { label: 'Марина Пономарева' },\n { label: 'Борис Захаров' },\n { label: 'Жанна Савельева' },\n { label: 'Федор Жуков' },\n { label: 'Елизавета Логинова' },\n { label: 'Виктор Рыбаков' },\n { label: 'Лилия Макарова' },\n ];\n const getData = async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(mockData)\n }, 1500)\n })\n }\n const [isError, setIsError] = useState(true)\n const [isLoading, setIsLoading] = useState(false)\n const [value, setValue] \n// … (обрезано)" }, { "exportName": "SizeS", "displayName": "Small (s)", "type": "args-only", "code": "{\n size: 's',\n title: 'Ничего не нашлось',\n subtitle: 'Попробуйте изменить или сбросить фильтры',\n variant: 'no-content',\n buttons: [\n {\n type: 'link',\n props: {\n text: 'Сбросить фильтры',\n view: 'accent',\n },\n },\n ],\n }" }, { "exportName": "SizeM", "displayName": "Medium (m)", "type": "args-only", "code": "{\n size: 'm',\n title: 'Ничего не нашлось',\n subtitle: 'Попробуйте изменить параметры поиска',\n variant: 'not-found',\n buttons: [\n {\n type: 'button',\n props: {\n text: 'Сбросить фильтры',\n view: 'secondary', // Кнопка secondary\n },\n },\n ],\n }" } ] }, "Flow": { "name": "Flow", "group": "components", "folderName": "Flow", "role": "primary", "description": "Гибкий контейнер для упорядоченного размещения карточек, медиа и блоков контента", "props": [ { "name": "minColWidth", "type": "string | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Flow/Flow.d.ts", "type": "wrapper", "atomicBase": "Flow", "category": "Локальные компоненты", "keywords": [ "flex layout", "автоматическая раскладка", "responsive контейнер" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "alignment", "type": "\"center\" | \"end\" | \"start\"", "required": false, "description": "Выравнивание элементов внутри строк по вертикали при горизонтальной ориентации,\nили внутри столбцов по горизонтали при вертикальной", "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "arrangement", "type": "\"center\" | \"end\" | \"start\" | \"spaceBetween\" | \"spaceAround\"", "required": false, "description": "Расположение элементов относительно выбранной ориентации", "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "crossAxisGap", "type": "string | number", "required": false, "description": "Фиксированный отступ между элементами по второстепенной оси", "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "itemsPerLine", "type": "number", "required": false, "description": "Количество элементов по главной оси в отображении grid, при itemsPerLine > 0,\nиначе используется flex и flex-wrap", "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "mainAxisGap", "type": "string | number", "required": false, "description": "Фиксированный отступ между элементами по главной оси", "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "orientation", "type": "\"horizontal\" | \"vertical\"", "required": false, "description": "Ориентация элементов", "default": "`horizontal`", "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "className", "type": "string", "required": false, "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "style", "type": "CSSProperties", "required": false, "inheritedFrom": "Flow", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Flow } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в Layout.stories.tsx", "type": "usage", "code": "\n Текст 1\n Текст 2\n Текст 3\n ", "sourceFile": "packages/storybook/src/stories/Layout/Layout.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в WidgetL.tsx", "type": "usage", "code": "\n \n {someItems.map((_, i) => (\n \n ))}\n \n ", "sourceFile": "packages/storybook/src/stories/AnalyticalWidget/components/WidgetL.tsx" }, { "exportName": "Vendor1", "displayName": "Горизонтальное отображение с переполнением", "type": "vendor", "code": "import React from 'react';\nimport { Flow } from '@daisforge/ui';\nexport function App() {\n const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];\n const style = (index) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: `${2 + numbers[index].length}ch`,\n height: '25px',\n backgroundColor: '#999',\n borderRadius: '10px',\n });\n return (\n
\n \n {Array(6)\n .fill(0)\n .map((_, i) => (
{numbers[i]}
))}\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Отображение с разбиением на строки", "type": "vendor", "code": "import React from 'react';\nimport { Flow } from '@daisforge/ui';\nexport function App() {\n const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];\n const style = (index) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: `${2 + numbers[index].length}ch`,\n height: '25px',\n backgroundColor: '#999',\n borderRadius: '10px',\n });\n return (\n
\n \n {Array(6)\n .fill(0)\n .map((_, i) => (
{numbers[i]}
))}\n \n
\n );\n}" } ] }, "Col": { "name": "Col", "group": "components", "folderName": "Grid", "role": "primary", "description": "Колонка адаптивной сетки: ширина и отступ настраиваются по брейкпоинтам", "props": [ { "name": "offset", "type": "number | undefined", "required": false, "description": "Отступ ячейки, сдвинет ее на n ячеек вправо.\nБудет применен на всех вьюпортах, если не задать адаптивные отступы.\nНапример через smallM={{offset: 2}} или offsetS={2}" }, { "name": "largeL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "largeM", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "largeS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "largeXL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "largeXS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "largeXXL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "largeXXS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "mediumL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "mediumM", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "mediumS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "mediumXL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "mediumXS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "mediumXXL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "mediumXXS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "smallL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "smallM", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "smallS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "smallXL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "smallXS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "smallXXL", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "smallXXS", "type": "ScreenConfig | undefined", "required": false, "description": "" }, { "name": "offsetL", "type": "ColCount | undefined", "required": false, "description": "Отступ ячейки при разрешении L", "deprecated": true }, { "name": "offsetM", "type": "ColCount | undefined", "required": false, "description": "Отступ ячейки при разрешении M", "deprecated": true }, { "name": "offsetS", "type": "ColCount | undefined", "required": false, "description": "Отступ ячейки при разрешении S", "deprecated": true }, { "name": "offsetXL", "type": "ColCount | undefined", "required": false, "description": "Отступ ячейки при разрешении XL", "deprecated": true }, { "name": "offsetXXL", "type": "ColCount | undefined", "required": false, "description": "Отступ ячейки при разрешении XXL", "deprecated": true }, { "name": "sizeL", "type": "ColCount | undefined", "required": false, "description": "Размер ячейки при разрешении L", "deprecated": true }, { "name": "sizeM", "type": "ColCount | undefined", "required": false, "description": "Размер ячейки при разрешении M", "deprecated": true }, { "name": "sizeS", "type": "ColCount | undefined", "required": false, "description": "Размер ячейки при разрешении S", "deprecated": true }, { "name": "sizeXL", "type": "ColCount | undefined", "required": false, "description": "Размер ячейки при разрешении XL", "deprecated": true }, { "name": "sizeXXL", "type": "ColCount | undefined", "required": false, "description": "Размер ячейки при разрешении XXL", "deprecated": true } ], "propsTypeName": "ColProps", "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Grid/ui/Col/Col.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "grid column", "адаптивная колонка", "responsive layout" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Col } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Адаптивные размеры и отступы колонок", "type": "vendor", "code": "import React from 'react';\nimport { Grid, Row, Col } from '@daisforge/ui';\nexport function App() {\n const Filler = ({children}) => {\n return (\n \n {children}\n
\n )\n };\n return (\n \n \n \n 1\n \n \n 2\n \n \n \n \n 4 offset 1\n \n \n 6 offset 2\n \n \n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Базовое применение", "type": "vendor", "code": "import React from 'react';\nimport { Grid, Row, Col } from '@daisforge/ui';\nexport function App() {\n const Filler = ({children}) => {\n return (\n \n {children}\n
\n )\n };\n return (\n \n \n \n 3\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 6\n \n \n \n \n 4 offset 1\n \n \n 6 offset 2\n \n \n \n );\n}" } ] }, "Grid": { "name": "Grid", "group": "components", "folderName": "Grid", "role": "primary", "description": "Контейнер сетки (Row/Col) для построения адаптивных раскладок страницы", "props": [], "propsTypeName": "GridProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Grid/Grid.d.ts", "type": "wrapper", "atomicBase": "Grid", "category": "Локальные компоненты", "keywords": [ "grid system", "сетка страницы", "layout grid" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "view", "type": "\"default\"", "required": false, "description": "Вид сетки.", "inheritedFrom": "Grid", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxWidth", "type": "string", "required": false, "inheritedFrom": "Grid", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Grid } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Адаптивные размеры и отступы колонок", "type": "vendor", "code": "import React from 'react';\nimport { Grid, Row, Col } from '@daisforge/ui';\nexport function App() {\n const Filler = ({children}) => {\n return (\n \n {children}\n
\n )\n };\n return (\n \n \n \n 1\n \n \n 2\n \n \n \n \n 4 offset 1\n \n \n 6 offset 2\n \n \n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Базовое применение", "type": "vendor", "code": "import React from 'react';\nimport { Grid, Row, Col } from '@daisforge/ui';\nexport function App() {\n const Filler = ({children}) => {\n return (\n \n {children}\n
\n )\n };\n return (\n \n \n \n 3\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 6\n \n \n \n \n 4 offset 1\n \n \n 6 offset 2\n \n \n \n );\n}" } ] }, "Row": { "name": "Row", "group": "components", "folderName": "Grid", "role": "primary", "description": "Строка сетки для горизонтального размещения колонок внутри Grid", "props": [], "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Grid/ui/Row/Row.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "grid row", "строка сетки", "horizontal layout" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Row } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Адаптивные размеры и отступы колонок", "type": "vendor", "code": "import React from 'react';\nimport { Grid, Row, Col } from '@daisforge/ui';\nexport function App() {\n const Filler = ({children}) => {\n return (\n \n {children}\n
\n )\n };\n return (\n \n \n \n 1\n \n \n 2\n \n \n \n \n 4 offset 1\n \n \n 6 offset 2\n \n \n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Базовое применение", "type": "vendor", "code": "import React from 'react';\nimport { Grid, Row, Col } from '@daisforge/ui';\nexport function App() {\n const Filler = ({children}) => {\n return (\n \n {children}\n
\n )\n };\n return (\n \n \n \n 3\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 6\n \n \n \n \n 4 offset 1\n \n \n 6 offset 2\n \n \n \n );\n}" } ] }, "GridDND": { "name": "GridDND", "group": "components", "folderName": "GridDND", "role": "primary", "description": "Адаптивная сетка карточек-виджетов с drag-and-drop и изменением порядка/размера", "props": [ { "name": "items", "type": "GridDNDItems[]", "required": true, "description": "Линейная последовательность виджетов (источник истины)" }, { "name": "dragActivationDelay", "type": "number | undefined", "required": false, "description": "Задержка (мс) перед активацией режима перетаскивания.\nПри зажатии карточки запускается таймер, по истечении которого\nактивируется D&D, блокируется выделение текста (user-select: none).\nПри отпускании режим деактивируется.", "default": "0 (без задержки, D&D активен сразу)" }, { "name": "allowOverlap", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "autoSize", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "breakpoints", "type": "Record | undefined", "required": false, "description": "" }, { "name": "children", "type": "React.ReactNode | ((item: GridDNDItemConfig, onRemove: () => void, onResize: (type: \"s\" | \"m\" | \"l\") => void) => React.ReactNode)", "required": false, "description": "" }, { "name": "cols", "type": "Record | undefined", "required": false, "description": "" }, { "name": "compactType", "type": "\"horizontal\" | \"vertical\" | null | undefined", "required": false, "description": "" }, { "name": "containerPadding", "type": "[number, number] | undefined", "required": false, "description": "" }, { "name": "containerStyle", "type": "React.CSSProperties | undefined", "required": false, "description": "" }, { "name": "draggableCancel", "type": "string | undefined", "required": false, "description": "" }, { "name": "draggableHandle", "type": "string | undefined", "required": false, "description": "" }, { "name": "enableLogs", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "gridItemComponent", "type": "React.ComponentType<{ children: React.ReactNode; isDraggable: boolean; className?: string | undefined; }> | undefined", "required": false, "description": "" }, { "name": "gridStyle", "type": "React.CSSProperties | undefined", "required": false, "description": "" }, { "name": "isBounded", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isDraggable", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isResizable", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "margin", "type": "[number, number] | undefined", "required": false, "description": "" }, { "name": "maxRows", "type": "number | undefined", "required": false, "description": "" }, { "name": "onBreakpointChange", "type": "((breakpoint: string, layout: GridDNDLayout) => void) | undefined", "required": false, "description": "" }, { "name": "onDrag", "type": "ReactGridLayout.ItemCallback | undefined", "required": false, "description": "" }, { "name": "onDragStart", "type": "ReactGridLayout.ItemCallback | undefined", "required": false, "description": "" }, { "name": "onDragStop", "type": "ReactGridLayout.ItemCallback | undefined", "required": false, "description": "" }, { "name": "onItemsChange", "type": "((items: GridDNDItemConfig[]) => void) | undefined", "required": false, "description": "" }, { "name": "onLayoutChange", "type": "((layout: GridDNDLayout, allLayouts: Record, meta: GridDNDMeta) => void) | undefined", "required": false, "description": "" }, { "name": "onResize", "type": "ReactGridLayout.ItemCallback | undefined", "required": false, "description": "" }, { "name": "onResizeStart", "type": "ReactGridLayout.ItemCallback | undefined", "required": false, "description": "" }, { "name": "onResizeStop", "type": "ReactGridLayout.ItemCallback | undefined", "required": false, "description": "" }, { "name": "onWidthChange", "type": "((containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void) | undefined", "required": false, "description": "" }, { "name": "preventCollision", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "resizeHandles", "type": "ResizeHandle[] | undefined", "required": false, "description": "" }, { "name": "rowHeights", "type": "Record | undefined", "required": false, "description": "" }, { "name": "smartCompact", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "transformScale", "type": "number | undefined", "required": false, "description": "" }, { "name": "useCSSTransforms", "type": "boolean | undefined", "required": false, "description": "" } ], "propsTypeName": "GridDNDProps", "compoundParts": [ { "name": "ItemWrapper", "typeName": "GridDNDItemWrapperProps", "props": [ { "name": "item", "type": "GridDNDItemConfig", "required": true, "description": "" }, { "name": "actionsSlot", "type": "React.ReactNode", "required": false, "description": "" } ] } ], "sourceFile": "packages/ui-kit/src/components/GridDND/GridDND.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "drag and drop grid", "перетаскивание карточек", "dashboard widgets" ], "scope": "internal", "docs": "# GridDND\n\nКомпонент для создания адаптивных сеток с поддержкой перетаскивания элементов и автоматическим переносом между брейкпоинтами.\n\n## Ключевые особенности\n\n- Единый пропс `items` как источник истины (без сложной инициализации)\n- Три типа виджетов: `s` (1x1), `m` (2x1), `l` (2x2) с автоматической адаптацией\n- Мутации через `ref.api`: добавление, удаление, смена типа, переупорядочивание\n- Кастомные брейкпоинты и колонки\n- Алгоритм `packByItemsOrder` для предсказуемого размещения\n- Drag Handle и No-Drag Zones через CSS-классы\n\n## Быстрый старт\n\n### Базовое использование\n\n```tsx\n\nconst MyGrid = () => (\n \n {(item, onRemove) => (\n
\n

Виджет {item.id}

\n \n
\n )}\n \n);\n```\n\n### Единый источник истины\n\nПропс `items` передаётся **один раз** — это начальный снимок (порядок + типы).\nВсе runtime-мутации идут через `ref.api.*`. После маунта изменения `items`\nв props игнорируются — это сделано специально, чтобы не было гонок с\nпользовательскими действиями (D&D, add/remove).\n\n```tsx\n// ПРАВИЛЬНО — передаём один раз при маунте\n\n\n// НЕПРАВИЛЬНО — изменения после маунта не подхватятся\n\n```\n\n### Мутации через `ref.api`\n\n- **Добавить** — `api.addItem({ id, type }, index?)`\n- **Удалить** — `api.removeItem(id)`\n- **Изменить type** — `api.setItemType(id, 's' | 'm' | 'l')`\n- **Переупорядочить** — `api.setOrder(ids)`\n- **Получить состояние** — `api.getOrder()`, `api.getOrderDetailed()`, `api.getCurrentLayout()`, `api.getAllLayouts()`\n\n```tsx\nconst gridRef = useRef(null);\n\n// Пример: «вырастить» виджет w1 до L\ngridRef.current?.api.setItemType('w1', 'l');\n```\n\n### Для виджета, который сам меняет свой размер\n\nRender-prop получает 3 аргумента: `(item, onRemove, onResize)`. Функции\n`onRemove` и `onResize` уже пре-каррированы к `item.id` — под капотом вызывают\n`api.removeItem(id)` и `api.setItemType(id, type)` соответственно.\n\n```tsx\n\n {(item, onRemove, onResize) => (\n \n \n \n )}\n\n```\n\n> Важно: React-ключ по `item.id` стабилен, поэтому при `setItemType`/reflow\n> **React-инстанс виджета не размонтируется** — внутренний `useState`,\n> ссылки, фокусы сохраняются. Визуально меняется только размер ячейки.\n\n## Типы виджетов и размеры\n\nКомпонент поддерживает три типа виджетов:\n\n- **'s'** (small) - 1x1 ячейка\n- **'m'** (medium) - 2x1 ячейки\n- **'l'** (large) - 2x2 ячейки\n\nРазмеры автоматически адаптируются под количество колонок в брейкпоинте.\n\n## Адаптивность и брейкпоинты\n\n### Стандартные брейкпоинты\n\n```ts\n{\n lg: 1857, // 6 колонок\n md: 1377, // 6 колонок\n sm: 1145, // 5 колонок\n xs: 913, // 4 колонки\n xxs: 0 // 4 колонки\n}\n```\n\n### Кастомные брейкпоинты\n\n```tsx\n\n```\n\n## Алгоритмы размещения\n\n### 1. Алгоритм packByItemsOrder\n\nОсновной алгоритм размещения элементов в порядке их следования:\n\n```tsx\n// Псевдокод алгоритма\nfunction packByItemsOrder(order, sizes, cols) {\n // 1. Создаётся виртуальная сетка для отслеживания занятых ячеек\n // 2. Для каждого элемента в порядке order:\n // - Определяются размеры элемента (w x h)\n // - Поиск начинается с текущей \"границы чтения\" (fy, fx)\n // - Сначала проверяется текущая строка fy, начиная с позиции fx\n // - Если не помещается - ищется ниже, начиная со строки fy+1\n // 3. Найденное место занимается в виртуальной сетке\n // 4. \"Граница чтения\" обновляется для следующего элемента\n}\n```\n\nКлючевые особенности алгоритма:\n\n- Сохраняет порядок чтения (слева направо, сверху вниз)\n- После перехода на новую строку возврат к предыдущим строкам невозможен\n- Оптимизирован для минимального количества \"дырок\" в сетке\n- Гарантирует предсказуемое расположение при изменении порядка элементов\n\n### 2. Алгоритм первого подходящего места (placeRectFirstFit)\n\nПри добавлении новых элементов используется алгоритм First Fit:\n\n- Создается виртуальная карта занятых ячеек\n- Поиск ведется от стартовой позиции (0,0 по умолчанию)\n- Находится первое свободное место нужного размера\n\n## Управление перетаскиванием\n\n### Drag Handle\n\nДля создания области перетаскивания добавьте класс `grid-dnd__drag-handle`:\n\n```tsx\n
Перетаскивайте за эту область
\n```\n\n### No-Drag Zones\n\nЧтобы запретить перетаскивание за определенные элементы, используйте класс `grid-dnd__no-drag`:\n\n```tsx\n\n```\n\n### Кастомные handles\n\n```tsx\n\n
Перетаскивайте меня
\n\n```\n\n### Конфигурация отступов\n\n```tsx\n\n```\n\n### Настройка поведения\n\n```tsx\n\n```\n\n> Подробнее о типах и пропсах — [GridDND API](?path=/docs/локальные-компоненты-griddnd-api--docs)", "apiDocs": "# GridDND API\n\n## GridDNDProps\n\n```typescript\ntype GridDNDProps = {\n /** Линейная последовательность виджетов (источник истины) */\n items: GridDNDItems[];\n\n // Адаптивность\n breakpoints?: Record;\n cols?: Record;\n rowHeights?: Record;\n\n // Поведение RGL\n isDraggable?: boolean;\n isResizable?: boolean;\n margin?: [number, number];\n containerPadding?: [number, number];\n preventCollision?: boolean;\n allowOverlap?: boolean;\n isBounded?: boolean;\n autoSize?: boolean;\n useCSSTransforms?: boolean;\n compactType?: ReactGridLayoutProps['compactType']; // default: \"horizontal\"\n smartCompact?: boolean; // default: true\n resizeHandles?: ReactGridLayoutProps['resizeHandles'];\n draggableHandle?: string;\n draggableCancel?: string;\n maxRows?: ReactGridLayoutProps['maxRows'];\n transformScale?: ReactGridLayoutProps['transformScale'];\n\n // Колбеки\n onLayoutChange?: (\n layout: GridDNDLayout,\n allLayouts: Record,\n meta: GridDNDMeta,\n ) => void;\n onBreakpointChange?: (breakpoint: string, layout: GridDNDLayout) => void;\n onItemsChange?: (items: GridDNDItemConfig[]) => void;\n onWidthChange?: ResponsiveProps['onWidthChange'];\n onDrag?: ReactGridLayoutProps['onDrag'];\n onDragStart?: ReactGridLayoutProps['onDragStart'];\n onDragStop?: ReactGridLayoutProps['onDragStop'];\n onResize?: ReactGridLayoutProps['onResize'];\n onResizeStart?: ReactGridLayoutProps['onResizeStart'];\n onResizeStop?: ReactGridLayoutProps['onResizeStop'];\n\n // Контент\n children?:\n | React.ReactNode\n | ((\n item: GridDNDItemConfig,\n onRemove: () => void,\n onResize: (type: 's' | 'm' | 'l') => void,\n ) => React.ReactNode);\n\n /**\n * Задержка (мс) перед активацией режима перетаскивания.\n * При зажатии карточки запускается таймер, по истечении которого\n * активируется D&D, блокируется выделение текста (user-select: none).\n * При отпускании режим деактивируется.\n * @default 0 (без задержки, D&D активен сразу)\n */\n dragActivationDelay?: number;\n\n // Стили\n gridItemComponent?: React.ComponentType<{\n children: React.ReactNode;\n isDraggable: boolean;\n className?: string;\n }>;\n containerStyle?: React.CSSProperties;\n gridStyle?: React.CSSProperties;\n enableLogs?: boolean;\n};\n```\n\n## GridDNDItems\n\n```typescript\ntype GridDNDItems = {\n id: string;\n /** Размер по типу: s(1x1), m(2x1), l(2x2) */\n type: 's' | 'm' | 'l';\n};\n```\n\n## GridDNDItemConfig\n\n```typescript\ntype GridDNDItemConfig = {\n id: string;\n type: 's' | 'm' | 'l';\n position: { x: number; y: number; w: number; h: number };\n};\n```\n\n## GridDNDRef\n\n```typescript\ntype GridDNDRef = {\n api: {\n /** Текущий порядок id (канонический) */\n getOrder: () => string[];\n /** Текущий порядок id + type элемента */\n getOrderDetailed: () => GridDNDItems[];\n /** Установить порядок и переложить всё */\n setOrder: (order: string[]) => void;\n /** Добавить в конец (или с индексом) и переложить */\n addItem: (spec: GridDNDItems, index?: number) => void;\n /** Удалить и переложить */\n removeItem: (id: string) => void;\n /** Изменить type (и размер) существующего виджета и переложить */\n setItemType: (id: string, type: 's' | 'm' | 'l') => void;\n /** Сырые layouts RGL по всем брейкпоинтам */\n getAllLayouts: () => Record;\n /** Текущий GridDNDLayout (для активного BP) */\n getCurrentLayout: () => GridDNDLayout;\n };\n};\n```", "curatedStories": [ { "exportName": "DragDelay", "displayName": "Задержка активации D&D (dragActivationDelay)", "type": "full-code", "code": "render() {\n const gridRef = useRef(null);\n const [items] = useState([\n { id: 'w1', type: 'm' },\n { id: 'w2', type: 's' },\n { id: 'w3', type: 's' },\n { id: 'w4', type: 'm' },\n { id: 'w5', type: 's' },\n ]);\n\n const renderItem = useCallback(\n (item: GridDNDItemConfig, onRemove: () => void) => (\n \n }\n >\n {item.type === 's' && }\n {item.type === 'm' && }\n \n ),\n [],\n );\n\n return (\n
\n
\n Зажмите карточку на 500мс для активации перетаскивания. Обводка\n появится только у зажатой карточки.\n
\n
\n {\n console.debug('Layout changed:', layout, meta);\n }}\n />\n
\n
\n );\n }" }, { "exportName": "GridDNDClassic", "displayName": "GridDND Classic", "type": "full-code", "code": "import { GridDND } from '@daisforge/ui';\n\nrender() {\n const gridRef = useRef(null);\n const [items, setItems] = useState([]);\n const [width, setWidth] = useState(1660);\n const [drag, setDrag] = useState(true);\n const [loading, setLoading] = useState(true);\n const [smartCompact, setSmartCompact] = useState(true);\n const [compactType, setCompactType] = useState<\n 'vertical' | 'horizontal' | null\n >('horizontal');\n\n const renderItem = useCallback(\n (item: GridDNDItemConfig, onRemove: () => void) => (\n \n }\n >\n {item.type === 's' && }\n {item.type === 'm' && }\n {item.type === 'l' && }\n \n ),\n [],\n );\n\n const handleReorder = () => {\n const currentOrder = gridRef.current?.api.getOrder() || [];\n // Перевернуть порядок\n gridRef.current?.api.setOrder([...currentOrder].reverse());\n };\n\n const saveItems = useCallback(async (newItems: GridDNDItems[]) => {\n try {\n console.log('💾 Saving items to server:', newItems);\n await fetch(gridDndRoutes.ENDPOINTS.PUT_ITEMS, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ items: newItems }),\n });\n console.log('✅ Items saved successfully');\n } catch (error) {\n console.error('❌ Failed to save items:', error);\n }\n }, []);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const debouncedSave = useCallback(\n debounce((newItems: GridDNDItems[]) => {\n saveItems(newItems);\n }, 800),\n [saveItems],\n );\n\n // Загрузка initial items с сервера\n useEffect(() => {\n const fetchInitialItems = async () => {\n try {\n const response = await fetch(gridDndRoutes.ENDPOINTS.GET_ITEMS);\n const data = await response.json();\n setItems(data.items);\n } catch (error) {\n console.error('Failed to fetch items:', error);\n } finally {\n setLoading(false);\n }\n };\n\n fetchInitialItems();\n }, []);\n\n if (loading) {\n return
Loading...
;\n }\n\n return (\n
\n \n Width: {width}px\n setWidth(+e.target.value)}\n />\n setDrag(e.target.checked)}\n label=\"Activate DND\"\n checked={drag}\n />\n setSmartCompact(e.target.checked)}\n label=\"Activate Smart Compact\"\n checked={smartCompact}\n />\n \n setCompactType(e.target.checked ? 'vertical' : null)\n }\n label=\"Activate Compact Type Vertical\"\n checked={compactType === 'vertical'}\n />\n \n setCompactType(e.target.checked ? 'horizontal' : null)\n }\n label=\"Activate Compact Type Horizontal\"\n checked={compactType === 'horizontal'}\n />\n
\n \n {\n console.debug(gridRef.current?.api.getOrderDetailed());\n }}\n >\n Get Order Detail\n \n \n console.debug('Current layout:', gridRef.current?.api.getOrder())\n }\n >\n Get Order\n \n \n console.debug(\n 'Current template area:',\n gridRef.current?.api.getCurrentLayout(),\n )\n }\n >\n Get Current Layout\n \n \n console.debug(\n 'All template areas:',\n gridRef.current?.api.getAllLayouts(),\n )\n }\n >\n Get All Layouts\n \n {\n const id = prompt('Enter id');\n const type = prompt('Enter type (s, m, l)');\n if (\n !id ||\n !type ||\n !gridRef.current ||\n (type !== 's' && type !== 'm' && type !== 'l')\n )\n return;\n gridRef.current?.api.addItem({\n id,\n type,\n });\n }}\n >\n + Add widget\n \n \n \n\n
\n \n console.debug('📦 Template Items changed:', items)\n }\n onLayoutChange={(layout, allAreas, meta) => {\n console.group('📐 Template Layout changed:');\n console.debug('Layout:', layout);\n console.debug('All areas:', allAreas);\n console.debug('Meta:', meta);\n if (meta.itemsOrderTyped) {\n console.debug('🔄 Items order changed, saving...');\n debouncedSave(meta.itemsOrderTyped);\n }\n console.groupEnd();\n }}\n onBreakpointChange={(breakpoint: string, layout: unknown) => {\n console.group('📱 Template Breakpoint changed:');\n console.debug('Breakpoint:', breakpoint);\n console.debug('Layout:', layout);\n console.groupEnd();\n }}\n isDraggable={drag}\n />\n
\n \n );\n }" }, { "exportName": "SelfResize", "displayName": "Самоизменение типа виджета (через onResize)", "type": "full-code", "code": "render() {\n const gridRef = useRef(null);\n const [items] = useState([\n { id: 'w1', type: 's' },\n { id: 'w2', type: 's' },\n { id: 'w3', type: 'm' },\n { id: 'w4', type: 's' },\n { id: 'w5', type: 's' },\n { id: 'w6', type: 's' },\n ]);\n\n const renderItem = useCallback(\n (\n item: GridDNDItemConfig,\n onRemove: () => void,\n onResize: (type: 's' | 'm' | 'l') => void,\n ) => (\n \n \n \n ),\n [],\n );\n\n return (\n
\n
\n Зажми карточку на 500мс — активируется D&D. Кнопки «→ S/M/L» внутри\n виджета вызывают onResize(type) (3-й аргумент\n render-prop, пре-каррирован к cfg.id). GridDND через\n api.setItemType меняет размер и делает reflow. Счётчик\n не сбрасывается — React-инстансы не размонтируются.\n
\n
\n console.debug('📦 items', next)}\n onLayoutChange={(layout, _all, meta) =>\n console.debug('📐 layout', layout, meta)\n }\n />\n
\n
\n );\n }" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { GridDND } from '@daisforge/ui';", "minimalUsage": "\n {/* части: GridDND.ItemWrapper */}\n", "examples": [ { "exportName": "DragDelay", "displayName": "Задержка активации D&D (dragActivationDelay)", "type": "full-code", "code": "render() {\n const gridRef = useRef(null);\n const [items] = useState([\n { id: 'w1', type: 'm' },\n { id: 'w2', type: 's' },\n { id: 'w3', type: 's' },\n { id: 'w4', type: 'm' },\n { id: 'w5', type: 's' },\n ]);\n\n const renderItem = useCallback(\n (item: GridDNDItemConfig, onRemove: () => void) => (\n \n }\n >\n {item.type === 's' && }\n {item.type === 'm' && }\n \n ),\n [],\n );\n\n return (\n
\n
\n Зажмите карточку на 500мс для активации перетаскивания. Обводка\n появится только у зажатой карточки.\n
\n
\n {\n console.debug('Layout changed:', layout, meta);\n }}\n />\n
\n
\n );\n }" }, { "exportName": "GridDNDClassic", "displayName": "GridDND Classic", "type": "full-code", "code": "import { GridDND } from '@daisforge/ui';\n\nrender() {\n const gridRef = useRef(null);\n const [items, setItems] = useState([]);\n const [width, setWidth] = useState(1660);\n const [drag, setDrag] = useState(true);\n const [loading, setLoading] = useState(true);\n const [smartCompact, setSmartCompact] = useState(true);\n const [compactType, setCompactType] = useState<\n 'vertical' | 'horizontal' | null\n >('horizontal');\n\n const renderItem = useCallback(\n (item: GridDNDItemConfig, onRemove: () => void) => (\n \n }\n >\n {item.type === 's' && }\n {item.type === 'm' && }\n {item.type === 'l' && }\n \n ),\n [],\n );\n\n const handleReorder = () => {\n const currentOrder = gridRef.current?.api.getOrder() || [];\n // Перевернуть порядок\n gridRef.current?.api.setOrder([...currentOrder].reverse());\n };\n\n const saveItems = useCallback(async (newItems: GridDNDItems[]) => {\n try {\n console.log('💾 Saving items to server:', newItems);\n await fetch(gridDndRoutes.ENDPOINTS.PUT_ITEMS, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ items: newItems }),\n });\n console.log('✅ Items saved successfully');\n } catch (error) {\n console.error('❌ Failed to save items:', error);\n }\n }, []);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const debouncedSave = useCallback(\n debounce((newItems: GridDNDItems[]) => {\n saveItems(newItems);\n }, 800),\n [saveItems],\n );\n\n // Загрузка initial items с сервера\n useEffect(() => {\n const fetchInitialItems = async () => {\n try {\n const response = await fetch(gridDndRoutes.ENDPOINTS.GET_ITEMS);\n const data = await response.json();\n setItems(data.items);\n } catch (error) {\n console.error('Failed to fetch items:', error);\n } finally {\n setLoading(false);\n }\n };\n\n fetchInitialItems();\n }, []);\n\n if (loading) {\n return
Loading...
;\n }\n\n return (\n
\n \n Width: {width}px\n setWidth(+e.target.value)}\n />\n setDrag(e.target.checked)}\n label=\"Activate DND\"\n checked={drag}\n />\n setSmartCompact(e.target.checked)}\n label=\"Activate Smart Compact\"\n checked={smartCompact}\n />\n \n setCompactType(e.target.checked ? 'vertical' : null)\n }\n label=\"Activate Compact Type Vertical\"\n checked={compactType === 'vertical'}\n />\n \n setCompactType(e.target.checked ? 'horizontal' : null)\n }\n label=\"Activate Compact Type Horizontal\"\n checked={compactType === 'horizontal'}\n />\n
\n \n {\n console.debug(gridRef.current?.api.getOrderDetailed());\n }}\n >\n Get Order Detail\n \n \n console.debug('Current layout:', gridRef.current?.api.getOrder())\n }\n >\n Get Order\n \n \n console.debug(\n 'Current template area:',\n gridRef.current?.api.getCurrentLayout(),\n )\n }\n >\n Get Current Layout\n \n \n console.debug(\n 'All template areas:',\n gridRef.current?.api.getAllLayouts(),\n )\n }\n >\n Get All Layouts\n \n {\n const id = prompt('Enter id');\n const type = prompt('Enter type (s, m, l)');\n if (\n !id ||\n !type ||\n !gridRef.current ||\n (type !== 's' && type !== 'm' && type !== 'l')\n )\n return;\n gridRef.current?.api.addItem({\n id,\n type,\n });\n }}\n >\n + Add widget\n \n \n \n\n
\n \n console.debug('📦 Template Items changed:', items)\n }\n onLayoutChange={(layout, allAreas, meta) => {\n console.group('📐 Template Layout changed:');\n console.debug('Layout:', layout);\n console.debug('All areas:', allAreas);\n console.debug('Meta:', meta);\n if (meta.itemsOrderTyped) {\n console.debug('🔄 Items order changed, saving...');\n debouncedSave(meta.itemsOrderTyped);\n }\n console.groupEnd();\n }}\n onBreakpointChange={(breakpoint: string, layout: unknown) => {\n console.group('📱 Template Breakpoint changed:');\n console.debug('Breakpoint:', breakpoint);\n console.debug('Layout:', layout);\n console.groupEnd();\n }}\n isDraggable={drag}\n />\n
\n \n );\n }" }, { "exportName": "SelfResize", "displayName": "Самоизменение типа виджета (через onResize)", "type": "full-code", "code": "render() {\n const gridRef = useRef(null);\n const [items] = useState([\n { id: 'w1', type: 's' },\n { id: 'w2', type: 's' },\n { id: 'w3', type: 'm' },\n { id: 'w4', type: 's' },\n { id: 'w5', type: 's' },\n { id: 'w6', type: 's' },\n ]);\n\n const renderItem = useCallback(\n (\n item: GridDNDItemConfig,\n onRemove: () => void,\n onResize: (type: 's' | 'm' | 'l') => void,\n ) => (\n \n \n \n ),\n [],\n );\n\n return (\n
\n
\n Зажми карточку на 500мс — активируется D&D. Кнопки «→ S/M/L» внутри\n виджета вызывают onResize(type) (3-й аргумент\n render-prop, пре-каррирован к cfg.id). GridDND через\n api.setItemType меняет размер и делает reflow. Счётчик\n не сбрасывается — React-инстансы не размонтируются.\n
\n
\n console.debug('📦 items', next)}\n onLayoutChange={(layout, _all, meta) =>\n console.debug('📐 layout', layout, meta)\n }\n />\n
\n
\n );\n }" }, { "exportName": "Usage1", "displayName": "Использование в GridDND.stories.tsx", "type": "usage", "code": "\n console.debug('📦 Template Items changed:', items)\n }\n onLayoutChange={(layout, allAreas, meta) => {\n console.group('📐 Template Layout changed:');\n console.debug('Layout:', layout);\n console.debug('All areas:', allAreas);\n console.debug('Meta:', meta);\n if (meta.itemsOrderTyped) {\n console.debug('🔄 Items order changed, saving...');\n debouncedSave(meta.itemsOrderTyped);\n }\n console.groupEnd();\n }}\n onBreakpointChange={(breakpoint: string, layout: unknown) => {\n console.group('📱 Template Breakpoint changed:');\n console.debug('Breakpoint:', breakpoint);\n console.debug('Layout:', layout);\n console.groupEnd();\n }}\n isDraggable={drag}\n />", "sourceFile": "packages/storybook/src/stories/GridDND/GridDND.stories.tsx" } ] }, "IconButton": { "name": "IconButton", "group": "components", "folderName": "IconButton", "role": "primary", "description": "Кнопка только с иконкой без текста, разных размеров и цветовых вариантов", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" } ], "propsTypeName": "IconButtonProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/IconButton/IconButton.d.ts", "type": "wrapper", "atomicBase": "IconButton", "category": "Локальные компоненты", "keywords": [ "icon-only button", "кнопка-иконка", "compact action button" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "additionalContent", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"outline\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentPlacing", "type": "ContentPlacing", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focused", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isLoading", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "loader", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "outlined", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftLeft", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftRight", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "square", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretch", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretching", "type": "Stretching", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"secondary\" | \"black\" | \"white\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { IconButton } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в AiChatDAIS.tsx", "type": "usage", "code": " send()}\n type=\"button\"\n disabled={isSending}\n >\n \n ", "sourceFile": "packages/storybook/src/stories/AiChatDAIS/AiChatDAIS.tsx" }, { "exportName": "Usage2", "displayName": "Использование в CopyCodeAbsoluteButton.tsx", "type": "usage", "code": " {\n (e.currentTarget as HTMLButtonElement).style.opacity = '1';\n }}\n onMouseLeave={(e) => {\n (e.currentTarget as HTMLButtonElement).style.opacity = '0.6';\n }}\n >\n {copied ? (\n \n ) : (\n \n )}\n ", "sourceFile": "packages/storybook/src/stories/AiChatDAIS/components/CopyCodeAbsoluteButton.tsx" }, { "exportName": "Vendor1", "displayName": "Использование Использование Компонент IconButton может содержать иконку, которая указывается напрямую через children .", "type": "vendor", "code": "import React from 'react';\nimport { IconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Границы кнопки", "type": "vendor", "code": "import React from 'react';\nimport { IconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n \n \n \n
\n );\n}" } ] }, "IconButtonDots": { "name": "IconButtonDots", "group": "components", "folderName": "IconButton", "role": "primary", "description": "Кнопка с троеточием, открывающая выпадающее меню действий (Dropdown)", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "dropdownProps", "type": "(Omit, \"view\" | \"size\"> & Pick & { items: ItemOption[]; trigger?: DropdownTrigger | undefined; placement?: DropdownPlacement | undefined; children?: React.ReactNode; variant?: \"normal\" | \"tight\" | undefined; zIndex?: Property.ZInd…", "required": false, "description": "" }, { "name": "iconOrientation", "type": "\"horizontal\" | \"vertical\" | undefined", "required": false, "description": "", "default": "'horizontal'" }, { "name": "iconSize", "type": "\"s\" | \"m\" | \"xs\" | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"auto\" | \"filled\" | \"fixed\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"accent\" | \"secondary\" | \"clear\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"black\" | \"white\" | \"gradient\" | undefined", "required": false, "description": "" } ], "propsTypeName": "IconButtonDotsProps", "sourceFile": "packages/ui-kit/src/components/IconButton/IconButtonDots.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "меню действий", "context menu button", "dropdown trigger" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { IconButtonDots } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "IconButtonFilter": { "name": "IconButtonFilter", "group": "components", "folderName": "IconButton", "role": "primary", "description": "Кнопка-иконка фильтра с индикатором активности и выпадающим меню фильтров", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "dropdownProps", "type": "(Omit, \"view\" | \"size\"> & Pick & { items: ItemOption[]; trigger?: DropdownTrigger | undefined; placement?: DropdownPlacement | undefined; children?: React.ReactNode; variant?: \"normal\" | \"tight\" | undefined; zIndex?: Property.ZInd…", "required": false, "description": "" }, { "name": "iconSize", "type": "\"s\" | \"m\" | \"xs\" | undefined", "required": false, "description": "" }, { "name": "redSquare", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"auto\" | \"filled\" | \"fixed\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"accent\" | \"secondary\" | \"clear\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"black\" | \"white\" | \"gradient\" | undefined", "required": false, "description": "" } ], "propsTypeName": "IconButtonFilterProps", "sourceFile": "packages/ui-kit/src/components/IconButton/IconButtonFilter/IconButtonFilter.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "filter button", "кнопка фильтра", "индикатор активных фильтров" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { IconButtonFilter } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "IconSvgSprite": { "name": "IconSvgSprite", "group": "components", "folderName": "IconSvgSprite", "role": "primary", "description": "Иконка из SVG-спрайта по URL с поддержкой размеров xs/s/m", "props": [ { "name": "iconUrl", "type": "string", "required": true, "description": "" }, { "name": "size", "type": "\"s\" | \"m\" | \"xs\" | undefined", "required": false, "description": "", "default": "'s'" } ], "propsTypeName": "IconSvgSpriteProps", "sourceFile": "packages/ui-kit/src/components/IconSvgSprite/IconSvgSprite.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "иконка из спрайта", "svg sprite icon", "кастомная иконка" ], "docs": "# IconSvgSprite\n\n### Компонент для отрисовки SVG спрайтов\n\n---\n\n#### Использование\n\nВ `iconUrl` передается url `https://cdn.dddd.ru/FileWithSprites.svg` на файл содержащий спрайты иконок и ссылка на необходимую иконку `#IconId`.\nИспользуется в finai-admin, finai-header, finai-platform.\nДля этих микрофронтов url к картинке приходит в формате `/pl/static-res/finai_icons/sprite-{size}-1.svg#IconAvatar-{size}`,\nв которых плейсхолдер `{size}` в компоненте заменяется пропсом `size`. При отсутствии плейсхолдеров будет использоваться исходный url к спрайту.\n\n```jsx\n\n;\n```\n\n### Пропсы\n\n```js\ntype Props = {\n // url иконки\n iconUrl: string,\n // размер иконки, default = 's'\n size?: 'xs' | 's' | 'm',\n // цвет иконки\n color?: string,\n // css класс\n className?: string\n};\n```\n\n### Механизм работы SVG спрайтов\n\nДокументация [\\](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol) [\\](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use)\n\n - `` - определяем иконку внутри тэга `symbol`, атрибут `id` используется в качестве ссылки на иконку\n\n```svg\n\n \n \n \n \n \n \n\n```\n\n - Используем иконку с помощью тэга ``\n\n```svg\n\n \n\n\n```", "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { IconSvgSprite } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "Image": { "name": "Image", "group": "components", "folderName": "Image", "role": "primary", "description": "Изображение с управлением соотношением сторон и ленивой загрузкой", "props": [ { "name": "decoding", "type": "\"auto\" | \"async\" | \"sync\" | undefined", "required": false, "description": "" }, { "name": "fetchPriority", "type": "\"auto\" | \"high\" | \"low\" | undefined", "required": false, "description": "" }, { "name": "loading", "type": "\"eager\" | \"lazy\" | undefined", "required": false, "description": "" }, { "name": "referrerPolicy", "type": "React.HTMLAttributeReferrerPolicy | undefined", "required": false, "description": "" } ], "propsTypeName": "ImageProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Image/Image.d.ts", "type": "wrapper", "atomicBase": "Image", "category": "Локальные компоненты", "keywords": [ "картинка", "aspect ratio", "lazy loading", "изображение с рамкой" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "base", "type": "\"img\" | \"div\"", "required": false, "inheritedFrom": "Image", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customRatio", "type": "string", "required": false, "inheritedFrom": "Image", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "ratio", "type": "\"1 / 1\" | \"1/1\" | \"3 / 4\" | \"3/4\" | \"4 / 3\" | \"4/3\" | \"9 / 16\" | \"9/16\" | \"16 / 9\" | \"16/9\" | \"1 / 2\" | \"1/2\" | \"2 / 1\" | \"2/1\"", "required": false, "inheritedFrom": "Image", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Image } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor", "displayName": "Example 1", "type": "vendor", "code": "import React from 'react';\nimport { Image } from '@daisforge/ui';\nexport function App() {\n return (\n \n );\n}" } ] }, "Indicator": { "name": "Indicator", "group": "components", "folderName": "Indicator", "role": "primary", "description": "Маленький цветной индикатор статуса разных размеров и цветов", "props": [], "propsTypeName": "IndicatorProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Indicator/Indicator.d.ts", "type": "wrapper", "atomicBase": "Indicator", "category": "Локальные компоненты", "keywords": [ "индикатор статуса", "status dot", "точка-бейдж" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "size", "type": "\"s\" | \"l\" | \"m\"", "required": true, "description": "Размер индикатора", "default": "m", "inheritedFrom": "Indicator", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"inactive\" | \"black\" | \"white\"", "required": true, "description": "Вид индикатора", "default": "default", "inheritedFrom": "Indicator", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Indicator } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor", "displayName": "Базовое использование", "type": "vendor", "code": "import React from 'react';\nimport { Indicator } from '@daisforge/ui';\nexport function App() {\n return (\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n );\n}" } ] }, "InformationWrapper": { "name": "InformationWrapper", "group": "components", "folderName": "InformationWrapper", "role": "primary", "description": "Обёртка для поля формы: лейбл, подсказка, признак обязательности", "props": [], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/InformationWrapper/InformationWrapper.d.ts", "type": "wrapper", "atomicBase": "InformationWrapper", "category": "Локальные компоненты", "keywords": [ "лейбл поля", "field label wrapper", "подсказка к полю", "обязательное поле" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOpened", "type": "boolean", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelHtmlFor", "type": "string", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "\"top\" | \"left\"", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftHelper", "type": "ReactNode", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optional", "type": "boolean", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optionalText", "type": "string", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredIndicatorPlacement", "type": "\"right\" | \"left\"", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "rightHelper", "type": "ReactNode", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleCaption", "type": "ReactNode", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\"", "required": false, "inheritedFrom": "InformationWrapper", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { InformationWrapper } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Размер компонента", "type": "vendor", "code": "import React from 'react';\nimport { InformationWrapper } from '@daisforge/ui';\nexport function App() {\n const commonProps = {\n label: 'Лейбл',\n titleCaption: 'Подпись к полю',\n leftHelper: 'Подсказка слева',\n rightHelper: 'Подсказка справа',\n hintText: 'Текст тултипа',\n };\n const SvgPlaceholder = () => {\n return (\n \n );\n };\n return (\n
\n \n \n \n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Положение label", "type": "vendor", "code": "import React from 'react';\nimport { InformationWrapper } from '@daisforge/ui';\nexport function App() {\n const commonProps = {\n label: 'Лейбл',\n titleCaption: 'Подпись к полю',\n leftHelper: 'Подсказка слева',\n rightHelper: 'Подсказка справа',\n hintText: 'Текст тултипа',\n };\n const SvgPlaceholder = () => {\n return (\n \n );\n };\n return (\n
\n \n \n \n \n \n \n
\n );\n}" } ] }, "LeftPanel": { "name": "LeftPanel", "group": "components", "folderName": "LeftPanel", "role": "primary", "description": "Сворачиваемая и растягиваемая боковая панель навигации с ресайзом", "props": [ { "name": "collapsedContent", "type": "LeftPanelAdaptiveSlot", "required": false, "description": "Кастомный класс для Content body элемента в закрытом состоянии\nМожно передать ReactNode или callback с размерами для адаптива." }, { "name": "collapsedContentProps", "type": "PanelCollapsedContentProps | undefined", "required": false, "description": "Свойства для content закрытой панели" }, { "name": "collapsedFooterContent", "type": "LeftPanelAdaptiveSlot", "required": false, "description": "Кастомный класс для Content footer элемента в закрытом состоянии\nМожно передать ReactNode или callback с размерами для адаптива." }, { "name": "collapseState", "type": "[boolean, React.Dispatch>] | undefined", "required": false, "description": "Состояние открытости или закрытости панели" }, { "name": "containerProps", "type": "({ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: DefaultTheme | undefined; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }) | undefined", "required": false, "description": "Свойства для container элемента" }, { "name": "contentProps", "type": "Omit<{ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: DefaultTheme | undefined; } & { as?: string | React.ComponentType | undefined; forwardedAs?: string | React.ComponentType | undefined; }, \"$active\"> | undefined", "required": false, "description": "Свойства для content открытой панели" }, { "name": "expandedContent", "type": "LeftPanelAdaptiveSlot", "required": false, "description": "Кастомный класс для Content body элемента в открытом состоянии\nМожно передать ReactNode или callback с размерами для адаптива." }, { "name": "maxWidth", "type": "number | undefined", "required": false, "description": "Максимальная ширина", "default": "MAX_WIDTH" }, { "name": "minWidth", "type": "number | undefined", "required": false, "description": "Минимальная ширина", "default": "72, на viewport <= 1280px — 56" }, { "name": "onResize", "type": "((width: number) => void) | undefined", "required": false, "description": "Callback, который срабатывает при изменении ширины (только когда панель раскрыта)" }, { "name": "onToggleCollapse", "type": "((next: boolean) => void) | undefined", "required": false, "description": "Callback, который срабатывает в моменте изменения" }, { "name": "showResizeable", "type": "boolean | undefined", "required": false, "description": "Скрытие сепаратора у resize", "default": "true" }, { "name": "showToggleButton", "type": "boolean | undefined", "required": false, "description": "Скрытие кнопки открытия/закрытия панели", "default": "true" }, { "name": "widthState", "type": "[number | undefined, React.Dispatch>] | undefined", "required": false, "description": "Состояние ширины панели панели" }, { "name": "disableMediaAdaptive", "type": "boolean | undefined", "required": false, "description": "Отключает принудительный адаптив компонента на viewport <= 1280px.", "deprecated": true, "default": "false" } ], "propsTypeName": "LeftPanelProps", "compoundParts": [ { "name": "LeftPanelToggleButton", "typeName": "LeftPanelToggleButtonProps", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "collapsed", "type": "boolean | undefined", "required": false, "description": "", "default": "false" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isAbsolute", "type": "boolean | undefined", "required": false, "description": "", "default": "false" }, { "name": "isAdaptive1280", "type": "boolean | undefined", "required": false, "description": "", "default": "false" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "onClick", "type": "(React.MouseEventHandler & (() => void)) | undefined", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"auto\" | \"fixed\" | \"filled\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"black\" | \"white\" | \"accent\" | \"secondary\" | \"clear\" | \"dark\" | \"gradient\" | undefined", "required": false, "description": "" } ] } ], "sourceFile": "packages/ui-kit/src/components/LeftPanel/LeftPanel.tsx", "type": "composition", "category": "Композиции", "keywords": [ "боковая панель", "sidebar", "сворачиваемое меню", "ресайз панели" ], "docs": "# LeftPanel\n\nВыдвижная левая панель с анимацией открытия/закрытия и поддержкой ресайза.\n\n## Ключевые особенности\n\n- Анимация сворачивания/разворачивания\n- Ресайз через разделитель (`showResizeable`)\n- Кнопка сворачивания (`showToggleButton`)\n- Раздельный контент для развёрнутого и свёрнутого состояний\n- Управляемые состояния ширины и свёрнутости через пары из `useState`\n- Настраиваемые min/max ширина\n\n## Особенности\n\n- Для управления состоянием передайте `collapseState` и `widthState` — пары `[value, setter]` из `useState`\n- `expandedContent` отображается в развёрнутом состоянии, `collapsedContent` — в свёрнутом\n- `collapsedFooterContent` — дополнительный футер для свёрнутого состояния\n- Слоты `expandedContent`, `collapsedContent` и `collapsedFooterContent` принимают `ReactNode` или callback с размерами для адаптива\n- По умолчанию адаптив на viewport `<= 1280px` включен; временно отключить его можно через deprecated-проп `disableMediaAdaptive`\n\n## Использование адаптивных слотов\n\nЕсли слот не должен менять размеры, передавайте обычный `ReactNode`:\n\n```tsx\n}\n collapsedContent={}\n/>\n```\n\nЕсли внутри слота есть Button, IconButton, TextFieldSearch или Segment, которые должны уменьшаться на 1280px, передавайте callback и используйте `buttonSize` из аргумента:\n\n```tsx\n (\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n )}\n collapsedContent={({ buttonSize }) => (\n \n )}\n/>\n```\n\nРазмер, который приходит в callback:\n\n```\nbuttonSize\n| viewport <= 1280px | viewport > 1280px |\n| xs | s |\n```\n\nДефолтная ширина свёрнутой панели:\n\n```\ncollapsed width\n| viewport <= 1280px | viewport > 1280px |\n| 56px | 72px |\n```\n\nОписание типов — в разделе [API](/docs/композиции-leftpanel-api--docs).", "apiDocs": "# LeftPanel API\n\n## LeftPanelProps\n\n```typescript\ntype LeftPanelProps = {\n /**\n * Минимальная ширина\n * @default 72, на viewport <= 1280px — 56\n */\n minWidth?: number;\n /**\n * Максимальная ширина\n */\n maxWidth?: number;\n /**\n * Отключает принудительный адаптив компонента на viewport <= 1280px.\n *\n * @deprecated Используйте только в крайних случаях, когда команда временно не готова адаптировать вёрстку под 1280px.\n *\n * @remarks\n * При `true` компонент использует desktop-размеры для слотов, кнопки сворачивания и свёрнутой панели, если `minWidth` не передан.\n * Поведение сохраняется даже на viewport <= 1280px.\n * Это временный escape hatch, не основной сценарий использования.\n *\n * @default false\n */\n disableMediaAdaptive?: boolean;\n /**\n * Состояние открытости или закрытости панели\n */\n collapseState?: [boolean, React.Dispatch>];\n /**\n * Состояние ширины панели панели\n */\n widthState?: [\n number | undefined,\n React.Dispatch>,\n ];\n /**\n * Свойства для container элемента\n */\n containerProps?: ComponentProps;\n /**\n * Свойства для content открытой панели\n */\n contentProps?: Omit, '$active'>;\n /**\n * Свойства для content закрытой панели\n */\n collapsedContentProps?: PanelCollapsedContentProps;\n /**\n * Скрытие кнопки открытия/закрытия панели\n */\n showToggleButton?: boolean;\n /**\n * Скрытие сепаратора у resize\n */\n showResizeable?: boolean;\n /**\n * Кастомный класс для Content body элемента в открытом состоянии\n * Можно передать ReactNode или callback с размерами для адаптива.\n */\n expandedContent?: LeftPanelAdaptiveSlot;\n /**\n * Кастомный класс для Content body элемента в закрытом состоянии\n * Можно передать ReactNode или callback с размерами для адаптива.\n */\n collapsedContent?: LeftPanelAdaptiveSlot;\n /**\n * Кастомный класс для Content footer элемента в закрытом состоянии\n * Можно передать ReactNode или callback с размерами для адаптива.\n */\n collapsedFooterContent?: LeftPanelAdaptiveSlot;\n /**\n * Callback, который срабатывает при изменении ширины (только когда панель раскрыта)\n */\n onResize?: (width: number) => void;\n /**\n * Callback, который срабатывает в моменте изменения\n */\n onToggleCollapse?: (next: boolean) => void;\n};\n\ntype ToggleButtonBaseProps = ComponentProps;\n\nexport type ToggleButtonProps = ToggleButtonBaseProps & {\n collapsed?: boolean;\n isAbsolute?: boolean;\n isAdaptive1280?: boolean;\n onClick?: () => void;\n};\n\nexport type HookResizeProps = {\n setWidth: React.Dispatch>;\n isResizingRef: React.MutableRefObject;\n setIsResizing: React.Dispatch>;\n panelRef: RefObject;\n minWidth: number;\n maxWidth: number;\n parentRef: RefObject;\n isCollapsed: boolean;\n onResize?: (width: number) => void;\n};\n```\n\n## LeftPanelSlotSizesProps\n\n```typescript\ntype LeftPanelSlotSizesProps = {\n /**\n * Размер кнопок, поиска и сегментов в кастомных слотах\n */\n buttonSize: 's' | 'xs';\n};\n```\n\n## LeftPanelAdaptiveSlot\n\n```typescript\ntype LeftPanelAdaptiveSlot =\n | ReactNode\n | ((props: LeftPanelSlotSizesProps) => ReactNode);\n```", "curatedStories": [ { "exportName": "LeftPanelSlots", "displayName": "LeftPanel со слотами", "type": "full-code", "code": "import { useState } from 'react';\n import {\n IconGroupOutline,\n } from '@daisforge/ui/icons';\n import {\n Box,\n Button,\n H2,\n IconButton,\n LeftPanel,\n Widget,\n } from '@daisforge/ui';\n import type { LeftPanelSlotSizesProps } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => {\n // Состояние отвечает за открытие/закрытие панели\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [width, setWidth] = useState(360);\n\n // Вызывается при переключении панели\n const handleToggle = (next: boolean) => {\n setIsCollapsed(next);\n if (next) {\n setWidth(undefined);\n } else {\n setWidth(360);\n }\n };\n\n // Вызывается для получения изменений ширины\n const handleResize = (width: number) => {\n setWidth(width);\n };\n\n return (\n \n \n {/* Заголовок виджета */}\n \n Widget.Header bottomBlock\n \n }\n />\n {/* Основной контент со скроллом */}\n \n \n Widget.Content\n \n \n {/* Нижняя часть виджета */}\n \n \n Widget.Footer\n \n \n \n }\n // Контент в свернутом состоянии\n collapsedContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n <>\n \n \n \n \n \n \n \n \n \n \n )}\n // Нижняя часть в свернутом состоянии\n collapsedFooterContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n \n \n \n )}\n />\n \n \n

Контент

\n {/* Кнопка управления панелью */}\n \n {width &&

{width}px

}\n \n \n \n \n \n );\n }" }, { "exportName": "LeftPanelExample", "displayName": "Example", "type": "full-code", "code": "import { useState } from 'react';\n import {\n IconHierarchy,\n IconSearch,\n } from '@daisforge/ui/icons';\n import {\n Box,\n Button,\n Dropdown,\n H2,\n IconButton,\n LeftPanel,\n LeftPanelProps,\n List,\n ListItem,\n SegmentGroup,\n SegmentItem,\n SegmentProvider,\n TextFieldSearch,\n Widget,\n } from '@daisforge/ui';\n import type { LeftPanelSlotSizesProps } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n import styled from 'styled-components';\n\n() => {\n // Данные для кнопок\n const items = [\n {\n label: 'label',\n value: 'label1',\n },\n {\n label: 'label',\n value: 'label2',\n },\n ];\n\n // Данные для списка\n const contentItems = [\n {\n label: 'Основной план',\n value: 'label1',\n },\n {\n label: 'План блока',\n value: 'label2',\n },\n {\n label: 'Персональный план',\n value: 'label3',\n },\n {\n label: 'Журнал публикаций',\n value: 'label4',\n },\n ];\n\n // Состояние отвечает за открытие/закрытие панели\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [width, setWidth] = useState(360);\n\n // Реф для поля поиска\n const searchRef = useRef(null);\n\n // Вызывается при переключении панели\n const handleToggle = (next: boolean) => {\n setIsCollapsed(next);\n if (next) {\n setWidth(undefined);\n } else {\n setWidth(360);\n }\n };\n\n // Открывает панель и фокусирует поле поиска\n const handleSearchClick = () => {\n handleToggle(false);\n\n requestAnimationFrame(() => {\n searchRef.current?.focus();\n });\n };\n\n return (\n \n (\n \n description}\n bottomBlock={\n <>\n {/* Группа переключателей */}\n \n \n {items.map((_, i) => (\n \n ))}\n \n \n\n \n {/* Поле поиска и кнопки */}\n \n \n \n \n \n \n \n \n \n }\n />\n {/* Основной список */}\n \n \n {contentItems.map((_, index) => (\n \n \n \n Текст\n \n \n \n \n \n \n \n \n Aaa +{' '}\n {index % 2 === 0\n ? 'aaaaa aaaaaaaaa aaaaaaa aaaaaaaaa'.repeat(\n // eslint-disable-next-line prettier/prettier\n 10,\n )\n : ''}\n \n \n \n \n \n \n ))}\n \n \n {/* Нижняя часть виджета */}\n \n \n \n \n )}\n // Slot для контента закрытой панели\n collapsedContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n // Slot для ниженй части закрытой панели\n collapsedFooterContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n \n \n \n )}\n />\n \n \n

Контент

\n {/* Кнопка управления панелью */}\n \n \n \n \n );\n }" } ], "hasCuratedMeta": true, "relatedExports": [ "LeftPanelToggleButton" ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { LeftPanel } from '@daisforge/ui';", "minimalUsage": "\n {/* части: LeftPanel.LeftPanelToggleButton */}\n", "examples": [ { "exportName": "LeftPanelSlots", "displayName": "LeftPanel со слотами", "type": "full-code", "code": "import { useState } from 'react';\n import {\n IconGroupOutline,\n } from '@daisforge/ui/icons';\n import {\n Box,\n Button,\n H2,\n IconButton,\n LeftPanel,\n Widget,\n } from '@daisforge/ui';\n import type { LeftPanelSlotSizesProps } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n\n() => {\n // Состояние отвечает за открытие/закрытие панели\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [width, setWidth] = useState(360);\n\n // Вызывается при переключении панели\n const handleToggle = (next: boolean) => {\n setIsCollapsed(next);\n if (next) {\n setWidth(undefined);\n } else {\n setWidth(360);\n }\n };\n\n // Вызывается для получения изменений ширины\n const handleResize = (width: number) => {\n setWidth(width);\n };\n\n return (\n \n \n {/* Заголовок виджета */}\n \n Widget.Header bottomBlock\n \n }\n />\n {/* Основной контент со скроллом */}\n \n \n Widget.Content\n \n \n {/* Нижняя часть виджета */}\n \n \n Widget.Footer\n \n \n \n }\n // Контент в свернутом состоянии\n collapsedContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n <>\n \n \n \n \n \n \n \n \n \n \n )}\n // Нижняя часть в свернутом состоянии\n collapsedFooterContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n \n \n \n )}\n />\n \n \n

Контент

\n {/* Кнопка управления панелью */}\n \n {width &&

{width}px

}\n \n \n \n \n \n );\n }" }, { "exportName": "LeftPanelExample", "displayName": "Example", "type": "full-code", "code": "import { useState } from 'react';\n import {\n IconHierarchy,\n IconSearch,\n } from '@daisforge/ui/icons';\n import {\n Box,\n Button,\n Dropdown,\n H2,\n IconButton,\n LeftPanel,\n LeftPanelProps,\n List,\n ListItem,\n SegmentGroup,\n SegmentItem,\n SegmentProvider,\n TextFieldSearch,\n Widget,\n } from '@daisforge/ui';\n import type { LeftPanelSlotSizesProps } from '@daisforge/ui';\n import { br, s } from '@daisforge/ui/constants';\n import styled from 'styled-components';\n\n() => {\n // Данные для кнопок\n const items = [\n {\n label: 'label',\n value: 'label1',\n },\n {\n label: 'label',\n value: 'label2',\n },\n ];\n\n // Данные для списка\n const contentItems = [\n {\n label: 'Основной план',\n value: 'label1',\n },\n {\n label: 'План блока',\n value: 'label2',\n },\n {\n label: 'Персональный план',\n value: 'label3',\n },\n {\n label: 'Журнал публикаций',\n value: 'label4',\n },\n ];\n\n // Состояние отвечает за открытие/закрытие панели\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [width, setWidth] = useState(360);\n\n // Реф для поля поиска\n const searchRef = useRef(null);\n\n // Вызывается при переключении панели\n const handleToggle = (next: boolean) => {\n setIsCollapsed(next);\n if (next) {\n setWidth(undefined);\n } else {\n setWidth(360);\n }\n };\n\n // Открывает панель и фокусирует поле поиска\n const handleSearchClick = () => {\n handleToggle(false);\n\n requestAnimationFrame(() => {\n searchRef.current?.focus();\n });\n };\n\n return (\n \n (\n \n description}\n bottomBlock={\n <>\n {/* Группа переключателей */}\n \n \n {items.map((_, i) => (\n \n ))}\n \n \n\n \n {/* Поле поиска и кнопки */}\n \n \n \n \n \n \n \n \n \n }\n />\n {/* Основной список */}\n \n \n {contentItems.map((_, index) => (\n \n \n \n Текст\n \n \n \n \n \n \n \n \n Aaa +{' '}\n {index % 2 === 0\n ? 'aaaaa aaaaaaaaa aaaaaaa aaaaaaaaa'.repeat(\n // eslint-disable-next-line prettier/prettier\n 10,\n )\n : ''}\n \n \n \n \n \n \n ))}\n \n \n {/* Нижняя часть виджета */}\n \n \n \n \n )}\n // Slot для контента закрытой панели\n collapsedContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n // Slot для ниженй части закрытой панели\n collapsedFooterContent={({ buttonSize }: LeftPanelSlotSizesProps) => (\n \n \n// … (обрезано)" }, { "exportName": "Usage1", "displayName": "Использование в LeftPanel.stories.tsx", "type": "usage", "code": "\n {/* Заголовок виджета */}\n \n Widget.Header bottomBlock\n \n }\n />\n {/* Основной контент со скроллом */}\n \n \n Widget.Content\n \n \n {/* Нижняя часть виджета */}\n \n \n Widget.Footer\n \n \n \n }\n // Контент в свернутом состоянии\n col\n// … (обрезано)", "sourceFile": "packages/storybook/src/stories/LeftPanel/LeftPanel.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PageLayout.stories.tsx", "type": "usage", "code": "}\n collapsedContent={}\n collapsedFooterContent={\n \n \n \n }\n />", "sourceFile": "packages/storybook/src/stories/PageLayout/PageLayout.stories.tsx" } ] }, "LeftPanelToggleButton": { "name": "LeftPanelToggleButton", "group": "components", "folderName": "LeftPanel", "role": "part", "description": "Кнопка сворачивания и разворачивания бокового меню LeftPanel", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "collapsed", "type": "boolean | undefined", "required": false, "description": "", "default": "false" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isAbsolute", "type": "boolean | undefined", "required": false, "description": "", "default": "false" }, { "name": "isAdaptive1280", "type": "boolean | undefined", "required": false, "description": "", "default": "false" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "onClick", "type": "(React.MouseEventHandler & (() => void)) | undefined", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"auto\" | \"fixed\" | \"filled\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"black\" | \"white\" | \"accent\" | \"secondary\" | \"clear\" | \"dark\" | \"gradient\" | undefined", "required": false, "description": "" } ], "propsTypeName": "LeftPanelToggleButtonProps", "sourceFile": "packages/ui-kit/src/components/LeftPanel/components/LeftPanelToggleButton.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "свернуть меню", "collapse sidebar", "кнопка сворачивания" ], "hasCuratedMeta": true, "parentComponent": "LeftPanel", "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { LeftPanelToggleButton } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "Link": { "name": "Link", "group": "components", "folderName": "Link", "role": "primary", "description": "Гиперссылка с вариантами подчёркивания, размеров и состояний", "props": [ { "name": "focused", "type": "boolean | undefined", "required": false, "description": "Компонент может фокусироваться." }, { "name": "ping", "type": "string | undefined", "required": false, "description": "" }, { "name": "referrerPolicy", "type": "React.HTMLAttributeReferrerPolicy | undefined", "required": false, "description": "" }, { "name": "target", "type": "React.HTMLAttributeAnchorTarget | undefined", "required": false, "description": "" } ], "propsTypeName": "LinkProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Link/Link.d.ts", "type": "wrapper", "atomicBase": "Link", "category": "Локальные компоненты", "keywords": [ "ссылка", "hyperlink", "переход по ссылке" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "size", "type": "string", "required": false, "description": "Размер компонента.", "inheritedFrom": "Link", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "underline", "type": "\"none\" | \"hover\" | \"always\"", "required": false, "description": "Режим подчёркивания ссылки:\n- `none` — без подчёркивания\n- `hover` — подчёркивание при наведении\n- `always` — всегда подчёркнута", "default": "'none'", "inheritedFrom": "Link", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"tertiary\" | \"paragraph\"", "required": false, "description": "Вид компонента.", "inheritedFrom": "Link", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Link", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Link } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в MDComponents.tsx", "type": "usage", "code": "\n {children}\n ", "sourceFile": "packages/storybook/src/stories/AiChatDAIS/components/MDComponents.tsx" }, { "exportName": "Usage2", "displayName": "Использование в ModalDF.stories.tsx", "type": "usage", "code": "\n ссылка\n ", "sourceFile": "packages/storybook/src/stories/ModalDF/ModalDF.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Использование Использование", "type": "vendor", "code": "import React from 'react';\nimport { TextS, Link } from '@daisforge/ui';\nexport function App() {\n return (\n \n Скачайте приложение.\n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Подчёркивание Подчёркивание Prop underline управляет режимом подчёркивания ссылки", "type": "vendor", "code": "import React from 'react';\nimport { TextS, Link } from '@daisforge/ui';\nexport function App() {\n return (\n
\n Без подчёркивания\n Подчёркивание при наведении\n Всегда подчёркнута\n
\n );\n}" } ] }, "LinkButton": { "name": "LinkButton", "group": "components", "folderName": "LinkButton", "role": "primary", "description": "Кнопка в виде ссылки для второстепенных действий с иконкой и текстом", "props": [ { "name": "ping", "type": "string | undefined", "required": false, "description": "" }, { "name": "referrerPolicy", "type": "React.HTMLAttributeReferrerPolicy | undefined", "required": false, "description": "" }, { "name": "target", "type": "React.HTMLAttributeAnchorTarget | undefined", "required": false, "description": "" } ], "propsTypeName": "LinkButtonCompProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/LinkButton/LinkButton.d.ts", "type": "wrapper", "atomicBase": "LinkButton", "category": "Локальные компоненты", "keywords": [ "кнопка-ссылка", "второстепенное действие", "text button" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "additionalContent", "type": "ReactNode", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isLoading", "type": "boolean", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "loader", "type": "ReactNode", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\"", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"info\"", "required": false, "inheritedFrom": "LinkButton", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { LinkButton } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в Table.tsx", "type": "usage", "code": "}\n view=\"secondary\"\n onClick={() => alert('Вид по умолчанию')}\n size=\"xs\"\n >\n Вид по умолчанию\n ", "sourceFile": "packages/vite-project/src/pages/Table.tsx" }, { "exportName": "Usage2", "displayName": "Использование в Table.multipleFeatures.stories.tsx", "type": "usage", "code": "}\n view=\"secondary\"\n onClick={() => alert('Вид по умолчанию')}\n size=\"xs\"\n >\n Вид по умолчанию\n ", "sourceFile": "packages/storybook/src/stories/Table/Table.multipleFeatures.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Размер кнопки", "type": "vendor", "code": "import React from 'react';\nimport { LinkButton } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Использование Использование Компонент LinkButton может содержать текст, который указывается в", "type": "vendor", "code": "import React from 'react';\nimport { LinkButton } from '@daisforge/ui';\nimport { IconDownload } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n } />\n } />\n \n Loader...
} />\n \n );\n}" } ] }, "List": { "name": "List", "group": "components", "folderName": "List", "role": "primary", "description": "Список элементов с фоном, разделителями и вариантами отображения", "props": [], "propsTypeName": "ListProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/List/List.d.ts", "type": "wrapper", "atomicBase": "List", "category": "Локальные компоненты", "keywords": [ "список", "перечень элементов", "list view" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "hasBackground", "type": "boolean", "required": false, "description": "Добавляет фон контейнеру списка", "inheritedFrom": "List", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasDivider", "type": "boolean", "required": false, "description": "Добавляет разделители между элементами списка", "inheritedFrom": "List", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasItemBackground", "type": "boolean", "required": false, "description": "Добавляет фон каждому элементу списка", "inheritedFrom": "List", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"l\" | \"m\" | \"xs\"", "required": false, "description": "Размер", "inheritedFrom": "List", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "variant", "type": "\"normal\" | \"tight\"", "required": false, "description": "Вариант List", "inheritedFrom": "List", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "description": "Тип отображения для accordion", "inheritedFrom": "List", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "List", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { List } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в LeftPanel.stories.tsx", "type": "usage", "code": "\n \n Aaa +{' '}\n {index % 2 === 0\n ? 'aaaaa aaaaaaaaa aaaaaaa aaaaaaaaa'.repeat(\n // eslint-disable-next-line prettier/prettier\n 10,\n )\n : ''}\n \n ", "sourceFile": "packages/storybook/src/stories/LeftPanel/LeftPanel.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PageLayout.stories.tsx", "type": "usage", "code": "\n {navItems.map((item) => (\n {item.label}\n ))}\n ", "sourceFile": "packages/storybook/src/stories/PageLayout/PageLayout.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Базовое использование", "type": "vendor", "code": "import React from 'react';\nimport { List, ListItem } from '@daisforge/ui';\nimport { IconChevronRight } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n }>Test Item 1\n }>Test Item 2\n }>\n Test Item 3\n \n }>Test Item 4\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Разделители между элементами", "type": "vendor", "code": "import React from 'react';\nimport { List, ListItem } from '@daisforge/ui';\nimport { IconChevronRight } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n }>Test Item 1\n }>Test Item 2\n }>\n Test Item 3\n \n }>Test Item 4\n \n
\n );\n}" } ] }, "ListItem": { "name": "ListItem", "group": "components", "folderName": "List", "role": "primary", "description": "Элемент списка с иконками или контентом слева и справа", "props": [ { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/List/ui/ListItem.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "пункт списка", "строка списка", "list row" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { ListItem } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в LeftPanelBlock.tsx", "type": "usage", "code": "\n {item.label}\n ", "sourceFile": "packages/storybook/src/stories/BlockTitle/components/LeftPanelBlock.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PageLayout.stories.tsx", "type": "usage", "code": "{item.label}", "sourceFile": "packages/storybook/src/stories/PageLayout/PageLayout.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Базовое использование", "type": "vendor", "code": "import React from 'react';\nimport { List, ListItem } from '@daisforge/ui';\nimport { IconChevronRight } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n }>Test Item 1\n }>Test Item 2\n }>\n Test Item 3\n \n }>Test Item 4\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Разделители между элементами", "type": "vendor", "code": "import React from 'react';\nimport { List, ListItem } from '@daisforge/ui';\nimport { IconChevronRight } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n }>Test Item 1\n }>Test Item 2\n }>\n Test Item 3\n \n }>Test Item 4\n \n
\n );\n}" } ] }, "ListOfFilters": { "name": "ListOfFilters", "group": "components", "folderName": "ListOfFilters", "role": "primary", "description": "Панель применённых фильтров в виде чипов с сворачиванием и сбросом", "props": [ { "name": "clearAll", "type": "() => void", "required": true, "description": "" }, { "name": "items", "type": "ItemOrGroup[]", "required": true, "description": "" }, { "name": "opened", "type": "boolean", "required": true, "description": "" }, { "name": "ellipsisLabel", "type": "boolean | undefined", "required": false, "description": "Обрезает название группы фильтров в одну строку с троеточием.", "default": "false" }, { "name": "showResetAllFiltersButton", "type": "boolean | undefined", "required": false, "description": "Показывать ли кнопку \"Сбросить все\" в блоке примененных фильтров", "default": "true" }, { "name": "chipStyle", "type": "((itemOrGroup: ItemOrGroup, item: Item | undefined) => CSSObject) | undefined", "required": false, "description": "" }, { "name": "extraCss", "type": "React.CSSProperties | undefined", "required": false, "description": "" }, { "name": "leftSlot", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "maxHeight", "type": "number | undefined", "required": false, "description": "" }, { "name": "maxLengthInGroup", "type": "number | undefined", "required": false, "description": "", "default": "maxLengthInGroup=2" }, { "name": "paddingInline", "type": "number | undefined", "required": false, "description": "" }, { "name": "paddingTop", "type": "number | undefined", "required": false, "description": "" }, { "name": "renderChipLabel", "type": "((group: Group | null, item: Item) => string) | undefined", "required": false, "description": "" }, { "name": "renderGroupLabel", "type": "((group: Group) => string) | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"xs\" | undefined", "required": false, "description": "" }, { "name": "sizeOnOpen", "type": "number | undefined", "required": false, "description": "" } ], "propsTypeName": "ListOfFiltersProps", "sourceFile": "packages/ui-kit/src/components/ListOfFilters/ListOfFilters.tsx", "type": "composition", "category": "Композиции", "keywords": [ "применённые фильтры", "filter chips", "сброс фильтров" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { ListOfFilters } from '@daisforge/ui';", "minimalUsage": " {}} items={[]} opened={true} />", "examples": [ { "exportName": "Usage", "displayName": "Использование в SplitViewAndListOfFilters.tsx", "type": "usage", "code": "", "sourceFile": "packages/vite-project/src/pages/SplitViewAndListOfFilters.tsx" } ] }, "Mask": { "name": "Mask", "group": "components", "folderName": "Mask", "role": "primary", "description": "Текстовое поле с маской ввода (телефон, паспорт и т.п.)", "props": [ { "name": "defaultValue", "type": "string | (readonly string[] & string) | undefined", "required": false, "description": "Значение по умолчанию." }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Mask/Mask.d.ts", "type": "wrapper", "atomicBase": "Mask", "formVariant": "FormMask", "category": "Локальные компоненты", "keywords": [ "маска ввода", "input mask", "форматированное поле" ], "chooseWhen": "Вне react-hook-form — поле с маской ввода на value/onChange напрямую.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "alwaysShowMask", "type": "boolean", "required": false, "description": "Отображать ли маску всегда.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "keepPlaceholder", "type": "boolean", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение лейбла.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "mask", "type": "string", "required": false, "description": "Маска.\nПоддерживаются следующие символы:\n* 0 — любая цифра 0-9\n* \\* — любой символ\n* a — A-Z, a-z\n* я — А-Я, а-я, ё, Ё\n* q — буква \"q\"\n* 2 — цифра \"2\"\n* \\a — \"\\\\\" - символ экранирования; \"a\" - буква", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maskChar", "type": "string", "required": false, "description": "Символ маскирования.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maskFormat", "type": "IMaskItem[]", "required": false, "description": "Набор соответствий маски и маскируемого значения.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maskString", "type": "string", "required": false, "description": "Строка, которая будет отображена в незаполненную часть маски.\nЕсли передать maskString, то maskChar игнорируется.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "ChangeEventHandler", "required": false, "description": "Обработчик изменения элемента формы", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onValueChange", "type": "((params: { maskedValue: string; value: string; }) => void)", "required": false, "description": "Callback при изменении значения маски с дополнительной информацией.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optional", "type": "boolean", "required": false, "description": "Флаг необязательности поля", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optionalText", "type": "string", "required": false, "description": "Подпись для указания необязательности поля", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "reformat", "type": "((params: { value: string | IInputValue[]; selection: ISelectRange; input?: string; }) => IInputState)", "required": false, "description": "Функция форматирования, которая позволяет задать собственные правила форматирования.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "showMask", "type": "boolean", "required": false, "description": "Отображать ли маску во время ввода.", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "showStartChars", "type": "boolean", "required": false, "description": "Отображать ли префикс маски. Например у маски телефона \"+7\"", "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"clear\" | \"default\" | \"viewMode\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "checked", "type": "boolean", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chips", "type": "TextFieldPrimitiveValue[]", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipType", "type": "\"text\" | \"default\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipValidator", "type": "((value: string) => ChipValidatorReturn)", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipView", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "clear", "type": "boolean", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactElement>", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactElement>", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "enumerationType", "type": "\"plain\" | \"chip\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasDivider", "type": "boolean", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPortal", "type": "string | RefObject", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftHelper", "type": "ReactNode", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxLength", "type": "number", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "minLength", "type": "number", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "name", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onBlur", "type": "FocusEventHandler", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangeChips", "type": "((value: TextFieldPrimitiveValue[]) => void)", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onFocus", "type": "FocusEventHandler", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onSearch", "type": "(((value: string, event?: KeyboardEvent) => void) & ((value: string, event?: KeyboardEvent) => void)) | undefined", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placeholder", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "rightHelper", "type": "ReactNode", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textAfter", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textBefore", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleCaption", "type": "ReactNode", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "type", "type": "string", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number | readonly string[]", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"edited\"", "required": false, "inheritedFrom": "Mask", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Mask } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Маска Маска Маска задается с помощью свойства mask .", "type": "vendor", "code": "import React from 'react';\nimport { Mask } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Использование Использование Компонент Mask представляет собой поле ввода с возможностью маскирования значения.", "type": "vendor", "code": "import React from 'react';\nimport { Mask } from '@daisforge/ui';\nimport { IconDone } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n
\n );\n}" } ] }, "MassActions": { "name": "MassActions", "group": "components", "folderName": "MassActions", "role": "primary", "description": "Панель массовых действий с чекбоксом, счётчиком и кнопками", "props": [ { "name": "containerRef", "type": "React.RefObject | React.MutableRefObject | (() => HTMLElement | null)", "required": true, "description": "Ref на контейнер относительно которого будет позиционироваться панель\nМожет быть RefObject, MutableRefObject или функция возвращающая элемент" }, { "name": "leftSection", "type": "React.ReactNode", "required": true, "description": "Левая секция панели (чекбокс + счетчик или кастомный контент)" }, { "name": "selectedCount", "type": "number", "required": true, "description": "Количество выбранных элементов\nИспользуется для внутренней логики видимости панели (если show не указан)\nЕсли selectedCount === 0 и show не указан, панель не отображается" }, { "name": "bottom", "type": "number | undefined", "required": false, "description": "Отступ снизу от контейнера (в пикселях)\nПо умолчанию: 16px для standalone, 24px для таблицы", "default": "16" }, { "name": "buttons", "type": "MassActionsButtonProps[] | undefined", "required": false, "description": "Кнопки действий" }, { "name": "collapsedDropdownProps", "type": "TableDropdownConfigProps | undefined", "required": false, "description": "Конфигурация dropdown для скрытых кнопок" }, { "name": "enableDebugLogs", "type": "boolean | undefined", "required": false, "description": "Включить отладочное логирование в консоль\nПолезно для отладки проблем с компрессией и позиционированием\nПо умолчанию false", "default": "false" }, { "name": "isHaveSomeFeatureInSidebar", "type": "boolean | undefined", "required": false, "description": "Есть ли какая-то фича в сайдбаре (влияет на расчет ширины)", "default": "false" }, { "name": "middleSection", "type": "React.ReactNode", "required": false, "description": "Средняя секция (например, кнопка \"Сбросить всё\")\nОпционально - для standalone версии не используется" }, { "name": "minPadding", "type": "number | undefined", "required": false, "description": "Минимальный отступ панели от краев контейнера (в пикселях)\nИспользуется для:\n- CSS padding панели (симметрично: minPadding слева и справа)\n- Расчетов компрессии (максимальная ширина панели с учетом отступов)\n- Позиционирования (гарантирует минимальный отступ от левого края контейнера)\nПо умолчанию: 16px для standalone, 24px для таблицы", "default": "16" }, { "name": "show", "type": "boolean | undefined", "required": false, "description": "Явный контроль видимости панели\nЕсли указан, имеет приоритет над автоматической логикой на основе selectedCount\nПозволяет показывать панель даже при selectedCount === 0\nПо умолчанию: undefined (используется логика selectedCount > 0)" }, { "name": "sidebarConfig", "type": "MassActionsSidebarConfig | undefined", "required": false, "description": "Конфигурация сайдбара (если есть)" }, { "name": "size", "type": "MassActionsSize | undefined", "required": false, "description": "Статический размер панели (для использования ВНУТРИ таблиц).\nЕсли задан — перекрывает viewport-логику (медиазапрос 1280 не используется):\n`m`/`s` = обычный размер (кнопки `s`), `xs` = уменьшенный (кнопки `xxs`, «ещё» `xs`, счётчик Body XS, свои паддинги).\nНЕ задавать для standalone — там компактность определяется по ширине вьюпорта (`down('xl')`)." }, { "name": "useTableDropdown", "type": "boolean | undefined", "required": false, "description": "Использовать TableDropdown (для таблиц) вместо обычного Dropdown\nПо умолчанию false (используется обычный Dropdown)", "default": "false" } ], "propsTypeName": "MassActionsProps", "compoundParts": [ { "name": "Counter", "typeName": "MassActionsCounterProps", "props": [ { "name": "selectedCount", "type": "number", "required": true, "description": "Количество выбранных элементов" }, { "name": "indeterminate", "type": "boolean | undefined", "required": false, "description": "Indeterminate состояние чекбокса" }, { "name": "onCheckboxChange", "type": "((event: React.ChangeEvent) => void) | undefined", "required": false, "description": "Колбэк при изменении чекбокса" }, { "name": "showCheckbox", "type": "boolean | undefined", "required": false, "description": "Показывать ли чекбокс", "default": "false" } ] } ], "sourceFile": "packages/ui-kit/src/components/MassActions/MassActions.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "массовые действия", "bulk actions", "панель выбора строк" ], "docs": "# MassActions\n\nБазовый адаптивный компонент панели массовых действий. Независим от таблицы - может использоваться с любым контейнером. Поддерживает автоматическую компрессию кнопок при нехватке места, сворачивание/разворачивание, удобное позиционирование и другие возможности.\n\n## Ключевые особенности\n\n- Автоматическая компрессия кнопок при нехватке места\n- Accent-кнопки всегда остаются видимыми\n- Автоцентрирование относительно контейнера\n- Поддержка двух типов кнопок: Button и LinkButton\n- Размеры кнопок подбираются автоматически — передавать `size` кнопкам не нужно (если задан, используется как есть)\n\n## Compound-компоненты\n\n### Counter\n\n`MassActions.Counter` — компонент счетчика выбранных элементов. Может отображать чекбокс, текст и анимированный badge с количеством.\n\n#### Логика работы чекбокса\n\nЧекбокс в Counter имеет три состояния:\n\n- **checked = true** — когда все элементы выбраны (`selectedCount === totalCount`)\n- **indeterminate = true** — когда выбрано частично (`0 < selectedCount < totalCount`)\n- **checked = false, indeterminate = false** — когда ничего не выбрано (`selectedCount === 0`)\n\n**Важно:** Состояние чекбокса должно вычисляться на основе `selectedCount` и общего количества элементов, а не храниться в отдельном состоянии. Это обеспечивает синхронизацию между ручным выделением элементов и состоянием чекбокса.\n\n```tsx\n// Правильная реализация логики чекбокса\nconst items = [...]; // массив всех элементов\nconst [selectedItems, setSelectedItems] = useState>(new Set());\n\n// Вычисляем состояние на основе selectedItems\nconst allSelected = selectedItems.size === items.length;\nconst someSelected = selectedItems.size > 0 && selectedItems.size < items.length;\nconst checked = allSelected;\nconst indeterminate = someSelected;\n\nconst handleCheckboxChange = (isChecked: boolean) => {\n if (isChecked) {\n // Выделяем все элементы\n setSelectedItems(new Set(items.map((item) => item.id)));\n } else {\n // Снимаем выделение со всех элементов\n setSelectedItems(new Set());\n }\n};\n\n handleCheckboxChange(e.target.checked)}\n/>\n```\n\n## MassActionsStatic\n\nСтатический компонент панели действий без адаптивной компрессии. Предназначен для использования в местах, где не требуется автоматическое скрытие кнопок (например, в боковых панелях LeftPanel).\n\nВ отличие от `MassActions`, `MassActionsStatic` не поддерживает компрессию кнопок и позиционирование относительно контейнера. Поддерживает блочное отображение через проп `position` (`static` или `relative`), что позволяет использовать компонент как обычный блок без абсолютного позиционирования.\n\n## Особенности\n\n### Компрессия кнопок\n\nПри нехватке места кнопки автоматически скрываются в дропдауне скрытых действий:\n\n1. Все accent-кнопки всегда видимы\n2. Обычные кнопки добавляются по порядку, пока помещаются\n3. Остальные кнопки идут в дропдаун скрытых действий\n\n### Позиционирование\n\nПанель автоматически центрируется относительно переданного контейнера (`containerRef`). В большинстве сценариев достаточно просто передать корректный контейнер, дополнительная настройка через `sidebarConfig` нужна только для продвинутых кейсов.\n\n### Размеры кнопок\n\nРазмеры кнопок и дропдаунов панель подбирает сама — по режиму отображения. В обычном режиме кнопки рендерятся размером `s`, в компактном (узкий вьюпорт, до 1280px включительно) — `xs`. Передавать `size` кнопкам отдельно **не нужно**. Если `size` всё же задан — он используется как есть.\n\n## Типы кнопок\n\nКаждый элемент массива `buttons` — это либо обычная кнопка (`type: 'button'`, компонент `Button`), либо кнопка-ссылка (`type: 'linkButton'`, компонент `LinkButton`). Кнопки с `view: 'accent'` никогда не скрываются в дропдауне скрытых действий.\n\n```tsx\nbuttons={[\n {\n type: 'button',\n text: 'Действие',\n view: 'secondary', // 'accent' / 'critical' / 'primary' и т.д.\n onClick: () => {},\n },\n {\n type: 'linkButton',\n text: 'Ссылка-действие',\n view: 'linkSecondary', // link-стили: 'linkAccent' / 'linkDefault' и т.д.\n onClick: () => {},\n },\n]}\n```\n\n## Disabled-состояние\n\nЕсли у кнопки `disabled: true`, можно передать `disabledTooltipProps` — подсказку, которая покажется при наведении на неактивную кнопку:\n\n```tsx\n{\n type: 'button',\n text: 'Действие',\n view: 'secondary',\n disabled: true,\n disabledTooltipProps: {\n text: 'Выберите элементы для выполнения действия',\n },\n onClick: () => {},\n}\n```\n\n**Важно:** disabled-кнопка остаётся неактивной и после ухода в дропдаун скрытых действий — `disabled` пробрасывается на пункт меню. Подсказка `disabledTooltipProps` при этом показывается только у кнопок на самой панели, в меню её нет.\n\n## Dropdown в кнопках\n\nКнопка может открывать вложенный dropdown:\n\n```tsx\n{\n type: 'button',\n text: 'Действие с меню',\n view: 'secondary',\n dropdown: {\n items: [\n { label: 'Опция 1', value: '1' },\n { label: 'Опция 2', value: '2' },\n ],\n onItemSelect: (item) => {},\n },\n}\n```\n\n> Подробнее о типах и пропсах — [MassActions API](?path=/docs/локальные-компоненты-massactions-api--docs)", "apiDocs": "# MassActions API\n\n## MassActionsProps\n\n```typescript\ntype MassActionsProps = {\n /**\n * Ref на контейнер относительно которого будет позиционироваться панель\n * Может быть RefObject, MutableRefObject или функция возвращающая элемент\n */\n containerRef:\n | RefObject\n | MutableRefObject\n | (() => HTMLElement | null);\n\n /**\n * Левая секция панели (чекбокс + счетчик или кастомный контент)\n */\n leftSection: ReactNode;\n\n /**\n * Средняя секция (например, кнопка \"Сбросить всё\")\n * Опционально - для standalone версии не используется\n */\n middleSection?: ReactNode;\n\n /**\n * Кнопки действий\n */\n buttons?: MassActionsButtonProps[];\n\n /**\n * Конфигурация сайдбара (если есть)\n */\n sidebarConfig?: MassActionsSidebarConfig;\n\n /**\n * Есть ли какая-то фича в сайдбаре (влияет на расчет ширины)\n */\n isHaveSomeFeatureInSidebar?: boolean;\n\n /**\n * Конфигурация dropdown для скрытых кнопок\n */\n collapsedDropdownProps?: TableDropdownConfigProps;\n\n /**\n * Количество выбранных элементов\n * Используется для внутренней логики видимости панели (если show не указан)\n * Если selectedCount === 0 и show не указан, панель не отображается\n */\n selectedCount: number;\n\n /**\n * Явный контроль видимости панели\n * Если указан, имеет приоритет над автоматической логикой на основе selectedCount\n * Позволяет показывать панель даже при selectedCount === 0\n * По умолчанию: undefined (используется логика selectedCount > 0)\n */\n show?: boolean;\n\n /**\n * Использовать TableDropdown (для таблиц) вместо обычного Dropdown\n * По умолчанию false (используется обычный Dropdown)\n */\n useTableDropdown?: boolean;\n /**\n * Включить отладочное логирование в консоль\n * Полезно для отладки проблем с компрессией и позиционированием\n * По умолчанию false\n */\n enableDebugLogs?: boolean;\n /**\n * Отступ снизу от контейнера (в пикселях)\n * По умолчанию: 16px для standalone, 24px для таблицы\n */\n bottom?: number;\n\n /**\n * Минимальный отступ панели от краев контейнера (в пикселях)\n * Используется для:\n * - CSS padding панели (симметрично: minPadding слева и справа)\n * - Расчетов компрессии (максимальная ширина панели с учетом отступов)\n * - Позиционирования (гарантирует минимальный отступ от левого края контейнера)\n * По умолчанию: 16px для standalone, 24px для таблицы\n */\n minPadding?: number;\n\n /**\n * Статический размер панели (для использования ВНУТРИ таблиц).\n * Если задан — перекрывает viewport-логику (медиазапрос 1280 не используется):\n * `m`/`s` = обычный размер (кнопки `s`), `xs` = уменьшенный (кнопки `xxs`, «ещё» `xs`, счётчик Body XS, свои паддинги).\n * НЕ задавать для standalone — там компактность определяется по ширине вьюпорта (`down('xl')`).\n */\n size?: MassActionsSize;\n};\n```\n\n## MassActionsButtonProps\n\n```typescript\ntype MassActionsButtonPropsButton = DataAttributes &\n Partial & {\n type: 'button';\n view?: ButtonCompProps['view'];\n /**\n * Dropdown для кнопки.\n * Используется универсальный DropdownProps, который работает и с обычным Dropdown, и с TableDropdown\n */\n dropdown?: DropdownProps & { $css?: CSSObject };\n disabledTooltipProps?: TooltipProps;\n };\n```\n\n## Compound types\n\n### MassActions.Counter\n\n```typescript\ntype MassActionsCounterProps = {\n /** Количество выбранных элементов */\n selectedCount: number;\n /** Текст метки (по умолчанию \"Выбрано\") */\n label?: string;\n /** Показывать ли чекбокс */\n showCheckbox?: boolean;\n /** Состояние чекбокса */\n checked?: boolean;\n /** Indeterminate состояние чекбокса */\n indeterminate?: boolean;\n /** Колбэк при изменении чекбокса */\n onCheckboxChange?: (event: React.ChangeEvent) => void;\n /** Кастомный className */\n className?: string;\n};\n```\n\n## MassActionsStatic\n\n```typescript\ntype MassActionsStaticProps = {\n children: ReactNode;\n className?: string;\n style?: CSSProperties;\n /**\n * Позиционирование компонента\n * - 'absolute' - абсолютное позиционирование (по умолчанию)\n * - 'static' - обычный блок без абсолютного позиционирования\n * - 'relative' - относительное позиционирование\n */\n position?: 'absolute' | 'static' | 'relative';\n /**\n * Явный контроль видимости компонента\n * Если не указан, компонент всегда виден\n * Если указан, компонент отображается только при show === true\n */\n show?: boolean;\n /**\n * Включить/отключить анимацию появления/исчезновения\n * @default true\n */\n animate?: boolean;\n};\n```", "curatedStories": [ { "exportName": "Standalone", "displayName": "Standalone MassActions", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { MassActions } from '@ui-kit/components/MassActions';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'StandaloneExample',\n)}" }, { "exportName": "WithShowProp", "displayName": "С явным контролем видимости (show)", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { Button } from '@ui-kit/components/Button';\nimport { MassActions } from '@ui-kit/components/MassActions';\nimport { s } from '@ui-kit/constants';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'ShowPropExample',\n)}" }, { "exportName": "NarrowContainer", "displayName": "Узкий контейнер (компрессия)", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { MassActions } from '@ui-kit/components/MassActions';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'NarrowContainerExample',\n)}" }, { "exportName": "WithLeftPanel", "displayName": "В комбинации с LeftPanel", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { Button } from '@ui-kit/components/Button';\nimport { IconButton } from '@ui-kit/components/IconButton';\nimport { LeftPanel } from '@ui-kit/components/LeftPanel';\nimport { MassActions } from '@ui-kit/components/MassActions';\nimport { StaticMassActionsPanel } from '@ui-kit/components/StaticMassActionsPanel';\nimport { s } from '@ui-kit/constants';\nimport { IconDotsVerticalCenteredOutline, IconPlasma } from '@ui-kit/icons';\nimport { surfaceSolidCard } from '@ui-kit/tokens';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'WithLeftPanelExample',\n)}" }, { "exportName": "Adaptive1280", "displayName": "1280 Адаптив", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { MassActions } from '@ui-kit/components/MassActions';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'StandaloneExample',\n)}" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { MassActions } from '@daisforge/ui';", "minimalUsage": " {}} leftSection={'Контент'} selectedCount={0}>\n {/* части: MassActions.Counter */}\n", "examples": [ { "exportName": "Standalone", "displayName": "Standalone MassActions", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { MassActions } from '@ui-kit/components/MassActions';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'StandaloneExample',\n)}" }, { "exportName": "WithShowProp", "displayName": "С явным контролем видимости (show)", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { Button } from '@ui-kit/components/Button';\nimport { MassActions } from '@ui-kit/components/MassActions';\nimport { s } from '@ui-kit/constants';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'ShowPropExample',\n)}" }, { "exportName": "NarrowContainer", "displayName": "Узкий контейнер (компрессия)", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { MassActions } from '@ui-kit/components/MassActions';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'NarrowContainerExample',\n)}" }, { "exportName": "WithLeftPanel", "displayName": "В комбинации с LeftPanel", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport { Button } from '@ui-kit/components/Button';\nimport { IconButton } from '@ui-kit/components/IconButton';\nimport { LeftPanel } from '@ui-kit/components/LeftPanel';\nimport { MassActions } from '@ui-kit/components/MassActions';\nimport { StaticMassActionsPanel } from '@ui-kit/components/StaticMassActionsPanel';\nimport { s } from '@ui-kit/constants';\nimport { IconDotsVerticalCenteredOutline, IconPlasma } from '@ui-kit/icons';\nimport { surfaceSolidCard } from '@ui-kit/tokens';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/MassActions/MassActions.stories.tsx',\n 'WithLeftPanelExample',\n)}" } ] }, "MassActionsButton": { "name": "MassActionsButton", "group": "components", "folderName": "MassActions", "role": "primary", "description": "Кнопка действия для панели MassActions с поддержкой выпадающего меню", "props": [ { "name": "dropdown", "type": "(Omit, \"size\" | \"view\"> & Pick & { items: ItemOption[]; trigger?: DropdownTrigger | undefined; placement?: DropdownPlacement | undefined; children?: React.ReactNode; variant?: \"normal\" | \"tight\" | undefined; zIndex?: Property.ZInd…", "required": false, "description": "Dropdown для кнопки.\nИспользуется универсальный DropdownProps, который работает и с обычным Dropdown, и с TableDropdown" }, { "name": "disabledTooltipProps", "type": "TooltipProps | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"linkButton\" | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"accent\" | \"clear\" | \"dark\" | \"black\" | \"white\" | \"gradient\" | undefined", "required": false, "description": "" } ], "propsTypeName": "MassActionsButtonProps", "sourceFile": "packages/ui-kit/src/components/MassActions/MassActionsButton.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "кнопка массового действия", "action button dropdown" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { MassActionsButton } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "MassActionsCounter": { "name": "MassActionsCounter", "group": "components", "folderName": "MassActions", "role": "primary", "description": "Счётчик выбранных строк с чекбоксом для панели MassActions", "props": [ { "name": "selectedCount", "type": "number", "required": true, "description": "Количество выбранных элементов" }, { "name": "indeterminate", "type": "boolean | undefined", "required": false, "description": "Indeterminate состояние чекбокса" }, { "name": "onCheckboxChange", "type": "((event: React.ChangeEvent) => void) | undefined", "required": false, "description": "Колбэк при изменении чекбокса" }, { "name": "showCheckbox", "type": "boolean | undefined", "required": false, "description": "Показывать ли чекбокс", "default": "false" } ], "propsTypeName": "MassActionsCounterProps", "sourceFile": "packages/ui-kit/src/components/MassActions/MassActionsCounter.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "счётчик выбранных", "selection counter", "чекбокс выбора всех" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "MassActions", "part": "Counter" }, "importPath": "@daisforge/ui", "importStatement": "import { MassActionsCounter } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в MassActions.stories.tsx", "type": "usage", "code": ") =>\n handleCheckboxChange(e.target.checked)\n }\n />", "sourceFile": "packages/storybook/src/stories/MassActions/MassActions.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в MassActions.stories.tsx", "type": "usage", "code": ") =>\n handleCheckboxChange(e.target.checked)\n }\n />", "sourceFile": "packages/storybook/src/stories/MassActions/MassActions.stories.tsx" } ] }, "MassActionsStatic": { "name": "MassActionsStatic", "group": "components", "folderName": "MassActionsStatic", "role": "primary", "description": "Фиксированный контейнер для закрепления MassActions при скролле", "props": [ { "name": "animate", "type": "boolean | undefined", "required": false, "description": "Включить/отключить анимацию появления/исчезновения", "default": "true" }, { "name": "position", "type": "\"absolute\" | \"static\" | \"relative\" | undefined", "required": false, "description": "Позиционирование компонента\n- 'absolute' - абсолютное позиционирование (по умолчанию)\n- 'static' - обычный блок без абсолютного позиционирования\n- 'relative' - относительное позиционирование", "default": "'absolute'" }, { "name": "show", "type": "boolean | undefined", "required": false, "description": "Явный контроль видимости компонента\nЕсли не указан, компонент всегда виден\nЕсли указан, компонент отображается только при show === true" } ], "propsTypeName": "MassActionsStaticProps", "sourceFile": "packages/ui-kit/src/components/MassActionsStatic/MassActionsStatic.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "закрепление панели", "sticky container", "fixed position" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { MassActionsStatic } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в MassActions.stories.tsx", "type": "usage", "code": "\n \n \n \n }\n size=\"s\"\n view=\"secondary\"\n onClick={() => alert('Label 1')}\n style={{\n flexGrow: 1,\n }}\n />\n }\n view=\"secondary\"\n onClick={() => alert('Label 2')}\n style={{\n flexGrow: 1,\n }}\n />\n ", "sourceFile": "packages/storybook/src/stories/MassActions/MassActions.stories.tsx" } ] }, "Modal": { "name": "Modal", "group": "components", "folderName": "Modal", "role": "primary", "description": "Базовое модальное окно поверх контента без готовых layout-слотов", "props": [ { "name": "focusTrapSelectors", "type": "string[] | undefined", "required": false, "description": "Селекторы дополнительных DOM-поддеревьев, которые считаются частью модального окна для focus trap.\nИспользуется для элементов, отрисованных через Portal или вне DOM-поддерева модального окна." } ], "propsTypeName": "ModalProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Modal/Modal.d.ts", "type": "wrapper", "atomicBase": "Modal", "category": "Локальные компоненты", "keywords": [ "модальное окно", "overlay dialog", "попап" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "closeOnEsc", "type": "boolean", "required": false, "description": "Закрывать модальное окно при нажатии на ESC(по умолчанию true).", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnOverlayClick", "type": "boolean", "required": false, "description": "Закрывать модальное окно при нажатии вне области модального окна(по умолчанию true),", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "draggable", "type": "boolean", "required": false, "description": "Настройка draggable-режима.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focusAfterRef", "type": "RefObject", "required": false, "description": "Элемент для фокуса после закрытия модального окна\n(по умолчанию фокус на последнем перед открытием активном элементе).", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "frame", "type": "string | RefObject", "required": false, "description": "В каком контейнере позиционируется (по умолчанию document), можно также указать id элемента или ref для него.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasBody", "type": "boolean", "required": false, "description": "Оборачивает children в стилизованную обертку", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasClose", "type": "boolean", "required": false, "description": "Отображает кнопку с крестиком для закрытия", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "initialFocusRef", "type": "RefObject", "required": false, "description": "Первый элемент для фокуса внутри модального окна.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isFocusTrapped", "type": "boolean", "required": false, "description": "Фокус элементов будет происходить только внутри модального окна", "default": "true", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "offset", "type": "[number, number] | [string, string]", "required": false, "description": "Смещение относительно текущей позиции.\n(x, y) - [number, number], [string, string].\nПри передаче number расчёт в rem.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onClose", "type": "(() => void)", "required": false, "description": "Общий обработчик клика по кнопке \"закрыть\".", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onEscKeyDown", "type": "((event: KeyboardEvent) => void)", "required": false, "description": "Обработчик клика при нажатии на ESC(если не передан, то при нажатии используется onClose).", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onOverlayClick", "type": "((event: MouseEvent) => void)", "required": false, "description": "Обработчик клика при нажатии вне области модального окна(если не передан, то при нажатии используется onClose).", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "opened", "type": "boolean", "required": false, "description": "Отображение Popup.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "overlay", "type": "ReactNode", "required": false, "description": "Соседний элемент для окна в портале.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "PopupPlacement", "required": false, "description": "Позиция на экране\ncenter - по умолчанию\nleft, right, top, bottom и их комбинации", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "popupInfo", "type": "PopupInfo", "required": false, "description": "Дополнительная информация для программного взаимодействия с окном через контекст.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "positionFixed", "type": "boolean", "required": false, "description": "Если `frame` отличается от `document` применяет `position='fixed'`", "default": "false", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "resizable", "type": "boolean | { disabled?: boolean; directions?: ResizeDirections; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; ... 8 more ...; onResizeEnd?: ((resizableContainer?: RefObject<...> | undefined) => void) | undefined; } | undefined", "required": false, "description": "Настройка resizable-режима.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "withAnimation", "type": "boolean", "required": false, "description": "Использовать ли анимацию.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "withBlur", "type": "boolean", "required": false, "description": "Нужно ли применять blur для подложки.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "string", "required": false, "description": "Значение z-index для Popup.", "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "children", "type": "ReactNode", "required": false, "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isOpen", "type": "boolean", "required": false, "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "string", "required": false, "inheritedFrom": "Modal", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Modal } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Подключение анимации", "type": "vendor", "code": "import styled from 'styled-components';\nimport { Modal } from '@daisforge/ui';\nconst StyledModal = styled(Modal)`\n && > .${popupClasses.root}, .${modalClasses.overlay} {\n animation: fadeIn 1s forwards;\n }\n &&.${popupClasses.endAnimation} .${popupClasses.root} {\n animation: fadeOut 1s forwards;\n }\n &&.${popupClasses.endAnimation} .${modalClasses.overlay} {\n animation: fadeOut 1s forwards;\n }\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n`;" }, { "exportName": "Vendor2", "displayName": "Resizable Resizable Чтобы иметь возможность растягивать Popup нужно настроить свойство resizable . Формат следующий", "type": "vendor", "code": "/**\n * Настройка resizable-режима.\n */\nresizable?: {\n /**\n * Включение/выключение ресайза.\n * @default false\n */\n disabled?: boolean;\n /**\n * Направления для ресайза.\n */\n directions?: ResizeDirections;\n /**\n * Начальный размер окна ресайза.\n */\n defaultSize?: { width?: number; height?: number };\n /**\n * Минимальная ширина ресайза в px.\n */\n minWidth?: number;\n /**\n * Минимальная высота ресайза в px.\n */\n minHeight?: number;\n /**\n * Максимальная ширина ресайза в px.\n */\n maxWidth?: number;\n /**\n * Максимальная высота ресайза в px.\n */\n maxHeight?: number;\n /**\n * Кастомные иконки ресайза.\n */\n icons?: {\n topRight?: ReactNode;\n bottomRight?: ReactNode;\n bottomLeft?: ReactNode;\n topLeft?: ReactNode;\n };\n /**\n * Размер иконки ресайза.\n * @default s\n */\n iconSize?: 'xs' | 's' | 'm';\n /**\n * Скрывать ли иконку для ресайза.\n * @default false\n */\n hiddenIcons?: PopupPlacementMixed[];\n};" } ] }, "ModalDFBackIconButton": { "name": "ModalDFBackIconButton", "group": "components", "folderName": "ModalDF", "role": "part", "description": "Круглая кнопка «Назад» в шапке ModalDF для возврата на предыдущий шаг", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "iconSize", "type": "\"m\" | \"s\" | \"xs\" | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"fixed\" | \"auto\" | \"filled\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"dark\" | \"black\" | \"white\" | \"accent\" | \"secondary\" | \"clear\" | \"positive\" | \"warning\" | \"negative\" | \"gradient\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ModalDFBackIconButtonProps", "sourceFile": "packages/ui-kit/src/components/ModalDF/components/BackIconButton.tsx", "type": "wrapper", "atomicBase": "IconButton", "wrapsInternal": "IconButton", "category": "Локальные компоненты", "keywords": [ "кнопка назад", "навигация в модалке", "back button" ], "hasCuratedMeta": true, "parentComponent": "ModalDF", "inheritedProps": [ { "name": "additionalContent", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"outline\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentPlacing", "type": "ContentPlacing", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focused", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isLoading", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "loader", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "outlined", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftLeft", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftRight", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "square", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretch", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretching", "type": "Stretching", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"secondary\" | \"black\" | \"white\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "ModalDF", "part": "BackIconButton" }, "importPath": "@daisforge/ui", "importStatement": "import { ModalDFBackIconButton } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Использование Использование Компонент IconButton может содержать иконку, которая указывается напрямую через children .", "type": "vendor", "code": "import React from 'react';\nimport { IconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Границы кнопки", "type": "vendor", "code": "import React from 'react';\nimport { IconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n \n \n \n
\n );\n}" } ] }, "ModalDFDivider": { "name": "ModalDFDivider", "group": "components", "folderName": "ModalDF", "role": "part", "description": "Вертикальный разделитель между дополнительным блоком и служебными кнопками шапки ModalDF", "props": [ { "name": "length", "type": "string | number | undefined", "required": false, "description": "Размер разделителя", "default": "'100%'" }, { "name": "orientation", "type": "\"horizontal\" | \"vertical\" | undefined", "required": false, "description": "Направление разделителя", "default": "'horizontal'" }, { "name": "size", "type": "\"m\" | undefined", "required": false, "description": "Размер разделителя", "default": "'m'" }, { "name": "view", "type": "\"default\" | \"dark\" | \"light\" | \"inverse\" | undefined", "required": false, "description": "Вид разделителя", "default": "'default'" } ], "propsTypeName": "ComponentProps", "sourceFile": "packages/ui-kit/src/components/ModalDF/components/Divider.tsx", "type": "wrapper", "atomicBase": "Divider", "wrapsInternal": "Divider", "category": "Локальные компоненты", "keywords": [ "разделитель шапки", "vertical divider", "разделитель кнопок" ], "hasCuratedMeta": true, "parentComponent": "ModalDF", "atomicDataMissing": true, "compoundPartOf": { "component": "ModalDF", "part": "Divider" }, "importPath": "@daisforge/ui", "importStatement": "import { ModalDFDivider } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в ModalDF.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/ModalDF/ModalDF.stories.tsx" } ] }, "ModalDFDotsIconButton": { "name": "ModalDFDotsIconButton", "group": "components", "folderName": "ModalDF", "role": "part", "description": "Кнопка с иконкой троеточия и выпадающим меню доп. действий в шапке ModalDF", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." }, { "name": "dropdownProps", "type": "(Omit, \"view\" | \"size\"> & Pick & { items: ItemOption[]; trigger?: DropdownTrigger | undefined; placement?: DropdownPlacement | undefined; children?: React.ReactNode; variant?: \"normal\" | \"tight\" | undefined; zIndex?: Property.ZInd…", "required": false, "description": "" }, { "name": "iconSize", "type": "\"m\" | \"s\" | \"xs\" | undefined", "required": false, "description": "" }, { "name": "additionalContent", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "appearance", "type": "\"default\" | \"outline\" | undefined", "required": false, "description": "" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\" | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "contentPlacing", "type": "\"default\" | \"relaxed\" | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "focused", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isLoading", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "loader", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "outlined", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\" | undefined", "required": false, "description": "" }, { "name": "shiftLeft", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "shiftRight", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\" | undefined", "required": false, "description": "" }, { "name": "square", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretch", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "stretching", "type": "\"fixed\" | \"auto\" | \"filled\" | undefined", "required": false, "description": "" }, { "name": "text", "type": "string | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false, "description": "" }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"default\" | \"dark\" | \"black\" | \"white\" | \"accent\" | \"secondary\" | \"clear\" | \"positive\" | \"warning\" | \"negative\" | \"gradient\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ModalDFDotsIconButtonProps", "sourceFile": "packages/ui-kit/src/components/ModalDF/components/DotsIconButton.tsx", "type": "wrapper", "atomicBase": "IconButton", "wrapsInternal": "IconButton", "category": "Локальные компоненты", "keywords": [ "доп меню модалки", "overflow menu", "кнопка троеточие" ], "hasCuratedMeta": true, "parentComponent": "ModalDF", "inheritedProps": [ { "name": "additionalContent", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"outline\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "blur", "type": "\"small\" | \"medium\" | \"large\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentPlacing", "type": "ContentPlacing", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "focused", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isLoading", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "loader", "type": "ReactNode", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "outlined", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pin", "type": "\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftLeft", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shiftRight", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\" | \"xxs\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "square", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretch", "type": "boolean", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretching", "type": "Stretching", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "text", "type": "string", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"secondary\" | \"black\" | \"white\"", "required": false, "inheritedFrom": "IconButton", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "ModalDF", "part": "DotsIconButton" }, "importPath": "@daisforge/ui", "importStatement": "import { ModalDFDotsIconButton } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в ModalDF.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/ModalDF/ModalDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в ModalDF.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/ModalDF/ModalDF.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Использование Использование Компонент IconButton может содержать иконку, которая указывается напрямую через children .", "type": "vendor", "code": "import React from 'react';\nimport { IconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Границы кнопки", "type": "vendor", "code": "import React from 'react';\nimport { IconButton } from '@daisforge/ui';\nimport { IconClose } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n \n \n \n \n \n \n
\n );\n}" } ] }, "ModalDFFooter": { "name": "ModalDFFooter", "group": "components", "folderName": "ModalDF", "role": "part", "description": "Нижняя панель ModalDF с раздельными зонами для левой и правой групп кнопок", "props": [ { "name": "leftBlock", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "rightBlock", "type": "React.ReactNode", "required": false, "description": "" } ], "propsTypeName": "ModalDFFooterProps", "sourceFile": "packages/ui-kit/src/components/ModalDF/components/Footer.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "футер модалки", "кнопки подтверждения", "modal footer" ], "hasCuratedMeta": true, "parentComponent": "ModalDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "ModalDF", "part": "Footer" }, "importPath": "@daisforge/ui", "importStatement": "import { ModalDFFooter } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в ModalDF.stories.tsx", "type": "usage", "code": "\n \n {state && (\n }\n hasClose\n onCloseButtonClick={() => setState(false)}\n />\n )}\n \n );\n}" }, { "exportName": "Vendor2", "displayName": "Контент contentBefore Контент contentBefore Размерность и положение contentBefore задается с помощью свойства contentBeforeSizing .", "type": "vendor", "code": "import React from 'react';\nimport { Note } from '@daisforge/ui';\nimport { IconSaluteOutline } from '@salutejs/plasma-icons';\nexport function App() {\n return (\n
\n }\n contentBeforeSizing=\"fixed\"\n />\n }\n contentBeforeSizing=\"scalable\"\n />\n
\n );\n}" } ] }, "Notification": { "name": "Notification", "group": "components", "folderName": "Notification", "role": "primary", "description": "Всплывающее toast-уведомление со статусами и действиями", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." } ], "propsTypeName": "NotificationProps", "sourceFile": "packages/ui-kit/src/components/Notification/Notification.tsx", "type": "wrapper", "atomicBase": "Notification", "category": "Локальные компоненты", "keywords": [ "toast", "всплывающее уведомление", "статус операции" ], "docs": "# Notification\n\nКомпонент `Notification` с обновленным визуальным видом для каждого view. С документацией можно ознакомиться [по ссылке](https://plasma.sberdevices.ru/sdds-finai/components/notification/).\n\n## Ключевые особенности\n\n- Обновленный визуальный вид для каждого `view`\n- Поддержка градиента для значений `view`: `\"positive\"`, `\"warning\"`, `\"negative\"`, `\"info\"`\n\n## Особенности\n\n- Градиент будет применяться, если параметр `view` указан с одним из значений: `\"positive\"` | `\"warning\"` | `\"negative\"` | `\"info\"`\n\n> Подробнее о типах и пропсах — [Notification API](?path=/docs/локальные-компоненты-notification-api--docs)", "apiDocs": "# Notification API\n\nКомпонент-обёртка над `Notification` из `@salutejs/sdds-finai`. Принимает все пропсы оригинального компонента.\n\n## Использование\n\nДля показа уведомлений используется `addNotification` из `NotificationsProvider`:\n\n```tsx\n\naddNotification({\n title: 'Заголовок',\n children: 'Текст уведомления',\n view: 'positive',\n timeout: 3000,\n});\n```\n\n## Пропсы addNotification\n\n- `id` (`string`) — уникальный идентификатор уведомления\n- `title` (`string`) — заголовок\n- `children` (`ReactNode`) — содержимое / текст уведомления\n- `view` (`'default' | 'positive' | 'negative' | 'warning' | 'info'`) — вид уведомления\n- `icon` (`ReactNode`) — иконка слева\n- `timeout` (`number`) — время автоскрытия (мс). `0` или `null` — не скрывать\n- `onTimeoutClose` (`() => void`) — колбэк при автоматическом закрытии\n- `titleColor` (`string`) — переопределение цвета заголовка\n- `textColor` (`string`) — переопределение цвета текста\n- `width` (`string`) — ширина компонента\n- `maxWidth` (`string`) — максимальная ширина\n\n## Пропсы NotificationsProvider\n\n- `placement` (`'center' | 'top' | 'bottom' | 'right' | 'left' | 'bottom-left' | 'top-right' | ...`) — позиция уведомлений\n- `frame` (`string | ref`) — контейнер для позиционирования (по умолчанию document)\n- `children` (`ReactNode`) — дочерние компоненты\n\nПолное описание — в документации `@salutejs/sdds-finai`: [Notification](https://plasma.sberdevices.ru/sdds-finai/components/notification/)", "curatedStories": [ { "exportName": "Variants", "displayName": "Примеры разных view", "type": "full-code", "code": "import { Button, Notification, NotificationsProvider, addNotification } from '@daisforge/ui';\nimport { Typography } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { IconPlasma } from '@daisforge/ui/icons';\nimport { textPrimary } from '@daisforge/ui/tokens';\nimport React from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/Notification/Notification.stories.tsx',\n 'VariantsExampleRender',\n)}" } ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "actions", "type": "ReactNode", "required": false, "description": "Кнопки снизу/справа для необходимых действий.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "backgroundColor", "type": "string", "required": false, "description": "Цвет заголовка (по умолчанию берётся цвет из view)", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeIconType", "type": "\"default\"", "required": false, "description": "Вид закрывающей иконки в Notification.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customCloseIcon", "type": "ReactNode", "required": false, "description": "Пользовательская иконка закрытия.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "icon", "type": "ReactNode", "required": false, "description": "Иконка слева.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "iconPlacement", "type": "\"top\" | \"left\"", "required": false, "description": "Расположение иконки слева внутри Textbox.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "required": false, "description": "Схема расположение блоков Notification.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxWidth", "type": "MaxWidth", "required": false, "description": "Свойства для ограничения ширины уведомления", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onCloseButtonClick", "type": "(() => void)", "required": false, "description": "Callback при нажатии на кнопку закрытия.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onTimeoutClose", "type": "(() => void)", "required": false, "description": "Callback, вызываемый при автоматическом закрытии по timeout.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "showCloseIcon", "type": "boolean", "required": false, "description": "Показывать ли иконку закрытия справа.", "default": "true", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"xs\" | \"xxs\"", "required": false, "description": "Размер Notification (необходимо связать с размером используемых Button).", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textColor", "type": "string", "required": false, "description": "Цвет текста (по умолчанию берётся цвет из view)", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "title", "type": "ReactNode", "required": false, "description": "Заголовок.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleColor", "type": "string", "required": false, "description": "Цвет заголовка (по умолчанию берётся цвет из view)", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"info\"", "required": false, "description": "Вид Notification.", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "width", "type": "Width", "required": false, "description": "Свойства для управления шириной уведомления", "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "children", "type": "ReactNode", "required": false, "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "status", "type": "string", "required": false, "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "UNSAFE_SSR_ENABLED", "type": "boolean", "required": false, "inheritedFrom": "Notification", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Notification } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Variants", "displayName": "Примеры разных view", "type": "full-code", "code": "import { Button, Notification, NotificationsProvider, addNotification } from '@daisforge/ui';\nimport { Typography } from '@daisforge/ui';\nimport { s } from '@daisforge/ui/constants';\nimport { IconPlasma } from '@daisforge/ui/icons';\nimport { textPrimary } from '@daisforge/ui/tokens';\nimport React from 'react';\n\n${getFuncAsString(\n 'packages/storybook/src/stories/Notification/Notification.stories.tsx',\n 'VariantsExampleRender',\n)}" }, { "exportName": "Vendor1", "displayName": "Позиционирование Позиционирование С помощью свойства placement у компонента NotificationsProvider можно задать позиционирование для Notification.", "type": "vendor", "code": "type NotificationPlacement = 'center' | 'top' | 'bottom' | 'right' | 'left';" }, { "exportName": "Vendor2", "displayName": "Управлением внешним видом", "type": "vendor", "code": "//INFO: В данном случае значении цвета будет как во `view='positive'`\naddNotification({\n view: 'positive',\n icon: ,\n ...\n}, 3000);" } ] }, "NotificationsProvider": { "name": "NotificationsProvider", "group": "components", "folderName": "Notification", "role": "primary", "description": "Провайдер контейнера для показа toast-уведомлений на странице", "props": [ { "name": "frame", "type": "string | undefined", "required": false, "description": "" }, { "name": "placement", "type": "PopupPlacement | undefined", "required": false, "description": "" }, { "name": "UNSAFE_SSR_ENABLED", "type": "boolean | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Notification/Notification.d.ts", "type": "wrapper", "atomicBase": "NotificationsProvider", "category": "Локальные компоненты", "keywords": [ "контейнер уведомлений", "toast provider", "область показа тостов" ], "hasCuratedMeta": true, "atomicDataMissing": true, "importPath": "@daisforge/ui", "importStatement": "import { NotificationsProvider } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в Notification.stories.tsx", "type": "usage", "code": "\n \n addNotification(\n {\n id: 'positive-notification',\n view: 'positive',\n title: 'Title',\n icon: ,\n children: (\n \n Text\n \n ),\n closeIconType: 'thin',\n actions: (\n <>\n \n Label\n \n \n \n ),\n layout: 'horizontal',\n width: '459px',\n },\n null,\n )\n }\n >\n Уведомление: positive\n \n \n addNotification(\n {\n id: 'warning-notification',\n view: 'warning',\n title: 'Title',\n icon: ,\n children: (\n \n Text\n \n ),\n closeIconType: 'thin',\n actions: (\n <>\n \n Label\n \n \n \n ),\n layout: 'horizontal',\n width: '459px',\n },\n null,\n )\n }\n >\n Уведомление: warning\n \n \n addNotification(\n {\n id: 'info-notification',\n view: 'info\n// … (обрезано)", "sourceFile": "packages/storybook/src/stories/Notification/Notification.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Позиционирование Позиционирование С помощью свойства placement у компонента NotificationsProvider можно задать позиционирование для Notification.", "type": "vendor", "code": "import { NotificationsProvider } from '@daisforge/ui';\nexport function App() {\n return (\n \n ...\n \n );\n}" }, { "exportName": "Vendor2", "displayName": "NotificationsProvider NotificationsProvider", "type": "vendor", "code": "import ReactDOM from 'react-dom';\nimport { NotificationsProvider } from '@daisforge/ui';\nimport { App } from './App';\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);" } ] }, "NumberFormat": { "name": "NumberFormat", "group": "components", "folderName": "NumberFormat", "role": "primary", "description": "Поле ввода с форматированием чисел (разделители, десятичные) и кнопкой очистки", "props": [ { "name": "suffix", "type": "string | undefined", "required": false, "description": "Суффикс текста в поле ввода." }, { "name": "onClear", "type": "(() => void) | undefined", "required": false, "description": "" }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false, "description": "" } ], "propsTypeName": "NumberFormatCompProps", "sourceFile": "packages/ui-kit/src/components/NumberFormat/NumberFormat.tsx", "type": "wrapper", "atomicBase": "NumberFormat", "formVariant": "FormNumberFormat", "category": "Локальные компоненты", "keywords": [ "форматированное число", "разделители разрядов", "числовая маска" ], "chooseWhen": "Вне react-hook-form — форматированное числовое поле с value/onChange напрямую.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "allowLeadingZeros", "type": "boolean", "required": false, "description": "Разрешает ведущие нули (например, \"0123\").", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "allowNegative", "type": "boolean", "required": false, "description": "Разрешает ввод отрицательных чисел.", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "decimalScale", "type": "number", "required": false, "description": "Количество знаков после запятой.", "default": "3", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "decimalSeparator", "type": "string", "required": false, "description": "Разделитель десятичных знаков (например, \".\").", "default": ".", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "fixedDecimalScale", "type": "boolean", "required": false, "description": "Фиксирует количество знаков после запятой, даже если число их не содержит (добавляет нули).", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isAllowed", "type": "((values: NumberFormatValues) => boolean)", "required": false, "description": "Функция для валидации входного значения.\nЕсли эта функция возвращает false, метод onChange не будет вызван, и значение ввода не изменится.", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "keepPlaceholder", "type": "boolean", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение лейбла.", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "(((event?: ChangeEvent, values?: NumberFormatValues) => void) & ChangeEventHandler) | undefined", "required": false, "description": "Callback, вызываемый при изменении значения в поле ввода.\nПринимает событие изменения (ChangeEvent) и объект NumberFormatValues:\n```\nfloatValue: number | undefined;\nformattedValue: string;\nvalue: string;\n```\nОбработчик изменения элемента формы", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optional", "type": "boolean", "required": false, "description": "Флаг необязательности поля", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optionalText", "type": "string", "required": false, "description": "Подпись для указания необязательности поля", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "thousandSeparator", "type": "string | boolean", "required": false, "description": "Разделитель тысяч.\nМожет быть строкой (например, \",\") или булевым значением.", "default": "' ' (пробел)", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "thousandsGroupStyle", "type": "\"none\" | \"thousand\" | \"lakh\" | \"wan\"", "required": false, "description": "Стиль группировки тысяч:\n- 'thousand' (123 456 789),\n- 'lakh' (индийский стиль, 12 34 56 789),\n- 'wan' (китайский стиль, 1 2345 6789),\n- 'none' (без группировки).", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"clear\" | \"default\" | \"viewMode\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chips", "type": "TextFieldPrimitiveValue[]", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipType", "type": "\"text\" | \"default\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipValidator", "type": "((value: string) => ChipValidatorReturn)", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipView", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "clear", "type": "boolean", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactElement>", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactElement>", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "enumerationType", "type": "\"plain\" | \"chip\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasDivider", "type": "boolean", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPortal", "type": "string | RefObject", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftHelper", "type": "ReactNode", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onBlur", "type": "FocusEventHandler", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangeChips", "type": "((value: TextFieldPrimitiveValue[]) => void)", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onFocus", "type": "FocusEventHandler", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onSearch", "type": "(((value: string, event?: KeyboardEvent) => void) & ((value: string, event?: KeyboardEvent) => void)) | undefined", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "rightHelper", "type": "ReactNode", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "default": "'xs'", "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textAfter", "type": "string", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textBefore", "type": "string", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleCaption", "type": "ReactNode", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "type", "type": "string", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"edited\"", "required": false, "inheritedFrom": "NumberFormat", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { NumberFormat } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Отрицательные числа", "type": "vendor", "code": "import React from 'react';\nimport { NumberFormat } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Ведущие нули", "type": "vendor", "code": "import React from 'react';\nimport { NumberFormat } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" } ] }, "NumberFormatAmount": { "name": "NumberFormatAmount", "group": "components", "folderName": "NumberFormatAmount", "role": "primary", "description": "Поле ввода денежной суммы с крупным стилизованным шрифтом", "props": [ { "name": "allowLeadingZeros", "type": "boolean | undefined", "required": false, "description": "Разрешает ведущие нули (например, \"0123\")." }, { "name": "allowNegative", "type": "boolean | undefined", "required": false, "description": "Разрешает ввод отрицательных чисел." }, { "name": "decimalScale", "type": "number | undefined", "required": false, "description": "Количество знаков после запятой.", "default": "3" }, { "name": "decimalSeparator", "type": "string | undefined", "required": false, "description": "Разделитель десятичных знаков (например, \".\").", "default": "." }, { "name": "fixedDecimalScale", "type": "boolean | undefined", "required": false, "description": "Фиксирует количество знаков после запятой, даже если число их не содержит (добавляет нули)." }, { "name": "hasRequiredIndicator", "type": "boolean | undefined", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false" }, { "name": "isAllowed", "type": "((values: NumberFormatValues) => boolean) | undefined", "required": false, "description": "Функция для валидации входного значения.\nЕсли эта функция возвращает false, метод onChange не будет вызван, и значение ввода не изменится." }, { "name": "keepPlaceholder", "type": "boolean | undefined", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)" }, { "name": "labelPlacement", "type": "\"inner\" | \"outer\" | undefined", "required": false, "description": "Расположение лейбла." }, { "name": "onChange", "type": "(((event?: React.ChangeEvent | undefined, values?: NumberFormatValues | undefined) => void) & React.ChangeEventHandler) | undefined", "required": false, "description": "Callback, вызываемый при изменении значения в поле ввода.\nПринимает событие изменения (ChangeEvent) и объект NumberFormatValues:\n```\nfloatValue: number | undefined;\nformattedValue: string;\nvalue: string;\n```\nОбработчик изменения элемента формы" }, { "name": "optional", "type": "boolean | undefined", "required": false, "description": "Флаг необязательности поля" }, { "name": "optionalText", "type": "string | undefined", "required": false, "description": "Подпись для указания необязательности поля" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\" | undefined", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right" }, { "name": "suffix", "type": "string | undefined", "required": false, "description": "Суффикс текста в поле ввода." }, { "name": "thousandSeparator", "type": "string | boolean | undefined", "required": false, "description": "Разделитель тысяч.\nМожет быть строкой (например, \",\") или булевым значением.", "default": "' ' (пробел)" }, { "name": "thousandsGroupStyle", "type": "\"none\" | \"thousand\" | \"lakh\" | \"wan\" | undefined", "required": false, "description": "Стиль группировки тысяч:\n- 'thousand' (123 456 789),\n- 'lakh' (индийский стиль, 12 34 56 789),\n- 'wan' (китайский стиль, 1 2345 6789),\n- 'none' (без группировки)." }, { "name": "appearance", "type": "\"default\" | \"clear\" | \"viewMode\" | undefined", "required": false, "description": "" }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "chips", "type": "TextFieldPrimitiveValue[] | undefined", "required": false, "description": "" }, { "name": "chipType", "type": "\"default\" | \"text\" | undefined", "required": false, "description": "" }, { "name": "chipValidator", "type": "((value: string) => { view?: string | undefined; }) | ((value: string) => { view?: string | undefined; }) | ((value: string) => { view?: string | undefined; }) | ((value: string) => { view?: string | undefined; }) | ((value: string) => { view?: string | undefined; }) | ((value: string) => { view?: string | undefined; }) | ((value: string) => { view?: string | undefined; }) | ((value: string) => { …", "required": false, "description": "" }, { "name": "chipView", "type": "\"default\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"accent\" | undefined", "required": false, "description": "" }, { "name": "clear", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "contentLeft", "type": "React.ReactElement> | undefined", "required": false, "description": "" }, { "name": "contentRight", "type": "React.ReactElement> | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false, "description": "" }, { "name": "enumerationType", "type": "\"plain\" | \"chip\" | undefined", "required": false, "description": "" }, { "name": "hasDivider", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "hintContentLeft", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "hintHasArrow", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "hintOffset", "type": "[number, number] | undefined", "required": false, "description": "" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[] | undefined", "required": false, "description": "" }, { "name": "hintPortal", "type": "string | React.RefObject | undefined", "required": false, "description": "" }, { "name": "hintSize", "type": "\"s\" | \"m\" | undefined", "required": false, "description": "" }, { "name": "hintTargetIcon", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "hintTargetPlacement", "type": "\"inner\" | \"outer\" | undefined", "required": false, "description": "" }, { "name": "hintText", "type": "string | undefined", "required": false, "description": "" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\" | undefined", "required": false, "description": "" }, { "name": "hintView", "type": "\"default\" | undefined", "required": false, "description": "" }, { "name": "hintWidth", "type": "string | undefined", "required": false, "description": "" }, { "name": "leftHelper", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "onChangeChips", "type": "((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimitiveValue[]) => void) | ((value: TextFieldPrimit…", "required": false, "description": "" }, { "name": "onClear", "type": "(() => void) | undefined", "required": false, "description": "" }, { "name": "onSearch", "type": "(((value: string, event?: React.KeyboardEvent | undefined) => void) & ((value: string, event?: React.KeyboardEvent | undefined) => void)) | (((value: string, event?: React.KeyboardEvent | undefined) => void) & ((value: string, event?: React.KeyboardEvent | undefined) => void)) | (((value: string, event?: React.KeyboardEvent Подробнее о типах и пропсах — [NumberFormatAmount API](?path=/docs/локальные-компоненты-numberformatamount-api--docs)", "apiDocs": "# NumberFormatAmount API\n\n## NumberFormatAmountProps\n\n```typescript\ntype NumberFormatAmountProps = Omit;\n```\n\nКомпонент наследует все пропсы атомарного [NumberFormat](https://plasma.sberdevices.ru/sdds-finai/components/number-format/) и добавляет `onClear?: () => void` — колбэк для кнопки очистки.", "curatedStories": [ { "exportName": "Default", "displayName": "Default", "type": "full-code", "code": "import { NumberFormatAmount } from '@daisforge/ui';\n\n(args: NumberFormatAmountProps) => {\n const [value, setValue] = useState('');\n\n return (\n
\n setValue(e?.target?.value ?? '')}\n onClear={() => setValue('')}\n />\n
\n );\n }" }, { "exportName": "Sizes", "displayName": "Размеры", "type": "full-code", "code": "import { NumberFormatAmount } from '@daisforge/ui';\n\n(args: NumberFormatAmountProps) => {\n const sizes = ['s', 'xs'] as const;\n const [values, setValues] = useState>({\n s: '123456.78',\n xs: '123456.78',\n });\n\n return (\n \n {sizes.map((size) => (\n \n setValues((prev) => ({\n ...prev,\n [size]: e?.target?.value ?? '',\n }))\n }\n onClear={() => setValues((prev) => ({ ...prev, [size]: '' }))}\n />\n ))}\n \n );\n }" }, { "exportName": "WithClear", "displayName": "Различные варианты", "type": "full-code", "code": "import { NumberFormatAmount } from '@daisforge/ui';\n\n(args: NumberFormatAmountProps) => {\n const [value1, setValue1] = useState('123456.78');\n const [value2, setValue2] = useState('999.99');\n const [value3, setValue3] = useState('');\n const [value4, setValue4] = useState('500');\n\n return (\n \n setValue1(e?.target?.value ?? '')}\n onClear={() => setValue1('')}\n />\n\n }\n onChange={(e) => setValue2(e?.target?.value ?? '')}\n onClear={() => setValue2('')}\n />\n\n }\n onChange={(e) => setValue3(e?.target?.value ?? '')}\n onClear={() => setValue3('')}\n />\n\n }\n onClear={() => {}}\n />\n\n }\n onClear={() => {}}\n />\n\n }\n onChange={(e) => setValue4(e?.target?.value ?? '')}\n />\n \n );\n }" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { NumberFormatAmount } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Default", "displayName": "Default", "type": "full-code", "code": "import { NumberFormatAmount } from '@daisforge/ui';\n\n(args: NumberFormatAmountProps) => {\n const [value, setValue] = useState('');\n\n return (\n
\n setValue(e?.target?.value ?? '')}\n onClear={() => setValue('')}\n />\n
\n );\n }" }, { "exportName": "Sizes", "displayName": "Размеры", "type": "full-code", "code": "import { NumberFormatAmount } from '@daisforge/ui';\n\n(args: NumberFormatAmountProps) => {\n const sizes = ['s', 'xs'] as const;\n const [values, setValues] = useState>({\n s: '123456.78',\n xs: '123456.78',\n });\n\n return (\n \n {sizes.map((size) => (\n \n setValues((prev) => ({\n ...prev,\n [size]: e?.target?.value ?? '',\n }))\n }\n onClear={() => setValues((prev) => ({ ...prev, [size]: '' }))}\n />\n ))}\n \n );\n }" }, { "exportName": "WithClear", "displayName": "Различные варианты", "type": "full-code", "code": "import { NumberFormatAmount } from '@daisforge/ui';\n\n(args: NumberFormatAmountProps) => {\n const [value1, setValue1] = useState('123456.78');\n const [value2, setValue2] = useState('999.99');\n const [value3, setValue3] = useState('');\n const [value4, setValue4] = useState('500');\n\n return (\n \n setValue1(e?.target?.value ?? '')}\n onClear={() => setValue1('')}\n />\n\n }\n onChange={(e) => setValue2(e?.target?.value ?? '')}\n onClear={() => setValue2('')}\n />\n\n }\n onChange={(e) => setValue3(e?.target?.value ?? '')}\n onClear={() => setValue3('')}\n />\n\n }\n onClear={() => {}}\n />\n\n }\n onClear={() => {}}\n />\n\n }\n onChange={(e) => setValue4(e?.target?.value ?? '')}\n />\n \n );\n }" }, { "exportName": "Usage1", "displayName": "Использование в NumberFormatAmount.tsx", "type": "usage", "code": "}\n onChange={(e) => setValue3(e?.target?.value ?? '')}\n onClear={() => setValue3('')}\n />", "sourceFile": "packages/vite-project/src/pages/NumberFormatAmount.tsx" } ] }, "NumberInput": { "name": "NumberInput", "group": "components", "folderName": "NumberInput", "role": "primary", "description": "Числовое поле со стрелками инкремента/декремента и ограничением min/max", "props": [ { "name": "allowLeadingZeros", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "allowNegative", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "decimalScale", "type": "number | undefined", "required": false, "description": "" }, { "name": "decimalSeparator", "type": "string | undefined", "required": false, "description": "" }, { "name": "defaultValue", "type": "string | number | undefined", "required": false, "description": "" }, { "name": "fixedDecimalScale", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "isAllowed", "type": "((values: NumberFormatValues) => boolean) | ((values: NumberFormatValues) => boolean) | undefined", "required": false, "description": "" }, { "name": "thousandSeparator", "type": "string | boolean | undefined", "required": false, "description": "" }, { "name": "thousandsGroupStyle", "type": "\"none\" | \"thousand\" | \"lakh\" | \"wan\" | undefined", "required": false, "description": "" }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/NumberInput/NumberInput.d.ts", "type": "wrapper", "atomicBase": "NumberInput", "category": "Локальные компоненты", "keywords": [ "степпер", "increment decrement", "числовой степпер" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "clear", "type": "boolean", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customDecrementButton", "type": "ReactNode", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "customIncrementButton", "type": "ReactNode", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "decrementIcon", "type": "ReactNode", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "displayWithoutValue", "type": "\"input\" | \"increment\" | \"decrement\"", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "incrementIcon", "type": "ReactNode", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "inputBackgroundType", "type": "\"clear\" | \"fill\"", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isLoading", "type": "boolean", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isManualInput", "type": "boolean", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "limitBehavior", "type": "\"hidden\" | \"disabled\"", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "loader", "type": "ReactNode", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "max", "type": "number", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "min", "type": "number", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "((event: SyntheticEvent | null, value: string | number) => void)", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onDecrement", "type": "((value: number) => void)", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onIncrement", "type": "((value: number) => void)", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "precision", "type": "number", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "segmentation", "type": "\"default\" | \"segmented\" | \"solid\"", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shape", "type": "\"pilled\" | \"cornered\"", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\"", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "step", "type": "number", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textAfter", "type": "string", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textBefore", "type": "string", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"accent\" | \"secondary\"", "required": false, "inheritedFrom": "NumberInput", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { NumberInput } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Состояния Состояния", "type": "vendor", "code": "import React from 'react';\nimport { NumberInput } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Быстрый старт", "type": "vendor", "code": "import React, { useState } from 'react';\nimport { NumberInput } from '@daisforge/ui';\nexport function App() {\n const [value, setValue] = useState(5);\n return (\n
\n setValue(newValue)}\n />\n
\n );\n}" } ] }, "Overlay": { "name": "Overlay", "group": "components", "folderName": "Overlay", "role": "primary", "description": "Затемняющая подложка позади Modal, Toast и других всплывающих элементов", "props": [ { "name": "backgroundColorProperty", "type": "string", "required": true, "description": "Значение цвета подложки." }, { "name": "zIndex", "type": "string", "required": true, "description": "Значение z-index для подложки." }, { "name": "isClickable", "type": "boolean | undefined", "required": false, "description": "Является ли подложка кликабельной.", "default": "true" }, { "name": "onOverlayClick", "type": "((event: React.MouseEvent) => void) | undefined", "required": false, "description": "Обработчик клика при нажатии на подложку." }, { "name": "transparent", "type": "boolean | undefined", "required": false, "description": "Нужно ли сделать подложку прозрачной (при открытии нескольких всплывающих компонент)." }, { "name": "withBlur", "type": "boolean | undefined", "required": false, "description": "Нужно ли применять blur для подложки." } ], "propsTypeName": "OverlayProps", "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Overlay/Overlay.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "затемнение фона", "backdrop", "оверлей под модалкой" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Overlay } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "PageTitle": { "name": "PageTitle", "group": "components", "folderName": "PageTitle", "role": "primary", "description": "Заголовок страницы с хлебными крошками, кнопкой назад и блоком действий справа", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для основного контейнера" }, { "name": "breadcrumbs", "type": "(PropsType<{ view: { default: PolymorphicClassName; }; size: { l: PolymorphicClassName; m: PolymorphicClassName; s: PolymorphicClassName; xs: PolymorphicClassName; }; }> & React.HTMLAttributes & { view?: string | undefined; size?: string | undefined; separator?: React.ReactNode; items: BreadcrumbsItem[]; showItems?: number | undefined; } & React.RefAttributes) | und…", "required": false, "description": "Пропсы для Breadcrumbs компонента\nПо умолчанию size='m'" }, { "name": "onBackClick", "type": "(() => void) | undefined", "required": false, "description": "Callback при клике на кнопку назад" }, { "name": "rightSlot", "type": "PageTitleAdaptiveSlot", "required": false, "description": "Контент справа (прижат к правому краю и к нижней границе).\nМожно передать ReactNode или callback с размерами для адаптива." }, { "name": "showBackButton", "type": "boolean | undefined", "required": false, "description": "Показывать ли кнопку со стрелкой назад слева от title" }, { "name": "subtitle", "type": "string | undefined", "required": false, "description": "Подзаголовок/описание страницы (текст)" }, { "name": "subtitleTypographyProps", "type": "Omit, \"children\" | \"variant\"> | undefined", "required": false, "description": "Пропсы для TypographyWithAutoTooltip в который обернут subtitle" }, { "name": "titleSlot", "type": "PageTitleAdaptiveSlot", "required": false, "description": "Кастомный слот правее заголовка.\nМожно передать ReactNode или callback с размерами для адаптива." }, { "name": "titleTypographyProps", "type": "Omit, \"children\" | \"variant\"> | undefined", "required": false, "description": "Пропсы для TypographyWithAutoTooltip в который обернут title" }, { "name": "disableMediaAdaptive", "type": "boolean | undefined", "required": false, "description": "Отключает принудительный адаптив компонента на viewport <= 1280px.", "deprecated": true, "default": "false" } ], "propsTypeName": "PageTitleProps", "sourceFile": "packages/ui-kit/src/components/PageTitle/PageTitle.tsx", "type": "composition", "category": "Композиции", "keywords": [ "заголовок страницы", "breadcrumbs", "page header" ], "docs": "# PageTitle\n\nКомпонент заголовка страницы с опциональными breadcrumbs, кнопкой «назад», подзаголовком и блоком действий.\n\n## Ключевые особенности\n\n- Опциональные breadcrumbs с настраиваемым размером (по умолчанию `size='m'`)\n- Кнопка «назад» слева от заголовка (`showBackButton`, `onBackClick`)\n- Заголовок и подзаголовок с автоматическим тултипом при обрезке текста\n- Кастомный слот правее заголовка (`titleSlot`)\n- Правый блок действий (`rightSlot`), прижатый к правому краю\n\n## Особенности\n\n- Компонент всегда использует `TypographyWithAutoTooltip` для `title` и `subtitle`\n- Если `tooltipText` не передан, текстом тултипа используется сам `title` или `subtitle`\n- Слоты `titleSlot` и `rightSlot` принимают `ReactNode` или callback с размерами для адаптива\n- По умолчанию адаптив на viewport `<= 1280px` включен; временно отключить его можно через deprecated-проп `disableMediaAdaptive`\n- Код примеров отображается через `storySourceDoc`, вкладка `Show code` синхронизирована с реализацией\n\n## Использование адаптивных слотов\n\nЕсли слот не должен менять размеры, передавайте обычный `ReactNode`:\n\n```tsx\n\n Действие\n \n }\n/>\n```\n\nЕсли в слоте есть кнопки, которые должны уменьшаться на 1280px, передавайте callback и используйте `buttonSize` из аргумента:\n\n```tsx\n (\n \n \n \n \n )}\n/>\n```\n\nРазмер, который приходит в callback:\n\n```\nbuttonSize\n| viewport <= 1280px | viewport > 1280px |\n| xs | s |\n```\n\n> Подробнее о типах и пропсах — [PageTitle API](?path=/docs/композиции-pagetitle-api--docs)", "apiDocs": "# PageTitle API\n\n## PageTitleProps\n\n```typescript\ntype PageTitleProps = {\n /**\n * Заголовок страницы (текст)\n */\n title?: string;\n /**\n * Пропсы для TypographyWithAutoTooltip в который обернут title\n */\n titleTypographyProps?: Omit<\n TypographyWithAutoTooltipProps<'H2'>,\n 'children' | 'variant'\n >;\n /**\n * Подзаголовок/описание страницы (текст)\n */\n subtitle?: string;\n /**\n * Пропсы для TypographyWithAutoTooltip в который обернут subtitle\n */\n subtitleTypographyProps?: Omit<\n TypographyWithAutoTooltipProps<'BodyS'>,\n 'children' | 'variant'\n >;\n /**\n * Кастомный слот правее заголовка.\n * Можно передать ReactNode или callback с размерами для адаптива.\n */\n titleSlot?: PageTitleAdaptiveSlot;\n /**\n * Контент справа (прижат к правому краю и к нижней границе).\n * Можно передать ReactNode или callback с размерами для адаптива.\n */\n rightSlot?: PageTitleAdaptiveSlot;\n /**\n * Отключает принудительный адаптив компонента на viewport <= 1280px.\n *\n * @deprecated Используйте только в крайних случаях, когда команда временно не готова адаптировать вёрстку под 1280px.\n *\n * @remarks\n * При `true` компонент использует desktop-размеры для кастомных слотов и кнопки назад даже на viewport <= 1280px.\n * Это временный escape hatch, не основной сценарий использования.\n *\n * @default false\n */\n disableMediaAdaptive?: boolean;\n /**\n * Пропсы для Breadcrumbs компонента\n * По умолчанию size='m'\n */\n breadcrumbs?: BreadcrumbsPropsComp;\n /**\n * Показывать ли кнопку со стрелкой назад слева от title\n */\n showBackButton?: boolean;\n /**\n * Callback при клике на кнопку назад\n */\n onBackClick?: () => void;\n /**\n * Кастомные стили styled-components для основного контейнера\n */\n $css?: string | CSSObject | FlattenSimpleInterpolation;\n /**\n * Дополнительный className для корневого элемента\n */\n className?: string;\n};\n\nexport type PageTitleIconButtonProps = ComponentProps & {\n iconSize?: ComponentProps['size'];\n};\n```\n\n## PageTitleSlotSizesProps\n\n```typescript\ntype PageTitleSlotSizesProps = {\n /**\n * Размер кнопок в кастомных слотах\n */\n buttonSize: 's' | 'xs';\n};\n```\n\n## PageTitleAdaptiveSlot\n\n```typescript\ntype PageTitleAdaptiveSlot =\n | ReactNode\n | ((props: PageTitleSlotSizesProps) => ReactNode);\n```", "curatedStories": [ { "exportName": "Default", "displayName": "PageTitle", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n alert('onBackClick')}\n title=\"Заголовок страницы\"\n subtitle=\"Описание страницы или подзаголовок\"\n rightSlot={({ buttonSize }: PageTitleSlotSizesProps) => (\n \n \n \n \n )}\n />\n )" }, { "exportName": "WithTitleSlot", "displayName": "PageTitle с кастомным слотом", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n alert('onBackClick')}\n title=\"Заголовок страницы\"\n subtitle=\"Описание страницы или подзаголовок\"\n titleSlot={\n \n }\n rightSlot={({ buttonSize }: PageTitleSlotSizesProps) => (\n \n \n \n \n )}\n />\n )" }, { "exportName": "WithoutBreadcrumbs", "displayName": "PageTitle без breadcrumbs", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n (\n \n \n \n \n )}\n />\n )" }, { "exportName": "LongTitle", "displayName": "PageTitle с длинным заголовком", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n (\n \n \n \n \n )}\n />\n )" } ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { PageTitle } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Default", "displayName": "PageTitle", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n alert('onBackClick')}\n title=\"Заголовок страницы\"\n subtitle=\"Описание страницы или подзаголовок\"\n rightSlot={({ buttonSize }: PageTitleSlotSizesProps) => (\n \n \n \n \n )}\n />\n )" }, { "exportName": "WithTitleSlot", "displayName": "PageTitle с кастомным слотом", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n alert('onBackClick')}\n title=\"Заголовок страницы\"\n subtitle=\"Описание страницы или подзаголовок\"\n titleSlot={\n \n }\n rightSlot={({ buttonSize }: PageTitleSlotSizesProps) => (\n \n \n \n \n )}\n />\n )" }, { "exportName": "WithoutBreadcrumbs", "displayName": "PageTitle без breadcrumbs", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n (\n \n \n \n \n )}\n />\n )" }, { "exportName": "LongTitle", "displayName": "PageTitle с длинным заголовком", "type": "full-code", "code": "import { PageTitle } from '@daisforge/ui';\nimport { Button, Flow, IconButton } from '@daisforge/ui';\nimport { IconPlus } from '@daisforge/ui/icons';\nimport type { PageTitleSlotSizesProps } from '@daisforge/ui';\n\n() => (\n (\n \n \n \n \n )}\n />\n )" } ] }, "Pagination": { "name": "Pagination", "group": "components", "folderName": "Pagination", "role": "primary", "description": "Постраничная навигация по спискам и таблицам с быстрым переходом и perPage", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." } ], "propsTypeName": "PaginationProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Pagination/Pagination.d.ts", "type": "wrapper", "atomicBase": "Pagination", "category": "Локальные компоненты", "keywords": [ "постраничная навигация", "page navigation", "разбивка на страницы", "пагинация" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "count", "type": "number", "required": false, "description": "Количество страниц", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultPerPage", "type": "number", "required": false, "description": "Выбранное количество результатов на странице по умолчанию", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultValue", "type": "number", "required": false, "description": "Выбранная страница по умолчанию", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabledPages", "type": "string[]", "required": false, "description": "Заблокированные страницы", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasPerPage", "type": "boolean", "required": false, "description": "Выбор количества результатов на странице", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasQuickJump", "type": "boolean", "required": false, "description": "Выбор страницы через Input", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isCommonButtonStyles", "type": "boolean", "required": false, "description": "Авто изменение стиля кнопок в ButtonGroup", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftContent", "type": "ReactNode", "required": false, "description": "Левый контент", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "listWidth", "type": "Width", "required": false, "description": "Значение css width для выпадающего списка.", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onBlurQuickJump", "type": "((e: FocusEvent) => void)", "required": false, "description": "Функция которая исполняeтся при потере фокусе на поле ввода перехода по страницам", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "((page?: number, perPage?: number) => void) | undefined", "required": false, "description": "Функция которая исполняeтся при изменении `page`, `perPage`", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onFocusQuickJump", "type": "((e: FocusEvent) => void)", "required": false, "description": "Функция которая исполняeтся при фокусе на поле ввода перехода по страницам", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "perPage", "type": "number", "required": false, "description": "Выбранное количество результатов на странице", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "perPageList", "type": "number[]", "required": false, "description": "Список результатов на странице", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pilled", "type": "boolean", "required": false, "description": "Скругление кнопки", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placeholderQuickJump", "type": "string", "required": false, "description": "Placeholder TextField'a для быстрого прыжка на страницу", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "rightContent", "type": "ReactNode", "required": false, "description": "Правый контент", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "singleLine", "type": "boolean", "required": false, "description": "Перенос строки для helperText", "default": "false", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "description": "Размер", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "slots", "type": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15", "required": false, "description": "Количество PageButtons", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "square", "type": "boolean", "required": false, "description": "Равная ширина и высота кнопки", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textPerPage", "type": "string", "required": false, "description": "Текст для выбора кол-ва результатов на странице", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "textQuickJump", "type": "string", "required": false, "description": "Текст для быстрого прыжка на страницу", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "type", "type": "\"default\" | \"compact\"", "required": false, "description": "Тип обычный или компактный", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "number", "required": false, "description": "Выбранная страница", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"secondary\"", "required": false, "description": "Вид", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "viewCurrentPage", "type": "\"clear\" | \"default\" | \"secondary\"", "required": false, "description": "Вид выбранной кнопки", "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "helperText", "type": "ReactNode", "required": false, "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangePageValue", "type": "((page?: number) => void)", "required": false, "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangePerPageValue", "type": "((perPage?: number) => void)", "required": false, "inheritedFrom": "Pagination", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Pagination } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { Pagination } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Форма кнопок", "type": "vendor", "code": "import React from 'react';\nimport { Pagination } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n
\n );\n}" } ] }, "Popover": { "name": "Popover", "group": "components", "folderName": "Popover", "role": "primary", "description": "Всплывающая панель у элемента-триггера для доп. контента, меню или подсказок", "props": [ { "name": "stretchHeight", "type": "boolean | undefined", "required": false, "description": "Растянуть Popover до границы доступной области по вертикали." } ], "propsTypeName": "PopoverProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Popover/Popover.d.ts", "type": "wrapper", "atomicBase": "Popover", "category": "Локальные компоненты", "keywords": [ "контекстное меню", "dropdown контент", "всплывающая подсказка" ], "chooseWhen": "Стабильная версия на текуший момент — без ресайза и явного выбора триггера hover/click/focus. Нужен ресайз или гибкие триггеры — PopoverBeta. В новых проектах - PopoverBeta. Если не устроил Popover, то PopoverBeta", "hasCuratedMeta": true, "inheritedProps": [ { "name": "animated", "type": "boolean", "required": false, "description": "Анимированное появление Popover", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnEsc", "type": "boolean", "required": false, "description": "Закрывать окно при нажатии ESC.", "default": "true", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeOnOverlayClick", "type": "boolean", "required": false, "description": "Закрывать окно при нажатии вне области окна. (Если trigger === 'click')", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "frame", "type": "string | RefObject", "required": false, "description": "В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasArrow", "type": "boolean", "required": false, "description": "Есть ли стрелка над элементом.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isFocusTrapped", "type": "boolean", "required": false, "description": "Блокировать ли фокус на всплывающем окне.", "default": "true", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "offset", "type": "[number, number]", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 0]", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onResizeEnd", "type": "((resizableContainer?: RefObject) => void)", "required": false, "description": "Обработчик остановки ресайза.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onResizeStart", "type": "((resizableContainer?: RefObject) => void)", "required": false, "description": "Обработчик начала ресайза.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onToggle", "type": "((isOpen: boolean, event: Event | SyntheticEvent) => void)", "required": false, "description": "Событие сворачивания/разворачивания всплывающего окна.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "opened", "type": "boolean", "required": false, "description": "Всплывающее окно раскрыто или нет.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "Placement | ComputedPlacement[]", "required": false, "description": "Сторона открытия окна относительно target элемента.", "default": "auto", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "preventOverflow", "type": "boolean", "required": false, "description": "Предотвратить автоматическое изменение положения.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "resizable", "type": "boolean | { disabled?: boolean; directions?: ResizeDirections; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; ... 6 more ...; hiddenIcons?: PlacementMixed[] | undefined; } | undefined", "required": false, "description": "Настройка resizable-режима.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "target", "type": "string | number | boolean | ReactElement> | ReactFragment | ReactPortal | ((instance: HTMLElement | null) => void) | RefObject<...> | null", "required": false, "description": "Элемент или ref на элемент, рядом с которым произойдет вызов всплывающего окна.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "trigger", "type": "PopoverTrigger", "required": false, "description": "Способ открытия всплывающего окна - наведение или клик мышью.", "default": "click", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "usePortal", "type": "boolean", "required": false, "description": "Находится ли в портале.", "default": "false", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "string", "required": false, "description": "Значение z-index для Popover.", "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isOpen", "type": "boolean", "required": false, "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "inheritedFrom": "Popover", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Popover } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Быстрый старт", "type": "vendor", "code": "\n {/* border-radius: 20px */}\n ...\n \n" }, { "exportName": "Vendor2", "displayName": "Resizable Resizable Чтобы иметь возможность растягивать Popover нужно настроить свойство resizable . Формат следующий", "type": "vendor", "code": "/**\n * Настройка resizable-режима.\n */\ntype resizable = {\n resizable?:\n | boolean\n | {\n /**\n * Включение/выключение ресайза.\n * @default false\n */\n disabled?: boolean;\n /**\n * Направления для ресайза.\n */\n directions?: ResizeDirections;\n /**\n * Начальный размер окна ресайза.\n */\n defaultSize?: { width?: number; height?: number };\n /**\n * Минимальная ширина ресайза в px.\n */\n minWidth?: number;\n /**\n * Минимальная высота ресайза в px.\n */\n minHeight?: number;\n /**\n * Максимальная ширина ресайза в px.\n */\n maxWidth?: number;\n /**\n * Максимальная высота ресайза в px.\n */\n maxHeight?: number;\n /**\n * Кастомные иконки ресайза.\n */\n icons?: {\n topRight?: ReactNode;\n bottomRight?: ReactNode;\n bottomLeft?: ReactNode;\n topLeft?: ReactNode;\n };\n /**\n * Размер иконки ресайза.\n * @default s\n */\n iconSize?: 'xs' | 's' | 'm';\n /**\n * Скрывать ли иконку для ресайза.\n * @default false\n */\n hiddenIcons?: PopupPlacementMixed[];\n };\n}" } ] }, "PopoverBeta": { "name": "PopoverBeta", "group": "components", "folderName": "PopoverBeta", "role": "primary", "description": "Бета-версия Popover с ресайзом, порталом и триггерами hover/click/focus", "props": [ { "name": "target", "type": "React.ReactElement>", "required": true, "description": "Целевой элемент взаимодействия с всплывающим окном." }, { "name": "defaultOpened", "type": "boolean | undefined", "required": false, "description": "Раскрыто ли всплывающее окно по умолчанию.", "default": "false" }, { "name": "delayClose", "type": "number | undefined", "required": false, "description": "Задержка перед скрытием, мс. (При trigger === 'hover')", "default": "0" }, { "name": "delayOpen", "type": "number | undefined", "required": false, "description": "Задержка перед раскрытием, мс. (При trigger === 'hover')", "default": "0" }, { "name": "flip", "type": "boolean | undefined", "required": false, "description": "Коррекция placement, если всплывающее окно находится за пределами экрана.", "default": "false" }, { "name": "hasTail", "type": "boolean | undefined", "required": false, "description": "Включение хвостика у всплывающего окна.", "default": "true" }, { "name": "offset", "type": "number | undefined", "required": false, "description": "Отступ всплывающего окна относительно target.", "default": "0" }, { "name": "onResizeEnd", "type": "((resizableContainer?: React.RefObject | undefined) => void) | undefined", "required": false, "description": "Обработчик остановки ресайза." }, { "name": "onResizeStart", "type": "((resizableContainer?: React.RefObject | undefined) => void) | undefined", "required": false, "description": "Обработчик начала ресайза." }, { "name": "onToggle", "type": "((isOpen: boolean) => void) | undefined", "required": false, "description": "Событие сворачивания/разворачивания всплывающего окна." }, { "name": "opened", "type": "boolean | undefined", "required": false, "description": "Управление скрытием/раскрытием всплывающего окна." }, { "name": "outsideClick", "type": "boolean | undefined", "required": false, "description": "Закрывать окно при нажатии вне области окна. (При trigger === 'click')", "default": "true" }, { "name": "placement", "type": "Placement | undefined", "required": false, "description": "Сторона раскрытия окна относительно target-элемента.", "default": "bottom" }, { "name": "portal", "type": "string | React.RefObject | undefined", "required": false, "description": "Портал для всплывающего окна.\nПринимает id контейнера или ref.\nЕсли контейнер с заданным id не найден на странице,\nто он будет автоматически создан перед .", "default": "Без использования portal всплывающее окно рендерится перед ." }, { "name": "resizable", "type": "boolean | { disabled?: boolean | undefined; directions?: ResizeDirections | undefined; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; minWidth?: number | undefined; minHeight?: number | undefined; maxWidth?: number | undefined; maxHeight?: number | undefined; icons?: { topRight?: React.ReactNode; bottomRight?: React.ReactNode; bottomLeft?: React.ReactNode; …", "required": false, "description": "Настройка resizable-режима.", "default": "false" }, { "name": "shift", "type": "boolean | undefined", "required": false, "description": "Смещение всплывающего окна при соприкосновении с границами экрана.", "default": "false" }, { "name": "size", "type": "\"s\" | \"m\" | undefined", "required": false, "description": "Размер компонента." }, { "name": "trigger", "type": "\"hover\" | \"click\" | \"focus\" | undefined", "required": false, "description": "Способ скрытия/раскрытия всплывающего окна.", "default": "click" }, { "name": "view", "type": "\"action\" | \"info\" | undefined", "required": false, "description": "Вид компонента." }, { "name": "zIndex", "type": "number | undefined", "required": false, "description": "CSS-свойство z-index всплывающего окна.", "default": "1000" }, { "name": "appearance", "type": "\"default\" | \"closeInner\" | undefined", "required": false, "description": "" } ], "propsTypeName": "PopoverBetaCompProps", "sourceFile": "node_modules/@salutejs/sdds-finai/dist/beta/types/Popover/Popover.d.ts", "type": "wrapper", "atomicBase": "Popover", "atomicSubpath": "beta", "category": "Локальные компоненты", "keywords": [ "изменяемый размер попапа", "resizable popup", "триггер наведения" ], "chooseWhen": "Новая проработанная версия — нужен изменяемый размер попапа, явный выбор триггера (hover/click/focus) или рендер в портал — иначе берите стабильный Popover.", "hasCuratedMeta": true, "inheritedProps": [], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { PopoverBeta } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage", "displayName": "Использование в PopoverBeta.tsx", "type": "usage", "code": "PopoverBetaExample}>\n
kek
\n ", "sourceFile": "packages/vite-project/src/pages/PopoverBeta.tsx" } ] }, "PopoverDFBody": { "name": "PopoverDFBody", "group": "components", "folderName": "PopoverDF", "role": "part", "description": "Область содержимого всплывающего окна PopoverDF с настройкой размеров и отступов", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ], "propsTypeName": "PopoverDFBodyProps", "sourceFile": "packages/ui-kit/src/components/PopoverDF/components/Body.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "тело поповера", "содержимое всплывающего окна", "popover content" ], "hasCuratedMeta": true, "parentComponent": "PopoverDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "PopoverDF", "part": "Body" }, "importPath": "@daisforge/ui", "importStatement": "import { PopoverDFBody } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopoverDF.stories.tsx", "type": "usage", "code": "Контент всплывающего окна.", "sourceFile": "packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopoverDF.stories.tsx", "type": "usage", "code": "\n \n ", "sourceFile": "packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx" } ] }, "PopoverDFFooter": { "name": "PopoverDFFooter", "group": "components", "folderName": "PopoverDF", "role": "part", "description": "Нижний блок всплывающего окна PopoverDF для кнопок и действий", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ], "propsTypeName": "PopoverDFFooterProps", "sourceFile": "packages/ui-kit/src/components/PopoverDF/components/Footer.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "футер поповера", "кнопки в поповере", "popover footer" ], "hasCuratedMeta": true, "parentComponent": "PopoverDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "PopoverDF", "part": "Footer" }, "importPath": "@daisforge/ui", "importStatement": "import { PopoverDFFooter } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopoverDF.stories.tsx", "type": "usage", "code": "\n \n ", "sourceFile": "packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopoverDF.stories.tsx", "type": "usage", "code": "\n \n ", "sourceFile": "packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx" } ] }, "PopoverDFHeader": { "name": "PopoverDFHeader", "group": "components", "folderName": "PopoverDF", "role": "part", "description": "Шапка PopoverDF: заголовок, описание, кнопка закрытия и нижний доп. блок", "props": [ { "name": "bottomBlock", "type": "React.ReactNode", "required": false, "description": "Нижний блок header на всю ширину.\nУдобен для кастомных слотов, фильтров, тегов и другого дополнительного контента." }, { "name": "description", "type": "React.ReactNode", "required": false, "description": "Текст под заголовком в верхней левой части header." }, { "name": "onClose", "type": "(() => void) | undefined", "required": false, "description": "Кастомный обработчик закрытия.\nЕсли не передан, будет использован обработчик закрытия из `PopoverDF`." }, { "name": "showCloseButton", "type": "boolean | undefined", "required": false, "description": "Показывать ли крестик закрытия в правой верхней части header.", "default": "true" }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "Заголовок в верхней левой части header." } ], "propsTypeName": "PopoverDFHeaderProps", "sourceFile": "packages/ui-kit/src/components/PopoverDF/components/Header.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "шапка поповера", "заголовок всплывающего окна", "popover header" ], "hasCuratedMeta": true, "parentComponent": "PopoverDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "PopoverDF", "part": "Header" }, "importPath": "@daisforge/ui", "importStatement": "import { PopoverDFHeader } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopoverDF.stories.tsx", "type": "usage", "code": " : undefined}\n />", "sourceFile": "packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopoverDF.stories.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx" } ] }, "PopoverDF": { "name": "PopoverDF", "group": "components", "folderName": "PopoverDF", "role": "primary", "description": "Popover с готовыми Header/Body/Footer и управлением состоянием открытия", "props": [ { "name": "target", "type": "React.ReactElement>", "required": true, "description": "Целевой элемент взаимодействия с всплывающим окном." }, { "name": "size", "type": "PopoverDFSize | undefined", "required": false, "description": "Размер PopoverDF.\nВлияет на внутренние отступы и типографику header.", "default": "'m'" }, { "name": "defaultOpened", "type": "boolean | undefined", "required": false, "description": "Раскрыто ли всплывающее окно по умолчанию.", "default": "false" }, { "name": "delayClose", "type": "number | undefined", "required": false, "description": "Задержка перед скрытием, мс. (При trigger === 'hover')", "default": "0" }, { "name": "delayOpen", "type": "number | undefined", "required": false, "description": "Задержка перед раскрытием, мс. (При trigger === 'hover')", "default": "0" }, { "name": "flip", "type": "boolean | undefined", "required": false, "description": "Коррекция placement, если всплывающее окно находится за пределами экрана.", "default": "false" }, { "name": "hasTail", "type": "boolean | undefined", "required": false, "description": "Включение хвостика у всплывающего окна.", "default": "true" }, { "name": "offset", "type": "number | undefined", "required": false, "description": "Отступ всплывающего окна относительно target.", "default": "0" }, { "name": "onResizeEnd", "type": "((resizableContainer?: React.RefObject | undefined) => void) | undefined", "required": false, "description": "Обработчик остановки ресайза." }, { "name": "onResizeStart", "type": "((resizableContainer?: React.RefObject | undefined) => void) | undefined", "required": false, "description": "Обработчик начала ресайза." }, { "name": "onToggle", "type": "((isOpen: boolean) => void) | undefined", "required": false, "description": "Событие сворачивания/разворачивания всплывающего окна." }, { "name": "opened", "type": "boolean | undefined", "required": false, "description": "Управление скрытием/раскрытием всплывающего окна." }, { "name": "outsideClick", "type": "boolean | undefined", "required": false, "description": "Закрывать окно при нажатии вне области окна. (При trigger === 'click')", "default": "true" }, { "name": "placement", "type": "Placement | undefined", "required": false, "description": "Сторона раскрытия окна относительно target-элемента.", "default": "bottom" }, { "name": "portal", "type": "string | React.RefObject | undefined", "required": false, "description": "Портал для всплывающего окна.\nПринимает id контейнера или ref.\nЕсли контейнер с заданным id не найден на странице,\nто он будет автоматически создан перед .", "default": "Без использования portal всплывающее окно рендерится перед ." }, { "name": "resizable", "type": "boolean | { disabled?: boolean | undefined; directions?: ResizeDirections | undefined; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; minWidth?: number | undefined; minHeight?: number | undefined; maxWidth?: number | undefined; maxHeight?: number | undefined; icons?: { topRight?: React.ReactNode; bottomRight?: React.ReactNode; bottomLeft?: React.ReactNode; …", "required": false, "description": "Настройка resizable-режима.", "default": "false" }, { "name": "shift", "type": "boolean | undefined", "required": false, "description": "Смещение всплывающего окна при соприкосновении с границами экрана.", "default": "false" }, { "name": "trigger", "type": "\"hover\" | \"click\" | \"focus\" | undefined", "required": false, "description": "Способ скрытия/раскрытия всплывающего окна.", "default": "click" }, { "name": "view", "type": "\"action\" | \"info\" | undefined", "required": false, "description": "Вид компонента." }, { "name": "zIndex", "type": "number | undefined", "required": false, "description": "CSS-свойство z-index всплывающего окна.", "default": "1000" } ], "propsTypeName": "PopoverDFProps", "compoundParts": [ { "name": "Header", "typeName": "PopoverDFHeaderProps", "props": [ { "name": "bottomBlock", "type": "React.ReactNode", "required": false, "description": "Нижний блок header на всю ширину.\nУдобен для кастомных слотов, фильтров, тегов и другого дополнительного контента." }, { "name": "description", "type": "React.ReactNode", "required": false, "description": "Текст под заголовком в верхней левой части header." }, { "name": "onClose", "type": "(() => void) | undefined", "required": false, "description": "Кастомный обработчик закрытия.\nЕсли не передан, будет использован обработчик закрытия из `PopoverDF`." }, { "name": "showCloseButton", "type": "boolean | undefined", "required": false, "description": "Показывать ли крестик закрытия в правой верхней части header.", "default": "true" }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "Заголовок в верхней левой части header." } ] }, { "name": "Body", "typeName": "PopoverDFBodyProps", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ] }, { "name": "Footer", "typeName": "PopoverDFFooterProps", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"form\" | \"pattern\" | \"slot\" | \"style\" | \"title\" | \"view\" | \"s\" | \"input\" | \"search\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" |…", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ] } ], "sourceFile": "packages/ui-kit/src/components/PopoverDF/PopoverDF.tsx", "type": "wrapper", "category": "Локальные компоненты", "hint": "Универсальный Popover. Не путать с AiAgentPopover (для конкретной команды).", "keywords": [ "составной popover", "попап с шапкой", "compound popover" ], "docs": "# PopoverDF\n\n`PopoverDF` — локальная DF-обёртка над [PopoverBeta](https://plasma.sberdevices.ru/sdds-finai/beta/popover/).\n\n## Ключевые особенности\n\n- крестик закрытия живёт в `PopoverDF.Header`\n- доступны `PopoverDF.Header`, `PopoverDF.Body`, `PopoverDF.Footer`\n- доступны размеры `size=\"m\" | \"s\"`\n- `hasTail` можно отключить через `hasTail={false}`\n- при `resizable` иконка ресайза автоматически подстраивается под `placement`\n\n## Compound-компоненты\n\n```ts\nPopoverDF.Header; // Шапка\nPopoverDF.Body; // Контент\nPopoverDF.Footer; // Футер\n```\n\n## Особенности\n\n- если нужен крестик, используйте `PopoverDF.Header`; закрытие привязано к нему\n- для кастомного блока в шапке используйте `bottomBlock`\n- если нужен только контент без шапки и футера, можно оставить только `PopoverDF.Body`\n- `resizable` можно передавать как `true` или как объект конфигурации; по умолчанию `PopoverDF` использует свою resize-иконку с учётом `iconSize`, но пользовательские `icons` переопределяют её\n- для ручной смены угла ресайза используйте нативный `resizable.directions`, например `directions: ['bottom-right']`\n- если `hiddenIcons` не передан, `PopoverDF` автоматически скрывает угловые иконки, которые не входят в `directions`; для нестандартной видимости передайте `hiddenIcons` явно\n- в режиме `resizable` стартовый размер задаётся через `resizable.defaultSize`; фиксированный `style.width` на `PopoverDF` может разъехать видимый popover и resize-контейнер\n- `target` обязателен: `PopoverDF` всегда позиционируется относительно target-элемента\n\n## Кастомный target\n\nЕсли в `target` передаётся кастомный компонент, он должен поддерживать `ref` и пробрасывать его на реальный DOM-элемент. `PopoverDF` использует этот `ref` для позиционирования. Полный рабочий пример доступен в story «Кастомный target».\n\nОписание типов и compound-пропсов — в разделе [API](?path=/docs/локальные-компоненты-popoverdf-api--docs).", "apiDocs": "# PopoverDF API\n\n## PopoverDFProps\n\n```typescript\ntype PopoverDFProps = Omit<\n ComponentProps,\n 'children' | 'appearance' | 'size'\n> &\n PopoverDFBaseProps;\n```\n\n## PopoverDFHeaderProps\n\n```typescript\ntype PopoverDFHeaderProps = Omit & {\n /**\n * Заголовок в верхней левой части header.\n */\n title?: ReactNode;\n /**\n * Текст под заголовком в верхней левой части header.\n */\n description?: ReactNode;\n /**\n * Нижний блок header на всю ширину.\n * Удобен для кастомных слотов, фильтров, тегов и другого дополнительного контента.\n */\n bottomBlock?: ReactNode;\n /**\n * Показывать ли крестик закрытия в правой верхней части header.\n * @default true\n */\n showCloseButton?: boolean;\n /**\n * Кастомный обработчик закрытия.\n * Если не передан, будет использован обработчик закрытия из `PopoverDF`.\n */\n onClose?: () => void;\n};\n```\n\n## PopoverDFBodyProps\n\n```typescript\ntype PopoverDFBodyProps = BoxProps;\n```\n\n## PopoverDFFooterProps\n\n```typescript\ntype PopoverDFFooterProps = BoxProps & {\n children?: ReactNode;\n};\n```\n\n## PopoverDFResizableConfig\n\n```typescript\ntype PopoverDFResizableConfig = Exclude<\n ComponentProps['resizable'],\n boolean | undefined\n>;\n```", "curatedStories": [ { "exportName": "Simple", "displayName": "Simple", "type": "full-code", "code": "import { useState } from 'react';\nimport { Button, Flow, PopoverDF } from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopoverDF.Footer\nfunction FooterActions() {\n return (\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(false);\n\n return (\n setOpened(true)}>Открыть PopoverDF\n }\n opened={opened}\n onToggle={setOpened}\n placement=\"bottom-start\"\n offset={8}\n size=\"m\"\n style={{ width: '320px' }}\n >\n \n Контент поповера\n \n \n \n \n );\n}" }, { "exportName": "Playground", "displayName": "Playground", "type": "full-code", "code": "import { useState } from 'react';\nimport { Button, Flow, PopoverDF } from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopoverDF.Footer\nfunction FooterActions() {\n return (\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(false);\n\n return (\n setOpened(true)}>Открыть PopoverDF\n }\n opened={opened}\n onToggle={setOpened}\n placement=\"bottom\"\n trigger=\"click\"\n size=\"m\"\n hasTail\n offset={8}\n resizable={{\n defaultSize: { width: 320, height: 180 },\n minWidth: 240,\n minHeight: 120,\n iconSize: 's',\n }}\n >\n \n Контент поповера\n \n \n \n \n );\n}" }, { "exportName": "CustomTarget", "displayName": "Кастомный target", "type": "full-code", "code": "import { forwardRef, useState } from 'react';\nimport type { ButtonHTMLAttributes, ForwardedRef } from 'react';\n\nimport { PopoverDF } from '@daisforge/ui';\n\nconst PopoverTarget = forwardRef(PopoverTargetRender);\n${getFuncAsString(\n 'packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx',\n 'PopoverTargetRender',\n)}\n${getFuncAsString(\n 'packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx',\n 'PopoverDFCustomTargetExample',\n)}" } ], "hasCuratedMeta": true, "relatedExports": [ "PopoverDFBody", "PopoverDFFooter", "PopoverDFHeader" ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { PopoverDF } from '@daisforge/ui';", "minimalUsage": "\n {/* части: PopoverDF.Header, PopoverDF.Body, PopoverDF.Footer */}\n", "examples": [ { "exportName": "Simple", "displayName": "Simple", "type": "full-code", "code": "import { useState } from 'react';\nimport { Button, Flow, PopoverDF } from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopoverDF.Footer\nfunction FooterActions() {\n return (\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(false);\n\n return (\n setOpened(true)}>Открыть PopoverDF\n }\n opened={opened}\n onToggle={setOpened}\n placement=\"bottom-start\"\n offset={8}\n size=\"m\"\n style={{ width: '320px' }}\n >\n \n Контент поповера\n \n \n \n \n );\n}" }, { "exportName": "Playground", "displayName": "Playground", "type": "full-code", "code": "import { useState } from 'react';\nimport { Button, Flow, PopoverDF } from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopoverDF.Footer\nfunction FooterActions() {\n return (\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(false);\n\n return (\n setOpened(true)}>Открыть PopoverDF\n }\n opened={opened}\n onToggle={setOpened}\n placement=\"bottom\"\n trigger=\"click\"\n size=\"m\"\n hasTail\n offset={8}\n resizable={{\n defaultSize: { width: 320, height: 180 },\n minWidth: 240,\n minHeight: 120,\n iconSize: 's',\n }}\n >\n \n Контент поповера\n \n \n \n \n );\n}" }, { "exportName": "CustomTarget", "displayName": "Кастомный target", "type": "full-code", "code": "import { forwardRef, useState } from 'react';\nimport type { ButtonHTMLAttributes, ForwardedRef } from 'react';\n\nimport { PopoverDF } from '@daisforge/ui';\n\nconst PopoverTarget = forwardRef(PopoverTargetRender);\n${getFuncAsString(\n 'packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx',\n 'PopoverTargetRender',\n)}\n${getFuncAsString(\n 'packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx',\n 'PopoverDFCustomTargetExample',\n)}" }, { "exportName": "Usage1", "displayName": "Использование в PopoverDF.stories.tsx", "type": "usage", "code": "Открыть PopoverDF}\n placement={placement}\n trigger={trigger}\n defaultOpened={defaultOpened}\n flip={flip}\n shift={shift}\n offset={offset}\n outsideClick={outsideClick}\n delayOpen={delayOpen}\n delayClose={delayClose}\n size={size}\n hasTail={hasTail}\n resizable={resizableConfig}\n style={resizable ? undefined : { width: '320px' }}\n >\n {content}\n ", "sourceFile": "packages/storybook/src/stories/PopoverDF/PopoverDF.stories.tsx" } ] }, "PopupProvider": { "name": "PopupProvider", "group": "components", "folderName": "Popup", "role": "primary", "description": "Провайдер контекста для Popup — задаёт frame позиционирования и SSR-режим", "props": [ { "name": "providerFrame", "type": "string | React.RefObject | undefined", "required": false, "description": "" }, { "name": "UNSAFE_SSR_ENABLED", "type": "boolean | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Popup/PopupContext.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "контекст попапа", "SSR всплывающего окна", "provider для окна" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { PopupProvider } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n
{children}
\n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n {(frameRef) => (\n <>\n \n \n }\n />\n \n \n \n \n \n \n \n \n )}\n \n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Использование Использование Перед использованием убедитесь, что PopupProvider подключен.", "type": "vendor", "code": "import ReactDOM from 'react-dom';\nimport { PopupProvider } from '@daisforge/ui';\nimport { App } from './App';\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);" }, { "exportName": "Vendor2", "displayName": "Провайдер контекста", "type": "vendor", "code": "import ReactDOM from 'react-dom';\nimport { PopupProvider } from '@daisforge/ui';\nimport { App } from './App';\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);" } ] }, "Popup": { "name": "Popup", "group": "components", "folderName": "Popup", "role": "primary", "description": "Базовое всплывающее окно с оверлеем, перетаскиванием и изменением размера", "props": [], "propsTypeName": "PopupProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Popup/Popup.d.ts", "type": "wrapper", "atomicBase": "Popup", "category": "Локальные компоненты", "keywords": [ "модальное окно", "draggable окно", "окно с оверлеем" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "draggable", "type": "boolean", "required": false, "description": "Настройка draggable-режима.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "frame", "type": "string | RefObject", "required": false, "description": "В каком контейнере позиционируется (по умолчанию document), можно также указать id элемента или ref для него.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "offset", "type": "[number, number] | [string, string]", "required": false, "description": "Смещение относительно текущей позиции.\n(x, y) - [number, number], [string, string].\nПри передаче number расчёт в rem.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "opened", "type": "boolean", "required": false, "description": "Отображение Popup.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "overlay", "type": "ReactNode", "required": false, "description": "Соседний элемент для окна в портале.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "PopupPlacement", "required": false, "description": "Позиция на экране\ncenter - по умолчанию\nleft, right, top, bottom и их комбинации", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "popupInfo", "type": "PopupInfo", "required": false, "description": "Дополнительная информация для программного взаимодействия с окном через контекст.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "positionFixed", "type": "boolean", "required": false, "description": "Если `frame` отличается от `document` применяет `position='fixed'`", "default": "false", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "resizable", "type": "boolean | { disabled?: boolean; directions?: ResizeDirections; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; ... 8 more ...; onResizeEnd?: ((resizableContainer?: RefObject<...> | undefined) => void) | undefined; } | undefined", "required": false, "description": "Настройка resizable-режима.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "withAnimation", "type": "boolean", "required": false, "description": "Использовать ли анимацию.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "string", "required": false, "description": "Значение z-index для Popup.", "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "children", "type": "ReactNode", "required": false, "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isOpen", "type": "boolean", "required": false, "inheritedFrom": "Popup", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Popup } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Провайдер контекста", "type": "vendor", "code": "import ReactDOM from 'react-dom';\nimport { PopupProvider } from '@daisforge/ui';\nimport { App } from './App';\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);" }, { "exportName": "Vendor2", "displayName": "Подключение анимации", "type": "vendor", "code": "const StyledPopupTransition = styled(Popup)`\n && > .${PopupClasses.root} {\n opacity: 1;\n transition: opacity 0.5s 0.1s;\n }\n &&.${PopupClasses.endTransition} > .${PopupClasses.root} {\n opacity: 0;\n transition: opacity 0.5s 0.1s;\n }\n`;" } ] }, "PopupDFBody": { "name": "PopupDFBody", "group": "components", "folderName": "PopupDF", "role": "part", "description": "Область содержимого всплывающего окна PopupDF с настройкой размеров и отступов", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"center\" | \"s\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"form\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"search\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"cite\" | …", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ], "propsTypeName": "PopupDFBodyProps", "sourceFile": "packages/ui-kit/src/components/PopupDF/components/Body.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "тело попапа", "содержимое всплывающего окна", "popup content" ], "hasCuratedMeta": true, "parentComponent": "PopupDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "PopupDF", "part": "Body" }, "importPath": "@daisforge/ui", "importStatement": "import { PopupDFBody } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" } ] }, "PopupDFFooter": { "name": "PopupDFFooter", "group": "components", "folderName": "PopupDF", "role": "part", "description": "Нижний блок всплывающего окна PopupDF для кнопок и действий", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"center\" | \"s\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"form\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"search\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"cite\" | …", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ], "propsTypeName": "PopupDFFooterProps", "sourceFile": "packages/ui-kit/src/components/PopupDF/components/Footer.tsx", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "футер попапа", "кнопки в попапе", "popup footer" ], "hasCuratedMeta": true, "parentComponent": "PopupDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "PopupDF", "part": "Footer" }, "importPath": "@daisforge/ui", "importStatement": "import { PopupDFFooter } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" } ] }, "PopupDFHeader": { "name": "PopupDFHeader", "group": "components", "folderName": "PopupDF", "role": "part", "description": "Шапка PopupDF: заголовок, описание, кнопка назад, доп. блок и кнопка закрытия", "props": [ { "name": "description", "type": "React.ReactNode", "required": false, "description": "Текст под заголовком в верхней левой части header." }, { "name": "onBackButtonClick", "type": "(() => void) | undefined", "required": false, "description": "Callback при клике на кнопку со стрелкой назад слева от заголовка." }, { "name": "onClose", "type": "(() => void) | undefined", "required": false, "description": "Кастомный обработчик закрытия.\nЕсли не передан, будет использован обработчик закрытия из `PopupDF`." }, { "name": "rightBlock", "type": "React.ReactNode", "required": false, "description": "Кастомный слот в правой части header, слева от крестика закрытия.\nПрижимается к крестику; если контент широкий — «давит» на title/description\n(уходят в многоточие с тултипом). Максимальная высота — как у крестика\n(32px при `size='l'` и `size='m'`, 24px при `size='s'`), ширина не\nограничена." }, { "name": "showCloseButton", "type": "boolean | undefined", "required": false, "description": "Показывать ли крестик закрытия в правой верхней части header.", "default": "true" }, { "name": "subHeader", "type": "React.ReactNode", "required": false, "description": "Кастомный контент, относящийся по смыслу к header." }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "Заголовок в верхней левой части header." } ], "propsTypeName": "PopupDFHeaderProps", "sourceFile": "packages/ui-kit/src/components/PopupDF/components/Header.tsx", "type": "composition", "category": "Локальные компоненты", "keywords": [ "шапка попапа", "заголовок с кнопкой назад", "popup header" ], "hasCuratedMeta": true, "parentComponent": "PopupDF", "atomicMcpVersion": "0.355.0", "compoundPartOf": { "component": "PopupDF", "part": "Header" }, "importPath": "@daisforge/ui", "importStatement": "import { PopupDFHeader } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": " : undefined}\n rightBlock={\n withRightBlock ? : undefined\n }\n showCloseButton={showCloseButton}\n onBackButtonClick={showBackButton ? () => {} : undefined}\n />", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n Кастомный слот\n \n }\n rightBlock={\n (fullscreen ? collapse() : expand())}\n >\n \n \n }\n />", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" } ] }, "PopupDF": { "name": "PopupDF", "group": "components", "folderName": "PopupDF", "role": "primary", "description": "Popup с готовыми Header/Body/Footer, управлением открытием и ресайзом", "props": [ { "name": "defaultOpened", "type": "boolean | undefined", "required": false, "description": "Начальное состояние открытия в uncontrolled-режиме.", "default": "false" }, { "name": "onToggle", "type": "((opened: boolean) => void) | undefined", "required": false, "description": "Коллбэк смены состояния открытия." }, { "name": "size", "type": "PopupDFSize | undefined", "required": false, "description": "Размер PopupDF.\nВлияет на внутренние отступы и типографику header.", "default": "'m'" }, { "name": "draggable", "type": "boolean | undefined", "required": false, "description": "Настройка draggable-режима." }, { "name": "frame", "type": "string | React.RefObject | undefined", "required": false, "description": "В каком контейнере позиционируется (по умолчанию document), можно также указать id элемента или ref для него." }, { "name": "offset", "type": "[number, number] | [string, string] | undefined", "required": false, "description": "Смещение относительно текущей позиции.\n(x, y) - [number, number], [string, string].\nПри передаче number расчёт в rem." }, { "name": "opened", "type": "boolean | undefined", "required": false, "description": "Отображение Popup." }, { "name": "overlay", "type": "React.ReactNode", "required": false, "description": "Соседний элемент для окна в портале." }, { "name": "placement", "type": "PopupPlacement | undefined", "required": false, "description": "Позиция на экране\ncenter - по умолчанию\nleft, right, top, bottom и их комбинации" }, { "name": "popupInfo", "type": "PopupInfo | undefined", "required": false, "description": "Дополнительная информация для программного взаимодействия с окном через контекст." }, { "name": "positionFixed", "type": "boolean | undefined", "required": false, "description": "Если `frame` отличается от `document` применяет `position='fixed'`", "default": "false" }, { "name": "resizable", "type": "boolean | { disabled?: boolean | undefined; directions?: ResizeDirections | undefined; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; minWidth?: number | undefined; minHeight?: number | undefined; maxWidth?: number | undefined; maxHeight?: number | undefined; icons?: { topRight?: React.ReactNode; bottomRight?: React.ReactNode; bottomLeft?: React.ReactNode; …", "required": false, "description": "Настройка resizable-режима." }, { "name": "withAnimation", "type": "boolean | undefined", "required": false, "description": "Использовать ли анимацию." }, { "name": "zIndex", "type": "string | undefined", "required": false, "description": "Значение z-index для Popup." } ], "propsTypeName": "PopupDFProps", "compoundParts": [ { "name": "Header", "typeName": "PopupDFHeaderProps", "props": [ { "name": "description", "type": "React.ReactNode", "required": false, "description": "Текст под заголовком в верхней левой части header." }, { "name": "onBackButtonClick", "type": "(() => void) | undefined", "required": false, "description": "Callback при клике на кнопку со стрелкой назад слева от заголовка." }, { "name": "onClose", "type": "(() => void) | undefined", "required": false, "description": "Кастомный обработчик закрытия.\nЕсли не передан, будет использован обработчик закрытия из `PopupDF`." }, { "name": "rightBlock", "type": "React.ReactNode", "required": false, "description": "Кастомный слот в правой части header, слева от крестика закрытия.\nПрижимается к крестику; если контент широкий — «давит» на title/description\n(уходят в многоточие с тултипом). Максимальная высота — как у крестика\n(32px при `size='l'` и `size='m'`, 24px при `size='s'`), ширина не\nограничена." }, { "name": "showCloseButton", "type": "boolean | undefined", "required": false, "description": "Показывать ли крестик закрытия в правой верхней части header.", "default": "true" }, { "name": "subHeader", "type": "React.ReactNode", "required": false, "description": "Кастомный контент, относящийся по смыслу к header." }, { "name": "title", "type": "React.ReactNode", "required": false, "description": "Заголовок в верхней левой части header." } ] }, { "name": "Body", "typeName": "PopupDFBodyProps", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"center\" | \"s\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"form\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"search\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"cite\" | …", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ] }, { "name": "Footer", "typeName": "PopupDFFooterProps", "props": [ { "name": "$css", "type": "string | CSSObject | FlattenSimpleInterpolation | undefined", "required": false, "description": "Кастомные стили styled-components для Box-контейнера" }, { "name": "as", "type": "((string | React.ComponentType) & (\"symbol\" | \"object\" | \"center\" | \"s\" | \"article\" | \"button\" | \"dialog\" | \"figure\" | \"form\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"search\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"cite\" | …", "required": false, "description": "Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонента. (Например: `li`, `p`, `button` и т.д.)" }, { "name": "background", "type": "Property.Background | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `#? , `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "backgroundColor", "type": "Property.BackgroundColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `transparent`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "border", "type": "Property.Border | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` || || `\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderColor", "type": "Property.BorderColor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderRadius", "type": "Property.BorderRadius | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4} [ / {1,4} ]?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **4** | **4** | **5** | **12** | **9** |\n| 1 _-x-_ | | 3 _-x-_ | | |" }, { "name": "borderStyle", "type": "Property.BorderStyle | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "borderWidth", "type": "Property.BorderWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "bottom", "type": "Property.Bottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "boxSizing", "type": "Property.BoxSizing | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `content-box | border-box`\n\n**Initial value**: `content-box`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :-----: | :-----: | :-----: | :----: | :---: |\n| **10** | **29** | **5.1** | **12** | **8** |\n| 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | | |" }, { "name": "cursor", "type": "Property.Cursor | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.\n\n**Syntax**: `[ [ [ ]? , ]* ]`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.2** | **12** | **4** |" }, { "name": "display", "type": "Property.Display | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ || ] | | | | `\n\n**Initial value**: `inline`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "flexDirection", "type": "Property.FlexDirection | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `row | row-reverse | column | column-reverse`\n\n**Initial value**: `row`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :------: |\n| **29** | **22** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | 10 _-x-_ |" }, { "name": "flexGrow", "type": "Property.FlexGrow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----------------------: |\n| **29** | **20** | **9** | **12** | **11** |\n| 22 _-x-_ | | 7 _-x-_ | | 10 _(-ms-flex-positive)_ |" }, { "name": "flexShrink", "type": "Property.FlexShrink | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **10** |\n| 22 _-x-_ | | 8 _-x-_ | | |" }, { "name": "flexWrap", "type": "Property.FlexWrap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `nowrap | wrap | wrap-reverse`\n\n**Initial value**: `nowrap`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **28** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "gap", "type": "Property.Gap | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `<'row-gap'> <'column-gap'>?`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :-: |\n| **57** | **52** | **10.1** | **16** | No |" }, { "name": "height", "type": "Property.Height | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "justifyContent", "type": "Property.JustifyContent | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.\n\n**Syntax**: `normal | | ? [ | left | right ]`\n\n**Initial value**: `normal`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :------: | :-----: | :-----: | :----: | :----: |\n| **29** | **20** | **9** | **12** | **11** |\n| 21 _-x-_ | | 7 _-x-_ | | |" }, { "name": "justifyItems", "type": "Property.JustifyItems | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.\n\n**Syntax**: `normal | stretch | | ? [ | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center`\n\n**Initial value**: `legacy`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :----: |\n| **52** | **20** | **9** | **12** | **11** |" }, { "name": "justifySelf", "type": "Property.JustifySelf | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.\n\n**Syntax**: `auto | normal | stretch | | ? [ | left | right ] | anchor-center`\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :------: | :----: | :----: |\n| **57** | **45** | **10.1** | **16** | **10** |" }, { "name": "left", "type": "Property.Left | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "margin", "type": "Property.Margin | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'margin-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginBottom", "type": "Property.MarginBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginLeft", "type": "Property.MarginLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginRight", "type": "Property.MarginRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "marginTop", "type": "Property.MarginTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ` | auto | `\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **3** |" }, { "name": "maxHeight", "type": "Property.MaxHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **1** | **1.3** | **12** | **7** |" }, { "name": "maxWidth", "type": "Property.MaxWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `none | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `none`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "minHeight", "type": "Property.MinHeight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :-----: | :----: | :---: |\n| **1** | **3** | **1.3** | **12** | **7** |" }, { "name": "minWidth", "type": "Property.MinWidth | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **7** |" }, { "name": "opacity", "type": "Property.Opacity | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `1`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **2** | **12** | **9** |" }, { "name": "overflow", "type": "Property.Overflow | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `[ visible | hidden | clip | scroll | auto ]{1,2}`\n\n**Initial value**: `visible`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "padding", "type": "Property.Padding | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `<'padding-top'>{1,4}`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingBottom", "type": "Property.PaddingBottom | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingLeft", "type": "Property.PaddingLeft | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingRight", "type": "Property.PaddingRight | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "paddingTop", "type": "Property.PaddingTop | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: ``\n\n**Initial value**: `0`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "position", "type": "Property.Position | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `static | relative | absolute | sticky | fixed`\n\n**Initial value**: `static`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "right", "type": "Property.Right | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :-----: |\n| **1** | **1** | **1** | **12** | **5.5** |" }, { "name": "top", "type": "Property.Top | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **5** |" }, { "name": "width", "type": "Property.Width | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | | min-content | max-content | fit-content | fit-content() | | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" }, { "name": "zIndex", "type": "Property.ZIndex | undefined", "required": false, "description": "This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.\n\n**Syntax**: `auto | `\n\n**Initial value**: `auto`\n\n| Chrome | Firefox | Safari | Edge | IE |\n| :----: | :-----: | :----: | :----: | :---: |\n| **1** | **1** | **1** | **12** | **4** |" } ] } ], "sourceFile": "packages/ui-kit/src/components/PopupDF/PopupDF.tsx", "type": "wrapper", "category": "Локальные компоненты", "keywords": [ "составной popup", "модальное окно с шапкой", "compound popup" ], "docs": "# PopupDF\n\n`PopupDF` — локальная DF-обёртка над [Popup](https://plasma.sberdevices.ru/sdds-finai/components/popup/).\n\n## Ключевые особенности\n\n- крестик закрытия живёт в `PopupDF.Header`\n- доступны `PopupDF.Header`, `PopupDF.Body`, `PopupDF.Footer`\n- доступны размеры `size=\"m\" | \"s\"`\n- `title` и `description` ограничены двумя строками\n- в `Header` доступна кнопка назад через `onBackButtonClick`\n- иконка ресайза использует DF-иконку по умолчанию, учитывает `resizable.iconSize` и может быть переопределена через `resizable.icons`\n\n## Compound-компоненты\n\n```ts\nPopupDF.Header; // Шапка\nPopupDF.Body; // Контент\nPopupDF.Footer; // Футер\n```\n\n## Особенности\n\n- `Header` и `Footer` остаются опциональными и подключаются через композицию\n- `subHeader` подходит для кастомного контента, смыслово связанного с шапкой\n- если контента много, скролл должен жить внутри `PopupDF.Body`\n- по умолчанию угол иконки ресайза вычисляется из `placement` так, чтобы ресайз тянул popup внутрь доступной области\n- для ручной смены угла ресайза используйте нативный `resizable.directions`, например `directions: ['top-left']`\n- если `hiddenIcons` не передан, `PopupDF` автоматически скрывает угловые иконки, которые не входят в `directions`; для нестандартной видимости передайте `hiddenIcons` явно\n- если пользовательские `icons` не переданы, `PopupDF` заполняет угловые иконки своей `IconResizeCorneredFill`; `iconSize` влияет на DF-иконку по умолчанию\n\nОписание типов и compound-пропсов — в разделе [API](?path=/docs/локальные-компоненты-popupdf-api--docs).", "apiDocs": "# PopupDF API\n\n## PopupDFProps\n\n```typescript\ntype PopupDFProps = Omit<\n ComponentProps,\n 'children' | 'isOpen'\n> & {\n /**\n * Содержимое popup.\n * Обычно используется композиция из `PopupDF.Header`, `PopupDF.Body` и `PopupDF.Footer`.\n */\n children?: ReactNode;\n /**\n * Начальное состояние открытия в uncontrolled-режиме.\n * @default false\n */\n defaultOpened?: boolean;\n /**\n * Коллбэк смены состояния открытия.\n */\n onToggle?: (opened: boolean) => void;\n /**\n * Размер PopupDF.\n * Влияет на внутренние отступы и типографику header.\n * @default 'm'\n */\n size?: PopupDFSize;\n};\n```\n\n> `PopupDF` наследует базовые пропсы `Popup` из `sdds-finai`, но добавляет compound-структуру,\n`size`, `defaultOpened`, `onToggle` и DF-иконки для базовой настройки `resizable`.\n\n## PopupDFSize\n\n```typescript\ntype PopupDFSize = 's' | 'm' | 'l';\n```\n\n> Размер попапа. Влияет на типографику шапки и внутренние отступы: `l` — крупный\nзаголовок (H4) с описанием (BodyS), `m` — средний, `s` — компактный.\n\n## PopupDFHeaderProps\n\n```typescript\ntype PopupDFHeaderProps = Omit & {\n /**\n * Заголовок в верхней левой части header.\n */\n title?: ReactNode;\n /**\n * Текст под заголовком в верхней левой части header.\n */\n description?: ReactNode;\n /**\n * Кастомный контент, относящийся по смыслу к header.\n */\n subHeader?: ReactNode;\n /**\n * Кастомный слот в правой части header, слева от крестика закрытия.\n * Прижимается к крестику; если контент широкий — «давит» на title/description\n * (уходят в многоточие с тултипом). Максимальная высота — как у крестика\n * (32px при `size='l'` и `size='m'`, 24px при `size='s'`), ширина не\n * ограничена.\n */\n rightBlock?: ReactNode;\n /**\n * Показывать ли крестик закрытия в правой верхней части header.\n * @default true\n */\n showCloseButton?: boolean;\n /**\n * Callback при клике на кнопку со стрелкой назад слева от заголовка.\n */\n onBackButtonClick?: () => void;\n /**\n * Кастомный обработчик закрытия.\n * Если не передан, будет использован обработчик закрытия из `PopupDF`.\n */\n onClose?: () => void;\n};\n```\n\n## PopupDFBodyProps\n\n```typescript\ntype PopupDFBodyProps = BoxProps;\n```\n\n## PopupDFFooterProps\n\n```typescript\ntype PopupDFFooterProps = BoxProps & {\n children?: ReactNode;\n};\n```\n\n## PopupDFResizableConfig\n\n```typescript\ntype PopupDFResizableConfig = Exclude<\n ComponentProps['resizable'],\n boolean | undefined\n>;\n```", "curatedStories": [ { "exportName": "Simple", "displayName": "Simple", "type": "full-code", "code": "import { useState } from 'react';\nimport {\n Button,\n Flow,\n LinkButton,\n PopupDF,\n PopupProvider,\n SSRProvider,\n} from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopupDF.Footer\nfunction FooterActions() {\n return (\n \n \n LinkButton\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(false);\n\n // SSRProvider и PopupProvider обычно уже подключены на уровне приложения\n return (\n \n \n \n \n \n {/* кастомный контент слева от крестика, ширина не ограничена */}\n \n }\n />\n Контент попапа\n \n \n \n \n \n \n );\n}" }, { "exportName": "Playground", "displayName": "Playground", "type": "full-code", "code": "import { useState } from 'react';\nimport {\n Button,\n Flow,\n LinkButton,\n PopupDF,\n PopupProvider,\n SSRProvider,\n} from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopupDF.Footer\nfunction FooterActions() {\n return (\n \n \n LinkButton\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(true);\n\n return (\n \n \n \n \n \n {/* кастомный контент слева от крестика, ширина не ограничена */}\n \n }\n showCloseButton\n />\n Контент попапа\n \n \n \n \n \n \n );\n}" }, { "exportName": "SizeL", "displayName": "Size L", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport {\n Button,\n IconButton,\n LinkButton,\n PopupDF,\n PopupProvider,\n SSRProvider,\n} from '@daisforge/ui';\nimport { IconFullscreenOff, IconFullscreenOn } from '@daisforge/ui/icons';\n\n// Разворот на весь экран собираем сами из пропсов PopupDF:\n// сначала выключаем resizable и draggable, чтобы попап вернулся к обычному\n// размеру, затем следующим тиком плавно растим его до краёв frame.\nfunction Example() {\n const frameRef = useRef(null);\n const [opened, setOpened] = useState(true);\n const [fullscreen, setFullscreen] = useState(false);\n const [interactive, setInteractive] = useState(true);\n\n const expand = () => {\n setInteractive(false);\n window.setTimeout(() => setFullscreen(true), 30);\n };\n\n const collapse = () => {\n setFullscreen(false);\n window.setTimeout(() => setInteractive(true), 320);\n };\n\n const IconFullS = fullscreen ? IconFullscreenOff : IconFullscreenOn;\n\n const sizeStyle = {\n width: fullscreen ? 'calc(100% - 48px)' : '600px',\n height: fullscreen ? 'calc(100% - 48px)' : '600px',\n maxWidth: '100%',\n maxHeight: '100%',\n transition: 'width 280ms ease, height 280ms ease',\n // grid тянет карточку на всю заданную высоту, иначе внешний узел Popup\n // сжимается по контенту и height не применяется (600 даёт только ширину).\n display: 'grid',\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n };\n\n return (\n \n \n {/* frame — контейнер, внутри которого живёт и разворачивается попап */}\n
\n \n \n Кастомный слот\n
\n }\n rightBlock={\n (fullscreen ? collapse() : expand())}\n >\n \n \n }\n />\n {/* высота 100%, чтобы контент тела рос при ресайзе попапа */}\n \n
Контент попапа
\n \n \n {/* LinkButton отделён от группы кнопок отступом 16px (L) */}\n \n \n LinkButton\n \n
\n \n \n
\n \n \n \n \n \n \n );\n}" } ], "hasCuratedMeta": true, "relatedExports": [ "PopupDFBody", "PopupDFFooter", "PopupDFHeader" ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { PopupDF } from '@daisforge/ui';", "minimalUsage": "\n {/* части: PopupDF.Header, PopupDF.Body, PopupDF.Footer */}\n", "examples": [ { "exportName": "Simple", "displayName": "Simple", "type": "full-code", "code": "import { useState } from 'react';\nimport {\n Button,\n Flow,\n LinkButton,\n PopupDF,\n PopupProvider,\n SSRProvider,\n} from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopupDF.Footer\nfunction FooterActions() {\n return (\n \n \n LinkButton\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(false);\n\n // SSRProvider и PopupProvider обычно уже подключены на уровне приложения\n return (\n \n \n \n \n \n {/* кастомный контент слева от крестика, ширина не ограничена */}\n \n }\n />\n Контент попапа\n \n \n \n \n \n \n );\n}" }, { "exportName": "Playground", "displayName": "Playground", "type": "full-code", "code": "import { useState } from 'react';\nimport {\n Button,\n Flow,\n LinkButton,\n PopupDF,\n PopupProvider,\n SSRProvider,\n} from '@daisforge/ui';\n\n// Контент футера — обычные кнопки, которые вы кладёте в PopupDF.Footer\nfunction FooterActions() {\n return (\n \n \n LinkButton\n \n \n \n \n );\n}\nfunction Example() {\n const [opened, setOpened] = useState(true);\n\n return (\n \n \n \n \n \n {/* кастомный контент слева от крестика, ширина не ограничена */}\n \n }\n showCloseButton\n />\n Контент попапа\n \n \n \n \n \n \n );\n}" }, { "exportName": "SizeL", "displayName": "Size L", "type": "full-code", "code": "import { useRef, useState } from 'react';\nimport {\n Button,\n IconButton,\n LinkButton,\n PopupDF,\n PopupProvider,\n SSRProvider,\n} from '@daisforge/ui';\nimport { IconFullscreenOff, IconFullscreenOn } from '@daisforge/ui/icons';\n\n// Разворот на весь экран собираем сами из пропсов PopupDF:\n// сначала выключаем resizable и draggable, чтобы попап вернулся к обычному\n// размеру, затем следующим тиком плавно растим его до краёв frame.\nfunction Example() {\n const frameRef = useRef(null);\n const [opened, setOpened] = useState(true);\n const [fullscreen, setFullscreen] = useState(false);\n const [interactive, setInteractive] = useState(true);\n\n const expand = () => {\n setInteractive(false);\n window.setTimeout(() => setFullscreen(true), 30);\n };\n\n const collapse = () => {\n setFullscreen(false);\n window.setTimeout(() => setInteractive(true), 320);\n };\n\n const IconFullS = fullscreen ? IconFullscreenOff : IconFullscreenOn;\n\n const sizeStyle = {\n width: fullscreen ? 'calc(100% - 48px)' : '600px',\n height: fullscreen ? 'calc(100% - 48px)' : '600px',\n maxWidth: '100%',\n maxHeight: '100%',\n transition: 'width 280ms ease, height 280ms ease',\n // grid тянет карточку на всю заданную высоту, иначе внешний узел Popup\n // сжимается по контенту и height не применяется (600 даёт только ширину).\n display: 'grid',\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n };\n\n return (\n \n \n {/* frame — контейнер, внутри которого живёт и разворачивается попап */}\n
\n \n \n Кастомный слот\n
\n }\n rightBlock={\n (fullscreen ? collapse() : expand())}\n >\n \n \n }\n />\n {/* высота 100%, чтобы контент тела рос при ресайзе попапа */}\n \n
Контент попапа
\n \n \n {/* LinkButton отделён от группы кнопок отступом 16px (L) */}\n \n \n LinkButton\n \n
\n \n \n
\n \n \n \n \n \n \n );\n}" }, { "exportName": "Usage1", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n : undefined}\n rightBlock={\n withRightBlock ? : undefined\n }\n showCloseButton={showCloseButton}\n onBackButtonClick={showBackButton ? () => {} : undefined}\n />\n {withBody && (\n \n \n \n )}\n {withFooter && (\n \n \n \n )}\n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" } ] }, "Portal": { "name": "Portal", "group": "components", "folderName": "Portal", "role": "primary", "description": "Рендерит контент в другой DOM-узел через createPortal (для Popup, Popover)", "props": [ { "name": "container", "type": "HTMLElement | (() => HTMLElement) | undefined", "required": false, "description": "Элемент, в который добавится содержимое портала." } ], "propsTypeName": "PortalProps", "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Portal/Portal.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "портал DOM", "createPortal", "рендер вне дерева" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Portal } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "Price": { "name": "Price", "group": "components", "folderName": "Price", "role": "primary", "description": "Форматированное отображение суммы с валютой, локалью и периодичностью", "props": [ { "name": "as", "type": "keyof JSX.IntrinsicElements | React.ComponentType | undefined", "required": false, "description": "Сменить рендер на другой тип компонента." } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Price/Price.d.ts", "type": "wrapper", "atomicBase": "Price", "category": "Локальные компоненты", "keywords": [ "денежная сумма", "currency display", "форматирование цены" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "children", "type": "number", "required": true, "description": "Значение для control.", "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "currency", "type": "string", "required": false, "description": "Валюта.\nПринимает ISO 4217 код валюты.", "default": "`rub`", "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "locale", "type": "string", "required": false, "description": "Локаль.", "default": "`ru`", "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "minimumFractionDigits", "type": "number", "required": false, "description": "Минимальное количество цифр после десятичного разделителя.", "default": "0", "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "periodicity", "type": "ReactNode", "required": false, "description": "Указывает регулярность платежа, идет после цены.\nНапример - 990Р / день.", "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stroke", "type": "boolean", "required": false, "description": "Перечеркнутый текст (старая цена, например).", "default": "false", "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stroked", "type": "boolean", "required": false, "description": "Перечеркнутый текст (старая цена, например).", "default": "false", "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "undefined", "required": false, "inheritedFrom": "Price", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Price } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor", "displayName": "Example 1", "type": "vendor", "code": "import React from 'react';\nimport { Price } from '@daisforge/ui';\nexport function App() {\n return (\n
\n 12345.67\n 12345.67\n
\n );\n}" } ] }, "Progress": { "name": "Progress", "group": "components", "folderName": "Progress", "role": "primary", "description": "Линейный индикатор прогресса выполнения задачи или загрузки данных", "props": [], "propsTypeName": "ProgressProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Progress/Progress.d.ts", "type": "wrapper", "atomicBase": "Progress", "category": "Локальные компоненты", "keywords": [ "индикатор загрузки", "progress bar", "шкала выполнения" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "value", "type": "number", "required": true, "description": "Значение прогресса в процентах.", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "caption", "type": "string", "required": false, "description": "Подпись под прогрессом.", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasValue", "type": "boolean", "required": false, "description": "Отображать числовое значение прогресса.", "default": "'true'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelIcon", "type": "ReactNode", "required": false, "description": "Иконка рядом с текстом метки.", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "\"none\" | \"top\" | \"left\"", "required": false, "description": "Задает выравнивание метки относительно трека.", "default": "'top'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelTextPlacement", "type": "\"none\" | \"right\" | \"left\"", "required": false, "description": "Задает положение текста метки относительно labelIcon.", "default": "'right'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "progressSize", "type": "undefined", "required": false, "description": "Высота линии прогресса в пикселях.", "default": "'4'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"l\" | \"m\"", "required": false, "description": "Размер прогресса.", "default": "'m'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "status", "type": "Status", "required": false, "description": "Статус прогресса.", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valueAlign", "type": "\"center\" | \"end\" | \"start\"", "required": false, "description": "Выравнивание числового значения по горизонтали.\nПрименяется только когда valuePlacement равен 'top' и нет метки.", "default": "'start'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valuePlacement", "type": "\"none\" | \"top\" | \"right\"", "required": false, "description": "Задает выравнивание числового значения относительно трека.\nКогда передана метка, значение определяется автоматически из labelPlacement.", "default": "'right'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"primary\" | \"info\" | \"success\" | \"error\"", "required": false, "description": "Вид прогресса.", "default": "'default'", "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "displayValue", "type": "boolean", "required": false, "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "Progress", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Progress } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Подпись Подпись Дополнительная подпись под треком задаётся свойством caption .", "type": "vendor", "code": "import React from 'react';\nimport { Progress } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Числовое значение", "type": "vendor", "code": "import React from 'react';\nimport { Progress } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n \n
\n );\n}" } ] }, "ProgressBarCircular": { "name": "ProgressBarCircular", "group": "components", "folderName": "Progress", "role": "primary", "description": "Круговой индикатор прогресса выполнения задачи или загрузки данных", "props": [], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/ProgressBarCircular/ProgressBarCircular.d.ts", "type": "wrapper", "atomicBase": "ProgressBarCircular", "category": "Локальные компоненты", "keywords": [ "круговой индикатор", "circular progress", "спиннер прогресса" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "hasTrack", "type": "boolean", "required": false, "description": "Наличие трека", "inheritedFrom": "ProgressBarCircular", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxValue", "type": "number", "required": false, "description": "Максимальное значение прогресса", "default": "100", "inheritedFrom": "ProgressBarCircular", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "reverse", "type": "boolean", "required": false, "description": "Обратное направление дуги (уменьшение по часовой стрелке)", "inheritedFrom": "ProgressBarCircular", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"xxl\" | \"s\" | \"l\" | \"m\" | \"xs\" | \"xxs\" | \"xl\"", "required": false, "description": "Размер компонента", "default": "m", "inheritedFrom": "ProgressBarCircular", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "strokeSize", "type": "number", "required": false, "description": "Толщина обводки компонента", "inheritedFrom": "ProgressBarCircular", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "number", "required": false, "description": "Текущее значение прогресса (от 0 до maxValue)", "inheritedFrom": "ProgressBarCircular", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"info\"", "required": false, "description": "Вид компонента", "default": "default", "inheritedFrom": "ProgressBarCircular", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { ProgressBarCircular } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Трек Трек С помощью свойства hasTrack можно управлять отображением фоновой дуги", "type": "vendor", "code": "import React from 'react';\nimport { ProgressBarCircular } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { ProgressBarCircular } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n 50%\n \n
\n );\n}" } ] }, "Radiobox": { "name": "Radiobox", "group": "components", "folderName": "Radiobox", "role": "primary", "description": "Радиокнопка для выбора одного варианта из группы взаимоисключающих опций", "props": [ { "name": "focused", "type": "boolean | undefined", "required": false, "description": "Компонента находиться в фокусе" }, { "name": "autoComplete", "type": "React.HTMLInputAutoCompleteAttribute | undefined", "required": false, "description": "" }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false, "description": "" } ], "propsTypeName": "RadioboxProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Radiobox/Radiobox.d.ts", "type": "wrapper", "atomicBase": "Radiobox", "formVariant": "FormRadiobox", "category": "Локальные компоненты", "keywords": [ "переключатель выбора", "radio button", "выбор одного варианта" ], "chooseWhen": "Одиночная радиокнопка вне react-hook-form — обычно используется внутри RadioGroup, а не сама по себе.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "checkIcon", "type": "ReactNode", "required": false, "description": "Кастомная иконка галочки.", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "description", "type": "ReactNode", "required": false, "description": "Описание элемента", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "indeterminateIcon", "type": "ReactNode", "required": false, "description": "Кастомная иконка indeterminate-состояния.", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "ReactNode", "required": false, "description": "Метка-подпись к элементу", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "ChangeEventHandler", "required": false, "description": "Обработчик изменения элемента формы", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "singleLine", "type": "boolean", "required": false, "description": "Title и description в одну строку или с переносом строк", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"l\" | \"m\"", "required": false, "description": "Размер компонента", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"secondary\" | \"tertiary\" | \"paragraph\"", "required": false, "description": "Вид компонента", "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "checked", "type": "boolean", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultChecked", "type": "boolean", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "maxLength", "type": "number", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "minLength", "type": "number", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "name", "type": "string", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onBlur", "type": "FocusEventHandler", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onFocus", "type": "FocusEventHandler", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placeholder", "type": "string", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "type", "type": "string", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | number | readonly string[]", "required": false, "inheritedFrom": "Radiobox", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Radiobox } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Использование Использование Компонент Radiobox может содержать лейбл и описание. По умолчанию, контент внутри лейбла и описания многострочный. Для того чтобы стал однострочным, необходимо использовать свойство singleLine (по умолчанию false ).", "type": "vendor", "code": "import React from 'react';\nimport { Radiobox } from '@daisforge/ui';\nexport function App() {\n return (\n \n );\n}" }, { "exportName": "Vendor2", "displayName": "RadioGroup RadioGroup Компоненты Radiobox следует объединять в RadioGroup", "type": "vendor", "code": "\n

Заголовок

\n \n \n" } ] }, "RadioGroup": { "name": "RadioGroup", "group": "components", "folderName": "Radiobox", "role": "primary", "description": "Группировка Radiobox с общим управлением выбранным значением", "props": [], "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Radiobox/RadioGroup.d.ts", "type": "standalone", "formVariant": "FormRadioGroup", "category": "Локальные компоненты", "keywords": [ "группа переключателей", "radio group", "набор радиокнопок" ], "chooseWhen": "Вне react-hook-form — группа радиокнопок с value/onChange напрямую.", "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { RadioGroup } from '@daisforge/ui';", "minimalUsage": "", "examples": [] }, "Range": { "name": "Range", "group": "components", "folderName": "Range", "role": "primary", "description": "Поле ввода диапазона значений «от—до» с двумя связанными текстовыми полями", "props": [ { "name": "appearance", "type": "\"default\" | \"clear\" | \"viewMode\" | undefined", "required": false, "description": "Стиль для UI конфигурации\nВлияет на выбор предустановленого набора токенов", "default": "default" }, { "name": "firstTextfieldInputWrapperRef", "type": "React.Ref | undefined", "required": false, "description": "Ссылка на обертку первого поля ввода" }, { "name": "hasClearDivider", "type": "boolean | undefined", "required": false, "description": "Отображение разделителя для `appearance='clear'`" }, { "name": "inputWrapperRef", "type": "React.Ref | undefined", "required": false, "description": "Ссылка на обертку полей ввода" }, { "name": "secondTextfieldInputWrapperRef", "type": "React.Ref | undefined", "required": false, "description": "Ссылка на обертку второго поля ввода" } ], "propsTypeName": "RangeProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Range/Range.d.ts", "type": "wrapper", "atomicBase": "Range", "category": "Локальные компоненты", "keywords": [ "диапазон значений", "range input", "интервал от и до" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "contentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactNode", "required": false, "description": "Слот для контента справа", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstPlaceholder", "type": "string", "required": false, "description": "Значение первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstTextfieldContentLeft", "type": "ReactElement>", "required": false, "description": "Слот для контента слева для первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstTextfieldContentRight", "type": "ReactElement>", "required": false, "description": "Слот для контента справа для второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstTextfieldTextAfter", "type": "string", "required": false, "description": "Слот для вспомогательного текста справа для первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstValue", "type": "TextfieldPrimitiveValue", "required": false, "description": "Значение первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstValueEdited", "type": "boolean", "required": false, "description": "Отредактированное значение первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstValueError", "type": "boolean", "required": false, "description": "Некорректное значение первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstValueSuccess", "type": "boolean", "required": false, "description": "Корректное значение первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`.", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "description": "Видимость стрелки (хвоста).", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 8]", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "description": "Направление раскрытия тултипа.", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "description": "Размер тултипа", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "description": "Иконка, рядом с которым произойдет вызов всплывающего окна.\nЕсли свойство не задано, применится иконка по умолчанию.", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение иконки подсказки, когда отсутствует label\nили же он имеет labelPlacement='inner'.", "default": "`outer`", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "description": "Текст тултипа", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "description": "Способ открытия тултипа - наведение или клик мышью", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "description": "Вид тултипа", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "description": "Ширина окна (в rem).", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "leftHelper", "type": "string", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода.", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onBlurFirstTextfield", "type": "((event: FocusEvent) => void)", "required": false, "description": "Коллбэк, вызываемый при потере фокуса первым полем ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onBlurSecondTextfield", "type": "((event: FocusEvent) => void)", "required": false, "description": "Коллбэк, вызываемый при потере фокуса вторым полем ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangeFirstValue", "type": "BaseCallbackChangeInstance", "required": false, "description": "Коллбэк, вызываемый при изменении первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChangeSecondValue", "type": "BaseCallbackChangeInstance", "required": false, "description": "Коллбэк, вызываемый при изменении второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onFocusFirstTextfield", "type": "((event: FocusEvent) => void)", "required": false, "description": "Коллбэк, вызываемый при фокусе на первое поле ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onFocusSecondTextfield", "type": "((event: FocusEvent) => void)", "required": false, "description": "Коллбэк, вызываемый при фокусе на второе поле ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onSearchFirstValue", "type": "BaseCallbackKeyboardInstance", "required": false, "description": "Коллбэк, вызываемый при нажатии `Enter` в первом поле ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onSearchSecondValue", "type": "BaseCallbackKeyboardInstance", "required": false, "description": "Коллбэк, вызываемый при нажатии `Enter` во втором поле ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredIndicatorPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondPlaceholder", "type": "string", "required": false, "description": "Значение второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondTextfieldContentLeft", "type": "ReactElement>", "required": false, "description": "Слот для контента слева для первого поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondTextfieldContentRight", "type": "ReactElement>", "required": false, "description": "Слот для контента справа для второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondTextfieldTextAfter", "type": "string", "required": false, "description": "Слот для вспомогательного текста справа для второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondValue", "type": "TextfieldPrimitiveValue", "required": false, "description": "Значение второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondValueEdited", "type": "boolean", "required": false, "description": "Отредактированное значение второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondValueError", "type": "boolean", "required": false, "description": "Некорректное значение второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondValueSuccess", "type": "boolean", "required": false, "description": "Корректное значение второго поля ввода", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "description": "Размер компонента", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "titleCaption", "type": "ReactNode", "required": false, "description": "Метка-подпись к элементу справа", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\"", "required": false, "description": "Вариант отображения", "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "autoComplete", "type": "string", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dividerIcon", "type": "ReactNode", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "dividerVariant", "type": "\"none\" | \"dash\" | \"icon\"", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "firstTextfieldTextBefore", "type": "string", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "secondTextfieldTextBefore", "type": "string", "required": false, "inheritedFrom": "Range", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Range } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Варианты разделителя", "type": "vendor", "code": "import React from 'react';\nimport { Range } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { Range } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" } ] }, "Rating": { "name": "Rating", "group": "components", "folderName": "Rating", "role": "primary", "description": "Виджет оценки звёздами или иконками с настраиваемой точностью деления", "props": [], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Rating/Rating.d.ts", "type": "wrapper", "atomicBase": "Rating", "category": "Локальные компоненты", "keywords": [ "рейтинг звёзды", "star rating", "оценка пользователем" ], "hasCuratedMeta": true, "inheritedProps": [ { "name": "decimalSeparator", "type": "string", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasIcons", "type": "boolean", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasValue", "type": "boolean", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "helperText", "type": "string", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "helperTextStretching", "type": "\"filled\" | \"fixed\"", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "iconQuantity", "type": "1 | 5 | 10", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "iconSlot", "type": "ReactNode", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "iconSlotHalf", "type": "ReactNode", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "iconSlotOutline", "type": "ReactNode", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "precision", "type": "number", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"s\" | \"l\" | \"m\" | \"xs\" | \"xxs\" | \"displayL\" | \"displayM\" | \"displayS\"", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "number | null", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "valuePlacement", "type": "\"before\" | \"after\"", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"default\" | \"accent\"", "required": false, "inheritedFrom": "Rating", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Rating } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor1", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { Rating } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Вид Rating", "type": "vendor", "code": "import React from 'react';\nimport { Rating } from '@daisforge/ui';\nexport function App() {\n return (\n
\n \n \n
\n );\n}" } ] }, "SSRProvider": { "name": "SSRProvider", "group": "components", "folderName": "SSRProvider", "role": "primary", "description": "Оборачивает приложение для SSR и корректной озвучки Checkbox/Radiobox скринридерами.", "props": [], "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/SSRProvider/SSRProvider.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "server-side rendering", "accessibility", "скринридер" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { SSRProvider } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n
{children}
\n \n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в PopupDF.stories.tsx", "type": "usage", "code": "\n \n \n {(frameRef) => (\n <>\n \n \n }\n />\n \n \n \n \n \n \n \n \n )}\n \n \n ", "sourceFile": "packages/storybook/src/stories/PopupDF/PopupDF.stories.tsx" } ] }, "SegmentGroup": { "name": "SegmentGroup", "group": "components", "folderName": "Segment", "role": "primary", "description": "Контейнер сегментированного переключателя (segmented control) из кнопок-вкладок", "props": [], "propsTypeName": "SegmentGroupProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Segment/Segment.d.ts", "type": "wrapper", "atomicBase": "SegmentGroup", "formVariant": "FormSegmentGroup", "category": "Локальные компоненты", "keywords": [ "сегментированный контрол", "segmented control", "переключатель вкладок" ], "chooseWhen": "Вне react-hook-form — сегментированный переключатель с value/onChange напрямую.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "clip", "type": "boolean", "required": false, "description": "При ограничении ширины разрешает скролл и отображает дополнительные элементы со стрелками", "default": "true", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "filledBackground", "type": "boolean", "required": false, "description": "Группа сегментов c фоном, используйте свойство hasBackground", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasBackground", "type": "boolean", "required": false, "description": "Группа сегментов c фоном", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasDivider", "type": "boolean", "required": false, "description": "Отображать разделители между элементами сегмента", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "orientation", "type": "\"vertical\"", "required": false, "description": "Ориентация группы сегментов", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "pilled", "type": "boolean", "required": false, "description": "Группа сегментов c округлым border-radius", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "selectionMode", "type": "\"multiple\" | \"single\"", "required": false, "description": "Сегмент множественного или одиночного выбора", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "description": "Размер группы сегментов", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "stretch", "type": "boolean", "required": false, "description": "Группа сегментов растянута на доступную область, только в горизонтальном режиме", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"filled\"", "required": false, "description": "Вид группы сегментов", "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "SegmentGroup", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { SegmentGroup } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в LeftPanel.stories.tsx", "type": "usage", "code": "\n {items.map((_, i) => (\n \n ))}\n ", "sourceFile": "packages/storybook/src/stories/LeftPanel/LeftPanel.stories.tsx" }, { "exportName": "Usage2", "displayName": "Использование в FiltersActions.stories.tsx", "type": "usage", "code": "\n {Array(3)\n .fill(0)\n .map((_, i) => (\n \n ))}\n ", "sourceFile": "packages/storybook/src/stories/FiltersActions/FiltersActions.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Управление внешним видом", "type": "vendor", "code": "import React from 'react';\nimport { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@daisforge/ui';\nexport function App() {\n const items = Array(4).fill(0);\n const SegmentTemplate = () => {\n const {selectedSegmentItems} = useSegment();\n return (\n <>\n
Выбранный элемент: {selectedSegmentItems.join(', ')}
\n
\n \n {items.map((_, i) => (\n \n ))}\n \n \n )\n }\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@daisforge/ui';\nexport function App() {\n const items = Array(4).fill(0);\n const SegmentTemplate = () => {\n const {selectedSegmentItems} = useSegment();\n return (\n <>\n
Выбранный элемент: {selectedSegmentItems.join(', ')}
\n
\n \n {items.map((_, i) => (\n \n ))}\n \n \n )\n }\n return (\n
\n \n \n \n
\n );\n}" } ] }, "SegmentIconItem": { "name": "SegmentIconItem", "group": "components", "folderName": "Segment", "role": "primary", "description": "Элемент сегментированного контрола SegmentGroup с иконкой без текста", "props": [ { "name": "value", "type": "string | (readonly string[] & string)", "required": true, "description": "" }, { "name": "customHandleSelect", "type": "((e: React.MouseEvent) => void) | undefined", "required": false, "description": "" }, { "name": "icon", "type": "React.ReactNode", "required": false, "description": "" }, { "name": "pilled", "type": "boolean | undefined", "required": false, "description": "" }, { "name": "size", "type": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | undefined", "required": false, "description": "" }, { "name": "view", "type": "\"none\" | \"secondary\" | \"default\" | \"accent\" | undefined", "required": false, "description": "" }, { "name": "type", "type": "\"submit\" | \"reset\" | \"button\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Segment/Segment.d.ts", "type": "wrapper", "atomicBase": "SegmentIconItem", "category": "Локальные компоненты", "keywords": [ "сегмент с иконкой", "icon segment", "кнопка переключателя" ], "hasCuratedMeta": true, "atomicDataMissing": true, "importPath": "@daisforge/ui", "importStatement": "import { SegmentIconItem } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Vendor", "displayName": "Сегменты только с иконкой", "type": "vendor", "code": "import React from 'react';\nimport { IconPlasma } from '@salutejs/plasma-icons'\nimport { SegmentGroup, SegmentIconItem, SegmentProvider, useSegment } from '@daisforge/ui';\nexport function App() {\n const items = Array(4).fill(0);\n const SegmentTemplate = () => {\n const {selectedSegmentItems} = useSegment();\n return (\n <>\n
Выбранный элемент: {selectedSegmentItems.join(', ')}
\n
\n \n {items.map((_, i) => (\n }\n value={`label_${i}`}\n key={`label_${i}`}\n view='default'\n />\n ))}\n \n \n )\n }\n return (\n
\n \n \n \n
\n );\n}" } ] }, "SegmentItem": { "name": "SegmentItem", "group": "components", "folderName": "Segment", "role": "primary", "description": "Элемент сегментированного контрола SegmentGroup с текстовой меткой", "props": [ { "name": "value", "type": "string | (readonly string[] & string)", "required": true, "description": "Значение сегмента" }, { "name": "contentLeft", "type": "React.ReactNode", "required": false, "description": "Слот для контента слева." }, { "name": "contentRight", "type": "React.ReactNode", "required": false, "description": "Слот для контента справа." }, { "name": "customHandleSelect", "type": "((e: React.MouseEvent) => void) | undefined", "required": false, "description": "Коллбек для обработки выбора сегмента" }, { "name": "label", "type": "React.ReactNode", "required": false, "description": "Метка-подпись к элементу" }, { "name": "maxItemWidth", "type": "Property.Width | undefined", "required": false, "description": "Обрезает контент по максимальной ширине и добавляет ...", "default": "'auto'" }, { "name": "pilled", "type": "boolean | undefined", "required": false, "description": "Сегмент c округлым border-radius" }, { "name": "size", "type": "string | undefined", "required": false, "description": "Размер сегмента" }, { "name": "view", "type": "string | undefined", "required": false, "description": "Вид сегмента", "default": "'default'" }, { "name": "type", "type": "\"submit\" | \"reset\" | \"button\" | undefined", "required": false, "description": "" } ], "propsTypeName": "SegmentItemProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Segment/Segment.d.ts", "type": "wrapper", "atomicBase": "SegmentItem", "category": "Локальные компоненты", "keywords": [ "сегмент с текстом", "segment tab", "вкладка-кнопка" ], "hasCuratedMeta": true, "atomicDataMissing": true, "importPath": "@daisforge/ui", "importStatement": "import { SegmentItem } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в WidgetL.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/AnalyticalWidget/components/WidgetL.tsx" }, { "exportName": "Usage2", "displayName": "Использование в LeftPanelBlock.tsx", "type": "usage", "code": "", "sourceFile": "packages/storybook/src/stories/BlockTitle/components/LeftPanelBlock.tsx" }, { "exportName": "Vendor1", "displayName": "Управление внешним видом", "type": "vendor", "code": "import React from 'react';\nimport { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@daisforge/ui';\nexport function App() {\n const items = Array(4).fill(0);\n const SegmentTemplate = () => {\n const {selectedSegmentItems} = useSegment();\n return (\n <>\n
Выбранный элемент: {selectedSegmentItems.join(', ')}
\n
\n \n {items.map((_, i) => (\n \n ))}\n \n \n )\n }\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@daisforge/ui';\nexport function App() {\n const items = Array(4).fill(0);\n const SegmentTemplate = () => {\n const {selectedSegmentItems} = useSegment();\n return (\n <>\n
Выбранный элемент: {selectedSegmentItems.join(', ')}
\n
\n \n {items.map((_, i) => (\n \n ))}\n \n \n )\n }\n return (\n
\n \n \n \n
\n );\n}" } ] }, "SegmentProvider": { "name": "SegmentProvider", "group": "components", "folderName": "Segment", "role": "primary", "description": "Провайдер состояния выбора для группы элементов SegmentGroup/SegmentItem", "props": [ { "name": "defaultSelected", "type": "string[] | undefined", "required": false, "description": "Выбранные по умолчанию сегменты.\nПередается массив value сегментов, выбранных по умолчанию" }, { "name": "onChangeSelected", "type": "((selectedLabel: string) => void) | undefined", "required": false, "description": "Обработчик изменения выюранных сегментов" }, { "name": "selected", "type": "string[] | undefined", "required": false, "description": "Выбранные сегменты.\nПередается массив value сегментов" }, { "name": "singleSelectedRequired", "type": "boolean | undefined", "required": false, "description": "Один сегмент должен быть обязательно выбран." } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/plasma-new-hope/types/components/Segment/SegmentProvider/SegmentProvider.d.ts", "type": "standalone", "category": "Локальные компоненты", "keywords": [ "контекст сегментов", "controlled selection", "состояние выбора вкладки" ], "hasCuratedMeta": true, "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { SegmentProvider } from '@daisforge/ui';", "minimalUsage": "", "examples": [ { "exportName": "Usage1", "displayName": "Использование в LeftPanelBlock.tsx", "type": "usage", "code": "\n \n {items.map((_, i) => (\n \n ))}\n \n ", "sourceFile": "packages/storybook/src/stories/BlockTitle/components/LeftPanelBlock.tsx" }, { "exportName": "Usage2", "displayName": "Использование в LeftPanel.stories.tsx", "type": "usage", "code": "\n \n {items.map((_, i) => (\n \n ))}\n \n ", "sourceFile": "packages/storybook/src/stories/LeftPanel/LeftPanel.stories.tsx" }, { "exportName": "Vendor1", "displayName": "Управление внешним видом", "type": "vendor", "code": "import React from 'react';\nimport { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@daisforge/ui';\nexport function App() {\n const items = Array(4).fill(0);\n const SegmentTemplate = () => {\n const {selectedSegmentItems} = useSegment();\n return (\n <>\n
Выбранный элемент: {selectedSegmentItems.join(', ')}
\n
\n \n {items.map((_, i) => (\n \n ))}\n \n \n )\n }\n return (\n
\n \n \n \n
\n );\n}" }, { "exportName": "Vendor2", "displayName": "Быстрый старт", "type": "vendor", "code": "import React from 'react';\nimport { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@daisforge/ui';\nexport function App() {\n const items = Array(4).fill(0);\n const SegmentTemplate = () => {\n const {selectedSegmentItems} = useSegment();\n return (\n <>\n
Выбранный элемент: {selectedSegmentItems.join(', ')}
\n
\n \n {items.map((_, i) => (\n \n ))}\n \n \n )\n }\n return (\n
\n \n \n \n
\n );\n}" } ] }, "Select": { "name": "Select", "group": "components", "folderName": "Select", "role": "primary", "description": "Выпадающий список для выбора одного или нескольких значений из перечня", "props": [ { "name": "type", "type": "\"submit\" | \"reset\" | \"button\" | undefined", "required": false, "description": "" } ], "propsTypeName": "ComponentProps", "sourceFile": "node_modules/@salutejs/sdds-finai/types/components/Select/Select.d.ts", "type": "wrapper", "atomicBase": "Select", "formVariant": "FormSelect", "category": "Локальные компоненты", "keywords": [ "выпадающий список", "dropdown select", "выбор из списка" ], "chooseWhen": "Вне react-hook-form — самостоятельный выпадающий список с value/onChange напрямую.", "hasCuratedMeta": true, "inheritedProps": [ { "name": "items", "type": "K[]", "required": true, "description": "Список элементов.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "afterList", "type": "ReactNode", "required": false, "description": "Ячейка для контента в конце выпадающего списка.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "arrowPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Сторона расположения стрелки скрытия/раскрытия.", "default": "left", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "beforeList", "type": "ReactNode", "required": false, "description": "Ячейка для контента в начале выпадающего списка.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipClickArea", "type": "\"full\" | \"close-icon\"", "required": false, "description": "Область, по которой происходит нажатие.", "default": "full", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipType", "type": "\"text\" | \"default\"", "required": false, "description": "Внешний вид chip.", "default": "default", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "chipView", "type": "\"default\" | \"accent\" | \"secondary\"", "required": false, "description": "Внешний вид чипа в варианте textfield-like multiselect.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "closeAfterSelect", "type": "boolean", "required": false, "description": "Закрывать ли выпадающий список после выбора элемента.", "default": "если single, то true; если multiple, то false", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "contentRight", "type": "ReactElement>", "required": false, "description": "Слот для контента справа.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "emptyStateDescription", "type": "ReactNode", "required": false, "description": "Текст выпадающего списка при пустом массиве items.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "flip", "type": "boolean", "required": false, "description": "Коррекция placement, если выпадающий список находится за пределами экрана.", "default": "false", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hasRequiredIndicator", "type": "boolean", "required": false, "description": "Флаг наличия индикатора обязательности поля", "default": "false", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "helperText", "type": "string", "required": false, "description": "Вспомогательный текст снизу слева для поля ввода.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintContentLeft", "type": "ReactNode", "required": false, "description": "Слот для контента слева, например `Icon`.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintHasArrow", "type": "boolean", "required": false, "description": "Видимость стрелки (хвоста).", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintOffset", "type": "[number, number]", "required": false, "description": "Отступ окна относительно элемента, у которого оно вызвано.", "default": "[0, 8]", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPlacement", "type": "Placement | ComputedPlacement[]", "required": false, "description": "Направление раскрытия тултипа.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintPortal", "type": "string | RefObject", "required": false, "description": "Портал для окна подсказки. Принимает id контейнера или ref.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintSize", "type": "\"s\" | \"m\"", "required": false, "description": "Размер тултипа", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetIcon", "type": "ReactNode", "required": false, "description": "Иконка, рядом с которым произойдет вызов всплывающего окна.\nЕсли свойство не задано, применится иконка по умолчанию.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTargetPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение иконки подсказки, когда отсутствует label\nили же он имеет labelPlacement='inner'.", "default": "`outer`", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintText", "type": "string", "required": false, "description": "Текст тултипа", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintTrigger", "type": "\"hover\" | \"click\"", "required": false, "description": "Способ открытия тултипа - наведение или клик мышью", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintView", "type": "\"default\"", "required": false, "description": "Вид тултипа", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "hintWidth", "type": "string", "required": false, "description": "Ширина окна (в rem).", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "isTargetAmount", "type": "boolean", "required": false, "description": "Если включено - будет выведено общее количество выбранных элементов вместо перечисления.", "default": "false", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "keepPlaceholder", "type": "boolean", "required": false, "description": "Одновременно отображает label и placeholder (при пустом вводе)", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "labelPlacement", "type": "\"outer\" | \"inner\"", "required": false, "description": "Расположение лейбла.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "listMaxHeight", "type": "Height", "required": false, "description": "Максимальная высота выпадающего списка.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "listWidth", "type": "Width", "required": false, "description": "Значение css width для выпадающего списка.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "mode", "type": "\"radio\" | \"default\"", "required": false, "description": "Режим работы взаимодействия с элементами.\n- default: элемент можно выбрать и можно отменить его выбор.\n- radio: если элемент выбран, то отменить его выбор нельзя. Только для single-режима.", "default": "default", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onScroll", "type": "((e: UIEvent) => void)", "required": false, "description": "Коллбэк, срабатывающий при скролле.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onToggle", "type": "((isOpen: boolean) => void)", "required": false, "description": "Событие сворачивания/разворачивания выпадающего списка.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optional", "type": "boolean", "required": false, "description": "Флаг необязательности поля", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "optionalText", "type": "string", "required": false, "description": "Подпись для указания необязательности поля", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placement", "type": "SelectPlacement | SelectPlacementBasic[]", "required": false, "description": "Сторона открытия дропдауна относительно target элемента.", "default": "bottom", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "portal", "type": "string | RefObject", "required": false, "description": "Портал для выпадающего списка. Принимает id контейнера или ref.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderItem", "type": "((item: K) => ReactNode)", "required": false, "description": "Callback для кастомной настройки айтема в выпадающем списке.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderSelectionIcon", "type": "((selected: boolean | \"indeterminate\") => ReactNode)", "required": false, "description": "Callback для кастомной настройки иконки выбранного элемента.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderTarget", "type": "((value: K | null, opened?: boolean) => ReactNode) | ((value: K[], opened?: boolean) => ReactNode) | undefined", "required": false, "description": "Callback для кастомной настройки значения в селекте.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "renderValue", "type": "((item: K) => string)", "required": false, "description": "Callback для кастомной настройки значения в селекте.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "requiredPlacement", "type": "\"right\" | \"left\"", "required": false, "description": "Задает выравнивание индикатора обязательности поля", "default": "right", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "shift", "type": "boolean", "required": false, "description": "Смещение выпадающего списка при соприкосновении с границами экрана.", "default": "false", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "singleLine", "type": "boolean", "required": false, "description": "Label в элементе выпадающего списка в одну строку или с переносом строк.", "default": "true", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "size", "type": "\"s\" | \"xs\"", "required": false, "description": "Размер компонента.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "target", "type": "\"textfield-like\" | \"button-like\"", "required": false, "description": "Стиль селекта: button-like или textfield-like.", "default": "textfield-like", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "treeView", "type": "boolean", "required": false, "description": "Режим отображения выпадающего списка в виде дерева.", "default": "false", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "variant", "type": "\"normal\" | \"tight\"", "required": false, "description": "Вариант: обычный или сжатый", "default": "normal", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "view", "type": "\"clear\" | \"default\" | \"accent\" | \"positive\" | \"warning\" | \"negative\" | \"dark\" | \"secondary\" | \"black\" | \"white\" | \"edited\"", "required": false, "description": "Вид компонента.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "virtual", "type": "boolean", "required": false, "description": "Виртуализация в выпадающем списке.\nНе поддерживается в многоуровневых списках.", "default": "false", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "zIndex", "type": "ZIndex", "required": false, "description": "CSS-свойство z-index для выпадающего списка.", "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "_checkboxAppearance", "type": "string", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "_offset", "type": "[number, number]", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "appearance", "type": "\"default\" | \"viewMode\"", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "defaultValue", "type": "string | string[]", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "disabled", "type": "boolean", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "label", "type": "string", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "multiselect", "type": "boolean", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "onChange", "type": "ChangeEventHandler | ((value: string, item: K | null) => void) | ((value: string[], item: K | null) => void)", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "placeholder", "type": "string", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "readOnly", "type": "boolean", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "required", "type": "boolean", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "selectAllOptions", "type": "SelectAllProps", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" }, { "name": "value", "type": "string | string[]", "required": false, "inheritedFrom": "Select", "inheritedPackage": "@salutejs/sdds-finai" } ], "atomicMcpVersion": "0.355.0", "importPath": "@daisforge/ui", "importStatement": "import { Select } from '@daisforge/ui';", "minimalUsage": "\n