@box/blueprint-web 17.3.1 → 17.4.0

package/dist/lib-esm/combobox/chips-group.js

@@ -10,19 +10,37 @@ const ChipsGroup = props => {
     className,
     ...rest
   } = props;
-  const count = React__default.Children.count(children);
-  // Used to store each InputChip reference
+  // Used to store each interactive InputChip reference
   const chipsRef = useRef([]);
-  // Used to keep track of the current focused InputChip child
+  // Used to keep track of the current focused interactive InputChip child
   const [focusIndex, setFocusIndex] = useState(0);
-  const setFocus = index => {
-    chipsRef.current?.[index]?.focus();
+  const childArray = React__default.Children.toArray(children);
+  // Map from each interactive child's position in `childArray` to its index among interactive
+  // children only. Chips with `present === false` are mid-exit-fade: they still occupy a slot
+  // in `childArray` (so their InputChip instance stays mounted, see use-input-chip-presence.ts),
+  // but they're excluded from focus/keyboard-nav bookkeeping since they're non-interactive.
+  const interactiveIndices = [];
+  childArray.forEach((child, index) => {
+    if (! /*#__PURE__*/React__default.isValidElement(child)) {
+      throw Error(`Element ${child} is not a valid React element`);
+    }
+    if (child.props.present === false) {
+      return;
+    }
+    if (!child.props.onDelete) {
+      throw Error(`Input chip must have an onDelete prop.`);
+    }
+    interactiveIndices.push(index);
+  });
+  const interactiveCount = interactiveIndices.length;
+  const setFocus = interactiveIndex => {
+    chipsRef.current?.[interactiveIndex]?.focus();
   };
   const handleKeyDown = event => {
     const focusNextChip = () => setFocus(focusIndex + 1);
     const focusPrevChip = () => setFocus(focusIndex - 1);
     const focusFirstChip = () => setFocus(0);
-    const focusLastChip = () => setFocus(count - 1);
+    const focusLastChip = () => setFocus(interactiveCount - 1);
     // Define the action for each supported keyboard code
     const codeToActionMap = {
       ArrowRight: focusNextChip,
@@ -37,12 +55,12 @@ const ChipsGroup = props => {
       codeToActionMap[event.code]();
     }
   };
-  const handleDelete = index => {
+  const handleDelete = interactiveIndex => {
     // Remove chip reference
-    chipsRef.current.splice(index, 1);
+    chipsRef.current.splice(interactiveIndex, 1);
     // Compute index of the next chip to focus
-    const hasDeletedLastChip = index === count - 1;
-    const newFocusIndex = hasDeletedLastChip ? index - 1 : index;
+    const hasDeletedLastChip = interactiveIndex === interactiveCount - 1;
+    const newFocusIndex = hasDeletedLastChip ? interactiveIndex - 1 : interactiveIndex;
     // Focus next chip
     setFocus(newFocusIndex);
     setFocusIndex(newFocusIndex);
@@ -51,14 +69,16 @@ const ChipsGroup = props => {
     ...rest,
     className: clsx(styles.chipsGroup, className),
     role: "grid",
-    children: React__default.Children.map(children, (child, index) => {
+    children: childArray.map((child, index) => {
       if (! /*#__PURE__*/React__default.isValidElement(child)) {
         throw Error(`Element ${child} is not a valid React element`);
       }
-      if (!child.props.onDelete) {
-        throw Error(`Input chip must have an onDelete prop.`);
-      }
       const childElement = child;
+      const interactiveIndex = interactiveIndices.indexOf(index);
+      const isExiting = interactiveIndex === -1;
+      // Always wrap in the same <Tooltip> shape (interactive AND exiting) so a chip's
+      // <InputChip> stays at a structurally stable tree position across the
+      // interactive->exiting transition to avoid remounts.
       return jsx("div", {
         role: "row",
         children: jsx("div", {
@@ -68,11 +88,11 @@ const ChipsGroup = props => {
           , {
             "aria-hidden": true,
             content: childElement.props.tooltip ?? childElement.props.label,
-            children: /*#__PURE__*/React__default.cloneElement(childElement, {
+            children: isExiting ? childElement : /*#__PURE__*/React__default.cloneElement(childElement, {
               // Register the InputChip reference
               ref: node => {
                 if (node) {
-                  chipsRef.current[index] = node;
+                  chipsRef.current[interactiveIndex] = node;
                 }
               },
               // Unset value added by Tooltip so that screen readers don't read the label twice
@@ -82,18 +102,15 @@ const ChipsGroup = props => {
                 // We know childElement will always have an onDelete function because of the error
                 // above. Optional chaining is to make typescript happy
                 childElement.props.onDelete?.();
-                handleDelete(index);
+                handleDelete(interactiveIndex);
               },
-              // Handle keyboard navigation
               onKeyDown: handleKeyDown,
-              // Update internal state to keep track of the current focused InputChip
-              onFocus: () => setFocusIndex(index),
-              // Only one of the InputChip contained by the grid is included in the page tab sequence
-              tabIndex: focusIndex === index ? 0 : -1
+              onFocus: () => setFocusIndex(interactiveIndex),
+              tabIndex: focusIndex === interactiveIndex ? 0 : -1
             })
           })
         })
-      });
+      }, childElement.key);
     })
   });
 };

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

@@ -5,7 +5,10 @@ import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
 import { AlertCircle, XMark } from '@box/blueprint-web-assets/icons/Medium';
 import { bpIconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
+import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect, useState } 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 { Focusable } from '../focusable/focusable.js';
 import { InputChip } from '../input-chip/input-chip.js';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
@@ -14,12 +17,14 @@ import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { TextArea } from '../text-area/text-area.js';
 import { Tooltip } from '../tooltip/tooltip.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
-import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
+import { useEnhancedEffect } from '../utils/useEnhancedEffect.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
+import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { ChipsGroup } from './chips-group.js';
 import styles from './combobox.module.js';
+import { useExitingChipIds } from './utils/use-exiting-chip-ids.js';
 
 const getOptionValue = option => typeof option === 'string' ? option : option.value;
 const getOptionFromValue = (value, options) => options.find(option => typeof option === 'string' ? option === value : option.value === value);
@@ -100,6 +105,10 @@ const RootInner = ({
     getPopoverRef?.(node);
   }, [getPopoverRef]);
   const hasError = !!error && !disabled;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Combobox');
   const comboboxStore = useComboboxStore({
     // Input state
     defaultValue: defaultInputValue,
@@ -119,6 +128,10 @@ const RootInner = ({
   } = comboboxStore;
   const inputValue = comboboxStore.useState('value');
   const isOpen = comboboxStore.useState('open');
+  // Drives the direction of the open/close slide animation so a popover that
+  // flips above the input slides up instead of down. See combobox.module.scss.
+  const currentPlacement = comboboxStore.useState('currentPlacement');
+  const popoverSide = currentPlacement?.split('-')[0];
   const getSelectedOptionValues = useCallback(valueSource => {
     return Array.isArray(valueSource) ? valueSource.map(val => getOptionValue(val)) : getOptionValue(valueSource);
   }, []);
@@ -332,9 +345,28 @@ const RootInner = ({
     focusInput();
   };
   const reference = useForkRef(inputRef, ref);
-  const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
   const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
+  const singleSelectValue = Array.isArray(selectedValue) ? '' : selectedValue;
+  const multiSelectIds = useMemo(() => Array.isArray(selectedValue) ? selectedValue : [], [selectedValue]);
+  const {
+    renderedIds: renderedMultiSelectIds,
+    handleExited: handleMultiSelectChipExited
+  } = useExitingChipIds(multiSelectIds, isAnimationEnabled);
+  const showChipsGroup = renderedMultiSelectIds.length > 0;
+  // track that the single-select chip's layout class (`.withChips`) should
+  // stay applied while it's mid-exit-fade. `InputChip` owns the actual exiting content/state.
+  const [isSingleSelectChipExiting, setIsSingleSelectChipExiting] = useState(false);
+  const prevShowSingleSelectChipRef = useRef(showSingleSelectChip);
+  useEnhancedEffect(() => {
+    if (isAnimationEnabled && prevShowSingleSelectChipRef.current && !showSingleSelectChip) {
+      setIsSingleSelectChipExiting(true);
+    }
+    prevShowSingleSelectChipRef.current = showSingleSelectChip;
+  }, [showSingleSelectChip, isAnimationEnabled]);
+  const handleSingleSelectChipAnimationEnd = useCallback(() => {
+    setIsSingleSelectChipExiting(false);
+  }, []);
   const showInlineError = errorVariant === 'inline' && hasError;
   const InlineErrorIcon = AlertCircle ;
   const Label = useLabelable(label, comboboxId, required);
@@ -362,11 +394,12 @@ const RootInner = ({
         ref: comboboxContainerRef,
         className: clsx(styles.comboboxContainer, {
           [styles.error]: hasError,
-          [styles.withChips]: showChipsGroup || showSingleSelectChip,
+          [styles.withChips]: showChipsGroup || showSingleSelectChip || isSingleSelectChipExiting,
           [styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon) || showInlineError,
           [styles.withInlineErrorAndEndButton]: showInlineError && (showComboboxCancelButton || Boolean(endComboboxIcon))
         }),
         onClick: handleFocusInputOnEvent,
+        "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
         "data-testid": "combobox-container",
         children: jsxs("div", {
           className: styles.comboboxContainerInner,
@@ -374,18 +407,24 @@ const RootInner = ({
           role: "presentation",
           children: [showChipsGroup && jsx(ChipsGroup, {
             onClick: handleFocusInputOnEvent,
-            children: selectedValue.map(selected => jsx(InputChip, {
-              avatar: getDisplayAvatarFromOptionValue(selected, options, displayAvatar),
-              label: getDisplayValueFromOptionValue(selected, options, displayValue),
-              onDelete: () => removeMultiSelectInputChip(selected),
-              tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip),
-              variant: getDisplayChipVariantFromOptionValue(selected, options, displayChipVariant)
-            }, selected))
-          }), showSingleSelectChip && jsx(InputChip, {
-            label: getDisplayValueFromOptionValue(selectedValue, options, displayValue),
+            children: renderedMultiSelectIds.map(id => jsx(InputChip, {
+              avatar: getDisplayAvatarFromOptionValue(id, options, displayAvatar),
+              isAnimationEnabled: isAnimationEnabled,
+              label: getDisplayValueFromOptionValue(id, options, displayValue),
+              onAnimationEnd: () => handleMultiSelectChipExited(id),
+              onDelete: () => removeMultiSelectInputChip(id),
+              present: selectedValue.includes(id),
+              tooltip: getTooltipValueFromOptionValue(id, options, displayTooltip),
+              variant: getDisplayChipVariantFromOptionValue(id, options, displayChipVariant)
+            }, id))
+          }), jsx(InputChip, {
+            isAnimationEnabled: isAnimationEnabled,
+            label: getDisplayValueFromOptionValue(singleSelectValue, options, displayValue),
+            onAnimationEnd: handleSingleSelectChipAnimationEnd,
             onDelete: showComboboxCancelButton ? undefined : removeSingleSelectInputChip,
-            tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip),
-            variant: getDisplayChipVariantFromOptionValue(selectedValue, options, displayChipVariant)
+            present: showSingleSelectChip,
+            tooltip: getTooltipValueFromOptionValue(singleSelectValue, options, displayTooltip),
+            variant: getDisplayChipVariantFromOptionValue(singleSelectValue, options, displayChipVariant)
           }), jsxs("div", {
             className: styles.textInputWrapper,
             children: [jsx(Combobox$1, {
@@ -485,7 +524,9 @@ const RootInner = ({
       ref: popoverRefCallback,
       "aria-labelledby": comboboxId,
       className: clsx(styles.popover, popoverClassName),
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "data-modern": 'true' ,
+      "data-side": popoverSide,
       fitViewport: true,
       gutter: 8,
       hideOnEscape: hideOnEscape,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--3ece2","label":"bp_combobox_module_label--3ece2","textInput":"bp_combobox_module_textInput--3ece2","popover":"bp_combobox_module_popover--3ece2","disabled":"bp_combobox_module_disabled--3ece2","hiddenLabel":"bp_combobox_module_hiddenLabel--3ece2","comboboxContainer":"bp_combobox_module_comboboxContainer--3ece2","comboboxContainerInner":"bp_combobox_module_comboboxContainerInner--3ece2","withChips":"bp_combobox_module_withChips--3ece2","error":"bp_combobox_module_error--3ece2","withComboboxButtons":"bp_combobox_module_withComboboxButtons--3ece2","withInlineErrorAndEndButton":"bp_combobox_module_withInlineErrorAndEndButton--3ece2","textInputWrapper":"bp_combobox_module_textInputWrapper--3ece2","comboboxButtons":"bp_combobox_module_comboboxButtons--3ece2","inlineErrorIcon":"bp_combobox_module_inlineErrorIcon--3ece2","inlineError":"bp_combobox_module_inlineError--3ece2","popoverInner":"bp_combobox_module_popoverInner--3ece2","option":"bp_combobox_module_option--3ece2","indicator":"bp_combobox_module_indicator--3ece2","indicatorIcon":"bp_combobox_module_indicatorIcon--3ece2","optionWithIndicator":"bp_combobox_module_optionWithIndicator--3ece2","loadingIndicator":"bp_combobox_module_loadingIndicator--3ece2"};
+var styles = {"container":"bp_combobox_module_container--e892e","label":"bp_combobox_module_label--e892e","textInput":"bp_combobox_module_textInput--e892e","popover":"bp_combobox_module_popover--e892e","disabled":"bp_combobox_module_disabled--e892e","hiddenLabel":"bp_combobox_module_hiddenLabel--e892e","comboboxContainer":"bp_combobox_module_comboboxContainer--e892e","comboboxContainerInner":"bp_combobox_module_comboboxContainerInner--e892e","withChips":"bp_combobox_module_withChips--e892e","error":"bp_combobox_module_error--e892e","withComboboxButtons":"bp_combobox_module_withComboboxButtons--e892e","withInlineErrorAndEndButton":"bp_combobox_module_withInlineErrorAndEndButton--e892e","textInputWrapper":"bp_combobox_module_textInputWrapper--e892e","comboboxButtons":"bp_combobox_module_comboboxButtons--e892e","inlineErrorIcon":"bp_combobox_module_inlineErrorIcon--e892e","inlineError":"bp_combobox_module_inlineError--e892e","popoverInner":"bp_combobox_module_popoverInner--e892e","option":"bp_combobox_module_option--e892e","indicator":"bp_combobox_module_indicator--e892e","indicatorIcon":"bp_combobox_module_indicatorIcon--e892e","optionWithIndicator":"bp_combobox_module_optionWithIndicator--e892e","loadingIndicator":"bp_combobox_module_loadingIndicator--e892e"};
 
 export { styles as default };

package/dist/lib-esm/combobox/utils/use-exiting-chip-ids.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Tracks which ids were just removed from `currentIds` so Combobox can keep rendering their
+ * <InputChip present={false}> at a stable tree position until its own exit animation finishes
+ * and calls back (via onAnimationEnd). InputChip owns exit timing + its own last-known
+ * content — this hook only tracks *which* ids still need a slot in the render list.
+ */
+export declare function useExitingChipIds(currentIds: string[], isAnimationEnabled: boolean): {
+    renderedIds: string[];
+    handleExited: (id: string) => void;
+};

package/dist/lib-esm/combobox/utils/use-exiting-chip-ids.js

@@ -0,0 +1,33 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Tracks which ids were just removed from `currentIds` so Combobox can keep rendering their
+ * <InputChip present={false}> at a stable tree position until its own exit animation finishes
+ * and calls back (via onAnimationEnd). InputChip owns exit timing + its own last-known
+ * content — this hook only tracks *which* ids still need a slot in the render list.
+ */
+function useExitingChipIds(currentIds, isAnimationEnabled) {
+  const [exitingIds, setExitingIds] = useState([]);
+  const [prevIds, setPrevIds] = useState(currentIds);
+  if (currentIds !== prevIds) {
+    if (isAnimationEnabled) {
+      const currentIdSet = new Set(currentIds);
+      const newlyRemoved = prevIds.filter(id => !currentIdSet.has(id));
+      if (newlyRemoved.length > 0) {
+        setExitingIds(prev => Array.from(new Set([...prev, ...newlyRemoved])));
+      }
+    }
+    setPrevIds(currentIds);
+  }
+  const handleExited = useCallback(id => {
+    setExitingIds(prev => prev.filter(existingId => existingId !== id));
+  }, []);
+  const stillExiting = exitingIds.filter(id => !currentIds.includes(id));
+  const renderedIds = isAnimationEnabled ? [...currentIds, ...stillExiting] : currentIds;
+  return {
+    renderedIds,
+    handleExited
+  };
+}
+
+export { useExitingChipIds };