@box/blueprint-web 7.36.3 → 8.1.0

package/lib-esm/index.css

@@ -4081,7 +4081,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .bp_base_text_input_module_inlineError--4b0e7{
   margin-block-start:var(--space-2);
 }
-.bp_chip_module_chip--7e663{
+.bp_chip_module_chip--d387b{
   align-items:center;
   border:none;
   border-radius:var(--radius-half);
@@ -4098,19 +4098,23 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_labelText--7e663:first-child{
+.bp_chip_module_chip--d387b .bp_chip_module_labelText--d387b:first-child{
   margin-inline-start:var(--space-4);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_labelText--7e663:last-child{
+.bp_chip_module_chip--d387b .bp_chip_module_labelText--d387b:last-child{
   margin-inline-end:var(--space-4);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_chipStatus--7e663:first-child,.bp_chip_module_chip--7e663 svg:first-child{
+.bp_chip_module_chip--d387b .bp_chip_module_chipStatus--d387b:first-child,.bp_chip_module_chip--d387b svg:first-child{
   margin-inline-start:var(--space-2);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_chipStatus--7e663:last-child,.bp_chip_module_chip--7e663 svg:last-child{
+.bp_chip_module_chip--d387b .bp_chip_module_chipStatus--d387b:last-child,.bp_chip_module_chip--d387b svg:last-child{
   margin-inline-end:var(--space-2);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b:disabled{
+  cursor:default;
+  pointer-events:none;
+}
+.bp_chip_module_chip--d387b .bp_chip_module_chipStatus--d387b{
   align-items:center;
   background-color:var(--gray-10);
   border-radius:var(--radius-half);
@@ -4129,10 +4133,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_labelText--7e663{
+.bp_chip_module_chip--d387b .bp_chip_module_labelText--d387b{
   white-space:nowrap;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b{
   background-color:var(--surface-chip-button-surface);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -4142,50 +4146,50 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:focus-visible{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:focus-visible{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
   overflow:visible;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663 .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b .bp_chip_module_chipStatus--d387b{
   background-color:var(--box-blue-100);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:focus-visible,.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663[data-active-item]{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:focus-visible,.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b[data-active-item]{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:disabled{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:disabled{
   pointer-events:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:disabled .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:disabled .bp_chip_module_chipStatus--d387b{
   opacity:.4;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:hover:enabled{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:hover:enabled{
   background-color:var(--surface-chip-button-surface-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b{
   background-color:var(--surface-filterchip-surface-single);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-state=on]{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-state=on]{
   background-color:var(--surface-filterchip-surface-single-on);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-state=on]:hover{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-state=on]:hover{
   background-color:var(--surface-filterchip-surface-single-on-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-state=on] .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-state=on] .bp_chip_module_chipStatus--d387b{
   color:var(--text-text-on-light);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663:focus-visible,.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-active-item]{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b:focus-visible,.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-active-item]{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663:hover:not([data-state=on]){
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b:hover:not([data-state=on]){
   background-color:var(--surface-filterchip-surface-single-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b{
   background-color:var(--surface-filterchip-surface-multi);
   border:var(--border-1) solid var(--surface-filterchip-surface-multi);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -4196,10 +4200,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663 path{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b path{
   fill:var(--icon-icon-on-light);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on]{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on]{
   background-color:var(--surface-filterchip-surface-multi-on);
   border:var(--border-1) solid var(--border-filterchip-border-multi-on);
   color:var(--text-cta-link);
@@ -4211,32 +4215,32 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on] path{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on] path{
   fill:var(--text-cta-link);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on]:hover{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on]:hover{
   background-color:var(--surface-filterchip-surface-multi-on-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on]:focus-visible,.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on][data-active-item]{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on]:focus-visible,.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on][data-active-item]{
   border:var(--border-1) solid var(--gray-white);
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--border-filterchip-border-multi-on);
   outline-offset:calc(var(--border-2)*-1);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on] .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on] .bp_chip_module_chipStatus--d387b{
   background-color:var(--box-blue-100);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663:focus-visible:not([data-state=on]),.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-active-item]:not([data-state=on]){
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b:focus-visible:not([data-state=on]),.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-active-item]:not([data-state=on]){
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663:hover:not([data-state=on]){
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b:hover:not([data-state=on]){
   background-color:var(--surface-filterchip-surface-multi-hover);
   border:var(--border-1) solid var(--surface-filterchip-surface-multi-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663 span::before{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b span::before{
   content:attr(data-text);
   display:block;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -4251,20 +4255,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   visibility:hidden;
 }
 
-.bp_chip_module_chipsGroup--7e663{
+.bp_chip_module_chipsGroup--d387b{
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-2);
 }
 @media (max-width: 767px){
-  .bp_chip_module_chipsGroup--7e663{
+  .bp_chip_module_chipsGroup--d387b{
     -ms-overflow-style:none;
     flex-wrap:nowrap;
     overflow-x:scroll;
     padding:var(--space-05);
     scrollbar-width:none;
   }
-  .bp_chip_module_chipsGroup--7e663::-webkit-scrollbar{
+  .bp_chip_module_chipsGroup--d387b::-webkit-scrollbar{
     display:none;
   }
 }

package/lib-esm/modal/modal-scrollable-container.js

@@ -1,8 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { useScrollContext } from '../utils/scroll-context.js';
-import { useForkRef } from '../utils/useForkRef.js';
 import styles from './modal.module.js';
 
 /**
@@ -16,12 +15,23 @@ const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
   ...rest
 }, forwardedRef) => {
   const {
-    onScroll
+    onScroll,
+    onAttach
   } = useScrollContext();
-  const scrollableContainerRef = useRef(null);
+  const onMountRef = useCallback(node => {
+    onAttach(node);
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef, onAttach]);
   return jsx("div", {
     ...rest,
-    ref: useForkRef(scrollableContainerRef, forwardedRef),
+    ref: onMountRef,
     className: clsx(styles.scrollableContainer, className),
     "data-testid": dataTestId,
     onScroll: event => {

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

@@ -3,6 +3,15 @@ export { usePage } from './page-context';
 export * from './types';
 export declare const Page: import("react").ForwardRefExoticComponent<import("./types").PageProps & import("react").RefAttributes<HTMLDivElement>> & {
     Navigation: import("react").ForwardRefExoticComponent<import("./types").PageNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
-    GlobalHeader: import("react").ForwardRefExoticComponent<import("./types").GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Top level  landmark placed at the top of the page.
+     * Contains two subcomponents for contents:
+     * - PageGlobalHeader.SearchContainer
+     * - PageGlobalHeader.SideContentContainer
+     */
+    GlobalHeader: import("react").ForwardRefExoticComponent<import("./types").GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+        SearchContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+        SideContentContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    };
     Content: import("react").ForwardRefExoticComponent<import("./types").PageContentProps & import("react").RefAttributes<HTMLDivElement>>;
 };

package/lib-esm/page/page-global-header-search-container.d.ts

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

package/lib-esm/page/page-global-header-side-content-container.d.ts

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

package/lib-esm/page/page-global-header.d.ts

@@ -1,3 +1,13 @@
 /// <reference types="react" />
 import { type GlobalHeaderProps } from './types';
 export declare const PageGlobalHeader: import("react").ForwardRefExoticComponent<GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const GlobalHeader: import("react").ForwardRefExoticComponent<GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+    /**
+     * Container for components related to global search.
+     */
+    SearchContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Container for all components excluding ones related to global search.
+     */
+    SideContentContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/lib-esm/primitives/chips/chip.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"chip":"bp_chip_module_chip--7e663","labelText":"bp_chip_module_labelText--7e663","chipStatus":"bp_chip_module_chipStatus--7e663","chipButton":"bp_chip_module_chipButton--7e663","singleSelectChip":"bp_chip_module_singleSelectChip--7e663","multiSelectChip":"bp_chip_module_multiSelectChip--7e663","chipsGroup":"bp_chip_module_chipsGroup--7e663"};
+var styles = {"chip":"bp_chip_module_chip--d387b","labelText":"bp_chip_module_labelText--d387b","chipStatus":"bp_chip_module_chipStatus--d387b","chipButton":"bp_chip_module_chipButton--d387b","singleSelectChip":"bp_chip_module_singleSelectChip--d387b","multiSelectChip":"bp_chip_module_multiSelectChip--d387b","chipsGroup":"bp_chip_module_chipsGroup--d387b"};
 
 export { styles as default };

package/lib-esm/side-panel/side-panel-content.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import { FocusScope } from '@radix-ui/react-focus-scope';
 import { clsx } from 'clsx';
 import { forwardRef, useCallback } from 'react';
-import { FocusScope } from '@radix-ui/react-focus-scope';
 import styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 

package/lib-esm/side-panel/side-panel-trigger.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type SidePanelTriggerProps } from './types';
+/**
+ * Wrapper component for an interactive element that's responsible for opening SidePanel.
+ */
+export declare const SidePanelTrigger: import("react").ForwardRefExoticComponent<SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/side-panel/side-panel-trigger.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+
+/**
+ * Wrapper component for an interactive element that's responsible for opening SidePanel.
+ */
+const SidePanelTrigger = /*#__PURE__*/forwardRef(function SidePanelTrigger({
+  children
+}, forwardedRef) {
+  return jsx(RadixDialog.Trigger, {
+    ref: forwardedRef,
+    asChild: true,
+    children: children
+  });
+});
+
+export { SidePanelTrigger };

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

@@ -22,6 +22,7 @@ export declare const SidePanel: ((props: SidePanelProps) => import("react/jsx-ru
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     };
     Header: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-    ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Overlay: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelOverlayComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./types").SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };

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

@@ -7,6 +7,7 @@ import { SidePanelFooter } from './side-panel-footer.js';
 import { SidePanelHeader } from './side-panel-header.js';
 import { SidePanelOverlay } from './side-panel-overlay.js';
 import { SidePanelScrollableContainer } from './side-panel-scrollable-container.js';
+import { SidePanelTrigger } from './side-panel-trigger.js';
 import { VariantProvider } from './variant-context.js';
 
 const Root = props => {
@@ -45,8 +46,9 @@ const SidePanel = Object.assign(Root, {
   Content: SidePanelContent,
   Footer: SidePanelFooter,
   Header: SidePanelHeader,
+  Overlay: SidePanelOverlay,
   ScrollableContainer: SidePanelScrollableContainer,
-  Overlay: SidePanelOverlay
+  Trigger: SidePanelTrigger
 });
 
 export { SidePanel };

package/lib-esm/side-panel/types.d.ts

@@ -1,5 +1,5 @@
 import { type DialogContentProps, type DialogPortalProps, type DialogProps } from '@radix-ui/react-dialog';
-import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactNode, type SVGProps } from 'react';
+import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
 /**
  * 'persistent' - side panel is displayed inline with the page content
  *
@@ -32,6 +32,9 @@ export interface SidePanelCloseProps {
     /** Custom icon for Close element */
     icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
 }
+export interface SidePanelTriggerProps {
+    children: ReactElement;
+}
 export interface SidePanelScrollableContainerProps extends ComponentPropsWithRef<'div'> {
     /** Content of the ScrollableContainer element */
     children: ReactNode;

package/lib-esm/text/text.js

@@ -17,5 +17,6 @@ const Text = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.textReset, styles.breakWord, styles[variant], styles[color], className)
   }, children);
 });
+Text.displayName = 'Text';
 
 export { Text };

package/lib-esm/utils/createSetRefWithCallback.d.ts

@@ -1,2 +1,10 @@
-import { type ForwardedRef } from 'react';
-export declare function createSetRefWithCallback<T>(forwardedRef: ForwardedRef<T>, callback?: (node: T | null) => void): (node: T | null) => void;
+import { type ForwardedRef, type RefCallback } from 'react';
+/**
+ * Returns function that sets ref and invokes provided ref callback function.
+ */
+export declare function createSetRefWithCallback<T>(forwardedRef: ForwardedRef<T>, callback?: RefCallback<T>): (node: T | null) => void;
+/**
+ * Memoized version of createSetRefWithCallback.
+ * Returns function that sets ref and invokes provided ref callback function.
+ */
+export declare function useCreateSetRefWithCallbackMemo<T>(forwardedRef: ForwardedRef<T>, callback?: RefCallback<T>): (node: T | null) => void;

package/lib-esm/utils/scroll-context.d.ts

@@ -3,6 +3,7 @@ interface ScrollContextType {
     isScrolledUnderHeader: boolean;
     isScrolledUnderFooter: boolean;
     onScroll: (event: UIEvent<HTMLDivElement>) => void;
+    onAttach: (node: HTMLDivElement | null) => void;
 }
 export declare const ScrollProvider: ({ children }: {
     children: React.ReactNode;

package/lib-esm/utils/scroll-context.js

@@ -5,7 +5,8 @@ import { useState, useCallback, useMemo, useContext, createContext } from 'react
 const ScrollContext = /*#__PURE__*/createContext({
   isScrolledUnderFooter: false,
   isScrolledUnderHeader: false,
-  onScroll: noop
+  onScroll: noop,
+  onAttach: noop
 });
 const ScrollProvider = ({
   children
@@ -22,11 +23,18 @@ const ScrollProvider = ({
     const scrolledToBottom = scroll >= scrollHeight - offsetHeight;
     setScrolledUnderFooter(!scrolledToBottom);
   }, []);
+  const onAttach = useCallback(element => {
+    if (element) {
+      setScrolledUnderFooter(element.scrollHeight > element.offsetHeight);
+      setScrolledUnderHeader(element.scrollTop > 0);
+    }
+  }, []);
   const value = useMemo(() => ({
     isScrolledUnderFooter,
     isScrolledUnderHeader,
-    onScroll
-  }), [isScrolledUnderFooter, isScrolledUnderHeader, onScroll]);
+    onScroll,
+    onAttach
+  }), [isScrolledUnderFooter, isScrolledUnderHeader, onScroll, onAttach]);
   return jsx(ScrollContext.Provider, {
     value: value,
     children: children

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.36.3",
+    "version": "8.1.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "cb9d1103ad345206637fdc35e1650751ae752a0a",
+    "gitHead": "0493d34d7630dffade2a3d5c62b46719e425ff2b",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {