@box/blueprint-web 12.58.0 → 12.59.1

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--c1a2b","dropshadow-1":"bp_card_module_dropshadow-1--c1a2b","dropshadow-3":"bp_card_module_dropshadow-3--c1a2b"};
+var styles = {"card":"bp_card_module_card--28a0a","dropshadow-1":"bp_card_module_dropshadow-1--28a0a","dropshadow-3":"bp_card_module_dropshadow-3--28a0a"};
 
 export { styles as default };

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

@@ -40,6 +40,7 @@ const RootInner = ({
     ...rest
   } = props;
   const {
+    selectOnEnterOrTab = false,
     disabled = false,
     required = false,
     className,
@@ -136,18 +137,24 @@ const RootInner = ({
     }
     return getSelectedOptionValues(valueProp);
   }, [getSelectedOptionValues, valueProp]);
-  const setValue = newSelectedValue => {
+  const setValue = useCallback((nextSelectedValue, isSelectedFromEnter) => {
     if (!onValueChange) {
       return;
     }
     let selectedOption;
-    if (Array.isArray(newSelectedValue)) {
-      selectedOption = newSelectedValue.map(newValue => getOptionFromValue(newValue, options));
+    if (Array.isArray(nextSelectedValue)) {
+      if (isSelectedFromEnter) {
+        selectedOption = nextSelectedValue.map(value => ({
+          value
+        }));
+      } else {
+        selectedOption = nextSelectedValue.map(nextValue => getOptionFromValue(nextValue, options));
+      }
     } else {
-      selectedOption = getOptionFromValue(newSelectedValue, options);
+      selectedOption = getOptionFromValue(nextSelectedValue, options);
     }
     onValueChange(selectedOption);
-  };
+  }, [onValueChange, options]);
   const selectStore = useSelectStore({
     combobox: comboboxStore,
     defaultValue: getDefaultValue(),
@@ -255,33 +262,50 @@ const RootInner = ({
       return prev;
     });
   }, [selectStore, focusInput]);
+  const handleSelectOnEnterOrTab = useCallback(() => {
+    const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+    const nextValue = inputValue.trim();
+    // Check if value already exists to avoid duplicates
+    if (!currentValues.includes(nextValue)) {
+      const nextValues = [...currentValues, nextValue];
+      setValue(nextValues, true);
+    }
+  }, [selectedValue, inputValue, setValue]);
+  const handleEscape = useCallback(() => {
+    if (isOpen) {
+      setOpen(false);
+    } else if (clearOnEscape) {
+      setInputValue('');
+      resetSelectedValue();
+    }
+  }, [isOpen, clearOnEscape, setOpen, setInputValue, resetSelectedValue]);
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {
       if (event.nativeEvent.isComposing) {
         return;
       }
+      // We only want to select the input value directly if
+      // the user press enter or tab
+      // and selectOnEnterOrTab is true
+      // and the input value is not empty
+      // and the input value is not already selected
+      if (selectOnEnterOrTab && inputValue.trim()) {
+        handleSelectOnEnterOrTab();
+      }
       setOpen(false);
       return;
     }
     // Close menu or clear input
     if (event.key === 'Escape') {
-      if (isOpen) {
-        setOpen(false);
-      } else {
-        if (!clearOnEscape) {
-          return;
-        }
-        setInputValue('');
-        resetSelectedValue();
-      }
+      handleEscape();
     }
     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]);
+  }, [deleteChipOnBackspace, handleEscape, handleSelectOnEnterOrTab, inputValue, multiselect, removeMultiSelectInputChip, selectedValue, selectOnEnterOrTab, setOpen]);
   // Reset input on blur
   const handleOnBlur = useCallback(() => {
     if (!clearOnBlur || isOpen) {

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

@@ -230,6 +230,13 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default false
      */
     displaySingleSelectionAsChip?: boolean;
+    /**
+     * If `true`, the combobox input will select the input value when the user presses enter or tab.
+     * This prop only works on multi-select combobox at the moment.
+     *
+     * @default false
+     */
+    selectOnEnterOrTab?: boolean;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

package/dist/lib-esm/index.css

@@ -1471,7 +1471,7 @@
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }
-.bp_card_module_card--c1a2b[data-modern=true]{
+.bp_card_module_card--28a0a[data-modern=true]{
   --bp-card-dropshadow-1:var(--dropshadow-1);
   --bp-card-dropshadow-3:var(--dropshadow-3);
   --card-radius:var(--bp-radius-10);
@@ -1480,30 +1480,30 @@
   --card-border:var(--bp-border-01) solid var(--bp-border-card-border);
   --card-dropshadow-1:var(--bp-card-dropshadow-1);
   --card-dropshadow-3:var(--bp-card-dropshadow-3);
-  --card-backdrop-filter:none;
+  --card-backdrop-filter:blur(16px);
 }
 
-.bp_card_module_card--c1a2b[data-modern=false]{
+.bp_card_module_card--28a0a[data-modern=false]{
   --card-padding:var(--space-4);
   --card-background:var(--surface-card-surface);
   --card-border:var(--border-1) solid var(--border-card-border);
   --card-radius:var(--radius-4);
   --card-dropshadow-1:var(--dropshadow-1);
   --card-dropshadow-3:var(--dropshadow-3);
-  --card-backdrop-filter:blur(16px);
+  --card-backdrop-filter:none;
 }
 
-.bp_card_module_card--c1a2b{
+.bp_card_module_card--28a0a{
   backdrop-filter:var(--card-backdrop-filter);
   background:var(--card-background);
   border:var(--card-border);
   border-radius:var(--card-radius);
   padding:var(--card-padding);
 }
-.bp_card_module_card--c1a2b.bp_card_module_dropshadow-1--c1a2b{
+.bp_card_module_card--28a0a.bp_card_module_dropshadow-1--28a0a{
   box-shadow:var(--card-dropshadow-1);
 }
-.bp_card_module_card--c1a2b.bp_card_module_dropshadow-3--c1a2b{
+.bp_card_module_card--28a0a.bp_card_module_dropshadow-3--28a0a{
   box-shadow:var(--card-dropshadow-3);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.58.0",
+    "version": "12.59.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {