@box/blueprint-web 16.6.5 → 16.7.0

package/dist/lib-esm/elemental-breadcrumb/constants.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Internal geometry for ElementalBreadcrumb — path `d` strings exported verbatim
+ * from Figma (Elemental breadcrumb node 670:45540, file xZ1gAXsZ1rEAEGwv1whhel).
+ * The silhouettes are baked vector paths (12px rounded outer corners + a rounded
+ * chevron apex), NOT parametric rectangles, so they are copied as-is. They feed
+ * the SVG `viewBox` (unitless px); CSS box sizes convert to rem in the SCSS module.
+ *
+ * These are implementation details of this one component (not part of the public
+ * `@box/blueprint-web` surface), so they live here rather than in `types.ts`.
+ *
+ * Composition: the trailing (current) step is a plain rounded-right rectangle
+ * that sits BEHIND the leading (back) step. The leading step is rounded on the
+ * left with a chevron POINT on the right; it overlaps the trailing rectangle so
+ * the point reads as an interlocking seam.
+ */
+export declare const STEP_H = 40;
+/** Leading (back) step art: 56×40. Rounded-left corners; chevron POINT on the right. */
+export declare const LEADING_W = 56;
+/** Trailing (current) step art: 54×40. Plain rounded-right rectangle, square left edge. */
+export declare const TRAILING_W = 54;
+/** Leading step fill: rounded-left corners, SHARP chevron point at (56,20). */
+export declare const LEADING_PATH = "M40 0H12C5.37259 0 0 5.37258 0 12V28C0 34.6274 5.37259 40 12 40H40L56 20L40 0Z";
+/** Leading step hairline stroke (inside-stroke, inset 0.5px), SHARP apex at (55.36,20). */
+export declare const LEADING_STROKE_PATH = "M12 0.5C5.64873 0.5 0.5 5.64873 0.5 12V28C0.5 34.3513 5.64873 39.5 12 39.5H39.7598L55.3597 20L39.7598 0.5H12Z";
+/** Trailing step fill: plain rounded-right rectangle with a square left edge (viewBox 54). */
+export declare const TRAILING_PATH = "M0 0H42C48.6274 0 54 5.37258 54 12V28C54 34.6274 48.6274 40 42 40H0V0Z";
+/** SVG <linearGradient> handle coords per direction. */
+export declare const GRADIENT_COORDS: {
+    readonly vertical: {
+        readonly x1: 0;
+        readonly y1: 0;
+        readonly x2: 0;
+        readonly y2: 1;
+    };
+    readonly horizontal: {
+        readonly x1: 0;
+        readonly y1: 0;
+        readonly x2: 1;
+        readonly y2: 0;
+    };
+    readonly diagonal: {
+        readonly x1: 0;
+        readonly y1: 0;
+        readonly x2: 1;
+        readonly y2: 1;
+    };
+};

package/dist/lib-esm/elemental-breadcrumb/constants.js

@@ -0,0 +1,53 @@
+/**
+ * Internal geometry for ElementalBreadcrumb — path `d` strings exported verbatim
+ * from Figma (Elemental breadcrumb node 670:45540, file xZ1gAXsZ1rEAEGwv1whhel).
+ * The silhouettes are baked vector paths (12px rounded outer corners + a rounded
+ * chevron apex), NOT parametric rectangles, so they are copied as-is. They feed
+ * the SVG `viewBox` (unitless px); CSS box sizes convert to rem in the SCSS module.
+ *
+ * These are implementation details of this one component (not part of the public
+ * `@box/blueprint-web` surface), so they live here rather than in `types.ts`.
+ *
+ * Composition: the trailing (current) step is a plain rounded-right rectangle
+ * that sits BEHIND the leading (back) step. The leading step is rounded on the
+ * left with a chevron POINT on the right; it overlaps the trailing rectangle so
+ * the point reads as an interlocking seam.
+ */
+const STEP_H = 40;
+/** Leading (back) step art: 56×40. Rounded-left corners; chevron POINT on the right. */
+const LEADING_W = 56;
+/** Trailing (current) step art: 54×40. Plain rounded-right rectangle, square left edge. */
+const TRAILING_W = 54;
+// Leading step: rounded-left with a chevron POINT on the right. Figma's own export
+// rounds the apex (a cubic Bézier), leaving a ~2px notch where the point meets the
+// trailing step. We replace that curve with a SHARP vertex at the apex (56,20 for the
+// fill; ~55.36,20 for the inside-stroke) so the silhouette runs solid through the corner.
+/** Leading step fill: rounded-left corners, SHARP chevron point at (56,20). */
+const LEADING_PATH = 'M40 0H12C5.37259 0 0 5.37258 0 12V28C0 34.6274 5.37259 40 12 40H40L56 20L40 0Z';
+/** Leading step hairline stroke (inside-stroke, inset 0.5px), SHARP apex at (55.36,20). */
+const LEADING_STROKE_PATH = 'M12 0.5C5.64873 0.5 0.5 5.64873 0.5 12V28C0.5 34.3513 5.64873 39.5 12 39.5H39.7598L55.3597 20L39.7598 0.5H12Z';
+/** Trailing step fill: plain rounded-right rectangle with a square left edge (viewBox 54). */
+const TRAILING_PATH = 'M0 0H42C48.6274 0 54 5.37258 54 12V28C54 34.6274 48.6274 40 42 40H0V0Z';
+/** SVG <linearGradient> handle coords per direction. */
+const GRADIENT_COORDS = {
+  vertical: {
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 1
+  },
+  horizontal: {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 0
+  },
+  diagonal: {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 1
+  }
+};
+
+export { GRADIENT_COORDS, LEADING_PATH, LEADING_STROKE_PATH, LEADING_W, STEP_H, TRAILING_PATH, TRAILING_W };

package/dist/lib-esm/elemental-breadcrumb/elemental-breadcrumb.d.ts

