@box/blueprint-web 12.119.0 → 12.121.0

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

@@ -34,6 +34,7 @@ export * from './inline-notice/inline-notice';
 export * from './inline-table/inline-table';
 export * from './input-chip';
 export * from './large-list-item';
+export * from './large-list-v2';
 export * from './list-item/list-item';
 export * from './loading-indicator/loading-indicator';
 export * from './modal';

package/dist/lib-esm/index.js

@@ -42,6 +42,7 @@ export { InlineNotice } from './inline-notice/inline-notice.js';
 export { InlineTable } from './inline-table/inline-table.js';
 export { InputChip } from './input-chip/input-chip.js';
 export { LargeList } from './large-list-item/index.js';
+export { LargeListV2 } from './large-list-v2/index.js';
 export { ActionCell, Cell, Column, DropIndicator, Row, Table, TableBody, TableHeader } from './list-item/list-item.js';
 export { LoadingIndicator } from './loading-indicator/loading-indicator.js';
 export { AlertModal } from './modal/alert-modal.js';
@@ -114,5 +115,6 @@ export { useIsEllipsized } from './utils/useIsEllipsized.js';
 export { getUniqueId, useUniqueId } from './utils/useUniqueId.js';
 export { VisuallyHidden } from './visually-hidden/visually-hidden.js';
 export { useMainSectionSidebar, usePageNavigation } from './page/page-context.js';
+export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSubNavigationPortal } from './page/page-portal.js';
 export { useNotification } from './primitives/notification/notification-provider.js';
 export { useTabs } from './primitives/tabs/use-tabs.js';

package/dist/lib-esm/large-list-v2/index.d.ts

