@box/blueprint-web 14.14.0 → 14.15.0

package/dist/lib-esm/index.css

@@ -9813,6 +9813,302 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-overflow:ellipsis;
   white-space:nowrap;
 }
+.bp_menu_combobox_module_content--6ad69[data-modern=false]{
+  --menu-combobox-header-gap:var(--space-2);
+  --menu-combobox-header-padding:var(--space-3);
+  --menu-combobox-header-shadow:var(--dropshadow-1);
+  --menu-combobox-radius:var(--radius-3);
+  --menu-combobox-padding:var(--space-4);
+  --menu-combobox-text-color:var(--text-text-on-light);
+  --menu-combobox-background:var(--surface-menu-surface);
+  --menu-combobox-border:var(--border-1) solid var(--border-card-border);
+  --menu-combobox-shadow:var(--dropshadow-3);
+  --menu-combobox-backdrop-filter:none;
+  --menu-combobox-item-background-hover:var(--surface-menu-surface-hover);
+  --menu-combobox-item-background-focus:var(--surface-menu-surface-hover);
+  --menu-combobox-item-border-focus:var(--border-2) solid var(--outline-focus-on-light);
+  --menu-combobox-item-border-hover:var(--border-2) solid #0000;
+  --menu-combobox-item-border-active:var(--border-2) solid #0000;
+  --menu-combobox-item-background-active:var(--surface-menu-surface-hover);
+  --menu-combobox-item-padding:var(--space-2);
+  --menu-combobox-item-border-width:var(--border-2);
+  --menu-combobox-item-border:var(--border-2) solid #0000;
+  --menu-combobox-item-radius:var(--radius-3);
+  --menu-combobox-item-gap:var(--space-4);
+  --menu-combobox-item-min-height:var(--size-9);
+  --menu-combobox-search-default-padding:var(--space-2);
+  --menu-combobox-search-height:var(--size-10);
+  --menu-combobox-search-with-start-icon-padding:var(--space-8);
+  --menu-combobox-search-padding-inline-start-focused:calc(var(--space-8) - var(--border-1));
+  --menu-combobox-search-background:var(--surface-search-surface);
+  --menu-combobox-search-background-hover:var(--surface-search-surface-hover);
+  --menu-combobox-search-background-focus:var(--surface-search-surface-focused);
+  --menu-combobox-search-border-width:var(--border-1);
+  --menu-combobox-search-border-width-focus:var(--border-2);
+  --menu-combobox-search-border:var(--border-search-border);
+  --menu-combobox-search-border-hover:var(--border-search-border-hover);
+  --menu-combobox-search-focus-outline:var(--outline-focus-on-light);
+  --menu-combobox-search-radius:var(--radius-2);
+  --menu-combobox-search-color:var(--text-text-on-light);
+  --menu-combobox-search-placeholder-color:var(--text-text-on-light-secondary);
+  --menu-combobox-search-icon-size:var(--size-4);
+  --menu-combobox-search-icon-color:var(--icon-icon-on-light-secondary);
+  --menu-combobox-empty-color:var(--text-text-on-light-secondary);
+  --menu-combobox-list-gap:var(--space-1);
+  --menu-combobox-separator-margin:var(--space-2);
+  font-family:var(--body-default-font-family);
+  font-size:var(--body-default-font-size);
+  font-weight:var(--body-default-font-weight);
+  letter-spacing:var(--body-default-letter-spacing);
+  line-height:var(--body-default-line-height);
+  text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+}
+
+.bp_menu_combobox_module_content--6ad69[data-modern=true]{
+  --menu-combobox-header-gap:var(--bp-space-020);
+  --menu-combobox-header-padding:var(--bp-space-030);
+  --menu-combobox-header-shadow:var(--dropshadow-1);
+  --menu-combobox-radius:var(--bp-radius-10);
+  --menu-combobox-padding:var(--bp-space-040);
+  --menu-combobox-text-color:var(--bp-text-text-on-light);
+  --menu-combobox-background:var(--bp-surface-menu-surface-dropdown);
+  --menu-combobox-border:var(--bp-border-01) solid var(--bp-border-menu-border);
+  --menu-combobox-shadow:var(--dropshadow-2);
+  --menu-combobox-backdrop-filter:blur(16px);
+  --menu-combobox-item-background-hover:var(--bp-surface-menu-item-surface-hover);
+  --menu-combobox-item-background-focus:var(--bp-surface-menu-item-surface-hover);
+  --menu-combobox-item-border-focus:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --menu-combobox-item-border-hover:var(--bp-border-02) solid #0000;
+  --menu-combobox-item-border-active:var(--bp-border-02) solid #0000;
+  --menu-combobox-item-background-active:var(--bp-surface-menu-item-surface-hover);
+  --menu-combobox-item-padding:var(--bp-space-020);
+  --menu-combobox-item-border-width:var(--bp-border-02);
+  --menu-combobox-item-border:var(--bp-border-02) solid #0000;
+  --menu-combobox-item-radius:var(--bp-radius-06);
+  --menu-combobox-item-gap:var(--bp-space-040);
+  --menu-combobox-item-min-height:var(--bp-size-090);
+  --menu-combobox-search-default-padding:var(--bp-space-030);
+  --menu-combobox-search-height:var(--bp-size-100);
+  --menu-combobox-search-with-start-icon-padding:calc(var(--menu-combobox-search-default-padding) + var(--bp-space-040) + var(--bp-space-020));
+  --menu-combobox-search-padding-inline-start-focused:calc(var(--menu-combobox-search-with-start-icon-padding) - var(--bp-border-01));
+  --menu-combobox-search-background:var(--bp-surface-search-surface);
+  --menu-combobox-search-background-hover:var(--bp-surface-search-surface-hover);
+  --menu-combobox-search-background-focus:var(--bp-surface-search-surface-focused);
+  --menu-combobox-search-border-width:var(--bp-border-01);
+  --menu-combobox-search-border-width-focus:var(--bp-border-02);
+  --menu-combobox-search-border:var(--bp-border-search-border);
+  --menu-combobox-search-border-hover:var(--bp-border-search-border-hover);
+  --menu-combobox-search-focus-outline:var(--bp-light-blue-100);
+  --menu-combobox-search-radius:var(--bp-radius-10);
+  --menu-combobox-search-color:var(--bp-text-text-on-light);
+  --menu-combobox-search-placeholder-color:var(--bp-text-text-on-light-secondary);
+  --menu-combobox-search-icon-size:var(--bp-size-040);
+  --menu-combobox-search-icon-color:var(--bp-icon-icon-on-light-secondary);
+  --menu-combobox-empty-color:var(--bp-text-text-on-light-secondary);
+  --menu-combobox-list-gap:var(--bp-space-010);
+  --menu-combobox-separator-margin:var(--bp-space-020);
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-05);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-regular);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+}
+
+.bp_menu_combobox_module_content--6ad69{
+  backdrop-filter:var(--menu-combobox-backdrop-filter);
+  background-color:var(--menu-combobox-background);
+  border:var(--menu-combobox-border);
+  border-radius:var(--menu-combobox-radius);
+  box-shadow:var(--menu-combobox-shadow);
+  box-sizing:border-box;
+  color:var(--menu-combobox-text-color);
+  display:flex;
+  flex-direction:column;
+  max-height:min(var(--blueprint-web-menu-combobox-max-height, 25rem), var(--popover-available-height, 100vh));
+  max-width:min(var(--blueprint-web-menu-combobox-content-max-width, 25rem), 90vw, var(--popover-available-width, 100vw));
+  min-width:var(--blueprint-web-menu-combobox-content-min-width, 11.5rem);
+  padding:var(--menu-combobox-padding);
+  z-index:380;
+}
+.bp_menu_combobox_module_content--6ad69[data-menu-fullscreen=true]{
+  border:none;
+  border-radius:0;
+  height:100%;
+  max-height:none;
+  max-width:none;
+  min-width:0;
+  overflow:hidden;
+  pointer-events:auto;
+  width:100%;
+}
+
+.bp_menu_combobox_module_searchWrapper--6ad69{
+  display:block;
+  flex-shrink:0;
+  position:relative;
+}
+
+.bp_menu_combobox_module_searchIcon--6ad69{
+  color:var(--menu-combobox-search-icon-color);
+  height:var(--menu-combobox-search-icon-size);
+  inset-inline-start:var(--menu-combobox-search-default-padding);
+  pointer-events:none;
+  position:absolute;
+  top:50%;
+  transform:translateY(-50%);
+  width:var(--menu-combobox-search-icon-size);
+}
+.bp_menu_combobox_module_search--6ad69{
+  -webkit-font-smoothing:auto;
+  background-color:var(--menu-combobox-search-background);
+  border:var(--menu-combobox-search-border-width) solid var(--menu-combobox-search-border);
+  border-radius:var(--menu-combobox-search-radius);
+  box-shadow:unset;
+  box-sizing:border-box;
+  color:var(--menu-combobox-search-color);
+  font-family:var(--body-default-font-family);
+  font-size:var(--body-default-font-size);
+  font-weight:var(--body-default-font-weight);
+  height:var(--menu-combobox-search-height);
+  letter-spacing:var(--body-default-letter-spacing);
+  line-height:var(--body-default-line-height);
+  min-width:0;
+  outline:0;
+  padding-block:0;
+  padding-inline:var(--menu-combobox-search-with-start-icon-padding) var(--menu-combobox-search-default-padding);
+  text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+  transition:border-color .15s ease,background-color .15s ease;
+  width:100%;
+}
+.bp_menu_combobox_module_search--6ad69::placeholder{
+  color:var(--menu-combobox-search-placeholder-color);
+}
+.bp_menu_combobox_module_search--6ad69:focus-visible{
+  background-color:var(--menu-combobox-search-background-focus);
+  border:var(--menu-combobox-search-border-width-focus) solid var(--menu-combobox-search-focus-outline);
+  padding-inline:var(--menu-combobox-search-padding-inline-start-focused) calc(var(--menu-combobox-search-with-start-icon-padding) - var(--bp-border-01));
+}
+.bp_menu_combobox_module_search--6ad69:not(:focus-visible):hover{
+  background-color:var(--menu-combobox-search-background-hover);
+  border-color:var(--menu-combobox-search-border-hover);
+}
+
+.bp_menu_combobox_module_searchModern--6ad69{
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-05);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-regular);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+}
+
+.bp_menu_combobox_module_list--6ad69{
+  display:flex;
+  flex:1 1 auto;
+  flex-direction:column;
+  gap:var(--menu-combobox-list-gap);
+  margin-block:var(--menu-combobox-separator-margin) calc(var(--menu-combobox-padding)*-1);
+  margin-inline-end:calc(var(--menu-combobox-padding)*-1);
+  min-height:0;
+  overflow-y:auto;
+  padding-block-end:var(--menu-combobox-padding);
+  padding-inline-end:var(--menu-combobox-padding);
+}
+
+.bp_menu_combobox_module_item--6ad69{
+  align-items:center;
+  border:var(--menu-combobox-item-border);
+  border-radius:var(--menu-combobox-item-radius);
+  box-sizing:border-box;
+  cursor:pointer;
+  display:flex;
+  gap:var(--menu-combobox-item-gap);
+  min-height:var(--menu-combobox-item-min-height);
+  min-width:0;
+  outline:none;
+  overflow:hidden;
+  padding:calc(var(--menu-combobox-item-padding) - var(--menu-combobox-item-border-width));
+  position:relative;
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_menu_combobox_module_item--6ad69[data-active-item]{
+  background-color:var(--menu-combobox-item-background-focus);
+  border:var(--menu-combobox-item-border-focus);
+}
+.bp_menu_combobox_module_item--6ad69:hover{
+  background-color:var(--menu-combobox-item-background-hover);
+  border:var(--menu-combobox-item-border-hover);
+}
+.bp_menu_combobox_module_item--6ad69:active{
+  background-color:var(--menu-combobox-item-background-active);
+  border:var(--menu-combobox-item-border-active);
+}
+.bp_menu_combobox_module_item--6ad69[aria-disabled=true]{
+  opacity:60%;
+  pointer-events:none;
+}
+.bp_menu_combobox_module_itemLabel--6ad69{
+  flex:1 1 0;
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.bp_menu_combobox_module_empty--6ad69{
+  color:var(--menu-combobox-empty-color);
+  font-family:var(--body-default-font-family);
+  font-size:var(--body-default-font-size);
+  font-weight:var(--body-default-font-weight);
+  letter-spacing:var(--body-default-letter-spacing);
+  line-height:var(--body-default-line-height);
+  padding:var(--menu-combobox-item-padding);
+  text-align:center;
+  text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+}
+
+.bp_menu_combobox_module_emptyModern--6ad69{
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-05);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-regular);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+}
+
+.bp_menu_combobox_module_menuHeader--6ad69{
+  align-items:center;
+  box-shadow:var(--menu-combobox-header-shadow);
+  display:grid;
+  flex-shrink:0;
+  gap:var(--menu-combobox-header-gap);
+  grid-template-areas:"content close";
+  grid-template-columns:minmax(0, 1fr) auto;
+  margin:calc(var(--menu-combobox-padding)*-1);
+  margin-block-end:var(--menu-combobox-padding);
+  padding:var(--menu-combobox-header-padding);
+}
+
+.bp_menu_combobox_module_headerTextContent--6ad69{
+  display:grid;
+  grid-area:content;
+}
+
+.bp_menu_combobox_module_headerEllipsis--6ad69{
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.bp_menu_combobox_module_menuCloseButton--6ad69{
+  grid-area:close;
+}
 .bp_notification_module_viewport--26924{
   --notification-viewport-space:var(--space-4);
   --notification-viewport-item-spacing:var(--space-3);

package/dist/lib-esm/index.d.ts

@@ -51,6 +51,7 @@ export * from './primitives/dropdown-menu';
 export * from './primitives/icon-button';
 export * from './primitives/inline-error/inline-error';
 export * from './primitives/link';
+export * from './primitives/menu-combobox';
 export * from './primitives/notification';
 export * from './primitives/page-header';
 export * from './primitives/popover';

package/dist/lib-esm/index.js

@@ -69,6 +69,7 @@ export { DropdownMenu } from './primitives/dropdown-menu/index.js';
 export { IconButton } from './primitives/icon-button/icon-button.js';
 export { InlineError } from './primitives/inline-error/inline-error.js';
 export { Link } from './primitives/link/link.js';
+export { MenuCombobox } from './primitives/menu-combobox/index.js';
 export { Notification } from './primitives/notification/index.js';
 export { PageHeader } from './primitives/page-header/page-header.js';
 export { Popover } from './primitives/popover/index.js';

package/dist/lib-esm/primitives/menu-combobox/index.d.ts

@@ -0,0 +1,27 @@
+export declare const MenuCombobox: {
+    Root: {
+        (props: import("./types").MenuComboboxRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("./types").MenuComboboxTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("./types").MenuComboboxContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: (({ children, className, ...rest }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+        MenuCloseButton: import("react").ForwardRefExoticComponent<Omit<import("./menu-combobox-header").MenuComboboxHeaderMenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+        TextContent: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children"> & {
+            subtitle?: string;
+            title: string;
+        } & import("react").RefAttributes<HTMLDivElement>>;
+    };
+    Search: import("react").ForwardRefExoticComponent<Omit<import("./types").MenuComboboxSearchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("./types").MenuComboboxListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("./types").MenuComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<Omit<import("./types").MenuComboboxEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type { MenuComboboxHeaderMenuCloseButtonProps, MenuComboboxHeaderTextContentProps, } from './menu-combobox-header';
+export type { MenuComboboxContentProps } from './types';
+export type { MenuComboboxEmptyProps } from './types';
+export type { MenuComboboxItemProps } from './types';
+export type { MenuComboboxListProps } from './types';
+export type { MenuComboboxRootProps } from './types';
+export type { MenuComboboxSearchProps } from './types';
+export type { MenuComboboxTriggerProps } from './types';

package/dist/lib-esm/primitives/menu-combobox/index.js

@@ -0,0 +1,21 @@
+import { MenuComboboxContent } from './menu-combobox-content.js';
+import { MenuComboboxEmpty } from './menu-combobox-empty.js';
+import { MenuComboboxHeader } from './menu-combobox-header.js';
+import { MenuComboboxItem } from './menu-combobox-item.js';
+import { MenuComboboxList } from './menu-combobox-list.js';
+import { MenuComboboxRoot } from './menu-combobox-root.js';
+import { MenuComboboxSearch } from './menu-combobox-search.js';
+import { MenuComboboxTrigger } from './menu-combobox-trigger.js';
+
+const MenuCombobox = {
+  Root: MenuComboboxRoot,
+  Trigger: MenuComboboxTrigger,
+  Content: MenuComboboxContent,
+  Header: MenuComboboxHeader,
+  Search: MenuComboboxSearch,
+  List: MenuComboboxList,
+  Item: MenuComboboxItem,
+  Empty: MenuComboboxEmpty
+};
+
+export { MenuCombobox };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-content.d.ts

@@ -0,0 +1,3 @@
+import { type MenuComboboxContentProps } from './types';
+/** Menu panel that contains the search input and items. */
+export declare const MenuComboboxContent: import("react").ForwardRefExoticComponent<Omit<MenuComboboxContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-content.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { Space2 } from '@box/blueprint-web-assets/tokens/px-tokens';
+import { Menu } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useMenuComboboxContext } from './menu-combobox-context.js';
+import styles from './menu-combobox.module.js';
+
+const GUTTER = parseInt(Space2, 10);
+/* Force-fill the viewport when fullscreen; `pointerEvents: 'none'` lets clicks reach the
+ * trigger while closed, the inner content re-enables them via SCSS. */
+const FULLSCREEN_WRAPPER_STYLE = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: '100vw',
+  height: '100dvh',
+  transform: 'none',
+  pointerEvents: 'none'
+};
+const noopUpdatePosition = () => {
+  /* Skip Ariakit positioning when fullscreen so it doesn't override the wrapper style. */
+};
+/** Menu panel that contains the search input and items. */
+const MenuComboboxContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    portalElement,
+    ...rest
+  } = props;
+  const {
+    isFullScreenEnabled
+  } = useMenuComboboxContext();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  const gutter = isFullScreenEnabled ? 0 : GUTTER;
+  const wrapperProps = useMemo(() => isFullScreenEnabled ? {
+    style: FULLSCREEN_WRAPPER_STYLE
+  } : undefined, [isFullScreenEnabled]);
+  return jsx(Menu, {
+    ref: forwardedRef,
+    portal: true,
+    portalElement: portalElement,
+    gutter: gutter,
+    wrapperProps: wrapperProps,
+    updatePosition: isFullScreenEnabled ? noopUpdatePosition : undefined,
+    ...rest,
+    className: clsx(styles.content, className),
+    "data-menu-fullscreen": isFullScreenEnabled ? 'true' : 'false',
+    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    children: children
+  });
+});
+MenuComboboxContent.displayName = 'MenuComboboxContent';
+
+export { MenuComboboxContent };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-context.d.ts

@@ -0,0 +1,8 @@
+export type MenuComboboxContextValue = {
+    searchPlaceholder: string | undefined;
+    isFullScreenEnabled: boolean;
+    /** Imperatively close the menu. */
+    setOpen: (open: boolean) => void;
+};
+export declare const MenuComboboxContext: import("react").Context<MenuComboboxContextValue>;
+export declare const useMenuComboboxContext: () => MenuComboboxContextValue;

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-context.js

@@ -0,0 +1,13 @@
+import { useContext, createContext } from 'react';
+
+const defaultValue = {
+  searchPlaceholder: undefined,
+  isFullScreenEnabled: false,
+  setOpen: () => {
+    /* no-op outside of a MenuCombobox.Root */
+  }
+};
+const MenuComboboxContext = /*#__PURE__*/createContext(defaultValue);
+const useMenuComboboxContext = () => useContext(MenuComboboxContext);
+
+export { MenuComboboxContext, useMenuComboboxContext };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-empty.d.ts

@@ -0,0 +1,3 @@
+import { type MenuComboboxEmptyProps } from './types';
+/** Shown when the filtered list has no matches. */
+export declare const MenuComboboxEmpty: import("react").ForwardRefExoticComponent<Omit<MenuComboboxEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-empty.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import styles from './menu-combobox.module.js';
+
+/** Shown when the filtered list has no matches. */
+const MenuComboboxEmpty = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  return jsx("div", {
+    ref: forwardedRef,
+    role: "status",
+    ...rest,
+    className: clsx(styles.empty, enableModernizedComponents && styles.emptyModern, className),
+    children: children
+  });
+});
+MenuComboboxEmpty.displayName = 'MenuComboboxEmpty';
+
+export { MenuComboboxEmpty };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-header.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes } from 'react';
+import { type IconButtonProps } from '../icon-button';
+export type MenuComboboxHeaderMenuCloseButtonProps = Omit<IconButtonProps, 'icon' | 'variant' | 'size'>;
+export type MenuComboboxHeaderTextContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Primary line. */
+    title: string;
+};
+export declare const MenuComboboxHeader: (({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+    MenuCloseButton: import("react").ForwardRefExoticComponent<Omit<MenuComboboxHeaderMenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    TextContent: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        /** Secondary line below the title. */
+        subtitle?: string;
+        /** Primary line. */
+        title: string;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-header.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { XMark } from '@box/blueprint-web-assets/icons/Medium';
+import clsx from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { IconButton } from '../icon-button/icon-button.js';
+import { Text } from '../../text/text.js';
+import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
+import { useMenuComboboxContext } from './menu-combobox-context.js';
+import styles from './menu-combobox.module.js';
+
+const MenuCloseButton = /*#__PURE__*/forwardRef(({
+  onClick,
+  className,
+  ...rest
+}, ref) => {
+  const {
+    setOpen
+  } = useMenuComboboxContext();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  const handleCloseClick = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const CloseIcon = enableModernizedComponents ? XMark : XMark$1;
+  return jsx(IconButton, {
+    ref: ref,
+    ...rest,
+    className: clsx(styles.menuCloseButton, className),
+    icon: CloseIcon,
+    onClick: composeEventHandlers(handleCloseClick, onClick),
+    variant: "small-utility"
+  });
+});
+MenuCloseButton.displayName = 'MenuComboboxHeaderMenuCloseButton';
+const TextContent = /*#__PURE__*/forwardRef(({
+  title,
+  subtitle,
+  className,
+  ...rest
+}, ref) => {
+  return jsxs("div", {
+    ref: ref,
+    ...rest,
+    className: clsx(styles.headerTextContent, className),
+    children: [jsx(Text, {
+      as: "span",
+      className: styles.headerEllipsis,
+      variant: "bodyLargeBold",
+      children: title
+    }), subtitle && jsx(Text, {
+      as: "span",
+      className: styles.headerEllipsis,
+      color: "textOnLightSecondary",
+      variant: "caption",
+      children: subtitle
+    })]
+  });
+});
+TextContent.displayName = 'MenuComboboxHeaderTextContent';
+const MenuComboboxHeaderPrimitive = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return jsx("div", {
+    ...rest,
+    className: clsx(styles.menuHeader, className),
+    role: "presentation",
+    children: children
+  });
+};
+const MenuComboboxHeader = Object.assign(MenuComboboxHeaderPrimitive, {
+  MenuCloseButton,
+  TextContent
+});
+
+export { MenuComboboxHeader };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-item.d.ts

@@ -0,0 +1,3 @@
+import { type MenuComboboxItemProps } from './types';
+/** A filterable menu item. */
+export declare const MenuComboboxItem: import("react").ForwardRefExoticComponent<Omit<MenuComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-item.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { ComboboxItem } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Text } from '../../text/text.js';
+import styles from './menu-combobox.module.js';
+
+/** A filterable menu item. */
+const MenuComboboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(ComboboxItem, {
+    ref: forwardedRef,
+    focusOnHover: true,
+    setValueOnClick: false,
+    ...rest,
+    className: clsx(styles.item, className),
+    children: jsx(Text, {
+      as: "span",
+      className: styles.itemLabel,
+      variant: "bodyDefault",
+      children: children
+    })
+  });
+});
+MenuComboboxItem.displayName = 'MenuComboboxItem';
+
+export { MenuComboboxItem };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-list.d.ts