@@ -0,0 +1,2 @@
+import { type ElementalBreadcrumbProps } from './types';
+export declare const ElementalBreadcrumb: import("react").ForwardRefExoticComponent<Omit<ElementalBreadcrumbProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/lib-esm/elemental-breadcrumb/elemental-breadcrumb.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { bpIconIconOnDark, bpSize060, bpIconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, useId, createElement } from 'react';
+import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
+import { LEADING_PATH, LEADING_STROKE_PATH, TRAILING_PATH, GRADIENT_COORDS, LEADING_W, STEP_H, TRAILING_W } from './constants.js';
+import styles from './elemental-breadcrumb.module.js';
+
+// The leading chevron apex is a SHARP point at the art's right edge (x = LEADING_W).
+// It must map flush to the box's right edge so the point stays sharp and butts against
+// the trailing step — so DON'T pad the right side. Pad only left/top/bottom by 1px so the
+// 1px inside hairline stroke isn't clipped by the SVG's overflow box.
+// (`preserveAspectRatio="none"` stretches viewBox → box, so any right padding would pull
+// the apex inward and let edge antialiasing round it off.)
+const LEADING_VIEW_BOX = `-1 -1 ${LEADING_W + 1} ${STEP_H + 2}`;
+const TRAILING_VIEW_BOX = `-1 -1 ${TRAILING_W + 2} ${STEP_H + 2}`;
+const renderCurrentStepPaint = (fill, gradientId) => {
+  if (fill.type === 'solid') {
+    return {
+      paint: fill.color,
+      defs: null
+    };
+  }
+  const {
+    x1,
+    y1,
+    x2,
+    y2
+  } = GRADIENT_COORDS[fill.direction ?? 'vertical'];
+  const lastStopIndex = fill.stops.length - 1;
+  return {
+    paint: `url(#${gradientId})`,
+    defs: jsx("linearGradient", {
+      id: gradientId,
+      x1: x1,
+      x2: x2,
+      y1: y1,
+      y2: y2,
+      children: fill.stops.map((stopColor, index) =>
+      // Key by index: `stops` may legitimately repeat a color, so the color alone is not unique.
+      jsx("stop", {
+        offset: index / lastStopIndex,
+        stopColor: stopColor
+      }, `${index}-${stopColor}`))
+    })
+  };
+};
+const ElementalBreadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    navAriaLabel,
+    backAriaLabel,
+    currentStepLabel,
+    backIcon,
+    currentIcon,
+    currentStepFill,
+    currentIconColor = bpIconIconOnDark,
+    onBack,
+    className,
+    ...rest
+  } = props;
+  const gradientId = useId();
+  const {
+    paint,
+    defs
+  } = renderCurrentStepPaint(currentStepFill, gradientId);
+  const backIconElement = /*#__PURE__*/createElement(backIcon, {
+    'aria-hidden': true,
+    className: clsx(styles.icon, styles.leadingIcon),
+    color: bpIconIconOnLightSecondary,
+    height: bpSize060,
+    width: bpSize060
+  });
+  const currentIconElement = /*#__PURE__*/createElement(currentIcon, {
+    'aria-hidden': true,
+    className: clsx(styles.icon, styles.trailingIcon),
+    color: currentIconColor,
+    height: bpSize060,
+    width: bpSize060
+  });
+  return jsx("nav", {
+    ref: forwardedRef,
+    "aria-label": navAriaLabel,
+    className: clsx(styles.nav, className),
+    ...rest,
+    children: jsxs("ol", {
+      className: styles.list,
+      children: [jsx("li", {
+        className: clsx(styles.step, styles.leadingStep),
+        children: jsxs("button", {
+          "aria-label": backAriaLabel,
+          className: styles.backButton,
+          onClick: onBack,
+          type: "button",
+          children: [jsxs("svg", {
+            "aria-hidden": "true",
+            className: styles.shape,
+            preserveAspectRatio: "none",
+            viewBox: LEADING_VIEW_BOX,
+            children: [jsx("path", {
+              className: styles.leadingShape,
+              d: LEADING_PATH
+            }), jsx("path", {
+              className: styles.leadingStroke,
+              d: LEADING_STROKE_PATH,
+              fill: "none",
+              strokeWidth: 1,
+              vectorEffect: "non-scaling-stroke"
+            })]
+          }), backIconElement]
+        })
+      }), jsxs("li", {
+        "aria-current": "page",
+        className: clsx(styles.step, styles.trailingStep),
+        children: [jsxs("svg", {
+          "aria-hidden": "true",
+          className: styles.shape,
+          preserveAspectRatio: "none",
+          viewBox: TRAILING_VIEW_BOX,
+          children: [defs && jsx("defs", {
+            children: defs
+          }), jsx("path", {
+            d: TRAILING_PATH,
+            fill: paint
+          })]
+        }), currentIconElement, jsx(VisuallyHidden, {
+          children: currentStepLabel
+        })]
+      })]
+    })
+  });
+});
+ElementalBreadcrumb.displayName = 'ElementalBreadcrumb';
+
+export { ElementalBreadcrumb };

package/dist/lib-esm/elemental-breadcrumb/elemental-breadcrumb.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"nav":"bp_elemental_breadcrumb_module_nav--06561","list":"bp_elemental_breadcrumb_module_list--06561","step":"bp_elemental_breadcrumb_module_step--06561","leadingStep":"bp_elemental_breadcrumb_module_leadingStep--06561","trailingStep":"bp_elemental_breadcrumb_module_trailingStep--06561","shape":"bp_elemental_breadcrumb_module_shape--06561","leadingShape":"bp_elemental_breadcrumb_module_leadingShape--06561","leadingStroke":"bp_elemental_breadcrumb_module_leadingStroke--06561","backButton":"bp_elemental_breadcrumb_module_backButton--06561","icon":"bp_elemental_breadcrumb_module_icon--06561","leadingIcon":"bp_elemental_breadcrumb_module_leadingIcon--06561","trailingIcon":"bp_elemental_breadcrumb_module_trailingIcon--06561"};
+
+export { styles as default };

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

@@ -0,0 +1,2 @@
+export { ElementalBreadcrumb } from './elemental-breadcrumb';
+export type { CurrentStepFill, ElementalBreadcrumbProps } from './types';

package/dist/lib-esm/elemental-breadcrumb/types.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentProps, type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+type BlueprintIcon = FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+/**
+ * Fill for the current (trailing, product) step. Each product supplies its own
+ * brand fill — the component bakes in no colors. Modeled as a discriminated
+ * union because products differ in BOTH fill type AND gradient direction:
+ *   - Extract:  diagonal gradient #FE03DC → #2784FA
+ *   - Forms:    SOLID #20A56E (no gradient)
+ *   - Automate: vertical gradient #F34936 → #F27621
+ *
+ * Values are rendered as SVG paint (a solid `fill` or an SVG `<linearGradient>`
+ * built from `stops`), NOT as a CSS `linear-gradient()` string — an SVG `fill`
+ * cannot consume one.
+ */
+export type CurrentStepFill = {
+    type: 'solid';
+    color: string;
+} | {
+    type: 'gradient';
+    /** 2+ gradient stops in paint order. Typed as a non-empty pair to keep offsets well-defined. */
+    stops: [string, string, ...string[]];
+    /**
+     * Gradient axis. Maps to SVG <linearGradient> handle coords.
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal' | 'diagonal';
+};
+export type ElementalBreadcrumbProps = Omit<ComponentProps<'nav'>, 'aria-label'> & {
+    /** Accessible label for the <nav> landmark. e.g. "Breadcrumb". Required — Blueprint is globalization-agnostic. */
+    navAriaLabel: string;
+    /**
+     * Accessible label for the interactive leading (back) step. REQUIRED — the
+     * component never derives it. The consumer must pass a meaningful, context-
+     * specific label that names where the back step leads (e.g. "Go back to apps",
+     * "Go back to Documents"), because the leading step only renders an icon and
+     * has no visible text. Blueprint is globalization-agnostic, so this is a plain
+     * (already-localized) string, not an i18n key.
+     */
+    backAriaLabel: string;
+    /** Accessible name for the current (trailing, non-interactive) step. e.g. "Extract Agent". */
+    currentStepLabel: string;
+    /** Icon rendered inside the leading (back) step. */
+    backIcon: BlueprintIcon;
+    /** Icon rendered inside the trailing (current) step. */
+    currentIcon: BlueprintIcon;
+    /** Product-specific fill for the current step (solid or gradient). See CurrentStepFill. */
+    currentStepFill: CurrentStepFill;
+    /**
+     * Icon color on the current step. Choose for contrast against
+     * `currentStepFill` (consumer's responsibility — axe checks in tests).
+     * @default '#fff'
+     */
+    currentIconColor?: string;
+    /** Invoked when the user activates the leading step (behaves as a back button). */
+    onBack: () => void;
+};
+export {};

package/dist/lib-esm/index.css

@@ -7065,6 +7065,84 @@
 .bp_date_picker_module_datePickerPopoverContent--ee85f{
   z-index:380;
 }
+
+.bp_elemental_breadcrumb_module_nav--06561{
+  display:inline-flex;
+}
+
+.bp_elemental_breadcrumb_module_list--06561{
+  height:2.5rem;
+  list-style:none;
+  margin:0;
+  padding:0;
+  position:relative;
+  width:5.875rem;
+}
+
+.bp_elemental_breadcrumb_module_step--06561{
+  height:2.5rem;
+  position:absolute;
+  top:0;
+}
+
+.bp_elemental_breadcrumb_module_leadingStep--06561{
+  left:0;
+  width:3.5rem;
+  z-index:1;
+}
+
+.bp_elemental_breadcrumb_module_trailingStep--06561{
+  left:2.5rem;
+  width:3.375rem;
+}
+
+.bp_elemental_breadcrumb_module_shape--06561{
+  height:100%;
+  inset:0;
+  position:absolute;
+  width:100%;
+}
+
+.bp_elemental_breadcrumb_module_leadingShape--06561{
+  fill:var(--bp-surface-surface);
+}
+
+.bp_elemental_breadcrumb_module_leadingStroke--06561{
+  stroke:var(--blueprint-elemental-breadcrumb-hairline, #0000001f);
+}
+
+.bp_elemental_breadcrumb_module_backButton--06561{
+  background:none;
+  border:none;
+  cursor:pointer;
+  display:block;
+  height:100%;
+  padding:0;
+  width:100%;
+}
+.bp_elemental_breadcrumb_module_backButton--06561:focus-visible{
+  border-radius:var(--bp-radius-05);
+  outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  outline-offset:var(--bp-space-005);
+}
+.bp_elemental_breadcrumb_module_backButton--06561:hover .bp_elemental_breadcrumb_module_leadingShape--06561{
+  fill:var(--bp-surface-surface-hover);
+}
+
+.bp_elemental_breadcrumb_module_icon--06561{
+  pointer-events:none;
+  position:absolute;
+  top:50%;
+  transform:translateY(-50%);
+}
+
+.bp_elemental_breadcrumb_module_leadingIcon--06561{
+  left:var(--bp-space-030);
+}
+
+.bp_elemental_breadcrumb_module_trailingIcon--06561{
+  right:var(--bp-space-030);
+}
 .bp_empty_state_module_emptyState--dd02f{
   align-items:center;
   display:flex;

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

@@ -19,6 +19,7 @@ export * from './content-card';
 export * from './data-table/data-table';
 export * from './date-picker';
 export * from './divider';
+export * from './elemental-breadcrumb';
 export * from './ellipsizable-text';
 export * from './empty-state';
 export * from './focusable';

package/dist/lib-esm/index.js

@@ -28,6 +28,7 @@ export { ContentCard } from './content-card/content-card.js';
 export { DataTableWrapper, StickyCell } from './data-table/data-table.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { Divider } from './divider/divider.js';
+export { ElementalBreadcrumb } from './elemental-breadcrumb/elemental-breadcrumb.js';
 export { EllipsizableText } from './ellipsizable-text/ellipsizable-text.js';
 export { EmptyState } from './empty-state/empty-state.js';
 export { Focusable } from './focusable/focusable.js';
@@ -117,7 +118,7 @@ export { useFullTextTooltip } from './utils/useFullTextTooltip.js';
 export { useIsEllipsized } from './utils/useIsEllipsized.js';
 export { getUniqueId, useUniqueId } from './utils/useUniqueId.js';
 export { VisuallyHidden } from './visually-hidden/visually-hidden.js';
-export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal } from './page/page-portal.js';
+export { PageGlobalHeaderSearchContainerPortal, PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal } from './page/page-portal.js';
 export { useMainSectionSidebar, usePageNavigation, useSidePanel } from './page/page-context.js';
 export { useNotification } from './primitives/notification/notification-provider.js';
 export { useTabs } from './primitives/tabs/use-tabs.js';

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

@@ -1,6 +1,6 @@
 export { useMainSectionSidebar, usePageNavigation, useSidePanel } from './page-context';
 export type { PagePortalRefs } from './page-context';
-export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal, } from './page-portal';
+export { PageGlobalHeaderSearchContainerPortal, PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal, } from './page-portal';
 export type { PagePortalProps } from './page-portal';
 export * from './types';
 export declare const Page: import("react").ForwardRefExoticComponent<import("./types").PageLayoutProps & import("react").RefAttributes<HTMLDivElement>> & {
@@ -11,7 +11,7 @@ export declare const Page: import("react").ForwardRefExoticComponent<import("./t
     /**
      * Top level header landmark placed at the top of the page.
      * It should contain two subcomponents:
-     * - PageGlobalHeader.SearchContainer
+     * - PageGlobalHeader.SearchContainer (content can be portaled here using PageGlobalHeaderSearchContainerPortal)
      * - PageGlobalHeader.SideContentContainer
      */
     GlobalHeader: import("react").ForwardRefExoticComponent<import("./types").PageGlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {

package/dist/lib-esm/page/index.js

@@ -8,7 +8,7 @@ import { PageSubNavigation } from './page-subnavigation.js';
 import 'react';
 import 'react/jsx-runtime';
 import '../utils/useBreakpoint.js';
-export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal } from './page-portal.js';
+export { PageGlobalHeaderSearchContainerPortal, PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal } from './page-portal.js';
 
 const Page = Object.assign(PageRoot, {
   /**
@@ -18,7 +18,7 @@ const Page = Object.assign(PageRoot, {
   /**
    * Top level header landmark placed at the top of the page.
    * It should contain two subcomponents:
-   * - PageGlobalHeader.SearchContainer
+   * - PageGlobalHeader.SearchContainer (content can be portaled here using PageGlobalHeaderSearchContainerPortal)
    * - PageGlobalHeader.SideContentContainer
    */
   GlobalHeader: PageGlobalHeader,

package/dist/lib-esm/page/page-context.d.ts

@@ -4,6 +4,8 @@ export interface PagePortalRefs {
     pageHeaderStartElementsRef: HTMLDivElement | null;
     /** Reference to the PageHeader.EndElements container */
     pageHeaderEndElementsRef: HTMLDivElement | null;
+    /** Reference to the Page.GlobalHeader.SearchContainer */
+    globalHeaderSearchContainerRef: HTMLDivElement | null;
     /** Reference to the PageSubNavigation container */
     pageSubNavigationRef: HTMLDivElement | null;
     /** Reference to the Page.SidePanel container */

package/dist/lib-esm/page/page-context.js

@@ -18,6 +18,7 @@ const {
   pageContainer: null,
   pageHeaderStartElementsRef: null,
   pageHeaderEndElementsRef: null,
+  globalHeaderSearchContainerRef: null,
   pageSubNavigationRef: null,
   pageSidePanelRef: null
 });

package/dist/lib-esm/page/page-global-header-search-container.js

@@ -1,15 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { usePageStoreRef } from './page-context.js';
 import styles from './page.module.js';
 
 const SearchContainer = /*#__PURE__*/forwardRef(({
   className,
   ...rest
-}, ref) => {
+}, forwardedRef) => {
+  const setRef = usePageStoreRef('globalHeaderSearchContainerRef', forwardedRef);
   return jsx("div", {
     ...rest,
-    ref: ref,
+    ref: setRef,
     className: clsx(styles.searchContainer, className),
     role: "search"
   });

package/dist/lib-esm/page/page-portal.d.ts

@@ -62,3 +62,15 @@ export declare const PageSubNavigationPortal: import("react").ForwardRefExoticCo
  * ```
  */
 export declare const PageSidePanelPortal: import("react").ForwardRefExoticComponent<PagePortalProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Portal to Page.GlobalHeader.SearchContainer
+ * Use this to render global search from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageGlobalHeaderSearchContainerPortal isPortalActive={featureEnabled}>
+ *   <QuickSearch />
+ * </PageGlobalHeaderSearchContainerPortal>
+ * ```
+ */
+export declare const PageGlobalHeaderSearchContainerPortal: import("react").ForwardRefExoticComponent<PagePortalProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/page/page-portal.js

@@ -91,5 +91,17 @@ const PageSubNavigationPortal = createPagePortal('pageSubNavigationRef', 'PageSu
  * ```
  */
 const PageSidePanelPortal = createPagePortal('pageSidePanelRef', 'PageSidePanelPortal');
+/**
+ * Portal to Page.GlobalHeader.SearchContainer
+ * Use this to render global search from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageGlobalHeaderSearchContainerPortal isPortalActive={featureEnabled}>
+ *   <QuickSearch />
+ * </PageGlobalHeaderSearchContainerPortal>
+ * ```
+ */
+const PageGlobalHeaderSearchContainerPortal = createPagePortal('globalHeaderSearchContainerRef', 'PageGlobalHeaderSearchContainerPortal');
 
-export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal };
+export { PageGlobalHeaderSearchContainerPortal, PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.6.5",
+    "version": "16.7.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": "^5.4.0",
+        "@box/blueprint-web-assets": "^5.4.1",
         "@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": "^1.1.19",
+        "@box/storybook-utils": "^1.1.20",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",