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

package/dist/components/menu/popover-item/PopoverItem.js

@@ -0,0 +1,72 @@
+"use client";
+import { toAriaProps } from "../../../adapter/common/aria.js";
+import { toControlAttrs, toRootForward, toRootProps } from "../../../adapter/common/root.js";
+import { renderSlot } from "../../../adapter/common/slots.js";
+import { roleIcon } from "../../../adapter/common/icon.js";
+import { useClickAction } from "../../../adapter/runtime/useClickAction.js";
+import { withRenderBoundary } from "../../../adapter/runtime/withRenderBoundary.js";
+import { Icon } from "../../icon/Icon.js";
+import { Frame } from "../../frame/Frame.js";
+import { ItemRow } from "../../item-row/ItemRow.js";
+import { useSetupMenuPopoverItem } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu/popover-item/PopoverItem.tsx
+/** Стрелка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+var ArrowIcon = roleIcon("arrowRight");
+/**
+* MenuPopoverItem — пункт со своей панелью сбоку с любым содержимым. Текст строки — слот
+* `header`: `default` — содержимое панели, как у `Accordion.Item` и `Popover`.
+*/
+var MenuPopoverItem = withRenderBoundary(function MenuPopoverItem(props) {
+	const { ref, forwardProps, state, context, rootElement } = useSetupMenuPopoverItem(props);
+	const expand = useClickAction(() => context?.adapters.menu.open());
+	const { rendered, tag, text, size, disabled, open, aria, dataset, attrs, panelAria, contentRendered, dismiss_ownerAttribute } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	const row = toControlAttrs(forwardProps);
+	return /* @__PURE__ */ jsxs(Tag, {
+		...toRootProps(ref, state, [dataset, attrs], toRootForward(forwardProps)),
+		children: [/* @__PURE__ */ jsx(ItemRow, {
+			embedded: "menu.row",
+			tag: "div",
+			size,
+			disabled,
+			...toAriaProps(aria),
+			...row,
+			ref: expand,
+			leading: /* @__PURE__ */ jsx("span", {
+				className: "so-menu-item__icon",
+				children: renderSlot(props.leading)
+			}),
+			trailing: /* @__PURE__ */ jsx("span", {
+				className: "so-menu-item__arrow",
+				"aria-hidden": "true",
+				children: renderSlot(props["arrow-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+					embedded: "menu.arrow",
+					tag: ArrowIcon,
+					size
+				})
+			}),
+			children: renderSlot(props.header, {
+				text: text ?? "",
+				open: open ?? false
+			}) ?? text
+		}), /* @__PURE__ */ jsx(Frame, {
+			embedded: "menu.popover-item-frame",
+			className: "so-menu-item__panel",
+			tabIndex: -1,
+			visible: state.visible && open,
+			strategy: "fixed",
+			anchor_anchor: rootElement,
+			anchor_placement: "end-start",
+			...toAriaProps(panelAria),
+			...toAriaProps(dismiss_ownerAttribute),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "so-menu-item__content",
+				children: contentRendered ? renderSlot(props.children) : null
+			})
+		})]
+	});
+});
+//#endregion
+export { MenuPopoverItem };

