@box/blueprint-web 10.0.0 → 10.2.0

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

@@ -69,6 +69,7 @@ const RootInner = ({
     noResultMessage = '',
     clearOnBlur = !freeInput,
     clearOnEscape = false,
+    deleteChipOnBackspace = false,
     portalElement,
     hideSelectedOptions = false,
     unmountOnHide = false,
@@ -188,6 +189,23 @@ const RootInner = ({
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [selectedValueMemoized, setInputValue, focusInput]);
+  const removeMultiSelectInputChip = useCallback(id => {
+    // For multi-select variant only
+    selectStore.setValue(prev => {
+      if (Array.isArray(prev)) {
+        // unselect corresponding option
+        const remainingValues = prev.filter(val => val !== id);
+        // focus combobox input if no more input chips
+        if (remainingValues.length === 0) {
+          focusInput();
+        }
+        // update state
+        return remainingValues;
+      }
+      // do nothing it single-select
+      return prev;
+    });
+  }, [selectStore, focusInput]);
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {
@@ -209,7 +227,12 @@ const RootInner = ({
         resetSelectedValue();
       }
     }
-  }, [clearOnEscape, isOpen, resetSelectedValue, setInputValue, setOpen]);
+    if (event.key === 'Backspace') {
+      if (deleteChipOnBackspace && multiselect && !inputValue && selectedValue.length) {
+        removeMultiSelectInputChip(selectedValue[selectedValue.length - 1]);
+      }
+    }
+  }, [clearOnEscape, removeMultiSelectInputChip, deleteChipOnBackspace, isOpen, resetSelectedValue, setInputValue, setOpen, inputValue, multiselect, selectedValue]);
   // Reset input on blur
   const handleOnBlur = useCallback(() => {
     if (!clearOnBlur || isOpen) {
@@ -222,23 +245,6 @@ const RootInner = ({
   const handleOnFocus = useCallback(event => {
     onFocus?.(event);
   }, [onFocus]);
-  const removeMultiSelectInputChip = id => {
-    // For multi-select variant only
-    selectStore.setValue(prev => {
-      if (Array.isArray(prev)) {
-        // unselect corresponding option
-        const remainingValues = prev.filter(val => val !== id);
-        // focus combobox input if no more input chips
-        if (remainingValues.length === 0) {
-          focusInput();
-        }
-        // update state
-        return remainingValues;
-      }
-      // do nothing it single-select
-      return prev;
-    });
-  };
   const handleFocusInputOnEvent = useCallback(event => {
     // don't focus if child element event was triggered
     if (event.target !== event.currentTarget) {

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

@@ -125,6 +125,11 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * If `true`, clear all values when the user presses escape and the dropdown menu is closed.
      */
     clearOnEscape?: boolean;
+    /**
+     * If `true`, clear last multiselect chip when the user presses backspace and the input has no value.
+     * @default false
+     */
+    deleteChipOnBackspace?: boolean;
     /**
      * The name of the combobox. Submitted with its owning form as part of a name/value pair.
      */