@box/blueprint-web 15.2.0 → 15.3.0

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

@@ -38,7 +38,7 @@ export declare const BLUEPRINT_CONFIGURATION_SPLITS: {
  */
 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 phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup", "InlineError"];
     readonly phase3: readonly [];
 };
 /**

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

@@ -40,7 +40,7 @@ const BLUEPRINT_CONFIGURATION_SPLITS = deepFreeze({
  */
 const ANIMATED_COMPONENTS_BY_PHASE = deepFreeze({
   phase1: ['Button', 'IconButton', 'DropdownMenu', 'Tooltip', 'Popover', 'SplitButton', 'CardTooltip', 'NavigationMenu', 'Modal', 'TextButton', 'ContextMenu'],
-  phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup'],
+  phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup', 'InlineError'],
   phase3: []
 });
 /**

package/dist/lib-esm/index.css

@@ -4546,7 +4546,7 @@
 .bp_input_chip_module_container--8ac7b .bp_input_chip_module_avatar--8ac7b.bp_input_chip_module_modern--8ac7b *{
   border-radius:unset;
 }
-.bp_inline_error_module_inlineError--4733a[data-modern=false]{
+.bp_inline_error_module_inlineError--e70b6[data-modern=false]{
   --inline-error-gap:var(--size-1);
   --inline-error-height:var(--size-4);
   --inline-error-text-color:var(--text-text-error-on-light);
@@ -4559,10 +4559,11 @@
   text-transform:var(--body-default-bold-text-case);
 }
 
-.bp_inline_error_module_inlineError--4733a[data-modern=true]{
+.bp_inline_error_module_inlineError--e70b6[data-modern=true]{
   --inline-error-gap:var(--bp-space-010);
   --inline-error-height:var(--bp-size-040);
   --inline-error-text-color:var(--bp-text-text-error-on-light);
+  --inline-error-slide-offset:calc(var(--bp-font-size-02, 0.625rem)*-1);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -4571,21 +4572,54 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6{
   align-items:center;
   color:var(--inline-error-text-color);
   display:flex;
   gap:var(--inline-error-gap);
   line-height:var(--inline-error-height);
 }
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_empty--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_empty--e70b6{
   display:none;
 }
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a .bp_inline_error_module_errorIcon--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6 .bp_inline_error_module_errorIcon--e70b6{
   align-self:flex-start;
   flex-grow:0;
   flex-shrink:0;
 }
+
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_animated--e70b6[data-state=open]{
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-name:bp_inline_error_module_bpInlineErrorSlideEnter--e70b6;
+  animation-timing-function:var(--bp-curve-small-on);
+}
+
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_animated--e70b6[data-state=closed]{
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:forwards;
+  animation-name:bp_inline_error_module_bpInlineErrorFadeExit--e70b6;
+  animation-timing-function:var(--bp-curve-small-off);
+}
+
+@keyframes bp_inline_error_module_bpInlineErrorSlideEnter--e70b6{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(var(--inline-error-slide-offset));
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0);
+  }
+}
+@keyframes bp_inline_error_module_bpInlineErrorFadeExit--e70b6{
+  from{
+    opacity:var(--bp-opacity-visible);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+  }
+}
 .bp_labelable_module_required--25dbc{
   align-items:center;
   display:inline-flex;

package/dist/lib-esm/primitives/inline-error/inline-error.js

@@ -3,44 +3,82 @@ import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
 import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
 import { Size4, IconIconErrorOnLight, bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useInlineErrorPresence } from './utils/use-inline-error-presence.js';
 import styles from './inline-error.module.js';
 
+const renderErrorContent = (content, enableModernizedComponents, errorIconClassName) => content && (!enableModernizedComponents ? jsxs(Fragment, {
+  children: [jsx(AlertBadge, {
+    className: errorIconClassName,
+    color: IconIconErrorOnLight,
+    height: Size4,
+    role: "presentation",
+    width: Size4
+  }), content]
+}) : jsxs(Fragment, {
+  children: [jsx(AlertCircle, {
+    className: errorIconClassName,
+    color: IconIconErrorOnLight,
+    height: bpSize050,
+    role: "presentation",
+    width: bpSize050
+  }), content]
+}));
 /** Renders an inline error message and icon, used to show error state in form elements. */
 const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