package/dist/components/menu/popover-item/base.component.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+import type { IMenuPopoverItem } from '@soxa-ui/core';
+import type { MenuCollectionItemDescriptor, MenuPopoverItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type MenuPopoverItemEventProps = EventProps<typeof MenuPopoverItemDescriptor> & EventProps<typeof MenuCollectionItemDescriptor>;
+/** Атрибуты пункта с панелью: класс и стиль — корню, остальное — строке с `role="menuitem"`. */
+export type MenuPopoverItemAttributes = TDomAttributes<typeof MenuPopoverItemDescriptor, HTMLAttributes<HTMLElement>, MenuPopoverItemEventProps>;
+export type MenuPopoverItemProps = UseDomProps<typeof MenuPopoverItemDescriptor, IMenuPopoverItem, MenuPopoverItemEventProps>;

package/dist/components/menu/popover-item/index.d.ts

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

package/dist/components/menu/popover-item/setup.component.d.ts

@@ -0,0 +1,24 @@
+import type { MenuPopoverItemProps } from './base.component';
+export declare function useSetupMenuPopoverItem(props: MenuPopoverItemProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, import("@soxa-ui/core").TMenuCollectionExtensions> | undefined;
+    rootElement: Element | null;
+    ref: (el: Element | null) => void;
+    plugins: import("@soxa-ui/plugins").IPluginBundle | null;
+    ctrl: object & import("@soxa-ui/core").IMenuPopoverItem;
+    root: import("../../../adapter").TRootSource;
+    forwardProps: Partial<MenuPopoverItemProps>;
+    bindRef: (el: Element | null) => void;
+    state: import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").IMenuPopoverItem> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {} & {} & {
+        id?: string | undefined;
+    }> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    } & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {}> & import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").TMenuItemCollectionFacade> & object;
+};

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

@@ -0,0 +1,26 @@
+"use client";
+import { useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useAdapterContext } from "../../../adapter/runtime/useAdapterContext.js";
+import { useRootElement } from "../../../adapter/runtime/useRootElement.js";
+import { MenuCollectionItemDescriptor, MenuPopoverItemDescriptor, TCollectionItemExtension } from "@soxa-ui/setup";
+//#region src/components/menu/popover-item/setup.component.ts
+function useSetupMenuPopoverItem(props) {
+	const { contexts: [adapter, item] } = useAdapterContext((create, elevator) => {
+		const adapter = create(MenuPopoverItemDescriptor(), {
+			ctrl: props.ctrl,
+			props
+		});
+		return [adapter, create(MenuCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+			adapter,
+			elevator
+		})];
+	});
+	const binding = useCollectionAdapter(useAdapter(adapter, props), item, props);
+	return {
+		...binding,
+		context: item.instance.context,
+		rootElement: useRootElement(binding.root)
+	};
+}
+//#endregion
+export { useSetupMenuPopoverItem };

package/dist/components/menu/radio-group/RadioGroup.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { MenuRadioGroupProps } from './base.component';
+/** MenuRadioGroup — переключатели меню под общей подписью: роль `group`, не `radiogroup` (APG). */
+export declare function MenuRadioGroup(props: MenuRadioGroupProps): ReactElement | null;

package/dist/components/menu/radio-group/RadioGroup.js

@@ -0,0 +1,31 @@
+"use client";
+import { toAriaProps } from "../../../adapter/common/aria.js";
+import { toRootProps } from "../../../adapter/common/root.js";
+import { renderSlot } from "../../../adapter/common/slots.js";
+import { Elevate } from "../../../adapter/elevator/Elevate.js";
+import { useSetupMenuRadioGroup } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu/radio-group/RadioGroup.tsx
+/** MenuRadioGroup — переключатели меню под общей подписью: роль `group`, не `radiogroup` (APG). */
+function MenuRadioGroup(props) {
+	const { ref, forwardProps, state, layer } = useSetupMenuRadioGroup(props);
+	const { rendered, tag, label, labelAria, attrs, aria, dataset } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsxs(tag, {
+		...toRootProps(ref, state, [
+			attrs,
+			aria,
+			dataset
+		], forwardProps),
+		children: [label ? /* @__PURE__ */ jsx("div", {
+			className: "so-menu-group__label",
+			...toAriaProps(labelAria),
+			children: label
+		}) : null, /* @__PURE__ */ jsx(Elevate, {
+			layer,
+			children: renderSlot(props.children)
+		})]
+	});
+}
+//#endregion
+export { MenuRadioGroup };

package/dist/components/menu/radio-group/base.component.d.ts

@@ -0,0 +1,5 @@
+import type { IMenuRadioGroup } from '@soxa-ui/core';
+import type { MenuRadioGroupDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+export type MenuRadioGroupEventProps = EventProps<typeof MenuRadioGroupDescriptor>;
+export type MenuRadioGroupProps = UseDomProps<typeof MenuRadioGroupDescriptor, IMenuRadioGroup, MenuRadioGroupEventProps>;

package/dist/components/menu/radio-group/index.d.ts

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

package/dist/components/menu/radio-group/setup.component.d.ts

@@ -0,0 +1,9 @@
+import type { MenuRadioGroupProps } from './base.component';
+export declare function useSetupMenuRadioGroup(props: MenuRadioGroupProps): import("../../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenuRadioGroup, {
+    props: object & {} & {} & {};
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {};
+}>, MenuRadioGroupProps>;

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

@@ -0,0 +1,12 @@
+"use client";
+import { useComponent } from "../../../adapter/runtime/useComponent.js";
+import { MenuRadioGroupDescriptor, TItemGroupExtension, TMenuRadioGroupExtension } from "@soxa-ui/setup";
+//#region src/components/menu/radio-group/setup.component.ts
+function useSetupMenuRadioGroup(props) {
+	return useComponent((create, elevator) => create(MenuRadioGroupDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TItemGroupExtension, { elevator }).use(TMenuRadioGroupExtension, { elevator }), props);
+}
+//#endregion
+export { useSetupMenuRadioGroup };

package/dist/components/menu/radio-item/RadioItem.d.ts

@@ -0,0 +1,3 @@
+import type { MenuRadioItemProps } from './base.component';
+/** MenuRadioItem — переключатель меню: строка пункта с точкой-отметкой в начале, как у флажка. */
+export declare const MenuRadioItem: import("react").NamedExoticComponent<MenuRadioItemProps>;

package/dist/components/menu/radio-item/RadioItem.js

@@ -0,0 +1,50 @@
+"use client";
+import { toAriaProps } from "../../../adapter/common/aria.js";
+import { toControlAttrs, toRootForward, toRootProps } from "../../../adapter/common/root.js";
+import { renderSlot } from "../../../adapter/common/slots.js";
+import { useClickAction } from "../../../adapter/runtime/useClickAction.js";
+import { withRenderBoundary } from "../../../adapter/runtime/withRenderBoundary.js";
+import { ItemRow } from "../../item-row/ItemRow.js";
+import { useSetupMenuRadioItem } from "./setup.component.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu/radio-item/RadioItem.tsx
+/** MenuRadioItem — переключатель меню: строка пункта с точкой-отметкой в начале, как у флажка. */
+var MenuRadioItem = withRenderBoundary(function MenuRadioItem(props) {
+	const { ref, forwardProps, state, context } = useSetupMenuRadioItem(props);
+	const check = useClickAction(() => context?.adapters.menu.check());
+	const { rendered, tag, text, size, disabled, selected, aria, dataset, attrs } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	const checked = selected ?? false;
+	const row = toControlAttrs(forwardProps);
+	return /* @__PURE__ */ jsx(Tag, {
+		...toRootProps(ref, state, [dataset, attrs], toRootForward(forwardProps)),
+		children: /* @__PURE__ */ jsx(ItemRow, {
+			embedded: "menu.row",
+			tag: "div",
+			size,
+			disabled,
+			...toAriaProps(aria),
+			...row,
+			ref: check,
+			leading: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "so-menu-item__indicator",
+				"aria-hidden": "true",
+				children: renderSlot(props["indicator-icon"], { selected: checked }) ?? (checked ? /* @__PURE__ */ jsx("span", { className: "so-menu-item__dot" }) : null)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "so-menu-item__icon",
+				children: renderSlot(props.leading)
+			})] }),
+			trailing: /* @__PURE__ */ jsx("span", {
+				className: "so-menu-item__shortcut",
+				children: renderSlot(props.trailing)
+			}),
+			children: renderSlot(props.children, {
+				text: text ?? "",
+				selected: checked
+			}) ?? text
+		})
+	});
+});
+//#endregion
+export { MenuRadioItem };

package/dist/components/menu/radio-item/base.component.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+import type { IMenuRadioItem } from '@soxa-ui/core';
+import type { MenuCollectionRadioItemDescriptor, MenuRadioItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type MenuRadioItemEventProps = EventProps<typeof MenuRadioItemDescriptor> & EventProps<typeof MenuCollectionRadioItemDescriptor>;
+/** Атрибуты переключателя: класс и стиль — корню, остальное — строке с `role="menuitemradio"`. */
+export type MenuRadioItemAttributes = TDomAttributes<typeof MenuRadioItemDescriptor, HTMLAttributes<HTMLElement>, MenuRadioItemEventProps>;
+/** Пропсы переключателя; группу пишет проводка — ближайшая `Menu.RadioGroup` над пунктом. */
+export type MenuRadioItemProps = UseDomProps<typeof MenuRadioItemDescriptor, IMenuRadioItem, MenuRadioItemEventProps>;

package/dist/components/menu/radio-item/index.d.ts

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { MenuRadioItem } from './RadioItem';

package/dist/components/menu/radio-item/setup.component.d.ts

@@ -0,0 +1,17 @@
+import type { MenuRadioItemProps } from './base.component';
+export declare function useSetupMenuRadioItem(props: MenuRadioItemProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, import("@soxa-ui/core").TMenuCollectionExtensions> | undefined;
+    ref: (el: Element | null) => void;
+    plugins: import("@soxa-ui/plugins").IPluginBundle | null;
+    ctrl: object & import("@soxa-ui/core").IMenuRadioItem;
+    root: import("../../../adapter").TRootSource;
+    forwardProps: Partial<MenuRadioItemProps>;
+    bindRef: (el: Element | null) => void;
+    state: import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").IMenuRadioItem> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {}> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    }> & import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").TMenuItemCollectionFacade> & object;
+};

package/dist/components/menu/radio-item/setup.component.js

@@ -0,0 +1,23 @@
+"use client";
+import { useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useAdapterContext } from "../../../adapter/runtime/useAdapterContext.js";
+import { MenuCollectionRadioItemDescriptor, MenuRadioItemDescriptor, TCollectionItemExtension, TMenuRadioItemExtension } from "@soxa-ui/setup";
+//#region src/components/menu/radio-item/setup.component.ts
+function useSetupMenuRadioItem(props) {
+	const { contexts: [adapter, item] } = useAdapterContext((create, elevator) => {
+		const adapter = create(MenuRadioItemDescriptor(), {
+			ctrl: props.ctrl,
+			props
+		}).use(TMenuRadioItemExtension, { elevator });
+		return [adapter, create(MenuCollectionRadioItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+			adapter,
+			elevator
+		})];
+	});
+	return {
+		...useCollectionAdapter(useAdapter(adapter, props), item, props),
+		context: item.instance.context
+	};
+}
+//#endregion
+export { useSetupMenuRadioItem };

package/dist/components/menu/separator/Separator.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { MenuSeparatorProps } from './base.component';
+/** MenuSeparator — линия между группами пунктов, `role="separator"` от ядра. */
+export declare function MenuSeparator(props: MenuSeparatorProps): ReactElement | null;

package/dist/components/menu/separator/Separator.js

@@ -0,0 +1,18 @@
+"use client";
+import { toRootProps } from "../../../adapter/common/root.js";
+import { useSetupMenuSeparator } from "./setup.component.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/menu/separator/Separator.tsx
+/** MenuSeparator — линия между группами пунктов, `role="separator"` от ядра. */
+function MenuSeparator(props) {
+	const { ref, forwardProps, state } = useSetupMenuSeparator(props);
+	const { rendered, tag, attrs, aria, dataset } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx(tag, { ...toRootProps(ref, state, [
+		attrs,
+		aria,
+		dataset
+	], forwardProps) });
+}
+//#endregion
+export { MenuSeparator };

package/dist/components/menu/separator/base.component.d.ts

