@neut/ui 0.0.15 → 0.0.16

package/dist/components/context-menu/ContextMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { ContextMenu } from './ContextMenu';
+export { ContextMenuContext, useContextMenuContext, } from './ContextMenu.context';
+export type { ContextMenuProps } from './ContextMenu.types';

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.d.ts

@@ -0,0 +1,6 @@
+import { ContextMenuCheckboxItemProps } from './ContextMenuCheckboxItem.types';
+/**
+ * 可勾选的菜单项(toggle),角色为 `menuitemcheckbox`。
+ * 与 Base UI 一致:点击后默认**不**关闭菜单,便于连续切换多个选项。
+ */
+export declare function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps): import('solid-js').JSX.Element;

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.js

@@ -0,0 +1,78 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { createChangeEventDetails as t } from "../context-menu.utils.js";
+import { useContextMenuEntry as n } from "../context-menu.entry.js";
+import { contextMenuCheckableItemClass as r, contextMenuIndicatorClass as i } from "../context-menu.styles.js";
+import { className as a, createComponent as o, delegateEvents as s, insert as c, mergeProps as l, spread as u, template as d, use as f } from "solid-js/web";
+import { Show as p, createSignal as m, splitProps as h } from "solid-js";
+import { Check as g } from "lucide-solid";
+//#region src/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.tsx
+var _ = /*#__PURE__*/ d("<div role=menuitemcheckbox tabindex=-1 data-slot=context-menu-checkbox-item><span>");
+function v(s) {
+	let [d, v] = h(s, [
+		"class",
+		"children",
+		"checked",
+		"defaultChecked",
+		"onCheckedChange",
+		"disabled",
+		"inset",
+		"label",
+		"closeOnClick",
+		"onClick"
+	]), [y, b] = m(s.defaultChecked ?? !1), x = () => s.checked === void 0 ? y() : s.checked, S, C = n({
+		component: "ContextMenuCheckboxItem",
+		element: () => S,
+		disabled: () => !!d.disabled,
+		label: () => d.label
+	}), w = (e) => {
+		if (d.disabled || (d.onClick?.(e), e.defaultPrevented)) return;
+		let n = !x();
+		s.checked === void 0 && b(n), s.onCheckedChange?.(n, t("item-press", e, S)), d.closeOnClick && C.popup.closeAll("item-press", e);
+	};
+	return (() => {
+		var t = _(), n = t.firstChild;
+		return t.$$pointermove = () => C.highlight(), t.addEventListener("pointerenter", () => C.highlight()), t.$$click = w, f((e) => {
+			S = e;
+		}, t), u(t, l({
+			get id() {
+				return C.id;
+			},
+			get "aria-checked"() {
+				return x();
+			},
+			get "data-inset"() {
+				return d.inset ? "" : void 0;
+			},
+			get "data-checked"() {
+				return x() ? "" : void 0;
+			},
+			get "data-unchecked"() {
+				return x() ? void 0 : "";
+			},
+			get "data-highlighted"() {
+				return C.isActive() ? "" : void 0;
+			},
+			get "data-disabled"() {
+				return d.disabled ? "" : void 0;
+			},
+			get "aria-disabled"() {
+				return d.disabled ? "true" : void 0;
+			},
+			get class() {
+				return e(r, d.class);
+			}
+		}, v), !1, !0), a(n, i), c(n, o(p, {
+			get when() {
+				return x();
+			},
+			get children() {
+				return o(g, {});
+			}
+		})), c(t, () => d.children, null), t;
+	})();
+}
+s(["click", "pointermove"]);
+//#endregion
+export { v as ContextMenuCheckboxItem };
+
+//# sourceMappingURL=ContextMenuCheckboxItem.js.map

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuCheckboxItem.js","names":["createSignal","Show","splitProps","clsx","Check","useContextMenuEntry","contextMenuCheckableItemClass","contextMenuIndicatorClass","createChangeEventDetails","ContextMenuCheckboxItemProps","ContextMenuCheckboxItem","props","local","rest","internalChecked","setInternalChecked","defaultChecked","checked","undefined","element","HTMLDivElement","entry","component","disabled","label","handleClick","e","MouseEvent","onClick","defaultPrevented","next","onCheckedChange","closeOnClick","popup","closeAll","_el$","_tmpl$","_el$2","firstChild","$$pointermove","highlight","addEventListener","$$click","_$use","el","_$spread","_$mergeProps","id","aria-checked","data-inset","inset","data-checked","data-unchecked","data-highlighted","isActive","data-disabled","aria-disabled","class","_$className","_$insert","_$createComponent","when","children","_$delegateEvents","_$mergeProps","_$createComponent","_$delegateEvents","_tmpl$","ContextMenuCheckboxItem","local","rest","splitProps","props","internalChecked","setInternalChecked","createSignal","checked","element","entry","useContextMenuEntry","handleClick","next","createChangeEventDetails","_el$","_el$2","use","el","spread","mergeProps","\"class\"","clsx","contextMenuCheckableItemClass","className","contextMenuIndicatorClass","insert","createComponent","Show","Check","delegateEvents"],"sources":["../../../../src/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.tsx"],"sourcesContent":["import { createSignal, Show, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { Check } from \"lucide-solid\";\nimport { useContextMenuEntry } from \"../context-menu.entry\";\nimport {\n  contextMenuCheckableItemClass,\n  contextMenuIndicatorClass,\n} from \"../context-menu.styles\";\nimport { createChangeEventDetails } from \"../context-menu.utils\";\nimport type { ContextMenuCheckboxItemProps } from \"./ContextMenuCheckboxItem.types\";\n\n/**\n * 可勾选的菜单项(toggle),角色为 `menuitemcheckbox`。\n * 与 Base UI 一致:点击后默认**不**关闭菜单,便于连续切换多个选项。\n */\nexport function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps) {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"checked\",\n    \"defaultChecked\",\n    \"onCheckedChange\",\n    \"disabled\",\n    \"inset\",\n    \"label\",\n    \"closeOnClick\",\n    \"onClick\",\n  ]);\n\n  const [internalChecked, setInternalChecked] = createSignal(\n    props.defaultChecked ?? false,\n  );\n  const checked = () =>\n    props.checked !== undefined ? props.checked : internalChecked();\n\n  let element: HTMLDivElement | undefined;\n\n  const entry = useContextMenuEntry({\n    component: \"ContextMenuCheckboxItem\",\n    element: () => element,\n    disabled: () => !!local.disabled,\n    label: () => local.label,\n  });\n\n  const handleClick = (e: MouseEvent) => {\n    if (local.disabled) return;\n    local.onClick?.(e);\n    if (e.defaultPrevented) return;\n\n    const next = !checked();\n    if (props.checked === undefined) setInternalChecked(next);\n    props.onCheckedChange?.(\n      next,\n      createChangeEventDetails(\"item-press\", e, element),\n    );\n\n    if (local.closeOnClick) entry.popup.closeAll(\"item-press\", e);\n  };\n\n  return (\n    <div\n      ref={(el) => {\n        element = el;\n      }}\n      id={entry.id}\n      role=\"menuitemcheckbox\"\n      tabIndex={-1}\n      aria-checked={checked()}\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={local.inset ? \"\" : undefined}\n      data-checked={checked() ? \"\" : undefined}\n      data-unchecked={checked() ? undefined : \"\"}\n      data-highlighted={entry.isActive() ? \"\" : undefined}\n      data-disabled={local.disabled ? \"\" : undefined}\n      aria-disabled={local.disabled ? \"true\" : undefined}\n      onClick={handleClick}\n      onPointerEnter={() => entry.highlight()}\n      onPointerMove={() => entry.highlight()}\n      class={clsx(contextMenuCheckableItemClass, local.class)}\n      {...rest}\n    >\n      <span class={contextMenuIndicatorClass}>\n        <Show when={checked()}>\n          <Check />\n        </Show>\n      </span>\n      {local.children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgBU,EAAwBC,GAAqC;CAC3E,IAAM,CAACC,GAAOC,KAAQX,EAAWS,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAS,CACV,GAEK,CAACG,GAAiBC,KAAsBf,EAC5CW,EAAMK,kBAAkB,EAC1B,GACMC,UACJN,EAAMM,YAAYC,KAAAA,IAA4BJ,EAAgB,IAAhCH,EAAMM,SAElCE,GAEEE,IAAQhB,EAAoB;EAChCiB,WAAW;EACXH,eAAeA;EACfI,gBAAgB,CAAC,CAACX,EAAMW;EACxBC,aAAaZ,EAAMY;CACrB,CAAC,GAEKC,KAAeC,MAAkB;EAGrC,IAFId,EAAMW,aACVX,EAAMgB,UAAUF,CAAC,GACbA,EAAEG,mBAAkB;EAExB,IAAMC,IAAO,CAACb,EAAQ;EAOtB,AANIN,EAAMM,YAAYC,KAAAA,KAAWH,EAAmBe,CAAI,GACxDnB,EAAMoB,kBACJD,GACAtB,EAAyB,cAAckB,GAAGP,CAAO,CACnD,GAEIP,EAAMoB,gBAAcX,EAAMY,MAAMC,SAAS,cAAcR,CAAC;CAC9D;CAEA,cAAA;EAAA,IAAAS,IAAAC,EAAA,GAAAC,IAAAF,EAAAG;EA2BmB,OA3BnBH,EAAAI,sBAkByBlB,EAAMmB,UAAU,GAACL,EAAAM,iBAAA,sBADhBpB,EAAMmB,UAAU,CAAC,GAAAL,EAAAO,UAD9BjB,GAAWkB,GAddC,MAAO;GACXzB,IAAUyB;EACZ,GAACT,CAAA,GAAAU,EAAAV,GAAAW,EAAA;GAAA,IACDC,KAAE;IAAA,OAAE1B,EAAM0B;GAAE;GAAA,IAAA,iBAAA;IAAA,OAGE9B,EAAQ;GAAC;GAAA,IAAA,eAAA;IAAA,OAEXL,EAAMsC,QAAQ,KAAKhC,KAAAA;GAAS;GAAA,IAAA,iBAAA;IAAA,OAC1BD,EAAQ,IAAI,KAAKC,KAAAA;GAAS;GAAA,IAAA,mBAAA;IAAA,OACxBD,EAAQ,IAAIC,KAAAA,IAAY;GAAE;GAAA,IAAA,qBAAA;IAAA,OACxBG,EAAMiC,SAAS,IAAI,KAAKpC,KAAAA;GAAS;GAAA,IAAA,kBAAA;IAAA,OACpCN,EAAMW,WAAW,KAAKL,KAAAA;GAAS;GAAA,IAAA,kBAAA;IAAA,OAC/BN,EAAMW,WAAW,SAASL,KAAAA;GAAS;GAAA,IAAAuE,QAAA;IAAA,OAI3CtF,EAAKG,GAA+BM,EAAM6C,KAAK;GAAC;EAAA,GACnD5C,CAAI,GAAA,IAAA,EAAA,GAAA6C,EAAArB,GAEK9B,CAAyB,GAAAoD,EAAAtB,GAAAuB,EACnC3D,GAAI;GAAA,IAAC4D,OAAI;IAAA,OAAE5C,EAAQ;GAAC;GAAA,IAAA6C,WAAA;IAAA,OAAAF,EAClBxD,GAAK,CAAA,CAAA;GAAA;EAAA,CAAA,CAAA,GAAAuD,EAAAxB,SAGTvB,EAAMkD,UAAQ,IAAA,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,SAAA,aAAA,CAAA"}

