@soxa-ui/solid 0.0.0-stage → 0.3.0-beta.1

package/dist/source/components/label/Label.jsx

@@ -0,0 +1,24 @@
+import { Root, createRootProps, renderSlot, resolveSlot } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupLabel } from './setup.component';
+/**
+ * Подпись контрола: контрол — первый labelable-потомок `label`, внутри — только `span`.
+ * Пустой текст не рисуется вовсе: Solid оставил бы от снятого текста пустой
+ * текстовый узел, и тема не спрятала бы обёртку по `:empty`.
+ */
+export function Label(props) {
+    const binding = setupLabel(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const content = resolveSlot(() => props.content, () => ({}));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<span class="so-label__control">{renderSlot(props.children)}</span>
+				<span class="so-label__text">{content() ?? (state.text || undefined)}</span>
+			</Root>
+		</Show>);
+}

package/dist/source/components/label/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/label/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupLabel } from './setup.component';
+export { Label } from './Label';

package/dist/source/components/label/setup.component.js

@@ -0,0 +1,6 @@
+import { LabelDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupLabel(props) {
+    const adapter = createSolidAdapterContext(LabelDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/list-box/ListBox.jsx

@@ -0,0 +1,70 @@
+import { Elevate, KeyedFor, ResolvedSlot, createPartProps, createRootProps, relaySlot, renderSlot, toControlAttrs, toRootForward, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { ListBoxItem } from './item';
+import { ListBoxGroup } from './group';
+import { setupListBox } from './setup.component';
+/** Элемент записи; у распорки его нет. */
+function itemOf(entry) {
+    return entry.kind === 'item' ? entry.item : undefined;
+}
+/** Стиль распорки — высота пропущенных элементов; у записи элемента его нет. */
+function fillerStyleOf(entry) {
+    return entry.kind === 'filler' ? entry.style : undefined;
+}
+/**
+ * Список с выбором: корень — рамка (шапка, узел списка, подвал), а набор `aria` и
+ * атрибуты потребителя, кроме класса и стиля, — узлу списка. Элементы и распорки
+ * секции — одной петлёй: петли по блокам перемонтировали бы элемент при переходе.
+ */
+export function ListBox(props) {
+    const binding = setupListBox(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const aria = createPartProps(() => state.aria);
+    const control = createPartProps(() => toControlAttrs(binding.forwardProps()));
+    /** Элемент из данных — со слотами списка, проброшенными целиком. */
+    const drawItem = (item) => (<ListBoxItem ctrl={item} leading={renderSlot(props['item-leading'], { item })} trailing={renderSlot(props['item-trailing'], { item })} indicator-icon={relaySlot(props['item-indicator-icon'], { item })}>
+			{relaySlot(props.item, { item })}
+		</ListBoxItem>);
+    /** Запись `drawn`: элемент или распорка на месте пропущенных. */
+    const drawEntry = (entry) => (<Show when={itemOf(entry())} keyed fallback={<div class="so-list-box__filler" aria-hidden="true" style={fillerStyleOf(entry())}/>}>
+			{drawItem}
+		</Show>);
+    /** Записи секции по порядку — по ключу записи. */
+    const drawEntries = (section) => (<KeyedFor each={section().entries} by={(entry) => entry.key}>
+			{drawEntry}
+		</KeyedFor>);
+    /** Первая ли секция: перед ней разделителя нет. */
+    const isFirst = (section) => state.drawnSections?.[0]?.key === section().key;
+    /**
+     * Секция: разделитель перед ней, если она не первая и список их просит
+     * (`groupSeparators`), а дальше группа с подписью или записи без группы
+     * прямо в списке.
+     */
+    const drawSection = (section) => (<>
+			<Show when={state.groupSeparators && !isFirst(section)}>
+				<div class="so-list-box__separator" aria-hidden="true"/>
+			</Show>
+			<Show when={section().group} fallback={drawEntries(section)}>
+				{(group) => (<ListBoxGroup label={group().label}>{drawEntries(section)}</ListBoxGroup>)}
+			</Show>
+		</>);
+    return (<Show when={state.rendered}>
+			<div {...root()} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					{renderSlot(props.header)}
+					<div class="so-list-box__list" tabindex="0" {...aria()} {...control()}>
+						<ResolvedSlot content={props.children} fallback={<KeyedFor each={state.drawnSections} by={(section) => section.key}>
+									{drawSection}
+								</KeyedFor>}/>
+						<Show when={state.shown?.length === 0}>{renderSlot(props.empty)}</Show>
+					</div>
+					{renderSlot(props.footer)}
+				</Elevate>
+			</div>
+		</Show>);
+}

package/dist/source/components/list-box/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/list-box/group/Group.jsx

@@ -0,0 +1,24 @@
+import { Elevate, Root, createPartProps, createRootProps, renderSlot } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupListBoxGroup } from './setup.component';
+/** Элементы списка под общей подписью: ключ группы элементы читают из её слоя (`Elevate`). */
+export function ListBoxGroup(props) {
+    const binding = setupListBoxGroup(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const labelAria = createPartProps(() => state.labelAria);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Show when={state.label}>
+					<div class="so-list-box-group__label" {...labelAria()}>
+						{state.label}
+					</div>
+				</Show>
+				<Elevate layer={binding.layer}>{renderSlot(props.children)}</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/list-box/group/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/list-box/group/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupListBoxGroup } from './setup.component';
+export { ListBoxGroup } from './Group';

package/dist/source/components/list-box/group/setup.component.js

@@ -0,0 +1,11 @@
+import { ListBoxGroupDescriptor, TItemGroupExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../../adapter';
+/** В коллекцию группа не входит: `TItemGroupExtension` опускает элементам её ключ. */
+export function setupListBoxGroup(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(ListBoxGroupDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TItemGroupExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}

package/dist/source/components/list-box/index.js

@@ -0,0 +1,9 @@
+import { withParts } from '@soxa-ui/setup';
+import { ListBox as ListBoxComponent } from './ListBox';
+import { ListBoxItem } from './item';
+import { ListBoxGroup } from './group';
+export * from './base.component';
+export { setupListBox } from './setup.component';
+export * from './item';
+export * from './group';
+export const ListBox = withParts(ListBoxComponent, { Item: ListBoxItem, Group: ListBoxGroup });

package/dist/source/components/list-box/item/Item.jsx

@@ -0,0 +1,45 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { ItemRow } from '../../item-row';
+import { Icon } from '../../icon';
+import { setupListBoxItem } from './setup.component';
+/** Отметка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+const CHECK = roleIcon('check');
+/**
+ * Элемент списка: строка — `ItemRow` на `div` (под этот тег написан `TListBoxItem._ariaTag`),
+ * написанное на корне, кроме класса и стиля, получает она. Клик — `list.choose()`
+ * item-адаптера, а не `selection.toggle()`: выключенному откажет список, как клавиатуре.
+ */
+export function ListBoxItem(props) {
+    const binding = setupListBoxItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '', selected: state.selected ?? false }));
+    const indicatorIcon = resolveSlot(() => props['indicator-icon'], () => ({ selected: state.selected ?? false }));
+    /** The row's attributes: all of the consumer's but the class and the style. */
+    const row = () => toControlAttrs(binding.forwardProps());
+    const choose = clickAction(() => context?.adapters.list.choose());
+    /** Обёртка отметки — и у невыбранных: она резервирует место. */
+    const mark = () => (<span class="so-list-box-item__indicator" aria-hidden="true">
+			{indicatorIcon() ??
+            (state.selected ? (<Icon embedded="list-box.indicator" tag={CHECK} size={state.size}/>) : null)}
+		</span>);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="list-box.row" tag="div" view={state.view} disabled={state.disabled} size={state.size} variant={state.variant} {...state.aria} {...state.dataset} {...row()} ref={choose} leading={<>
+							{state.indicator === 'start' ? mark() : null}
+							{renderSlot(props.leading)}
+						</>} trailing={<>
+							{renderSlot(props.trailing)}
+							{state.indicator === 'end' ? mark() : null}
+						</>}>
+					{content() ?? state.text}
+				</ItemRow>
+			</Root>
+		</Show>);
+}

package/dist/source/components/list-box/item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/list-box/item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupListBoxItem } from './setup.component';
+export { ListBoxItem } from './Item';

package/dist/source/components/list-box/item/setup.component.js

@@ -0,0 +1,11 @@
+import { ListBoxCollectionItemDescriptor, ListBoxItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+/** `context` — разметке: выбор — метод item-адаптера. */
+export function setupListBoxItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(ListBoxItemDescriptor(), { ctrl: props.ctrl, props });
+    const item = createSolidAdapterContext(ListBoxCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

package/dist/source/components/list-box/setup.component.js

@@ -0,0 +1,16 @@
+import { ListBoxCollectionDescriptor, ListBoxDescriptor, TCollectionExtension, TDragAndDropCollectionExtension, TVirtualCollectionExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupListBox(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(ListBoxDescriptor(), { ctrl: props.ctrl, props });
+    const collectionAdapter = createSolidAdapterContext(ListBoxCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle })
+        .use(TCollectionExtension, { elevator })
+        .use(TDragAndDropCollectionExtension, { elevator })
+        .use(TVirtualCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, collectionBinding), layer };
+}

package/dist/source/components/menu/Menu.jsx

@@ -0,0 +1,38 @@
+import { Elevate, ResolvedSlot, Root, createRootProps, liveScope, renderSlot, toPartClass, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Frame } from '../frame';
+import { drawItems } from './submenu/Submenu';
+import { setupMenu } from './setup.component';
+/**
+ * Меню у кнопки или контекстное: корень — обёртка триггера и якорь панели. Роль
+ * `menu` — у панели, а не у списка `so-menu__list`: фокус без подсветки держит
+ * панель, и узел с ролью и фокусом должен быть один.
+ */
+export function Menu(props) {
+    const binding = setupMenu(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const trigger = liveScope(() => ({
+        triggerAria: state.triggerAria ?? {},
+        triggerDataset: state.triggerDataset ?? {},
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					{renderSlot(props.trigger, trigger)}
+					<Frame embedded="menu.frame" class={toPartClass(state.panelClasses)} tabindex="-1" visible={state.visible && state.open} strategy="fixed" anchor_anchor={binding.rootElement()} anchor_point={state.point} anchor_placement={state.placement} anchor_offset={4} {...state.aria} {...state.dismiss_ownerAttribute}>
+						{/* Items from the panel's first opening on (`contentRendered`) */}
+						<div class="so-menu__list">
+							<Show when={state.contentRendered}>
+								<ResolvedSlot content={props.children} fallback={drawItems(state, props)}/>
+							</Show>
+						</div>
+					</Frame>
+				</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/menu/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/menu/checkbox-item/CheckboxItem.jsx

@@ -0,0 +1,39 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { ItemRow } from '../../item-row';
+import { Icon } from '../../icon';
+import { setupMenuCheckboxItem } from './setup.component';
+/** Отметка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+const CHECK = roleIcon('check');
+/**
+ * Флажок меню: строка пункта с отметкой в начале. Обёртка отметки — и у
+ * неотмеченного: по ней тема видит у меню колонку отметок.
+ */
+export function MenuCheckboxItem(props) {
+    const binding = setupMenuCheckboxItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '', selected: state.selected ?? false }));
+    const indicatorIcon = resolveSlot(() => props['indicator-icon'], () => ({ selected: state.selected ?? false }));
+    /** The row's attributes: all of the consumer's but the class and the style. */
+    const row = () => toControlAttrs(binding.forwardProps());
+    const toggle = clickAction(() => context?.adapters.menu.toggle());
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="menu.row" tag="div" size={state.size} disabled={state.disabled} {...state.aria} {...row()} ref={toggle} leading={<>
+							<span class="so-menu-item__indicator" aria-hidden="true">
+								{indicatorIcon() ??
+                (state.selected ? (<Icon embedded="menu.indicator" tag={CHECK} size={state.size}/>) : null)}
+							</span>
+							<span class="so-menu-item__icon">{renderSlot(props.leading)}</span>
+						</>} trailing={<span class="so-menu-item__shortcut">{renderSlot(props.trailing)}</span>}>
+					{content() ?? state.text}
+				</ItemRow>
+			</Root>
+		</Show>);
+}

package/dist/source/components/menu/checkbox-item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/menu/checkbox-item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuCheckboxItem } from './setup.component';
+export { MenuCheckboxItem } from './CheckboxItem';

package/dist/source/components/menu/checkbox-item/setup.component.js

@@ -0,0 +1,13 @@
+import { MenuCheckboxItemDescriptor, MenuCollectionCheckboxItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupMenuCheckboxItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(MenuCheckboxItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(MenuCollectionCheckboxItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

package/dist/source/components/menu/group/Group.jsx

@@ -0,0 +1,24 @@
+import { Elevate, Root, createPartProps, createRootProps, renderSlot } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupMenuGroup } from './setup.component';
+/** Пункты меню под общей подписью `label`; без подписи нет и её узла. */
+export function MenuGroup(props) {
+    const binding = setupMenuGroup(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const labelAria = createPartProps(() => state.labelAria);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Show when={state.label}>
+					<div class="so-menu-group__label" {...labelAria()}>
+						{state.label}
+					</div>
+				</Show>
+				<Elevate layer={binding.layer}>{renderSlot(props.children)}</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/menu/group/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/menu/group/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuGroup } from './setup.component';
+export { MenuGroup } from './Group';

package/dist/source/components/menu/group/setup.component.js

@@ -0,0 +1,10 @@
+import { MenuGroupDescriptor, TItemGroupExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../../adapter';
+export function setupMenuGroup(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(MenuGroupDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TItemGroupExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}

package/dist/source/components/menu/index.js

@@ -0,0 +1,30 @@
+import { withParts } from '@soxa-ui/setup';
+import { Menu as MenuComponent } from './Menu';
+import { MenuItem } from './item';
+import { MenuCheckboxItem } from './checkbox-item';
+import { MenuRadioItem } from './radio-item';
+import { MenuSubmenu } from './submenu';
+import { MenuPopoverItem } from './popover-item';
+import { MenuGroup } from './group';
+import { MenuRadioGroup } from './radio-group';
+import { MenuSeparator } from './separator';
+export * from './base.component';
+export { setupMenu } from './setup.component';
+export * from './item';
+export * from './checkbox-item';
+export * from './radio-item';
+export * from './submenu';
+export * from './popover-item';
+export * from './group';
+export * from './radio-group';
+export * from './separator';
+export const Menu = withParts(MenuComponent, {
+    Item: MenuItem,
+    CheckboxItem: MenuCheckboxItem,
+    RadioItem: MenuRadioItem,
+    Submenu: MenuSubmenu,
+    PopoverItem: MenuPopoverItem,
+    Group: MenuGroup,
+    RadioGroup: MenuRadioGroup,
+    Separator: MenuSeparator,
+});

package/dist/source/components/menu/item/Item.jsx

@@ -0,0 +1,29 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { ItemRow } from '../../item-row';
+import { setupMenuItem } from './setup.component';
+/**
+ * Пункт-действие: строка — `ItemRow` на `div` с набором `aria`. Обёртки значка и
+ * сочетания — у каждого пункта и без пробелов: пустую тема прячет по `:empty`.
+ */
+export function MenuItem(props) {
+    const binding = setupMenuItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '' }));
+    /** The row's attributes: all of the consumer's but the class and the style. */
+    const row = () => toControlAttrs(binding.forwardProps());
+    const choose = clickAction(() => context?.adapters.menu.choose());
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="menu.row" tag="div" size={state.size} disabled={state.disabled} {...state.aria} {...row()} ref={choose} leading={<span class="so-menu-item__icon">{renderSlot(props.leading)}</span>} trailing={<span class="so-menu-item__shortcut">{renderSlot(props.trailing)}</span>}>
+					{content() ?? state.text}
+				</ItemRow>
+			</Root>
+		</Show>);
+}

package/dist/source/components/menu/item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/menu/item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuItem } from './setup.component';
+export { MenuItem } from './Item';

package/dist/source/components/menu/item/setup.component.js

@@ -0,0 +1,10 @@
+import { MenuCollectionItemDescriptor, MenuItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupMenuItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(MenuItemDescriptor(), { ctrl: props.ctrl, props });
+    const item = createSolidAdapterContext(MenuCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

package/dist/source/components/menu/popover-item/PopoverItem.jsx

@@ -0,0 +1,41 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { ItemRow } from '../../item-row';
+import { Frame } from '../../frame';
+import { Icon } from '../../icon';
+import { setupMenuPopoverItem } from './setup.component';
+/** Стрелка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+const ARROW = roleIcon('arrowRight');
+/**
+ * Пункт с панелью: строка пункта и своя панель сбоку с любым содержимым. Текст
+ * строки — слот `header`: `default` — содержимое панели.
+ */
+export function MenuPopoverItem(props) {
+    const binding = setupMenuPopoverItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const header = resolveSlot(() => props.header, () => ({ text: state.text ?? '', open: state.open ?? false }));
+    const arrowIcon = resolveSlot(() => props['arrow-icon'], () => ({}));
+    /** The row's attributes: all of the consumer's but the class and the style. */
+    const row = () => toControlAttrs(binding.forwardProps());
+    const expand = clickAction(() => context?.adapters.menu.open());
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="menu.row" tag="div" size={state.size} disabled={state.disabled} {...state.aria} {...row()} ref={expand} leading={<span class="so-menu-item__icon">{renderSlot(props.leading)}</span>} trailing={<span class="so-menu-item__arrow" aria-hidden="true">
+							{arrowIcon() ?? (<Icon embedded="menu.arrow" tag={ARROW} size={state.size}/>)}
+						</span>}>
+					{header() ?? state.text}
+				</ItemRow>
+				<Frame embedded="menu.popover-item-frame" class="so-menu-item__panel" tabindex="-1" visible={state.visible && state.open} strategy="fixed" anchor_anchor={binding.rootElement()} anchor_placement="end-start" {...state.panelAria} {...state.dismiss_ownerAttribute}>
+					<div class="so-menu-item__content">
+						<Show when={state.contentRendered}>{renderSlot(props.children)}</Show>
+					</div>
+				</Frame>
+			</Root>
+		</Show>);
+}

package/dist/source/components/menu/popover-item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/menu/popover-item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuPopoverItem } from './setup.component';
+export { MenuPopoverItem } from './PopoverItem';

package/dist/source/components/menu/popover-item/setup.component.js

@@ -0,0 +1,13 @@
+import { MenuCollectionItemDescriptor, MenuPopoverItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupMenuPopoverItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(MenuPopoverItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(MenuCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

package/dist/source/components/menu/radio-group/RadioGroup.jsx

@@ -0,0 +1,24 @@
+import { Elevate, Root, createPartProps, createRootProps, renderSlot } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupMenuRadioGroup } from './setup.component';
+/** Переключатели меню под общей подписью: роль `group`, а не `radiogroup` (APG). */
+export function MenuRadioGroup(props) {
+    const binding = setupMenuRadioGroup(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const labelAria = createPartProps(() => state.labelAria);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Show when={state.label}>
+					<div class="so-menu-group__label" {...labelAria()}>
+						{state.label}
+					</div>
+				</Show>
+				<Elevate layer={binding.layer}>{renderSlot(props.children)}</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/menu/radio-group/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/menu/radio-group/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuRadioGroup } from './setup.component';
+export { MenuRadioGroup } from './RadioGroup';

package/dist/source/components/menu/radio-group/setup.component.js

@@ -0,0 +1,12 @@
+import { MenuRadioGroupDescriptor, TItemGroupExtension, TMenuRadioGroupExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../../adapter';
+export function setupMenuRadioGroup(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(MenuRadioGroupDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    })
+        .use(TItemGroupExtension, { elevator })
+        .use(TMenuRadioGroupExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}