@@ -0,0 +1,5 @@
+import type { TMenuSeparator } from '@soxa-ui/core';
+import type { MenuSeparatorDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+export type MenuSeparatorEventProps = EventProps<typeof MenuSeparatorDescriptor>;
+export type MenuSeparatorProps = UseDomProps<typeof MenuSeparatorDescriptor, TMenuSeparator, MenuSeparatorEventProps>;

package/dist/components/menu/separator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { MenuSeparator } from './Separator';

package/dist/components/menu/separator/setup.component.d.ts

@@ -0,0 +1,9 @@
+import type { MenuSeparatorProps } from './base.component';
+export declare function useSetupMenuSeparator(props: MenuSeparatorProps): import("../../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TMenuSeparator, {
+    props: object & {} & {};
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {};
+    outputs: object & {} & {};
+}>, MenuSeparatorProps>;

package/dist/components/menu/separator/setup.component.js

@@ -0,0 +1,12 @@
+"use client";
+import { useComponent } from "../../../adapter/runtime/useComponent.js";
+import { MenuSeparatorDescriptor } from "@soxa-ui/setup";
+//#region src/components/menu/separator/setup.component.ts
+function useSetupMenuSeparator(props) {
+	return useComponent((create) => create(MenuSeparatorDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}), props);
+}
+//#endregion
+export { useSetupMenuSeparator };

package/dist/components/menu/setup.component.d.ts

@@ -0,0 +1,16 @@
+import type { MenuProps } from './base.component';
+export declare function useSetupMenu(props: MenuProps): {
+    rootElement: Element | null;
+    layer: import("../../adapter").TElevatorLayer;
+    ref: (el: Element | null) => void;
+    plugins: import("@soxa-ui/plugins").IPluginBundle | null;
+    ctrl: object & import("@soxa-ui/core").IMenu;
+    root: import("../../adapter").TRootSource;
+    forwardProps: Partial<MenuProps>;
+    bindRef: (el: Element | null) => void;
+    state: import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").IMenu> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {} & {} & {} & {} & {}> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {} & {}> & import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").TMenuCollectionFacade> & object;
+};

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

@@ -0,0 +1,29 @@
+"use client";
+import { useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useAdapterContext } from "../../adapter/runtime/useAdapterContext.js";
+import { useRootElement } from "../../adapter/runtime/useRootElement.js";
+import { MenuCollectionDescriptor, MenuDescriptor, TCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/menu/setup.component.ts
+function useSetupMenu(props) {
+	const { contexts: [adapter, collectionAdapter], layer } = useAdapterContext((create, elevator) => {
+		const adapter = create(MenuDescriptor(), {
+			ctrl: props.ctrl,
+			props
+		});
+		return [adapter, create(MenuCollectionDescriptor(), {
+			props,
+			options: {
+				owner: adapter.instance,
+				engine: props.engine
+			}
+		}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator })];
+	});
+	const binding = useCollectionAdapter(useAdapter(adapter, props), collectionAdapter, props);
+	return {
+		...binding,
+		rootElement: useRootElement(binding.root),
+		layer
+	};
+}
+//#endregion
+export { useSetupMenu };

package/dist/components/menu/submenu/Submenu.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react';
+import type { IMenuItem, TGroupSection, TMenuSubmenuEntries } from '@soxa-ui/core';
+import type { MenuSubmenuProps } from './base.component';
+/** Что пунктам из данных нужно от состояния владельца — меню или подменю. */
+type TItemsState = {
+    /** Секции показанных пунктов: группа с подписью или пункты без группы. */
+    readonly sections?: ReadonlyArray<TGroupSection<IMenuItem>>;
+    /** Подменю из данных по пункту — пункт и движок его пунктов. */
+    readonly submenus?: TMenuSubmenuEntries;
+    /** Рисовать ли разделитель между соседними секциями. */
+    readonly groupSeparators?: boolean;
+};
+/** Слоты пунктов из данных — одни у меню и подменю, и на все уровни. */
+type TItemSlots = Pick<MenuSubmenuProps, 'item' | 'item-leading' | 'item-trailing' | 'item-header' | 'item-arrow-icon' | 'item-content'>;
+/** Пункты из данных по секциям — одна разметка на меню и подменю всех уровней. */
+export declare function drawItems(state: TItemsState, slots: TItemSlots): ReactElement[];
+/**
+ * MenuSubmenu — пункт с подменю: строка в меню над ним и своя панель с пунктами; панель —
+ * в слое лифта подменю, и её пункты входят в его коллекцию, а не в коллекцию меню.
+ */
+export declare const MenuSubmenu: import("react").NamedExoticComponent<MenuSubmenuProps>;
+export {};

