@ryuzaki13/react-foundation-ui 3.4.3 → 3.6.0

package/storybook-static/assets/contextMenu-CWGju9qn.js

@@ -1,2 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-woVbsQH3.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{c as i,l as a,m as o}from"./blocks-Cw5Dm88b.js";var s;function c(){return(c=e((()=>{s='# Context Menu\n\nУниверсальный модуль меню с двумя сценариями открытия:\n\n- `DropdownMenu` — открытие по обычному клику.\n- `ContextMenu` — открытие строго по событию `contextmenu` (правый клик), также поддержан клавиатурный вызов `Shift+F10` и клавиша `ContextMenu`.\n\nРеализация разделена на:\n\n- функциональный слой в `src/shared/lib/context-menu`;\n- UI-слой в `src/shared/ui/basic/context-menu`.\n\nМодуль готов к production-использованию: поддерживает controlled/uncontrolled режим, позиционирование через `floating-ui`, анимацию через `motion`, базовую a11y-разметку и клавиатурную навигацию.\n\n---\n\n## Быстрый старт\n\n```tsx\nimport { ContextMenu, DropdownMenu } from "@/shared/ui";\n```\n\n### Обычное меню (по клику)\n\n```tsx\n<DropdownMenu>\n	<DropdownMenu.Trigger>\n		<button type="button">Действия</button>\n	</DropdownMenu.Trigger>\n\n	<DropdownMenu.Content>\n		<DropdownMenu.Item>Редактировать</DropdownMenu.Item>\n		<DropdownMenu.Item>Копировать</DropdownMenu.Item>\n		<DropdownMenu.Separator />\n		<DropdownMenu.Item>Удалить</DropdownMenu.Item>\n	</DropdownMenu.Content>\n</DropdownMenu>\n```\n\n### Контекстное меню (по правому клику)\n\n```tsx\n<ContextMenu>\n	<ContextMenu.Trigger>\n		<div style={{ width: 320, height: 180 }}>Нажмите правой кнопкой мыши</div>\n	</ContextMenu.Trigger>\n\n	<ContextMenu.Content>\n		<ContextMenu.Item>Переименовать</ContextMenu.Item>\n		<ContextMenu.Item>Дублировать</ContextMenu.Item>\n		<ContextMenu.Separator />\n		<ContextMenu.Item>Переместить в корзину</ContextMenu.Item>\n	</ContextMenu.Content>\n</ContextMenu>\n```\n\n### Радиальное контекстное меню\n\nРадиальное меню подходит для короткого набора частых действий, которые удобно выбирать вокруг точки вызова. Для длинных списков, групп, разделителей и вложенных сценариев используйте обычный `ContextMenu.Content`.\n\n```tsx\n<ContextMenu>\n	<ContextMenu.Trigger>\n		<div style={{ width: 320, height: 180 }}>Нажмите правой кнопкой мыши</div>\n	</ContextMenu.Trigger>\n\n	<ContextMenu.RadialContent>\n		<ContextMenu.RadialItem icon={<PencilLine />}>Править</ContextMenu.RadialItem>\n		<ContextMenu.RadialItem icon={<Copy />}>Копия</ContextMenu.RadialItem>\n		<ContextMenu.RadialItem icon={<Pin />}>Закрепить</ContextMenu.RadialItem>\n		<ContextMenu.RadialItem icon={<Eye />}>Просмотр</ContextMenu.RadialItem>\n	</ContextMenu.RadialContent>\n</ContextMenu>\n```\n\nВ v1 радиальное меню поддерживает выбор только кликом по пункту. Выбор жестом по направлению движения и отпусканию кнопки мыши не реализован.\n\n---\n\n## API: UI-слой\n\n## `DropdownMenu`\n\nRoot-компонент для меню, открываемого по клику.\n\n### Props\n\n| Prop           | Тип                                | По умолчанию     | Описание                                                                           |\n| -------------- | ---------------------------------- | ---------------- | ---------------------------------------------------------------------------------- |\n| `children`     | `React.ReactNode`                  | —                | Композиция из `Trigger`, `Content` и опционально `Item`, `Separator`, `GroupLabel` |\n| `placement`    | `Placement` (`@floating-ui/react`) | `"bottom-start"` | Позиция меню относительно trigger-элемента                                         |\n| `open`         | `boolean`                          | —                | Controlled-состояние открытия                                                      |\n| `defaultOpen`  | `boolean`                          | `false`          | Начальное состояние в uncontrolled-режиме                                          |\n| `onOpenChange` | `(open: boolean) => void`          | —                | Колбэк изменения состояния                                                         |\n\n---\n\n## `ContextMenu`\n\nRoot-компонент для меню, открываемого по `contextmenu`.\n\n### Props\n\n| Prop           | Тип                                | По умолчанию    | Описание                                                                           |\n| -------------- | ---------------------------------- | --------------- | ---------------------------------------------------------------------------------- |\n| `children`     | `React.ReactNode`                  | —               | Композиция из `Trigger`, `Content` и опционально `Item`, `Separator`, `GroupLabel` |\n| `placement`    | `Placement` (`@floating-ui/react`) | `"right-start"` | Позиция меню относительно точки правого клика                                      |\n| `open`         | `boolean`                          | —               | Controlled-состояние открытия                                                      |\n| `defaultOpen`  | `boolean`                          | `false`         | Начальное состояние в uncontrolled-режиме                                          |\n| `onOpenChange` | `(open: boolean) => void`          | —               | Колбэк изменения состояния                                                         |\n\n---\n\n## `ContextMenu.RadialContent`\n\nКольцевой контейнер для коротких контекстных команд вокруг точки открытия.\n\n### Props\n\n| Prop                  | Тип                                                                        | По умолчанию | Описание                                      |\n| --------------------- | -------------------------------------------------------------------------- | ------------ | --------------------------------------------- |\n| `children`            | `React.ReactNode \\| ((ctx: { closeMenu: () => void }) => React.ReactNode)` | —            | Набор `ContextMenu.RadialItem`                |\n| `className`           | `string`                                                                   | —            | Дополнительный CSS-класс контейнера           |\n| `closeOnOutside`      | `boolean`                                                                  | `true`       | Закрывать ли меню при клике вне него          |\n| `closeOnEscape`       | `boolean`                                                                  | `true`       | Закрывать ли меню по клавише `Escape`         |\n| `disableOutsideClick` | `boolean`                                                                  | `false`      | Полностью выключить закрытие по клику снаружи |\n| `restoreFocus`        | `boolean`                                                                  | `true`       | Возвращать ли фокус в trigger после закрытия  |\n| `radius`              | `number`                                                                   | `76`         | Радиус раскладки пунктов в пикселях           |\n| `itemSize`            | `number`                                                                   | `64`         | Размер одного пункта в пикселях               |\n| `closeLabel`          | `string`                                                                   | `"Закрыть"`  | Текст и `aria-label` центральной кнопки       |\n\n### Поведение\n\n- Рендер в `document.body` через портал.\n- Центрируется на точке правого клика или на центре trigger-элемента при `Shift+F10`.\n- Центральная кнопка закрывает меню и не участвует в раскладке `RadialItem`.\n- Не выходит за границы viewport.\n- Навигация с клавиатуры: `ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Home`, `End`, `Escape`.\n- Оптимальный диапазон — 4-8 пунктов.\n\n---\n\n## `ContextMenu.RadialItem`\n\nПункт радиального меню.\n\n### Props\n\n| Prop            | Тип                                                    | По умолчанию | Описание                    |\n| --------------- | ------------------------------------------------------ | ------------ | --------------------------- |\n| `children`      | `React.ReactNode`                                      | —            | Подпись пункта              |\n| `icon`          | `React.ReactNode`                                      | —            | Иконка над подписью         |\n| `className`     | `string`                                               | —            | Дополнительный CSS-класс    |\n| `disabled`      | `boolean`                                              | `false`      | Блокирует выбор пункта      |\n| `closeOnSelect` | `boolean`                                              | `true`       | Закрывать меню после выбора |\n| `onSelect`      | `(event: React.MouseEvent<HTMLButtonElement>) => void` | —            | Обработчик выбора           |\n\n---\n\n## `*.Trigger`\n\nКомпоненты-триггеры:\n\n- `DropdownMenu.Trigger`\n- `ContextMenu.Trigger`\n\n### Props\n\n| Prop             | Тип                                                         | По умолчанию | Описание                                                                                         |\n| ---------------- | ----------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------ |\n| `children`       | `React.ReactElement`                                        | —            | Единственный дочерний элемент, в который пробрасываются обработчики                              |\n| `resolveTrigger` | `(eventTarget: EventTarget \\| null) => HTMLElement \\| null` | —            | Только `ContextMenu.Trigger`: выбирает вложенную цель события или отменяет открытие через `null` |\n\n### Важные детали\n\n- Для `DropdownMenu.Trigger` используется `onClick`.\n- Для `ContextMenu.Trigger` используется `onContextMenu` (с `preventDefault()`).\n- В оба trigger-компонента добавляются `aria-haspopup="menu"` и `aria-expanded`.\n- Вызов через клавиатуру работает в обоих триггерах: `Shift+F10` и `ContextMenu`.\n- `resolveTrigger` позволяет одному `ContextMenu` обслуживать таблицу или список:\n  точка клавиатурного открытия и возврат фокуса относятся к найденной вложенной\n  цели, а `null` не открывает меню.\n\n---\n\n## `*.Content`\n\nКомпонент отображения меню:\n\n- `DropdownMenu.Content`\n- `ContextMenu.Content`\n\n### Props\n\n| Prop                  | Тип                                                                        | По умолчанию | Описание                                       |\n| --------------------- | -------------------------------------------------------------------------- | ------------ | ---------------------------------------------- |\n| `children`            | `React.ReactNode \\| ((ctx: { closeMenu: () => void }) => React.ReactNode)` | —            | Контент меню или render-function с `closeMenu` |\n| `className`           | `string`                                                                   | —            | Дополнительный CSS-класс контейнера меню       |\n| `closeOnOutside`      | `boolean`                                                                  | `true`       | Закрывать ли меню при клике вне него           |\n| `closeOnEscape`       | `boolean`                                                                  | `true`       | Закрывать ли меню по клавише `Escape`          |\n| `disableOutsideClick` | `boolean`                                                                  | `false`      | Полностью выключить закрытие по клику снаружи  |\n\n### Поведение по умолчанию\n\n- Рендер в `document.body` через портал.\n- Роль контейнера: `role="menu"`.\n- Автофокус на первый доступный пункт меню.\n- Навигация с клавиатуры:\n- `ArrowDown`, `ArrowUp`\n- `Home`, `End`\n- `Escape`\n\n---\n\n## `*.Item`\n\nПункт меню:\n\n- `DropdownMenu.Item`\n- `ContextMenu.Item`\n\n### Props\n\n| Prop            | Тип                                              | По умолчанию | Описание                           |\n| --------------- | ------------------------------------------------ | ------------ | ---------------------------------- |\n| `children`      | `React.ReactNode`                                | —            | Текст/контент пункта               |\n| `icon`          | `React.ReactNode`                                | —            | Иконка слева                       |\n| `hotKey`        | `string`                                         | —            | Подсказка сочетания клавиш справа  |\n| `className`     | `string`                                         | —            | Дополнительный CSS-класс           |\n| `disabled`      | `boolean`                                        | `false`      | Блокирует выбор пункта             |\n| `href`          | `string`                                         | —            | Рендер как `<a>` вместо `<button>` |\n| `target`        | `string`                                         | —            | Атрибут ссылки                     |\n| `rel`           | `string`                                         | —            | Атрибут ссылки                     |\n| `closeOnSelect` | `boolean`                                        | `true`       | Закрывать меню после выбора        |\n| `onSelect`      | `(event: React.MouseEvent<HTMLElement>) => void` | —            | Обработчик выбора                  |\n\n### Поведение\n\n- Если передан `href`, рендерится ссылка `<a role="menuitem">`.\n- Если `href` не передан, рендерится `<button role="menuitem">`.\n- Если `disabled`, выбор блокируется и закрытие не выполняется.\n\n---\n\n## `*.Separator`\n\nРазделитель группы пунктов.\n\n### Props\n\n| Prop        | Тип      | По умолчанию | Описание                 |\n| ----------- | -------- | ------------ | ------------------------ |\n| `className` | `string` | —            | Дополнительный CSS-класс |\n\n---\n\n## `*.GroupLabel`\n\nЛейбл группы пунктов.\n\n### Props\n\n| Prop        | Тип               | По умолчанию | Описание                 |\n| ----------- | ----------------- | ------------ | ------------------------ |\n| `children`  | `React.ReactNode` | —            | Текст группы             |\n| `className` | `string`          | —            | Дополнительный CSS-класс |\n\n---\n\n## API: функциональный слой (`src/shared/lib/context-menu`)\n\nИмпорт:\n\n```ts\nimport {\n	initialMenuState,\n	openMenu,\n	closeMenu,\n	toggleMenu,\n	getMenuPointFromEvent,\n	getMenuPointFromRect,\n	createVirtualAnchor\n} from "@/shared/lib/context-menu";\n```\n\n### Типы\n\n```ts\ninterface MenuPoint {\n	x: number;\n	y: number;\n}\n\ntype MenuOpenSource = "click" | "contextmenu" | "keyboard" | "programmatic";\n\ntype MenuAnchor = { type: "element"; element: HTMLElement } | { type: "point"; point: MenuPoint; contextElement?: Element | null };\n\ninterface MenuState {\n	open: boolean;\n	source: MenuOpenSource | null;\n	anchor: MenuAnchor | null;\n}\n\ninterface OpenMenuPayload {\n	source: MenuOpenSource;\n	anchor: MenuAnchor;\n}\n```\n\n### Функции состояния\n\n| Функция            | Сигнатура                                                   | Назначение                            |\n| ------------------ | ----------------------------------------------------------- | ------------------------------------- |\n| `initialMenuState` | `MenuState`                                                 | Начальное состояние закрытого меню    |\n| `openMenu`         | `(payload: OpenMenuPayload) => MenuState`                   | Создать состояние открытого меню      |\n| `closeMenu`        | `(state: MenuState) => MenuState`                           | Закрыть меню и очистить anchor/source |\n| `toggleMenu`       | `(state: MenuState, payload: OpenMenuPayload) => MenuState` | Переключить состояние                 |\n\n### Функции позиционирования\n\n| Функция                 | Сигнатура                                                                                                                | Назначение                               |\n| ----------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- |\n| `getMenuPointFromEvent` | `(event: { clientX: number; clientY: number }) => MenuPoint`                                                             | Получить координаты из mouse event       |\n| `getMenuPointFromRect`  | `(rect: { left: number; top: number; width: number; height: number }) => MenuPoint`                                      | Получить центр прямоугольника            |\n| `createVirtualAnchor`   | `(point: MenuPoint, contextElement?: Element \\| null) => { getBoundingClientRect(): DOMRect; contextElement?: Element }` | Создать virtual anchor для `floating-ui` |\n\n---\n\n## Примеры использования\n\n## 1) Controlled `DropdownMenu`\n\n```tsx\nconst [open, setOpen] = useState(false);\n\nreturn (\n	<DropdownMenu open={open} onOpenChange={setOpen}>\n		<DropdownMenu.Trigger>\n			<button type="button">{open ? "Скрыть" : "Показать"} меню</button>\n		</DropdownMenu.Trigger>\n		<DropdownMenu.Content>\n			<DropdownMenu.Item onSelect={() => console.log("Edit")}>Редактировать</DropdownMenu.Item>\n			<DropdownMenu.Item onSelect={() => setOpen(false)}>Закрыть вручную</DropdownMenu.Item>\n		</DropdownMenu.Content>\n	</DropdownMenu>\n);\n```\n\n## 2) Controlled `ContextMenu`\n\n```tsx\nconst [open, setOpen] = useState(false);\n\nreturn (\n	<ContextMenu open={open} onOpenChange={setOpen}>\n		<ContextMenu.Trigger>\n			<div tabIndex={0}>Правая кнопка мыши</div>\n		</ContextMenu.Trigger>\n		<ContextMenu.Content>\n			<ContextMenu.Item onSelect={() => alert("Открыть")}>Открыть</ContextMenu.Item>\n		</ContextMenu.Content>\n	</ContextMenu>\n);\n```\n\n## 3) Группы, иконки, горячие клавиши\n\n```tsx\n<DropdownMenu>\n	<DropdownMenu.Trigger>\n		<button type="button">Меню</button>\n	</DropdownMenu.Trigger>\n	<DropdownMenu.Content>\n		<DropdownMenu.GroupLabel>Документ</DropdownMenu.GroupLabel>\n		<DropdownMenu.Item icon={<FilePenLine size={14} />} hotKey="Ctrl+E">\n			Редактировать\n		</DropdownMenu.Item>\n		<DropdownMenu.Item icon={<Copy size={14} />} hotKey="Ctrl+C">\n			Копировать\n		</DropdownMenu.Item>\n		<DropdownMenu.Separator />\n		<DropdownMenu.GroupLabel>Опасные</DropdownMenu.GroupLabel>\n		<DropdownMenu.Item icon={<Trash2 size={14} />} hotKey="Del">\n			Удалить\n		</DropdownMenu.Item>\n	</DropdownMenu.Content>\n</DropdownMenu>\n```\n\n## 4) Пункт-ссылка\n\n```tsx\n<ContextMenu.Item href="/docs/123" target="_blank" rel="noreferrer">\n	Открыть документацию\n</ContextMenu.Item>\n```\n\n## 5) Оставлять меню открытым после выбора\n\n```tsx\n<DropdownMenu.Item closeOnSelect={false} onSelect={() => setFilter("active")}>\n	Только активные\n</DropdownMenu.Item>\n```\n\n## 6) Render-function контента с `closeMenu`\n\n```tsx\n<ContextMenu.Content>\n	{({ closeMenu }) => (\n		<div>\n			<ContextMenu.Item onSelect={() => runCommand("rename")}>Переименовать</ContextMenu.Item>\n			<button type="button" onClick={closeMenu}>\n				Закрыть\n			</button>\n		</div>\n	)}\n</ContextMenu.Content>\n```\n\n## 7) Асинхронный `onSelect` с ручным закрытием\n\n```tsx\n<DropdownMenu.Item\n	closeOnSelect={false}\n	onSelect={async () => {\n		await saveDraft();\n		notify("Черновик сохранен");\n	}}>\n	Сохранить черновик\n</DropdownMenu.Item>\n```\n\n## 8) Отключить закрытие по клику вне меню\n\n```tsx\n<DropdownMenu.Content disableOutsideClick closeOnEscape>\n	<DropdownMenu.Item>Пункт</DropdownMenu.Item>\n</DropdownMenu.Content>\n```\n\n## 9) Кастомные стили контейнера\n\n```tsx\n<ContextMenu.Content className="myContextMenu">\n	<ContextMenu.Item>Кастомный пункт</ContextMenu.Item>\n</ContextMenu.Content>\n```\n\n```scss\n.myContextMenu {\n	min-width: 18rem;\n	max-width: 28rem;\n}\n```\n\n## 10) Использование low-level функций `shared/lib/context-menu`\n\n```ts\nimport { closeMenu, initialMenuState, openMenu, toggleMenu } from "@/shared/lib/context-menu";\n\nlet state = initialMenuState;\n\nstate = openMenu({\n	source: "programmatic",\n	anchor: {\n		type: "point",\n		point: { x: 100, y: 200 }\n	}\n});\n\nstate = toggleMenu(state, {\n	source: "click",\n	anchor: {\n		type: "point",\n		point: { x: 120, y: 220 }\n	}\n});\n\nstate = closeMenu(state);\n```\n\n---\n\n## Доступность и клавиатура\n\n- `Trigger` получает `aria-haspopup="menu"` и `aria-expanded`.\n- Контент рендерится с `role="menu"`.\n- Элементы действий рендерятся с `role="menuitem"`.\n- Поддержка клавиш:\n- `Shift+F10` / `ContextMenu` для открытия;\n- `ArrowUp` / `ArrowDown` для перемещения;\n- `Home` / `End` для перехода к первому/последнему пункту;\n- `Escape` для закрытия.\n\n---\n\n## Storybook\n\nИстории находятся в:\n\n- `src/shared/ui/atomic/context-menu/stories/ContextMenu.stories.tsx`\n\nОсновные сценарии:\n\n- `DropdownMenu / Базовый`\n- `ContextMenu / По правому клику`\n- `DropdownMenu / Контролируемый`\n\n---\n\n## Внутренние детали реализации\n\n- Позиционирование: `@floating-ui/react`.\n- Анимация открытия/закрытия: `motion/react` (`AnimatePresence`, `motion.div`).\n- Для совместимости с анимацией позиционирование `floating-ui` переведено на `top/left` (`transform: false`), чтобы исключить конфликт `transform` со стороны `motion`.\n\n---\n\n## Тесты\n\nПокрыты функциональные утилиты слоя `shared/lib/context-menu`:\n\n- `src/shared/lib/context-menu/state.test.ts`\n- `src/shared/lib/context-menu/anchor.test.ts`\n\nЗапуск:\n\n```bash\nnpx vitest run src/shared/lib/context-menu/state.test.ts src/shared/lib/context-menu/anchor.test.ts\n```\n'})))()}function l(e){return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(a,{title:`Документация/ContextMenu`}),`
-`,(0,d.jsx)(i,{children:s})]})}function u(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(l,{...e})}):l(e)}var d;function f(){return(f=e((()=>{d=t(),r(),o(),c()})))()}f();export{u as default};