+    onAnimationEnd: onAnimationEndProp,
     ...rest
   } = props;
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('InlineError');
+  const useModernizedAnimation = isAnimationEnabled && enableModernizedComponents;
+  const presence = useInlineErrorPresence(children, useModernizedAnimation);
+  const {
+    onAnimationEnd: onPresenceAnimationEnd
+  } = presence;
+  const handleAnimationEnd = useCallback(event => {
+    onPresenceAnimationEnd(event);
+    onAnimationEndProp?.(event);
+  }, [onPresenceAnimationEnd, onAnimationEndProp]);
+  /** Legacy path: identical DOM/CSS to pre-animation InlineError (no mount/unmount, `.empty` + `display: none`). */
+  if (!useModernizedAnimation) {
+    return jsx("span", {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx([className, styles.inlineError, {
+        [styles.empty]: !children
+      }]),
+      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      onAnimationEnd: onAnimationEndProp,
+      children: renderErrorContent(children, enableModernizedComponents, styles.errorIcon)
+    });
+  }
+  /** `return null` when there is no error (and we are not in the exit phase): no visible slot for the
+  message — layout matches legacy (legacy hides the same slot via `.empty` + `display: none`). */
+  if (!presence.isMounted) {
+    return null;
+  }
   return jsx("span", {
     ...rest,
     ref: forwardedRef,
-    className: clsx([className, styles.inlineError, {
-      [styles.empty]: !children
-    }]),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: children && (!enableModernizedComponents ? jsxs(Fragment, {
-      children: [jsx(AlertBadge, {
-        className: styles.errorIcon,
-        color: IconIconErrorOnLight,
-        height: Size4,
-        role: "presentation",
-        width: Size4
-      }), children]
-    }) : jsxs(Fragment, {
-      children: [jsx(AlertCircle, {
-        className: styles.errorIcon,
-        color: IconIconErrorOnLight,
-        height: bpSize050,
-        role: "presentation",
-        width: bpSize050
-      }), children]
-    }))
+    className: clsx([className, styles.inlineError, styles.animated]),
+    "data-bp-animated": "true",
+    "data-modern": "true",
+    "data-state": presence.presenceState,
+    onAnimationEnd: handleAnimationEnd,
+    children: renderErrorContent(presence.content, enableModernizedComponents, styles.errorIcon)
   });
 });
 

package/dist/lib-esm/primitives/inline-error/inline-error.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"inlineError":"bp_inline_error_module_inlineError--4733a","empty":"bp_inline_error_module_empty--4733a","errorIcon":"bp_inline_error_module_errorIcon--4733a"};
+var styles = {"inlineError":"bp_inline_error_module_inlineError--e70b6","empty":"bp_inline_error_module_empty--e70b6","errorIcon":"bp_inline_error_module_errorIcon--e70b6","animated":"bp_inline_error_module_animated--e70b6"};
 
 export { styles as default };

package/dist/lib-esm/primitives/inline-error/utils/use-inline-error-presence.d.ts

@@ -0,0 +1,13 @@
+import { type AnimationEvent } from 'react';
+type PresenceState = 'open' | 'closed';
+/**
+ * Exit-animation presence for `InlineError`. Pattern inspired by Radix UI `usePresence`:
+ * keep the node mounted while exit CSS runs, then unmount on `animationend`.
+ */
+export declare function useInlineErrorPresence(children: React.ReactNode, isAnimationEnabled: boolean): {
+    content: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
+    isMounted: boolean;
+    presenceState: PresenceState | undefined;
+    onAnimationEnd: (e: AnimationEvent<HTMLSpanElement>) => void;
+};
+export {};

package/dist/lib-esm/primitives/inline-error/utils/use-inline-error-presence.js

@@ -0,0 +1,54 @@
+import noop from 'lodash/noop';
+import { useState, useCallback } from 'react';
+import { useEnhancedEffect } from '../../../utils/useEnhancedEffect.js';
+
+const animationEndNoop = noop;
+/**
+ * Exit-animation presence for `InlineError`. Pattern inspired by Radix UI `usePresence`:
+ * keep the node mounted while exit CSS runs, then unmount on `animationend`.
+ */
+function useInlineErrorPresence(children, isAnimationEnabled) {
+  const hasContent = Boolean(children);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [presenceState, setPresenceState] = useState(() => isAnimationEnabled && hasContent ? 'open' : undefined);
+  const isMounted = isAnimationEnabled && (presenceState === 'open' || presenceState === 'closed');
+  const unmountAfterExit = useCallback(() => {
+    setPresenceState(undefined);
+    setRenderedChildren(undefined);
+  }, []);
+  const onAnimationEnd = useCallback(e => {
+    if (e.target !== e.currentTarget || presenceState !== 'closed') {
+      return;
+    }
+    unmountAfterExit();
+  }, [presenceState, unmountAfterExit]);
+  useEnhancedEffect(() => {
+    if (!isAnimationEnabled) {
+      return;
+    }
+    if (hasContent) {
+      setRenderedChildren(children);
+      setPresenceState('open');
+      return;
+    }
+    setPresenceState(current => current === 'open' ? 'closed' : current);
+  }, [children, isAnimationEnabled, hasContent]);
+  // When `isAnimationEnabled` is false (legacy path), return a no-op result: no mount/unmount, no exit animation.
+  // `inline-error.tsx` ignores `presence` and renders the legacy `<span>` + `.empty` instead.
+  if (!isAnimationEnabled) {
+    return {
+      content: children,
+      isMounted: false,
+      presenceState: undefined,
+      onAnimationEnd: animationEndNoop
+    };
+  }
+  return {
+    content: renderedChildren,
+    isMounted,
+    presenceState,
+    onAnimationEnd
+  };
+}
+
+export { useInlineErrorPresence };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "15.2.0",
+    "version": "15.3.0",
     "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.121.5",
+        "@box/blueprint-web-assets": "^4.121.6",
         "@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.20.5",
+        "@box/storybook-utils": "^0.20.6",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",