@box/blueprint-web 11.4.0 → 11.4.1

package/dist/lib-esm/index.css

@@ -5186,41 +5186,53 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   fill:currentColor;
 }
 
-.bp_popover_module_popoverMainContent--c0ba4{
+.bp_popover_module_popoverContentContainer--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverMainContent--6c3e0,.bp_popover_module_popoverContentContainer--6c3e0.bp_popover_module_accessibilitySmallBreakpoint--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverScrollContainer--6c3e0{
+  margin-inline-end:calc(var(--space-4)*-1);
   mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
+  mask-position:left bottom;
+  mask-size:100% 20000px;
   overflow-y:auto;
+  padding-right:var(--space-4);
+  transition:mask-position var(--animation-duration-3);
 }
 
-.bp_popover_module_popoverContentContainer--c0ba4{
+.bp_popover_module_popoverContentContainer--6c3e0{
   max-width:320px;
   z-index:380;
 }
-.bp_popover_module_popoverContentContainer--c0ba4 .bp_popover_module_popoverCard--c0ba4{
+.bp_popover_module_popoverContentContainer--6c3e0 .bp_popover_module_popoverCard--6c3e0{
   box-shadow:var(--dropshadow-3);
   margin-block:var(--space-1);
 }
-.bp_popover_module_popoverContentContainer--c0ba4 .bp_popover_module_popoverCard--c0ba4 .bp_popover_module_popoverMainContent--c0ba4{
-  margin-inline-end:calc(var(--space-4)*-1);
-  mask-position:left bottom;
-  mask-size:100% 20000px;
-  padding-right:var(--space-4);
-  transition:mask-position var(--animation-duration-3);
-}
-.bp_popover_module_popoverContentContainer--c0ba4 .bp_popover_module_popoverCard--c0ba4 .bp_popover_module_popoverMainContent--c0ba4:hover{
+.bp_popover_module_popoverContentContainer--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverMainContent--6c3e0:hover{
   mask-position:left top;
 }
-.bp_popover_module_popoverContentContainer--c0ba4 .bp_popover_module_popoverCard--c0ba4 .bp_popover_module_popoverMainContent--c0ba4 .bp_popover_module_popoverMainContentOuterContainer--c0ba4{
+.bp_popover_module_popoverContentContainer--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverMainContent--6c3e0 .bp_popover_module_popoverMainContentOuterContainer--6c3e0{
   max-height:inherit;
 }
-.bp_popover_module_popoverContentContainer--c0ba4 .bp_popover_module_popoverCard--c0ba4 .bp_popover_module_popoverMainContent--c0ba4 .bp_popover_module_popoverMainContentOuterContainer--c0ba4 .bp_popover_module_popoverMainContentInnerContainerPadding--c0ba4{
+.bp_popover_module_popoverContentContainer--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverMainContent--6c3e0 .bp_popover_module_popoverMainContentOuterContainer--6c3e0 .bp_popover_module_popoverMainContentInnerContainerPadding--6c3e0{
   padding-block-end:var(--space-3);
 }
-.bp_popover_module_popoverContentContainer--c0ba4 .bp_popover_module_popoverFooter--c0ba4{
+.bp_popover_module_popoverContentContainer--6c3e0.bp_popover_module_accessibilitySmallBreakpoint--6c3e0{
+  max-height:var(--radix-popover-content-available-height);
+}
+.bp_popover_module_popoverContentContainer--6c3e0.bp_popover_module_accessibilitySmallBreakpoint--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverScrollContainer--6c3e0{
+  max-height:min(var(--blueprint-web-popover-content-max-height, calc(var(--radix-popover-content-available-height) - var(--space-12))), var(--radix-popover-content-available-height) - var(--space-12));
+  padding-block:var(--space-1);
+}
+.bp_popover_module_popoverContentContainer--6c3e0.bp_popover_module_accessibilitySmallBreakpoint--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverScrollContainer--6c3e0:hover{
+  mask-position:left top;
+}
+.bp_popover_module_popoverContentContainer--6c3e0.bp_popover_module_accessibilitySmallBreakpoint--6c3e0 .bp_popover_module_popoverCard--6c3e0 .bp_popover_module_popoverScrollContainer--6c3e0 .bp_popover_module_popoverMainContent--6c3e0{
+  max-height:-moz-fit-content;
+  max-height:fit-content;
+}
+.bp_popover_module_popoverContentContainer--6c3e0 .bp_popover_module_popoverFooter--6c3e0{
   margin-inline:calc(var(--space-4)*-1);
   padding-block-start:var(--space-4);
   padding-inline:var(--space-4);
 }
-.bp_popover_module_popoverContentContainer--c0ba4 .bp_popover_module_popoverFooter--c0ba4.bp_popover_module_popoverFooterTopBorder--c0ba4{
+.bp_popover_module_popoverContentContainer--6c3e0 .bp_popover_module_popoverFooter--6c3e0.bp_popover_module_popoverFooterTopBorder--6c3e0{
   border-top:var(--border-1) solid var(--border-card-border);
 }
 .bp_select_menu_grid_module_grid--6e766{

package/dist/lib-esm/primitives/popover/popover-content-container.js

@@ -1,12 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
+import { Space4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
-import { forwardRef, useState, useMemo, useCallback } from 'react';
+import { forwardRef, useContext, useState, useMemo, useCallback } from 'react';
 import { Card } from '../../card/card.js';
+import { useBreakpoint, Breakpoint } from '../../utils/useBreakpoint.js';
 import { focusRadioGroupFirstIfExists } from './popover-focus-utils.js';
-import { PopoverOverflowContext } from './popover-overflow-context.js';
 import styles from './popover.module.js';
+import { PopoverModalityContext } from './utils/popover-modality-context.js';
+import { PopoverOverflowContext } from './utils/popover-overflow-context.js';
 
+const DEFAULT_COLLISION_PADDING = parseInt(Space4, 10);
 /**
  * Based on Radix-UI Popover Content
  * @see https://www.radix-ui.com/primitives/docs/components/popover#content
@@ -15,10 +19,17 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
   const {
     children,
     container,
+    collisionPadding = DEFAULT_COLLISION_PADDING,
     className,
     onOpenAutoFocus,
     ...rest
   } = props;
+  const breakpoint = useBreakpoint();
+  const smallBreakpoint = breakpoint <= Breakpoint.Small;
+  const {
+    isInteractionDisabled
+  } = useContext(PopoverModalityContext);
+  const accessibilitySmallBreakpoint = smallBreakpoint && isInteractionDisabled;
   const [isContentOverflowing, setIsContentOverflowing] = useState(false);
   const providerValue = useMemo(() => ({
     isContentOverflowing,
@@ -41,11 +52,17 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
         children: jsx(RadixPopover.Content, {
           ...rest,
           ref: forwardedRef,
-          className: clsx(styles.popoverContentContainer, className),
+          className: clsx(styles.popoverContentContainer, {
+            [styles.accessibilitySmallBreakpoint]: accessibilitySmallBreakpoint
+          }, className),
+          collisionPadding: collisionPadding,
           onOpenAutoFocus: handleOpenAutoFocus,
           children: jsx(Card, {
             className: styles.popoverCard,
-            children: children
+            children: jsx("div", {
+              className: styles.popoverScrollContainer,
+              children: children
+            })
           })
         })
       })

package/dist/lib-esm/primitives/popover/popover-footer.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useContext } from 'react';
-import { PopoverOverflowContext } from './popover-overflow-context.js';
+import { PopoverOverflowContext } from './utils/popover-overflow-context.js';
 import styles from './popover.module.js';
 
 /**

package/dist/lib-esm/primitives/popover/popover-main-content.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useContext, useRef, useEffect } from 'react';
-import { PopoverOverflowContext } from './popover-overflow-context.js';
+import { PopoverOverflowContext } from './utils/popover-overflow-context.js';
 import styles from './popover.module.js';
 
 /**

package/dist/lib-esm/primitives/popover/popover-root.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
+import { PopoverModalityContext } from './utils/popover-modality-context.js';
 
 /**
  * The Popover component has a trigger which displays a Card to the user with customizable content.
@@ -7,12 +8,19 @@ import * as RadixPopover from '@radix-ui/react-popover';
 const PopoverRoot = props => {
   const {
     children,
+    modal = true,
     ...rest
   } = props;
-  return jsx(RadixPopover.Root, {
-    modal: true,
-    ...rest,
-    children: children
+  const isInteractionDisabled = Boolean(modal);
+  return jsx(PopoverModalityContext.Provider, {
+    value: {
+      isInteractionDisabled
+    },
+    children: jsx(RadixPopover.Root, {
+      modal: modal,
+      ...rest,
+      children: children
+    })
   });
 };
 PopoverRoot.displayName = 'PopoverRoot';

package/dist/lib-esm/primitives/popover/popover.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"popoverMainContent":"bp_popover_module_popoverMainContent--c0ba4","popoverContentContainer":"bp_popover_module_popoverContentContainer--c0ba4","popoverCard":"bp_popover_module_popoverCard--c0ba4","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--c0ba4","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--c0ba4","popoverFooter":"bp_popover_module_popoverFooter--c0ba4","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--c0ba4"};
+var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--6c3e0","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--6c3e0","popoverCard":"bp_popover_module_popoverCard--6c3e0","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--6c3e0","popoverMainContent":"bp_popover_module_popoverMainContent--6c3e0","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--6c3e0","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--6c3e0","popoverFooter":"bp_popover_module_popoverFooter--6c3e0","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--6c3e0"};
 
 export { styles as default };

package/dist/lib-esm/primitives/popover/utils/popover-modality-context.d.ts

@@ -0,0 +1,4 @@
+export interface PopoverModalityContextValue {
+    isInteractionDisabled: boolean;
+}
+export declare const PopoverModalityContext: import("react").Context<PopoverModalityContextValue>;

package/dist/lib-esm/primitives/popover/utils/popover-modality-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+// Provides modality context for the popover.
+// When `isInteractionDisabled` is true, interactions outside the popover are blocked.
+const PopoverModalityContext = /*#__PURE__*/createContext({
+  isInteractionDisabled: true
+});
+
+export { PopoverModalityContext };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "11.4.0",
+    "version": "11.4.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {