@box/blueprint-web 16.1.4 → 16.3.0

package/dist/lib-esm/index.css

@@ -9384,7 +9384,8 @@ table.bp_inline_table_module_inlineTable--b2041[data-modern=true] td:last-child,
 .bp_navigation_menu_module_navigationMenuSeparator--8f207{
   margin-block:var(--space-2);
 }
-.bp_page_module_page--f0685[data-modern=false]{
+
+.bp_page_module_page--32d56[data-modern=false]{
   --page-navigation-width-collapsed:var(--space-20);
   --page-navigation-width-expanded:calc(var(--space-20)*3);
   --page-viewport-inline-space:var(--space-8);
@@ -9398,9 +9399,10 @@ table.bp_inline_table_module_inlineTable--b2041[data-modern=true] td:last-child,
   --page-medium-global-header-fixed-size-section-height:var(--space-16);
   --page-medium-global-header-fixed-size-section-collapsed:var(--space-16);
   --page-medium-page-main-padding-inline:var(--space-4);
+  --page-side-panel-width:calc(var(--space-20)*4);
 }
 
-.bp_page_module_page--f0685[data-modern=true]{
+.bp_page_module_page--32d56[data-modern=true]{
   --page-navigation-width-collapsed:var(--bp-space-200);
   --page-navigation-width-expanded:calc(var(--bp-space-200)*3);
   --page-viewport-inline-space:var(--bp-space-080);
@@ -9413,19 +9415,71 @@ table.bp_inline_table_module_inlineTable--b2041[data-modern=true] td:last-child,
   --page-medium-global-header-fixed-size-section-height:var(--bp-space-160);
   --page-medium-global-header-fixed-size-section-collapsed:var(--bp-space-160);
   --page-medium-page-main-padding-inline:var(--bp-space-040);
+  --page-side-panel-width:calc(var(--bp-space-200)*4);
 }
 
-.bp_page_module_page--f0685{
+.bp_page_module_page--32d56{
   box-sizing:border-box;
   display:flex;
   flex-direction:column;
   height:var(--page-height);
   overflow:hidden;
-  padding-block-start:var(--page-padding-block-start);
   padding-inline-start:var(--page-navigation-width-collapsed);
   position:relative;
 }
-.bp_page_module_page--f0685 .bp_page_module_globalHeader--f0685{
+.bp_page_module_page--32d56 .bp_page_module_pageBody--32d56{
+  display:flex;
+  flex:1;
+  flex-direction:row;
+  overflow:hidden;
+  position:relative;
+}
+.bp_page_module_page--32d56 .bp_page_module_pageBody--32d56 .bp_page_module_pageBodyContent--32d56{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  height:100%;
+  min-width:0;
+  overflow:hidden;
+  padding-block-start:var(--page-padding-block-start);
+}
+.bp_page_module_page--32d56 .bp_page_module_sidePanel--32d56{
+  display:none;
+  flex-shrink:0;
+  height:100%;
+  left:0;
+  position:absolute;
+  top:0;
+  width:100%;
+  z-index:var(--page-medium-side-panel-portal-overlay-z-index, 1);
+}
+.bp_page_module_page--32d56 .bp_page_module_sidePanel--32d56.bp_page_module_expanded--32d56{
+  display:block;
+}
+@media (width <= 767px){
+  .bp_page_module_page--32d56 .bp_page_module_sidePanel--32d56.bp_page_module_expanded--32d56{
+    height:100vh;
+    inset:0;
+    position:fixed;
+    width:100vw;
+  }
+}
+@media (width > 767px){
+  .bp_page_module_page--32d56 .bp_page_module_sidePanel--32d56{
+    width:var(--page-side-panel-width);
+  }
+}
+@media (width > 1219px){
+  .bp_page_module_page--32d56 .bp_page_module_sidePanel--32d56{
+    position:static;
+    z-index:unset;
+  }
+}
+.bp_page_module_page--32d56 .bp_page_module_sidePanel--32d56:empty{
+  min-width:0;
+  width:0;
+}
+.bp_page_module_page--32d56 .bp_page_module_globalHeader--32d56{
   align-items:center;
   display:flex;
   flex-direction:row;
@@ -9433,11 +9487,11 @@ table.bp_inline_table_module_inlineTable--b2041[data-modern=true] td:last-child,
   padding-inline:var(--page-viewport-inline-space);
   position:relative;
 }
-.bp_page_module_page--f0685 .bp_page_module_globalHeader--f0685 .bp_page_module_searchContainer--f0685,.bp_page_module_page--f0685 .bp_page_module_globalHeader--f0685 .bp_page_module_sideContentContainer--f0685{
+.bp_page_module_page--32d56 .bp_page_module_globalHeader--32d56 .bp_page_module_searchContainer--32d56,.bp_page_module_page--32d56 .bp_page_module_globalHeader--32d56 .bp_page_module_sideContentContainer--32d56{
   display:flex;
   flex:none;
 }
-.bp_page_module_page--f0685 .bp_page_module_pageMain--f0685{
+.bp_page_module_page--32d56 .bp_page_module_pageMain--32d56{
   display:flex;
   flex-direction:column;
   height:inherit;
@@ -9445,32 +9499,32 @@ table.bp_inline_table_module_inlineTable--b2041[data-modern=true] td:last-child,
   padding-block-start:var(--page-padding-block-start);
   padding-inline:var(--page-viewport-inline-space);
 }
-.bp_page_module_page--f0685 .bp_page_module_pageMain--f0685 .bp_page_module_topSection--f0685{
+.bp_page_module_page--32d56 .bp_page_module_pageMain--32d56 .bp_page_module_topSection--32d56{
   display:flex;
   flex-direction:column;
   flex-shrink:0;
   gap:var(--page-top-section-gap);
   overflow:var(--page-top-section-overflow, hidden);
 }
-.bp_page_module_page--f0685 .bp_page_module_pageMain--f0685 .bp_page_module_mainSection--f0685{
+.bp_page_module_page--32d56 .bp_page_module_pageMain--32d56 .bp_page_module_mainSection--32d56{
   display:flex;
   flex-direction:row;
   height:inherit;
   overflow:hidden;
 }
-.bp_page_module_page--f0685 .bp_page_module_pageMain--f0685 .bp_page_module_mainSection--f0685 .bp_page_module_content--f0685{
+.bp_page_module_page--32d56 .bp_page_module_pageMain--32d56 .bp_page_module_mainSection--32d56 .bp_page_module_content--32d56{
   flex-grow:1;
   margin-block-start:var(--page-content-margin-block-start);
   overflow-y:auto;
 }
-.bp_page_module_page--f0685 .bp_page_module_pageMain--f0685 .bp_page_module_mainSection--f0685 .bp_page_module_paddingWithSidebarVisible--f0685{
+.bp_page_module_page--32d56 .bp_page_module_pageMain--32d56 .bp_page_module_mainSection--32d56 .bp_page_module_paddingWithSidebarVisible--32d56{
   padding-inline-end:var(--page-padding-with-sidebar-inline-end);
 }
-.bp_page_module_page--f0685 .bp_page_module_pageMain--f0685 .bp_page_module_mainSection--f0685 .bp_page_module_sidebar--f0685{
+.bp_page_module_page--32d56 .bp_page_module_pageMain--32d56 .bp_page_module_mainSection--32d56 .bp_page_module_sidebar--32d56{
   flex-shrink:0;
   margin-inline-start:var(--page-sidebar-margin-inline-start);
 }
-.bp_page_module_page--f0685 .bp_page_module_navigationPortal--f0685{
+.bp_page_module_page--32d56 .bp_page_module_navigationPortal--32d56{
   background-color:var(--page-navigation-portal-background-color);
   height:100%;
   left:0;
@@ -9478,26 +9532,26 @@ table.bp_inline_table_module_inlineTable--b2041[data-modern=true] td:last-child,
   top:0;
   width:var(--navigation-width);
 }
-.bp_page_module_page--f0685 .bp_page_module_navigationPortal--f0685 .bp_page_module_navigationContent--f0685{
+.bp_page_module_page--32d56 .bp_page_module_navigationPortal--32d56 .bp_page_module_navigationContent--32d56{
   height:100%;
 }
-.bp_page_module_page--f0685 .bp_page_module_navigationPortalLargeCollapsed--f0685{
+.bp_page_module_page--32d56 .bp_page_module_navigationPortalLargeCollapsed--32d56{
   --navigation-width:var(--page-navigation-width-collapsed);
 }
-.bp_page_module_page--f0685 .bp_page_module_navigationPortalLargeExpanded--f0685{
+.bp_page_module_page--32d56 .bp_page_module_navigationPortalLargeExpanded--32d56{
   --navigation-width:var(--page-navigation-width-expanded);
 }
 
-.bp_page_module_hide--f0685{
+.bp_page_module_hide--32d56{
   visibility:hidden;
 }
 
-.bp_page_module_pageMediumOrLessViewport--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56{
   height:100vh;
   padding-block-start:var(--page-medium-global-header-fixed-size-section-height);
   padding-inline-start:0;
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_globalHeader--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_globalHeader--32d56{
   height:var(--page-medium-global-header-fixed-size-section-height);
   left:0;
   padding-inline:0;
@@ -9506,43 +9560,46 @@ table.bp_inline_table_module_inlineTable--b2041[data-modern=true] td:last-child,
   top:0;
   width:calc(100vw - var(--page-medium-global-header-fixed-size-section-collapsed));
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_globalHeader--f0685 .bp_page_module_search--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_globalHeader--32d56 .bp_page_module_search--32d56{
   width:var(--page-medium-global-header-fixed-size-section-collapsed);
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_pageMain--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_pageBody--32d56 .bp_page_module_pageBodyContent--32d56{
+  padding-block-start:0;
+}
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_pageMain--32d56{
   overflow:var(--page-medium-page-main-overflow-x, hidden) auto;
   padding-inline:var(--page-medium-page-main-padding-inline);
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_pageMain--f0685 .bp_page_module_mainSection--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_pageMain--32d56 .bp_page_module_mainSection--32d56{
   overflow:unset;
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_pageMain--f0685 .bp_page_module_mainSection--f0685 .bp_page_module_content--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_pageMain--32d56 .bp_page_module_mainSection--32d56 .bp_page_module_content--32d56{
   overflow-y:unset;
   padding-inline-end:unset;
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_navigationPortalOverlayCollapsed--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_navigationPortalOverlayCollapsed--32d56{
   height:100%;
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_navigationPortalOverlayCollapsed--f0685 .bp_page_module_navigationContent--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_navigationPortalOverlayCollapsed--32d56 .bp_page_module_navigationContent--32d56{
   width:var(--page-medium-global-header-fixed-size-section-collapsed);
 }
-.bp_page_module_pageMediumOrLessViewport--f0685 .bp_page_module_navigationPortalOverlayExpanded--f0685{
+.bp_page_module_pageMediumOrLessViewport--32d56 .bp_page_module_navigationPortalOverlayExpanded--32d56{
   height:100vh;
   width:100vw;
   z-index:var(--page-medium-navigation-portal-overlay-z-index, 1);
 }
 
-.bp_page_module_pageNavigationXXLargeCollapsed--f0685{
+.bp_page_module_pageNavigationXXLargeCollapsed--32d56{
   --navigation-width:var(--page-navigation-width-collapsed);
   padding-inline-start:var(--page-navigation-width-collapsed);
 }
 
-.bp_page_module_pageNavigationXXLargeExpanded--f0685{
+.bp_page_module_pageNavigationXXLargeExpanded--32d56{
   --navigation-width:var(--page-navigation-width-expanded);
   padding-inline-start:var(--page-navigation-width-expanded);
 }
 
-.bp_page_module_portalEntry--f0685{
+.bp_page_module_portalEntry--32d56{
   display:contents;
 }
 .bp_page_header_module_pageHeader--28186[data-modern=false]{

package/dist/lib-esm/index.js

@@ -117,7 +117,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, PageSubNavigationPortal } from './page/page-portal.js';
-export { useMainSectionSidebar, usePageNavigation } from './page/page-context.js';
+export { 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 } from './page-context';
+export { useMainSectionSidebar, usePageNavigation, useSidePanel } from './page-context';
 export type { PagePortalRefs } from './page-context';
-export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSubNavigationPortal } from './page-portal';
+export { 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>> & {
@@ -18,6 +18,11 @@ export declare const Page: import("react").ForwardRefExoticComponent<import("./t
         SearchContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
         SideContentContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     };
+    /**
+     * Complementary panel to the left of the main page content (right of navigation).
+     * Content can be portaled here using PageSidePanelPortal from child routes.
+     */
+    SidePanel: import("react").ForwardRefExoticComponent<import("./types").PageSidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * Main content area of the page.
      * Contains two subcomponents:

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

@@ -3,10 +3,12 @@ import { MainSection } from './page-main-section.js';
 import { PageNavigation } from './page-navigation.js';
 import { PagePageHeader } from './page-page-header.js';
 import { PageRoot } from './page-root.js';
+import { PageSidePanel } from './page-side-panel.js';
 import { PageSubNavigation } from './page-subnavigation.js';
 import 'react';
 import 'react/jsx-runtime';
-export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSubNavigationPortal } from './page-portal.js';
+import '../utils/useBreakpoint.js';
+export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal } from './page-portal.js';
 
 const Page = Object.assign(PageRoot, {
   /**
@@ -20,6 +22,11 @@ const Page = Object.assign(PageRoot, {
    * - PageGlobalHeader.SideContentContainer
    */
   GlobalHeader: PageGlobalHeader,
+  /**
+   * Complementary panel to the left of the main page content (right of navigation).
+   * Content can be portaled here using PageSidePanelPortal from child routes.
+   */
+  SidePanel: PageSidePanel,
   /**
    * Main content area of the page.
    * Contains two subcomponents:

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

@@ -6,12 +6,19 @@ export interface PagePortalRefs {
     pageHeaderEndElementsRef: HTMLDivElement | null;
     /** Reference to the PageSubNavigation container */
     pageSubNavigationRef: HTMLDivElement | null;
+    /** Reference to the Page.SidePanel container */
+    pageSidePanelRef: HTMLDivElement | null;
 }
 export interface PageFastContextValuesType extends PagePortalRefs {
+    defaultNavigationExpanded?: boolean;
+    defaultSidePanelExpanded?: boolean;
     navigationExpanded: boolean;
+    navigationExpandedUserControlled: boolean;
     pageContainer: HTMLElement | null;
     globalHeaderContainer: HTMLDivElement | null;
     mainSectionSidebarVisible: boolean;
+    sidePanelExpanded: boolean;
+    sidePanelExpandedUserControlled: boolean;
 }
 export declare const PageProvider: ({ children }: {
     children: React.ReactNode;
@@ -26,6 +33,11 @@ export declare const useMainSectionSidebar: () => {
     setMainSectionSidebarVisible: (visible: boolean) => void;
     toggleMainSectionSidebarVisible: () => void;
 };
+export declare const useSidePanel: () => {
+    sidePanelExpanded: boolean;
+    setSidePanelExpanded: (expanded: boolean) => void;
+    toggleSidePanelExpanded: () => void;
+};
 /**
  * Hook that creates a callback ref which stores the node in the PageStore
  * and forwards it to an optional forwardedRef.

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

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { createFastContext } from '../utils/fast-context.js';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 
 const {
   Provider: PageProvider,
@@ -10,23 +11,34 @@ const {
 } = createFastContext({
   globalHeaderContainer: null,
   mainSectionSidebarVisible: true,
+  sidePanelExpanded: false,
+  sidePanelExpandedUserControlled: false,
   navigationExpanded: true,
+  navigationExpandedUserControlled: false,
   pageContainer: null,
   pageHeaderStartElementsRef: null,
   pageHeaderEndElementsRef: null,
-  pageSubNavigationRef: null
+  pageSubNavigationRef: null,
+  pageSidePanelRef: null
 });
 const usePageNavigation = () => {
   const [navigationExpanded, setPageStore] = usePageStore(store => store.navigationExpanded);
+  const breakpoint = useBreakpoint();
   const setNavigationExpanded = expanded => {
     setPageStore({
-      navigationExpanded: expanded
+      navigationExpanded: expanded,
+      navigationExpandedUserControlled: true
     });
+    // Prevent double-drawer effect when both navigation panel and side panel are expanded
+    const shouldCollapseSidePanel = expanded && breakpoint <= Breakpoint.XLarge;
+    if (shouldCollapseSidePanel) {
+      setPageStore({
+        sidePanelExpanded: false
+      });
+    }
   };
   const toggleNavigationExpanded = () => {
-    setPageStore({
-      navigationExpanded: !navigationExpanded
-    });
+    setNavigationExpanded(!navigationExpanded);
   };
   return {
     navigationExpanded,
@@ -52,6 +64,31 @@ const useMainSectionSidebar = () => {
     toggleMainSectionSidebarVisible
   };
 };
+const useSidePanel = () => {
+  const [sidePanelExpanded, setPageStore] = usePageStore(store => store.sidePanelExpanded);
+  const breakpoint = useBreakpoint();
+  const setSidePanelExpanded = expanded => {
+    setPageStore({
+      sidePanelExpanded: expanded,
+      sidePanelExpandedUserControlled: true
+    });
+    // Prevent double-drawer effect when both navigation panel and side panel are expanded
+    const shouldCollapseNavigation = expanded && breakpoint <= Breakpoint.XLarge;
+    if (shouldCollapseNavigation) {
+      setPageStore({
+        navigationExpanded: false
+      });
+    }
+  };
+  const toggleSidePanelExpanded = () => {
+    setSidePanelExpanded(!sidePanelExpanded);
+  };
+  return {
+    sidePanelExpanded,
+    setSidePanelExpanded,
+    toggleSidePanelExpanded
+  };
+};
 /**
  * Hook that creates a callback ref which stores the node in the PageStore
  * and forwards it to an optional forwardedRef.
@@ -73,4 +110,4 @@ function usePageStoreRef(storeKey, forwardedRef) {
   }, [forwardedRef, setPageStore, storeKey]);
 }
 
-export { PageProvider, useMainSectionSidebar, usePageNavigation, usePageStore, usePageStoreRef, usePageStoreSafe, usePageStoreSetter, usePageStoreSetterSafe };
+export { PageProvider, useMainSectionSidebar, usePageNavigation, usePageStore, usePageStoreRef, usePageStoreSafe, usePageStoreSetter, usePageStoreSetterSafe, useSidePanel };

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

@@ -1,11 +1,57 @@
 import { jsx } from 'react/jsx-runtime';
 import { Portal, FocusTrapRegion } from '@ariakit/react';
 import clsx from 'clsx';
-import { forwardRef, useRef, useCallback } from 'react';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { usePageStore } from './page-context.js';
 import styles from './page.module.js';
 
+const useNavigationBreakpointSync = () => {
+  const breakpoint = useBreakpoint();
+  const [{
+    navigationExpandedUserControlled,
+    defaultNavigationExpanded,
+    sidePanelExpanded,
+    navigationExpanded
+  }, setPageStore] = usePageStore(store => ({
+    navigationExpandedUserControlled: store.navigationExpandedUserControlled,
+    defaultNavigationExpanded: store.defaultNavigationExpanded,
+    sidePanelExpanded: store.sidePanelExpanded,
+    navigationExpanded: store.navigationExpanded
+  }));
+  useEffect(() => {
+    // Prevent double-drawer effect when both navigation panel and side panel are expanded
+    const isOverlay = breakpoint <= Breakpoint.XLarge;
+    const isDoubleDrawerEffectActive = isOverlay && navigationExpanded && sidePanelExpanded;
+    if (isDoubleDrawerEffectActive) {
+      setPageStore({
+        navigationExpanded: false
+      });
+      return;
+    }
+    if (navigationExpandedUserControlled) {
+      return;
+    }
+    if (defaultNavigationExpanded !== undefined) {
+      if (defaultNavigationExpanded && isOverlay && sidePanelExpanded) {
+        return;
+      }
+      setPageStore({
+        navigationExpanded: defaultNavigationExpanded
+      });
+      return;
+    }
+    if (breakpoint < Breakpoint.XXLarge) {
+      setPageStore({
+        navigationExpanded: false
+      });
+    } else {
+      setPageStore({
+        navigationExpanded: true
+      });
+    }
+  }, [breakpoint, defaultNavigationExpanded, navigationExpanded, navigationExpandedUserControlled, setPageStore, sidePanelExpanded]);
+};
 const createPortalElementDiv = () => {
   const div = document.createElement('div');
   // Adds className with display:contents property.
@@ -19,6 +65,7 @@ const PageNavigation = /*#__PURE__*/forwardRef(({
   children,
   ...rest
 }, forwardedRef) => {
+  useNavigationBreakpointSync();
   const [{
     navigationExpanded,
     globalHeaderContainer,

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

@@ -50,3 +50,15 @@ export declare const PageHeaderEndElementsPortal: import("react").ForwardRefExot
  * ```
  */
 export declare const PageSubNavigationPortal: import("react").ForwardRefExoticComponent<PagePortalProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Portal to Page.SidePanel
+ * Use this to render side panel content from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageSidePanelPortal isPortalActive={featureEnabled}>
+ *   <SidePanelContent />
+ * </PageSidePanelPortal>
+ * ```
+ */
+export declare const PageSidePanelPortal: import("react").ForwardRefExoticComponent<PagePortalProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -79,5 +79,17 @@ const PageHeaderEndElementsPortal = createPagePortal('pageHeaderEndElementsRef',
  * ```
  */
 const PageSubNavigationPortal = createPagePortal('pageSubNavigationRef', 'PageSubNavigationPortal');
+/**
+ * Portal to Page.SidePanel
+ * Use this to render side panel content from child routes.
+ *
+ * @example Conditionally enable portal based on feature flag
+ * ```tsx
+ * <PageSidePanelPortal isPortalActive={featureEnabled}>
+ *   <SidePanelContent />
+ * </PageSidePanelPortal>
+ * ```
+ */
+const PageSidePanelPortal = createPagePortal('pageSidePanelRef', 'PageSidePanelPortal');
 
-export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSubNavigationPortal };
+export { PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal };

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

@@ -9,11 +9,13 @@ import { PageGlobalHeader } from './page-global-header.js';
 import { MainSection } from './page-main-section.js';
 import { PageNavigation } from './page-navigation.js';
 import { PagePageHeader } from './page-page-header.js';
+import { PageSidePanel } from './page-side-panel.js';
 import { PageSubNavigation } from './page-subnavigation.js';
 import styles from './page.module.js';
 
 const PageRoot = /*#__PURE__*/forwardRef(({
   defaultNavigationExpanded,
+  defaultSidePanelExpanded,
   children,
   ...rest
 }, forwardedRef) => {
@@ -22,6 +24,7 @@ const PageRoot = /*#__PURE__*/forwardRef(({
       ...rest,
       ref: forwardedRef,
       defaultNavigationExpanded: defaultNavigationExpanded,
+      defaultSidePanelExpanded: defaultSidePanelExpanded,
       children: children
     })
   });
@@ -29,6 +32,7 @@ const PageRoot = /*#__PURE__*/forwardRef(({
 PageRoot.displayName = 'PageRoot';
 const PageLayout = /*#__PURE__*/forwardRef(({
   defaultNavigationExpanded,
+  defaultSidePanelExpanded,
   className,
   children,
   ...rest
@@ -43,8 +47,12 @@ const PageLayout = /*#__PURE__*/forwardRef(({
   }));
   // this effect has to fire once to set initial state of the navigationExpanded
   useEffect(() => {
+    const sidePanelIsOverlay = breakpoint < Breakpoint.XXLarge;
     setPageStoreData({
-      navigationExpanded: defaultNavigationExpanded ?? xxLargeBreakpointActive
+      defaultNavigationExpanded,
+      defaultSidePanelExpanded,
+      navigationExpanded: defaultNavigationExpanded ?? xxLargeBreakpointActive,
+      sidePanelExpanded: defaultSidePanelExpanded ?? !sidePanelIsOverlay
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -61,16 +69,22 @@ const PageLayout = /*#__PURE__*/forwardRef(({
       [styles.pageMediumOrLessViewport]: breakpoint <= Breakpoint.Medium
     }, className),
     "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: [Slots.Navigation, Slots.GlobalHeader, jsxs("div", {
-      // hide fixed focus trap region problem and overlaying content on the navigation
-      className: clsx(styles.pageMain, {
-        [styles.hide]: isFullscreenNavigation
-      }, className),
-      role: "main",
-      children: [jsx("div", {
-        className: clsx(styles.topSection),
-        children: Slots.TopSection
-      }), Slots.MainSection]
+    children: [Slots.Navigation, jsxs("div", {
+      className: styles.pageBody,
+      children: [Slots.SidePanel, jsxs("div", {
+        className: styles.pageBodyContent,
+        children: [Slots.GlobalHeader, jsxs("div", {
+          // hide fixed focus trap region problem and overlaying content on the navigation
+          className: clsx(styles.pageMain, {
+            [styles.hide]: isFullscreenNavigation
+          }, className),
+          role: "main",
+          children: [jsx("div", {
+            className: clsx(styles.topSection),
+            children: Slots.TopSection
+          }), Slots.MainSection]
+        })]
+      })]
     })]
   });
 });
@@ -82,6 +96,8 @@ const getChildrenForLandmarks = children => {
     }
     if (child.type === PageNavigation) {
       acc.Navigation = child;
+    } else if (child.type === PageSidePanel) {
+      acc.SidePanel = child;
     } else if (child.type === PageGlobalHeader) {
       acc.GlobalHeader = child;
     } else if (child.type === MainSection) {
@@ -96,6 +112,7 @@ const getChildrenForLandmarks = children => {
     Navigation: null,
     MainSection: null,
     GlobalHeader: null,
+    SidePanel: null,
     TopSection: []
   });
 };

package/dist/lib-esm/page/page-side-panel.d.ts

@@ -0,0 +1,2 @@
+import { type PageSidePanelProps } from './types';
+export declare const PageSidePanel: import("react").ForwardRefExoticComponent<PageSidePanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/page/page-side-panel.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { FocusTrapRegion } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
+import { usePageStore, usePageStoreRef } from './page-context.js';
+import styles from './page.module.js';
+
+const useSidePanelBreakpointSync = () => {
+  const breakpoint = useBreakpoint();
+  const [{
+    sidePanelExpandedUserControlled,
+    defaultSidePanelExpanded
+  }, setPageStore] = usePageStore(store => ({
+    sidePanelExpandedUserControlled: store.sidePanelExpandedUserControlled,
+    defaultSidePanelExpanded: store.defaultSidePanelExpanded
+  }));
+  useEffect(() => {
+    if (sidePanelExpandedUserControlled) {
+      return;
+    }
+    if (defaultSidePanelExpanded !== undefined) {
+      setPageStore({
+        sidePanelExpanded: defaultSidePanelExpanded
+      });
+      return;
+    }
+    if (breakpoint < Breakpoint.XXLarge) {
+      setPageStore({
+        sidePanelExpanded: false
+      });
+    } else if (breakpoint >= Breakpoint.XXLarge) {
+      setPageStore({
+        sidePanelExpanded: true
+      });
+    }
+  }, [breakpoint, defaultSidePanelExpanded, setPageStore, sidePanelExpandedUserControlled]);
+};
+const PageSidePanel = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...rest
+}, forwardedRef) => {
+  useSidePanelBreakpointSync();
+  const [sidePanelExpanded] = usePageStore(store => store.sidePanelExpanded);
+  const setRef = usePageStoreRef('pageSidePanelRef', forwardedRef);
+  const breakpoint = useBreakpoint();
+  const isFullScreen = breakpoint < Breakpoint.Large && sidePanelExpanded;
+  return jsx(FocusTrapRegion, {
+    ...rest,
+    ref: setRef,
+    "aria-expanded": sidePanelExpanded,
+    className: clsx(styles.sidePanel, className, {
+      [styles.expanded]: sidePanelExpanded
+    }),
+    enabled: isFullScreen,
+    children: children
+  });
+});
+PageSidePanel.displayName = 'SidePanel';
+
+export { PageSidePanel };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"page":"bp_page_module_page--f0685","globalHeader":"bp_page_module_globalHeader--f0685","sideContentContainer":"bp_page_module_sideContentContainer--f0685","searchContainer":"bp_page_module_searchContainer--f0685","pageMain":"bp_page_module_pageMain--f0685","topSection":"bp_page_module_topSection--f0685","mainSection":"bp_page_module_mainSection--f0685","content":"bp_page_module_content--f0685","paddingWithSidebarVisible":"bp_page_module_paddingWithSidebarVisible--f0685","sidebar":"bp_page_module_sidebar--f0685","navigationPortal":"bp_page_module_navigationPortal--f0685","navigationContent":"bp_page_module_navigationContent--f0685","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--f0685","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--f0685","hide":"bp_page_module_hide--f0685","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--f0685","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--f0685","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--f0685","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--f0685","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--f0685","portalEntry":"bp_page_module_portalEntry--f0685"};
+var styles = {"page":"bp_page_module_page--32d56","pageBody":"bp_page_module_pageBody--32d56","pageBodyContent":"bp_page_module_pageBodyContent--32d56","sidePanel":"bp_page_module_sidePanel--32d56","expanded":"bp_page_module_expanded--32d56","globalHeader":"bp_page_module_globalHeader--32d56","sideContentContainer":"bp_page_module_sideContentContainer--32d56","searchContainer":"bp_page_module_searchContainer--32d56","pageMain":"bp_page_module_pageMain--32d56","topSection":"bp_page_module_topSection--32d56","mainSection":"bp_page_module_mainSection--32d56","content":"bp_page_module_content--32d56","paddingWithSidebarVisible":"bp_page_module_paddingWithSidebarVisible--32d56","sidebar":"bp_page_module_sidebar--32d56","navigationPortal":"bp_page_module_navigationPortal--32d56","navigationContent":"bp_page_module_navigationContent--32d56","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--32d56","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--32d56","hide":"bp_page_module_hide--32d56","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--32d56","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--32d56","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--32d56","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--32d56","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--32d56","portalEntry":"bp_page_module_portalEntry--32d56"};
 
 export { styles as default };

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

@@ -11,6 +11,11 @@ export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default true
      */
     defaultMainContentSidebarVisible?: boolean;
+    /**
+     * Whether the page side panel is initially expanded.
+     * When not specified, expanded state depends on the viewport width.
+     */
+    defaultSidePanelExpanded?: boolean;
 }
 export type PageGlobalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export type PagePageHeaderProps = Omit<PageHeaderProps<'div'>, 'variant' | 'sticky' | 'as'>;
@@ -18,6 +23,7 @@ export type PageMainProps = React.HTMLAttributes<HTMLDivElement>;
 export type PageMainSectionProps = React.HTMLAttributes<HTMLDivElement>;
 export type PageMainSectionSidebarProps = React.HTMLAttributes<HTMLDivElement>;
 export type PageSubNavigationProps = React.HTMLAttributes<HTMLDivElement>;
+export type PageSidePanelProps = React.HTMLAttributes<HTMLDivElement>;
 export type PageProps = PageLayoutProps;
 export interface PageNavigationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /**

package/dist/lib-esm/util-components/interactive-icon/interactive-icon.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib-esm/utils/useBreakpoint.js

@@ -42,7 +42,7 @@ const useBreakpoint = () => {
     return Breakpoint.Large;
   }
   if (isXLarge) {
-    // min 1023px - max 1219px
+    // min 1024px - max 1219px
     return Breakpoint.XLarge;
   }
   // min 1220px

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.1.4",
+    "version": "16.3.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.2.2",
+        "@box/blueprint-web-assets": "^5.2.4",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/primitive": "1.0.1",
         "@radix-ui/react-accordion": "1.1.2",
@@ -78,7 +78,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^1.1.4",
+        "@box/storybook-utils": "^1.1.6",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",