package/dist/components/context-menu/ContextMenuCheckboxItem/ContextMenuCheckboxItem.types.d.ts

@@ -0,0 +1,20 @@
+import { ParentProps } from 'solid-js';
+import { BaseProps } from '../../../types';
+import { ContextMenuChangeEventDetails } from '../context-menu.types';
+/** ContextMenuCheckboxItem props,对齐 Base UI `ContextMenu.CheckboxItem` */
+export interface ContextMenuCheckboxItemProps extends BaseProps, ParentProps {
+    /** 受控勾选状态;不传则内部自管理 */
+    checked?: boolean;
+    /** 非受控模式下的初始勾选状态 */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean, eventDetails: ContextMenuChangeEventDetails) => void;
+    disabled?: boolean;
+    /** 左侧对齐到带图标项的文字位置 */
+    inset?: boolean;
+    /** 键盘字符导航匹配用的文本 */
+    label?: string;
+    /** 点击后是否关闭菜单,默认 false(与 Base UI 一致) */
+    closeOnClick?: boolean;
+    onClick?: (event: MouseEvent) => void;
+    [key: string]: any;
+}

package/dist/components/context-menu/ContextMenuCheckboxItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextMenuCheckboxItem } from './ContextMenuCheckboxItem';
+export type { ContextMenuCheckboxItemProps } from './ContextMenuCheckboxItem.types';

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.d.ts