package/storybook-static/assets/iframe-Dyd6jnSv.js

@@ -1 +0,0 @@
-import{t as e}from"./iframe-woVbsQH3.js";e();

package/storybook-static/assets/sortable-CXLU2ip-.js

@@ -1 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{i as n,n as r,r as i}from"./iframe-woVbsQH3.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{a as s,c,d as l,f as u,i as d,l as f,m as p,n as m,o as h,p as g,r as _,s as v,u as y}from"./hooks-DjR-EyBl.js";var b,x;function S(){return(S=e((()=>{n(),b=[[`circle`,{cx:`12`,cy:`5`,r:`1`,key:`gxeob9`}],[`circle`,{cx:`19`,cy:`5`,r:`1`,key:`w8mnmm`}],[`circle`,{cx:`5`,cy:`5`,r:`1`,key:`lttvr7`}],[`circle`,{cx:`12`,cy:`12`,r:`1`,key:`41hilf`}],[`circle`,{cx:`19`,cy:`12`,r:`1`,key:`1wjl8i`}],[`circle`,{cx:`5`,cy:`12`,r:`1`,key:`1pcz8c`}],[`circle`,{cx:`12`,cy:`19`,r:`1`,key:`lyex9k`}],[`circle`,{cx:`19`,cy:`19`,r:`1`,key:`shf9b7`}],[`circle`,{cx:`5`,cy:`19`,r:`1`,key:`bfqh0e`}]],x=i(`grip`,b)})))()}function C(e){return e?.data.current?.sortable.containerId??null}function w(e,t){return Array.isArray(t)?t:t[String(e)]??null}function T(e,t){if(t)return t;switch(e){case`horizontal`:return s;case`grid`:return v;default:return f}}function E(e){let{event:t,items:n}=e,{active:r,over:i}=t;if(!i||r.id===i.id)return null;let a=C(r),o=C(i);if(a==null||o==null||a!==o)return null;let s=w(a,n);if(!s)return null;let c=s.indexOf(r.id),l=s.indexOf(i.id);return c<0||l<0?null:{containerId:a,activeId:r.id,overId:i.id,fromIndex:c,toIndex:l}}function D(){return(D=e((()=>{h()})))()}function O(e,t){return typeof e==`function`?e(t):e}function k(e,t){return typeof e==`function`?e(t):e}function A(e){let{children:t,collisionDetection:n=l,sensors:r,onDragCancel:i,onDragEnd:a,onDragMove:o,onDragOver:s,onDragPending:c,onDragStart:u,accessibility:d,...f}=e,p=m(),h=typeof document>`u`?void 0:document.body,g=(0,P.useMemo)(()=>({...d,container:d?.container??h}),[d,h]);return(0,F.jsx)(y,{...f,accessibility:g,sensors:r??p,collisionDetection:n,onDragStart:u,onDragMove:o,onDragOver:s,onDragEnd:a,onDragCancel:i,onDragPending:c,children:t})}function j(e){let{children:t,containerId:n,items:r,layout:i=`vertical`,strategy:a}=e;return(0,F.jsx)(d,{id:String(n),items:[...r],strategy:T(i,a),children:t})}function M(e){let{as:t,id:n,children:r,className:i,style:o,disabled:s=!1,dragActivator:l=`handle`,...u}=e,d=t??`div`,{attributes:f,listeners:p,setActivatorNodeRef:m,setNodeRef:h,transform:_,transition:v,isDragging:y,isOver:b,isSorting:x}=c({id:n,disabled:s}),S={transform:g.Transform.toString(_),transition:v,zIndex:!s&&y?2:1,opacity:!s&&y?.6:void 0,...o},C=(0,P.useMemo)(()=>({attributes:f,listeners:l===`handle`?p:void 0,setActivatorNodeRef:m,disabled:s||l!==`handle`,isDragging:y}),[f,p,m,s,l,y]),w={isDragging:y,isOver:b,isSorting:x,disabled:s},T=l===`item`&&!s?{...f,...p}:{};return(0,F.jsx)(I.Provider,{value:C,children:(0,P.createElement)(d,{...u,...T,ref:h,className:a(i),style:S,"data-sortable-id":String(n),"data-sortable-dragging":y?`true`:`false`,"data-sortable-disabled":s?`true`:`false`},O(r,w))})}function N(e){let{as:t,children:n,disabled:r=!1,...i}=e,a=t??`div`,o=(0,P.useContext)(I),s=r||!o||o.disabled,c=s?{}:{...o.attributes,...o.listeners},l={disabled:s,isDragging:o?.isDragging??!1};return(0,P.createElement)(a,{...i,...c,ref:!s&&o?o.setActivatorNodeRef:void 0,"aria-disabled":s||void 0,"data-sortable-handle":`true`,"data-sortable-handle-disabled":s?`true`:`false`,"data-sortable-handle-dragging":l.isDragging?`true`:`false`},k(n,l))}var P,F,I;function L(){return(L=e((()=>{P=t(),u(),h(),p(),_(),o(),D(),F=r(),I=(0,P.createContext)(null),A.__docgenInfo={description:``,methods:[],displayName:`SortableRoot`,props:{children:{required:!0,tsType:{name:`ReactNode`},description:``},collisionDetection:{required:!1,tsType:{name:`DndContextProps["collisionDetection"]`,raw:`DndContextProps["collisionDetection"]`},description:``},sensors:{required:!1,tsType:{name:`DndContextProps["sensors"]`,raw:`DndContextProps["sensors"]`},description:``}}},j.__docgenInfo={description:``,methods:[],displayName:`SortableContainer`,props:{children:{required:!0,tsType:{name:`ReactNode`},description:``},containerId:{required:!0,tsType:{name:`UniqueIdentifier`},description:``},items:{required:!0,tsType:{name:`unknown`},description:``},layout:{required:!1,tsType:{name:`union`,raw:`"vertical" | "horizontal" | "grid"`,elements:[{name:`literal`,value:`"vertical"`},{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"grid"`}]},description:``},strategy:{required:!1,tsType:{name:`SortingStrategy`},description:``}}},M.__docgenInfo={description:``,methods:[],displayName:`SortableItem`,props:{as:{required:!1,tsType:{name:`ElementType`},description:``},id:{required:!0,tsType:{name:`UniqueIdentifier`},description:``},children:{required:!1,tsType:{name:`union`,raw:`ReactNode | ((state: SortableItemRenderState) => ReactNode)`,elements:[{name:`ReactNode`},{name:`unknown`}]},description:``},className:{required:!1,tsType:{name:`string`},description:``},style:{required:!1,tsType:{name:`CSSProperties`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},dragActivator:{required:!1,tsType:{name:`union`,raw:`"handle" | "item"`,elements:[{name:`literal`,value:`"handle"`},{name:`literal`,value:`"item"`}]},description:``}}},N.__docgenInfo={description:``,methods:[],displayName:`SortableHandle`,props:{as:{required:!1,tsType:{name:`ElementType`},description:``},children:{required:!1,tsType:{name:`union`,raw:`ReactNode | ((state: Pick<SortableHandleContextValue, "disabled" | "isDragging">) => ReactNode)`,elements:[{name:`ReactNode`},{name:`unknown`}]},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``}}}})))()}var R,z;function B(){return(B=e((()=>{R=`_7rGb26`,z={dragHandle:R}})))()}function V(e,t){return e??t}function H(e,t,n){return e==null?t??n:t}function U(e){if(e.as===`button`){let{as:t,children:n,className:r,disabled:i=!1,icon:o=(0,W.jsx)(x,{"aria-hidden":`true`}),type:s=`button`,...c}=e,l=H(n,c[`aria-label`],c.title);return(0,W.jsx)(N,{...c,as:t,type:s,disabled:i,"aria-label":l,className:a(z.dragHandle,r),children:V(n,o)})}let{as:t,children:n,className:r,disabled:i=!1,icon:o=(0,W.jsx)(x,{"aria-hidden":`true`}),...s}=e,c=H(n,s[`aria-label`],s.title);return(0,W.jsx)(N,{...s,as:t,disabled:i,"aria-label":c,className:a(z.dragHandle,r),children:V(n,o)})}var W;function G(){return(G=e((()=>{o(),S(),L(),B(),W=r(),U.__docgenInfo={description:``,methods:[],displayName:`SortableDragHandle`}})))()}var K;function q(){return(q=e((()=>{L(),G(),D(),K={Root:A,Container:j,Item:M,Handle:N,DragHandle:U}})))()}export{D as i,q as n,E as r,K as t};