@@ -0,0 +1,3 @@
+import { type MenuComboboxListProps } from './types';
+/** Scrollable list of combobox items. */
+export declare const MenuComboboxList: import("react").ForwardRefExoticComponent<Omit<MenuComboboxListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-list.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { ComboboxList } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './menu-combobox.module.js';
+
+/** Scrollable list of combobox items. */
+const MenuComboboxList = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(ComboboxList, {
+    ref: forwardedRef,
+    ...rest,
+    className: clsx(styles.list, className),
+    children: children
+  });
+});
+MenuComboboxList.displayName = 'MenuComboboxList';
+
+export { MenuComboboxList };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-root.d.ts

@@ -0,0 +1,6 @@
+import { type MenuComboboxRootProps } from './types';
+/** Root provider that wires the combobox + menu state together. */
+export declare const MenuComboboxRoot: {
+    (props: MenuComboboxRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-root.js

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import { ComboboxProvider, MenuProvider } from '@ariakit/react';
+import { useState, useCallback, startTransition, useMemo } from 'react';
+import { MenuComboboxContext } from './menu-combobox-context.js';
+
+/** Root provider that wires the combobox + menu state together. */
+const MenuComboboxRoot = props => {
+  const {
+    children,
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen = false,
+    onSearchValueChange,
+    searchPlaceholder,
+    isFullScreenEnabled = false
+  } = props;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleSetOpen = useCallback(nextOpen => {
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onOpenChange]);
+  const handleSetValue = useCallback(value => {
+    startTransition(() => {
+      onSearchValueChange?.(value);
+    });
+  }, [onSearchValueChange]);
+  const contextValue = useMemo(() => ({
+    searchPlaceholder,
+    isFullScreenEnabled,
+    setOpen: handleSetOpen
+  }), [searchPlaceholder, isFullScreenEnabled, handleSetOpen]);
+  return jsx(MenuComboboxContext.Provider, {
+    value: contextValue,
+    children: jsx(ComboboxProvider, {
+      resetValueOnHide: true,
+      setValue: handleSetValue,
+      children: jsx(MenuProvider, {
+        open: isOpen,
+        setOpen: handleSetOpen,
+        children: children
+      })
+    })
+  });
+};
+MenuComboboxRoot.displayName = 'MenuComboboxRoot';
+
+export { MenuComboboxRoot };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-search.d.ts

@@ -0,0 +1,3 @@
+import { type MenuComboboxSearchProps } from './types';
+/** Filterable search input rendered inside the menu panel. */
+export declare const MenuComboboxSearch: import("react").ForwardRefExoticComponent<Omit<MenuComboboxSearchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-search.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Combobox } from '@ariakit/react';
+import { Search as Search$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { Search } from '@box/blueprint-web-assets/icons/Medium';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useMenuComboboxContext } from './menu-combobox-context.js';
+import styles from './menu-combobox.module.js';
+
+/** Filterable search input rendered inside the menu panel. */
+const MenuComboboxSearch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    placeholder,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props;
+  const {
+    searchPlaceholder: rootSearchPlaceholder
+  } = useMenuComboboxContext();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  const SearchIcon = enableModernizedComponents ? Search : Search$1;
+  const resolvedPlaceholder = placeholder ?? rootSearchPlaceholder;
+  return jsxs("span", {
+    className: styles.searchWrapper,
+    children: [jsx(SearchIcon, {
+      "aria-hidden": "true",
+      className: styles.searchIcon
+    }), jsx(Combobox, {
+      ref: forwardedRef,
+      "aria-label": ariaLabel,
+      autoSelect: true,
+      ...rest,
+      className: clsx(styles.search, enableModernizedComponents && styles.searchModern, className),
+      placeholder: resolvedPlaceholder
+    })]
+  });
+});
+MenuComboboxSearch.displayName = 'MenuComboboxSearch';
+
+export { MenuComboboxSearch };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-trigger.d.ts

