@box/blueprint-web 16.12.1 → 16.13.0

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

@@ -5,15 +5,20 @@ import { bpSize030, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/t
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
-import { forwardRef, useCallback, useLayoutEffect } from 'react';
+import { forwardRef, useEffect, useCallback, useLayoutEffect } 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 { InlineError } from '../primitives/inline-error/inline-error.js';
 import { Text } from '../text/text.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useControllableState } from '../utils/useControllableState.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import { SelectProvider, useSelectContext } from './select-context.js';
 import styles from './select.module.js';
+import { useSelectExitAnimation, handleSelectContentExitAnimationEnd } from './utils/use-select-exit-animation.js';
 
 const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -57,24 +62,44 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Select');
   const hasError = !!error && !disabled;
-  // Restrict consumers from opening options menu when Root is disabled
-  const isSelectDefaultOpen = defaultOpen && !disabled;
-  const isSelectOpen = open && !disabled;
-  const handleOnChange = isOpen => {
-    if (!readonly) {
-      onOpenChange?.(isOpen);
+  const [openState, setOpenState] = useControllableState({
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: isOpen => {
+      if (!readonly) {
+        onOpenChange?.(isOpen);
+      }
     }
-  };
+  });
+  const {
+    radixOpen,
+    isExiting,
+    hasExitStyles,
+    handleOpenChange,
+    completeExit
+  } = useSelectExitAnimation({
+    open: Boolean(openState),
+    setOpen: setOpenState,
+    isAnimationEnabled
+  });
+  useEffect(() => {
+    if (disabled || readonly) {
+      setOpenState(prev => prev ? false : prev);
+    }
+  }, [disabled, readonly, setOpenState]);
   const selectProps = {
     name,
     disabled,
     required,
     value,
-    defaultOpen: !readonly && isSelectDefaultOpen,
-    open: !readonly && isSelectOpen,
+    open: !readonly && !disabled && radixOpen,
     onValueChange,
-    onOpenChange: handleOnChange
+    onOpenChange: handleOpenChange
   };
   const Label = useLabelable(label, selectId, required);
   const inlineErrorId = useUniqueId('inline-error-');
@@ -104,11 +129,16 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     "data-modern": enableModernizedComponents ? 'true' : 'false',
     children: [jsx(Label, {
       className: styles.label,
       hideLabel: hideLabel
     }), jsx(SelectProvider, {
+      completeExit: completeExit,
+      hasExitStyles: hasExitStyles,
+      isAnimationEnabled: isAnimationEnabled,
+      isExiting: isExiting,
       truncateText: truncateText,
       children: jsxs(SelectPrimitive.Root, {
         ...selectProps,
@@ -150,7 +180,9 @@ const Trigger = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...triggerProps
   } = props;
   const {
-    getLeftElement
+    getLeftElement,
+    hasExitStyles,
+    isAnimationEnabled
   } = useSelectContext();
   const selectedLeftElement = value ? getLeftElement(value) : null;
   const shouldShowPlaceholderLeftElement = !value && placeholderLeftElement;
@@ -166,6 +198,9 @@ const Trigger = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.error]: hasError,
       [styles.readonly]: readonly
     }),
+    ...(isAnimationEnabled && hasExitStyles && {
+      'data-bp-exiting': 'true'
+    }),
     id: selectId,
     children: [jsxs("span", {
       className: styles.triggerValue,
@@ -189,21 +224,34 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     className,
     container,
+    onAnimationEnd: onAnimationEndProp,
     ...contentProps
   } = props;
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
   const {
+    completeExit,
+    hasExitStyles,
+    isAnimationEnabled,
+    isExiting,
     truncateText
   } = useSelectContext();
+  const handleExitAnimationEvent = useCallback(event => {
+    handleSelectContentExitAnimationEnd(event, isExiting, completeExit);
+  }, [completeExit, isExiting]);
   return jsx(SelectPrimitive.Portal, {
     container: container,
     children: jsx(SelectPrimitive.Content, {
       ...contentProps,
       ref: forwardedRef,
       className: clsx(styles.content, className),
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
+      "data-bp-exiting": hasExitStyles ? 'true' : 'false',
       "data-modern": enableModernizedComponents ? 'true' : 'false',
+      onAnimationEnd: composeEventHandlers(onAnimationEndProp, handleExitAnimationEvent, {
+        checkForDefaultPrevented: false
+      }),
       position: "popper",
       sideOffset: 8,
       children: jsx(ScrollArea.Root, {

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_select_module_container--a177a","label":"bp_select_module_label--a177a","triggerBtn":"bp_select_module_triggerBtn--a177a","ellipsis":"bp_select_module_ellipsis--a177a","disabled":"bp_select_module_disabled--a177a","triggerValue":"bp_select_module_triggerValue--a177a","triggerLeftElement":"bp_select_module_triggerLeftElement--a177a","readonly":"bp_select_module_readonly--a177a","error":"bp_select_module_error--a177a","iconWrapper":"bp_select_module_iconWrapper--a177a","iconCaret":"bp_select_module_iconCaret--a177a","iconPencilCrossed":"bp_select_module_iconPencilCrossed--a177a","content":"bp_select_module_content--a177a","viewport":"bp_select_module_viewport--a177a","option":"bp_select_module_option--a177a","secondaryText":"bp_select_module_secondaryText--a177a","textWrapper":"bp_select_module_textWrapper--a177a","leftElement":"bp_select_module_leftElement--a177a","hasLeftElement":"bp_select_module_hasLeftElement--a177a","indicator":"bp_select_module_indicator--a177a","separator":"bp_select_module_separator--a177a","withTruncatedText":"bp_select_module_withTruncatedText--a177a"};
+var styles = {"container":"bp_select_module_container--80de0","label":"bp_select_module_label--80de0","triggerBtn":"bp_select_module_triggerBtn--80de0","ellipsis":"bp_select_module_ellipsis--80de0","disabled":"bp_select_module_disabled--80de0","triggerValue":"bp_select_module_triggerValue--80de0","triggerLeftElement":"bp_select_module_triggerLeftElement--80de0","readonly":"bp_select_module_readonly--80de0","error":"bp_select_module_error--80de0","iconWrapper":"bp_select_module_iconWrapper--80de0","iconCaret":"bp_select_module_iconCaret--80de0","iconPencilCrossed":"bp_select_module_iconPencilCrossed--80de0","content":"bp_select_module_content--80de0","viewport":"bp_select_module_viewport--80de0","option":"bp_select_module_option--80de0","secondaryText":"bp_select_module_secondaryText--80de0","textWrapper":"bp_select_module_textWrapper--80de0","leftElement":"bp_select_module_leftElement--80de0","hasLeftElement":"bp_select_module_hasLeftElement--80de0","indicator":"bp_select_module_indicator--80de0","separator":"bp_select_module_separator--80de0","withTruncatedText":"bp_select_module_withTruncatedText--80de0"};
 
 export { styles as default };

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

@@ -120,6 +120,10 @@ export interface SelectContentProps extends React.ComponentPropsWithRef<'div'> {
      * Can be prevented.
      */
     onEscapeKeyDown?: RadixSelectContentProps['onEscapeKeyDown'];
+    /**
+     * Event handler called when a CSS animation on the content ends.
+     */
+    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;
 }
 export interface SelectOptionProps extends React.ComponentPropsWithRef<'div'> {
     /**

package/dist/lib-esm/select/utils/use-select-exit-animation.d.ts

@@ -0,0 +1,20 @@
+import { type AnimationEvent, type Dispatch, type SetStateAction } from 'react';
+type SetOpen = Dispatch<SetStateAction<boolean | undefined>>;
+/**
+ * Deferred close for Select menu exit animations on Radix Select 2.0.x, which unmounts
+ * content immediately without `@radix-ui/react-presence`. Keeps Radix `open` true while
+ * exit CSS runs, then commits the close on `animationend`.
+ */
+export declare function useSelectExitAnimation({ open, setOpen, isAnimationEnabled, }: {
+    open: boolean;
+    setOpen: SetOpen;
+    isAnimationEnabled: boolean;
+}): {
+    radixOpen: boolean;
+    isExiting: boolean;
+    hasExitStyles: boolean;
+    handleOpenChange: (nextOpen: boolean) => void;
+    completeExit: () => void;
+};
+export declare function handleSelectContentExitAnimationEnd(event: AnimationEvent<HTMLDivElement>, isExiting: boolean, completeExit: () => void): void;
+export {};

package/dist/lib-esm/select/utils/use-select-exit-animation.js

@@ -0,0 +1,153 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { bpDurationShort } from '@box/blueprint-web-assets/tokens/tokens';
+import { noop } from '../../utils/noop.js';
+
+const completeExitNoop = noop;
+const EXIT_DURATION_MS = Number.parseFloat(bpDurationShort);
+const SELECT_EXIT_ANIMATION_FALLBACK_MS = EXIT_DURATION_MS * 3;
+/**
+ * Deferred close for Select menu exit animations on Radix Select 2.0.x, which unmounts
+ * content immediately without `@radix-ui/react-presence`. Keeps Radix `open` true while
+ * exit CSS runs, then commits the close on `animationend`.
+ */
+function useSelectExitAnimation({
+  open,
+  setOpen,
+  isAnimationEnabled
+}) {
+  const [isExiting, setIsExiting] = useState(false);
+  // Keep exit styles applied through the final unmount frame to avoid a visible flash.
+  const [hasExitStyles, setHasExitStyles] = useState(false);
+  const exitFallbackTimerRef = useRef(null);
+  const exitCommitRafRef = useRef(null);
+  const isExitingRef = useRef(isExiting);
+  isExitingRef.current = isExiting;
+  const clearExitFallbackTimer = useCallback(() => {
+    if (exitFallbackTimerRef.current !== null) {
+      clearTimeout(exitFallbackTimerRef.current);
+      exitFallbackTimerRef.current = null;
+    }
+  }, []);
+  const cancelExitCommitRaf = useCallback(() => {
+    if (exitCommitRafRef.current !== null) {
+      cancelAnimationFrame(exitCommitRafRef.current);
+      exitCommitRafRef.current = null;
+      return true;
+    }
+    return false;
+  }, []);
+  const clearExitState = useCallback(() => {
+    clearExitFallbackTimer();
+    cancelExitCommitRaf();
+    isExitingRef.current = false;
+    setIsExiting(false);
+    setHasExitStyles(false);
+  }, [cancelExitCommitRaf, clearExitFallbackTimer]);
+  useEffect(() => {
+    if (!isAnimationEnabled) {
+      const wasExiting = isExitingRef.current;
+      const hadPendingCommit = exitCommitRafRef.current !== null;
+      clearExitState();
+      if (wasExiting || hadPendingCommit) {
+        setOpen(false);
+      }
+    }
+  }, [clearExitState, isAnimationEnabled, setOpen]);
+  useEffect(() => {
+    if (!open && isExiting) {
+      clearExitState();
+    }
+  }, [clearExitState, isExiting, open]);
+  useEffect(() => () => {
+    clearExitFallbackTimer();
+    cancelExitCommitRaf();
+  }, [cancelExitCommitRaf, clearExitFallbackTimer]);
+  const handleOpenChange = useCallback(nextOpen => {
+    if (!isAnimationEnabled) {
+      setOpen(nextOpen);
+      return;
+    }
+    if (nextOpen) {
+      clearExitState();
+      setOpen(true);
+      return;
+    }
+    if (isExiting) {
+      return;
+    }
+    if (open) {
+      setIsExiting(true);
+      setHasExitStyles(true);
+      return;
+    }
+    setIsExiting(false);
+    setHasExitStyles(false);
+    setOpen(false);
+  }, [clearExitState, isAnimationEnabled, isExiting, open, setOpen]);
+  const completeExit = useCallback(() => {
+    if (!isAnimationEnabled || !isExitingRef.current) {
+      return;
+    }
+    clearExitFallbackTimer();
+    cancelExitCommitRaf();
+    isExitingRef.current = false;
+    setIsExiting(false);
+    // Commit close on the next frame so exit styles (opacity/transform) paint before Radix unmounts.
+    exitCommitRafRef.current = requestAnimationFrame(() => {
+      exitCommitRafRef.current = null;
+      setOpen(false);
+      setHasExitStyles(false);
+    });
+  }, [cancelExitCommitRaf, clearExitFallbackTimer, isAnimationEnabled, setOpen]);
+  const completeExitRef = useRef(completeExit);
+  completeExitRef.current = completeExit;
+  useEffect(() => {
+    if (!isAnimationEnabled || !isExiting) {
+      return undefined;
+    }
+    clearExitFallbackTimer();
+    exitFallbackTimerRef.current = setTimeout(() => {
+      exitFallbackTimerRef.current = null;
+      completeExitRef.current();
+    }, SELECT_EXIT_ANIMATION_FALLBACK_MS);
+    return clearExitFallbackTimer;
+  }, [clearExitFallbackTimer, isAnimationEnabled, isExiting]);
+  if (!isAnimationEnabled) {
+    return {
+      radixOpen: open,
+      isExiting: false,
+      hasExitStyles: false,
+      handleOpenChange: setOpen,
+      completeExit: completeExitNoop
+    };
+  }
+  return {
+    radixOpen: isExiting ? true : open,
+    isExiting,
+    hasExitStyles,
+    handleOpenChange,
+    completeExit
+  };
+}
+function handleSelectContentExitAnimationEnd(event, isExiting, completeExit) {
+  if (event.target !== event.currentTarget || !isExiting || event.type === 'animationcancel') {
+    return;
+  }
+  const {
+    getAnimations
+  } = event.currentTarget;
+  if (!getAnimations) {
+    return;
+  }
+  const animations = getAnimations.call(event.currentTarget);
+  if (animations.length === 0) {
+    return;
+  }
+  const hasRunningAnimations = animations.some(animation => animation.playState !== 'finished');
+  if (hasRunningAnimations) {
+    return;
+  }
+  completeExit();
+}
+
+export { handleSelectContentExitAnimationEnd, useSelectExitAnimation };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.12.1",
+    "version": "16.13.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -50,7 +50,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.5.8",
+        "@box/blueprint-web-assets": "^5.5.9",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -79,7 +79,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^1.1.32",
+        "@box/storybook-utils": "^1.1.33",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",