@box/blueprint-web 12.96.0 → 12.97.0

package/dist/lib-esm/index.css

@@ -6983,7 +6983,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   display:inline;
 }
 
-.bp_modal_module_overlay--5478d[data-modern=false]{
+.bp_modal_module_overlay--1e234[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);
@@ -6993,6 +6993,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(--space-8);
   --modal-border-radius:var(--radius-4);
   --modal-close-button-color:var(--gray-65);
@@ -7018,9 +7021,10 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-footer-padding:var(--space-4);
   --modal-footer-padding-non-fullscreen:var(--space-6);
   --modal-footer-button-margin-inline-start:var(--space-3);
+  --modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
 }
 
-.bp_modal_module_overlay--5478d[data-modern=true]{
+.bp_modal_module_overlay--1e234[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);
@@ -7055,9 +7059,10 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-footer-padding:var(--bp-space-040);
   --modal-footer-padding-non-fullscreen:var(--bp-space-060);
   --modal-footer-button-margin-inline-start:var(--bp-space-030);
+  --modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
 }
 
-.bp_modal_module_overlay--5478d{
+.bp_modal_module_overlay--1e234{
   background-color:var(--modal-overlay-background);
   bottom:0;
   display:grid;
@@ -7069,13 +7074,49 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   z-index:370;
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--5478d{
+  .bp_modal_module_overlay--1e234{
     place-items:center;
   }
 }
 
-.bp_modal_module_content--5478d{
-  animation:bp_modal_module_popup_bounce_in--5478d var(--animation-duration-3);
+.bp_modal_module_headerDividerLine--1e234{
+  position:relative;
+}
+.bp_modal_module_headerDividerLine--1e234::after{
+  border-bottom:var(--modal-divider-line-border);
+  bottom:0;
+  content:"";
+  left:var(--modal-divider-line-offset-left);
+  position:absolute;
+  right:var(--modal-divider-line-offset-right);
+}
+@media (width > 459px){
+  .bp_modal_module_headerDividerLine--1e234::after{
+    left:var(--modal-divider-line-offset-left-non-fullscreen);
+    right:var(--modal-divider-line-offset-right-non-fullscreen);
+  }
+}
+
+.bp_modal_module_footerDividerLine--1e234{
+  position:relative;
+}
+.bp_modal_module_footerDividerLine--1e234::before{
+  border-bottom:var(--modal-divider-line-border);
+  content:"";
+  left:var(--modal-divider-line-offset-left);
+  position:absolute;
+  right:var(--modal-divider-line-offset-right);
+  top:0;
+}
+@media (width > 459px){
+  .bp_modal_module_footerDividerLine--1e234::before{
+    left:var(--modal-divider-line-offset-left-non-fullscreen);
+    right:var(--modal-divider-line-offset-right-non-fullscreen);
+  }
+}
+
+.bp_modal_module_content--1e234{
+  animation:bp_modal_module_popup_bounce_in--1e234 var(--animation-duration-3);
   background-color:var(--modal-content-background);
   display:flex;
   flex-direction:column;
@@ -7084,80 +7125,90 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--5478d{
+  .bp_modal_module_content--1e234{
     overflow:hidden;
   }
 }
 @media (width > 459px){
-  .bp_modal_module_content--5478d{
+  .bp_modal_module_content--1e234{
     border-radius:var(--modal-border-radius);
     height:auto;
     margin:var(--modal-margin);
     max-height:var(--modal-max-height-non-fullscreen);
     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--5478d.bp_modal_module_smallSizeModal--5478d{
+  .bp_modal_module_content--1e234.bp_modal_module_smallSizeModal--1e234{
     max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--5478d.bp_modal_module_mediumSizeModal--5478d{
+  .bp_modal_module_content--1e234.bp_modal_module_mediumSizeModal--1e234{
     max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--5478d.bp_modal_module_largeSizeModal--5478d{
+  .bp_modal_module_content--1e234.bp_modal_module_largeSizeModal--1e234{
     max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--5478d.bp_modal_module_xlargeSizeModal--5478d{
+  .bp_modal_module_content--1e234.bp_modal_module_xlargeSizeModal--1e234{
     max-width:var(--modal-max-width-xlarge);
   }
 }
+.bp_modal_module_content--1e234:has(.bp_modal_module_loadingContainerActive--1e234) .bp_modal_module_footerDividerLine--1e234::before,.bp_modal_module_content--1e234:has(.bp_modal_module_loadingContainerActive--1e234) .bp_modal_module_headerDividerLine--1e234::after{
+  display:none;
+}
+@media (width > 459px){
+  .bp_modal_module_content--1e234:has(.bp_modal_module_loadingContainerActive--1e234){
+    max-height:var(--modal-max-height-loading);
+    max-width:var(--modal-max-width-loading);
+  }
+}
 
-.bp_modal_module_scrollableContainer--5478d{
+.bp_modal_module_scrollableContainer--1e234{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--5478d{
+  .bp_modal_module_scrollableContainer--1e234{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--5478d .bp_modal_module_close--5478d{
+.bp_modal_module_content--1e234 .bp_modal_module_close--1e234{
   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--5478d .bp_modal_module_close--5478d{
+  .bp_modal_module_content--1e234 .bp_modal_module_close--1e234{
     position:absolute;
   }
 }
 
-.bp_modal_module_close--5478d.bp_modal_module_onColor--5478d{
+.bp_modal_module_close--1e234.bp_modal_module_onColor--1e234{
   background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--5478d.bp_modal_module_onColor--5478d:hover{
+.bp_modal_module_close--1e234.bp_modal_module_onColor--1e234:hover{
   background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--5478d.bp_modal_module_onColor--5478d:active{
+.bp_modal_module_close--1e234.bp_modal_module_onColor--1e234:active{
   background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--5478d .bp_modal_module_backButton--5478d{
+.bp_modal_module_content--1e234 .bp_modal_module_backButton--1e234{
   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--5478d .bp_modal_module_backButton--5478d{
+  .bp_modal_module_content--1e234 .bp_modal_module_backButton--1e234{
     height:var(--modal-back-button-size-non-fullscreen);
     width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--5478d{
+.bp_modal_module_modalHeader--1e234{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--5478d{
+.bp_modal_module_modalTitle--1e234{
   display:flex;
   flex-direction:column;
   gap:var(--modal-title-gap);
@@ -7165,73 +7216,78 @@ 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--5478d{
+  .bp_modal_module_modalTitle--1e234{
     padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--5478d{
+.bp_modal_module_body--1e234{
   color:var(--modal-body-text-color);
   padding:var(--modal-body-padding-fullscreen);
 }
 @media (width > 459px){
-  .bp_modal_module_body--5478d{
+  .bp_modal_module_body--1e234{
     padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_headerDividerLine--5478d{
-  position:relative;
-}
-.bp_modal_module_headerDividerLine--5478d::after{
-  border-bottom:var(--modal-divider-line-border);
-  bottom:0;
-  content:"";
-  left:var(--modal-divider-line-offset-left);
-  position:absolute;
-  right:var(--modal-divider-line-offset-right);
+.bp_modal_module_footer--1e234{
+  display:flex;
+  justify-content:flex-end;
+  padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--5478d::after{
-    left:var(--modal-divider-line-offset-left-non-fullscreen);
-    right:var(--modal-divider-line-offset-right-non-fullscreen);
+  .bp_modal_module_footer--1e234{
+    padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--5478d{
+.bp_modal_module_footerButton--1e234 + .bp_modal_module_footerButton--1e234{
+  margin-inline-start:var(--modal-footer-button-margin-inline-start);
+}
+
+.bp_modal_module_loadingContainer--1e234{
+  display:flex;
+  min-height:0;
   position:relative;
+  transition:height var(--modal-loading-animation);
 }
-.bp_modal_module_footerDividerLine--5478d::before{
-  border-bottom:var(--modal-divider-line-border);
-  content:"";
-  left:var(--modal-divider-line-offset-left);
+
+.bp_modal_module_loadingContainerActive--1e234{
+  height:var(--modal-loading-height);
+  overflow:hidden;
+}
+
+.bp_modal_module_loading--1e234{
+  align-items:center;
+  display:flex;
+}
+
+.bp_modal_module_loadingContainerActive--1e234 .bp_modal_module_loading--1e234{
+  height:var(--modal-loading-height);
+}
+
+.bp_modal_module_loadingOverlay--1e234{
+  background-color:var(--modal-content-background);
+  bottom:0;
+  left:0;
+  min-height:var(--modal-loading-height);
   position:absolute;
-  right:var(--modal-divider-line-offset-right);
+  right:0;
   top:0;
-}
-@media (width > 459px){
-  .bp_modal_module_footerDividerLine--5478d::before{
-    left:var(--modal-divider-line-offset-left-non-fullscreen);
-    right:var(--modal-divider-line-offset-right-non-fullscreen);
-  }
+  z-index:1;
 }
 
-.bp_modal_module_footer--5478d{
+.bp_modal_module_loadingContent--1e234{
   display:flex;
-  justify-content:flex-end;
-  padding:var(--modal-footer-padding);
-}
-@media (width > 459px){
-  .bp_modal_module_footer--5478d{
-    padding:var(--modal-footer-padding-non-fullscreen);
-  }
+  visibility:hidden;
 }
 
-.bp_modal_module_footerButton--5478d + .bp_modal_module_footerButton--5478d{
-  margin-inline-start:var(--modal-footer-button-margin-inline-start);
+.bp_modal_module_loadingContentVisible--1e234{
+  visibility:visible;
 }
 
-@keyframes bp_modal_module_popup_bounce_in--5478d{
+@keyframes bp_modal_module_popup_bounce_in--1e234{
   0%{
     transform:scale3d(.1, .1, 1);
   }

package/dist/lib-esm/modal/constants.d.ts

@@ -0,0 +1 @@
+export declare const MODAL_LOADING_ANIMATION_DURATION = 200;

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

@@ -0,0 +1,3 @@
+const MODAL_LOADING_ANIMATION_DURATION = 200; // 200ms
+
+export { MODAL_LOADING_ANIMATION_DURATION };

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

@@ -1,2 +1,2 @@
 export { Modal } from './modal';
-export { type ModalCloseProps, type ModalContentProps, type ModalProps, type ModalTriggerProps } from './types';
+export type { ModalCloseProps, ModalContentProps, ModalLoadingProps, ModalProps, ModalTriggerProps } from './types';

package/dist/lib-esm/modal/modal-loading.d.ts

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

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

@@ -0,0 +1,63 @@
+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 { MODAL_LOADING_ANIMATION_DURATION } from './constants.js';
+import styles from './modal.module.js';
+
+var LoadingState;
+(function (LoadingState) {
+  LoadingState["Loading"] = "loading";
+  LoadingState["Animating"] = "animating";
+  LoadingState["ShowingContent"] = "showing_content";
+})(LoadingState || (LoadingState = {}));
+const ModalLoading = /*#__PURE__*/forwardRef(({
+  className,
+  loadingIndicatorAriaLabel,
+  isLoading,
+  children,
+  ...rest
+}, forwardedRef) => {
+  const [loadingState, setLoadingState] = useState(isLoading ? LoadingState.Loading : LoadingState.ShowingContent);
+  useEffect(() => {
+    if (isLoading) {
+      // Hide content when loading
+      setLoadingState(LoadingState.Loading);
+      return undefined;
+    }
+    // Start animating when loading completes
+    setLoadingState(LoadingState.Animating);
+    // Show content after modal resize completes
+    const showTimer = setTimeout(() => {
+      setLoadingState(LoadingState.ShowingContent);
+    }, MODAL_LOADING_ANIMATION_DURATION); // Duration of modal resize animation
+    return () => {
+      clearTimeout(showTimer);
+    };
+  }, [isLoading]);
+  const shouldShowLoading = loadingState === LoadingState.Loading;
+  const shouldShowContent = loadingState === LoadingState.ShowingContent;
+  return jsxs("div", {
+    className: clsx(styles.loadingContainer, {
+      [styles.loadingContainerActive]: shouldShowLoading
+    }),
+    children: [jsx("div", {
+      "aria-hidden": !shouldShowContent,
+      className: clsx(styles.loadingContent, {
+        [styles.loadingContentVisible]: shouldShowContent
+      }),
+      children: children
+    }), shouldShowLoading && jsx("div", {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx(className, styles.loading, styles.loadingOverlay),
+      children: jsx(LoadingIndicator, {
+        "aria-label": loadingIndicatorAriaLabel,
+        size: "large"
+      })
+    })]
+  });
+});
+ModalLoading.displayName = 'ModalLoading';
+
+export { ModalLoading };

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

@@ -47,6 +47,7 @@ export declare const Modal: (({ children, modal, ...props }: ModalProps) => impo
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     };
     Header: import("react").ForwardRefExoticComponent<import("./types").ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Loading: import("react").ForwardRefExoticComponent<import("./types").ModalLoadingProps & import("react").RefAttributes<HTMLDivElement>>;
     ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & {
         'data-testid'?: string;
     } & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -6,6 +6,7 @@ import { ModalClose } from './modal-close.js';
 import { ModalContent } from './modal-content.js';
 import { ModalFooter } from './modal-footer.js';
 import { ModalHeader } from './modal-header.js';
+import { ModalLoading } from './modal-loading.js';
 import { ModalScrollableContainer } from './modal-scrollable-container.js';
 import { ModalTitle } from './modal-title.js';
 import { ModalTrigger } from './modal-trigger.js';
@@ -50,6 +51,7 @@ const Modal = Object.assign(Root, {
   Content: ModalContent,
   Footer: ModalFooter,
   Header: ModalHeader,
+  Loading: ModalLoading,
   ScrollableContainer: ModalScrollableContainer,
   Trigger: ModalTrigger,
   Title: ModalTitle

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

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

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

@@ -1,5 +1,6 @@
 import { type DialogContentProps, type DialogPortalProps, type DialogProps, type DialogTitleProps } from '@radix-ui/react-dialog';
 import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
+import { type LoadingIndicatorProps } from '../loading-indicator/loading-indicator';
 import { type IconButtonProps } from '../primitives/icon-button';
 export type ModalProps = DialogProps;
 /** The size of the modal content.
@@ -56,3 +57,10 @@ export interface ModalHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Content of the Subttitle element */
     subtitle?: ReactNode;
 }
+export interface ModalLoadingProps extends HTMLAttributes<HTMLDivElement> {
+    loadingIndicatorAriaLabel: LoadingIndicatorProps['aria-label'];
+    /** When false, fades out loading indicator and reveals children. Defaults to true. */
+    isLoading: boolean;
+    /** Content to render underneath the loading indicator. The modal will size to this content. */
+    children: ReactNode;
+}

package/package.json

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