package/storybook-static/assets/usePickerQuery-CaO8hXyH.js

@@ -1 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-woVbsQH3.js";import{a as r,i}from"./utils-tg3ibbzi.js";import{n as a,t as o}from"./ui.module-CyEEibCu.js";import{c as s,s as c}from"./Option-fRoOLqLF.js";import{a as l}from"./usePickerTriggerController-DWjrt_q_.js";function u({emptyState:e,errorState:t}){let n=t??e;return n==null?null:(0,d.jsx)(`div`,{className:r(a.uiPopupOption,c.status,t!==void 0&&c.statusError),"aria-disabled":!0,children:n})}var d;function f(){return(f=e((()=>{i(),o(),s(),d=n(),u.__docgenInfo={description:``,methods:[],displayName:`PickerStatus`,props:{emptyState:{required:!1,tsType:{name:`ReactNode`},description:``},errorState:{required:!1,tsType:{name:`ReactNode`},description:``}}}})))()}function p({query:e,defaultQuery:t,onQuery:n,resetOnClose:r,triggerMode:i}){let a=e!==void 0,[o,s]=(0,m.useState)(t??``),c=a?e??``:o,u=r??(!i||l(i).resetQueryOnClose),d=e=>{a||s(e),n?.(e)};return{query:c,setQuery:d,clearQuery:()=>d(``),resetQueryOnClose:u}}var m;function h(){return(h=e((()=>{m=t()})))()}export{f as i,p as n,u as r,h as t};

