@box/blueprint-web 7.0.0 → 7.0.1

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

@@ -72,7 +72,7 @@ const ChipsGroup = props => {
             // it is not the case for the Chips Group as per the a11y pattern. In this case, the error is false positive.
             __checkInteractivity: false,
             "aria-hidden": true,
-            content: childElement.props.label,
+            content: childElement.props.tooltip ?? childElement.props.label,
             children: /*#__PURE__*/React__default.cloneElement(childElement, {
               // Register the InputChip reference
               ref: node => {

package/lib-esm/combobox/combobox.js

@@ -16,6 +16,14 @@ import styles from './combobox.module.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);
+const getDisplayValueFromOptionValue = (optionValue, options, displayValue) => {
+  const option = getOptionFromValue(optionValue, options);
+  return displayValue && option ? displayValue(option) : optionValue;
+};
+const getTooltipValueFromOptionValue = (optionValue, options, displayTooltip) => {
+  const option = getOptionFromValue(optionValue, options);
+  return displayTooltip && option ? displayTooltip(option) : undefined;
+};
 const RootInner = ({
   as = 'input',
   ...props
@@ -43,6 +51,7 @@ const RootInner = ({
     onValueChange,
     displayValue,
     displayAvatar,
+    displayTooltip,
     renderOption,
     options,
     filterFn,
@@ -129,12 +138,6 @@ const RootInner = ({
     }
     return visibleOptions.filter(option => !selectedValue.includes(getOptionValue(option)));
   }, [filterFn, options, hideSelectedOptions, inputValue, selectedValue]);
-  const getDisplayValueFromOptionValue = useCallback(optionValue => {
-    const option = getOptionFromValue(optionValue, options);
-    return displayValue && option ? displayValue(option) : optionValue;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [displayValue]);
   const getDisplayAvatarFromOptionValue = useCallback(optionValue => {
     const option = getOptionFromValue(optionValue, options);
     return displayAvatar && option ? displayAvatar(option) : undefined;
@@ -161,11 +164,13 @@ const RootInner = ({
     if (Array.isArray(selectedValueMemoized)) {
       setInputValue('');
     } else if (selectedValueMemoized) {
-      setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized));
+      setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue));
       // Also focus input for single-select variant
       focusInput();
     }
-  }, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue, focusInput]);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [selectedValueMemoized, setInputValue, focusInput]);
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {
@@ -190,8 +195,10 @@ const RootInner = ({
     if (!clearOnBlur || isOpen) {
       return;
     }
-    setInputValue(Array.isArray(selectedValue) ? '' : getDisplayValueFromOptionValue(selectedValue));
-  }, [clearOnBlur, getDisplayValueFromOptionValue, isOpen, selectedValue, setInputValue]);
+    setInputValue(Array.isArray(selectedValue) ? '' : getDisplayValueFromOptionValue(selectedValue, options, displayValue));
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [clearOnBlur, isOpen, selectedValue, setInputValue]);
   const removeInputChip = id => {
     // For multi-select variant only
     selectStore.setValue(prev => {
@@ -230,8 +237,9 @@ const RootInner = ({
         children: [showChipsGroup && jsx(ChipsGroup, {
           children: selectedValue.map(selected => jsx(InputChip, {
             avatar: getDisplayAvatarFromOptionValue(selected),
-            label: getDisplayValueFromOptionValue(selected),
-            onDelete: () => removeInputChip(selected)
+            label: getDisplayValueFromOptionValue(selected, options, displayValue),
+            onDelete: () => removeInputChip(selected),
+            tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip)
           }, selected))
         }), jsx("div", {
           className: styles.textInputWrapper,

package/lib-esm/combobox/types.d.ts

@@ -86,6 +86,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * If not provided `displayValue()` is used to render select option item with a checkmark.
      */
     displayAvatar?: (option: T) => React.ReactElement | undefined;
+    /**
+     * Return a string representation of a tooltip displayed on hover of an Input Chip in Combobox.
+     */
+    displayTooltip?: (option: T) => string;
     /**
      * Return a JSX representations of an option displayed in Combobox dropdown
      * If not provided `displayValue()` is used to render select option item with a checkmark.

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

@@ -4,6 +4,10 @@ export interface InputChipProps extends HTMLAttributes<HTMLElement> {
      * Text content inside the Chip.
      * */
     label: string;
+    /**
+     * Custom tooltip for the Chip.
+     */
+    tooltip?: string;
     /**
      * The Avatar element to display.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.0.0",
+    "version": "7.0.1",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -58,7 +58,7 @@
         "@box/storybook-utils": "^0.1.0",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "faa94f4accac0a35b3bda6c6fdd1cce21bf65b65",
+    "gitHead": "5bb69c3c599276bf63d8b23de555782344294ad0",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {