neba 1.16.0 → 1.16.1

package/dist/components/menu/Menu.d.ts

@@ -56,7 +56,7 @@ export interface MenuProps extends MenuSurfaceProps {
     /** The rows. */
     children?: React.ReactNode;
 }
-export interface ContextMenuProps extends MenuSurfaceProps {
+export interface ContextMenuProps extends MenuSurfaceProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'content' | 'children' | 'className' | 'style'> {
     /** The rows, exactly as they are written inside a `Menu`. */
     content: React.ReactNode;
     /**
@@ -65,6 +65,11 @@ export interface ContextMenuProps extends MenuSurfaceProps {
      *
      * Base UI's Trigger merges itself onto it rather than wrapping it, so the
      * menu adds no element to the layout and the area stays whatever it was.
+     *
+     * A `Tooltip` on the same area goes _outside_ this rather than inside it. A
+     * popup component describes its own popup with the props it is given, so it
+     * is not something another trigger can merge onto; this one passes on what it
+     * is handed, which is what lets it be the inner of the two.
      */
     children: React.ReactElement;
     open?: boolean;

package/dist/components/menu/Menu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowClasses as a,spotlightSlot as s,trackPointer as o}from"../../internal/glow.js";import{Menu as r}from"@base-ui/react/menu";import{useDirection as i}from"@base-ui/react/direction-provider";import{ContextMenu as c}from"@base-ui/react/context-menu";import{MenuContext as d}from"../../internal/menu.js";import{CheckIcon as u,ChevronIcon as m,DotIcon as p}from"../../internal/icons.js";import{safeHref as h,safeRel as f}from"../../internal/link.js";import{controlTextLeadingClasses as x,cx as b,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as v,popupFadeClasses as C,radiusClasses as k,surfaceClasses as z,surfaceSlots as O,transitionClasses as M}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const I=[z,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",C].join(" "),P={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},j={xs:k.xs,sm:k.xs,md:k.sm,lg:k.sm,xl:k.md};function $(e,n,t,l,s){return b("relative flex w-full cursor-pointer items-center select-none",l?a:"",t?"text-(--n-on-tint)":"text-(--neba-fg)",P[n][e],j[e],g[e],x[e],M,N,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",s??"")}const R="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function RowBody({children:t,description:l,size:a}){return y(l)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`truncate text-(--neba-muted-fg) ${v[a]}`,children:l})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:t})}export function MenuItem({onClick:a,href:i,target:c,rel:u,startIcon:m,endIcon:p,shortcut:x,description:b,color:g,closeOnClick:N=!0,disabled:C=!1,label:k,children:z,className:M,style:w}){const I=l.useContext(d),{size:P,density:j}=I,B=n(t,{children:[y(m)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:m}):null,e(RowBody,{description:b,size:P,children:z}),y(p)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:p}):null,y(x)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[P]}`,children:x}):null]}),F={...g?O(g,0):void 0,...s,...w},G=h(i);return void 0===G||C?e(r.Item,{disabled:C,label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!C),children:B}):e(r.LinkItem,{href:G,target:c,rel:f(c,u),label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!0),children:B})}export function MenuCheckboxItem({checked:t,defaultChecked:a,onCheckedChange:i,endIcon:c,shortcut:m,description:p,color:h,closeOnClick:f=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:k,density:z}=l.useContext(d),M=h?O(h,0):void 0;return n(r.CheckboxItem,{checked:t,defaultChecked:a,onCheckedChange:e=>i?.(e),disabled:x,label:b,closeOnClick:f,className:$(k,z,Boolean(h),!x,N),style:{...M,...s,...C},onPointerMove:o(void 0,!x),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(u,{})})}),e(RowBody,{description:p,size:k,children:g}),y(c)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:c}):null,y(m)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[k]}`,children:m}):null]})}export function MenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:a=!1,children:s,className:o}){return e(r.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:a,className:o,children:s})}export function MenuRadioItem({value:t,endIcon:a,shortcut:i,description:c,color:u,closeOnClick:m=!1,disabled:h=!1,label:f,children:x,className:b,style:g}){const{size:N,density:C}=l.useContext(d),k=u?O(u,0):void 0;return n(r.RadioItem,{value:t,disabled:h,label:f,closeOnClick:m,className:$(N,C,Boolean(u),!h,b),style:{...k,...s,...g},onPointerMove:o(void 0,!h),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:c,size:N,children:x}),y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,y(i)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[N]}`,children:i}):null]})}export function MenuGroup({label:t,children:a,className:s}){const{size:o,density:i}=l.useContext(d);return n(r.Group,{className:s,children:[y(t)?e(r.GroupLabel,{className:[P[i][o],v[o],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:t}):null,a]})}export function MenuSeparator({className:n,...t}){return e(r.Separator,{className:b("-mx-1 my-1 h-px bg-(--n-line)",n??""),...t})}export function MenuSubmenu({label:t,startIcon:a,disabled:c=!1,side:u,sideOffset:p=4,children:h,className:f,style:g}){const N=l.useContext(d),{size:v,density:C,color:z}=N,M=i();return n(r.SubmenuRoot,{children:[n(r.SubmenuTrigger,{disabled:c,className:$(v,C,!1,!c),style:s,onPointerMove:o(void 0,!c),children:[y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:t}),e("span",{className:`${R} text-(--neba-muted-fg) ${"rtl"===M?"rotate-90":"-rotate-90"}`,children:e(m,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:u??"inline-end",sideOffset:p,align:"start",children:e(r.Popup,{className:b(I,k[v],x[v],f??""),style:{...O(z,3),...g},children:h})})})]})}export function Menu(t){const{size:a="md",color:s="primary",density:o="default",trigger:i,open:c,defaultOpen:u,onOpenChange:m,side:p="bottom",align:h="start",sideOffset:f=6,modal:g,openOnHover:y=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:z,children:M}=w(t,["size","density"]),P=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:P,children:n(r.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:g,loopFocus:N,disabled:v,children:[i?e(r.Trigger,{render:i,openOnHover:y,disabled:v}):null,e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:p,align:h,sideOffset:f,children:e(r.Popup,{className:b(I,k[a],x[a],C??""),style:{...O(s,3),...z},children:M})})})]})})}export function ContextMenu(t){const{size:a="md",color:s="primary",density:o="default",content:r,children:i,open:u,defaultOpen:m,onOpenChange:p,loopFocus:h=!0,disabled:f=!1,className:g,style:y}=w(t,["size","density"]),N=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:N,children:n(c.Root,{open:u,defaultOpen:m,onOpenChange:e=>p?.(e),loopFocus:h,disabled:f,children:[e(c.Trigger,{render:i}),e(c.Portal,{children:e(c.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",children:e(c.Popup,{className:b(I,k[a],x[a],g??""),style:{...O(s,3),...y},children:r})})})]})})}
+"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowClasses as a,spotlightSlot as s,trackPointer as o}from"../../internal/glow.js";import{Menu as r}from"@base-ui/react/menu";import{useDirection as i}from"@base-ui/react/direction-provider";import{ContextMenu as c}from"@base-ui/react/context-menu";import{MenuContext as d}from"../../internal/menu.js";import{CheckIcon as u,ChevronIcon as m,DotIcon as p}from"../../internal/icons.js";import{safeHref as h,safeRel as f}from"../../internal/link.js";import{controlTextLeadingClasses as x,cx as b,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as v,popupFadeClasses as C,radiusClasses as k,surfaceClasses as z,surfaceSlots as O,transitionClasses as M}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const I=[z,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",C].join(" "),P={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},j={xs:k.xs,sm:k.xs,md:k.sm,lg:k.sm,xl:k.md};function $(e,n,t,l,s){return b("relative flex w-full cursor-pointer items-center select-none",l?a:"",t?"text-(--n-on-tint)":"text-(--neba-fg)",P[n][e],j[e],g[e],x[e],M,N,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",s??"")}const R="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function RowBody({children:t,description:l,size:a}){return y(l)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`truncate text-(--neba-muted-fg) ${v[a]}`,children:l})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:t})}export function MenuItem({onClick:a,href:i,target:c,rel:u,startIcon:m,endIcon:p,shortcut:x,description:b,color:g,closeOnClick:N=!0,disabled:C=!1,label:k,children:z,className:M,style:w}){const I=l.useContext(d),{size:P,density:j}=I,B=n(t,{children:[y(m)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:m}):null,e(RowBody,{description:b,size:P,children:z}),y(p)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:p}):null,y(x)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[P]}`,children:x}):null]}),F={...g?O(g,0):void 0,...s,...w},G=h(i);return void 0===G||C?e(r.Item,{disabled:C,label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!C),children:B}):e(r.LinkItem,{href:G,target:c,rel:f(c,u),label:k,closeOnClick:N,onClick:a,className:$(P,j,Boolean(g),!C,M),style:F,onPointerMove:o(void 0,!0),children:B})}export function MenuCheckboxItem({checked:t,defaultChecked:a,onCheckedChange:i,endIcon:c,shortcut:m,description:p,color:h,closeOnClick:f=!1,disabled:x=!1,label:b,children:g,className:N,style:C}){const{size:k,density:z}=l.useContext(d),M=h?O(h,0):void 0;return n(r.CheckboxItem,{checked:t,defaultChecked:a,onCheckedChange:e=>i?.(e),disabled:x,label:b,closeOnClick:f,className:$(k,z,Boolean(h),!x,N),style:{...M,...s,...C},onPointerMove:o(void 0,!x),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(u,{})})}),e(RowBody,{description:p,size:k,children:g}),y(c)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:c}):null,y(m)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[k]}`,children:m}):null]})}export function MenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:a=!1,children:s,className:o}){return e(r.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:a,className:o,children:s})}export function MenuRadioItem({value:t,endIcon:a,shortcut:i,description:c,color:u,closeOnClick:m=!1,disabled:h=!1,label:f,children:x,className:b,style:g}){const{size:N,density:C}=l.useContext(d),k=u?O(u,0):void 0;return n(r.RadioItem,{value:t,disabled:h,label:f,closeOnClick:m,className:$(N,C,Boolean(u),!h,b),style:{...k,...s,...g},onPointerMove:o(void 0,!h),children:[e("span",{className:`${R} text-(--n-accent)`,children:e(r.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:c,size:N,children:x}),y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,y(i)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${v[N]}`,children:i}):null]})}export function MenuGroup({label:t,children:a,className:s}){const{size:o,density:i}=l.useContext(d);return n(r.Group,{className:s,children:[y(t)?e(r.GroupLabel,{className:[P[i][o],v[o],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:t}):null,a]})}export function MenuSeparator({className:n,...t}){return e(r.Separator,{className:b("-mx-1 my-1 h-px bg-(--n-line)",n??""),...t})}export function MenuSubmenu({label:t,startIcon:a,disabled:c=!1,side:u,sideOffset:p=4,children:h,className:f,style:g}){const N=l.useContext(d),{size:v,density:C,color:z}=N,M=i();return n(r.SubmenuRoot,{children:[n(r.SubmenuTrigger,{disabled:c,className:$(v,C,!1,!c),style:s,onPointerMove:o(void 0,!c),children:[y(a)?e("span",{className:`${R} text-(--neba-muted-fg)`,children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:t}),e("span",{className:`${R} text-(--neba-muted-fg) ${"rtl"===M?"rotate-90":"-rotate-90"}`,children:e(m,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:u??"inline-end",sideOffset:p,align:"start",children:e(r.Popup,{className:b(I,k[v],x[v],f??""),style:{...O(z,3),...g},children:h})})})]})}export function Menu(t){const{size:a="md",color:s="primary",density:o="default",trigger:i,open:c,defaultOpen:u,onOpenChange:m,side:p="bottom",align:h="start",sideOffset:f=6,modal:g,openOnHover:y=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:z,children:M}=w(t,["size","density"]),P=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:P,children:n(r.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:g,loopFocus:N,disabled:v,children:[i?e(r.Trigger,{render:i,openOnHover:y,disabled:v}):null,e(r.Portal,{children:e(r.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:p,align:h,sideOffset:f,children:e(r.Popup,{className:b(I,k[a],x[a],C??""),style:{...O(s,3),...z},children:M})})})]})})}export function ContextMenu(t){const{size:a="md",color:s="primary",density:o="default",content:r,children:i,open:u,defaultOpen:m,onOpenChange:p,loopFocus:h=!0,disabled:f=!1,className:g,style:y,...N}=w(t,["size","density"]),v=l.useMemo(()=>({size:a,color:s,density:o}),[a,s,o]);return e(d.Provider,{value:v,children:n(c.Root,{open:u,defaultOpen:m,onOpenChange:e=>p?.(e),loopFocus:h,disabled:f,children:[e(c.Trigger,{render:i,...N}),e(c.Portal,{children:e(c.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",children:e(c.Popup,{className:b(I,k[a],x[a],g??""),style:{...O(s,3),...y},children:r})})})]})})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neba",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "A comprehensive React UI component library — buttons, fields, menus, dialogs, tables and much more — accessible and themeable, sharing one prop vocabulary and a translucent acrylic design language. ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",