@box/blueprint-web 17.3.0 → 17.4.0

package/dist/lib-esm/input-chip/input-chip.js

@@ -2,9 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { XMark } from '@box/blueprint-web-assets/icons/Fill';
 import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import React__default, { forwardRef } from 'react';
+import React__default, { forwardRef, useMemo, useCallback } from 'react';
 import { Text } from '../text/text.js';
 import styles from './input-chip.module.js';
+import { useInputChipPresence } from './utils/use-input-chip-presence.js';
 
 const getVariantClass = variant => {
   if (variant === 'error') {
@@ -20,12 +21,32 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     avatar: avatarProp,
     label,
+    tooltip,
     variant,
     className,
     onDelete,
+    present = true,
+    isAnimationEnabled = false,
+    onAnimationEnd: onAnimationEndProp,
+    'aria-hidden': ariaHiddenProp,
+    tabIndex: tabIndexProp,
     ...buttonProps
   } = props;
   const enableModernizedComponents = true;
+  const content = useMemo(() => ({
+    avatar: avatarProp,
+    label,
+    tooltip,
+    variant
+  }), [avatarProp, label, tooltip, variant]);
+  const presence = useInputChipPresence(present, isAnimationEnabled, content);
+  const {
+    onAnimationEnd: onPresenceAnimationEnd
+  } = presence;
+  const handleAnimationEnd = useCallback(event => {
+    onPresenceAnimationEnd(event);
+    onAnimationEndProp?.(event);
+  }, [onPresenceAnimationEnd, onAnimationEndProp]);
   // Clone avatar element to override its props
   const withSmallAvatarSize = element => {
     const cloneAvatarWithSmallSize = el => /*#__PURE__*/React__default.cloneElement(el, {
@@ -48,29 +69,44 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     // Avatar without an IconBadge, apply size directly to the Avatar
     return cloneAvatarWithSmallSize(element);
   };
-  const avatar = avatarProp ? withSmallAvatarSize(avatarProp) : null;
+  if (!presence.isMounted) {
+    return null;
+  }
+  const {
+    avatar: chipAvatar,
+    label: chipLabel,
+    variant: chipVariant
+  } = presence.content;
+  const isExiting = presence.presenceState === 'closed';
+  const canDelete = Boolean(onDelete) && !isExiting;
+  const avatar = chipAvatar ? withSmallAvatarSize(chipAvatar) : null;
   const handleKeyDown = event => {
-    if (onDelete && DELETE_TRIGGER_KEYS.includes(event.code)) {
-      onDelete();
+    if (canDelete && DELETE_TRIGGER_KEYS.includes(event.code)) {
+      onDelete?.();
     }
     buttonProps.onKeyDown?.(event);
   };
-  const hasError = variant === 'error';
-  const variantClass = getVariantClass(variant);
-  const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, onDelete && styles.deleteButton, !onDelete && enableModernizedComponents && styles.noDeleteButton, className);
+  const hasError = chipVariant === 'error';
+  const variantClass = getVariantClass(chipVariant);
+  const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, canDelete && styles.deleteButton, !canDelete && enableModernizedComponents && styles.noDeleteButton, className);
   return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */jsxs("button", {
     ...buttonProps,
     ref: ref,
+    "aria-hidden": isExiting ? true : ariaHiddenProp,
     "aria-invalid": hasError,
     className: containerClassName,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     "data-modern": 'true' ,
+    "data-state": presence.presenceState,
+    onAnimationEnd: handleAnimationEnd,
     onKeyDown: handleKeyDown,
+    tabIndex: isExiting ? -1 : tabIndexProp,
     type: "button",
     children: [avatar, jsx(Text, {
       as: "span",
       className: styles.label,
-      children: label
-    }), onDelete && (/* Don't use `onClick` handler on icon due to BUIE's "pointer-events: none" style that would cause click event to not trigger  */
+      children: chipLabel
+    }), canDelete && (/* Don't use `onClick` handler on icon due to BUIE's "pointer-events: none" style that would cause click event to not trigger  */
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
     jsx("span", {
       className: styles.deleteIcon,

package/dist/lib-esm/input-chip/input-chip.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_input_chip_module_container--5c79b","avatarContainer":"bp_input_chip_module_avatarContainer--5c79b","deleteButton":"bp_input_chip_module_deleteButton--5c79b","noDeleteButton":"bp_input_chip_module_noDeleteButton--5c79b","error":"bp_input_chip_module_error--5c79b","deleteIcon":"bp_input_chip_module_deleteIcon--5c79b","label":"bp_input_chip_module_label--5c79b","variable":"bp_input_chip_module_variable--5c79b","avatar":"bp_input_chip_module_avatar--5c79b","modern":"bp_input_chip_module_modern--5c79b"};
+var styles = {"container":"bp_input_chip_module_container--d98d0","avatarContainer":"bp_input_chip_module_avatarContainer--d98d0","deleteButton":"bp_input_chip_module_deleteButton--d98d0","noDeleteButton":"bp_input_chip_module_noDeleteButton--d98d0","error":"bp_input_chip_module_error--d98d0","deleteIcon":"bp_input_chip_module_deleteIcon--d98d0","label":"bp_input_chip_module_label--d98d0","variable":"bp_input_chip_module_variable--d98d0","avatar":"bp_input_chip_module_avatar--d98d0","modern":"bp_input_chip_module_modern--d98d0"};
 
 export { styles as default };

package/dist/lib-esm/input-chip/types.d.ts

@@ -22,4 +22,20 @@ export interface InputChipProps extends HTMLAttributes<HTMLElement> {
      * Callback fired when chip is deleted with X button click or keyboard interaction.
      */
     onDelete?: () => void;
+    /**
+     * Whether the chip should be shown. Set to `false` to trigger the exit animation (when
+     * `isAnimationEnabled` is `true`); the chip keeps rendering (non-interactively) until the exit
+     * animation completes, then unmounts itself. When `isAnimationEnabled` is `false`,
+     * `present={false}` unmounts immediately.
+     *
+     * @default true
+     */
+    present?: boolean;
+    /**
+     * Opts the chip's mount/unmount transition into the Blueprint animation system. When `false`
+     * (default), `present` changes take effect immediately with no animation.
+     *
+     * @default false
+     */
+    isAnimationEnabled?: boolean;
 }

package/dist/lib-esm/input-chip/utils/use-input-chip-presence.d.ts

@@ -0,0 +1,24 @@
+import { type AnimationEvent } from 'react';
+import { type InputChipProps } from '../types';
+export interface InputChipContentSnapshot {
+    avatar?: InputChipProps['avatar'];
+    label: string;
+    tooltip?: InputChipProps['tooltip'];
+    variant?: InputChipProps['variant'];
+}
+type PresenceState = 'open' | 'closed';
+/**
+ * Exit-animation presence for `InputChip`. Pattern mirrors `useInlineErrorPresence`: keep the
+ * chip mounted (non-interactively) while its exit CSS animation runs, then unmount on
+ * `animationend`. Also freezes `content` the moment `present` becomes `false`, so a caller (e.g.
+ * Combobox) doesn't need its own cache of a chip's display data once it no longer has a source of
+ * truth for it — as long as this InputChip element stays mounted at a stable tree position across
+ * the transition (see ChipsGroup).
+ */
+export declare function useInputChipPresence(present: boolean, isAnimationEnabled: boolean, content: InputChipContentSnapshot): {
+    content: InputChipContentSnapshot;
+    isMounted: boolean;
+    presenceState: PresenceState | undefined;
+    onAnimationEnd: (e: AnimationEvent<HTMLButtonElement>) => void;
+};
+export {};

package/dist/lib-esm/input-chip/utils/use-input-chip-presence.js

@@ -0,0 +1,54 @@
+import { useState, useCallback } from 'react';
+import { noop } from '../../utils/noop.js';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
+
+const animationEndNoop = noop;
+/**
+ * Exit-animation presence for `InputChip`. Pattern mirrors `useInlineErrorPresence`: keep the
+ * chip mounted (non-interactively) while its exit CSS animation runs, then unmount on
+ * `animationend`. Also freezes `content` the moment `present` becomes `false`, so a caller (e.g.
+ * Combobox) doesn't need its own cache of a chip's display data once it no longer has a source of
+ * truth for it — as long as this InputChip element stays mounted at a stable tree position across
+ * the transition (see ChipsGroup).
+ */
+function useInputChipPresence(present, isAnimationEnabled, content) {
+  const [renderedContent, setRenderedContent] = useState(content);
+  const [presenceState, setPresenceState] = useState(() => isAnimationEnabled && present ? 'open' : undefined);
+  const isMounted = isAnimationEnabled && (presenceState === 'open' || presenceState === 'closed');
+  const unmountAfterExit = useCallback(() => setPresenceState(undefined), []);
+  const onAnimationEnd = useCallback(e => {
+    if (e.target !== e.currentTarget || presenceState !== 'closed') {
+      return;
+    }
+    unmountAfterExit();
+  }, [presenceState, unmountAfterExit]);
+  useEnhancedEffect(() => {
+    if (!isAnimationEnabled) {
+      return;
+    }
+    if (present) {
+      setRenderedContent(content);
+      setPresenceState('open');
+      return;
+    }
+    // Don't reassign renderedContent here — freezes it at its last "present" value.
+    setPresenceState(current => current === 'open' ? 'closed' : current);
+  }, [content, isAnimationEnabled, present]);
+  if (!isAnimationEnabled) {
+    // Legacy / animation-disabled path: no bookkeeping, no lingering DOM node.
+    return {
+      content,
+      isMounted: present,
+      presenceState: undefined,
+      onAnimationEnd: animationEndNoop
+    };
+  }
+  return {
+    content: renderedContent,
+    isMounted,
+    presenceState,
+    onAnimationEnd
+  };
+}
+
+export { useInputChipPresence };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.3.0",
+    "version": "17.4.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.9.1",
+        "@box/blueprint-web-assets": "^5.9.3",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.2.32",
+        "@box/storybook-utils": "^1.2.34",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",