@@ -0,0 +1,3 @@
+import { type MenuComboboxTriggerProps } from './types';
+/** Connects the menu disclosure to a single interactive child (asChild pattern). */
+export declare const MenuComboboxTrigger: import("react").ForwardRefExoticComponent<Omit<MenuComboboxTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-trigger.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { MenuButton } from '@ariakit/react';
+import { forwardRef, Children, isValidElement } from 'react';
+
+/** Connects the menu disclosure to a single interactive child (asChild pattern). */
+const MenuComboboxTrigger = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    render: renderProp,
+    ...rest
+  } = props;
+  const elements = Children.toArray(children).filter(isValidElement);
+  if (process.env.NODE_ENV !== 'production' && !renderProp && elements.length !== 1) {
+    // eslint-disable-next-line no-console
+    console.warn('MenuCombobox.Trigger expects a single element child so disclosure props can be merged into it. ' + `Received ${elements.length} element(s).`);
+  }
+  const renderFromChild = elements.length === 1 ? elements[0] : undefined;
+  const render = renderProp ?? renderFromChild;
+  return jsx(MenuButton, {
+    ref: forwardedRef,
+    ...rest,
+    render: render,
+    children: renderFromChild ? undefined : children
+  });
+});
+MenuComboboxTrigger.displayName = 'MenuComboboxTrigger';
+
+export { MenuComboboxTrigger };

