@box/blueprint-web 12.96.0 → 12.98.0

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/dist/lib-esm/text/text.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textReset":"bp_text_module_textReset--2a8e9","breakWord":"bp_text_module_breakWord--2a8e9","textOnLightDefault":"bp_text_module_textOnLightDefault--2a8e9","textOnLightSecondary":"bp_text_module_textOnLightSecondary--2a8e9","textOnLightLink":"bp_text_module_textOnLightLink--2a8e9","textOnDarkDefault":"bp_text_module_textOnDarkDefault--2a8e9","titleMondo":"bp_text_module_titleMondo--2a8e9","titleXLarge":"bp_text_module_titleXLarge--2a8e9","titleLarge":"bp_text_module_titleLarge--2a8e9","titleMedium":"bp_text_module_titleMedium--2a8e9","titleSmall":"bp_text_module_titleSmall--2a8e9","subtitle":"bp_text_module_subtitle--2a8e9","bodyLargeBold":"bp_text_module_bodyLargeBold--2a8e9","bodyLarge":"bp_text_module_bodyLarge--2a8e9","bodyDefaultBold":"bp_text_module_bodyDefaultBold--2a8e9","bodyDefaultSemibold":"bp_text_module_bodyDefaultSemibold--2a8e9","bodyDefault":"bp_text_module_bodyDefault--2a8e9","caption":"bp_text_module_caption--2a8e9","labelBold":"bp_text_module_labelBold--2a8e9","label":"bp_text_module_label--2a8e9","bodySmallSemibold":"bp_text_module_bodySmallSemibold--2a8e9","bodySmall":"bp_text_module_bodySmall--2a8e9","captionBold":"bp_text_module_captionBold--2a8e9","link":"bp_text_module_link--2a8e9","notification":"bp_text_module_notification--2a8e9"};
+var styles = {"textReset":"bp_text_module_textReset--d93f2","breakWord":"bp_text_module_breakWord--d93f2","textOnLightDefault":"bp_text_module_textOnLightDefault--d93f2","textOnLightSecondary":"bp_text_module_textOnLightSecondary--d93f2","textOnLightLink":"bp_text_module_textOnLightLink--d93f2","textOnLightError":"bp_text_module_textOnLightError--d93f2","textOnDarkDefault":"bp_text_module_textOnDarkDefault--d93f2","titleMondo":"bp_text_module_titleMondo--d93f2","titleXLarge":"bp_text_module_titleXLarge--d93f2","titleLarge":"bp_text_module_titleLarge--d93f2","titleMedium":"bp_text_module_titleMedium--d93f2","titleSmall":"bp_text_module_titleSmall--d93f2","subtitle":"bp_text_module_subtitle--d93f2","bodyLargeBold":"bp_text_module_bodyLargeBold--d93f2","bodyLarge":"bp_text_module_bodyLarge--d93f2","bodyDefaultBold":"bp_text_module_bodyDefaultBold--d93f2","bodyDefaultSemibold":"bp_text_module_bodyDefaultSemibold--d93f2","bodyDefault":"bp_text_module_bodyDefault--d93f2","caption":"bp_text_module_caption--d93f2","labelBold":"bp_text_module_labelBold--d93f2","label":"bp_text_module_label--d93f2","bodySmallSemibold":"bp_text_module_bodySmallSemibold--d93f2","bodySmall":"bp_text_module_bodySmall--d93f2","captionBold":"bp_text_module_captionBold--d93f2","link":"bp_text_module_link--d93f2","notification":"bp_text_module_notification--d93f2"};
 
 export { styles as default };

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

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
 import { type StyledText } from '../utils/commonTypes';
 type TypographyVariant = 'titleMondo' | 'titleXLarge' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'subtitle' | 'bodyLargeBold' | 'bodyLarge' | 'bodyDefaultBold' | 'bodyDefaultSemibold' | 'bodyDefault' | 'caption' | 'labelBold' | 'label';
-type TypographyColors = 'textOnLightDefault' | 'textOnLightSecondary' | 'textOnLightLink' | 'textOnDarkDefault';
+type TypographyColors = 'textOnLightDefault' | 'textOnLightSecondary' | 'textOnLightLink' | 'textOnLightError' | 'textOnDarkDefault';
 type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend' | 'label' | 'div';
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/package.json

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