@@ -0,0 +1,42 @@
+export type { LargeListV2ActionIconButtonProps, LargeListV2ActionsProps, LargeListV2HeaderProps, LargeListV2ItemProps, LargeListV2Props, LargeListV2SubtitleProps, LargeListV2ThumbnailProps, } from './types';
+/**
+ * LargeListV2 - A modernized horizontal list component for displaying items in a compact row layout.
+ *
+ * @example
+ * ```tsx
+ * <LargeListV2 aria-label="Files" selectionMode="multiple">
+ *     <LargeListV2.Item id="1" textValue="Document.pdf">
+ *         <LargeListV2.Thumbnail fileExtension="pdf" fileCategory="pdf">
+ *             <img src="/thumbnail.jpg" alt="Document preview" />
+ *         </LargeListV2.Thumbnail>
+ *         <LargeListV2.Content>
+ *             <LargeListV2.Header>Document.pdf</LargeListV2.Header>
+ *             <LargeListV2.Subtitle>Modified 2 days ago</LargeListV2.Subtitle>
+ *         </LargeListV2.Content>
+ *         <LargeListV2.Actions>
+ *             <LargeListV2.ActionIconButton icon={MoreIcon} aria-label="More actions" />
+ *         </LargeListV2.Actions>
+ *     </LargeListV2.Item>
+ * </LargeListV2>
+ * ```
+ */
+export declare const LargeListV2: import("react").ForwardRefExoticComponent<import("./types").LargeListV2Props & import("react").RefAttributes<HTMLDivElement>> & {
+    /** An individual item in the list. */
+    Item: import("react").ForwardRefExoticComponent<import("../util-components/base-grid-list-item").BaseGridListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    /** Styled wrapper for the thumbnail/icon (4:3 aspect ratio). */
+    Thumbnail: import("react").ForwardRefExoticComponent<Omit<import("../util-components/base-grid-list-item").BaseGridListThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /** Content wrapper that groups header and subtitle. */
+    Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /** Title/name of the item (15px/20px). */
+    Header: import("react").ForwardRefExoticComponent<Omit<import("../util-components/base-grid-list-item").BaseGridListHeaderProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    /** Secondary text below the header (13px/20px). */
+    Subtitle: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    /** Container for action buttons and selection checkbox. */
+    Actions: import("react").ForwardRefExoticComponent<Omit<import("../util-components/base-grid-list-item").BaseGridListActionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /** Icon button for item actions (32x32px). */
+    ActionIconButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/icon-button/types").IconButtonVariantsProps, "ref"> | Omit<import("../primitives/icon-button/types").IconButtonSmallUtilityVariantProps, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/lib-esm/large-list-v2/index.js

@@ -0,0 +1,47 @@
+import { BaseGridListItem } from '../util-components/base-grid-list-item/base-grid-list-item.js';
+import { BaseGridListActionIconButton, BaseGridListActions } from '../util-components/base-grid-list-item/base-grid-list-item-actions.js';
+import { BaseGridListHeader } from '../util-components/base-grid-list-item/base-grid-list-item-header.js';
+import { BaseGridListSubtitle } from '../util-components/base-grid-list-item/base-grid-list-item-subtitle.js';
+import { BaseGridListThumbnail } from '../util-components/base-grid-list-item/base-grid-list-item-thumbnail.js';
+import { LargeListV2Root } from './large-list-v2.js';
+import { LargeListV2Content } from './large-list-v2-content.js';
+
+/**
+ * LargeListV2 - A modernized horizontal list component for displaying items in a compact row layout.
+ *
+ * @example
+ * ```tsx
+ * <LargeListV2 aria-label="Files" selectionMode="multiple">
+ *     <LargeListV2.Item id="1" textValue="Document.pdf">
+ *         <LargeListV2.Thumbnail fileExtension="pdf" fileCategory="pdf">
+ *             <img src="/thumbnail.jpg" alt="Document preview" />
+ *         </LargeListV2.Thumbnail>
+ *         <LargeListV2.Content>
+ *             <LargeListV2.Header>Document.pdf</LargeListV2.Header>
+ *             <LargeListV2.Subtitle>Modified 2 days ago</LargeListV2.Subtitle>
+ *         </LargeListV2.Content>
+ *         <LargeListV2.Actions>
+ *             <LargeListV2.ActionIconButton icon={MoreIcon} aria-label="More actions" />
+ *         </LargeListV2.Actions>
+ *     </LargeListV2.Item>
+ * </LargeListV2>
+ * ```
+ */
+const LargeListV2 = Object.assign(LargeListV2Root, {
+  /** An individual item in the list. */
+  Item: BaseGridListItem,
+  /** Styled wrapper for the thumbnail/icon (4:3 aspect ratio). */
+  Thumbnail: BaseGridListThumbnail,
+  /** Content wrapper that groups header and subtitle. */
+  Content: LargeListV2Content,
+  /** Title/name of the item (15px/20px). */
+  Header: BaseGridListHeader,
+  /** Secondary text below the header (13px/20px). */
+  Subtitle: BaseGridListSubtitle,
+  /** Container for action buttons and selection checkbox. */
+  Actions: BaseGridListActions,
+  /** Icon button for item actions (32x32px). */
+  ActionIconButton: BaseGridListActionIconButton
+});
+
+export { LargeListV2 };

package/dist/lib-esm/large-list-v2/large-list-v2-content.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Content wrapper for LargeListV2 items.
+ * Groups the header and subtitle in a vertical stack.
+ */
+export declare const LargeListV2Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/large-list-v2/large-list-v2-content.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styles from '../util-components/base-grid-list-item/base-grid-list-item.module.js';
+
+/**
+ * Content wrapper for LargeListV2 items.
+ * Groups the header and subtitle in a vertical stack.
+ */
+const LargeListV2Content = /*#__PURE__*/forwardRef(function LargeListV2Content(props, ref) {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    className: `${styles.content} ${className ?? ''}`,
+    children: children
+  });
+});
+
+export { LargeListV2Content };

package/dist/lib-esm/large-list-v2/large-list-v2.d.ts