package/dist/lib-esm/primitives/menu-combobox/menu-combobox.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"content":"bp_menu_combobox_module_content--6ad69","searchWrapper":"bp_menu_combobox_module_searchWrapper--6ad69","searchIcon":"bp_menu_combobox_module_searchIcon--6ad69","search":"bp_menu_combobox_module_search--6ad69","searchModern":"bp_menu_combobox_module_searchModern--6ad69","list":"bp_menu_combobox_module_list--6ad69","item":"bp_menu_combobox_module_item--6ad69","itemLabel":"bp_menu_combobox_module_itemLabel--6ad69","empty":"bp_menu_combobox_module_empty--6ad69","emptyModern":"bp_menu_combobox_module_emptyModern--6ad69","menuHeader":"bp_menu_combobox_module_menuHeader--6ad69","headerTextContent":"bp_menu_combobox_module_headerTextContent--6ad69","headerEllipsis":"bp_menu_combobox_module_headerEllipsis--6ad69","menuCloseButton":"bp_menu_combobox_module_menuCloseButton--6ad69"};
+
+export { styles as default };

package/dist/lib-esm/primitives/menu-combobox/types.d.ts

@@ -0,0 +1,36 @@
+import { type ComboboxItemProps as AriakitComboboxItemProps, type ComboboxListProps as AriakitComboboxListProps, type ComboboxProps as AriakitComboboxProps, type MenuButtonProps as AriakitMenuButtonProps, type MenuProps as AriakitMenuProps } from '@ariakit/react';
+import { type ComponentProps, type ReactNode } from 'react';
+export interface MenuComboboxRootProps {
+    children: ReactNode;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default false */
+    defaultOpen?: boolean;
+    /** Called as the search input value changes; use it to filter the rendered items. */
+    onSearchValueChange?: (value: string) => void;
+    /** Default placeholder for `MenuCombobox.Search`. */
+    searchPlaceholder?: string;
+    /** Render the panel as a full-screen mobile surface. @default false */
+    isFullScreenEnabled?: boolean;
+}
+export interface MenuComboboxTriggerProps extends Omit<AriakitMenuButtonProps, 'store'> {
+    /** A single interactive element to merge disclosure behavior into (asChild pattern). */
+    children: ReactNode;
+}
+export type MenuComboboxContentProps = Omit<AriakitMenuProps, 'store'>;
+export interface MenuComboboxSearchProps extends Omit<AriakitComboboxProps, 'store'> {
+    /** Required, localized accessible name for the search input. */
+    'aria-label': string;
+    /** Overrides `searchPlaceholder` from `MenuCombobox.Root`. */
+    placeholder?: string;
+}
+export interface MenuComboboxListProps extends Omit<AriakitComboboxListProps, 'store'> {
+    children: ReactNode;
+}
+export interface MenuComboboxItemProps extends Omit<AriakitComboboxItemProps, 'store'> {
+    children?: ReactNode;
+}
+export interface MenuComboboxEmptyProps extends ComponentProps<'div'> {
+    children: ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.14.0",
+    "version": "14.15.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.114.5",
+        "@box/blueprint-web-assets": "^4.114.6",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.17.47",
+        "@box/storybook-utils": "^0.17.48",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",