@adecore/ui 0.53.3 → 0.54.1

package/dist/SplitButton.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
-import { useState } from 'react';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
 import { splitFrameClass, splitHalfClass } from './button-class.js';
 import { Icon } from "./Icon.js";
 import { MenuPopup, MenuRoot, MenuTrigger } from "./menu/parts.js";

package/dist/Surface.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 const FLOAT = 'border border-border bg-[color-mix(in_srgb,var(--surface-raised)_88%,transparent)] shadow-float backdrop-blur-[14px]';
 /*
  * The glass card that floats over the content under it: a dock, a banner, a toast, a find bar, a

package/dist/Switch.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import clsx from 'clsx';
 /* On or off, as a switch rather than a checkbox: a setting that takes effect the moment it flips. */
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Switch(t0) {

package/dist/TextMenu.js

@@ -1,12 +1,12 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef, useState } from 'react';
 import { Copy, Scan } from 'lucide-react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { copyText } from './clipboard.js';
 import { Icon } from "./Icon.js";
 import { Kbd } from "./Kbd.js";
-import { mergeRefs } from './merge-refs.js';
 import { ContextMenuRoot, ContextMenuTrigger, MenuItem, MenuPopup, MenuSeparator } from "./menu/parts.js";
+import { mergeRefs } from './merge-refs.js';
 import { isApplePlatform } from './platform.js';
 import { selectAllWithin, selectionWithin } from './selection.js';
 import { EDIT_SHORTCUTS, matchesShortcut } from './shortcut.js';

package/dist/Toasts.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { useState } from 'react';
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";

package/dist/Tooltip.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import type { Shortcut } from './shortcut.ts';
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 export declare function TooltipProvider({ children }: {

package/dist/Tooltip.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import 'react';
 import { Kbd } from "./Kbd.js";
 import { registerShortcutHint } from './shortcut-hints.js';
 /* One provider per app. Tooltips share a delay, so moving along a row of buttons feels instant. `UIProvider` mounts it. */

package/dist/UIProvider.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
 import type { i18n as I18n } from 'i18next';
+import { type ReactNode } from 'react';
 import { type FormatSource } from './format/locale.ts';
 export interface UIProviderProps {
     i18n: I18n;

package/dist/Waveform.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef } from 'react';
 import clsx from 'clsx';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatClockDuration } from './format/duration.js';
 import { mergeRefs } from './merge-refs.js';

package/dist/Wipe.js

@@ -1,9 +1,9 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef } from 'react';
 import clsx from 'clsx';
 import { ChevronsLeftRight } from 'lucide-react';
-import { Icon } from "./Icon.js";
+import { useRef } from 'react';
 import { formatPercent } from './format/number.js';
+import { Icon } from "./Icon.js";
 import { mergeRefs } from './merge-refs.js';
 import { splitAt, splitForKey } from './wipe-split.js';
 /* It fills the positioned element it sits in. A plain line handle is dragged anywhere along its height. */

package/dist/combobox/parts.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import { Autocomplete } from '@base-ui/react/autocomplete';
+import type { LucideIcon } from 'lucide-react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type PlacementKey } from '../placement.ts';
 import type { Shortcut } from '../shortcut.ts';
 export declare const ComboboxRoot: typeof Autocomplete.Root;
@@ -13,7 +13,7 @@ export type ComboboxInputProps = Omit<ComponentProps<typeof Autocomplete.Input>,
 export declare function ComboboxInput({ size, mono, icon, className, id, ...props }: ComboboxInputProps): import("react").JSX.Element;
 type Placement = Pick<ComponentProps<typeof Autocomplete.Positioner>, PlacementKey>;
 export type ComboboxPopupProps = ComponentProps<typeof Autocomplete.Popup> & Placement;
-export declare function ComboboxPopup({ side, align, sideOffset, className, ...props }: ComboboxPopupProps): import("react").JSX.Element;
+export declare function ComboboxPopup({ side, align, sideOffset, className, ref, ...props }: ComboboxPopupProps): import("react").JSX.Element;
 export declare function ComboboxList(props: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
 export type ComboboxItemProps = ComponentProps<typeof Autocomplete.Item> & {
     icon?: ReactNode;

package/dist/combobox/parts.js

@@ -1,14 +1,17 @@
 import { c as _c } from "react/compiler-runtime";
+import { Autocomplete } from '@base-ui/react/autocomplete';
 import clsx from 'clsx';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Autocomplete } from '@base-ui/react/autocomplete';
 import { withClass } from '../class-name.js';
 import { fieldControlProps, useFieldControl } from '../field-context.js';
 import { Icon } from "../Icon.js";
 import { Kbd } from "../Kbd.js";
 import { MENU_LABEL } from "../menu/parts.js";
+import { mergeRefs } from '../merge-refs.js';
 import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
+import { useOverlayScrollbars } from "../useOverlayScrollbars.js";
 /* It takes no room while it has nothing to say. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
@@ -172,9 +175,10 @@ export function ComboboxInput(t0) {
   return t15;
 }
 export function ComboboxPopup(t0) {
-  const $ = _c(17);
+  const $ = _c(22);
   let align;
   let className;
+  let ref;
   let side;
   let sideOffset;
   let t1;
@@ -184,9 +188,11 @@ export function ComboboxPopup(t0) {
       align: t3,
       sideOffset: t4,
       className: t5,
+      ref: t6,
       ...props
     } = t0;
     className = t5;
+    ref = t6;
     side = t2 === undefined ? "bottom" : t2;
     align = t3 === undefined ? "start" : t3;
     sideOffset = t4 === undefined ? 6 : t4;
@@ -194,60 +200,75 @@ export function ComboboxPopup(t0) {
     $[0] = t0;
     $[1] = align;
     $[2] = className;
-    $[3] = side;
-    $[4] = sideOffset;
-    $[5] = t1;
+    $[3] = ref;
+    $[4] = side;
+    $[5] = sideOffset;
+    $[6] = t1;
   } else {
     align = $[1];
     className = $[2];
-    side = $[3];
-    sideOffset = $[4];
-    t1 = $[5];
+    ref = $[3];
+    side = $[4];
+    sideOffset = $[5];
+    t1 = $[6];
   }
   const [placement, popupProps] = t1;
+  const [popup, setPopup] = useState(null);
+  const scrollbars = useOverlayScrollbars(popup);
   let t2;
-  if ($[6] !== className) {
-    t2 = withClass("menu-popup min-w-(--anchor-width)", className);
-    $[6] = className;
-    $[7] = t2;
+  if ($[7] !== ref) {
+    t2 = mergeRefs(setPopup, ref);
+    $[7] = ref;
+    $[8] = t2;
   } else {
-    t2 = $[7];
+    t2 = $[8];
   }
   let t3;
-  if ($[8] !== popupProps || $[9] !== t2) {
-    t3 = /*#__PURE__*/_jsx(Autocomplete.Popup, {
-      className: t2,
-      ...popupProps
-    });
-    $[8] = popupProps;
-    $[9] = t2;
+  if ($[9] !== className) {
+    t3 = withClass("menu-popup min-w-(--anchor-width)", className);
+    $[9] = className;
     $[10] = t3;
   } else {
     t3 = $[10];
   }
   let t4;
-  if ($[11] !== align || $[12] !== placement || $[13] !== side || $[14] !== sideOffset || $[15] !== t3) {
-    t4 = /*#__PURE__*/_jsx(Autocomplete.Portal, {
-      children: /*#__PURE__*/_jsx(Autocomplete.Positioner, {
+  if ($[11] !== popupProps || $[12] !== t2 || $[13] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Autocomplete.Popup, {
+      ref: t2,
+      className: t3,
+      ...popupProps
+    });
+    $[11] = popupProps;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== align || $[16] !== placement || $[17] !== scrollbars || $[18] !== side || $[19] !== sideOffset || $[20] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Autocomplete.Portal, {
+      children: /*#__PURE__*/_jsxs(Autocomplete.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         ...placement,
         side: side,
         align: align,
         sideOffset: sideOffset,
-        children: t3
+        children: [t4, scrollbars]
       })
     });
-    $[11] = align;
-    $[12] = placement;
-    $[13] = side;
-    $[14] = sideOffset;
-    $[15] = t3;
-    $[16] = t4;
+    $[15] = align;
+    $[16] = placement;
+    $[17] = scrollbars;
+    $[18] = side;
+    $[19] = sideOffset;
+    $[20] = t4;
+    $[21] = t5;
   } else {
-    t4 = $[16];
+    t5 = $[21];
   }
-  return t4;
+  return t5;
 }
 export function ComboboxList(props) {
   const $ = _c(5);

package/dist/command-palette/parts.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentProps, type ReactNode } from 'react';
 import { Autocomplete } from '@base-ui/react/autocomplete';
 import { useRender } from '@base-ui/react/use-render';
+import { type ComponentProps, type ReactNode } from 'react';
 import { DialogRoot, type DialogPopupProps } from '../dialog/parts.tsx';
 declare const SIZE: {
     readonly md: 'w-[576px]';

package/dist/command-palette/parts.js

@@ -1,17 +1,18 @@
 import { c as _c } from "react/compiler-runtime";
-import { useContext, useLayoutEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
+import { useContext, useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Autocomplete } from '@base-ui/react/autocomplete';
-import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.js';
 import { DialogPopup, DialogRoot } from "../dialog/parts.js";
 import { Icon } from "../Icon.js";
 import { Kbd } from "../Kbd.js";
 import { mergeRefs } from '../merge-refs.js';
 import { KEY_SHORTCUTS } from '../shortcut.js';
+import { useOverlayScrollbars } from "../useOverlayScrollbars.js";
 import { PaletteRefsContext } from './context.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NO_ITEMS = [];
@@ -306,7 +307,7 @@ export function CommandPaletteInput(t0) {
 }
 /* It scrolls on its own, so the field and the footer stay put. */
 export function CommandPaletteList(t0) {
-  const $ = _c(21);
+  const $ = _c(24);
   let className;
   let onFocus;
   let props;
@@ -333,10 +334,12 @@ export function CommandPaletteList(t0) {
     t
   } = useTranslation("ui");
   const refs = useContext(PaletteRefsContext);
+  const [list, setList] = useState(null);
+  const scrollbars = useOverlayScrollbars(list);
   const t1 = refs?.list;
   let t2;
   if ($[5] !== ref || $[6] !== t1) {
-    t2 = mergeRefs(ref, t1);
+    t2 = mergeRefs(ref, t1, setList);
     $[5] = ref;
     $[6] = t1;
     $[7] = t2;
@@ -396,7 +399,19 @@ export function CommandPaletteList(t0) {
   } else {
     t6 = $[20];
   }
-  return t6;
+  let t7;
+  if ($[21] !== scrollbars || $[22] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      className: "relative flex min-h-0 flex-col",
+      children: [t6, scrollbars]
+    });
+    $[21] = scrollbars;
+    $[22] = t6;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  return t7;
 }
 export function CommandPaletteFooter(t0) {
   const $ = _c(14);

package/dist/command-palette/virtual.js

@@ -1,10 +1,10 @@
-import { Fragment, useLayoutEffect, useMemo, useRef } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { Autocomplete } from '@base-ui/react/autocomplete';
-import { CommandPaletteList } from "./parts.js";
-import { useCommandPaletteVirtualScroll } from './context.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Fragment, useLayoutEffect, useMemo, useRef } from 'react';
 import { MENU_LABEL } from "../menu/parts.js";
 import { mergeRefs } from '../merge-refs.js';
+import { useCommandPaletteVirtualScroll } from './context.js';
+import { CommandPaletteList } from "./parts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function virtualRowsOf(values, labelled) {
   const groups = [];

package/dist/dialog/parts.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentProps } from 'react';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { useRender } from '@base-ui/react/use-render';
+import { type ComponentProps } from 'react';
 declare const SIZE: {
     readonly sm: 'w-[420px] p-5';
 };

package/dist/dialog/parts.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { createContext, useContext, useState } from 'react';
-import clsx from 'clsx';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { createContext, useContext, useState } from 'react';
 import { withClass } from '../class-name.js';
 import { useDialogLayer } from '../dialog-layer.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/file-icon.d.ts

@@ -2,5 +2,7 @@ import { type FileTreeIconConfig } from '@pierre/trees';
 export declare const FILE_TREE_ICONS: FileTreeIconConfig;
 export declare const fileIconFor: (path: string) => string;
 export declare function setFileIconOverride(next: ((path: string) => string | null) | null): void;
+export declare function subscribeFileIconOverride(onChange: () => void): () => void;
+export declare const fileIconOverrideVersion: () => number;
 export declare function fileIconOverrideFor(path: string): string | null;
 export declare const mountFileIconSprite: () => void;

package/dist/file-icon.js

@@ -25,10 +25,22 @@ const resolveIcon = (...args) => {
  */
 export const fileIconFor = path => resolveIcon('file-tree-icon-file', path).name;
 let override = null;
+let overrideVersion = 0;
+const overrideListeners = new Set();
 /* What an app knows better about a file's icon: the address of an svg, or null for the icon this set has. */
 export function setFileIconOverride(next) {
   override = next;
+  overrideVersion++;
+  overrideListeners.forEach(listener => listener());
 }
+export function subscribeFileIconOverride(onChange) {
+  overrideListeners.add(onChange);
+  return () => {
+    overrideListeners.delete(onChange);
+  };
+}
+/* A mounted icon reads this so it draws again once the override changes. */
+export const fileIconOverrideVersion = () => overrideVersion;
 export function fileIconOverrideFor(path) {
   return override?.(path) ?? null;
 }

package/dist/file-tree/parts.d.ts

@@ -1,8 +1,8 @@
-import { type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactNode } from 'react';
 import type { FileTreeEmptyLabel } from './empty-lines.ts';
 import { type FileTreeDecorationOrder } from './use-slots.ts';
 export type FileTreeRootProps = useRender.ComponentProps<'div'> & {

package/dist/file-tree/parts.js

@@ -1,10 +1,10 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
 import { useRender } from '@base-ui/react/use-render';
 import { FileTree as PierreFileTree } from '@pierre/trees/react';
-import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 import { Icon } from "../Icon.js";
 import { mergeRefs } from '../merge-refs.js';
 import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.js';

package/dist/file-tree/use-file-tree-shift.d.ts

@@ -1,5 +1,5 @@
-import { type ReactElement } from 'react';
 import type { FileTree } from '@pierre/trees';
+import { type ReactElement } from 'react';
 export declare function useFileTreeShift(model: FileTree, resetKey?: string): {
     attach(node: HTMLElement | null): void;
     bar: ReactElement;

package/dist/file-tree/use-file-tree-shift.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import 'react';
-import { useTreeShift } from "../tree/use-tree-shift.js";
 import { shiftNeed } from '../tree/shift.js';
+import { useTreeShift } from "../tree/use-tree-shift.js";
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
 function boxesOf(element) {
   return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap(child => boxesOf(child));

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export { Pill, type PillProps } from './Pill.tsx';
 export { PromptDialog, type PromptDialogProps } from './PromptDialog.tsx';
 export { RelativeTime, type RelativeTimeProps } from './RelativeTime.tsx';
 export { ProjectSwitcher, ProjectSwitcherGroups, type ProjectSwitcherItem, type ProjectSwitcherProps } from './ProjectSwitcher.tsx';
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea.tsx';
 export { SectionLabel, type SectionLabelProps } from './SectionLabel.tsx';
 export { SegmentBar, type SegmentBarPart, type SegmentBarProps } from './SegmentBar.tsx';
 export { Segmented, type SegmentedOption, type SegmentedProps } from './Segmented.tsx';
@@ -92,6 +93,7 @@ export { clampColumnSize, useColumnResize, type ColumnEdge, type ColumnResize, t
 export { useContentSize, type ContentSize } from './useContentSize.ts';
 export { useMeasuredWidth } from './useMeasuredWidth.ts';
 export { useNow, useTickingText } from './useNow.ts';
+export { useOverlayScrollbars, type OverlayScrollbarsOptions, type ScrollAreaAxis } from './useOverlayScrollbars.tsx';
 export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
 export type { FileTreeRootProps } from './file-tree/parts.tsx';
 export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';

package/dist/index.js

@@ -45,6 +45,7 @@ export { Pill } from "./Pill.js";
 export { PromptDialog } from "./PromptDialog.js";
 export { RelativeTime } from "./RelativeTime.js";
 export { ProjectSwitcher, ProjectSwitcherGroups } from "./ProjectSwitcher.js";
+export { ScrollArea } from "./ScrollArea.js";
 export { SectionLabel } from "./SectionLabel.js";
 export { SegmentBar } from "./SegmentBar.js";
 export { Segmented } from "./Segmented.js";
@@ -86,6 +87,7 @@ export { clampColumnSize, useColumnResize } from './useColumnResize.js';
 export { useContentSize } from './useContentSize.js';
 export { useMeasuredWidth } from './useMeasuredWidth.js';
 export { useNow, useTickingText } from './useNow.js';
+export { useOverlayScrollbars } from "./useOverlayScrollbars.js";
 export { useFileTree } from './file-tree/use-file-tree.js';
 export { Workspace } from "./workspace/Workspace.js";
 export { WorkspaceRail, WorkspaceRailSeparator, WorkspaceRailSpacer } from "./workspace/WorkspaceRail.js";

package/dist/key-value-list/parts.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 /* Every item is a subgrid of the list, so the names line up across rows and a hairline runs under both columns. */
 export function KeyValueListRoot(t0) {
   const $ = _c(16);

package/dist/menu/parts.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentProps, type ReactNode, type Ref } from 'react';
-import { type LucideIcon } from 'lucide-react';
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
 import { useRender } from '@base-ui/react/use-render';
+import { type LucideIcon } from 'lucide-react';
+import { type ComponentProps, type ReactNode, type Ref } from 'react';
 import { type PlacementKey } from '../placement.ts';
 type PositionerProps = ComponentProps<typeof BaseMenu.Positioner>;
 type Placement = Pick<PositionerProps, PlacementKey>;
@@ -14,7 +14,7 @@ export declare function MenuSubmenuRoot(props: ComponentProps<typeof BaseMenu.Su
 export declare const MenuTrigger: BaseMenu.Trigger;
 export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
-export declare function MenuPopup({ className, ...props }: MenuPopupProps): import("react").JSX.Element;
+export declare function MenuPopup({ className, ref, ...props }: MenuPopupProps): import("react").JSX.Element;
 type ItemLook = {
     unstyled?: boolean;
 };