@box/blueprint-web 13.5.12 → 13.6.0

package/dist/lib-esm/blueprint-configuration-context/blueprint-configuration-context.d.ts

@@ -12,11 +12,15 @@ export declare const BlueprintConfigurationOptions: {
 };
 export interface BlueprintConfiguration {
     typography: TypographyOption;
+    componentsWithAnimationEnabled: string[];
 }
 export declare const BlueprintConfigurationContext: import("react").Context<BlueprintConfiguration>;
 export interface BlueprintConfigurationProviderProps {
     children: ReactNode;
     typography?: TypographyOption;
+    animationsPhase1Enabled?: boolean;
+    animationsPhase2Enabled?: boolean;
+    animationsPhase3Enabled?: boolean;
 }
-export declare const BlueprintConfigurationProvider: ({ children, typography, }: BlueprintConfigurationProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BlueprintConfigurationProvider: ({ children, typography, animationsPhase1Enabled, animationsPhase2Enabled, animationsPhase3Enabled, }: BlueprintConfigurationProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lib-esm/blueprint-configuration-context/blueprint-configuration-context.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useMemo } from 'react';
+import { ANIMATED_COMPONENTS_BY_PHASE } from './consts.js';
 
 var TypographyOption;
 (function (TypographyOption) {
@@ -14,15 +15,20 @@ const BlueprintConfigurationOptions = {
   typography: TypographyOption
 };
 const BlueprintConfigurationContext = /*#__PURE__*/createContext({
-  typography: BlueprintConfigurationOptions.typography.lato
+  typography: BlueprintConfigurationOptions.typography.lato,
+  componentsWithAnimationEnabled: []
 });
 const BlueprintConfigurationProvider = ({
   children,
-  typography = BlueprintConfigurationOptions.typography.lato
+  typography = BlueprintConfigurationOptions.typography.lato,
+  animationsPhase1Enabled = false,
+  animationsPhase2Enabled = false,
+  animationsPhase3Enabled = false
 }) => {
   const value = useMemo(() => ({
-    typography
-  }), [typography]);
+    typography,
+    componentsWithAnimationEnabled: [...(animationsPhase1Enabled ? ANIMATED_COMPONENTS_BY_PHASE.phase1 : []), ...(animationsPhase2Enabled ? ANIMATED_COMPONENTS_BY_PHASE.phase2 : []), ...(animationsPhase3Enabled ? ANIMATED_COMPONENTS_BY_PHASE.phase3 : [])]
+  }), [typography, animationsPhase1Enabled, animationsPhase2Enabled, animationsPhase3Enabled]);
   return jsx(BlueprintConfigurationContext.Provider, {
     value: value,
     children: children

package/dist/lib-esm/blueprint-configuration-context/consts.d.ts

@@ -0,0 +1,11 @@
+/**
+ * List of components by animations phase:
+ * phase1: defined in LXP-104
+ * phase2: defined in LXP-1118
+ * phase3: defined in LXP-1196 (pending)
+ */
+export declare const ANIMATED_COMPONENTS_BY_PHASE: {
+    readonly phase1: readonly ["Button", "IconButton", "DropdownMenu", "Tooltip", "Popover", "SplitButton", "CardTooltip", "NavigationMenu", "Modal", "TextButton", "ContextMenu"];
+    readonly phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup"];
+    readonly phase3: readonly [];
+};

package/dist/lib-esm/blueprint-configuration-context/consts.js

@@ -0,0 +1,13 @@
+/**
+ * List of components by animations phase:
+ * phase1: defined in LXP-104
+ * phase2: defined in LXP-1118
+ * phase3: defined in LXP-1196 (pending)
+ */
+const ANIMATED_COMPONENTS_BY_PHASE = {
+  phase1: ['Button', 'IconButton', 'DropdownMenu', 'Tooltip', 'Popover', 'SplitButton', 'CardTooltip', 'NavigationMenu', 'Modal', 'TextButton', 'ContextMenu'],
+  phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup'],
+  phase3: []
+};
+
+export { ANIMATED_COMPONENTS_BY_PHASE };

package/dist/lib-esm/content-card/content-card.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_content_card_module_card--edc60","ghostCard":"bp_content_card_module_ghostCard--edc60","cardContent":"bp_content_card_module_cardContent--edc60","cardTitle":"bp_content_card_module_cardTitle--edc60","cardTitleText":"bp_content_card_module_cardTitleText--edc60","cardBody":"bp_content_card_module_cardBody--edc60","cardBodyText":"bp_content_card_module_cardBodyText--edc60","cardIcon":"bp_content_card_module_cardIcon--edc60","cardBackground":"bp_content_card_module_cardBackground--edc60","image":"bp_content_card_module_image--edc60","iconGhost":"bp_content_card_module_iconGhost--edc60","titleGhost":"bp_content_card_module_titleGhost--edc60","bodyGhost":"bp_content_card_module_bodyGhost--edc60","pillGhostContainer":"bp_content_card_module_pillGhostContainer--edc60","pillGhost":"bp_content_card_module_pillGhost--edc60"};
+var styles = {"card":"bp_content_card_module_card--902ef","ghostCard":"bp_content_card_module_ghostCard--902ef","cardContent":"bp_content_card_module_cardContent--902ef","cardTitle":"bp_content_card_module_cardTitle--902ef","cardTitleText":"bp_content_card_module_cardTitleText--902ef","cardBody":"bp_content_card_module_cardBody--902ef","cardBodyText":"bp_content_card_module_cardBodyText--902ef","cardIcon":"bp_content_card_module_cardIcon--902ef","cardBackground":"bp_content_card_module_cardBackground--902ef","image":"bp_content_card_module_image--902ef","iconGhost":"bp_content_card_module_iconGhost--902ef","titleGhost":"bp_content_card_module_titleGhost--902ef","bodyGhost":"bp_content_card_module_bodyGhost--902ef","pillGhostContainer":"bp_content_card_module_pillGhostContainer--902ef","pillGhost":"bp_content_card_module_pillGhost--902ef"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -4739,12 +4739,14 @@
   margin-block:var(--select-content-viewport-option-separator-margin-block);
 }
 
-.bp_content_card_module_card--edc60[data-modern=false],.bp_content_card_module_ghostCard--edc60[data-modern=false]{
+.bp_content_card_module_card--902ef[data-modern=false],.bp_content_card_module_ghostCard--902ef[data-modern=false]{
+  --content-card-body-display:block;
   --content-card-background-color:var(--surface-surface);
   --content-card-background-height:var(--size-15);
   --content-card-border-radius:var(--size-3);
   --content-card-border-size:var(--border-1);
   --content-card-content-gap:var(--size-2);
+  --content-card-card-content-gap:var(--size-2);
   --content-card-dropshadow:var(--dropshadow-3);
   --content-card-focused-border-color:var(--outline-focus-on-light);
   --content-card-focused-border-size:var(--border-2);
@@ -4766,12 +4768,14 @@
   --content-card-pressed-border:var(--border-1) solid var(--border-card-border);
 }
 
-.bp_content_card_module_card--edc60[data-modern=true],.bp_content_card_module_ghostCard--edc60[data-modern=true]{
+.bp_content_card_module_card--902ef[data-modern=true],.bp_content_card_module_ghostCard--902ef[data-modern=true]{
+  --content-card-body-display:flex;
   --content-card-background-color:var(--bp-surface-card-surface);
   --content-card-background-height:var(--bp-size-150);
   --content-card-border-radius:var(--bp-radius-08);
   --content-card-border-size:var(--bp-border-01);
   --content-card-content-gap:var(--bp-space-020);
+  --content-card-card-content-gap:unset;
   --content-card-dropshadow:var(--dropshadow-3);
   --content-card-focused-border-color:var(--bp-outline-focus-on-light);
   --content-card-focused-border-size:var(--bp-border-02);
@@ -4793,7 +4797,7 @@
   --content-card-pressed-border:var(--bp-border-01) solid var(--bp-border-card-border);
 }
 
-.bp_content_card_module_card--edc60{
+.bp_content_card_module_card--902ef{
   background-color:var(--content-card-background-color);
   border:var(--content-card-border);
   border-radius:var(--content-card-border-radius);
@@ -4804,30 +4808,30 @@
   padding:var(--content-card-padding);
   position:relative;
 }
-.bp_content_card_module_card--edc60:hover{
+.bp_content_card_module_card--902ef:hover{
   box-shadow:var(--content-card-dropshadow);
 }
-.bp_content_card_module_card--edc60:focus-visible{
+.bp_content_card_module_card--902ef:focus-visible{
   border:var(--content-card-focused-border);
   box-shadow:var(--content-card-dropshadow);
   outline:none;
 }
-.bp_content_card_module_card--edc60:active{
+.bp_content_card_module_card--902ef:active{
   background-color:var(--content-card-pressed-background-color);
   border:var(--content-card-pressed-border);
   box-shadow:none;
 }
 
-.bp_content_card_module_cardContent--edc60{
+.bp_content_card_module_cardContent--902ef{
   display:flex;
   flex-direction:column;
-  gap:var(--content-card-content-gap);
+  gap:var(--content-card-card-content-gap);
   height:100%;
   justify-content:space-between;
   padding-block-start:calc(var(--content-card-icon-size) + var(--content-card-content-gap) + var(--content-card-icon-border-size));
 }
 
-.bp_content_card_module_cardTitle--edc60{
+.bp_content_card_module_cardTitle--902ef{
   align-items:var(--content-card-title-align-items);
   display:flex;
   height:var(--content-card-text-height);
@@ -4835,26 +4839,27 @@
   min-height:var(--content-card-text-height-min);
 }
 
-.bp_content_card_module_cardTitleText--edc60{
+.bp_content_card_module_cardTitleText--902ef{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   display:-webkit-inline-box;
   overflow:hidden;
 }
 
-.bp_content_card_module_cardBody--edc60{
+.bp_content_card_module_cardBody--902ef{
+  display:var(--content-card-body-display);
   height:var(--content-card-text-height);
   margin-block-end:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_cardBodyText--edc60{
+.bp_content_card_module_cardBodyText--902ef{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   display:-webkit-inline-box;
   overflow:hidden;
 }
 
-.bp_content_card_module_cardIcon--edc60{
+.bp_content_card_module_cardIcon--902ef{
   background-color:var(--content-card-background-color);
   border:var(--content-card-icon-border-size) solid var(--content-card-icon-border-color);
   border-radius:var(--content-card-icon-border-radius);
@@ -4867,7 +4872,7 @@
   z-index:1;
 }
 
-.bp_content_card_module_cardBackground--edc60{
+.bp_content_card_module_cardBackground--902ef{
   height:var(--content-card-background-height);
   left:0;
   overflow:hidden;
@@ -4876,12 +4881,12 @@
   width:100%;
 }
 
-.bp_content_card_module_image--edc60{
+.bp_content_card_module_image--902ef{
   height:100%;
   width:100%;
 }
 
-.bp_content_card_module_ghostCard--edc60{
+.bp_content_card_module_ghostCard--902ef{
   display:flex;
   flex-direction:column;
   max-width:calc(var(--content-card-max-width) - var(--content-card-padding));
@@ -4890,20 +4895,20 @@
   position:relative;
 }
 
-.bp_content_card_module_iconGhost--edc60,.bp_content_card_module_titleGhost--edc60{
+.bp_content_card_module_iconGhost--902ef,.bp_content_card_module_titleGhost--902ef{
   margin-block-end:var(--content-card-padding);
 }
 
-.bp_content_card_module_bodyGhost--edc60{
+.bp_content_card_module_bodyGhost--902ef{
   margin-block-end:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_pillGhostContainer--edc60{
+.bp_content_card_module_pillGhostContainer--902ef{
   display:flex;
   margin-block:var(--content-card-content-gap) var(--content-card-padding);
 }
 
-.bp_content_card_module_pillGhost--edc60{
+.bp_content_card_module_pillGhost--902ef{
   margin-inline-end:var(--content-card-content-gap);
 }
 .bp_content_field_module_contentFieldWrapper--67a59{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "13.5.12",
+    "version": "13.6.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.104.7",
+        "@box/blueprint-web-assets": "^4.104.9",
         "@internationalized/date": "^3.7.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.16.68",
+        "@box/storybook-utils": "^0.16.70",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",