@@ -0,0 +1,9 @@
+import { ContextMenuContentProps } from './ContextMenuContent.types';
+/**
+ * ContextMenu 的浮层内容:Portal + Positioner + Popup 三者的组合,
+ * 对应 shadcn 的 `<ContextMenuContent>`。
+ *
+ * 锚点是根组件根据鼠标坐标生成的虚拟元素,所以定位方式是 position:fixed
+ * (Portal 到 body 后不受祖先定位影响)。
+ */
+export declare function ContextMenuContent(props: ContextMenuContentProps): import('solid-js').JSX.Element;

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.js

@@ -0,0 +1,64 @@
+import { useContextMenuContext as e } from "../ContextMenu/ContextMenu.context.js";
+import { ContextMenuPopupSurface as t } from "./ContextMenuPopupSurface.js";
+import { createContextMenuPopupRuntime as n } from "./useContextMenuContent.js";
+import { createComponent as r } from "solid-js/web";
+import { createEffect as i, splitProps as a } from "solid-js";
+//#region src/components/context-menu/ContextMenuContent/ContextMenuContent.tsx
+function o(o) {
+	let s = e("ContextMenuContent"), [c, l] = a(o, [
+		"class",
+		"style",
+		"children",
+		"side",
+		"align",
+		"sideOffset",
+		"alignOffset",
+		"collisionPadding",
+		"dir",
+		"finalFocus",
+		"onKeyDown"
+	]), u = () => c.side ?? "right", d = n({
+		root: s,
+		open: s.open,
+		isSubmenu: !1,
+		reference: s.anchor,
+		side: u,
+		align: () => c.align ?? "start",
+		sideOffset: () => c.sideOffset ?? 0,
+		alignOffset: () => c.alignOffset ?? 4,
+		collisionPadding: () => c.collisionPadding ?? 5,
+		dir: () => c.dir
+	});
+	return i(() => s.setFinalFocus(c.finalFocus !== !1)), r(t, {
+		runtime: d,
+		dataSlot: "context-menu-content",
+		get contentId() {
+			return s.contentId;
+		},
+		get open() {
+			return s.open;
+		},
+		side: u,
+		dir: () => c.dir,
+		get registerMenuElement() {
+			return s.registerMenuElement;
+		},
+		get class() {
+			return c.class;
+		},
+		get style() {
+			return c.style;
+		},
+		get onKeyDown() {
+			return c.onKeyDown;
+		},
+		rest: l,
+		get children() {
+			return c.children;
+		}
+	});
+}
+//#endregion
+export { o as ContextMenuContent };
+
+//# sourceMappingURL=ContextMenuContent.js.map

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuContent.js","names":["createEffect","splitProps","useContextMenuContext","ContextMenuPopupSurface","ContextMenuContentProps","createContextMenuPopupRuntime","ContextMenuContent","props","root","local","rest","side","align","runtime","open","isSubmenu","reference","anchor","sideOffset","alignOffset","collisionPadding","dir","setFinalFocus","finalFocus","_$createComponent","dataSlot","contentId","registerMenuElement","class","style","onKeyDown","children","_$createComponent","ContextMenuContent","root","useContextMenuContext","local","rest","splitProps","props","side","runtime","createContextMenuPopupRuntime","createEffect","createComponent","ContextMenuPopupSurface","\"class\""],"sources":["../../../../src/components/context-menu/ContextMenuContent/ContextMenuContent.tsx"],"sourcesContent":["import { createEffect, splitProps } from \"solid-js\";\nimport { useContextMenuContext } from \"../ContextMenu/ContextMenu.context\";\nimport { ContextMenuPopupSurface } from \"./ContextMenuPopupSurface\";\nimport type { ContextMenuContentProps } from \"./ContextMenuContent.types\";\nimport { createContextMenuPopupRuntime } from \"./useContextMenuContent\";\n\n/**\n * ContextMenu 的浮层内容:Portal + Positioner + Popup 三者的组合,\n * 对应 shadcn 的 `<ContextMenuContent>`。\n *\n * 锚点是根组件根据鼠标坐标生成的虚拟元素,所以定位方式是 position:fixed\n * (Portal 到 body 后不受祖先定位影响)。\n */\nexport function ContextMenuContent(props: ContextMenuContentProps) {\n  const root = useContextMenuContext(\"ContextMenuContent\");\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"children\",\n    \"side\",\n    \"align\",\n    \"sideOffset\",\n    \"alignOffset\",\n    \"collisionPadding\",\n    \"dir\",\n    \"finalFocus\",\n    \"onKeyDown\",\n  ]);\n\n  const side = () => local.side ?? \"right\";\n  const align = () => local.align ?? \"start\";\n\n  const runtime = createContextMenuPopupRuntime({\n    root,\n    open: root.open,\n    isSubmenu: false,\n    reference: root.anchor,\n    side,\n    align,\n    sideOffset: () => local.sideOffset ?? 0,\n    alignOffset: () => local.alignOffset ?? 4,\n    collisionPadding: () => local.collisionPadding ?? 5,\n    dir: () => local.dir,\n  });\n\n  // Popup 的 finalFocus 是浮层级配置,但焦点回收由根组件统一执行,\n  // 因此这里把值同步给根状态。\n  createEffect(() => root.setFinalFocus(local.finalFocus !== false));\n\n  return (\n    <ContextMenuPopupSurface\n      runtime={runtime}\n      dataSlot=\"context-menu-content\"\n      contentId={root.contentId}\n      open={root.open}\n      side={side}\n      dir={() => local.dir}\n      registerMenuElement={root.registerMenuElement}\n      class={local.class}\n      style={local.style}\n      onKeyDown={local.onKeyDown}\n      rest={rest}\n    >\n      {local.children}\n    </ContextMenuPopupSurface>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAgBM,EAAmBC,GAAgC;CACjE,IAAMC,IAAON,EAAsB,oBAAoB,GACjD,CAACO,GAAOC,KAAQT,EAAWM,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAW,CACZ,GAEKI,UAAaF,EAAME,QAAQ,SAG3BE,IAAUR,EAA8B;EAC5CG;EACAM,MAAMN,EAAKM;EACXC,WAAW;EACXC,WAAWR,EAAKS;EAChBN;EACAC,aARkBH,EAAMG,SAAS;EASjCM,kBAAkBT,EAAMS,cAAc;EACtCC,mBAAmBV,EAAMU,eAAe;EACxCC,wBAAwBX,EAAMW,oBAAoB;EAClDC,WAAWZ,EAAMY;CACnB,CAAC;CAMD,OAFArB,QAAmBQ,EAAKc,cAAcb,EAAMc,eAAe,EAAK,CAAC,GAEjEC,EACGrB,GAAuB;EACbU;EACTY,UAAQ;EAAA,IACRC,YAAS;GAAA,OAAElB,EAAKkB;EAAS;EAAA,IACzBZ,OAAI;GAAA,OAAEN,EAAKM;EAAI;EACTH;EACNU,WAAWZ,EAAMY;EAAG,IACpBM,sBAAmB;GAAA,OAAEnB,EAAKmB;EAAmB;EAAA,IAAAmB,QAAA;GAAA,OACtCrC,EAAMmB;EAAK;EAAA,IAClBC,QAAK;GAAA,OAAEpB,EAAMoB;EAAK;EAAA,IAClBC,YAAS;GAAA,OAAErB,EAAMqB;EAAS;EACpBpB;EAAI,IAAAqB,WAAA;GAAA,OAETtB,EAAMsB;EAAQ;CAAA,CAAA;AAGrB"}