@@ -0,0 +1,9 @@
+import { type LargeListV2Props } from './types';
+/**
+ * LargeListV2 is a modernized horizontal list component for displaying items in a compact row layout.
+ * Each item displays a thumbnail on the left, content (title/subtitle) in the middle,
+ * and actions on the right.
+ *
+ * This component ships post-UI-Uplift and uses modern Blueprint tokens by default.
+ */
+export declare const LargeListV2Root: import("react").ForwardRefExoticComponent<LargeListV2Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/large-list-v2/large-list-v2.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BaseGridList } from '../util-components/base-grid-list-item/base-grid-list.js';
+
+/**
+ * LargeListV2 is a modernized horizontal list component for displaying items in a compact row layout.
+ * Each item displays a thumbnail on the left, content (title/subtitle) in the middle,
+ * and actions on the right.
+ *
+ * This component ships post-UI-Uplift and uses modern Blueprint tokens by default.
+ */
+const LargeListV2Root = /*#__PURE__*/forwardRef(function LargeListV2(props, forwardedRef) {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(BaseGridList, {
+    ...rest,
+    ref: forwardedRef,
+    layoutStyle: "list-v2",
+    children: children
+  });
+});
+
+export { LargeListV2Root };

package/dist/lib-esm/large-list-v2/types.d.ts

@@ -0,0 +1,8 @@
+import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../util-components/base-grid-list-item/types';
+export type LargeListV2Props = Omit<BaseGridListProps, 'layoutStyle' | 'centerText' | 'variant'>;
+export type LargeListV2ItemProps = BaseGridListItemProps;
+export type LargeListV2ThumbnailProps = BaseGridListThumbnailProps;
+export type LargeListV2HeaderProps = BaseGridListHeaderProps;
+export type LargeListV2SubtitleProps = BaseGridListSubtitleProps;
+export type LargeListV2ActionsProps = BaseGridListActionsProps;
+export type LargeListV2ActionIconButtonProps = BaseGridListActionIconButtonProps;

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

@@ -1,4 +1,7 @@
 export { useMainSectionSidebar, usePageNavigation } from './page-context';
