@box/blueprint-web 14.11.1 → 14.12.1

package/dist/lib-esm/index.css

@@ -8406,7 +8406,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   display:inline;
 }
 
-.bp_modal_module_overlay--97abf[data-modern=false]{
+.bp_modal_module_overlay--e96d7[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);
@@ -8447,7 +8447,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.bp_modal_module_overlay--97abf[data-modern=true]{
+.bp_modal_module_overlay--e96d7[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);
@@ -8488,7 +8488,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.bp_modal_module_overlay--97abf{
+.bp_modal_module_overlay--e96d7{
   background-color:var(--modal-overlay-background);
   display:grid;
   inset:0;
@@ -8496,15 +8496,15 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   z-index:370;
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--97abf{
+  .bp_modal_module_overlay--e96d7{
     place-items:center;
   }
 }
 
-.bp_modal_module_headerDividerLine--97abf{
+.bp_modal_module_headerDividerLine--e96d7{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--97abf::after{
+.bp_modal_module_headerDividerLine--e96d7::after{
   border-bottom:var(--modal-divider-line-border);
   bottom:0;
   content:"";
@@ -8513,16 +8513,16 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   right:var(--modal-divider-line-offset-right);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--97abf::after{
+  .bp_modal_module_headerDividerLine--e96d7::after{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--97abf{
+.bp_modal_module_footerDividerLine--e96d7{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--97abf::before{
+.bp_modal_module_footerDividerLine--e96d7::before{
   border-bottom:var(--modal-divider-line-border);
   content:"";
   left:var(--modal-divider-line-offset-left);
@@ -8531,13 +8531,13 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--97abf::before{
+  .bp_modal_module_footerDividerLine--e96d7::before{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_content--97abf{
+.bp_modal_module_content--e96d7{
   display:flex;
   flex-direction:column;
   height:100vh;
@@ -8545,16 +8545,15 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--97abf{
+  .bp_modal_module_content--e96d7{
     overflow:hidden;
   }
 }
-.bp_modal_module_content--97abf{
-  animation:bp_modal_module_popup_bounce_in--97abf var(--animation-duration-3);
+.bp_modal_module_content--e96d7{
   background-color:var(--modal-content-background);
 }
 @media (width > 459px){
-  .bp_modal_module_content--97abf{
+  .bp_modal_module_content--e96d7{
     border-radius:var(--modal-border-radius);
     height:auto;
     margin:var(--modal-margin);
@@ -8562,79 +8561,96 @@ table.bp_inline_table_module_inlineTable--fc22e[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--97abf.bp_modal_module_smallSizeModal--97abf{
+  .bp_modal_module_content--e96d7.bp_modal_module_smallSizeModal--e96d7{
     max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--97abf.bp_modal_module_mediumSizeModal--97abf{
+  .bp_modal_module_content--e96d7.bp_modal_module_mediumSizeModal--e96d7{
     max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--97abf.bp_modal_module_largeSizeModal--97abf{
+  .bp_modal_module_content--e96d7.bp_modal_module_largeSizeModal--e96d7{
     max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--97abf.bp_modal_module_xlargeSizeModal--97abf{
+  .bp_modal_module_content--e96d7.bp_modal_module_xlargeSizeModal--e96d7{
     max-width:var(--modal-max-width-xlarge);
   }
 }
-.bp_modal_module_content--97abf:has(.bp_modal_module_loadingContainerActive--97abf) .bp_modal_module_footerDividerLine--97abf::before,.bp_modal_module_content--97abf:has(.bp_modal_module_loadingContainerActive--97abf) .bp_modal_module_headerDividerLine--97abf::after{
+.bp_modal_module_content--e96d7:has(.bp_modal_module_loadingContainerActive--e96d7) .bp_modal_module_footerDividerLine--e96d7::before,.bp_modal_module_content--e96d7:has(.bp_modal_module_loadingContainerActive--e96d7) .bp_modal_module_headerDividerLine--e96d7::after{
   display:none;
 }
 @media (width > 459px){
-  .bp_modal_module_content--97abf:has(.bp_modal_module_loadingContainerActive--97abf){
+  .bp_modal_module_content--e96d7:has(.bp_modal_module_loadingContainerActive--e96d7){
     max-height:var(--modal-max-height-loading);
     max-width:var(--modal-max-width-loading);
   }
 }
 
-.bp_modal_module_scrollableContainer--97abf{
+.bp_modal_module_overlay--e96d7[data-modern=false] .bp_modal_module_content--e96d7,.bp_modal_module_overlay--e96d7[data-modern=true] .bp_modal_module_content--e96d7[data-bp-animated=false]{
+  animation:bp_modal_module_popup_bounce_in--e96d7 var(--animation-duration-3);
+}
+
+.bp_modal_module_overlay--e96d7[data-modern=true] .bp_modal_module_content--e96d7[data-bp-animated=true][data-state=open]{
+  animation-duration:var(--bp-duration-long);
+  animation-fill-mode:both;
+  animation-name:bp_modal_module_bpModalEnter--e96d7;
+  animation-timing-function:var(--bp-curve-large-on);
+}
+.bp_modal_module_overlay--e96d7[data-modern=true] .bp_modal_module_content--e96d7[data-bp-animated=true][data-state=closed]{
+  animation-duration:var(--bp-duration-medium);
+  animation-fill-mode:forwards;
+  animation-name:bp_modal_module_bpModalExit--e96d7;
+  animation-timing-function:var(--bp-curve-large-off);
+}
+
+.bp_modal_module_scrollableContainer--e96d7{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--97abf{
+  .bp_modal_module_scrollableContainer--e96d7{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--97abf .bp_modal_module_close--97abf{
+.bp_modal_module_content--e96d7 .bp_modal_module_close--e96d7{
   position:fixed;
 }
 @media (width > 374px){
-  .bp_modal_module_content--97abf .bp_modal_module_close--97abf{
+  .bp_modal_module_content--e96d7 .bp_modal_module_close--e96d7{
     position:absolute;
   }
 }
-.bp_modal_module_content--97abf .bp_modal_module_close--97abf{
+.bp_modal_module_content--e96d7 .bp_modal_module_close--e96d7{
   color:var(--modal-close-button-color);
   right:var(--modal-close-button-offset-right);
   top:var(--modal-close-button-offset-top);
 }
 
-.bp_modal_module_close--97abf.bp_modal_module_onColor--97abf{
+.bp_modal_module_close--e96d7.bp_modal_module_onColor--e96d7{
   background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--97abf.bp_modal_module_onColor--97abf:hover{
+.bp_modal_module_close--e96d7.bp_modal_module_onColor--e96d7:hover{
   background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--97abf.bp_modal_module_onColor--97abf:active{
+.bp_modal_module_close--e96d7.bp_modal_module_onColor--e96d7:active{
   background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--97abf .bp_modal_module_backButton--97abf{
+.bp_modal_module_content--e96d7 .bp_modal_module_backButton--e96d7{
   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--97abf .bp_modal_module_backButton--97abf{
+  .bp_modal_module_content--e96d7 .bp_modal_module_backButton--e96d7{
     height:var(--modal-back-button-size-non-fullscreen);
     width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--97abf{
+.bp_modal_module_modalHeader--e96d7{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--97abf{
+.bp_modal_module_modalTitle--e96d7{
   display:flex;
   flex-direction:column;
   gap:var(--modal-title-gap);
@@ -8642,80 +8658,80 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   padding:var(--modal-title-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--97abf{
+  .bp_modal_module_modalTitle--e96d7{
     padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--97abf{
+.bp_modal_module_body--e96d7{
   color:var(--modal-body-text-color);
   padding:var(--modal-body-padding-fullscreen);
 }
 @media (width > 459px){
-  .bp_modal_module_body--97abf{
+  .bp_modal_module_body--e96d7{
     padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footer--97abf{
+.bp_modal_module_footer--e96d7{
   display:flex;
   justify-content:flex-end;
   padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--97abf{
+  .bp_modal_module_footer--e96d7{
     padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerButton--97abf + .bp_modal_module_footerButton--97abf{
+.bp_modal_module_footerButton--e96d7 + .bp_modal_module_footerButton--e96d7{
   margin-inline-start:var(--modal-footer-button-margin-inline-start);
 }
 
-.bp_modal_module_loadingContainer--97abf{
+.bp_modal_module_loadingContainer--e96d7{
   display:flex;
   flex-direction:column;
   flex-grow:1;
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContainer--97abf{
+  .bp_modal_module_loadingContainer--e96d7{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContainerActive--97abf{
+.bp_modal_module_loadingContainerActive--e96d7{
   overflow:hidden;
 }
 
-.bp_modal_module_loading--97abf{
+.bp_modal_module_loading--e96d7{
   align-items:center;
   display:flex;
 }
 
-.bp_modal_module_loadingOverlay--97abf{
+.bp_modal_module_loadingOverlay--e96d7{
   background-color:var(--modal-content-background);
   inset:0;
   position:absolute;
   z-index:1;
 }
 
-.bp_modal_module_loadingContent--97abf{
+.bp_modal_module_loadingContent--e96d7{
   display:flex;
   flex-direction:column;
   visibility:hidden;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContent--97abf{
+  .bp_modal_module_loadingContent--e96d7{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContentVisible--97abf{
+.bp_modal_module_loadingContentVisible--e96d7{
   visibility:visible;
 }
 
-@keyframes bp_modal_module_popup_bounce_in--97abf{
+@keyframes bp_modal_module_popup_bounce_in--e96d7{
   0%{
     transform:scale3d(.1, .1, 1);
   }
@@ -8723,6 +8739,24 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
     transform:scaleX(1);
   }
 }
+@keyframes bp_modal_module_bpModalEnter--e96d7{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_modal_module_bpModalExit--e96d7{
+  from{
+    opacity:var(--bp-opacity-visible);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+  }
+}
 .bp_navigation_menu_module_link--f2562[data-modern=false]{
   --navigation-menu-link-text-color:var(--text-text-on-light);
   font-family:var(--body-default-font-family);

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

@@ -2,6 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './modal.module.js';
 
@@ -20,6 +22,10 @@ const ModalContent = /*#__PURE__*/forwardRef(({
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Modal');
   return jsx(RadixDialog.Portal, {
     container: container,
     children: jsx(RadixDialog.Overlay, {
@@ -30,6 +36,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
         ref: forwardedRef,
         asChild: asChild,
         className: clsx(styles.content, styles[`${size}SizeModal`], className),
+        "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
         "data-testid": dataTestId,
         children: children
       })

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.11.1",
+    "version": "14.12.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.114.0",
+        "@box/blueprint-web-assets": "^4.114.2",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.17.42",
+        "@box/storybook-utils": "^0.17.44",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",