package/dist/components/context-menu/ContextMenuContent/ContextMenuContent.types.d.ts

@@ -0,0 +1,26 @@
+import { ParentProps } from 'solid-js';
+import { BaseProps } from '../../../types';
+import { ContextMenuAlign, ContextMenuSide } from '../context-menu.types';
+/**
+ * ContextMenuContent props:对齐 shadcn 的 `ContextMenuContent`
+ * (Base UI 的 `Popup` 属性 + `Positioner` 的 align/alignOffset/side/sideOffset)。
+ *
+ * 位置相关 prop 的默认值与 shadcn 保持一致:side="right"、align="start"、
+ * alignOffset=4、sideOffset=0;`collisionPadding` 对齐 Base UI 默认值 5。
+ */
+export interface ContextMenuContentProps extends BaseProps, ParentProps {
+    /** 贴锚点的哪一侧,默认 'right';支持 Base UI 的逻辑方向 inline-start/inline-end */
+    side?: ContextMenuSide;
+    /** 沿边对齐方式,默认 'start' */
+    align?: ContextMenuAlign;
+    /** 与锚点之间的间距(像素),默认 0 */
+    sideOffset?: number;
+    /** 沿对齐轴的偏移(像素),默认 4 */
+    alignOffset?: number;
+    /** 距视口边缘的最小间距(像素),默认 5 */
+    collisionPadding?: number;
+    /** 关闭后是否把焦点还给触发器,默认 true */
+    finalFocus?: boolean;
+    /** 其余原生 div 属性原样透传到 popup 元素 */
+    [key: string]: any;
+}

package/dist/components/context-menu/ContextMenuContent/ContextMenuPopupSurface.d.ts

@@ -0,0 +1,31 @@
+import { Accessor, JSX } from 'solid-js';
+import { ContextMenuSide } from '../context-menu.types';
+import { ContextMenuPopupRuntime } from './useContextMenuContent';
+export interface ContextMenuPopupSurfaceProps {
+    runtime: ContextMenuPopupRuntime;
+    /** popup 上的 data-slot 值(根菜单 / 子菜单不同) */
+    dataSlot: string;
+    /** positioner 上的 data-slot 值,默认 context-menu-positioner */
+    positionerSlot?: string;
+    contentId: string;
+    open: Accessor<boolean>;
+    side: Accessor<ContextMenuSide>;
+    dir: Accessor<"ltr" | "rtl" | "auto" | undefined>;
+    registerMenuElement: (el: HTMLElement) => () => void;
+    class?: string;
+    style?: JSX.CSSProperties;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    children: JSX.Element;
+    /** 其余透传到 popup 元素的属性 */
+    rest: Record<string, any>;
+}
+/**
+ * 菜单浮层的展示骨架,根菜单与子菜单共用。
+ *
+ * 结构分两层(与 Popover/Select 一致):外层只负责 translate 定位,内层负责
+ * 视觉样式与进出场动画。同一个元素不能既用 transform 定位又用 transform 做
+ * 缩放动画,否则动画播放期间会把定位 transform 整个顶掉。
+ */
+export declare function ContextMenuPopupSurface(props: ContextMenuPopupSurfaceProps): JSX.Element;

package/dist/components/context-menu/ContextMenuContent/ContextMenuPopupSurface.js

@@ -0,0 +1,102 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { getAlignment as t } from "../../../lib/positioner/core/placement.js";
+import { ScrollArrows as n } from "../../scroll-arrows/ScrollArrows.js";
+import { getContextMenuTransformOrigin as r, resolveContextMenuDataSide as i } from "../context-menu.utils.js";
+import { ContextMenuPopupContext as a } from "../context-menu.context.js";
+import { Portal as o, createComponent as s, delegateEvents as c, effect as l, insert as u, mergeProps as d, setAttribute as f, spread as p, style as m, template as h, use as g } from "solid-js/web";
+import { Show as _, createEffect as v, createSignal as y, onCleanup as b } from "solid-js";
+//#region src/components/context-menu/ContextMenuContent/ContextMenuPopupSurface.tsx
+var x = /*#__PURE__*/ h("<div class=\"isolate z-50 outline-none\"style=z-index:50><div role=menu tabindex=-1>"), S = e("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none", "no-scrollbar [&::-webkit-scrollbar]:hidden", "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95");
+function C(c) {
+	let h = c.runtime, [C, w] = y("closed");
+	v(() => {
+		if (c.open()) {
+			let e = requestAnimationFrame(() => w("open"));
+			b(() => cancelAnimationFrame(e));
+		} else w("closed");
+	}), v(() => {
+		c.open() && h.popupEl() && h.setupOnOpen();
+	});
+	let T = () => h.placement(), E = () => i(c.side(), T(), c.dir()), D = () => t(T()) ?? "center", O = () => r(T());
+	return s(_, {
+		get when() {
+			return c.open();
+		},
+		get children() {
+			return s(o, { get children() {
+				var t = x(), r = t.firstChild;
+				return g((e) => {
+					h.setPositionerEl(e);
+					let t = c.registerMenuElement(e);
+					b(() => {
+						t(), h.setPositionerEl(void 0);
+					});
+				}, t), r.addEventListener("pointerleave", () => c.onPointerLeave?.()), r.addEventListener("pointerenter", () => c.onPointerEnter?.()), r.$$keydown = (e) => {
+					c.onKeyDown?.(e), h.onKeyDown(e);
+				}, g((e) => {
+					h.setPopupEl(e), b(() => h.setPopupEl(void 0));
+				}, r), p(r, d({
+					get id() {
+						return c.contentId;
+					},
+					get "data-slot"() {
+						return c.dataSlot;
+					},
+					get "data-open"() {
+						return C() === "open" ? "" : void 0;
+					},
+					get "data-side"() {
+						return E();
+					},
+					get "data-align"() {
+						return D();
+					},
+					get "aria-activedescendant"() {
+						return h.popupCtx.activeId();
+					},
+					get class() {
+						return e(S, c.class);
+					},
+					get style() {
+						return {
+							"transform-origin": O(),
+							"--transform-origin": O(),
+							"max-height": h.availableHeight() == null ? void 0 : `${h.availableHeight()}px`,
+							"--available-height": h.availableHeight() == null ? void 0 : `${h.availableHeight()}px`,
+							...typeof c.style == "object" ? c.style : void 0
+						};
+					}
+				}, () => c.rest), !1, !0), u(r, s(a.Provider, {
+					get value() {
+						return h.popupCtx;
+					},
+					get children() {
+						return c.children;
+					}
+				})), u(t, s(n, {
+					get target() {
+						return h.popupEl;
+					},
+					upClass: "rounded-t-lg",
+					downClass: "rounded-b-lg"
+				}), null), l((e) => {
+					var n = c.positionerSlot ?? "context-menu-positioner", r = E(), i = D(), a = {
+						...h.pos.floatingStyles(),
+						opacity: +!!h.pos.isPositioned()
+					};
+					return n !== e.e && f(t, "data-slot", e.e = n), r !== e.t && f(t, "data-side", e.t = r), i !== e.a && f(t, "data-align", e.a = i), e.o = m(t, a, e.o), e;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0
+				}), t;
+			} });
+		}
+	});
+}
+c(["keydown"]);
+//#endregion
+export { C as ContextMenuPopupSurface };
+
+//# sourceMappingURL=ContextMenuPopupSurface.js.map

package/dist/components/context-menu/ContextMenuContent/ContextMenuPopupSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPopupSurface.js","names":["createEffect","createSignal","onCleanup","Show","Accessor","JSX","Portal","getAlignment","clsx","ScrollArrows","ContextMenuSide","ContextMenuPopupContext","getContextMenuTransformOrigin","resolveContextMenuDataSide","ContextMenuPopupRuntime","CONTENT_CLASS","ContextMenuPopupSurfaceProps","runtime","dataSlot","positionerSlot","contentId","open","side","dir","registerMenuElement","el","HTMLElement","class","style","CSSProperties","onKeyDown","e","KeyboardEvent","onPointerEnter","onPointerLeave","children","Element","rest","Record","ContextMenuPopupSurface","props","animationState","setAnimationState","raf","requestAnimationFrame","cancelAnimationFrame","popupEl","setupOnOpen","placement","dataSide","dataAlign","transformOrigin","_$createComponent","when","_el$","_tmpl$","_el$2","firstChild","_$use","setPositionerEl","unregister","undefined","addEventListener","$$keydown","setPopupEl","_$spread","_$mergeProps","id","data-slot","data-open","data-side","data-align","aria-activedescendant","popupCtx","activeId","availableHeight","_$insert","Provider","value","target","upClass","downClass","_$effect","_p$","_v$","_v$2","_v$3","_v$4","pos","floatingStyles","opacity","isPositioned","_$setAttribute","t","a","o","_$style","_$delegateEvents","_$createComponent","_$mergeProps","_$setAttribute","_$style","_$delegateEvents","_tmpl$","CONTENT_CLASS","clsx","ContextMenuPopupSurface","runtime","props","animationState","setAnimationState","createSignal","createEffect","raf","placement","dataSide","resolveContextMenuDataSide","dataAlign","getAlignment","transformOrigin","getContextMenuTransformOrigin","createComponent","Show","Portal","_el$","_el$2","use","el","unregister","onCleanup","spread","mergeProps","\"class\"","insert","ContextMenuPopupContext","ScrollArrows","effect","_v$","_v$2","_v$3","_v$4","_p$","setAttribute","style","delegateEvents"],"sources":["../../../../src/components/context-menu/ContextMenuContent/ContextMenuPopupSurface.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  onCleanup,\n  Show,\n  type Accessor,\n  type JSX,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { getAlignment } from \"~/lib\";\nimport { clsx } from \"~/utils\";\nimport { ScrollArrows } from \"~/components/scroll-arrows\";\nimport type { ContextMenuSide } from \"../context-menu.types\";\nimport { ContextMenuPopupContext } from \"../context-menu.context\";\nimport {\n  getContextMenuTransformOrigin,\n  resolveContextMenuDataSide,\n} from \"../context-menu.utils\";\nimport type { ContextMenuPopupRuntime } from \"./useContextMenuContent\";\n\n/**\n * popup 的视觉样式,直接对齐 shadcn base 版 `ContextMenuContent`。\n * 默认圆角用 base-nova 的 rounded-lg,与本项目 Popover/Select 的观感一致。\n */\nconst CONTENT_CLASS = clsx(\n  \"z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none\",\n  \"no-scrollbar [&::-webkit-scrollbar]:hidden\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n  \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n  \"data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n);\n\nexport interface ContextMenuPopupSurfaceProps {\n  runtime: ContextMenuPopupRuntime;\n  /** popup 上的 data-slot 值(根菜单 / 子菜单不同) */\n  dataSlot: string;\n  /** positioner 上的 data-slot 值,默认 context-menu-positioner */\n  positionerSlot?: string;\n  contentId: string;\n  open: Accessor<boolean>;\n  side: Accessor<ContextMenuSide>;\n  dir: Accessor<\"ltr\" | \"rtl\" | \"auto\" | undefined>;\n  registerMenuElement: (el: HTMLElement) => () => void;\n  class?: string;\n  style?: JSX.CSSProperties;\n  onKeyDown?: (e: KeyboardEvent) => void;\n  onPointerEnter?: () => void;\n  onPointerLeave?: () => void;\n  children: JSX.Element;\n  /** 其余透传到 popup 元素的属性 */\n  rest: Record<string, any>;\n}\n\n/**\n * 菜单浮层的展示骨架,根菜单与子菜单共用。\n *\n * 结构分两层(与 Popover/Select 一致):外层只负责 translate 定位,内层负责\n * 视觉样式与进出场动画。同一个元素不能既用 transform 定位又用 transform 做\n * 缩放动画,否则动画播放期间会把定位 transform 整个顶掉。\n */\nexport function ContextMenuPopupSurface(props: ContextMenuPopupSurfaceProps) {\n  const runtime = props.runtime;\n\n  // 打开时延迟一帧再触发进场动画,给首次定位计算留出时间,避免\"先出现在\n  // 旧位置再跳过去\"。\n  const [animationState, setAnimationState] = createSignal<\"open\" | \"closed\">(\n    \"closed\",\n  );\n\n  createEffect(() => {\n    if (props.open()) {\n      const raf = requestAnimationFrame(() => setAnimationState(\"open\"));\n      onCleanup(() => cancelAnimationFrame(raf));\n    } else {\n      setAnimationState(\"closed\");\n    }\n  });\n\n  // popup 挂载后聚焦它并高亮第一项(键盘事件依赖 popup 持有焦点)。\n  createEffect(() => {\n    if (props.open() && runtime.popupEl()) runtime.setupOnOpen();\n  });\n\n  const placement = () => runtime.placement();\n  const dataSide = () =>\n    resolveContextMenuDataSide(props.side(), placement(), props.dir());\n  const dataAlign = () => getAlignment(placement()) ?? \"center\";\n  const transformOrigin = () => getContextMenuTransformOrigin(placement());\n\n  return (\n    <Show when={props.open()}>\n      <Portal>\n        <div\n          ref={(el) => {\n            runtime.setPositionerEl(el);\n            const unregister = props.registerMenuElement(el);\n            onCleanup(() => {\n              unregister();\n              runtime.setPositionerEl(undefined);\n            });\n          }}\n          data-slot={props.positionerSlot ?? \"context-menu-positioner\"}\n          data-side={dataSide()}\n          data-align={dataAlign()}\n          class=\"isolate z-50 outline-none\"\n          style={{\n            ...runtime.pos.floatingStyles(),\n            \"z-index\": 50,\n            opacity: runtime.pos.isPositioned() ? 1 : 0,\n          }}\n        >\n          <div\n            ref={(el) => {\n              runtime.setPopupEl(el);\n              onCleanup(() => runtime.setPopupEl(undefined));\n            }}\n            id={props.contentId}\n            role=\"menu\"\n            tabIndex={-1}\n            data-slot={props.dataSlot}\n            data-open={animationState() === \"open\" ? \"\" : undefined}\n            data-side={dataSide()}\n            data-align={dataAlign()}\n            aria-activedescendant={runtime.popupCtx.activeId()}\n            class={clsx(CONTENT_CLASS, props.class)}\n            style={{\n              \"transform-origin\": transformOrigin(),\n              \"--transform-origin\": transformOrigin(),\n              \"max-height\":\n                runtime.availableHeight() != null\n                  ? `${runtime.availableHeight()}px`\n                  : undefined,\n              \"--available-height\":\n                runtime.availableHeight() != null\n                  ? `${runtime.availableHeight()}px`\n                  : undefined,\n              ...(typeof props.style === \"object\" ? props.style : undefined),\n            }}\n            onKeyDown={(e) => {\n              props.onKeyDown?.(e);\n              runtime.onKeyDown(e);\n            }}\n            onPointerEnter={() => props.onPointerEnter?.()}\n            onPointerLeave={() => props.onPointerLeave?.()}\n            {...props.rest}\n          >\n            <ContextMenuPopupContext.Provider value={runtime.popupCtx}>\n              {props.children}\n            </ContextMenuPopupContext.Provider>\n          </div>\n          <ScrollArrows\n            target={runtime.popupEl}\n            upClass=\"rounded-t-lg\"\n            downClass=\"rounded-b-lg\"\n          />\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n"],"mappings":"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"}

package/dist/components/context-menu/ContextMenuContent/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextMenuContent } from './ContextMenuContent';
+export type { ContextMenuContentProps } from './ContextMenuContent.types';

package/dist/components/context-menu/ContextMenuContent/useContextMenuContent.d.ts

@@ -0,0 +1,52 @@
+import { Accessor } from 'solid-js';
+import { Placement, Positioner, ReferenceElement } from '../../../lib';
+import { ContextMenuAlign, ContextMenuContextValue, ContextMenuOrientation, ContextMenuPopupContextValue, ContextMenuSide, ContextMenuSubmenuContextValue } from '../context-menu.types';
+export interface CreateContextMenuPopupOptions {
+    root: ContextMenuContextValue;
+    /** 该浮层自身的打开状态(根菜单 = root.open,子菜单 = submenu.open) */
+    open: Accessor<boolean>;
+    /** 父级浮层:根菜单为 undefined,子菜单为触发它的那个浮层 */
+    parent?: ContextMenuPopupContextValue;
+    isSubmenu: boolean;
+    /** 定位锚点:根菜单是鼠标坐标的虚拟元素,子菜单是子菜单触发器 */
+    reference: Accessor<ReferenceElement | undefined>;
+    side: Accessor<ContextMenuSide>;
+    align: Accessor<ContextMenuAlign>;
+    sideOffset: Accessor<number>;
+    alignOffset: Accessor<number>;
+    collisionPadding: Accessor<number>;
+    dir: Accessor<"ltr" | "rtl" | "auto" | undefined>;
+    /** 子菜单可以覆盖根组件的行为;不传则回退到 root 上的值 */
+    loopFocus?: Accessor<boolean>;
+    orientation?: Accessor<ContextMenuOrientation>;
+    highlightItemOnHover?: Accessor<boolean>;
+    /** 子菜单场景下提供,用于 ArrowLeft / Escape 只关闭当前子菜单 */
+    submenu?: ContextMenuSubmenuContextValue;
+}
+export interface ContextMenuPopupRuntime {
+    popupCtx: ContextMenuPopupContextValue;
+    pos: Positioner;
+    /** 真正承载焦点的 popup 元素 */
+    popupEl: Accessor<HTMLElement | undefined>;
+    setPopupEl: (el: HTMLElement | undefined) => void;
+    /** 负责定位的外层元素 */
+    positionerEl: Accessor<HTMLElement | undefined>;
+    setPositionerEl: (el: HTMLElement | undefined) => void;
+    /** size 中间件算出的可用高度,用于 max-height 滚动 */
+    availableHeight: Accessor<number | undefined>;
+    placement: Accessor<Placement>;
+    onKeyDown: (e: KeyboardEvent) => void;
+    /** 打开后聚焦 popup 并把高亮落到第一项 */
+    setupOnOpen: () => void;
+}
+/**
+ * 一个浮层(根菜单或子菜单)的运行时:定位、菜单项注册、高亮/键盘导航、
+ * 类型头(typeahead)以及开关联动都收敛在这里。`ContextMenuContent` 与
+ * `ContextMenuSubContent` 共用它,只是传入的锚点与父子关系不同。
+ *
+ * 交互模型:焦点始终落在 popup 上,高亮项通过 `aria-activedescendant` 表达
+ * (而不是把真实焦点在菜单项之间搬来搬去)。这与本项目 Select 的做法一致,
+ * 既避免了焦点在 Portal / 子菜单之间的来回跳,也让"关闭后把焦点还给触发器"
+ * 变得非常简单。
+ */
+export declare function createContextMenuPopupRuntime(options: CreateContextMenuPopupOptions): ContextMenuPopupRuntime;

package/dist/components/context-menu/ContextMenuContent/useContextMenuContent.js

@@ -0,0 +1,153 @@
+import { createPositioner as e } from "../../../lib/positioner/create-positioner.js";
+import { offset as t } from "../../../lib/positioner/middleware/offset.js";
+import { shift as n } from "../../../lib/positioner/middleware/shift.js";
+import { flip as r } from "../../../lib/positioner/middleware/flip.js";
+import { size as i } from "../../../lib/positioner/middleware/size.js";
+import { hide as a } from "../../../lib/positioner/middleware/hide.js";
+import { containingBlockOffset as o } from "../../../lib/positioner/middleware/containing-block-offset.js";
+import { toContextMenuPlacement as s } from "../context-menu.utils.js";
+import { createEffect as c, createMemo as l, createSignal as u, createUniqueId as d, onCleanup as f } from "solid-js";
+//#region src/components/context-menu/ContextMenuContent/useContextMenuContent.ts
+var p = 500;
+function m(m) {
+	let { root: h } = m, g = () => m.loopFocus?.() ?? h.loopFocus(), _ = () => m.orientation?.() ?? h.orientation(), v = () => m.highlightItemOnHover?.() ?? h.highlightItemOnHover(), [y, b] = u(), [x, S] = u(), [C, w] = u([]), [T, E] = u(), [D, O] = u(), [k, A] = u(), j = `context-menu-popup-${d()}`, M = e(m.reference, x, {
+		placement: () => s(m.side(), m.align(), m.dir()),
+		strategy: "fixed",
+		middleware: () => [
+			t({
+				mainAxis: m.sideOffset(),
+				crossAxis: m.alignOffset()
+			}),
+			r(),
+			n({ padding: m.collisionPadding() }),
+			i({
+				padding: m.collisionPadding(),
+				apply: ({ availableHeight: e }) => A(e)
+			}),
+			a(),
+			o()
+		]
+	}), N = l(() => [...C()].sort((e, t) => e.element === t.element ? 0 : e.element.compareDocumentPosition(t.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)), P = l(() => N().filter((e) => !e.disabled())), F = () => N().find((e) => e.id === T()), I = (e) => (w((t) => [...t, e]), () => w((t) => t.filter((t) => t.id !== e.id))), L = () => O(void 0), R = (e) => {
+		E(e);
+		let t = D();
+		t && t.id !== e && L();
+	}, z = (e) => {
+		let t = P();
+		if (t.length === 0) return;
+		let n = t.findIndex((e) => e.id === T()), r;
+		n === -1 ? r = e > 0 ? 0 : t.length - 1 : (r = n + e, r < 0 ? r = g() ? t.length - 1 : 0 : r >= t.length && (r = g() ? 0 : t.length - 1)), R(t[r].id);
+	}, B = () => {
+		let e = P();
+		R(e.length > 0 ? e[0].id : void 0);
+	}, V = () => {
+		let e = P();
+		R(e.length > 0 ? e[e.length - 1].id : void 0);
+	};
+	c(() => {
+		let e = T();
+		e && N().find((t) => t.id === e)?.element.scrollIntoView({ block: "nearest" });
+	}), c(() => {
+		m.open() || (E(void 0), O(void 0));
+	});
+	let H = "", U, W = (e) => {
+		H += e.toLowerCase(), U !== void 0 && window.clearTimeout(U), U = window.setTimeout(() => {
+			H = "", U = void 0;
+		}, p);
+		let t = P().find((e) => e.label().toLowerCase().startsWith(H));
+		t && R(t.id);
+	};
+	return f(() => {
+		U !== void 0 && window.clearTimeout(U);
+	}), {
+		popupCtx: {
+			root: h,
+			parent: m.parent,
+			submenu: m.submenu,
+			menuId: j,
+			isSubmenu: m.isSubmenu,
+			popup: y,
+			setPopup: (e) => b(e),
+			items: N,
+			registerItem: I,
+			activeId: T,
+			setActiveId: R,
+			activeEntry: F,
+			moveActive: z,
+			focusFirst: B,
+			focusLast: V,
+			highlight: (e) => R(e),
+			openPopupState: D,
+			openPopup: (e, t, n) => O({
+				id: e,
+				reason: t,
+				event: n
+			}),
+			closeOpenPopup: L,
+			closeAll: (e, t) => h.closeAll(e, t),
+			highlightItemOnHover: v
+		},
+		pos: M,
+		popupEl: y,
+		setPopupEl: (e) => b(e),
+		positionerEl: x,
+		setPositionerEl: (e) => S(e),
+		availableHeight: k,
+		placement: M.placement,
+		onKeyDown: (e) => {
+			let t = m.submenu, n = _() === "horizontal";
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), z(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), z(-1);
+					break;
+				case "ArrowRight": {
+					if (n) {
+						e.preventDefault(), z(1);
+						break;
+					}
+					let t = F();
+					t?.hasPopup() && (e.preventDefault(), t.openPopup?.("list-navigation", e));
+					break;
+				}
+				case "ArrowLeft":
+					if (n) {
+						e.preventDefault(), z(-1);
+						break;
+					}
+					t && (e.preventDefault(), e.stopPropagation(), t.closeSubmenu("list-navigation", e, !0));
+					break;
+				case "Home":
+					e.preventDefault(), B();
+					break;
+				case "End":
+					e.preventDefault(), V();
+					break;
+				case "Enter":
+				case " ": {
+					e.preventDefault();
+					let t = F();
+					t && !t.disabled() && t.activate();
+					break;
+				}
+				case "Escape":
+					e.preventDefault(), e.stopPropagation(), t && !t.closeParentOnEsc() ? t.closeSubmenu("escape-key", e, !0) : h.closeAll("escape-key", e);
+					break;
+				case "Tab":
+					e.preventDefault(), h.closeAll("focus-out", e);
+					break;
+				default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && W(e.key);
+			}
+		},
+		setupOnOpen: () => {
+			queueMicrotask(() => {
+				m.open() && (y()?.focus({ preventScroll: !0 }), T() === void 0 && B());
+			});
+		}
+	};
+}
+//#endregion
+export { m as createContextMenuPopupRuntime };
+
+//# sourceMappingURL=useContextMenuContent.js.map