package/dist/components/menu/submenu/Submenu.js

@@ -0,0 +1,117 @@
+"use client";
+import { toAriaProps } from "../../../adapter/common/aria.js";
+import { toControlAttrs, toPartClass, toRootForward, toRootProps } from "../../../adapter/common/root.js";
+import { hasSlot, relaySlot, renderSlot } from "../../../adapter/common/slots.js";
+import { roleIcon } from "../../../adapter/common/icon.js";
+import { useClickAction } from "../../../adapter/runtime/useClickAction.js";
+import { withRenderBoundary } from "../../../adapter/runtime/withRenderBoundary.js";
+import { Elevate } from "../../../adapter/elevator/Elevate.js";
+import { Icon } from "../../icon/Icon.js";
+import { Frame } from "../../frame/Frame.js";
+import { ItemRow } from "../../item-row/ItemRow.js";
+import { MenuGroup } from "../group/Group.js";
+import { MenuItem } from "../item/Item.js";
+import { MenuSeparator } from "../separator/Separator.js";
+import { useSetupMenuSubmenu } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu/submenu/Submenu.tsx
+/** Стрелка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+var ArrowIcon = roleIcon("arrowRight");
+/** Пункт из данных: подменю, если коллекция завела ему движок (`submenus`), иначе действие. */
+function drawItem(state, slots, item) {
+	const entry = state.submenus?.get(item);
+	if (!entry) return /* @__PURE__ */ jsx(MenuItem, {
+		ctrl: item,
+		leading: renderSlot(slots["item-leading"], { item }),
+		trailing: renderSlot(slots["item-trailing"], { item }),
+		children: relaySlot(slots.item, { item })
+	}, item.uid);
+	return /* @__PURE__ */ jsx(MenuSubmenu, {
+		ctrl: entry.ctrl,
+		engine: entry.engine,
+		leading: renderSlot(slots["item-leading"], { item }),
+		header: relaySlot(slots["item-header"], { item }),
+		"arrow-icon": renderSlot(slots["item-arrow-icon"], { item }),
+		item: slots.item,
+		"item-leading": slots["item-leading"],
+		"item-trailing": slots["item-trailing"],
+		"item-header": slots["item-header"],
+		"item-arrow-icon": slots["item-arrow-icon"],
+		"item-content": slots["item-content"],
+		children: renderSlot(slots["item-content"], { item })
+	}, item.uid);
+}
+/** Ключи пункта (`uid`), группы и разделителя секции не пересекаются. */
+function drawSection(state, slots, section, separated) {
+	const items = section.items.map((item) => drawItem(state, slots, item));
+	const separator = separated ? [/* @__PURE__ */ jsx(MenuSeparator, {}, `separator:${section.key}`)] : [];
+	if (!section.group) return [...separator, ...items];
+	return [...separator, /* @__PURE__ */ jsx(MenuGroup, {
+		label: section.group.label,
+		children: items
+	}, section.key)];
+}
+/** Пункты из данных по секциям — одна разметка на меню и подменю всех уровней. */
+function drawItems(state, slots) {
+	return (state.sections ?? []).flatMap((section, index) => drawSection(state, slots, section, state.groupSeparators === true && index > 0));
+}
+/**
+* MenuSubmenu — пункт с подменю: строка в меню над ним и своя панель с пунктами; панель —
+* в слое лифта подменю, и её пункты входят в его коллекцию, а не в коллекцию меню.
+*/
+var MenuSubmenu = withRenderBoundary(function MenuSubmenu(props) {
+	const { ref, forwardProps, state, context, rootElement, layer } = useSetupMenuSubmenu(props);
+	const expand = useClickAction(() => context?.adapters.menu.open());
+	const { rendered, tag, text, size, disabled, open, aria, dataset, attrs, panelAria, panelClasses, contentRendered, dismiss_ownerAttribute } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	const row = toControlAttrs(forwardProps);
+	return /* @__PURE__ */ jsxs(Tag, {
+		...toRootProps(ref, state, [dataset, attrs], toRootForward(forwardProps)),
+		children: [/* @__PURE__ */ jsx(ItemRow, {
+			embedded: "menu.row",
+			tag: "div",
+			size,
+			disabled,
+			...toAriaProps(aria),
+			...row,
+			ref: expand,
+			leading: /* @__PURE__ */ jsx("span", {
+				className: "so-menu-item__icon",
+				children: renderSlot(props.leading)
+			}),
+			trailing: /* @__PURE__ */ jsx("span", {
+				className: "so-menu-item__arrow",
+				"aria-hidden": "true",
+				children: renderSlot(props["arrow-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+					embedded: "menu.arrow",
+					tag: ArrowIcon,
+					size
+				})
+			}),
+			children: renderSlot(props.header, {
+				text: text ?? "",
+				open: open ?? false
+			}) ?? text
+		}), /* @__PURE__ */ jsx(Elevate, {
+			layer,
+			children: /* @__PURE__ */ jsx(Frame, {
+				embedded: "menu.submenu-frame",
+				className: toPartClass(panelClasses),
+				tabIndex: -1,
+				visible: state.visible && open,
+				strategy: "fixed",
+				anchor_anchor: rootElement,
+				anchor_placement: "end-start",
+				...toAriaProps(panelAria),
+				...toAriaProps(dismiss_ownerAttribute),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "so-menu__list",
+					children: !contentRendered ? null : hasSlot(props.children) ? renderSlot(props.children) : drawItems(state, props)
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { MenuSubmenu, drawItems };

package/dist/components/menu/submenu/base.component.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+import type { IMenuSubmenu } from '@soxa-ui/core';
+import type { MenuCollectionItemDescriptor, MenuSubmenuCollectionDescriptor, MenuSubmenuDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+/** Колбэки трёх контекстов подменю — свой, фасад пункта и фасад меню — пропсы одного компонента. */
+export type MenuSubmenuEventProps = EventProps<typeof MenuSubmenuDescriptor> & EventProps<typeof MenuCollectionItemDescriptor> & EventProps<typeof MenuSubmenuCollectionDescriptor>;
+/** Атрибуты пункта с подменю: класс и стиль — корню, остальное — строке с `role="menuitem"`. */
+export type MenuSubmenuAttributes = TDomAttributes<typeof MenuSubmenuDescriptor, HTMLAttributes<HTMLElement>, MenuSubmenuEventProps>;
+export type MenuSubmenuProps = UseDomProps<typeof MenuSubmenuDescriptor, IMenuSubmenu, MenuSubmenuEventProps>;

package/dist/components/menu/submenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { MenuSubmenu } from './Submenu';

package/dist/components/menu/submenu/setup.component.d.ts

@@ -0,0 +1,25 @@
+import type { MenuSubmenuProps } from './base.component';
+export declare function useSetupMenuSubmenu(props: MenuSubmenuProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, import("@soxa-ui/core").TMenuCollectionExtensions> | undefined;
+    rootElement: Element | null;
+    layer: import("../../../adapter").TElevatorLayer;
+    ref: (el: Element | null) => void;
+    plugins: import("@soxa-ui/plugins").IPluginBundle | null;
+    ctrl: object & import("@soxa-ui/core").IMenuSubmenu;
+    root: import("../../../adapter").TRootSource;
+    forwardProps: Partial<MenuSubmenuProps>;
+    bindRef: (el: Element | null) => void;
+    state: import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").IMenuSubmenu> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {} & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {} & {} & {
+        id?: string | undefined;
+    } & {}> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    } & {} & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {}> & import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").TMenuItemCollectionFacade> & object & import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").TMenuCollectionFacade>;
+};