@edgeandnode/eds-react 1.0.2 → 1.1.1

package/dist/components/LocalTheme.d.ts

@@ -1,16 +1,29 @@
-import type { ComponentProps, ElementType } from 'react';
-export interface LocalThemeProps extends ComponentProps<'div'> {
-    /** @default 'div' */
-    as?: ElementType | undefined;
+import type { DistributedOmit } from 'type-fest';
+import { type ResolvedTheme } from '../EDSContext.ts';
+import { type AsOrRenderProps, type HTMLElementProps } from './base/Render.tsx';
+export declare namespace LocalThemeProps {
+    interface CommonProps extends HTMLElementProps {
+        /** The theme to render the content in. */
+        theme: ResolvedTheme;
+    }
 }
+export type LocalThemeProps = LocalThemeProps.CommonProps & AsOrRenderProps;
+export type DarkProps = DistributedOmit<LocalThemeProps, 'theme'>;
+export type LightProps = DistributedOmit<LocalThemeProps, 'theme'>;
+/**
+ * Renders its content in the given theme, whatever the page's theme is. Unlike switching between
+ * `Dark` and `Light`, changing `theme` doesn't remount the content. Components that need to know
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
+ */
+export declare function LocalTheme({ theme, ...props }: LocalThemeProps): import("react").JSX.Element;
 /**
  * Renders its content in the dark theme, whatever the page's theme is. Components that need to know
- * the theme in JavaScript can read it with `useEDS().localTheme`.
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
  */
-export declare function Dark(props: LocalThemeProps): import("react").JSX.Element;
+export declare function Dark(props: DarkProps): import("react").JSX.Element;
 /**
  * Renders its content in the light theme, whatever the page's theme is. Components that need to
- * know the theme in JavaScript can read it with `useEDS().localTheme`.
+ * know the theme in JavaScript can read it with `useEDS().activeTheme`.
  */
-export declare function Light(props: LocalThemeProps): import("react").JSX.Element;
+export declare function Light(props: LightProps): import("react").JSX.Element;
 //# sourceMappingURL=LocalTheme.d.ts.map

package/dist/components/LocalTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalTheme.d.ts","sourceRoot":"","sources":["../../src/components/LocalTheme.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAKxD,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC5D,qBAAqB;IACrB,EAAE,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;CAC7B;AAcD;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,eAAe,+BAE1C;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,eAAe,+BAE3C"}
+{"version":3,"file":"LocalTheme.d.ts","sourceRoot":"","sources":["../../src/components/LocalTheme.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAEhD,OAAO,EAAoC,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACvF,OAAO,EAAU,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEvF,MAAM,CAAC,OAAO,WAAW,eAAe,CAAC;IACvC,UAAU,WAAY,SAAQ,gBAAgB;QAC5C,0CAA0C;QAC1C,KAAK,EAAE,aAAa,CAAA;KACrB;CACF;AAED,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC,WAAW,GAAG,eAAe,CAAA;AAC3E,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;AACjE,MAAM,MAAM,UAAU,GAAG,eAAe,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;AAElE;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAM9D;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,+BAEpC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC"}

package/dist/components/LocalTheme.js

@@ -2,19 +2,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { mergeProps } from '@base-ui/react';
 import { LocalThemeContext, THEME_CLASSES } from '../EDSContext.js';
-function LocalTheme({ theme, as: Element = 'div', ...props }) {
-    return (_jsx(LocalThemeContext.Provider, { value: theme, children: _jsx(Element, { ...mergeProps({ className: THEME_CLASSES[theme] }, props) }) }));
+import { Render } from './base/Render.js';
+/**
+ * Renders its content in the given theme, whatever the page's theme is. Unlike switching between
+ * `Dark` and `Light`, changing `theme` doesn't remount the content. Components that need to know
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
+ */
+export function LocalTheme({ theme, ...props }) {
+    return (_jsx(LocalThemeContext.Provider, { value: theme, children: _jsx(Render, { ...mergeProps({ className: THEME_CLASSES[theme] }, props) }) }));
 }
 /**
  * Renders its content in the dark theme, whatever the page's theme is. Components that need to know
- * the theme in JavaScript can read it with `useEDS().localTheme`.
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
  */
 export function Dark(props) {
     return _jsx(LocalTheme, { theme: "dark", ...props });
 }
 /**
  * Renders its content in the light theme, whatever the page's theme is. Components that need to
- * know the theme in JavaScript can read it with `useEDS().localTheme`.
+ * know the theme in JavaScript can read it with `useEDS().activeTheme`.
  */
 export function Light(props) {
     return _jsx(LocalTheme, { theme: "light", ...props });

package/dist/components/LocalTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalTheme.js","sourceRoot":"","sources":["../../src/components/LocalTheme.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAA;AAOvF,SAAS,UAAU,CAAC,EAClB,KAAK,EACL,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,GAAG,KAAK,EACmC;IAC3C,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACtC,KAAC,OAAO,OAAK,UAAU,CAAC,EAAE,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,GAAI,GAC5C,CAC9B,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,IAAI,CAAC,KAAsB;IACzC,OAAO,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,KAAK,KAAK,GAAI,CAAA;AAC/C,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAC,KAAsB;IAC1C,OAAO,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,KAAK,KAAK,GAAI,CAAA;AAChD,CAAC"}
+{"version":3,"file":"LocalTheme.js","sourceRoot":"","sources":["../../src/components/LocalTheme.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAA;AACvF,OAAO,EAAE,MAAM,EAA+C,MAAM,kBAAmB,CAAA;AAavF;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAmB;IAC7D,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACtC,KAAC,MAAM,OAAK,UAAU,CAAC,EAAE,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,GAAI,GAC3C,CAC9B,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,OAAO,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,KAAK,KAAK,GAAI,CAAA;AAC/C,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,OAAO,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,KAAK,KAAK,GAAI,CAAA;AAChD,CAAC"}

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

@@ -71,6 +71,36 @@ export declare namespace MenuProps {
          * @default false
          */
         highlightCheckedOnOpen?: boolean | undefined;
+        /**
+         * Adds `Menu.Search` to the header and filters items by their text (or `label`) as the user
+         * types. A custom `header` must include `Menu.Search`, which handles the keyboard navigation.
+         * Pass a function to customize matching, or `'manual'` to filter the items yourself (e.g.
+         * results from an API). Defaults to `true` if `searchValue` or `onSearchValueChange` is set.
+         */
+        searchable?: boolean | ((item: {
+            label: string;
+            searchValue: string;
+        }) => boolean) | 'manual' | undefined;
+        /** The search query, to control it along with `onSearchValueChange`. */
+        searchValue?: string | undefined;
+        /**
+         * Called when the search query changes, including when it's reset after the menu closes (then
+         * `eventDetails.reason` is `'popup-close'`).
+         */
+        onSearchValueChange?: ((searchValue: string, eventDetails: Menu.FilterProvider.ChangeEventDetails) => void) | undefined;
+        /**
+         * Shown in a searchable menu when no item matches. A string is rendered in a `Menu.Empty`, and
+         * `null` renders nothing.
+         *
+         * @default <Menu.Empty />
+         */
+        empty?: ReactNode | undefined;
+        /**
+         * Marks the items as loading (e.g. search results from an API). In a searchable menu, a
+         * `LoadingIcon` also shows in the search input, or in place of the empty state until a search
+         * finishes.
+         */
+        loading?: boolean | undefined;
     }
     interface CommonProps extends HTMLProps, OwnProps, EDSComponentProps<typeof MenuMeta> {
     }
@@ -80,7 +110,7 @@ export declare namespace MenuProps {
     }
 }
 export type MenuProps<T extends OptionValue = OptionValue> = MenuProps.NonRadioProps | MenuProps.RadioProps<T>;
-export declare function MenuRoot<T extends OptionValue>({ ref: passedRef, trigger, triggerMode, anchor: passedAnchor, side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight, open: controlledOpen, defaultOpen, onOpenChange, header, footer, highlightCheckedOnOpen, label, type, value, defaultValue, onValueChange, children, ...props }: MenuProps<T>): import("react").JSX.Element;
+export declare function MenuRoot<T extends OptionValue>({ ref: passedRef, trigger, triggerMode, anchor: passedAnchor, side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight, open: controlledOpen, defaultOpen, onOpenChange, header: passedHeader, footer, highlightCheckedOnOpen, searchable: passedSearchable, searchValue, onSearchValueChange, empty, loading, label, type, value, defaultValue, onValueChange, children, ...props }: MenuProps<T>): import("react").JSX.Element;
 export declare namespace MenuRoot {
     var displayName: string;
 }
@@ -101,6 +131,11 @@ export declare namespace MenuItemProps {
     interface HTMLProps extends Omit<ComponentProps<'button'>, 'defaultChecked' | 'defaultValue' | 'onChange' | 'type' | 'value'> {
     }
     interface OwnProps {
+        /**
+         * Text that search and typeahead match against. Defaults to the item's rendered text, addons
+         * included.
+         */
+        label?: string | undefined;
         addonBefore?: AddonValue | undefined;
         addonAfter?: AddonValue | undefined;
         disabled?: boolean | undefined;
@@ -142,26 +177,25 @@ export declare namespace MenuItemProps {
     }
 }
 export type MenuItemProps<T extends OptionValue = OptionValue> = MenuItemProps.PlainProps | MenuItemProps.CheckboxProps | MenuItemProps.RadioProps<T>;
-export declare function MenuItem<T extends OptionValue>({ ref: passedRef, type: passedType, addonBefore: passedAddonBefore, addonAfter: passedAddonAfter, variant, loading, href, target, checked, defaultChecked, onCheckedChange, value: passedValue, disabled: passedDisabled, children, ...props }: MenuItemProps<T>): import("react").JSX.Element;
+export declare function MenuItem<T extends OptionValue>({ ref: passedRef, type: passedType, label, addonBefore: passedAddonBefore, addonAfter: passedAddonAfter, variant, loading, href, target, checked, defaultChecked, onCheckedChange, value: passedValue, disabled: passedDisabled, children, ...props }: MenuItemProps<T>): import("react").JSX.Element;
 export declare namespace MenuItem {
     var displayName: string;
 }
-export interface MenuSearchProps extends Omit<ComponentProps<'input'>, 'children'> {
+export interface MenuSearchProps extends Omit<ComponentProps<'input'>, 'children' | 'value' | 'defaultValue'> {
     /** @default 'Search' */
     placeholder?: string | undefined;
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    onValueChange?: ((value: string) => void) | undefined;
 }
-export declare function MenuSearch({ ref: passedRef, placeholder: passedPlaceholder, value: controlledValue, defaultValue, onValueChange, ...props }: MenuSearchProps): import("react").JSX.Element;
+/** Search input for the `header` of a `searchable` menu, which filters its items. */
+export declare function MenuSearch({ placeholder, ...props }: MenuSearchProps): import("react").JSX.Element;
 export declare namespace MenuSearch {
     var displayName: string;
 }
 export interface MenuEmptyProps extends ComponentProps<'div'> {
 }
 /**
- * Renders the standard empty-state treatment for a `Menu` (typically shown when search filters
- * yield no results, or when a `Menu` has no items at all). Defaults to `"No results"`.
+ * Renders the standard empty-state treatment for a `Menu`, e.g. when it has no items. Searchable
+ * menus render it when no item matches (see `empty`). Its text wraps instead of widening the menu.
+ * Defaults to `"No results"`.
  */
 export declare function MenuEmpty({ children, ...props }: MenuEmptyProps): import("react").JSX.Element;
 export declare namespace MenuEmpty {

package/dist/components/Menu.parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.parts.d.ts","sourceRoot":"","sources":["../../src/components/Menu.parts.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Menu.parts.d.ts","sourceRoot":"","sources":["../../src/components/Menu.parts.tsx"],"names":[],"mappings":"AAEA,OAAO,EASL,KAAK,cAAc,EAGnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,IAAI,EAAwB,MAAM,qBAAqB,CAAA;AAIhE,OAAO,EAAU,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAkBrE,OAAO,EAAyC,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC3F,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE9E,OAAO,EAEL,KAAK,gBAAgB,EAErB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAM5D,KAAK,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;AAElD,OAAO,WAAW,UAAU,CAAC;IAC3B,UAAU,WAAW;QACnB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;KAC9B;IACD,UAAU,aAAc,SAAQ,WAAW;QACzC,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,SAAS,CAAA;QACjD,KAAK,CAAC,EAAE,SAAS,CAAA;QACjB,YAAY,CAAC,EAAE,SAAS,CAAA;QACxB,aAAa,CAAC,EAAE,SAAS,CAAA;KAC1B;IACD,UAAU,UAAU,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,WAAW;QAC7D,IAAI,EAAE,OAAO,CAAA;QACb,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;QACrB,YAAY,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;QAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;KACjD;CACF;AAED,MAAM,CAAC,OAAO,WAAW,SAAS,CAAC;IACjC,UAAU,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;KAAG;IACvF,UAAU,QAAQ;QAChB;;;;;WAKG;QACH,OAAO,CAAC,EACJ,UAAU,CAAC;YACT,IAAI,EAAE,OAAO,CAAA;YACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;YAChC,QAAQ,EAAE,MAAM,IAAI,CAAA;YACpB;;;eAGG;YACH,QAAQ,EAAE,gBAAgB,CAAA;SAC3B,CAAC,GACF,SAAS,CAAA;QACb;;;;;;;;;WASG;QACH,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,CAAA;QAC3D,4EAA4E;QAC5E,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAA;QACrE,iFAAiF;QACjF,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC1B,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QACjC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;QACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;QAC9B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;QAC9B;;;;;;WAMG;QACH,sBAAsB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC5C;;;;;WAKG;QACH,UAAU,CAAC,EACP,OAAO,GACP,CAAC,CAAC,IAAI,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC,GAC3D,QAAQ,GACR,SAAS,CAAA;QACb,wEAAwE;QACxE,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QAChC;;;WAGG;QACH,mBAAmB,CAAC,EAChB,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,kBAAkB,KAAK,IAAI,CAAC,GACrF,SAAS,CAAA;QACb;;;;;WAKG;QACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;QAC7B;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAC9B;IACD,UAAU,WAAY,SAAQ,SAAS,EAAE,QAAQ,EAAE,iBAAiB,CAAC,OAAO,QAAQ,CAAC;KAAG;IACxF,UAAU,aAAc,SAAQ,WAAW,EAAE,UAAU,CAAC,aAAa;KAAG;IACxE,UAAU,UAAU,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,WAAW,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;KAAG;CAC7F;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IACrD,SAAS,CAAC,aAAa,GACvB,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;AAE3B,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,EAC9C,GAAG,EAAE,SAAS,EACd,OAAO,EACP,WAAW,EACX,MAAM,EAAE,YAAY,EACpB,IAAI,EACJ,GAAG,EACH,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,IAAI,EAAE,cAAc,EACpB,WAAW,EACX,YAAY,EACZ,MAAM,EAAE,YAAY,EACpB,MAAM,EACN,sBAAsB,EACtB,UAAU,EAAE,gBAAgB,EAC5B,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,+BA0Qd;yBAvSe,QAAQ;;;AAyrBxB,MAAM,CAAC,OAAO,WAAW,cAAc,CAAC;IACtC,UAAU,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;KAAG;IACvF,UAAU,aAAc,SAAQ,SAAS,EAAE,UAAU,CAAC,aAAa;KAAG;IACtE,UAAU,UAAU,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;KAAG;CAC3F;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC1D,cAAc,CAAC,aAAa,GAC5B,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;AAEhC,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,KAAK,EACL,IAAc,EACd,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,CAAC,CAAC,+BA0CnB;yBAlDe,SAAS;;;AAqDzB,MAAM,CAAC,OAAO,WAAW,aAAa,CAAC;IACrC,UAAU,SAAU,SAAQ,IAAI,CAC9B,cAAc,CAAC,QAAQ,CAAC,EACxB,gBAAgB,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAClE;KAAG;IACJ,UAAU,QAAQ;QAChB;;;WAGG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;QAC1B,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;QACpC,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;QACnC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAC/B;IACD,UAAU,WAAY,SAAQ,SAAS,EAAE,QAAQ,EAAE,iBAAiB,CAAC,OAAO,YAAY,CAAC;KAAG;IAC5F,UAAU,UAAW,SAAQ,WAAW;QACtC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;QAC1C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC7B,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAA;QAC5C,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAA;QAChD,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,cAAc,CAAC,EAAE,SAAS,CAAA;QAC1B,eAAe,CAAC,EAAE,SAAS,CAAA;QAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB;IACD,UAAU,aAAc,SAAQ,WAAW;QACzC,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;QAC7B,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAAA;QAC/C,cAAc,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,SAAS,CAAA;QACtD,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;QAC1D,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,MAAM,CAAC,EAAE,SAAS,CAAA;QAClB,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB;IACD,UAAU,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,WAAW;QAC3E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC1B,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;QACrB,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,MAAM,CAAC,EAAE,SAAS,CAAA;QAClB,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,cAAc,CAAC,EAAE,SAAS,CAAA;QAC1B,eAAe,CAAC,EAAE,SAAS,CAAA;KAC5B;CACF;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IACzD,aAAa,CAAC,UAAU,GACxB,aAAa,CAAC,aAAa,GAC3B,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;AAE/B,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,EAC9C,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,UAAU,EAChB,KAAK,EACL,WAAW,EAAE,iBAAiB,EAC9B,UAAU,EAAE,gBAAgB,EAC5B,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,cAAc,EACd,eAAe,EACf,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,CAAC,CAAC,+BAgMlB;yBAjNe,QAAQ;;;AAqOxB,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,OAAO,CAAC,EACvB,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC;IACC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,EAAE,WAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAuC/E;yBAvCe,UAAU;;;AA0C1B,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEhE;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAuB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAS9E;yBATe,SAAS"}

package/dist/components/Menu.parts.js

@@ -8,7 +8,7 @@ import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { twToPx } from '@edgeandnode/eds-css';
 import { ArrowRightInteractiveIcon, ArrowUpRightInteractiveIcon, CaretRightIcon, CheckIcon, LoadingIcon, MagnifyingGlassIcon, XIcon, } from '@edgeandnode/eds-react/icons';
 import { useAutoValue, useControlled, useCSSPropsPolyfill, useCSSState, useEDS, } from '../hooks/index.js';
-import { cn, getCSSPropsAttributes, setInputValue, splitProps, } from '../utils/index.js';
+import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.js';
 import { renderAddon } from './base/Addon.js';
 import { ButtonOrLink } from './base/ButtonOrLink.js';
 import { Portal } from './base/Portal.js';
@@ -17,7 +17,9 @@ import { Button } from './Button.js';
 import { Checkbox } from './Checkbox.js';
 import { MenuMeta } from './Menu.meta.js';
 const MenuTriggerContext = createContext(false);
-export function MenuRoot({ ref: passedRef, trigger, triggerMode, anchor: passedAnchor, side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight, open: controlledOpen, defaultOpen, onOpenChange, header, footer, highlightCheckedOnOpen, label, type, value, defaultValue, onValueChange, children, ...props }) {
+const MenuSearchableContext = createContext(false);
+const MenuSearchLoadingContext = createContext(false);
+export function MenuRoot({ ref: passedRef, trigger, triggerMode, anchor: passedAnchor, side, gap, align, alignOffset, matchTriggerWidth, matchTriggerHeight, open: controlledOpen, defaultOpen, onOpenChange, header: passedHeader, footer, highlightCheckedOnOpen, searchable: passedSearchable, searchValue, onSearchValueChange, empty, loading, label, type, value, defaultValue, onValueChange, children, ...props }) {
     const { dirProps, localThemeClass } = useEDS();
     const isSubmenu = useContext(MenuGroupContext) !== null;
     const isContextMenu = triggerMode === 'right-click' && !isSubmenu;
@@ -80,35 +82,43 @@ export function MenuRoot({ ref: passedRef, trigger, triggerMode, anchor: passedA
         capturePointerCoords,
     });
     useHighlightCheckedOnOpen(popupRef, open, highlightCheckedOnOpen);
+    const searchable = passedSearchable ?? (searchValue !== undefined || onSearchValueChange !== undefined);
+    const [onSearchValueChangeAfterClose, reportPendingSearchReset] = useSearchResetAfterClose(onSearchValueChange);
+    const header = passedHeader !== undefined ? passedHeader : searchable ? _jsx(MenuSearch, {}) : undefined;
     return (_jsx("span", { "data-has-trigger": hasTrigger || undefined, className: cn(`root-contents [anchor-scope:all]
         not-data-has-trigger:**:data-base-ui-focus-guard:hidden`, 
         // Very imperfect workaround for https://bugs.webkit.org/show_bug.cgi?id=301871
         `safari:root-inline
-        i:safari:not-data-is-submenu:size-max`), children: _jsxs(MenuRoot, { actionsRef: actionsRef, open: open, onOpenChange: (newOpen) => {
-                // A menu with no trigger can still be opened/closed by the consumer, but it should not send events
-                if (hasTrigger)
-                    setOpen(newOpen);
-            }, ...(!isSubmenu && !isContextMenu && { modal: hasTrigger }), closeParentOnEsc: true, children: [_jsx(MenuTriggerContext.Provider, { value: true, children: renderedTriggerElement ?? (_jsx(MenuInlineFallback, { label: label, portalRef: portalRef, rootProps: props })) }), _jsx(Portal, { children: _jsx("span", { ref: cssPropsPolyfillRef, ...mergeProps({ className: cn('eds-menu invisible! block!', cssPropsClassName) }, cssPropsAttributes, cssPropsPolyfillAttributes, dirProps, props), hidden: undefined }) }), _jsx(Menu.Portal, { container: !hasTrigger
-                        ? portalRef
-                        : /**
-                           * Specifying `document.body` because while it is the default for top-level menus, a submenu
-                           * defaults to using the same portal as its parent, which is not desirable when the parent is
-                           * rendered inline (it can cause the submenu to appear behind other elements).
-                           */
-                            typeof document !== 'undefined'
-                                ? document.body
-                                : undefined, 
-                    // Inline menus are portalled in place, so they already inherit the local theme
-                    className: hasTrigger ? localThemeClass : undefined, children: _jsx(Menu.Positioner, { ref: passedRef, anchor: anchor, side: cssProps.side === 'start'
-                            ? 'inline-start'
-                            : cssProps.side === 'end'
-                                ? 'inline-end'
-                                : cssProps.side, sideOffset: twToPx(cssProps.gap), align: cssProps.align, alignOffset: twToPx(cssProps.alignOffset), collisionPadding: 8, collisionAvoidance: {
-                            side: 'flip',
-                            align: 'flip',
-                            fallbackAxisSide: cssProps.side === 'start' || cssProps.side === 'end' ? 'end' : 'none',
-                        }, "data-has-trigger": hasTrigger || undefined, "data-match-trigger-width": cssProps.matchTriggerWidth || undefined, "data-match-trigger-height": cssProps.matchTriggerHeight || undefined, ...mergeProps({
-                            className: cn(`
+        i:safari:not-data-is-submenu:size-max`), children: _jsx(MenuFilter, { searchable: searchable, searchValue: searchValue, onSearchValueChange: onSearchValueChangeAfterClose, children: _jsxs(MenuRoot, { actionsRef: actionsRef, open: open, onOpenChange: (newOpen) => {
+                    if (newOpen)
+                        reportPendingSearchReset();
+                    // A menu with no trigger can still be opened/closed by the consumer, but it should not send events
+                    if (hasTrigger)
+                        setOpen(newOpen);
+                }, onOpenChangeComplete: (newOpen) => {
+                    if (!newOpen)
+                        reportPendingSearchReset();
+                }, ...(!isSubmenu && !isContextMenu && { modal: hasTrigger }), closeParentOnEsc: true, children: [_jsx(MenuTriggerContext.Provider, { value: true, children: renderedTriggerElement ?? (_jsx(MenuInlineFallback, { label: label, portalRef: portalRef, rootProps: props })) }), _jsx(Portal, { children: _jsx("span", { ref: cssPropsPolyfillRef, ...mergeProps({ className: cn('eds-menu invisible! block!', cssPropsClassName) }, cssPropsAttributes, cssPropsPolyfillAttributes, dirProps, props), hidden: undefined }) }), _jsx(Menu.Portal, { container: !hasTrigger
+                            ? portalRef
+                            : /**
+                               * Specifying `document.body` because while it is the default for top-level menus, a submenu
+                               * defaults to using the same portal as its parent, which is not desirable when the parent is
+                               * rendered inline (it can cause the submenu to appear behind other elements).
+                               */
+                                typeof document !== 'undefined'
+                                    ? document.body
+                                    : undefined, 
+                        // Inline menus are portalled in place, so they already inherit the local theme
+                        className: hasTrigger ? localThemeClass : undefined, children: _jsx(Menu.Positioner, { ref: passedRef, anchor: anchor, side: cssProps.side === 'start'
+                                ? 'inline-start'
+                                : cssProps.side === 'end'
+                                    ? 'inline-end'
+                                    : cssProps.side, sideOffset: twToPx(cssProps.gap), align: cssProps.align, alignOffset: twToPx(cssProps.alignOffset), collisionPadding: 8, collisionAvoidance: {
+                                side: 'flip',
+                                align: 'flip',
+                                fallbackAxisSide: cssProps.side === 'start' || cssProps.side === 'end' ? 'end' : 'none',
+                            }, "data-has-trigger": hasTrigger || undefined, "data-match-trigger-width": cssProps.matchTriggerWidth || undefined, "data-match-trigger-height": cssProps.matchTriggerHeight || undefined, ...mergeProps({
+                                className: cn(`
                   eds-menu root-flex
                   [--available-height-but-not-too-small:max(var(--available-height),--spacing(16))]
                   [anchor-name:--eds-menu]
@@ -127,15 +137,49 @@ export function MenuRoot({ ref: passedRef, trigger, triggerMode, anchor: passedA
                   u:i:data-[match-trigger-width=at-most]:max-w-[min(var(--anchor-width),var(--available-width))]
                   u:i:data-[match-trigger-width=true]:w-(--anchor-width)
                 `, cssPropsClassName),
-                        }, cssPropsAttributes, cssPropsPolyfillAttributes, dirProps, props), render: (renderProps, state) => (_jsxs(_Fragment, { children: [_jsx("div", { ...renderProps, style: hasTrigger ? renderProps.style : undefined }), hasTrigger && state.open && state.anchorHidden && actionsRef.current ? (_jsx(LayoutEffect, { effect: actionsRef.current.close })) : null] })), children: _jsx(Menu.Popup, { ref: popupRef, "data-initial-open": initialOpen.current || undefined, className: "\n                flex grow origin-(--transform-origin) flex-col overflow-clip rounded-inherit bg-muted outline-0 transition\n                data-ending-style:scale-95\n                data-ending-style:opacity-0\n                data-starting-style:not-data-initial-open:scale-95\n                data-starting-style:not-data-initial-open:opacity-0\n              ", onKeyDown: handleMenuPopupKeyDown, children: _jsx(MenuPopupContent, { header: header, footer: footer, children: label !== undefined || type !== undefined ? (type === 'radio' ? (_jsx(MenuGroup, { label: label, type: type, value: value, defaultValue: defaultValue, onValueChange: onValueChange, children: children })) : (_jsx(MenuGroup, { label: label, type: type, children: children }))) : (children) }) }) }) })] }, `${hasTrigger}-${triggerMode}`) }));
+                            }, cssPropsAttributes, cssPropsPolyfillAttributes, dirProps, props), render: (renderProps, state) => (_jsxs(_Fragment, { children: [_jsx("div", { ...renderProps, style: hasTrigger ? renderProps.style : undefined }), hasTrigger && state.open && state.anchorHidden && actionsRef.current ? (_jsx(LayoutEffect, { effect: actionsRef.current.close })) : null] })), children: _jsx(Menu.Popup, { ref: popupRef, "data-initial-open": initialOpen.current || undefined, className: "\n                flex grow origin-(--transform-origin) flex-col overflow-clip rounded-inherit bg-muted outline-0 transition\n                data-ending-style:scale-95\n                data-ending-style:opacity-0\n                data-starting-style:not-data-initial-open:scale-95\n                data-starting-style:not-data-initial-open:opacity-0\n              ", onKeyDown: handleMenuPopupKeyDown, children: _jsx(MenuPopupContent, { header: header, footer: footer, empty: empty, loading: loading, children: label !== undefined || type !== undefined ? (type === 'radio' ? (_jsx(MenuGroup, { label: label, type: type, value: value, defaultValue: defaultValue, onValueChange: onValueChange, children: children })) : (_jsx(MenuGroup, { label: label, type: type, children: children }))) : (children) }) }) }) })] }, `${hasTrigger}-${triggerMode}`) }) }));
 }
 MenuRoot.displayName = 'Menu';
+/** Makes the menu filterable when it's `searchable` (see `MenuProps.OwnProps['searchable']`). */
+function MenuFilter({ searchable, searchValue, onSearchValueChange, children, }) {
+    const filter = useMemo(() => searchable === 'manual'
+        ? null
+        : typeof searchable === 'function'
+            ? (label, query) => searchable({ label, searchValue: query })
+            : undefined, [searchable]);
+    return (_jsx(MenuSearchableContext.Provider, { value: Boolean(searchable), children: searchable ? (_jsx(Menu.FilterProvider, { filter: filter, autoHighlight: true, value: searchValue, onValueChange: onSearchValueChange, children: children })) : (children) }));
+}
 /**
- * Popup chrome: minimum-width spacer, optional header, scrollable items area, optional footer,
- * border overlay.
+ * Holds back the search reset that Base UI reports as the menu starts closing until it has finished
+ * closing (or reopens), so items filtered outside of Base UI (e.g. with `searchable="manual"`)
+ * don't change while it animates out. Base UI keeps filtering its own items with the previous query
+ * until then too.
  */
-function MenuPopupContent({ header, footer, children, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-58" }), header ? (_jsx("div", { className: "nested/menu-header u:shrink-0 u:border-b u:border-muted u:p-4", children: header })) : null, _jsx("div", { className: "grow scroll-p-8 scrollbar-thin overflow-x-clip overflow-y-auto gradient-mask-y", children: _jsx("div", { className: "overflow-clip p-2", children: _jsxs(MenuGroupContext.Provider, { value: "root", children: [children, _jsx("div", { className: "mt-[calc(-2*(--spacing(2))-1px)] not-preceded-by-peer/menu-group:hidden" })] }) }) }), footer ? (_jsx("div", { className: "nested/menu-footer u:shrink-0 u:border-t u:border-muted u:p-4", children: footer })) : null, _jsx("div", { className: "pointer-events-none absolute inset-0 rounded-inherit border border-muted" })] }));
+function useSearchResetAfterClose(onSearchValueChange) {
+    const pendingResetRef = useRef(null);
+    const onSearchValueChangeAfterClose = onSearchValueChange &&
+        ((searchValue, eventDetails) => {
+            if (eventDetails.reason === 'popup-close') {
+                pendingResetRef.current = () => onSearchValueChange(searchValue, eventDetails);
+            }
+            else {
+                onSearchValueChange(searchValue, eventDetails);
+            }
+        });
+    const reportPendingReset = () => {
+        pendingResetRef.current?.();
+        pendingResetRef.current = null;
+    };
+    return [onSearchValueChangeAfterClose, reportPendingReset];
+}
+/**
+ * Popup chrome: minimum-width spacer, optional header, scrollable items area (with a searchable
+ * menu's empty state), optional footer, border overlay.
+ */
+function MenuPopupContent({ header, footer, empty, loading = false, children, }) {
+    const searchable = useContext(MenuSearchableContext);
+    const [emptyShowsLoading, setEmptyShowsLoading] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-58" }), header ? (_jsx("div", { className: "nested/menu-header u:shrink-0 u:border-b u:border-muted u:p-4", children: _jsx(MenuSearchLoadingContext.Provider, { value: loading && !emptyShowsLoading, children: header }) })) : null, _jsx("div", { className: "grow scroll-p-8 scrollbar-thin overflow-x-clip overflow-y-auto gradient-mask-y", children: _jsxs("div", { className: "overflow-clip p-2", children: [searchable ? (_jsx(Menu.Empty, { children: _jsx(MenuEmptyContent, { empty: empty, loading: loading, onLoadingShownChange: setEmptyShowsLoading }) })) : null, _jsx(Menu.List, { "aria-busy": loading || undefined, className: "outline-0", children: _jsx(MenuGroupContext.Provider, { value: "root", children: children }) })] }) }), footer ? (_jsx("div", { className: "nested/menu-footer u:shrink-0 u:border-t u:border-muted u:p-4", children: footer })) : null, _jsx("div", { className: "pointer-events-none absolute inset-0 rounded-inherit border border-muted" })] }));
 }
 /**
  * Resolves the anchor `Menu.Positioner` should point at, and returns a pointer-capture handler for
@@ -232,9 +276,28 @@ function renderMenuTriggerElement({ trigger, triggerMode, triggerRef, isSubmenu,
         return (_jsx(Menu.Trigger, { ref: triggerRef, openOnHover: triggerMode === 'hover', "data-open-on-hover": triggerMode === 'hover' || undefined, className: "\n          u:inherit-position\n          u:i:open:data-open-on-hover:state-hover\n          u:iii:open:not-data-open-on-hover:state-active\n        ", onPointerDown: capturePointerCoords, onPointerEnter: capturePointerCoords, render: renderTrigger }));
     }
 }
+/**
+ * The content of a searchable menu's `Menu.Empty`, which Base UI only renders while no item
+ * matches. Until a search finishes, `empty` would be premature, so `loading` shows a `LoadingIcon`
+ * instead (rather than in the search input).
+ */
+function MenuEmptyContent({ empty, loading, onLoadingShownChange, }) {
+    const [searchFinished, setSearchFinished] = useState(!loading);
+    if (!loading && !searchFinished)
+        setSearchFinished(true);
+    useLayoutEffect(() => {
+        onLoadingShownChange(!searchFinished);
+        return () => onLoadingShownChange(false);
+    }, [searchFinished, onLoadingShownChange]);
+    if (!searchFinished) {
+        return (_jsx(MenuEmpty, { children: _jsx("span", { className: "flex h-lh items-center justify-center", children: _jsx(LoadingIcon, {}) }) }));
+    }
+    return empty === undefined || typeof empty === 'string' ? _jsx(MenuEmpty, { children: empty }) : empty;
+}
 /**
  * Focus the `[data-checked]` item on open so Base UI's composite syncs its active index to it (Base
- * UI has no `initialActiveIndex` API).
+ * UI has no `initialActiveIndex` API). In a searchable menu, typing then moves focus back to the
+ * search input.
  */
 function useHighlightCheckedOnOpen(popupRef, open, enabled) {
     useEffect(() => {
@@ -252,19 +315,12 @@ function useHighlightCheckedOnOpen(popupRef, open, enabled) {
                 highlightedItem === checkedItem) {
                 return;
             }
-            const searchInput = popup.querySelector('input[type="search"]');
-            const searchWasFocused = searchInput !== null && document.activeElement === searchInput;
             checkedItem.focus({ preventScroll: false });
-            if (searchWasFocused)
-                searchInput.focus({ preventScroll: true });
         });
         return () => cancelAnimationFrame(frameId);
     }, [popupRef, open, enabled]);
 }
-/**
- * Keydown handler for `Menu.Popup`. Handles Shift + Tab escaping the popup and inline-search-input
- * / composite-item coordination.
- */
+/** Keydown handler for `Menu.Popup`. Handles Shift + Tab escaping the popup. */
 function handleMenuPopupKeyDown(event) {
     /**
      * Ensure Shift + Tab doesn't close the menu if there is a previous focusable element that is not
@@ -292,54 +348,6 @@ function handleMenuPopupKeyDown(event) {
         if ((previousElement && !previousElementIsMenuItem) ||
             (!activeElementIsMenuItem && previousElementIsMenuItem)) {
             event.preventBaseUIHandler();
-            return;
-        }
-    }
-    // If there is a search input in the menu...
-    const searchInput = event.currentTarget.querySelector('input[type="search"]');
-    if (searchInput instanceof HTMLInputElement) {
-        // If the user typed some text, ensure it goes in the input instead of Base UI focusing the item that matches
-        if ((event.key.length === 1 && event.key !== ' ') ||
-            event.key === 'Backspace' ||
-            event.key === 'ArrowLeft' ||
-            event.key === 'ArrowRight') {
-            event.preventBaseUIHandler();
-            searchInput.focus();
-        }
-        else {
-            const searchInputIsFocused = document.activeElement === searchInput;
-            const menuItems = [...event.currentTarget.querySelectorAll('.eds-menu-item')];
-            const highlightedMenuItem = menuItems.find((item) => item.matches('[data-highlighted]'));
-            /**
-             * If the user pressed the down arrow while the search input is focused and there is a single
-             * menu item in the results, move the focus to it because it may already be highlighted, which
-             * would prevent Base UI from focusing it.
-             */
-            if (event.key === 'ArrowDown' && searchInputIsFocused && menuItems.length === 1) {
-                event.preventBaseUIHandler();
-                menuItems[0].focus();
-            }
-            // Inversely, if the user pressed the up arrow and the focus is on the only menu item, move it back to the search input
-            else if (event.key === 'ArrowUp' &&
-                menuItems.length === 1 &&
-                document.activeElement === menuItems[0]) {
-                event.preventDefault();
-                searchInput.focus();
-            }
-            // If the user pressed Enter while the search input is focused and a menu item is highlighted, select it
-            else if (event.key === 'Enter' && searchInputIsFocused && highlightedMenuItem) {
-                highlightedMenuItem.focus();
-                window.setTimeout(() => {
-                    highlightedMenuItem.dispatchEvent(new KeyboardEvent('keydown', {
-                        key: 'Enter',
-                        code: 'Enter',
-                        keyCode: 13,
-                        which: 13,
-                        bubbles: true,
-                        cancelable: true,
-                    }));
-                }, 0);
-            }
         }
     }
 }
@@ -355,10 +363,12 @@ export function MenuGroup({ label, type = 'plain', value, defaultValue, onValueC
     if (isNested) {
         throw new Error(`[Menu] Groups cannot be nested, make sure you're not using \`Menu.Group\` in a \`Menu\` with a \`label\` and/or \`type\` prop (implicit group)`);
     }
-    return (_jsx(MenuGroupContext.Provider, { value: menuGroupContextValue, children: _jsxs(Menu.Group, { ...mergeProps({ className: cn('peer/menu-group u:-m-2 u:mb-2 u:border-b u:border-muted u:p-2') }, props), render: type === 'radio' ? (_jsx(Menu.RadioGroup, { value: value, defaultValue: defaultValue, onValueChange: onValueChange })) : (_jsx("div", {})), children: [label ? (_jsx(Menu.GroupLabel, { className: "truncate p-2 text-12 text-muted", children: label })) : null, children] }) }));
+    return (_jsx(MenuGroupContext.Provider, { value: menuGroupContextValue, children: _jsxs(Menu.Group, { ...mergeProps({
+                className: cn('u:-m-2 u:border-muted u:p-2 u:has-[~:not([hidden]):not(:empty)]:mb-2 u:has-[~:not([hidden]):not(:empty)]:border-b'),
+            }, props), render: type === 'radio' ? (_jsx(Menu.RadioGroup, { value: value, defaultValue: defaultValue, onValueChange: onValueChange })) : (_jsx("div", {})), children: [label ? (_jsx(Menu.GroupLabel, { className: "truncate p-2 text-12 text-muted", children: label })) : null, children] }) }));
 }
 MenuGroup.displayName = 'Menu.Group';
-export function MenuItem({ ref: passedRef, type: passedType, addonBefore: passedAddonBefore, addonAfter: passedAddonAfter, variant, loading, href, target, checked, defaultChecked, onCheckedChange, value: passedValue, disabled: passedDisabled, children, ...props }) {
+export function MenuItem({ ref: passedRef, type: passedType, label, addonBefore: passedAddonBefore, addonAfter: passedAddonAfter, variant, loading, href, target, checked, defaultChecked, onCheckedChange, value: passedValue, disabled: passedDisabled, children, ...props }) {
     const elementRef = useRef(null);
     const elementPassedRef = useMergedRefs(elementRef, passedRef);
     const autoValue = useAutoValue(children);
@@ -427,18 +437,18 @@ export function MenuItem({ ref: passedRef, type: passedType, addonBefore: passed
         ...props,
     };
     if (type === 'submenu-trigger') {
-        return _jsx(Menu.SubmenuTrigger, { nativeButton: true, disabled: disabled, render: renderItem(baseProps) });
+        return (_jsx(Menu.SubmenuTrigger, { nativeButton: true, label: label, disabled: disabled, render: renderItem(baseProps) }));
     }
     if (type === 'checkbox') {
-        return (_jsx(CheckboxItem, { ...baseProps, nativeButton: true, checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, render: renderItem }));
+        return (_jsx(CheckboxItem, { ...baseProps, nativeButton: true, label: label, checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, render: renderItem }));
     }
     if (type === 'radio') {
-        return (_jsx(Menu.RadioItem, { ...baseProps, nativeButton: true, closeOnClick: true, value: passedValue !== undefined ? passedValue : autoValue, disabled: disabled, render: renderItem }));
+        return (_jsx(Menu.RadioItem, { ...baseProps, nativeButton: true, closeOnClick: true, label: label, value: passedValue !== undefined ? passedValue : autoValue, disabled: disabled, render: renderItem }));
     }
     if (href !== undefined) {
-        return (_jsx(Menu.LinkItem, { ...baseProps, closeOnClick: true, href: href, target: target, render: renderItem, children: children }));
+        return (_jsx(Menu.LinkItem, { ...baseProps, closeOnClick: true, label: label, href: href, target: target, render: renderItem, children: children }));
     }
-    return _jsx(Menu.Item, { ...baseProps, nativeButton: true, disabled: disabled, render: renderItem });
+    return (_jsx(Menu.Item, { ...baseProps, nativeButton: true, label: label, disabled: disabled, render: renderItem }));
 }
 MenuItem.displayName = 'Menu.Item';
 function MenuItemAddon({ children, ...props }) {
@@ -446,30 +456,24 @@ function MenuItemAddon({ children, ...props }) {
             className: cn('eds-addon root-flex items-center justify-center u:h-(--eds-addon-size) u:min-w-(--eds-addon-size) u:shrink-0 u:addon-medium'),
         }, props), children: children }));
 }
-export function MenuSearch({ ref: passedRef, placeholder: passedPlaceholder, value: controlledValue, defaultValue, onValueChange, ...props }) {
-    const inputRef = useRef(null);
-    const inputPassedRef = useMergedRefs(inputRef, passedRef);
-    const placeholder = passedPlaceholder ?? 'Search';
-    const [value, setValue] = useControlled(controlledValue, defaultValue ?? '', onValueChange);
+/** Search input for the `header` of a `searchable` menu, which filters its items. */
+export function MenuSearch({ placeholder = 'Search', ...props }) {
+    if (!useContext(MenuSearchableContext)) {
+        throw new Error('[Menu] `Menu.Search` must be used in a `searchable` menu');
+    }
+    const loading = useContext(MenuSearchLoadingContext);
     const { rootProps, nestedProps } = splitProps(props);
-    return (_jsxs("div", { ...mergeProps({ className: cn('root-flex items-center u:-m-4 u:text-14 u:text-default') }, rootProps), children: [_jsx(MagnifyingGlassIcon, { alt: "", className: "absolute inset-y-0 inset-s-3.5 my-auto size-3.5" }), _jsx("input", { ref: inputPassedRef, type: "search", placeholder: placeholder, "aria-label": placeholder, value: value, ...mergeProps({
-                    className: cn('peer -mb-px h-10 w-0 grow ps-8.5 outline-0'),
-                    onChange: (event) => setValue(event.target.value),
-                }, nestedProps) }), _jsx("div", { className: "me-1.5 flex size-7 shrink-0 items-center justify-center peer-placeholder-shown:hidden", children: _jsx(Button, { variant: "naked", size: "xsmall", tabIndex: -1, onClick: () => {
-                        const input = inputRef.current;
-                        if (!input)
-                            return;
-                        setInputValue(input, '');
-                        input.focus();
-                    }, className: "h-full", children: _jsx(XIcon, { alt: "Clear" }) }) })] }));
+    return (_jsxs("div", { ...mergeProps({ className: cn('root-flex items-center u:-m-4 u:text-14 u:text-default') }, rootProps), children: [loading ? (_jsx(LoadingIcon, { className: "absolute inset-y-0 inset-s-3.5 my-auto size-3.5" })) : (_jsx(MagnifyingGlassIcon, { alt: "", className: "absolute inset-y-0 inset-s-3.5 my-auto size-3.5" })), _jsx(Menu.Input, { placeholder: placeholder, "aria-label": placeholder, ...mergeProps({ className: cn('peer -mb-px h-10 w-0 grow ps-8.5 outline-0') }, nestedProps) }), _jsx("div", { className: "me-1.5 flex size-7 shrink-0 items-center justify-center peer-placeholder-shown:hidden", children: _jsx(Menu.Clear, { "aria-hidden": false, render: _jsx(Button, { variant: "naked", size: "xsmall", className: "h-full" }), children: _jsx(XIcon, { alt: "Clear" }) }) })] }));
 }
 MenuSearch.displayName = 'Menu.Search';
 /**
- * Renders the standard empty-state treatment for a `Menu` (typically shown when search filters
- * yield no results, or when a `Menu` has no items at all). Defaults to `"No results"`.
+ * Renders the standard empty-state treatment for a `Menu`, e.g. when it has no items. Searchable
+ * menus render it when no item matches (see `empty`). Its text wraps instead of widening the menu.
+ * Defaults to `"No results"`.
  */
 export function MenuEmpty({ children = 'No results', ...props }) {
-    return (_jsx("div", { ...mergeProps({ className: cn('p-2 u:text-16 u:text-muted') }, props), children: children }));
+    // `contain-inline-size` keeps the text from widening a menu that sizes to fit its content
+    return (_jsx("div", { ...mergeProps({ className: cn('p-2 contain-inline-size u:text-16 u:text-muted') }, props), children: children }));
 }
 MenuEmpty.displayName = 'Menu.Empty';
 /**