@skdx/react 0.28.0 → 0.30.0

package/dist/mentions/types.d.ts

@@ -0,0 +1,367 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
+import type { MentionToken } from '../utils/mentions.js';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { PopperContentProps } from '../utils/popper.js';
+import type { PortalProps } from '../utils/portal.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
+import type { OptionEntry } from '../utils/useOptionCollection.js';
+/** One mentionable entry for the {@link MentionsProps.options} recipe prop, rendered as a `MentionsItem`. */
+export interface MentionsOptionData {
+    /** Identifier carried on the value-change detail when this entry is inserted. */
+    value: string;
+    /**
+     * Text the filter matches and the default `serialize` writes into the field.
+     * @default undefined — falls back to `value`.
+     */
+    label?: string | undefined;
+    /**
+     * Trigger character this entry belongs to, so one field addresses several collections.
+     * @default undefined — the first configured trigger.
+     */
+    trigger?: string | undefined;
+    /**
+     * Excludes this entry from insertion and from pointer or keyboard highlight.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+/**
+ * Narrows Items against the active query — the substring between the trigger
+ * character and the caret, never the whole field value. `'manual'` filters
+ * nothing; a predicate filters, and a number both filters and ranks (`0`
+ * excludes, positive keeps and orders by score descending).
+ */
+export type MentionsFilter = 'manual' | ((itemText: string, query: string) => boolean | number);
+/** What drove a {@link Mentions} value change: a user gesture, or the application. */
+export type MentionsValueChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/** The mention just inserted and the range of field text it replaced. */
+export interface MentionsInsertedMention {
+    /** Trigger character of the token that was replaced. */
+    trigger: string;
+    /** The chosen Item's `value`, which is not what was written into the text. */
+    value: string;
+    /** The text `serialize` produced and the field now contains. */
+    text: string;
+    /** Offset of the replaced trigger character in the previous value. */
+    start: number;
+    /** Offset just past the replaced query in the previous value. */
+    end: number;
+}
+/** The payload `onValueChange` receives; `mention` is null for an ordinary keystroke. */
+export interface MentionsValueChangeDetail {
+    /** The field's whole new text, never the inserted mention alone. */
+    value: string;
+    /** The field's text before this change, or null when there was none. */
+    previousValue: string | null;
+    /** What drove the change. */
+    reason: MentionsValueChangeReason;
+    /** The entry just inserted, or null for ordinary typing. */
+    mention: MentionsInsertedMention | null;
+}
+/** The active token `onQueryChange` reports: its trigger, query and offsets. */
+export type MentionsQueryChangeDetail = MentionToken;
+/** What moved virtual focus: a key, a pointer, or the component itself. */
+export type MentionsHighlightReason = 'keyboard' | 'pointer' | 'auto';
+/** The payload `onHighlightChange` receives whenever virtual focus moves. */
+export interface MentionsHighlightChangeDetail {
+    /** Value of the item now highlighted, or null when none is. */
+    value: string | null;
+    /** Value of the item highlighted before, or null when none was. */
+    previousValue: string | null;
+    /** What moved the highlight. */
+    reason: MentionsHighlightReason;
+}
+/** What {@link MentionsProps.serialize} is handed for the entry being inserted. */
+export interface MentionsSerializeInput {
+    /** The chosen Item's identifier, as declared on the part. */
+    value: string;
+    /** The Item's `textValue`, or the text it rendered. */
+    textValue: string;
+    /** Trigger character of the token being replaced now. */
+    trigger: string;
+}
+/** Constraint-validation handle for the {@link Mentions} ref, delegating to the real textarea. */
+export type MentionsHandle = FormValidityHandle;
+/** @internal Shared state distributed from {@link Mentions} to its parts via context. */
+export interface MentionsContextValue {
+    inputRef: React.RefObject<HTMLTextAreaElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    /** Id of Content, which the Input's `aria-controls` names while open. */
+    contentId: string;
+    /** The field's whole text. */
+    value: string;
+    /** Writes the field's text for an ordinary keystroke, tagged `'keyboard'`. */
+    onValueChange: (value: string) => void;
+    /** The token under the caret, or null when no mention is being typed. */
+    token: MentionToken | null;
+    /** Recomputes the token from the field's text and caret, and reopens or closes. */
+    detect: (field: HTMLTextAreaElement) => void;
+    /** Replaces the active token with the serialized entry and moves the caret past it. */
+    insertItem: (value: string, text: string, reason: MentionsValueChangeReason) => void;
+    /** Closes the popup and suppresses the current token until it is abandoned. */
+    dismiss: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    activeId: string | null;
+    /** CSS `order` for score-ranked Items when `filter` ranks; null leaves order untouched. */
+    itemOrder: ReadonlyMap<string, number> | null;
+    /** Moves virtual focus and tags the move with a reason. */
+    setActiveId: (id: string | null, reason?: MentionsHighlightReason) => void;
+    /** Moves the highlight one item forward or back, wrapping when `loop`. */
+    moveActive: (direction: 1 | -1) => string | null;
+    itemCount: number;
+    registerItem: (id: string, entry: OptionEntry) => void;
+    unregisterItem: (id: string) => void;
+    getItem: (id: string) => OptionEntry | undefined;
+    /** Whether an item's text survives the current `filter` and query. */
+    matchesFilter: (itemText: string) => boolean;
+    /** Trigger character an Item with no `trigger` prop belongs to. */
+    defaultTrigger: string;
+    autoResize: boolean;
+    minRows: number;
+    maxRows: number | undefined;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    loading: boolean;
+    required: boolean;
+    name: string | undefined;
+    form: string | undefined;
+}
+/**
+ * Props for the {@link Mentions} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived Input, the underlying `<textarea>`.
+ */
+export interface MentionsProps extends PassThroughProps {
+    /**
+     * The `MentionsInput` and `MentionsPortal` parts; the root renders no DOM itself.
+     * @default undefined — the anatomy is derived from `options` instead.
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * The field's full text, for controlled usage; pair it with `onValueChange`.
+     * @default undefined — uncontrolled, tracking its own text internally.
+     */
+    value?: string | undefined;
+    /**
+     * Initial text of the field, and the text a form reset restores.
+     * @default ''
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Fires with the field's whole new text, plus the mention just inserted.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: ((detail: MentionsValueChangeDetail) => void) | undefined;
+    /**
+     * Characters that open a mention at a word boundary; a string is read one character at a time.
+     * @default '@'
+     */
+    triggers?: string | readonly string[] | undefined;
+    /**
+     * Declares the mentionable collection as data, deriving one Item per entry.
+     * @default undefined — nothing is derived; compose the parts yourself.
+     */
+    options?: MentionsOptionData[] | undefined;
+    /**
+     * How Items are narrowed against the query between the trigger and the caret.
+     * @default 'manual' — the consumer renders only the matching Items.
+     */
+    filter?: MentionsFilter | undefined;
+    /**
+     * Builds the text that replaces the typed token when an entry is chosen.
+     * @default (item) => `${item.trigger}${item.textValue}`
+     */
+    serialize?: ((item: MentionsSerializeInput) => string) | undefined;
+    /**
+     * Whether a single space follows an inserted mention so typing continues cleanly.
+     * @default true
+     */
+    appendSpace?: boolean | undefined;
+    /**
+     * How many spaces a query may contain before the mention is abandoned.
+     * @default 0
+     */
+    allowedSpaces?: number | undefined;
+    /**
+     * Whether a trigger opens a mention only at a word boundary, keeping email addresses silent.
+     * @default true
+     */
+    requireWordBoundary?: boolean | undefined;
+    /**
+     * Fires whenever the token under the caret changes, and null once none is being typed.
+     * @default undefined — no-op if omitted.
+     */
+    onQueryChange?: ((detail: MentionsQueryChangeDetail | null) => void) | undefined;
+    /**
+     * Whether the popup is open, for controlled usage; pair it with `onOpenChange`.
+     * @default undefined — uncontrolled, tracking its own open state internally.
+     */
+    open?: boolean | undefined;
+    /**
+     * Initial open state of the popup, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Fires with the new open state whenever the popup opens or closes.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires once the open or close animation has finished on screen.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    /**
+     * Keeps the first item highlighted as the list changes, so Enter always commits.
+     * @default true — the opposite of Combobox, where the draft text is itself an answer.
+     */
+    autoHighlight?: boolean | undefined;
+    /**
+     * Wraps arrow navigation around the ends of the item list.
+     * @default true
+     */
+    loop?: boolean | undefined;
+    /**
+     * Fires whenever virtual focus moves; read-only, with no controlled counterpart.
+     * @default undefined — no-op if omitted.
+     */
+    onHighlightChange?: ((detail: MentionsHighlightChangeDetail) => void) | undefined;
+    /**
+     * Marks items as in flight and suppresses the result-count announcement.
+     * @default false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Grows the field to fit its content instead of showing a scrollbar.
+     * @default false
+     */
+    autoResize?: boolean | undefined;
+    /**
+     * The field's opening size, and the floor auto-resize will not shrink below.
+     * @default 2
+     */
+    minRows?: number | undefined;
+    /**
+     * Caps auto-resize growth to this many rows of computed line height.
+     * @default undefined — growth is uncapped.
+     */
+    maxRows?: number | undefined;
+    /**
+     * Disables the field, so no mention can ever open.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Makes the field read-only, suspending trigger detection while keeping it focusable.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid` and `data-invalid`.
+     * @default false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Form field name the field's full text is submitted under.
+     * @default undefined — the field submits nothing at all.
+     */
+    name?: string | undefined;
+    /**
+     * Id of the `<form>` this field submits into, for a field outside its subtree.
+     * @default undefined — associates with the nearest ancestor form.
+     */
+    form?: string | undefined;
+    /**
+     * Marks the field required: `valueMissing` while its text is empty.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Formats the polite announcement of the rendered item count while open.
+     * @default defaultGetResultCountLabel — e.g. `"3 results available"`
+     */
+    getResultCountLabel?: ((count: number) => string) | undefined;
+    /**
+     * Placeholder text forwarded to the derived Input part.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+    /**
+     * Customises how an `options`-derived Item renders, given its highlight state.
+     * @default undefined — renders `option.label ?? option.value`.
+     */
+    renderOption?: ((option: MentionsOptionData, state: {
+        highlighted: boolean;
+    }) => React.ReactNode) | undefined;
+    /**
+     * Accessible name for the derived Input and for Content.
+     * @default undefined — falls back to `placeholder`.
+     */
+    'aria-label'?: string | undefined;
+}
+/** Props for {@link MentionsInput}, the textarea that keeps real DOM focus throughout. */
+export interface MentionsInputProps extends Omit<PrimitivePropsWithRef<'textarea'>, 'value' | 'defaultValue'> {
+}
+/** Props for {@link MentionsPortal}, which teleports the popup out of clipping ancestors. */
+export interface MentionsPortalProps extends PortalProps {
+    /**
+     * Mounts the popup even while closed, so an exit animation has something to play on.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+}
+/** Props for {@link MentionsContent}, the floating listbox anchored to the caret. */
+export interface MentionsContentProps extends PopperContentProps {
+    /**
+     * Keeps this popup mounted even while closed, instead of unmounting it.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+    /**
+     * Fires on Escape while open; `preventDefault()` keeps the popup open.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    /**
+     * Fires on pointer-down outside the popup and the field.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
+    /**
+     * Fires when focus moves outside the popup and the field.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
+    /**
+     * Fires before either outside handler above, with the same event object.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+}
+/** Props for a single {@link MentionsItem}, one mentionable entry inside Content. */
+export interface MentionsItemProps extends PrimitivePropsWithRef<'div'> {
+    /** Identifier published as `data-value` and carried on the value-change detail. */
+    value: string;
+    /**
+     * Which trigger character this entry belongs to, for a field addressing several collections.
+     * @default undefined — the first configured trigger.
+     */
+    trigger?: string | undefined;
+    /**
+     * Text the filter matches and the default `serialize` writes into the field.
+     * @default undefined — falls back to the entry's rendered text.
+     */
+    textValue?: string | undefined;
+    /**
+     * Excludes this entry from insertion and from pointer or keyboard highlight.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+/** Props for {@link MentionsEmpty}, shown when the active query matches no entry. */
+export interface MentionsEmptyProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/menu/Menu.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var Vt=Object.create;var X=Object.defineProperty;var Kt=Object.getOwnPropertyDescriptor;var _t=Object.getOwnPropertyNames;var Ht=Object.getPrototypeOf,Xt=Object.prototype.hasOwnProperty;var Ut=(e,t)=>{for(var a in t)X(e,a,{get:t[a],enumerable:!0})},we=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of _t(t))!Xt.call(e,n)&&n!==a&&X(e,n,{get:()=>t[n],enumerable:!(i=Kt(t,n))||i.enumerable});return e};var b=(e,t,a)=>(a=e!=null?Vt(Ht(e)):{},we(t||!e||!e.__esModule?X(a,"default",{value:e,enumerable:!0}):a,e)),Bt=e=>we(X({},"__esModule",{value:!0}),e);var $t={};Ut($t,{ITEM_SELECTOR:()=>J,ItemIndicatorContext:()=>N,LONG_PRESS_MOVE_TOLERANCE:()=>be,LONG_PRESS_MS:()=>he,Menu:()=>ve,MenuArrow:()=>Dt,MenuCheckboxItem:()=>$,MenuContent:()=>q,MenuFamilyContext:()=>f,MenuGroup:()=>Y,MenuItem:()=>B,MenuItemIndicator:()=>_,MenuLabel:()=>Q,MenuPortal:()=>Z,MenuProvider:()=>Lt,MenuRadioGroup:()=>te,MenuRadioGroupProvider:()=>mt,MenuRadioItem:()=>oe,MenuRoot:()=>Se,MenuSeparator:()=>ne,MenuShortcut:()=>H,MenuSub:()=>re,MenuSubContent:()=>ge,MenuSubTrigger:()=>xe,MenuTrigger:()=>ie,useMenuContext:()=>I,useMenuItem:()=>T,useMenuRadioGroupContext:()=>ye});module.exports=Bt($t);var h=b(require("react"),1),kt=require("../utils/createContext.cjs"),Nt=require("../utils/direction.cjs"),Et=require("../utils/dismissal.cjs"),Ot=require("../utils/part.cjs"),ue=require("../utils/popper.cjs"),wt=require("../utils/recipeAxis.cjs"),Tt=require("../utils/useControllableState.cjs"),At=require("../utils/useOpenChangeComplete.cjs"),Gt=require("../utils/useOutsideInert.cjs");var Ie=require("../utils/Glyph.cjs");var De=b(require("react"),1),Fe=require("../utils/part.cjs"),Ve=require("../utils/primitive.cjs");var U=b(require("react"),1),Te=require("../utils/part.cjs"),Ae=require("../utils/primitive.cjs"),Ge=require("../utils/useMenuItem.cjs");var Le=require("react/jsx-runtime"),N=U.createContext(!1);function T({disabled:e,textValue:t,onSelect:a,closeOnSelect:i,props:n}){let l=I("MenuItem");return(0,Ge.useMenuItem)({disabled:e,textValue:t,onSelect:a,closeOnSelect:i??l.closeOnSelect,onSelected:()=>{l.onOpenChange(!1),l.focusTrigger()},contentRef:l.contentRef,props:n})}var B=({as:e="div",disabled:t,textValue:a,onSelect:i,closeOnSelect:n,ref:l,...m})=>{let y=U.useContext(f),u=T({disabled:t,textValue:a,onSelect:i,closeOnSelect:n,props:m}),M=Ae.Primitive[e];return(0,Le.jsx)(M,{role:"menuitem",...m,...u,...(0,Te.skdxPart)(y,"item",m.className),ref:l})};B.displayName="MenuItem";var pe=require("react/jsx-runtime"),$=({checked:e=!1,onCheckedChange:t,disabled:a,textValue:i,onSelect:n,closeOnSelect:l=!1,ref:m,...y})=>{let u=De.useContext(f),M=T({disabled:a,textValue:i,onSelect:d=>{t?.(!e),n?.(d)},closeOnSelect:l,props:y});return(0,pe.jsx)(N.Provider,{value:e,children:(0,pe.jsx)(Ve.Primitive.div,{role:"menuitemcheckbox","aria-checked":e,"data-state":e?"checked":"unchecked",...y,...M,...(0,Fe.skdxPart)(u,"checkbox-item",y.className),ref:m})})};$.displayName="MenuCheckboxItem";var v=b(require("react"),1),le=require("../utils/appearance.cjs"),Ke=require("../utils/composeRefs.cjs"),_e=require("../utils/direction.cjs"),He=require("../utils/menuSub.cjs"),de=require("../utils/part.cjs"),Xe=require("../utils/popper.cjs"),z=require("../utils/primitive.cjs"),Ue=require("../utils/useBodyScrollLock.cjs"),Be=require("../utils/useDismiss.cjs"),$e=require("../utils/useOutsideInert.cjs"),Je=require("../utils/useRovingFocus.cjs");var fe=require("react/jsx-runtime"),q=({forceMount:e,loop:t=!0,onEscapeKeyDown:a,onPointerDownOutside:i,onFocusOutside:n,onInteractOutside:l,onCloseAutoFocus:m,side:y="bottom",align:u="start",sideOffset:M=4,collisionPadding:d=8,size:P,style:x,ref:r,...s})=>{let o=I("MenuContent"),g=v.useContext(f),k=o.openOn==="contextmenu",O=(0,Ke.useComposedRefs)(r,o.contentRef),{closeAutoFocusRef:L}=o;v.useInsertionEffect(()=>{L.current=m});let D=(0,Je.useRovingFocus)({orientation:"vertical",loop:t,itemSelector:J,typeahead:!0,includeDisabled:!0}),se=(0,_e.usePortalledDirection)(o.triggerRef),R=o.open&&o.modal;(0,$e.useOutsideInert)(o.contentRef,R),(0,Ue.useBodyScrollLock)(R);let C=v.useRef(!1),F=o.insideRefs??[],ce=()=>{o.onOpenChange(!1),C.current=!0,o.focusTrigger(),C.current=!1};(0,Be.useDismiss)({enabled:o.open,insideSelector:`[${He.MENU_BRANCH_ATTRIBUTE}]`,onEscapeKeyDown:c=>{a?.(c),c.defaultPrevented||ce()},onInteractOutside:c=>{C.current||l?.(c)},onPointerDownOutside:c=>{i?.(c),c.defaultPrevented||o.onOpenChange(!1)},onFocusOutside:c=>{C.current||(n?.(c),c.defaultPrevented||o.onOpenChange(!1))}},k?[o.contentRef,...F]:[o.contentRef,o.triggerRef,...F]),v.useLayoutEffect(()=>{if(!k||!o.open)return;let c=o.contentRef.current;if(!c)return;let{width:w,height:V}=c.getBoundingClientRect(),K=me=>typeof d=="number"?d:d[me]??0,Ee=(me,Oe,Ft)=>Math.max(Oe,Math.min(me,Math.max(Ft,Oe)));c.style.setProperty("left",`${Ee(o.point.x,K("left"),window.innerWidth-w-K("right"))}px`),c.style.setProperty("top",`${Ee(o.point.y,K("top"),window.innerHeight-V-K("bottom"))}px`)},[k,o.open,o.point,o.contentRef,d]),v.useEffect(()=>{if(!o.open)return;let c=requestAnimationFrame(()=>{let w=o.contentRef.current;if(!w||w.contains(document.activeElement))return;let V=w.querySelectorAll(J);((o.openIntentRef.current==="last"?V[V.length-1]:V[0])??w).focus({preventScroll:!0})});return()=>cancelAnimationFrame(c)},[o.open,o.contentRef,o.openIntentRef,o.openRequestId]);let ke=(0,z.useComposedEventHandlers)(s.onKeyDown,c=>{if(c.altKey&&c.key==="ArrowUp"){c.preventDefault(),ce();return}if(D(c),c.defaultPrevented){c.stopPropagation();return}c.key==="Tab"&&ce()});if(!e&&!o.open)return null;let Ne={role:"menu","aria-orientation":"vertical",dir:se,"aria-labelledby":s["aria-label"]===void 0?o.triggerId:void 0,id:o.contentId,"data-state":o.open?"open":"closed",tabIndex:-1};return k?(0,fe.jsx)(z.Primitive.div,{...Ne,...s,...(0,le.appearanceAttrs)({size:P},s),...(0,de.skdxPart)(g,"content",s.className),ref:O,style:{position:"fixed",top:o.point.y,left:o.point.x,...x},onKeyDown:ke}):(0,fe.jsx)(Xe.PopperContent,{component:g,...Ne,side:y,align:u,sideOffset:M,collisionPadding:d,...s,...(0,le.appearanceAttrs)({size:P},s),...(0,de.skdxPart)(g,"content",s.className),ref:O,style:x,onKeyDown:ke})};q.displayName="MenuContent";var ze=b(require("react"),1),W=require("../utils/menuGroup.cjs"),qe=require("../utils/part.cjs"),We=require("../utils/primitive.cjs");var Me=require("react/jsx-runtime"),Y=({ref:e,...t})=>{let a=ze.useContext(f),{labelId:i,context:n}=(0,W.useMenuGroupLabel)();return(0,Me.jsx)(W.MenuGroupProvider,{...n,children:(0,Me.jsx)(We.Primitive.div,{role:"group","aria-labelledby":t["aria-label"]===void 0?i:void 0,...t,...(0,qe.skdxPart)(a,"group",t.className),ref:e})})};Y.displayName="MenuGroup";var Re=b(require("react"),1),Ye=require("../utils/part.cjs"),Qe=require("../utils/primitive.cjs");var Ze=require("react/jsx-runtime"),_=({forceMount:e,ref:t,...a})=>{let i=Re.useContext(f),n=Re.useContext(N);return e||n?(0,Ze.jsx)(Qe.Primitive.span,{"data-state":n?"checked":"unchecked",...a,...(0,Ye.skdxPart)(i,"item-indicator",a.className),ref:t}):null};_.displayName="MenuItemIndicator";var je=b(require("react"),1),et=require("../utils/menuGroup.cjs"),tt=require("../utils/part.cjs"),ot=require("../utils/primitive.cjs");var nt=require("react/jsx-runtime"),Q=({ref:e,...t})=>{let a=je.useContext(f),i=(0,et.useMenuLabelId)();return(0,nt.jsx)(ot.Primitive.div,{id:i,...t,...(0,tt.skdxPart)(a,"label",t.className),ref:e})};Q.displayName="MenuLabel";var rt=require("../utils/portal.cjs");var at=require("react/jsx-runtime"),Z=({forceMount:e,children:t,...a})=>{let i=I("MenuPortal");return e||i.open?(0,at.jsx)(rt.Portal,{...a,children:t}):null};Z.displayName="MenuPortal";var it=b(require("react"),1),ut=require("../utils/createContext.cjs"),ee=require("../utils/menuGroup.cjs"),st=require("../utils/part.cjs"),ct=require("../utils/primitive.cjs");var j=require("react/jsx-runtime"),[mt,ye]=(0,ut.createSafeContext)("MenuRadioGroup"),te=({value:e,onValueChange:t,ref:a,...i})=>{let n=it.useContext(f),{labelId:l,context:m}=(0,ee.useMenuGroupLabel)();return(0,j.jsx)(mt,{value:e,onValueChange:t,children:(0,j.jsx)(ee.MenuGroupProvider,{...m,children:(0,j.jsx)(ct.Primitive.div,{role:"group","aria-labelledby":i["aria-label"]===void 0?l:void 0,...i,...(0,st.skdxPart)(n,"radio-group",i.className),ref:a})})})};te.displayName="MenuRadioGroup";var pt=b(require("react"),1),lt=require("../utils/part.cjs"),dt=require("../utils/primitive.cjs");var Pe=require("react/jsx-runtime"),oe=({value:e,disabled:t,textValue:a,onSelect:i,closeOnSelect:n,ref:l,...m})=>{let y=pt.useContext(f),u=ye("MenuRadioItem"),M=u.value===e,d=T({disabled:t,textValue:a,onSelect:P=>{u.onValueChange?.(e),i?.(P)},closeOnSelect:n,props:m});return(0,Pe.jsx)(N.Provider,{value:M,children:(0,Pe.jsx)(dt.Primitive.div,{role:"menuitemradio","aria-checked":M,"data-state":M?"checked":"unchecked",...m,...d,...(0,lt.skdxPart)(y,"radio-item",m.className),ref:l})})};oe.displayName="MenuRadioItem";var ft=b(require("react"),1),Mt=require("../utils/part.cjs"),Rt=require("../utils/primitive.cjs");var yt=require("react/jsx-runtime"),ne=({ref:e,...t})=>{let a=ft.useContext(f);return(0,yt.jsx)(Rt.Primitive.div,{role:"separator","aria-orientation":"horizontal",...t,...(0,Mt.skdxPart)(a,"separator",t.className),ref:e})};ne.displayName="MenuSeparator";var Pt=b(require("react"),1),xt=require("../utils/part.cjs"),gt=require("../utils/primitive.cjs");var Ct=require("react/jsx-runtime"),H=({ref:e,...t})=>{let a=Pt.useContext(f);return(0,Ct.jsx)(gt.Primitive.span,{"aria-hidden":"true",...t,...(0,xt.skdxPart)(a,"shortcut",t.className),ref:e})};H.displayName="MenuShortcut";var ht=b(require("react"),1),A=require("../utils/menuSub.cjs");var bt=require("react/jsx-runtime");function re(e){I("MenuSub");let t=ht.useContext(f);return(0,bt.jsx)(A.MenuSub,{family:t,...e})}re.displayName="MenuSub";var xe=A.MenuSubTrigger,ge=A.MenuSubContent;var E=b(require("react"),1),It=require("../utils/composeRefs.cjs"),Ce=require("../utils/part.cjs"),St=require("../utils/popper.cjs"),S=require("../utils/primitive.cjs");var ae=require("react/jsx-runtime"),ie=({disabled:e,style:t,ref:a,...i})=>{let n=I("MenuTrigger"),{openIntentRef:l,setPoint:m}=n,y=(0,It.useComposedRefs)(a,n.triggerRef),u=i,M=E.useRef(0),d=E.useRef(null),[P,x]=E.useState(!1),r=()=>{window.clearTimeout(M.current),d.current=null,x(!1)};E.useEffect(()=>()=>window.clearTimeout(M.current),[]);let s=(0,S.useComposedEventHandlers)(u.onContextMenu,R=>{e||n.openOn!=="contextmenu"||(R.preventDefault(),m({x:R.clientX,y:R.clientY}),n.onOpenChange(!0))}),o=(0,S.useComposedEventHandlers)(u.onPointerDown,R=>{if(e||n.openOn!=="contextmenu"||R.pointerType!=="touch")return;let{clientX:C,clientY:F}=R;d.current={x:C,y:F},x(!0),window.clearTimeout(M.current),M.current=window.setTimeout(()=>{d.current=null,x(!1),m({x:C,y:F}),n.onOpenChange(!0)},he)}),g=(0,S.useComposedEventHandlers)(u.onPointerMove,R=>{let C=d.current;C&&Math.hypot(R.clientX-C.x,R.clientY-C.y)>be&&r()}),k=(0,S.useComposedEventHandlers)(u.onPointerUp,r),O=(0,S.useComposedEventHandlers)(u.onPointerCancel,r),L=(0,S.useComposedEventHandlers)(i.onClick,()=>{e||(l.current="first",n.onOpenChange(!n.open))}),D=(0,S.useComposedEventHandlers)(i.onKeyDown,R=>{e||["ArrowDown","ArrowUp"].includes(R.key)&&(l.current=R.key==="ArrowUp"?"last":"first",R.preventDefault(),n.onOpenChange(!0))}),se=(0,S.composeEventHandlers)(u.onKeyDown,R=>{if(e||R.key!=="ContextMenu"&&!(R.key==="F10"&&R.shiftKey))return;R.preventDefault();let C=R.currentTarget.getBoundingClientRect();m({x:C.left,y:C.bottom}),n.onOpenChange(!0)});return n.openOn==="contextmenu"?(0,ae.jsx)(S.Primitive.div,{tabIndex:0,role:"group",id:n.triggerId,"aria-controls":n.open?n.contentId:void 0,"aria-owns":n.open?n.contentId:void 0,"data-state":n.open?"open":"closed","data-disabled":e?"":void 0,"aria-disabled":e||void 0,...u,...(0,Ce.skdxPart)("menu","trigger",i.className),ref:y,style:P?{touchAction:"none",...t}:t,onContextMenu:s,onPointerDown:o,onPointerMove:g,onPointerUp:k,onPointerCancel:O,onKeyDown:se}):(0,ae.jsx)(St.PopperAnchor,{asChild:!0,children:(0,ae.jsx)(S.Primitive.button,{type:"button",id:n.triggerId,"aria-haspopup":"menu","aria-expanded":n.open,"aria-controls":n.contentId,"data-state":n.open?"open":"closed","data-disabled":e?"":void 0,"aria-disabled":e||void 0,disabled:e,...i,...(0,Ce.skdxPart)("menu","trigger",i.className),ref:y,style:t,onClick:L,onKeyDown:D})})};ie.displayName="MenuTrigger";var p=require("react/jsx-runtime"),vt=({size:e,trigger:t,items:a=[],onSelect:i,side:n,align:l,renderItem:m,disabled:y,passThrough:u})=>{let{open:M,openOn:d}=I("MenuAnatomy"),P=r=>m?m(r):"label"in r?r.label:null,x=(r,s)=>{if(!("type"in r))return(0,p.jsxs)(B,{disabled:r.disabled,textValue:r.textValue??r.label,onSelect:()=>{r.onSelect?.(),i?.(r)},children:[P(r),r.shortcut?(0,p.jsx)(H,{children:r.shortcut}):null]},s);switch(r.type){case"separator":return(0,p.jsx)(ne,{},s);case"checkbox":return(0,p.jsxs)($,{checked:r.checked,onCheckedChange:r.onCheckedChange,disabled:r.disabled,textValue:r.textValue??r.label,onSelect:()=>i?.(r),children:[(0,p.jsx)(_,{"aria-hidden":"true",children:(0,p.jsx)(Ie.Glyph,{name:"check"})}),P(r),r.shortcut?(0,p.jsx)(H,{children:r.shortcut}):null]},s);case"radio-group":return(0,p.jsx)(te,{value:r.value,onValueChange:r.onValueChange,children:r.items.map(o=>(0,p.jsxs)(oe,{value:o.value,disabled:o.disabled,textValue:o.textValue??o.label,children:[(0,p.jsx)(_,{"aria-hidden":"true",children:(0,p.jsx)(Ie.Glyph,{name:"dot"})}),o.label]},o.value))},s);case"submenu":return(0,p.jsxs)(re,{children:[(0,p.jsx)(xe,{disabled:r.disabled,textValue:r.textValue??r.label,children:P(r)}),(0,p.jsx)(ge,{size:e,children:r.items.map((o,g)=>x(o,`${s}.${g}`))})]},s);case"group":return(0,p.jsxs)(Y,{children:[r.label?(0,p.jsx)(Q,{children:r.label}):null,r.items.map((o,g)=>x(o,`${s}.${g}`))]},s)}};return(0,p.jsxs)(p.Fragment,{children:[t?(0,p.jsx)(ie,{asChild:!0,disabled:y,...u?.id&&(d==="click"||M)?{"aria-controls":u.id,...d==="contextmenu"?{"aria-owns":u.id}:{}}:{},children:t}):null,(0,p.jsx)(Z,{children:(0,p.jsx)(q,{...u,size:e,side:n,align:l,children:a.map((r,s)=>x(r,String(s)))})})]})};var G=require("react/jsx-runtime"),J='[role^="menuitem"]',he=500,be=10,[Lt,I]=(0,kt.createSafeContext)("Menu"),f=h.createContext("menu");function Se({children:e,open:t,defaultOpen:a=!1,openOn:i="click",point:n,modal:l,closeOnSelect:m=!0,onOpenChange:y,onOpenChangeComplete:u}){let M=l??i==="click",d=h.useRef(null),P=h.useRef(null),x=h.useRef("first"),r=h.useRef(void 0),[s,o]=h.useState({x:0,y:0}),g=n??s,[k=!1,O]=(0,Tt.useControllableState)({prop:t,defaultProp:a,onChange:y});(0,At.useOpenChangeComplete)(k,P,u);let L=h.useCallback(()=>{M&&(0,Gt.releaseOutsideInert)(),(0,Et.autoFocusEvent)("close-auto-focus",r.current)&&d.current?.focus()},[M]),D=(0,Nt.usePortalledDirection)(d);return(0,G.jsx)(ue.PopperRoot,{children:(0,G.jsx)(Lt,{triggerRef:d,contentRef:P,contentId:h.useId(),triggerId:h.useId(),open:k,modal:M,closeOnSelect:m,openOn:i,point:g,setPoint:o,onOpenChange:O,openIntentRef:x,focusTrigger:L,closeAutoFocusRef:r,dir:D,children:e})})}Se.displayName="MenuRoot";function ve({open:e,defaultOpen:t,openOn:a,point:i,modal:n,closeOnSelect:l,onOpenChange:m,onOpenChangeComplete:y,trigger:u,items:M,onSelect:d,side:P,align:x,renderItem:r,disabled:s,size:o,...g}){return(0,G.jsx)(Se,{open:e,defaultOpen:t,openOn:a,point:i,modal:n,closeOnSelect:l,onOpenChange:m,onOpenChangeComplete:y,children:(0,G.jsx)(vt,{size:(0,wt.recipeAxis)(o,g,"data-size"),trigger:u,items:M,onSelect:d,side:P,align:x,renderItem:r,disabled:s,passThrough:g})})}ve.displayName="Menu";var Dt=({ref:e,...t})=>(0,G.jsx)(ue.PopperArrow,{...t,...(0,Ot.skdxPart)("menu","arrow",t.className),ref:e});Dt.displayName="MenuArrow";0&&(module.exports={ITEM_SELECTOR,ItemIndicatorContext,LONG_PRESS_MOVE_TOLERANCE,LONG_PRESS_MS,Menu,MenuArrow,MenuCheckboxItem,MenuContent,MenuFamilyContext,MenuGroup,MenuItem,MenuItemIndicator,MenuLabel,MenuPortal,MenuProvider,MenuRadioGroup,MenuRadioGroupProvider,MenuRadioItem,MenuRoot,MenuSeparator,MenuShortcut,MenuSub,MenuSubContent,MenuSubTrigger,MenuTrigger,useMenuContext,useMenuItem,useMenuRadioGroupContext});

package/dist/menu/Menu.d.cts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { MenuContextValue, MenuProps } from './types.cjs';
+/**
+ * @internal Every menu item (disabled included for keyboard discovery per APG).
+ */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]";
+/** @internal How long a touch pointer must stay down on a `contextmenu` trigger before the menu opens. */
+export declare const LONG_PRESS_MS = 500;
+/** @internal How far, in CSS pixels, a touch pointer may travel while the long-press timer is armed before it disarms. */
+export declare const LONG_PRESS_MOVE_TOLERANCE = 10;
+export declare const MenuProvider: React.FC<MenuContextValue & {
+    children: React.ReactNode;
+}>, useMenuContext: (consumerName: string) => MenuContextValue;
+/**
+ * @internal Class-name stem the menu parts publish, so the same parts serve a
+ * standalone menu and a menubar's menu without either owning a second copy.
+ */
+export declare const MenuFamilyContext: React.Context<"menu" | "menubar">;
+/** Props for {@link MenuRoot}: {@link MenuProps} minus the derived-anatomy-only props, plus the parts as `children`. */
+export type MenuRootProps = Omit<MenuProps, 'trigger' | 'items' | 'onSelect' | 'side' | 'align' | 'renderItem' | 'disabled'> & {
+    /**
+     * The trigger and portal — the menu's own DOM (content, items) is rendered
+     * by `MenuPortal` elsewhere.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode | undefined;
+};
+/**
+ * State/context root that owns open state and wraps `children` in a popper root, rendering no DOM element of its own.
+ */
+export declare function MenuRoot({ children, open: openProp, defaultOpen, openOn, point: pointProp, modal: modalProp, closeOnSelect, onOpenChange, onOpenChangeComplete, }: MenuRootProps): React.JSX.Element;
+export declare namespace MenuRoot {
+    var displayName: string;
+}
+/**
+ * A menu of actions opened by a trigger button — or, under `openOn="contextmenu"`, by right-clicking a region — positioned via floating-ui, with roving-focus/typeahead navigation, nested submenus and checkbox/radio items, deriving anatomy from `trigger` and `items`.
+ *
+ * @example
+ * ```tsx
+ * <Menu
+ *   trigger={<Button>Options</Button>}
+ *   items={[
+ *     { label: 'Edit', onSelect: edit, shortcut: '⌘E' },
+ *     { type: 'separator' },
+ *     { label: 'Delete', onSelect: remove, disabled: !canDelete },
+ *   ]}
+ * />
+ *
+ * <Menu
+ *   openOn="contextmenu"
+ *   trigger={<div className="canvas">Right-click this area</div>}
+ *   items={[{ label: 'Copy', onSelect: copy, shortcut: '⌘C' }]}
+ * />
+ * ```
+ */
+export declare function Menu({ open, defaultOpen, openOn, point, modal, closeOnSelect, onOpenChange, onOpenChangeComplete, trigger, items, onSelect, side, align, renderItem, disabled, size, ...rest }: MenuProps): React.JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
+/**
+ * Optional visual arrow pointing from `MenuContent` back at the trigger, self-positioning based on the resolved `side`.
+ *
+ * @example
+ * ```tsx
+ * <MenuContent>
+ *   <MenuItem>Edit</MenuItem>
+ *   <MenuArrow />
+ * </MenuContent>
+ * ```
+ */
+export declare const MenuArrow: {
+    ({ ref: forwardedRef, ...props }: PrimitivePropsWithRef<"span">): React.ReactNode;
+    displayName: string;
+};

package/dist/menu/Menu.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { MenuContextValue, MenuProps } from './types.js';
+/**
+ * @internal Every menu item (disabled included for keyboard discovery per APG).
+ */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]";
+/** @internal How long a touch pointer must stay down on a `contextmenu` trigger before the menu opens. */
+export declare const LONG_PRESS_MS = 500;
+/** @internal How far, in CSS pixels, a touch pointer may travel while the long-press timer is armed before it disarms. */
+export declare const LONG_PRESS_MOVE_TOLERANCE = 10;
+export declare const MenuProvider: React.FC<MenuContextValue & {
+    children: React.ReactNode;
+}>, useMenuContext: (consumerName: string) => MenuContextValue;
+/**
+ * @internal Class-name stem the menu parts publish, so the same parts serve a
+ * standalone menu and a menubar's menu without either owning a second copy.
+ */
+export declare const MenuFamilyContext: React.Context<"menu" | "menubar">;
+/** Props for {@link MenuRoot}: {@link MenuProps} minus the derived-anatomy-only props, plus the parts as `children`. */
+export type MenuRootProps = Omit<MenuProps, 'trigger' | 'items' | 'onSelect' | 'side' | 'align' | 'renderItem' | 'disabled'> & {
+    /**
+     * The trigger and portal — the menu's own DOM (content, items) is rendered
+     * by `MenuPortal` elsewhere.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode | undefined;
+};
+/**
+ * State/context root that owns open state and wraps `children` in a popper root, rendering no DOM element of its own.
+ */
+export declare function MenuRoot({ children, open: openProp, defaultOpen, openOn, point: pointProp, modal: modalProp, closeOnSelect, onOpenChange, onOpenChangeComplete, }: MenuRootProps): React.JSX.Element;
+export declare namespace MenuRoot {
+    var displayName: string;
+}
+/**
+ * A menu of actions opened by a trigger button — or, under `openOn="contextmenu"`, by right-clicking a region — positioned via floating-ui, with roving-focus/typeahead navigation, nested submenus and checkbox/radio items, deriving anatomy from `trigger` and `items`.
+ *
+ * @example
+ * ```tsx
+ * <Menu
+ *   trigger={<Button>Options</Button>}
+ *   items={[
+ *     { label: 'Edit', onSelect: edit, shortcut: '⌘E' },
+ *     { type: 'separator' },
+ *     { label: 'Delete', onSelect: remove, disabled: !canDelete },
+ *   ]}
+ * />
+ *
+ * <Menu
+ *   openOn="contextmenu"
+ *   trigger={<div className="canvas">Right-click this area</div>}
+ *   items={[{ label: 'Copy', onSelect: copy, shortcut: '⌘C' }]}
+ * />
+ * ```
+ */
+export declare function Menu({ open, defaultOpen, openOn, point, modal, closeOnSelect, onOpenChange, onOpenChangeComplete, trigger, items, onSelect, side, align, renderItem, disabled, size, ...rest }: MenuProps): React.JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
+/**
+ * Optional visual arrow pointing from `MenuContent` back at the trigger, self-positioning based on the resolved `side`.
+ *
+ * @example
+ * ```tsx
+ * <MenuContent>
+ *   <MenuItem>Edit</MenuItem>
+ *   <MenuArrow />
+ * </MenuContent>
+ * ```
+ */
+export declare const MenuArrow: {
+    ({ ref: forwardedRef, ...props }: PrimitivePropsWithRef<"span">): React.ReactNode;
+    displayName: string;
+};

package/dist/menu/Menu.js

@@ -0,0 +1,2 @@
+'use client';
+import*as h from"react";import{createSafeContext as At}from"../utils/createContext.js";import{usePortalledDirection as Gt}from"../utils/direction.js";import{autoFocusEvent as Lt}from"../utils/dismissal.js";import{skdxPart as Dt}from"../utils/part.js";import{PopperArrow as Ft,PopperRoot as Vt}from"../utils/popper.js";import{recipeAxis as Kt}from"../utils/recipeAxis.js";import{useControllableState as _t}from"../utils/useControllableState.js";import{useOpenChangeComplete as Ht}from"../utils/useOpenChangeComplete.js";import{releaseOutsideInert as Xt}from"../utils/useOutsideInert.js";import{Glyph as we}from"../utils/Glyph.js";import*as pe from"react";import{skdxPart as _e}from"../utils/part.js";import{Primitive as He}from"../utils/primitive.js";import*as K from"react";import{skdxPart as De}from"../utils/part.js";import{Primitive as Fe}from"../utils/primitive.js";import{useMenuItem as Ve}from"../utils/useMenuItem.js";import{jsx as Ke}from"react/jsx-runtime";var O=K.createContext(!1);function F({disabled:t,textValue:n,onSelect:i,closeOnSelect:a,props:r}){let p=b("MenuItem");return Ve({disabled:t,textValue:n,onSelect:i,closeOnSelect:a??p.closeOnSelect,onSelected:()=>{p.onOpenChange(!1),p.focusTrigger()},contentRef:p.contentRef,props:r})}var $=({as:t="div",disabled:n,textValue:i,onSelect:a,closeOnSelect:r,ref:p,...m})=>{let R=K.useContext(M),u=F({disabled:n,textValue:i,onSelect:a,closeOnSelect:r,props:m}),d=Fe[t];return Ke(d,{role:"menuitem",...m,...u,...De(R,"item",m.className),ref:p})};$.displayName="MenuItem";import{jsx as me}from"react/jsx-runtime";var J=({checked:t=!1,onCheckedChange:n,disabled:i,textValue:a,onSelect:r,closeOnSelect:p=!1,ref:m,...R})=>{let u=pe.useContext(M),d=F({disabled:i,textValue:a,onSelect:l=>{n?.(!t),r?.(l)},closeOnSelect:p,props:R});return me(O.Provider,{value:t,children:me(He.div,{role:"menuitemcheckbox","aria-checked":t,"data-state":t?"checked":"unchecked",...R,...d,..._e(u,"checkbox-item",R.className),ref:m})})};J.displayName="MenuCheckboxItem";import*as I from"react";import{appearanceAttrs as le}from"../utils/appearance.js";import{useComposedRefs as Xe}from"../utils/composeRefs.js";import{usePortalledDirection as Ue}from"../utils/direction.js";import{MENU_BRANCH_ATTRIBUTE as Be}from"../utils/menuSub.js";import{skdxPart as de}from"../utils/part.js";import{PopperContent as $e}from"../utils/popper.js";import{Primitive as Je,useComposedEventHandlers as ze}from"../utils/primitive.js";import{useBodyScrollLock as qe}from"../utils/useBodyScrollLock.js";import{useDismiss as We}from"../utils/useDismiss.js";import{useOutsideInert as Ye}from"../utils/useOutsideInert.js";import{useRovingFocus as Qe}from"../utils/useRovingFocus.js";import{jsx as fe}from"react/jsx-runtime";var q=({forceMount:t,loop:n=!0,onEscapeKeyDown:i,onPointerDownOutside:a,onFocusOutside:r,onInteractOutside:p,onCloseAutoFocus:m,side:R="bottom",align:u="start",sideOffset:d=4,collisionPadding:l=8,size:y,style:P,ref:o,...s})=>{let e=b("MenuContent"),x=I.useContext(M),S=e.openOn==="contextmenu",N=Xe(o,e.contentRef),{closeAutoFocusRef:T}=e;I.useInsertionEffect(()=>{T.current=m});let A=Qe({orientation:"vertical",loop:n,itemSelector:z,typeahead:!0,includeDisabled:!0}),X=Ue(e.triggerRef),f=e.open&&e.modal;Ye(e.contentRef,f),qe(f);let g=I.useRef(!1),G=e.insideRefs??[],U=()=>{e.onOpenChange(!1),g.current=!0,e.focusTrigger(),g.current=!1};We({enabled:e.open,insideSelector:`[${Be}]`,onEscapeKeyDown:c=>{i?.(c),c.defaultPrevented||U()},onInteractOutside:c=>{g.current||p?.(c)},onPointerDownOutside:c=>{a?.(c),c.defaultPrevented||e.onOpenChange(!1)},onFocusOutside:c=>{g.current||(r?.(c),c.defaultPrevented||e.onOpenChange(!1))}},S?[e.contentRef,...G]:[e.contentRef,e.triggerRef,...G]),I.useLayoutEffect(()=>{if(!S||!e.open)return;let c=e.contentRef.current;if(!c)return;let{width:E,height:L}=c.getBoundingClientRect(),D=B=>typeof l=="number"?l:l[B]??0,se=(B,ce,Le)=>Math.max(ce,Math.min(B,Math.max(Le,ce)));c.style.setProperty("left",`${se(e.point.x,D("left"),window.innerWidth-E-D("right"))}px`),c.style.setProperty("top",`${se(e.point.y,D("top"),window.innerHeight-L-D("bottom"))}px`)},[S,e.open,e.point,e.contentRef,l]),I.useEffect(()=>{if(!e.open)return;let c=requestAnimationFrame(()=>{let E=e.contentRef.current;if(!E||E.contains(document.activeElement))return;let L=E.querySelectorAll(z);((e.openIntentRef.current==="last"?L[L.length-1]:L[0])??E).focus({preventScroll:!0})});return()=>cancelAnimationFrame(c)},[e.open,e.contentRef,e.openIntentRef,e.openRequestId]);let ie=ze(s.onKeyDown,c=>{if(c.altKey&&c.key==="ArrowUp"){c.preventDefault(),U();return}if(A(c),c.defaultPrevented){c.stopPropagation();return}c.key==="Tab"&&U()});if(!t&&!e.open)return null;let ue={role:"menu","aria-orientation":"vertical",dir:X,"aria-labelledby":s["aria-label"]===void 0?e.triggerId:void 0,id:e.contentId,"data-state":e.open?"open":"closed",tabIndex:-1};return S?fe(Je.div,{...ue,...s,...le({size:y},s),...de(x,"content",s.className),ref:N,style:{position:"fixed",top:e.point.y,left:e.point.x,...P},onKeyDown:ie}):fe($e,{component:x,...ue,side:R,align:u,sideOffset:d,collisionPadding:l,...s,...le({size:y},s),...de(x,"content",s.className),ref:N,style:P,onKeyDown:ie})};q.displayName="MenuContent";import*as Re from"react";import{MenuGroupProvider as Ze,useMenuGroupLabel as je}from"../utils/menuGroup.js";import{skdxPart as et}from"../utils/part.js";import{Primitive as tt}from"../utils/primitive.js";import{jsx as Me}from"react/jsx-runtime";var W=({ref:t,...n})=>{let i=Re.useContext(M),{labelId:a,context:r}=je();return Me(Ze,{...r,children:Me(tt.div,{role:"group","aria-labelledby":n["aria-label"]===void 0?a:void 0,...n,...et(i,"group",n.className),ref:t})})};W.displayName="MenuGroup";import*as Y from"react";import{skdxPart as ot}from"../utils/part.js";import{Primitive as nt}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var _=({forceMount:t,ref:n,...i})=>{let a=Y.useContext(M),r=Y.useContext(O);return t||r?rt(nt.span,{"data-state":r?"checked":"unchecked",...i,...ot(a,"item-indicator",i.className),ref:n}):null};_.displayName="MenuItemIndicator";import*as ye from"react";import{useMenuLabelId as at}from"../utils/menuGroup.js";import{skdxPart as it}from"../utils/part.js";import{Primitive as ut}from"../utils/primitive.js";import{jsx as st}from"react/jsx-runtime";var Q=({ref:t,...n})=>{let i=ye.useContext(M),a=at();return st(ut.div,{id:a,...n,...it(i,"label",n.className),ref:t})};Q.displayName="MenuLabel";import{Portal as ct}from"../utils/portal.js";import{jsx as mt}from"react/jsx-runtime";var Z=({forceMount:t,children:n,...i})=>{let a=b("MenuPortal");return t||a.open?mt(ct,{...i,children:n}):null};Z.displayName="MenuPortal";import*as Pe from"react";import{createSafeContext as pt}from"../utils/createContext.js";import{MenuGroupProvider as lt,useMenuGroupLabel as dt}from"../utils/menuGroup.js";import{skdxPart as ft}from"../utils/part.js";import{Primitive as Mt}from"../utils/primitive.js";import{jsx as j}from"react/jsx-runtime";var[Rt,xe]=pt("MenuRadioGroup"),ee=({value:t,onValueChange:n,ref:i,...a})=>{let r=Pe.useContext(M),{labelId:p,context:m}=dt();return j(Rt,{value:t,onValueChange:n,children:j(lt,{...m,children:j(Mt.div,{role:"group","aria-labelledby":a["aria-label"]===void 0?p:void 0,...a,...ft(r,"radio-group",a.className),ref:i})})})};ee.displayName="MenuRadioGroup";import*as Ce from"react";import{skdxPart as yt}from"../utils/part.js";import{Primitive as Pt}from"../utils/primitive.js";import{jsx as ge}from"react/jsx-runtime";var te=({value:t,disabled:n,textValue:i,onSelect:a,closeOnSelect:r,ref:p,...m})=>{let R=Ce.useContext(M),u=xe("MenuRadioItem"),d=u.value===t,l=F({disabled:n,textValue:i,onSelect:y=>{u.onValueChange?.(t),a?.(y)},closeOnSelect:r,props:m});return ge(O.Provider,{value:d,children:ge(Pt.div,{role:"menuitemradio","aria-checked":d,"data-state":d?"checked":"unchecked",...m,...l,...yt(R,"radio-item",m.className),ref:p})})};te.displayName="MenuRadioItem";import*as he from"react";import{skdxPart as xt}from"../utils/part.js";import{Primitive as gt}from"../utils/primitive.js";import{jsx as Ct}from"react/jsx-runtime";var oe=({ref:t,...n})=>{let i=he.useContext(M);return Ct(gt.div,{role:"separator","aria-orientation":"horizontal",...n,...xt(i,"separator",n.className),ref:t})};oe.displayName="MenuSeparator";import*as be from"react";import{skdxPart as ht}from"../utils/part.js";import{Primitive as bt}from"../utils/primitive.js";import{jsx as It}from"react/jsx-runtime";var H=({ref:t,...n})=>{let i=be.useContext(M);return It(bt.span,{"aria-hidden":"true",...n,...ht(i,"shortcut",n.className),ref:t})};H.displayName="MenuShortcut";import*as Ie from"react";import{MenuSub as St,MenuSubContent as vt,MenuSubTrigger as kt}from"../utils/menuSub.js";import{jsx as Nt}from"react/jsx-runtime";function ne(t){b("MenuSub");let n=Ie.useContext(M);return Nt(St,{family:n,...t})}ne.displayName="MenuSub";var Se=kt,ve=vt;import*as k from"react";import{useComposedRefs as Et}from"../utils/composeRefs.js";import{skdxPart as ke}from"../utils/part.js";import{PopperAnchor as Ot}from"../utils/popper.js";import{composeEventHandlers as wt,Primitive as Ne,useComposedEventHandlers as v}from"../utils/primitive.js";import{jsx as re}from"react/jsx-runtime";var ae=({disabled:t,style:n,ref:i,...a})=>{let r=b("MenuTrigger"),{openIntentRef:p,setPoint:m}=r,R=Et(i,r.triggerRef),u=a,d=k.useRef(0),l=k.useRef(null),[y,P]=k.useState(!1),o=()=>{window.clearTimeout(d.current),l.current=null,P(!1)};k.useEffect(()=>()=>window.clearTimeout(d.current),[]);let s=v(u.onContextMenu,f=>{t||r.openOn!=="contextmenu"||(f.preventDefault(),m({x:f.clientX,y:f.clientY}),r.onOpenChange(!0))}),e=v(u.onPointerDown,f=>{if(t||r.openOn!=="contextmenu"||f.pointerType!=="touch")return;let{clientX:g,clientY:G}=f;l.current={x:g,y:G},P(!0),window.clearTimeout(d.current),d.current=window.setTimeout(()=>{l.current=null,P(!1),m({x:g,y:G}),r.onOpenChange(!0)},Ee)}),x=v(u.onPointerMove,f=>{let g=l.current;g&&Math.hypot(f.clientX-g.x,f.clientY-g.y)>Oe&&o()}),S=v(u.onPointerUp,o),N=v(u.onPointerCancel,o),T=v(a.onClick,()=>{t||(p.current="first",r.onOpenChange(!r.open))}),A=v(a.onKeyDown,f=>{t||["ArrowDown","ArrowUp"].includes(f.key)&&(p.current=f.key==="ArrowUp"?"last":"first",f.preventDefault(),r.onOpenChange(!0))}),X=wt(u.onKeyDown,f=>{if(t||f.key!=="ContextMenu"&&!(f.key==="F10"&&f.shiftKey))return;f.preventDefault();let g=f.currentTarget.getBoundingClientRect();m({x:g.left,y:g.bottom}),r.onOpenChange(!0)});return r.openOn==="contextmenu"?re(Ne.div,{tabIndex:0,role:"group",id:r.triggerId,"aria-controls":r.open?r.contentId:void 0,"aria-owns":r.open?r.contentId:void 0,"data-state":r.open?"open":"closed","data-disabled":t?"":void 0,"aria-disabled":t||void 0,...u,...ke("menu","trigger",a.className),ref:R,style:y?{touchAction:"none",...n}:n,onContextMenu:s,onPointerDown:e,onPointerMove:x,onPointerUp:S,onPointerCancel:N,onKeyDown:X}):re(Ot,{asChild:!0,children:re(Ne.button,{type:"button",id:r.triggerId,"aria-haspopup":"menu","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed","data-disabled":t?"":void 0,"aria-disabled":t||void 0,disabled:t,...a,...ke("menu","trigger",a.className),ref:R,style:n,onClick:T,onKeyDown:A})})};ae.displayName="MenuTrigger";import{Fragment as Tt,jsx as C,jsxs as w}from"react/jsx-runtime";var Te=({size:t,trigger:n,items:i=[],onSelect:a,side:r,align:p,renderItem:m,disabled:R,passThrough:u})=>{let{open:d,openOn:l}=b("MenuAnatomy"),y=o=>m?m(o):"label"in o?o.label:null,P=(o,s)=>{if(!("type"in o))return w($,{disabled:o.disabled,textValue:o.textValue??o.label,onSelect:()=>{o.onSelect?.(),a?.(o)},children:[y(o),o.shortcut?C(H,{children:o.shortcut}):null]},s);switch(o.type){case"separator":return C(oe,{},s);case"checkbox":return w(J,{checked:o.checked,onCheckedChange:o.onCheckedChange,disabled:o.disabled,textValue:o.textValue??o.label,onSelect:()=>a?.(o),children:[C(_,{"aria-hidden":"true",children:C(we,{name:"check"})}),y(o),o.shortcut?C(H,{children:o.shortcut}):null]},s);case"radio-group":return C(ee,{value:o.value,onValueChange:o.onValueChange,children:o.items.map(e=>w(te,{value:e.value,disabled:e.disabled,textValue:e.textValue??e.label,children:[C(_,{"aria-hidden":"true",children:C(we,{name:"dot"})}),e.label]},e.value))},s);case"submenu":return w(ne,{children:[C(Se,{disabled:o.disabled,textValue:o.textValue??o.label,children:y(o)}),C(ve,{size:t,children:o.items.map((e,x)=>P(e,`${s}.${x}`))})]},s);case"group":return w(W,{children:[o.label?C(Q,{children:o.label}):null,o.items.map((e,x)=>P(e,`${s}.${x}`))]},s)}};return w(Tt,{children:[n?C(ae,{asChild:!0,disabled:R,...u?.id&&(l==="click"||d)?{"aria-controls":u.id,...l==="contextmenu"?{"aria-owns":u.id}:{}}:{},children:n}):null,C(Z,{children:C(q,{...u,size:t,side:r,align:p,children:i.map((o,s)=>P(o,String(s)))})})]})};import{jsx as V}from"react/jsx-runtime";var z='[role^="menuitem"]',Ee=500,Oe=10,[Ut,b]=At("Menu"),M=h.createContext("menu");function Ae({children:t,open:n,defaultOpen:i=!1,openOn:a="click",point:r,modal:p,closeOnSelect:m=!0,onOpenChange:R,onOpenChangeComplete:u}){let d=p??a==="click",l=h.useRef(null),y=h.useRef(null),P=h.useRef("first"),o=h.useRef(void 0),[s,e]=h.useState({x:0,y:0}),x=r??s,[S=!1,N]=_t({prop:n,defaultProp:i,onChange:R});Ht(S,y,u);let T=h.useCallback(()=>{d&&Xt(),Lt("close-auto-focus",o.current)&&l.current?.focus()},[d]),A=Gt(l);return V(Vt,{children:V(Ut,{triggerRef:l,contentRef:y,contentId:h.useId(),triggerId:h.useId(),open:S,modal:d,closeOnSelect:m,openOn:a,point:x,setPoint:e,onOpenChange:N,openIntentRef:P,focusTrigger:T,closeAutoFocusRef:o,dir:A,children:t})})}Ae.displayName="MenuRoot";function Ge({open:t,defaultOpen:n,openOn:i,point:a,modal:r,closeOnSelect:p,onOpenChange:m,onOpenChangeComplete:R,trigger:u,items:d,onSelect:l,side:y,align:P,renderItem:o,disabled:s,size:e,...x}){return V(Ae,{open:t,defaultOpen:n,openOn:i,point:a,modal:r,closeOnSelect:p,onOpenChange:m,onOpenChangeComplete:R,children:V(Te,{size:Kt(e,x,"data-size"),trigger:u,items:d,onSelect:l,side:y,align:P,renderItem:o,disabled:s,passThrough:x})})}Ge.displayName="Menu";var Bt=({ref:t,...n})=>V(Ft,{...n,...Dt("menu","arrow",n.className),ref:t});Bt.displayName="MenuArrow";export{z as ITEM_SELECTOR,O as ItemIndicatorContext,Oe as LONG_PRESS_MOVE_TOLERANCE,Ee as LONG_PRESS_MS,Ge as Menu,Bt as MenuArrow,J as MenuCheckboxItem,q as MenuContent,M as MenuFamilyContext,W as MenuGroup,$ as MenuItem,_ as MenuItemIndicator,Q as MenuLabel,Z as MenuPortal,Ut as MenuProvider,ee as MenuRadioGroup,Rt as MenuRadioGroupProvider,te as MenuRadioItem,Ae as MenuRoot,oe as MenuSeparator,H as MenuShortcut,ne as MenuSub,ve as MenuSubContent,Se as MenuSubTrigger,ae as MenuTrigger,b as useMenuContext,F as useMenuItem,xe as useMenuRadioGroupContext};

package/dist/menu/MenuAnatomy.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { Align, Side } from '../utils/popper.cjs';
+import type { MenuContentProps, MenuEntry } from './types.cjs';
+/**
+ * Default {@link Menu} anatomy: trigger (via `asChild`), portal, and panel rendering `items` recursively through submenus.
+ *
+ * @internal
+ */
+export declare const MenuAnatomy: ({ size, trigger, items, onSelect, side, align, renderItem, disabled, passThrough, }: {
+    size?: MenuContentProps["size"] | undefined;
+    trigger?: React.ReactElement | undefined;
+    items?: MenuEntry[] | undefined;
+    onSelect?: ((item: MenuEntry) => void) | undefined;
+    side?: Side | undefined;
+    align?: Align | undefined;
+    renderItem?: ((item: MenuEntry) => React.ReactNode) | undefined;
+    disabled?: boolean | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/menu/MenuAnatomy.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { Align, Side } from '../utils/popper.js';
+import type { MenuContentProps, MenuEntry } from './types.js';
+/**
+ * Default {@link Menu} anatomy: trigger (via `asChild`), portal, and panel rendering `items` recursively through submenus.
+ *
+ * @internal
+ */
+export declare const MenuAnatomy: ({ size, trigger, items, onSelect, side, align, renderItem, disabled, passThrough, }: {
+    size?: MenuContentProps["size"] | undefined;
+    trigger?: React.ReactElement | undefined;
+    items?: MenuEntry[] | undefined;
+    onSelect?: ((item: MenuEntry) => void) | undefined;
+    side?: Side | undefined;
+    align?: Align | undefined;
+    renderItem?: ((item: MenuEntry) => React.ReactNode) | undefined;
+    disabled?: boolean | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;