@box/blueprint-web 7.29.3 → 7.30.1

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

@@ -59,6 +59,9 @@ const ChipsGroup = props => {
       if (child.type !== InputChip) {
         throw Error(`Component of type ${child.type} is not allowed. The ChildGroup component only accepts InputChip as children.`);
       }
+      if (!child.props.onDelete) {
+        throw Error(`Input chip must have an onDelete prop.`);
+      }
       const childElement = child;
       return jsx("div", {
         role: "row",
@@ -84,7 +87,9 @@ const ChipsGroup = props => {
               'aria-describedby': undefined,
               // Make sure to remove InputChip reference when removed + focus the next one
               onDelete: () => {
-                childElement.props.onDelete();
+                // 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);
               },
               // Handle keyboard navigation

package/lib-esm/combobox/combobox.js

@@ -175,7 +175,7 @@ const RootInner = ({
   const selectedValueMemoized = useMemo(() => selectedValue, [JSON.stringify(selectedValue)]);
   // Reset input whenever an option is checked or unchecked
   useEffect(() => {
-    if (Array.isArray(selectedValueMemoized)) {
+    if (Array.isArray(selectedValueMemoized) || showSingleSelectChip) {
       setInputValue('');
     } else if (selectedValueMemoized) {
       setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue));
@@ -209,14 +209,14 @@ const RootInner = ({
     if (!clearOnBlur || isOpen) {
       return;
     }
-    setInputValue(Array.isArray(selectedValue) ? '' : getDisplayValueFromOptionValue(selectedValue, options, displayValue));
+    setInputValue(Array.isArray(selectedValue) || showSingleSelectChip ? '' : getDisplayValueFromOptionValue(selectedValue, options, displayValue));
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [clearOnBlur, isOpen, selectedValue, setInputValue]);
   const handleOnFocus = useCallback(event => {
     onFocus?.(event);
   }, [onFocus]);
-  const removeInputChip = id => {
+  const removeMultiSelectInputChip = id => {
     // For multi-select variant only
     selectStore.setValue(prev => {
       if (Array.isArray(prev)) {
@@ -233,9 +233,14 @@ const RootInner = ({
       return prev;
     });
   };
+  const removeSingleSelectInputChip = () => {
+    resetSelectedValue();
+    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 = showComboboxCancelButton && !Array.isArray(selectedValue) && !!selectedValue;
   const Label = useLabelable(label, comboboxId);
   const inputComponent = isInput ? jsxs(Fragment, {
     children: [jsx(Label, {
@@ -248,16 +253,20 @@ const RootInner = ({
       children: jsxs("div", {
         className: clsx(styles.comboboxContainer, {
           [styles.error]: hasError,
-          [styles.withChipsGroup]: showChipsGroup,
+          [styles.withChips]: showChipsGroup || showSingleSelectChip,
           [styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon)
         }),
         children: [showChipsGroup && jsx(ChipsGroup, {
           children: selectedValue.map(selected => jsx(InputChip, {
             avatar: getDisplayAvatarFromOptionValue(selected),
             label: getDisplayValueFromOptionValue(selected, options, displayValue),
-            onDelete: () => removeInputChip(selected),
+            onDelete: () => removeMultiSelectInputChip(selected),
             tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip)
           }, selected))
+        }), showSingleSelectChip && jsx(InputChip, {
+          label: getDisplayValueFromOptionValue(selectedValue, options, displayValue),
+          onDelete: showComboboxCancelButton ? undefined : removeSingleSelectInputChip,
+          tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip)
         }), jsxs("div", {
           className: styles.textInputWrapper,
           children: [jsx(Combobox$1, {

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

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

package/lib-esm/index.css

@@ -1348,7 +1348,7 @@
     height:0;
   }
 }
-.bp_input_chip_module_container--1beff{
+.bp_input_chip_module_container--482bc{
   align-items:center;
   background-color:var(--surface-inputchip-surface);
   border:none;
@@ -1365,36 +1365,39 @@
   max-width:100%;
   outline:none;
   padding-block:var(--space-05);
-  padding-inline:var(--space-1) var(--space-05);
+  padding-inline:var(--space-1) var(--space-1);
   text-decoration:none;
   text-transform:none;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_input_chip_module_container--1beff.bp_input_chip_module_avatarContainer--1beff{
+.bp_input_chip_module_container--482bc.bp_input_chip_module_avatarContainer--482bc{
   padding-inline:var(--space-05);
 }
-.bp_input_chip_module_container--1beff:not(.bp_input_chip_module_error--1beff):focus{
+.bp_input_chip_module_container--482bc:not(.bp_input_chip_module_avatarContainer--482bc).bp_input_chip_module_deleteButton--482bc{
+  padding-inline:var(--space-1) var(--space-05);
+}
+.bp_input_chip_module_container--482bc:not(.bp_input_chip_module_error--482bc):focus{
   background-color:var(--surface-inputchip-surface-hover);
   box-shadow:0 0 0 var(--border-1) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-1)) var(--outline-focus-on-light);
 }
-.bp_input_chip_module_container--1beff.bp_input_chip_module_error--1beff{
+.bp_input_chip_module_container--482bc.bp_input_chip_module_error--482bc{
   background-color:var(--surface-inputchip-surface-error);
   outline:var(--border-1) solid var(--border-inputchip-border-error);
 }
-.bp_input_chip_module_container--1beff.bp_input_chip_module_error--1beff:focus{
+.bp_input_chip_module_container--482bc.bp_input_chip_module_error--482bc:focus{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-2)) var(--outline-focus-on-light);
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_avatar--1beff{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_avatar--482bc{
   flex-shrink:0;
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_label--1beff{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_label--482bc{
   overflow:hidden;
   padding-inline:var(--space-2);
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_deleteIcon--1beff{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_deleteIcon--482bc{
   align-items:center;
   background:var(--surface-cta-surface-icon);
   border-radius:var(--radius-half);
@@ -1404,19 +1407,19 @@
   padding-block:var(--space-1);
   padding-inline:var(--space-1);
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_deleteIcon--1beff *{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_deleteIcon--482bc *{
   fill:var(--icon-cta-icon);
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_deleteIcon--1beff:hover{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_deleteIcon--482bc:hover{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_deleteIcon--1beff:hover *{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_deleteIcon--482bc:hover *{
   fill:var(--icon-cta-icon-hover);
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_deleteIcon--1beff:active{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_deleteIcon--482bc:active{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_input_chip_module_container--1beff .bp_input_chip_module_deleteIcon--1beff:active *{
+.bp_input_chip_module_container--482bc .bp_input_chip_module_deleteIcon--482bc:active *{
   fill:var(--icon-cta-icon-pressed);
 }
 
@@ -1552,7 +1555,7 @@
   max-width:100%;
 }
 
-.bp_combobox_module_container--09da5{
+.bp_combobox_module_container--5f513{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1563,10 +1566,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--09da5.bp_combobox_module_disabled--09da5{
+.bp_combobox_module_container--5f513.bp_combobox_module_disabled--5f513{
   opacity:60%;
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_label--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_label--5f513{
   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;
@@ -1578,10 +1581,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_label--09da5:not(.bp_combobox_module_hiddenLabel--09da5){
+.bp_combobox_module_container--5f513 .bp_combobox_module_label--5f513:not(.bp_combobox_module_hiddenLabel--5f513){
   margin-block-end:var(--space-2);
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513{
   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));
@@ -1594,25 +1597,25 @@
   padding-inline:var(--space-3);
   position:relative;
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5.bp_combobox_module_withComboboxButtons--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513.bp_combobox_module_withComboboxButtons--5f513{
   padding-inline-end:var(--space-10);
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5:not(.bp_combobox_module_error--09da5):has(input:focus),.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5:not(.bp_combobox_module_error--09da5):has(input[data-focus-visible]:focus){
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513:not(.bp_combobox_module_error--5f513):has(input:focus),.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513:not(.bp_combobox_module_error--5f513):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--09da5 .bp_combobox_module_comboboxContainer--09da5:not(:disabled).bp_combobox_module_error--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513:not(:disabled).bp_combobox_module_error--5f513{
   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--09da5 .bp_combobox_module_comboboxContainer--09da5 .bp_combobox_module_textInputWrapper--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513 .bp_combobox_module_textInputWrapper--5f513{
   align-items:center;
   display:flex;
   flex:content;
   gap:var(--space-2);
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5 .bp_combobox_module_textInputWrapper--09da5 .bp_combobox_module_textInput--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513 .bp_combobox_module_textInputWrapper--5f513 .bp_combobox_module_textInput--5f513{
   background-color:initial;
   border:none;
   color:var(--text-text-on-light);
@@ -1628,28 +1631,28 @@
   text-transform:none;
   width:100%;
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5 .bp_combobox_module_textInputWrapper--09da5 .bp_combobox_module_errorIcon--09da5 path{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513 .bp_combobox_module_textInputWrapper--5f513 .bp_combobox_module_errorIcon--5f513 path{
   fill:var(--icon-icon-error-on-light);
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5 .bp_combobox_module_textInputWrapper--09da5 .bp_combobox_module_comboboxButtons--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513 .bp_combobox_module_textInputWrapper--5f513 .bp_combobox_module_comboboxButtons--5f513{
   align-items:center;
   display:flex;
   position:absolute;
   right:var(--space-2);
   top:var(--space-2);
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_comboboxContainer--09da5.bp_combobox_module_withChipsGroup--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513.bp_combobox_module_withChips--5f513{
   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--09da5 .bp_combobox_module_comboboxContainer--09da5.bp_combobox_module_withChipsGroup--09da5:not(:disabled).bp_combobox_module_error--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_comboboxContainer--5f513.bp_combobox_module_withChips--5f513:not(:disabled).bp_combobox_module_error--5f513{
   padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-2));
 }
-.bp_combobox_module_container--09da5 .bp_combobox_module_inlineError--09da5{
+.bp_combobox_module_container--5f513 .bp_combobox_module_inlineError--5f513{
   margin-block-start:var(--space-2);
 }
 
-.bp_combobox_module_popover--09da5{
+.bp_combobox_module_popover--5f513{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -1667,7 +1670,7 @@
   text-transform:none;
   z-index:380;
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_option--09da5{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_option--5f513{
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
   box-sizing:border-box;
@@ -1681,17 +1684,17 @@
           user-select:none;
   width:100%;
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_option--09da5[aria-disabled]{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_option--5f513[aria-disabled]{
   opacity:60%;
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_option--09da5[data-active-item]:not([aria-disabled]){
+.bp_combobox_module_popover--5f513 .bp_combobox_module_option--5f513[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--09da5 .bp_combobox_module_option--09da5:hover{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_option--5f513:hover{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_option--09da5 .bp_combobox_module_indicator--09da5{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_option--5f513 .bp_combobox_module_indicator--5f513{
   align-items:center;
   display:flex;
   height:var(--size-9);
@@ -1700,16 +1703,16 @@
   position:absolute;
   top:0;
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_option--09da5 .bp_combobox_module_indicator--09da5 .bp_combobox_module_indicatorIcon--09da5 path{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_option--5f513 .bp_combobox_module_indicator--5f513 .bp_combobox_module_indicatorIcon--5f513 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_optionWithIndicator--09da5{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_optionWithIndicator--5f513{
   padding-inline:var(--space-10) var(--space-2);
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_loadingIndicator--09da5{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_loadingIndicator--5f513{
   position:unset;
 }
-.bp_combobox_module_popover--09da5 .bp_combobox_module_noResultOption--09da5{
+.bp_combobox_module_popover--5f513 .bp_combobox_module_noResultOption--5f513{
   color:var(--text-text-on-light);
   -webkit-user-select:none;
           user-select:none;
@@ -5515,11 +5518,11 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding-inline-end:1.875rem;
 }
 
-.bp_text_toggle_button_module_textToggleButton--b93f9{
+.bp_text_toggle_button_module_textToggleButton--296a4{
   background:var(--surface-toggle-surface);
-  border:var(--border-1) solid var(--border-switch-border);
+  border:var(--border-1) solid var(--border-toggletext-border-off);
   border-radius:var(--radius-2);
-  color:var(--text-text-on-light);
+  color:var(--text-toggletext-text);
   cursor:pointer;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -5535,28 +5538,35 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
           user-select:none;
   white-space:nowrap;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9:disabled{
+.bp_text_toggle_button_module_textToggleButton--296a4:disabled,.bp_text_toggle_button_module_textToggleButton--296a4[aria-disabled]{
   opacity:.3;
   pointer-events:none;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9[data-focus-visible]{
+.bp_text_toggle_button_module_textToggleButton--296a4:hover{
+  background:var(--surface-toggle-surface-off-hover);
+  border-color:var(--border-toggletext-border-off-hover);
+}
+.bp_text_toggle_button_module_textToggleButton--296a4:focus,.bp_text_toggle_button_module_textToggleButton--296a4[data-focus-visible]{
   box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9:active,.bp_text_toggle_button_module_textToggleButton--b93f9[data-focus-visible]{
-  background:var(--surface-switch-surface-hover);
-  border:var(--border-1) solid var(--border-switch-border-hover);
+.bp_text_toggle_button_module_textToggleButton--296a4:active,.bp_text_toggle_button_module_textToggleButton--296a4[data-active]{
+  background:var(--surface-toggle-surface-off-pressed);
+  border-color:var(--border-toggletext-border-off-pressed);
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9:hover{
-  background:var(--surface-toggle-surface-hover);
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]{
+  background:var(--surface-toggletext-surface-on);
+  border:var(--border-1) solid var(--border-toggletext-border-on);
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true]{
-  background:var(--surface-toggle-surface-pressed);
-  border:var(--border-1) solid var(--surface-toggle-surface-pressed);
-  color:var(--text-text-on-dark);
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]:hover{
+  background:var(--surface-toggletext-surface-on-hover);
+  border-color:var(--border-toggletext-border-on-hover);
+}
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true][data-focus-visible]{
+  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true]:hover,.bp_text_toggle_button_module_textToggleButton--b93f9[aria-pressed=true][data-focus-visible]{
-  background:var(--surface-toggle-surface-pressed-hover);
-  border:var(--border-1) solid var(--surface-toggle-surface-pressed-hover);
+.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--296a4[aria-pressed=true][data-active]{
+  background:var(--surface-toggletext-surface-on-pressed);
+  border-color:var(--border-toggletext-border-on-pressed);
 }
 :root{
   --notification-default-paragraph-indent:0rem;

package/lib-esm/input-chip/input-chip.js

@@ -23,7 +23,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     'aria-hidden': 'true'
   }) : null;
   const handleKeyDown = event => {
-    if (DELETE_TRIGGER_KEYS.includes(event.code)) {
+    if (onDelete && DELETE_TRIGGER_KEYS.includes(event.code)) {
       onDelete();
     }
     buttonProps.onKeyDown?.(event);
@@ -34,14 +34,16 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
       ...buttonProps,
       ref: ref,
       "aria-invalid": hasError,
-      className: clsx(styles.container, hasError && styles.error, avatar && styles.avatarContainer, className),
+      className: clsx(styles.container, hasError && styles.error, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className),
       onKeyDown: handleKeyDown,
       type: "button",
       children: [avatar, jsx(Text, {
         as: "span",
         className: styles.label,
         children: label
-      }), jsx("span", {
+      }), onDelete && ( /* Don't use `onClick` handler on icon due to BUIE's "pointer-events: none" style that would cause click event to not trigger  */
+      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+      jsx("span", {
         className: styles.deleteIcon,
         onClick: onDelete,
         children: jsx(XMark, {
@@ -50,7 +52,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
           height: Size4,
           width: Size4
         })
-      })]
+      }))]
     })
   );
 });

package/lib-esm/input-chip/input-chip.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_input_chip_module_container--1beff","avatarContainer":"bp_input_chip_module_avatarContainer--1beff","error":"bp_input_chip_module_error--1beff","avatar":"bp_input_chip_module_avatar--1beff","label":"bp_input_chip_module_label--1beff","deleteIcon":"bp_input_chip_module_deleteIcon--1beff"};
+var styles = {"container":"bp_input_chip_module_container--482bc","avatarContainer":"bp_input_chip_module_avatarContainer--482bc","deleteButton":"bp_input_chip_module_deleteButton--482bc","error":"bp_input_chip_module_error--482bc","avatar":"bp_input_chip_module_avatar--482bc","label":"bp_input_chip_module_label--482bc","deleteIcon":"bp_input_chip_module_deleteIcon--482bc"};
 
 export { styles as default };

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

@@ -21,5 +21,5 @@ export interface InputChipProps extends HTMLAttributes<HTMLElement> {
     /**
      * Callback fired when chip is deleted with X button click or keyboard interaction.
      */
-    onDelete: () => void;
+    onDelete?: () => void;
 }

package/lib-esm/text-toggle-button/text-toggle-button.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--b93f9"};
+var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--296a4"};
 
 export { styles as default };

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item-header.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useRef, Fragment } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Ghost } from '../../ghost/ghost.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullTextTooltip } from '../../utils/useFullTextTooltip.js';
@@ -16,26 +16,26 @@ const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(p
     ...rest
   } = props;
   const ref = useRef(null);
+  const {
+    loading
+  } = useBaseGridListItemContext();
+  const {
+    layout
+  } = useBaseGridListContext();
   const {
     Wrapper,
     wrapperProps
   } = useFullTextTooltip({
     ref,
     children,
-    textValue
+    textValue,
+    skipOverflowCheck: loading
   });
-  const {
-    loading
-  } = useBaseGridListItemContext();
-  const {
-    layout
-  } = useBaseGridListContext();
   const isLargeItem = layout === 'list';
   const isSmallListItem = layout === 'small-list';
-  const LoadingWrapper = loading ? Fragment : Wrapper;
   return (
     // @ts-expect-error Fix this type error
-    jsx(LoadingWrapper, {
+    jsx(Wrapper, {
       ...wrapperProps,
       children: jsx("span", {
         ...rest,

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item-subtitle.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useRef, Fragment } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Ghost } from '../../ghost/ghost.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullTextTooltip } from '../../utils/useFullTextTooltip.js';
@@ -15,21 +15,20 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
     ...rest
   } = props;
   const ref = useRef(null);
-  const {
-    Wrapper,
-    wrapperProps
-  } = useFullTextTooltip({
-    ref,
-    children
-  });
   const {
     loading
   } = useBaseGridListItemContext();
   const {
     layout
   } = useBaseGridListContext();
-  const LoadingWrapper = loading ? Fragment : Wrapper;
-  const loadingWrapperProps = loading ? {} : wrapperProps;
+  const {
+    Wrapper,
+    wrapperProps
+  } = useFullTextTooltip({
+    ref,
+    children,
+    skipOverflowCheck: loading
+  });
   const isGridItem = layout === 'grid';
   const isSmallListItem = layout === 'small-list';
   const forkRef = useForkRef(ref, forwardedRef);
@@ -39,8 +38,8 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
   }
   return (
     // @ts-expect-error Fix this type error
-    jsx(LoadingWrapper, {
-      ...loadingWrapperProps,
+    jsx(Wrapper, {
+      ...wrapperProps,
       children: jsx("span", {
         ...rest,
         ref: forkRef,

package/lib-esm/utils/useFullTextTooltip.d.ts

@@ -1,8 +1,9 @@
 import { type MutableRefObject, type ReactNode } from 'react';
-export declare const useFullTextTooltip: ({ ref, children, textValue, }: {
+export declare const useFullTextTooltip: ({ ref, children, textValue, skipOverflowCheck, }: {
     ref: MutableRefObject<null> | MutableRefObject<HTMLSpanElement>;
     children?: ReactNode;
     textValue?: string | undefined;
+    skipOverflowCheck?: boolean | undefined;
 }) => {
     Wrapper: ((props: import("../tooltip").TooltipProps) => import("react/jsx-runtime").JSX.Element) | import("react").ExoticComponent<{
         children?: ReactNode;

package/lib-esm/utils/useFullTextTooltip.js

@@ -4,17 +4,18 @@ import { Tooltip } from '../tooltip/tooltip.js';
 const useFullTextTooltip = ({
   ref,
   children,
-  textValue
+  textValue,
+  skipOverflowCheck
 }) => {
   const [isOverflowing, setIsOverflowing] = useState(false);
   useEffect(() => {
-    if (!ref?.current) {
+    if (!ref?.current || skipOverflowCheck) {
       return;
     }
     if (ref.current.scrollHeight > ref.current.clientHeight || ref.current.scrollWidth > ref.current.clientWidth) {
       setIsOverflowing(true);
     }
-  }, [ref]);
+  }, [ref, skipOverflowCheck]);
   const Wrapper = isOverflowing ? Tooltip : Fragment;
   const wrapperProps = isOverflowing ? {
     content: textValue ?? children

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.29.3",
+    "version": "7.30.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "ebfbd9aff01d8712ee0b2b565541acb09c76ffd8",
+    "gitHead": "c68217f7a7d9a18a9f6984a3c8582ece76195e66",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {