@box/blueprint-web 7.19.12 → 7.20.0

package/lib-esm/combobox/combobox.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, SelectList, ComboboxPopover } from '@ariakit/react';
+import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
 import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
-import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
+import { Checkmark, XMark } from '@box/blueprint-web-assets/icons/Fill';
 import clsx from 'clsx';
 import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
 import { InputChip } from '../input-chip/input-chip.js';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { TextArea } from '../text-area/text-area.js';
 import { useForkRef } from '../utils/useForkRef.js';
@@ -67,6 +68,8 @@ const RootInner = ({
     experimentalVirtualization = false,
     getPopoverRef,
     focusLoop,
+    clearButtonAriaLabel,
+    endComboboxIcon,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
@@ -139,6 +142,9 @@ const RootInner = ({
   const {
     setValue: setSelectedValue
   } = selectStore;
+  const resetSelectedValue = useCallback(() => {
+    setSelectedValue(multiselect ? [] : '');
+  }, [multiselect, setSelectedValue]);
   const filteredOptions = useMemo(() => {
     const visibleOptions = filterFn ? options.filter(option => filterFn(inputValue, option)) : options;
     if (!hideSelectedOptions) {
@@ -194,10 +200,10 @@ const RootInner = ({
           return;
         }
         setInputValue('');
-        setSelectedValue(multiselect ? [] : '');
+        resetSelectedValue();
       }
     }
-  }, [clearOnEscape, isOpen, multiselect, setInputValue, setOpen, setSelectedValue]);
+  }, [clearOnEscape, isOpen, resetSelectedValue, setInputValue, setOpen]);
   // Reset input on blur
   const handleOnBlur = useCallback(() => {
     if (!clearOnBlur || isOpen) {
@@ -229,6 +235,7 @@ const RootInner = ({
   };
   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 inputComponent = isInput ? jsxs(Fragment, {
     children: [jsx("label", {
       className: clsx(styles.label, {
@@ -243,7 +250,8 @@ const RootInner = ({
       children: jsxs("div", {
         className: clsx(styles.comboboxContainer, {
           [styles.error]: hasError,
-          [styles.withChipsGroup]: showChipsGroup
+          [styles.withChipsGroup]: showChipsGroup,
+          [styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon)
         }),
         children: [showChipsGroup && jsx(ChipsGroup, {
           children: selectedValue.map(selected => jsx(InputChip, {
@@ -252,9 +260,9 @@ const RootInner = ({
             onDelete: () => removeInputChip(selected),
             tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip)
           }, selected))
-        }), jsx("div", {
+        }), jsxs("div", {
           className: styles.textInputWrapper,
-          children: jsx(Combobox$1, {
+          children: [jsx(Combobox$1, {
             ...comboboxProps,
             ref: reference,
             "aria-invalid": hasError,
@@ -268,7 +276,20 @@ const RootInner = ({
             onKeyDown: handleKeyDown,
             required: required,
             store: comboboxStore
-          })
+          }), jsx("div", {
+            className: styles.comboboxButtons,
+            children: showComboboxCancelButton ? jsx(ComboboxCancel, {
+              onClick: resetSelectedValue,
+              // eslint-disable-next-line react/jsx-no-bind
+              render: cancelProps => jsx(IconButton, {
+                ...cancelProps,
+                "aria-label": clearButtonAriaLabel,
+                icon: XMark,
+                size: "x-small"
+              }),
+              store: comboboxStore
+            }) : endComboboxIcon
+          })]
         })]
       })
     }), jsx(InlineError, {

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--517e8","disabled":"bp_combobox_module_disabled--517e8","label":"bp_combobox_module_label--517e8","hiddenLabel":"bp_combobox_module_hiddenLabel--517e8","comboboxContainer":"bp_combobox_module_comboboxContainer--517e8","error":"bp_combobox_module_error--517e8","textInputWrapper":"bp_combobox_module_textInputWrapper--517e8","textInput":"bp_combobox_module_textInput--517e8","errorIcon":"bp_combobox_module_errorIcon--517e8","withChipsGroup":"bp_combobox_module_withChipsGroup--517e8","inlineError":"bp_combobox_module_inlineError--517e8","popover":"bp_combobox_module_popover--517e8","option":"bp_combobox_module_option--517e8","indicator":"bp_combobox_module_indicator--517e8","indicatorIcon":"bp_combobox_module_indicatorIcon--517e8","optionWithIndicator":"bp_combobox_module_optionWithIndicator--517e8","loadingIndicator":"bp_combobox_module_loadingIndicator--517e8","noResultOption":"bp_combobox_module_noResultOption--517e8"};
+var styles = {"container":"bp_combobox_module_container--40e62","disabled":"bp_combobox_module_disabled--40e62","label":"bp_combobox_module_label--40e62","hiddenLabel":"bp_combobox_module_hiddenLabel--40e62","comboboxContainer":"bp_combobox_module_comboboxContainer--40e62","withComboboxButtons":"bp_combobox_module_withComboboxButtons--40e62","error":"bp_combobox_module_error--40e62","textInputWrapper":"bp_combobox_module_textInputWrapper--40e62","textInput":"bp_combobox_module_textInput--40e62","errorIcon":"bp_combobox_module_errorIcon--40e62","comboboxButtons":"bp_combobox_module_comboboxButtons--40e62","withChipsGroup":"bp_combobox_module_withChipsGroup--40e62","inlineError":"bp_combobox_module_inlineError--40e62","popover":"bp_combobox_module_popover--40e62","option":"bp_combobox_module_option--40e62","indicator":"bp_combobox_module_indicator--40e62","indicatorIcon":"bp_combobox_module_indicatorIcon--40e62","optionWithIndicator":"bp_combobox_module_optionWithIndicator--40e62","loadingIndicator":"bp_combobox_module_loadingIndicator--40e62","noResultOption":"bp_combobox_module_noResultOption--40e62"};
 
 export { styles as default };

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

@@ -188,6 +188,15 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * Callback used when combobox input/textarea is focused
      */
     onFocus?: () => void;
+    /**
+     * aria-label passed to the Combobox clear button. If not provided, the clear button is not shown.
+     */
+    clearButtonAriaLabel?: string;
+    /**
+     * Instance of an icon to be rendered at the end of the combobox input. When used in combination with `clearButtonAriaLabel`,
+     * it dissapears when the input is not empty
+     */
+    endComboboxIcon?: React.ReactNode;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength'> & {
     as: 'textarea';

package/lib-esm/index.css

@@ -1515,7 +1515,7 @@
   max-width:100%;
 }
 
-.bp_combobox_module_container--517e8{
+.bp_combobox_module_container--40e62{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1526,10 +1526,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--517e8.bp_combobox_module_disabled--517e8{
+.bp_combobox_module_container--40e62.bp_combobox_module_disabled--40e62{
   opacity:60%;
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_label--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_label--40e62{
   color:var(--text-text-on-light);
   flex:0 0 fit-content;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1541,10 +1541,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_label--517e8:not(.bp_combobox_module_hiddenLabel--517e8){
+.bp_combobox_module_container--40e62 .bp_combobox_module_label--40e62:not(.bp_combobox_module_hiddenLabel--40e62){
   margin-block-end:var(--space-2);
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62{
   background-color:var(--surface-dropdown-surface);
   border:var(--border-1) solid var(--border-input-border);
   border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));
@@ -1557,22 +1557,25 @@
   padding-inline:var(--space-3);
   position:relative;
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8:not(.bp_combobox_module_error--517e8):has(input:focus),.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8:not(.bp_combobox_module_error--517e8):has(input[data-focus-visible]:focus){
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62.bp_combobox_module_withComboboxButtons--40e62{
+  padding-inline-end:var(--space-10);
+}
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62:not(.bp_combobox_module_error--40e62):has(input:focus),.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62:not(.bp_combobox_module_error--40e62):has(input[data-focus-visible]:focus){
   border-color:#0000;
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8:not(:disabled).bp_combobox_module_error--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62:not(:disabled).bp_combobox_module_error--40e62{
   background-color:var(--surface-dropdown-surface-error);
   border:var(--border-2) solid var(--border-input-border-error);
   padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8 .bp_combobox_module_textInputWrapper--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62 .bp_combobox_module_textInputWrapper--40e62{
   align-items:center;
   display:flex;
   flex:content;
   gap:var(--space-2);
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8 .bp_combobox_module_textInputWrapper--517e8 .bp_combobox_module_textInput--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62 .bp_combobox_module_textInputWrapper--40e62 .bp_combobox_module_textInput--40e62{
   background-color:initial;
   border:none;
   color:var(--text-text-on-light);
@@ -1588,21 +1591,28 @@
   text-transform:none;
   width:100%;
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8 .bp_combobox_module_textInputWrapper--517e8 .bp_combobox_module_errorIcon--517e8 path{
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62 .bp_combobox_module_textInputWrapper--40e62 .bp_combobox_module_errorIcon--40e62 path{
   fill:var(--icon-icon-error-on-light);
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8.bp_combobox_module_withChipsGroup--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62 .bp_combobox_module_textInputWrapper--40e62 .bp_combobox_module_comboboxButtons--40e62{
+  align-items:center;
+  display:flex;
+  position:absolute;
+  right:var(--space-2);
+  top:var(--space-2);
+}
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62.bp_combobox_module_withChipsGroup--40e62{
   max-height:calc(var(--space-2)*2 + var(--space-6)*3);
   padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-1));
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_comboboxContainer--517e8.bp_combobox_module_withChipsGroup--517e8:not(:disabled).bp_combobox_module_error--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_comboboxContainer--40e62.bp_combobox_module_withChipsGroup--40e62:not(:disabled).bp_combobox_module_error--40e62{
   padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-2));
 }
-.bp_combobox_module_container--517e8 .bp_combobox_module_inlineError--517e8{
+.bp_combobox_module_container--40e62 .bp_combobox_module_inlineError--40e62{
   margin-block-start:var(--space-2);
 }
 
-.bp_combobox_module_popover--517e8{
+.bp_combobox_module_popover--40e62{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -1620,7 +1630,7 @@
   text-transform:none;
   z-index:380;
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_option--517e8{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_option--40e62{
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
   box-sizing:border-box;
@@ -1634,17 +1644,17 @@
           user-select:none;
   width:100%;
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_option--517e8[aria-disabled]{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_option--40e62[aria-disabled]{
   opacity:60%;
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_option--517e8[data-active-item]:not([aria-disabled]){
+.bp_combobox_module_popover--40e62 .bp_combobox_module_option--40e62[data-active-item]:not([aria-disabled]){
   background-color:var(--surface-menu-surface-focus);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_option--517e8:hover{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_option--40e62:hover{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_option--517e8 .bp_combobox_module_indicator--517e8{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_option--40e62 .bp_combobox_module_indicator--40e62{
   align-items:center;
   display:flex;
   height:var(--size-9);
@@ -1653,16 +1663,16 @@
   position:absolute;
   top:0;
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_option--517e8 .bp_combobox_module_indicator--517e8 .bp_combobox_module_indicatorIcon--517e8 path{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_option--40e62 .bp_combobox_module_indicator--40e62 .bp_combobox_module_indicatorIcon--40e62 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_optionWithIndicator--517e8{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_optionWithIndicator--40e62{
   padding-inline:var(--space-10) var(--space-2);
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_loadingIndicator--517e8{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_loadingIndicator--40e62{
   position:unset;
 }
-.bp_combobox_module_popover--517e8 .bp_combobox_module_noResultOption--517e8{
+.bp_combobox_module_popover--40e62 .bp_combobox_module_noResultOption--40e62{
   color:var(--text-text-on-light);
   -webkit-user-select:none;
           user-select:none;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.19.12",
+    "version": "7.20.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -66,7 +66,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "19164ef67f9a14499fd3dcea03af10d3ff6b46fe",
+    "gitHead": "194653f3af1b0b647738e4ee473940cad442bee8",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {