@box/blueprint-web 12.99.1 → 12.100.0

package/dist/lib-esm/index.css

@@ -6977,7 +6977,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   display:inline;
 }
 
-.bp_modal_module_overlay--c23ce[data-modern=false]{
+.bp_modal_module_overlay--86b04[data-modern=false]{
   --modal-body-text-color:var(--text-text-on-light);
   --modal-overlay-background:var(--overlay-modal-overlay);
   --modal-content-background:var(--gray-white);
@@ -7018,7 +7018,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
 }
 
-.bp_modal_module_overlay--c23ce[data-modern=true]{
+.bp_modal_module_overlay--86b04[data-modern=true]{
   --modal-overlay-background:var(--bp-overlay-modal-overlay);
   --modal-content-background:var(--bp-surface-modal-surface);
   --modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
@@ -7027,6 +7027,9 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-max-width-medium:540px;
   --modal-max-width-large:620px;
   --modal-max-width-xlarge:768px;
+  --modal-max-width-loading:var(--modal-min-width-non-fullscreen);
+  --modal-max-height-loading:min(300px, var(--modal-max-height-non-fullscreen));
+  --modal-loading-height:148px;
   --modal-margin:0 var(--bp-space-080);
   --modal-border-radius:var(--bp-radius-16);
   --modal-body-text-color:var(--bp-text-text-on-light);
@@ -7056,7 +7059,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
 }
 
-.bp_modal_module_overlay--c23ce{
+.bp_modal_module_overlay--86b04{
   background-color:var(--modal-overlay-background);
   bottom:0;
   display:grid;
@@ -7068,15 +7071,15 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   z-index:370;
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--c23ce{
+  .bp_modal_module_overlay--86b04{
     place-items:center;
   }
 }
 
-.bp_modal_module_headerDividerLine--c23ce{
+.bp_modal_module_headerDividerLine--86b04{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--c23ce::after{
+.bp_modal_module_headerDividerLine--86b04::after{
   border-bottom:var(--modal-divider-line-border);
   bottom:0;
   content:"";
@@ -7085,16 +7088,16 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   right:var(--modal-divider-line-offset-right);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--c23ce::after{
+  .bp_modal_module_headerDividerLine--86b04::after{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--c23ce{
+.bp_modal_module_footerDividerLine--86b04{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--c23ce::before{
+.bp_modal_module_footerDividerLine--86b04::before{
   border-bottom:var(--modal-divider-line-border);
   content:"";
   left:var(--modal-divider-line-offset-left);
@@ -7103,14 +7106,14 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--c23ce::before{
+  .bp_modal_module_footerDividerLine--86b04::before{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_content--c23ce{
-  animation:bp_modal_module_popup_bounce_in--c23ce var(--animation-duration-3);
+.bp_modal_module_content--86b04{
+  animation:bp_modal_module_popup_bounce_in--86b04 var(--animation-duration-3);
   background-color:var(--modal-content-background);
   display:flex;
   flex-direction:column;
@@ -7119,12 +7122,12 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--c23ce{
+  .bp_modal_module_content--86b04{
     overflow:hidden;
   }
 }
 @media (width > 459px){
-  .bp_modal_module_content--c23ce{
+  .bp_modal_module_content--86b04{
     border-radius:var(--modal-border-radius);
     height:auto;
     margin:var(--modal-margin);
@@ -7132,77 +7135,77 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
     min-width:var(--modal-min-width-non-fullscreen);
     transition:max-width var(--modal-loading-animation), max-height var(--modal-loading-animation);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_smallSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_smallSizeModal--86b04{
     max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_mediumSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_mediumSizeModal--86b04{
     max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_largeSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_largeSizeModal--86b04{
     max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_xlargeSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_xlargeSizeModal--86b04{
     max-width:var(--modal-max-width-xlarge);
   }
 }
-.bp_modal_module_content--c23ce:has(.bp_modal_module_loadingContainerActive--c23ce) .bp_modal_module_footerDividerLine--c23ce::before,.bp_modal_module_content--c23ce:has(.bp_modal_module_loadingContainerActive--c23ce) .bp_modal_module_headerDividerLine--c23ce::after{
+.bp_modal_module_content--86b04:has(.bp_modal_module_loadingContainerActive--86b04) .bp_modal_module_footerDividerLine--86b04::before,.bp_modal_module_content--86b04:has(.bp_modal_module_loadingContainerActive--86b04) .bp_modal_module_headerDividerLine--86b04::after{
   display:none;
 }
 @media (width > 459px){
-  .bp_modal_module_content--c23ce:has(.bp_modal_module_loadingContainerActive--c23ce){
+  .bp_modal_module_content--86b04:has(.bp_modal_module_loadingContainerActive--86b04){
     max-height:var(--modal-max-height-loading);
     max-width:var(--modal-max-width-loading);
   }
 }
 
-.bp_modal_module_scrollableContainer--c23ce{
+.bp_modal_module_scrollableContainer--86b04{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--c23ce{
+  .bp_modal_module_scrollableContainer--86b04{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--c23ce .bp_modal_module_close--c23ce{
+.bp_modal_module_content--86b04 .bp_modal_module_close--86b04{
   color:var(--modal-close-button-color);
   position:fixed;
   right:var(--modal-close-button-offset-right);
   top:var(--modal-close-button-offset-top);
 }
 @media (width > 374px){
-  .bp_modal_module_content--c23ce .bp_modal_module_close--c23ce{
+  .bp_modal_module_content--86b04 .bp_modal_module_close--86b04{
     position:absolute;
   }
 }
 
-.bp_modal_module_close--c23ce.bp_modal_module_onColor--c23ce{
+.bp_modal_module_close--86b04.bp_modal_module_onColor--86b04{
   background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--c23ce.bp_modal_module_onColor--c23ce:hover{
+.bp_modal_module_close--86b04.bp_modal_module_onColor--86b04:hover{
   background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--c23ce.bp_modal_module_onColor--c23ce:active{
+.bp_modal_module_close--86b04.bp_modal_module_onColor--86b04:active{
   background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--c23ce .bp_modal_module_backButton--c23ce{
+.bp_modal_module_content--86b04 .bp_modal_module_backButton--86b04{
   color:var(--modal-back-button-color);
   margin-block-start:var(--modal-back-button-margin-top-start);
   margin-inline-start:var(--modal-back-button-margin-inline-start);
 }
 @media (width > 459px){
-  .bp_modal_module_content--c23ce .bp_modal_module_backButton--c23ce{
+  .bp_modal_module_content--86b04 .bp_modal_module_backButton--86b04{
     height:var(--modal-back-button-size-non-fullscreen);
     width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--c23ce{
+.bp_modal_module_modalHeader--86b04{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--c23ce{
+.bp_modal_module_modalTitle--86b04{
   display:flex;
   flex-direction:column;
   gap:var(--modal-title-gap);
@@ -7210,78 +7213,83 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   padding:var(--modal-title-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--c23ce{
+  .bp_modal_module_modalTitle--86b04{
     padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--c23ce{
+.bp_modal_module_body--86b04{
   color:var(--modal-body-text-color);
   padding:var(--modal-body-padding-fullscreen);
 }
 @media (width > 459px){
-  .bp_modal_module_body--c23ce{
+  .bp_modal_module_body--86b04{
     padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footer--c23ce{
+.bp_modal_module_footer--86b04{
   display:flex;
   justify-content:flex-end;
   padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--c23ce{
+  .bp_modal_module_footer--86b04{
     padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerButton--c23ce + .bp_modal_module_footerButton--c23ce{
+.bp_modal_module_footerButton--86b04 + .bp_modal_module_footerButton--86b04{
   margin-inline-start:var(--modal-footer-button-margin-inline-start);
 }
 
-.bp_modal_module_loadingContainer--c23ce{
+.bp_modal_module_loadingContainer--86b04{
   display:flex;
-  min-height:0;
+  flex-direction:column;
+  flex-grow:1;
   position:relative;
-  transition:height var(--modal-loading-animation);
+}
+@media (width > 374px){
+  .bp_modal_module_loadingContainer--86b04{
+    min-height:0;
+  }
 }
 
-.bp_modal_module_loadingContainerActive--c23ce{
-  height:var(--modal-loading-height);
+.bp_modal_module_loadingContainerActive--86b04{
   overflow:hidden;
 }
 
-.bp_modal_module_loading--c23ce{
+.bp_modal_module_loading--86b04{
   align-items:center;
   display:flex;
 }
 
-.bp_modal_module_loadingContainerActive--c23ce .bp_modal_module_loading--c23ce{
-  height:var(--modal-loading-height);
-}
-
-.bp_modal_module_loadingOverlay--c23ce{
+.bp_modal_module_loadingOverlay--86b04{
   background-color:var(--modal-content-background);
   bottom:0;
   left:0;
-  min-height:var(--modal-loading-height);
   position:absolute;
   right:0;
   top:0;
   z-index:1;
 }
 
-.bp_modal_module_loadingContent--c23ce{
+.bp_modal_module_loadingContent--86b04{
   display:flex;
+  flex-direction:column;
   visibility:hidden;
 }
+@media (width > 374px){
+  .bp_modal_module_loadingContent--86b04{
+    min-height:0;
+  }
+}
 
-.bp_modal_module_loadingContentVisible--c23ce{
+.bp_modal_module_loadingContentVisible--86b04{
   visibility:visible;
 }
 
-@keyframes bp_modal_module_popup_bounce_in--c23ce{
+@keyframes bp_modal_module_popup_bounce_in--86b04{
   0%{
     transform:scale3d(.1, .1, 1);
   }

package/dist/lib-esm/modal/modal-loading.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
+import { useMedia } from '../utils/useMedia.js';
 import { MODAL_LOADING_ANIMATION_DURATION } from './constants.js';
 import styles from './modal.module.js';
 
@@ -18,6 +19,7 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
   children,
   ...rest
 }, forwardedRef) => {
+  const isAboveModalFullscreen = useMedia('(width > 459px)');
   const [loadingState, setLoadingState] = useState(isLoading ? LoadingState.Loading : LoadingState.ShowingContent);
   useEffect(() => {
     if (isLoading) {
@@ -25,7 +27,12 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
       setLoadingState(LoadingState.Loading);
       return undefined;
     }
-    // Start animating when loading completes
+    // Skip animation below fullscreen breakpoint (mobile)
+    if (!isAboveModalFullscreen) {
+      setLoadingState(LoadingState.ShowingContent);
+      return undefined;
+    }
+    // Start animating when loading completes (for larger screens)
     setLoadingState(LoadingState.Animating);
     // Show content after modal resize completes
     const showTimer = setTimeout(() => {
@@ -34,7 +41,7 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
     return () => {
       clearTimeout(showTimer);
     };
-  }, [isLoading]);
+  }, [isLoading, isAboveModalFullscreen]);
   const shouldShowLoading = loadingState === LoadingState.Loading;
   const shouldShowContent = loadingState === LoadingState.ShowingContent;
   return jsxs("div", {
@@ -46,6 +53,7 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
       className: clsx(styles.loadingContent, {
         [styles.loadingContentVisible]: shouldShowContent
       }),
+      "data-testid": "modal-loading-content",
       children: children
     }), shouldShowLoading && jsx("div", {
       ...rest,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--c23ce","headerDividerLine":"bp_modal_module_headerDividerLine--c23ce","footerDividerLine":"bp_modal_module_footerDividerLine--c23ce","content":"bp_modal_module_content--c23ce","popup_bounce_in":"bp_modal_module_popup_bounce_in--c23ce","smallSizeModal":"bp_modal_module_smallSizeModal--c23ce","mediumSizeModal":"bp_modal_module_mediumSizeModal--c23ce","largeSizeModal":"bp_modal_module_largeSizeModal--c23ce","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--c23ce","loadingContainerActive":"bp_modal_module_loadingContainerActive--c23ce","scrollableContainer":"bp_modal_module_scrollableContainer--c23ce","close":"bp_modal_module_close--c23ce","onColor":"bp_modal_module_onColor--c23ce","backButton":"bp_modal_module_backButton--c23ce","modalHeader":"bp_modal_module_modalHeader--c23ce","modalTitle":"bp_modal_module_modalTitle--c23ce","body":"bp_modal_module_body--c23ce","footer":"bp_modal_module_footer--c23ce","footerButton":"bp_modal_module_footerButton--c23ce","loadingContainer":"bp_modal_module_loadingContainer--c23ce","loading":"bp_modal_module_loading--c23ce","loadingOverlay":"bp_modal_module_loadingOverlay--c23ce","loadingContent":"bp_modal_module_loadingContent--c23ce","loadingContentVisible":"bp_modal_module_loadingContentVisible--c23ce"};
+var styles = {"overlay":"bp_modal_module_overlay--86b04","headerDividerLine":"bp_modal_module_headerDividerLine--86b04","footerDividerLine":"bp_modal_module_footerDividerLine--86b04","content":"bp_modal_module_content--86b04","popup_bounce_in":"bp_modal_module_popup_bounce_in--86b04","smallSizeModal":"bp_modal_module_smallSizeModal--86b04","mediumSizeModal":"bp_modal_module_mediumSizeModal--86b04","largeSizeModal":"bp_modal_module_largeSizeModal--86b04","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--86b04","loadingContainerActive":"bp_modal_module_loadingContainerActive--86b04","scrollableContainer":"bp_modal_module_scrollableContainer--86b04","close":"bp_modal_module_close--86b04","onColor":"bp_modal_module_onColor--86b04","backButton":"bp_modal_module_backButton--86b04","modalHeader":"bp_modal_module_modalHeader--86b04","modalTitle":"bp_modal_module_modalTitle--86b04","body":"bp_modal_module_body--86b04","footer":"bp_modal_module_footer--86b04","footerButton":"bp_modal_module_footerButton--86b04","loadingContainer":"bp_modal_module_loadingContainer--86b04","loading":"bp_modal_module_loading--86b04","loadingOverlay":"bp_modal_module_loadingOverlay--86b04","loadingContent":"bp_modal_module_loadingContent--86b04","loadingContentVisible":"bp_modal_module_loadingContentVisible--86b04"};
 
 export { styles as default };

package/package.json

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