@rockshin/tao-ui 0.0.1 → 0.0.2

package/dist/components/menu/menu-render.d.ts

@@ -0,0 +1,89 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './menu.css';
+export type MenuSemanticPart = 'root' | 'content' | 'item' | 'itemIcon' | 'itemLabel' | 'itemExtra' | 'divider' | 'groupLabel' | 'subTrigger' | 'subContent';
+export interface MenuItemType {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    /** Right-aligned extra content, e.g. a keyboard shortcut. */
+    extra?: ReactNode;
+    onClick?: (info: {
+        key: string;
+    }) => void;
+    /** Nested submenu. */
+    children?: MenuItemType[];
+}
+export interface MenuDividerType {
+    type: 'divider';
+}
+export interface MenuGroupType {
+    type: 'group';
+    key?: string;
+    label?: ReactNode;
+    children: MenuItemType[];
+}
+export type MenuItem = MenuItemType | MenuDividerType | MenuGroupType;
+export interface MenuProps {
+    items: MenuItem[];
+    onClick?: (info: {
+        key: string;
+    }) => void;
+    /** Render items as checkbox/radio entries. */
+    selectable?: boolean;
+    /** Multi-select (checkbox) when selectable. Otherwise single (radio). */
+    multiple?: boolean;
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    onSelect?: (info: {
+        key: string;
+        selectedKeys: string[];
+    }) => void;
+}
+/**
+ * Radix `react-dropdown-menu` and `react-context-menu` expose parallel
+ * sub-components with identical names. We render an antd-style `items` array
+ * against whichever set is passed in, so Dropdown and ContextMenu share one
+ * renderer.
+ */
+type AnyComp = ComponentType<any>;
+export interface MenuPrimitives {
+    Item: AnyComp;
+    CheckboxItem: AnyComp;
+    RadioGroup: AnyComp;
+    RadioItem: AnyComp;
+    Label: AnyComp;
+    Separator: AnyComp;
+    Group: AnyComp;
+    Sub: AnyComp;
+    SubTrigger: AnyComp;
+    SubContent: AnyComp;
+    Portal: AnyComp;
+    ItemIndicator: AnyComp;
+}
+export interface RenderCtx {
+    P: MenuPrimitives;
+    classNames?: SemanticClassNames<MenuSemanticPart>;
+    styles?: SemanticStyles<MenuSemanticPart>;
+    /** Fire item.onClick + menu.onClick for a plain action item. */
+    onAction: (item: MenuItemType) => void;
+    /** Multi-select: current keys + toggler. */
+    selectedKeys: string[];
+    multiple: boolean;
+    selectable: boolean;
+    onToggle: (key: string) => void;
+}
+export declare function renderMenuItems(items: MenuItem[], ctx: RenderCtx): ReactNode;
+/**
+ * Encapsulates a menu's selection state (controlled / uncontrolled), the
+ * item-click dispatch (`item.onClick` → `menu.onClick`), and rendering of the
+ * item tree (wrapping in a RadioGroup for single-select). Returns the ready
+ * content node. Shared by Dropdown and ContextMenu.
+ */
+export declare function useMenuController(menu: MenuProps, P: MenuPrimitives, semantic: {
+    classNames?: SemanticClassNames<MenuSemanticPart>;
+    styles?: SemanticStyles<MenuSemanticPart>;
+}): ReactNode;
+export {};

package/dist/components/menu/menu-render.js