+export type { PagePortalRefs } from './page-context';
+export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, 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>> & {
     /**
@@ -27,10 +30,13 @@ export declare const Page: import("react").ForwardRefExoticComponent<import("./t
     };
     /**
      * Sub navigation area of the page.
+     * Content can be portaled here using PageSubNavigationPortal from child routes.
      */
     SubNavigation: import("react").ForwardRefExoticComponent<import("./types").PageSubNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * Page header with title and actions.
+     * Content can be portaled to StartElements and EndElements using
+     * PageHeaderStartElementsPortal and PageHeaderEndElementsPortal from child routes.
      */
     PageHeader: ((props: import("./types").PagePageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         StartElements: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -4,8 +4,9 @@ import { PageNavigation } from './page-navigation.js';
 import { PagePageHeader } from './page-page-header.js';
 import { PageRoot } from './page-root.js';
 import { PageSubNavigation } from './page-subnavigation.js';
-import 'react/jsx-runtime';
 import 'react';
+import 'react/jsx-runtime';
+export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSubNavigationPortal } from './page-portal.js';
 
 const Page = Object.assign(PageRoot, {
   /**
@@ -28,10 +29,13 @@ const Page = Object.assign(PageRoot, {
   MainSection,
   /**
    * Sub navigation area of the page.
+   * Content can be portaled here using PageSubNavigationPortal from child routes.
    */
   SubNavigation: PageSubNavigation,
   /**
    * Page header with title and actions.
+   * Content can be portaled to StartElements and EndElements using
+   * PageHeaderStartElementsPortal and PageHeaderEndElementsPortal from child routes.
    */
   PageHeader: PagePageHeader
 });

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

@@ -1,4 +1,13 @@
-export interface PageFastContextValuesType {
+import { type ForwardedRef } from 'react';
+export interface PagePortalRefs {
+    /** Reference to the PageHeader.StartElements container */
+    pageHeaderStartElementsRef: HTMLDivElement | null;
+    /** Reference to the PageHeader.EndElements container */
+    pageHeaderEndElementsRef: HTMLDivElement | null;
+    /** Reference to the PageSubNavigation container */
+    pageSubNavigationRef: HTMLDivElement | null;
+}
+export interface PageFastContextValuesType extends PagePortalRefs {
     navigationExpanded: boolean;
     pageContainer: HTMLElement | null;
     globalHeaderContainer: HTMLDivElement | null;
@@ -6,7 +15,7 @@ export interface PageFastContextValuesType {
 }
 export declare const PageProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, usePageStore: <SelectorOutput>(selector: (store: PageFastContextValuesType) => SelectorOutput) => [SelectorOutput, (value: Partial<PageFastContextValuesType>) => void], usePageStoreSetter: () => (value: Partial<PageFastContextValuesType>) => void;
+}) => import("react/jsx-runtime").JSX.Element, usePageStore: <SelectorOutput>(selector: (store: PageFastContextValuesType) => SelectorOutput) => [SelectorOutput, (value: Partial<PageFastContextValuesType>) => void], usePageStoreSafe: <SelectorOutput>(selector: (store: PageFastContextValuesType) => SelectorOutput) => [SelectorOutput, (value: Partial<PageFastContextValuesType>) => void] | null, usePageStoreSetter: () => (value: Partial<PageFastContextValuesType>) => void, usePageStoreSetterSafe: () => ((value: Partial<PageFastContextValuesType>) => void) | null;
 export declare const usePageNavigation: () => {
     navigationExpanded: boolean;
     setNavigationExpanded: (expanded: boolean) => void;
@@ -17,3 +26,11 @@ export declare const useMainSectionSidebar: () => {
     setMainSectionSidebarVisible: (visible: boolean) => void;
     toggleMainSectionSidebarVisible: () => void;
 };
+/**
+ * Hook that creates a callback ref which stores the node in the PageStore
+ * and forwards it to an optional forwardedRef.
+ *
+ * Works both with and without a PageProvider - when used standalone,
+ * it simply forwards the ref without storing it.
+ */
+export declare function usePageStoreRef<T extends HTMLElement>(storeKey: keyof PagePortalRefs, forwardedRef: ForwardedRef<T>): (node: T | null) => void;

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

@@ -1,14 +1,20 @@
+import { useCallback } from 'react';
 import { createFastContext } from '../utils/fast-context.js';
 
 const {
   Provider: PageProvider,
   useStore: usePageStore,
-  useStoreSetter: usePageStoreSetter
+  useStoreSafe: usePageStoreSafe,
+  useStoreSetter: usePageStoreSetter,
+  useStoreSetterSafe: usePageStoreSetterSafe
 } = createFastContext({
   globalHeaderContainer: null,
   mainSectionSidebarVisible: true,
   navigationExpanded: true,
-  pageContainer: null
+  pageContainer: null,
+  pageHeaderStartElementsRef: null,
+  pageHeaderEndElementsRef: null,
+  pageSubNavigationRef: null
 });
 const usePageNavigation = () => {
   const [navigationExpanded, setPageStore] = usePageStore(store => store.navigationExpanded);
@@ -46,5 +52,25 @@ const useMainSectionSidebar = () => {
     toggleMainSectionSidebarVisible
   };
 };
+/**
+ * Hook that creates a callback ref which stores the node in the PageStore
+ * and forwards it to an optional forwardedRef.
+ *
+ * Works both with and without a PageProvider - when used standalone,
+ * it simply forwards the ref without storing it.
+ */
+function usePageStoreRef(storeKey, forwardedRef) {
+  const setPageStore = usePageStoreSetterSafe();
+  return useCallback(node => {
+    setPageStore?.({
+      [storeKey]: node
+    });
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef, setPageStore, storeKey]);
+}
 
-export { PageProvider, useMainSectionSidebar, usePageNavigation, usePageStore, usePageStoreSetter };
+export { PageProvider, useMainSectionSidebar, usePageNavigation, usePageStore, usePageStoreRef, usePageStoreSafe, usePageStoreSetter, usePageStoreSetterSafe };

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

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+export interface PagePortalProps {
+    /** Content to render in the portal target location. */
+    children: ReactNode;
+    /**
+     * Content to render before the portal target is available (e.g., during SSR or before mount).
+     * @default null
+     */
+    fallback?: ReactNode;
+    /**
+     * When `true`, children are portaled to the target Page slot.
+     * When `false`, children render in place without portaling (useful for feature flags or gradual migration).
+     * @default true
+     */
+    isPortalActive?: boolean;
+}
+/**
+ * Portal to Page.PageHeader.StartElements
+ * Use this to render breadcrumbs, titles, etc. from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageHeaderStartElementsPortal isPortalActive={featureEnabled}>
+ *   <Breadcrumb>Home / Settings</Breadcrumb>
+ * </PageHeaderStartElementsPortal>
+ * ```
+ */
+export declare const PageHeaderStartElementsPortal: import("react").ForwardRefExoticComponent<PagePortalProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Portal to Page.PageHeader.EndElements
+ * Use this to render action buttons, status indicators, etc. from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageHeaderEndElementsPortal isPortalActive={featureEnabled}>
+ *   <Button>Save</Button>
+ * </PageHeaderEndElementsPortal>
+ * ```
+ */
+export declare const PageHeaderEndElementsPortal: import("react").ForwardRefExoticComponent<PagePortalProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Portal to Page.SubNavigation
+ * Use this to render sub-tabs, secondary navigation, etc. from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageSubNavigationPortal isPortalActive={featureEnabled}>
+ *   <ExistingSubNavigation />
+ * </PageSubNavigationPortal>
+ * ```
+ */
+export declare const PageSubNavigationPortal: import("react").ForwardRefExoticComponent<PagePortalProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,83 @@
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { usePageStoreSafe } from './page-context.js';
+
+/**
+ * Creates a portal component for a specific Page destination.
+ * Caches the last valid ref to prevent flashing during route transitions.
+ */
+const createPagePortal = (refKey, displayName) => {
+  const Component = /*#__PURE__*/forwardRef(({
+    children,
+    fallback = null,
+    isPortalActive = true
+  }, forwardedRef) => {
+    const [mounted, setMounted] = useState(false);
+    const storeResult = usePageStoreSafe(store => store[refKey]);
+    const targetRef = storeResult?.[0] ?? null;
+    const cachedRef = useRef(null);
+    if (targetRef) {
+      cachedRef.current = targetRef;
+    }
+    useEffect(() => {
+      const target = targetRef || cachedRef.current;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(target);
+      } else if (forwardedRef) {
+        forwardedRef.current = target;
+      }
+    }, [targetRef, forwardedRef]);
+    useEffect(() => {
+      setMounted(true);
+    }, []);
+    // If no PageProvider or portal is disabled, render children in place
+    if (!storeResult || !isPortalActive) {
+      return children;
+    }
+    const portalTarget = targetRef || cachedRef.current;
+    if (!mounted || !portalTarget) {
+      return fallback;
+    }
+    return /*#__PURE__*/createPortal(children, portalTarget);
+  });
+  Component.displayName = displayName;
+  return Component;
+};
+/**
+ * Portal to Page.PageHeader.StartElements
+ * Use this to render breadcrumbs, titles, etc. from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageHeaderStartElementsPortal isPortalActive={featureEnabled}>
+ *   <Breadcrumb>Home / Settings</Breadcrumb>
+ * </PageHeaderStartElementsPortal>
+ * ```
+ */
+const PageHeaderStartElementsPortal = createPagePortal('pageHeaderStartElementsRef', 'PageHeaderStartElementsPortal');
+/**
+ * Portal to Page.PageHeader.EndElements
+ * Use this to render action buttons, status indicators, etc. from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageHeaderEndElementsPortal isPortalActive={featureEnabled}>
+ *   <Button>Save</Button>
+ * </PageHeaderEndElementsPortal>
+ * ```
+ */
+const PageHeaderEndElementsPortal = createPagePortal('pageHeaderEndElementsRef', 'PageHeaderEndElementsPortal');
+/**
+ * Portal to Page.SubNavigation
+ * Use this to render sub-tabs, secondary navigation, etc. from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageSubNavigationPortal isPortalActive={featureEnabled}>
+ *   <ExistingSubNavigation />
+ * </PageSubNavigationPortal>
+ * ```
+ */
+const PageSubNavigationPortal = createPagePortal('pageSubNavigationRef', 'PageSubNavigationPortal');
+
+export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSubNavigationPortal };

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

@@ -1,15 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { usePageStoreRef } from './page-context.js';
 
 const PageSubNavigation = /*#__PURE__*/forwardRef(({
   className,
   ...rest
 }, forwardedRef) => {
+  const setRef = usePageStoreRef('pageSubNavigationRef', forwardedRef);
   return jsx("div", {
     ...rest,
-    ref: forwardedRef,
+    ref: setRef,
     className: className
   });
 });
+PageSubNavigation.displayName = 'PageSubNavigation';
 
 export { PageSubNavigation };

package/dist/lib-esm/primitives/page-header/page-header.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { usePageStoreRef } from '../../page/page-context.js';
 import styles from './page-header.module.js';
 
 const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -48,9 +49,10 @@ const PageHeaderStartElements = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     children,
     ...rest
   } = props;
+  const setRef = usePageStoreRef('pageHeaderStartElementsRef', forwardedRef);
   return jsx("div", {
     ...rest,
-    ref: forwardedRef,
+    ref: setRef,
     className: clsx(styles.startElements, className),
     children: children
   });
@@ -61,13 +63,17 @@ const PageHeaderEndElements = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
+  const setRef = usePageStoreRef('pageHeaderEndElementsRef', forwardedRef);
   return jsx("div", {
     ...rest,
-    ref: forwardedRef,
+    ref: setRef,
     className: clsx(styles.endElements, className),
     children: children
   });
 });
+PageHeaderStartElements.displayName = 'PageHeaderStartElements';
+PageHeaderEndElements.displayName = 'PageHeaderEndElements';
+PageHeaderCorner.displayName = 'PageHeaderCorner';
 const PageHeader = {
   Root: PageHeaderRoot,
   StartElements: PageHeaderStartElements,

package/dist/lib-esm/text-button/text-button.js

@@ -15,6 +15,7 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
     icon,
     inheritFont,
     className,
+    textRef,
     ...rest
   } = getButtonOptions(props);
   const {
@@ -31,6 +32,7 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
     }, className),
     "data-modern": enableModernizedComponents ? 'true' : 'false',
     children: [jsx("span", {
+      ref: textRef,
       className: clsx({
         [styles.hideTextContent]: loading
       }),

package/dist/lib-esm/text-button/types.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
-import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type FunctionComponent, type PropsWithChildren, type Ref, type SVGProps } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
 export interface Loading {
     /** Whether the button is loading. */
@@ -20,5 +20,11 @@ export interface TextButtonBase extends AriakitButtonProps {
      * When property is falsy, button uses default style.
      * */
     inheritFont?: boolean;
+    /**
+     * Ref to the inner span element that wraps the text content.
+     *
+     * Useful for measuring text overflow with hooks like `useIsEllipsized`.
+     */
+    textRef?: Ref<HTMLSpanElement>;
 }
 export type TextButtonProps = TextButtonBase & RequireAllOrNone<Loading, keyof Loading>;

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item-actions.js

@@ -120,7 +120,7 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
   if (loading) {
     return null;
   }
-  const isList = layoutStyle === 'list' || layoutStyle === 'small-list';
+  const isList = layoutStyle === 'list' || layoutStyle === 'list-v2' || layoutStyle === 'small-list';
   const isGridV2 = layoutStyle === 'grid-v2';
   const isSelectionEnabled = selectionMode === 'multiple';
   const isRenderPropUsed = typeof children === 'function';

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item-thumbnail.js

@@ -125,7 +125,7 @@ const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumb
         style: extensionColor ? {
           color: extensionColor
         } : undefined,
-        variant: "caption",
+        variant: "captionBold",
         children: normalizedExtension
       })]
     })]