package/storybook-static/assets/usePickerTriggerController-DWjrt_q_.js

@@ -1,6 +0,0 @@
-import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./x-D2Q9PGsq.js";import{n as i}from"./iframe-woVbsQH3.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{n as s,r as c,t as l}from"./floating-ui.react-CyNWkXBV.js";import{n as u,t as d}from"./ui.module-CyEEibCu.js";import{n as f,r as p,t as m}from"./react-D3CyilRt.js";import{r as h,t as g}from"./hooks-DjR-EyBl.js";import{c as _,i as v,r as y,s as b}from"./Option-fRoOLqLF.js";import{i as x,l as S,r as C}from"./Input-B8eGQXlp.js";import{n as w,t as T}from"./PickerTriggerActions-BDGEQPvP.js";function E({disabled:e,ariaLabel:t=`Очистить выбор`,onClear:n}){let i=e=>{e.preventDefault(),e.stopPropagation()};return(0,D.jsx)(`button`,{type:`button`,disabled:e,className:u.uiClearButton,"data-ui":`picker-clear-button`,"data-action":`clear-picker`,onMouseDown:i,onClick:e=>{i(e),n()},"aria-label":t,children:(0,D.jsx)(r,{})})}var D;function O(){return(O=e((()=>{n(),d(),D=i(),E.__docgenInfo={description:`Единое действие очистки выбранного значения во всех clearable picker-компонентах.`,methods:[],displayName:`PickerClearButton`,props:{disabled:{required:!1,tsType:{name:`boolean`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Очистить выбор"`,computed:!1}},onClear:{required:!0,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``}}}})))()}function k(e){if(typeof e==`string`||typeof e==`number`)return String(e);if(Array.isArray(e)){let t=e.map(k).filter(e=>!!e).map(e=>e.trim()).filter(Boolean);return t.length?t.join(` `):void 0}if((0,A.isValidElement)(e))return typeof e.props.searchText==`string`?e.props.searchText:k(e.props.children)}var A;function j(){return(j=e((()=>{A=t()})))()}function M({placeholder:e,label:t,optionCount:n,fallback:r=`Выберите значение`}){let i=k(t);return`${e??i??r} <${n}>`}function N(){return(N=e((()=>{j()})))()}function P(e){e.stopPropagation()}function F({open:e,context:t,floatingStyles:n,listId:r,labelId:i,popupAriaLabel:a,descriptionId:o,activeOptionId:c,ariaMultiselectable:u,popupRole:d=`listbox`,setFloating:m,getFloatingProps:h,onKeyDown:g,initialFocus:_=-1,returnFocus:v=!1,tabIndex:x=0,className:S,maxWidth:C,layoutClassName:w,bodyClassName:T,toolbar:E,selectionActions:D,children:O}){return(0,I.jsx)(p,{children:e&&(0,I.jsx)(s,{children:(0,I.jsx)(l,{context:t,modal:!1,initialFocus:_,returnFocus:v,children:(0,I.jsx)(f.div,{ref:m,style:{...n,maxWidth:C},initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},...h({id:r,role:d,tabIndex:x,"aria-labelledby":i,"aria-label":i?void 0:a,"aria-describedby":o,"aria-activedescendant":c,"aria-multiselectable":u||void 0,onMouseDown:P,onKeyDown:g,className:b.popupPositioner}),children:(0,I.jsx)(y,{className:S,layoutClassName:w,bodyClassName:T,toolbar:E,selectionActions:D,scrollable:!1,children:O})})})})})}var I;function L(){return(L=e((()=>{c(),m(),_(),v(),I=i(),F.__docgenInfo={description:``,methods:[],displayName:`PickerPopup`,props:{open:{required:!0,tsType:{name:`boolean`},description:``},context:{required:!0,tsType:{name:`FloatingContext`},description:``},floatingStyles:{required:!0,tsType:{name:`CSSProperties`},description:``},listId:{required:!0,tsType:{name:`string`},description:``},labelId:{required:!1,tsType:{name:`string`},description:``},popupAriaLabel:{required:!1,tsType:{name:`string`},description:``},descriptionId:{required:!1,tsType:{name:`string`},description:``},activeOptionId:{required:!1,tsType:{name:`string`},description:``},ariaMultiselectable:{required:!1,tsType:{name:`boolean`},description:``},popupRole:{required:!1,tsType:{name:`union`,raw:`"listbox" | "dialog"`,elements:[{name:`literal`,value:`"listbox"`},{name:`literal`,value:`"dialog"`}]},description:``,defaultValue:{value:`"listbox"`,computed:!1}},setFloating:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(node: HTMLElement | null) => void`,signature:{arguments:[{type:{name:`union`,raw:`HTMLElement | null`,elements:[{name:`HTMLElement`},{name:`null`}]},name:`node`}],return:{name:`void`}}},description:``},getFloatingProps:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(userProps?: Record<string, unknown>) => Record<string, unknown>`,signature:{arguments:[{type:{name:`Record`,elements:[{name:`string`},{name:`unknown`}],raw:`Record<string, unknown>`},name:`userProps`}],return:{name:`Record`,elements:[{name:`string`},{name:`unknown`}],raw:`Record<string, unknown>`}}},description:``},onKeyDown:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(event: KeyboardEvent<HTMLElement>) => void`,signature:{arguments:[{type:{name:`KeyboardEvent`,elements:[{name:`HTMLElement`}],raw:`KeyboardEvent<HTMLElement>`},name:`event`}],return:{name:`void`}}},description:``},initialFocus:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`-1`,computed:!1}},returnFocus:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},tabIndex:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``},maxWidth:{required:!1,tsType:{name:`CSSProperties["maxWidth"]`,raw:`CSSProperties["maxWidth"]`},description:``},layoutClassName:{required:!1,tsType:{name:`string`},description:``},bodyClassName:{required:!1,tsType:{name:`string`},description:``},toolbar:{required:!1,tsType:{name:`union`,raw:`ReactNode | false`,elements:[{name:`ReactNode`},{name:`literal`,value:`false`}]},description:``},selectionActions:{required:!1,tsType:{name:`signature`,type:`object`,raw:`{
-	onSelectAll: () => void;
-	onDeselectAll: () => void;
-	selectAllButtonRef?: Ref<HTMLButtonElement>;
-}`,signature:{properties:[{key:`onSelectAll`,value:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}},required:!0}},{key:`onDeselectAll`,value:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}},required:!0}},{key:`selectAllButtonRef`,value:{name:`Ref`,elements:[{name:`HTMLButtonElement`}],raw:`Ref<HTMLButtonElement>`,required:!1}}]}},description:``},children:{required:!0,tsType:{name:`ReactNode`},description:``}}}})))()}function R({children:e,className:t,...n}){return(0,z.jsx)(`span`,{...n,className:a(b.selectedToken,t),"data-ui":`picker-selected-token`,children:(0,z.jsx)(`span`,{className:b.selectedTokenText,children:e})})}var z;function B(){return(B=e((()=>{o(),_(),z=i(),R.__docgenInfo={description:`Единое визуальное представление выбранного значения внутри picker-trigger.`,methods:[],displayName:`PickerSelectedToken`,props:{children:{required:!0,tsType:{name:`ReactNode`},description:``}},composes:[`Omit`]}})))()}var V,H,U;function W(){return(W=e((()=>{V=t(),o(),S(),d(),_(),H=i(),U=(0,V.forwardRef)(({rootRef:e,endAdornment:t,overlay:n,rootClassName:r,inputClassName:i,isLoading:o,...s},c)=>{let l=n!=null;return(0,H.jsx)(`div`,{ref:e,className:a(u.uiInputContainer,b.triggerContainer,r),"data-has-overlay":l||void 0,children:o?(0,H.jsx)(x,{}):(0,H.jsxs)(H.Fragment,{children:[(0,H.jsx)(C,{endAdornment:t,children:({controlClassName:e})=>(0,H.jsx)(`input`,{...s,ref:c,className:a(u.uiInputWithToggle,e,i)})}),l?n:null]})})}),U.displayName=`PickerTriggerInput`,U.__docgenInfo={description:``,methods:[],displayName:`PickerTriggerInput`,props:{rootRef:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(node: HTMLDivElement | null) => void`,signature:{arguments:[{type:{name:`union`,raw:`HTMLDivElement | null`,elements:[{name:`HTMLDivElement`},{name:`null`}]},name:`node`}],return:{name:`void`}}},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},overlay:{required:!1,tsType:{name:`ReactNode`},description:``},rootClassName:{required:!1,tsType:{name:`string`},description:``},inputClassName:{required:!1,tsType:{name:`string`},description:``},isLoading:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`Omit`]}})))()}function G({ref:e,open:t,optionCount:n,placeholder:r,label:i,placeholderFallback:a,selectedValue:o,hasSelection:s,showSelectedValue:c=o!=null,clearable:l=!1,onClear:u,clearAriaLabel:d,onToggleMouseDown:f,onToggleClick:p,openAriaLabel:m,closeAriaLabel:h,disabled:g,inputClassName:_,...v}){let y=l&&(s??o!=null)&&u!==void 0&&!g;return(0,K.jsx)(U,{...v,ref:e,disabled:g,placeholder:c?void 0:M({placeholder:r,label:i,optionCount:n,fallback:a}),inputClassName:_,rootClassName:l?b.triggerHasClear:void 0,overlay:c?(0,K.jsx)(R,{children:o}):void 0,endAdornment:(0,K.jsx)(T,{open:t,disabled:g,onToggleMouseDown:f,onToggleClick:p,openAriaLabel:m,closeAriaLabel:h,children:y?(0,K.jsx)(E,{ariaLabel:d,onClear:u}):null})})}var K;function q(){return(q=e((()=>{_(),O(),N(),B(),w(),W(),K=i(),G.__docgenInfo={description:`Общая композиция picker-trigger: input, выбранное значение, очистка и кнопка
-открытия. Владельцы picker-моделей передают только состояние и обработчики.`,methods:[],displayName:`PickerTrigger`,props:{ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLInputElement`}],raw:`Ref<HTMLInputElement>`},description:``},open:{required:!0,tsType:{name:`boolean`},description:``},optionCount:{required:!0,tsType:{name:`number`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},label:{required:!1,tsType:{name:`ReactNode`},description:``},placeholderFallback:{required:!1,tsType:{name:`string`},description:``},selectedValue:{required:!1,tsType:{name:`ReactNode`},description:``},hasSelection:{required:!1,tsType:{name:`boolean`},description:``},showSelectedValue:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`selectedValue !== undefined && selectedValue !== null`,computed:!1}},clearable:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},onClear:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},clearAriaLabel:{required:!1,tsType:{name:`string`},description:``},onToggleMouseDown:{required:!1,tsType:{name:`Parameters[0]["onToggleMouseDown"]`,raw:`PickerTriggerActionsProps["onToggleMouseDown"]`},description:``},onToggleClick:{required:!0,tsType:{name:`Parameters[0]["onToggleClick"]`,raw:`PickerTriggerActionsProps["onToggleClick"]`},description:``},openAriaLabel:{required:!1,tsType:{name:`string`},description:``},closeAriaLabel:{required:!1,tsType:{name:`string`},description:``}},composes:[`Omit`]}})))()}function J(e){switch(e){case`search-single`:return{focusFloatingOnOpen:!1,restoreFocusOnClose:!1,resetQueryOnClose:!0,shouldOpenOnTriggerClick:()=>!1,shouldOpenOnInputChange:e=>!e,shouldFocusReferenceOnToggle:e=>!e,shouldSelectTriggerTextOnFocus:({open:e,currentQuery:t,hasDisplayValue:n})=>!e&&t.length===0&&n};case`search-multi`:return{focusFloatingOnOpen:!1,restoreFocusOnClose:!1,resetQueryOnClose:!0,shouldOpenOnTriggerClick:()=>!1,shouldOpenOnInputChange:e=>!e,shouldFocusReferenceOnToggle:e=>!e,shouldSelectTriggerTextOnFocus:()=>!1};default:return{focusFloatingOnOpen:!0,restoreFocusOnClose:!0,resetQueryOnClose:!1,shouldOpenOnTriggerClick:e=>!e,shouldOpenOnInputChange:()=>!1,shouldFocusReferenceOnToggle:()=>!1,shouldSelectTriggerTextOnFocus:()=>!1}}}function Y(){return(Y=e((()=>{})))()}function X(e){let t=e.triggerMode?J(e.triggerMode):void 0;return g({...e,focusFloatingOnOpen:e.focusFloatingOnOpen??t?.focusFloatingOnOpen,restoreFocusOnClose:e.restoreFocusOnClose??t?.restoreFocusOnClose})}function Z(){return(Z=e((()=>{h()})))()}function Q(e){requestAnimationFrame(()=>{e.current?.focus()})}function ee({mode:e,open:t,currentQuery:n,hasDisplayValue:r,inputRef:i,setQuery:a,openList:o,close:s,toggleOpen:c,onBeforeOpen:l}){let u=J(e),d=()=>{if(l?.(),o){o();return}c?.()},f=()=>{if(s){s();return}c?.()},p=()=>{t?f():d(),u.shouldFocusReferenceOnToggle(t)&&Q(i)};return{policy:u,handleTriggerInputChange:e=>{a?.(e),u.shouldOpenOnInputChange(t)&&d()},handleTriggerClick:()=>{u.shouldOpenOnTriggerClick(t)&&d()},handleTriggerFocus:e=>{u.shouldSelectTriggerTextOnFocus({open:t,currentQuery:n,hasDisplayValue:r})&&requestAnimationFrame(()=>{e.select()})},handleToggleMouseDown:e=>{e.preventDefault()},handleToggleClick:()=>{p()},handleTriggerKeyDown:({event:e,onActivateWhenOpen:n,enableSpaceActivation:r=!1,enableClosedArrowDownOpen:i=!1,suppressClosedArrowUp:a=!1})=>{if(!t&&a&&e.key===`ArrowUp`){e.preventDefault();return}if(!t&&i&&e.key===`ArrowDown`){e.preventDefault(),p();return}if(e.key===`Enter`){e.preventDefault(),t?n?.():p();return}r&&e.key===` `&&(e.preventDefault(),t?n?.():p())},toggleTrigger:p}}function $(){return($=e((()=>{})))()}export{J as a,q as c,k as d,j as f,X as i,F as l,ee as n,Y as o,Z as r,G as s,$ as t,L as u};