@@ -0,0 +1,376 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { cx } from "../../utils/semantic.js";
+import "./menu.css";
+function ChevronRightIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-menu-sub-icon": "",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("path", {
+                d: "m9 18 6-6-6-6"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function CheckIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("polyline", {
+                points: "20 6 9 17 4 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function DotIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("circle", {
+                cx: "12",
+                cy: "12",
+                r: "4"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function ItemBody(t0) {
+    const $ = c(18);
+    const { icon, label, extra, ctx } = t0;
+    let t1;
+    if ($[0] !== ctx.classNames?.itemIcon || $[1] !== ctx.styles?.itemIcon || $[2] !== icon) {
+        t1 = null != icon && /*#__PURE__*/ jsx("span", {
+            "data-tao-menu-item-icon": "",
+            className: cx(ctx.classNames?.itemIcon),
+            style: ctx.styles?.itemIcon,
+            children: icon
+        });
+        $[0] = ctx.classNames?.itemIcon;
+        $[1] = ctx.styles?.itemIcon;
+        $[2] = icon;
+        $[3] = t1;
+    } else t1 = $[3];
+    const t2 = ctx.classNames?.itemLabel;
+    let t3;
+    if ($[4] !== t2) {
+        t3 = cx(t2);
+        $[4] = t2;
+        $[5] = t3;
+    } else t3 = $[5];
+    const t4 = ctx.styles?.itemLabel;
+    let t5;
+    if ($[6] !== label || $[7] !== t3 || $[8] !== t4) {
+        t5 = /*#__PURE__*/ jsx("span", {
+            "data-tao-menu-item-label": "",
+            className: t3,
+            style: t4,
+            children: label
+        });
+        $[6] = label;
+        $[7] = t3;
+        $[8] = t4;
+        $[9] = t5;
+    } else t5 = $[9];
+    let t6;
+    if ($[10] !== ctx.classNames?.itemExtra || $[11] !== ctx.styles?.itemExtra || $[12] !== extra) {
+        t6 = null != extra && /*#__PURE__*/ jsx("span", {
+            "data-tao-menu-item-extra": "",
+            className: cx(ctx.classNames?.itemExtra),
+            style: ctx.styles?.itemExtra,
+            children: extra
+        });
+        $[10] = ctx.classNames?.itemExtra;
+        $[11] = ctx.styles?.itemExtra;
+        $[12] = extra;
+        $[13] = t6;
+    } else t6 = $[13];
+    let t7;
+    if ($[14] !== t1 || $[15] !== t5 || $[16] !== t6) {
+        t7 = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                t1,
+                t5,
+                t6
+            ]
+        });
+        $[14] = t1;
+        $[15] = t5;
+        $[16] = t6;
+        $[17] = t7;
+    } else t7 = $[17];
+    return t7;
+}
+function renderMenuItems(items, ctx) {
+    const { P } = ctx;
+    return items.map((item, index)=>{
+        if ('type' in item && 'divider' === item.type) return /*#__PURE__*/ jsx(P.Separator, {
+            "data-tao-menu-divider": "",
+            className: cx(ctx.classNames?.divider),
+            style: ctx.styles?.divider
+        }, `divider-${index}`);
+        if ('type' in item && 'group' === item.type) return /*#__PURE__*/ jsxs(P.Group, {
+            "data-tao-menu-group": "",
+            children: [
+                null != item.label && /*#__PURE__*/ jsx(P.Label, {
+                    "data-tao-menu-group-label": "",
+                    className: cx(ctx.classNames?.groupLabel),
+                    style: ctx.styles?.groupLabel,
+                    children: item.label
+                }),
+                renderMenuItems(item.children, ctx)
+            ]
+        }, item.key ?? `group-${index}`);
+        if (item.children && item.children.length > 0) return /*#__PURE__*/ jsxs(P.Sub, {
+            children: [
+                /*#__PURE__*/ jsxs(P.SubTrigger, {
+                    disabled: item.disabled,
+                    "data-tao-menu-item": "",
+                    "data-tao-menu-sub-trigger": "",
+                    "data-tao-danger": item.danger || void 0,
+                    className: cx(ctx.classNames?.item, ctx.classNames?.subTrigger),
+                    style: {
+                        ...ctx.styles?.item,
+                        ...ctx.styles?.subTrigger
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(ItemBody, {
+                            icon: item.icon,
+                            label: item.label,
+                            extra: item.extra,
+                            ctx: ctx
+                        }),
+                        /*#__PURE__*/ jsx(ChevronRightIcon, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsx(P.Portal, {
+                    children: /*#__PURE__*/ jsx(P.SubContent, {
+                        "data-tao-menu-content": "",
+                        "data-tao-menu-sub-content": "",
+                        className: cx(ctx.classNames?.subContent),
+                        style: ctx.styles?.subContent,
+                        sideOffset: 2,
+                        alignOffset: -4,
+                        children: renderMenuItems(item.children, ctx)
+                    })
+                })
+            ]
+        }, item.key);
+        if (ctx.selectable) {
+            if (ctx.multiple) return /*#__PURE__*/ jsxs(P.CheckboxItem, {
+                disabled: item.disabled,
+                checked: ctx.selectedKeys.includes(item.key),
+                onCheckedChange: ()=>{
+                    ctx.onToggle(item.key);
+                    ctx.onAction(item);
+                },
+                "data-tao-menu-item": "",
+                "data-tao-menu-selectable": "",
+                "data-tao-danger": item.danger || void 0,
+                className: cx(ctx.classNames?.item),
+                style: ctx.styles?.item,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "data-tao-menu-item-indicator": "",
+                        children: /*#__PURE__*/ jsx(P.ItemIndicator, {
+                            children: /*#__PURE__*/ jsx(CheckIcon, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(ItemBody, {
+                        icon: item.icon,
+                        label: item.label,
+                        extra: item.extra,
+                        ctx: ctx
+                    })
+                ]
+            }, item.key);
+            return /*#__PURE__*/ jsxs(P.RadioItem, {
+                value: item.key,
+                disabled: item.disabled,
+                onSelect: ()=>ctx.onAction(item),
+                "data-tao-menu-item": "",
+                "data-tao-menu-selectable": "",
+                "data-tao-danger": item.danger || void 0,
+                className: cx(ctx.classNames?.item),
+                style: ctx.styles?.item,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "data-tao-menu-item-indicator": "",
+                        children: /*#__PURE__*/ jsx(P.ItemIndicator, {
+                            children: /*#__PURE__*/ jsx(DotIcon, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(ItemBody, {
+                        icon: item.icon,
+                        label: item.label,
+                        extra: item.extra,
+                        ctx: ctx
+                    })
+                ]
+            }, item.key);
+        }
+        return /*#__PURE__*/ jsx(P.Item, {
+            disabled: item.disabled,
+            onSelect: ()=>ctx.onAction(item),
+            "data-tao-menu-item": "",
+            "data-tao-danger": item.danger || void 0,
+            className: cx(ctx.classNames?.item),
+            style: ctx.styles?.item,
+            children: /*#__PURE__*/ jsx(ItemBody, {
+                icon: item.icon,
+                label: item.label,
+                extra: item.extra,
+                ctx: ctx
+            })
+        }, item.key);
+    });
+}
+function useMenuController(menu, P, semantic) {
+    const $ = c(31);
+    const selectable = !!menu.selectable;
+    const multiple = !!menu.multiple;
+    const isSelControlled = null != menu.selectedKeys;
+    let t0;
+    if ($[0] !== menu.defaultSelectedKeys) {
+        t0 = menu.defaultSelectedKeys ?? [];
+        $[0] = menu.defaultSelectedKeys;
+        $[1] = t0;
+    } else t0 = $[1];
+    const [selInternal, setSelInternal] = useState(t0);
+    let t1;
+    if ($[2] !== isSelControlled || $[3] !== menu.selectedKeys || $[4] !== selInternal) {
+        t1 = isSelControlled ? menu.selectedKeys ?? [] : selInternal;
+        $[2] = isSelControlled;
+        $[3] = menu.selectedKeys;
+        $[4] = selInternal;
+        $[5] = t1;
+    } else t1 = $[5];
+    const selectedKeys = t1;
+    let t2;
+    if ($[6] !== isSelControlled || $[7] !== menu) {
+        t2 = (next, changedKey)=>{
+            if (!isSelControlled) setSelInternal(next);
+            menu.onSelect?.({
+                key: changedKey,
+                selectedKeys: next
+            });
+        };
+        $[6] = isSelControlled;
+        $[7] = menu;
+        $[8] = t2;
+    } else t2 = $[8];
+    const commitSel = t2;
+    let t3;
+    if ($[9] !== commitSel || $[10] !== selectedKeys) {
+        t3 = (key)=>{
+            const next_0 = selectedKeys.includes(key) ? selectedKeys.filter((k)=>k !== key) : [
+                ...selectedKeys,
+                key
+            ];
+            commitSel(next_0, key);
+        };
+        $[9] = commitSel;
+        $[10] = selectedKeys;
+        $[11] = t3;
+    } else t3 = $[11];
+    const toggleKey = t3;
+    let t4;
+    if ($[12] !== commitSel) {
+        t4 = (key_0)=>commitSel([
+                key_0
+            ], key_0);
+        $[12] = commitSel;
+        $[13] = t4;
+    } else t4 = $[13];
+    const radioChange = t4;
+    let t5;
+    if ($[14] !== menu) {
+        t5 = (item)=>{
+            item.onClick?.({
+                key: item.key
+            });
+            menu.onClick?.({
+                key: item.key
+            });
+        };
+        $[14] = menu;
+        $[15] = t5;
+    } else t5 = $[15];
+    const onAction = t5;
+    let t6;
+    if ($[16] !== P || $[17] !== menu.items || $[18] !== multiple || $[19] !== onAction || $[20] !== selectable || $[21] !== selectedKeys || $[22] !== semantic.classNames || $[23] !== semantic.styles || $[24] !== toggleKey) {
+        const ctx = {
+            P,
+            classNames: semantic.classNames,
+            styles: semantic.styles,
+            onAction,
+            selectedKeys,
+            multiple,
+            selectable,
+            onToggle: toggleKey
+        };
+        t6 = renderMenuItems(menu.items, ctx);
+        $[16] = P;
+        $[17] = menu.items;
+        $[18] = multiple;
+        $[19] = onAction;
+        $[20] = selectable;
+        $[21] = selectedKeys;
+        $[22] = semantic.classNames;
+        $[23] = semantic.styles;
+        $[24] = toggleKey;
+        $[25] = t6;
+    } else t6 = $[25];
+    const body = t6;
+    if (selectable && !multiple) {
+        let t7;
+        if ($[26] !== P.RadioGroup || $[27] !== body || $[28] !== radioChange || $[29] !== selectedKeys[0]) {
+            t7 = /*#__PURE__*/ jsx(P.RadioGroup, {
+                value: selectedKeys[0],
+                onValueChange: radioChange,
+                children: body
+            });
+            $[26] = P.RadioGroup;
+            $[27] = body;
+            $[28] = radioChange;
+            $[29] = selectedKeys[0];
+            $[30] = t7;
+        } else t7 = $[30];
+        return t7;
+    }
+    return body;
+}
+export { renderMenuItems, useMenuController };