@box/blueprint-web 9.16.3 → 9.16.5

package/lib-esm/combobox/combobox.js

@@ -84,6 +84,7 @@ const RootInner = ({
   const inputRef = useRef(null);
   const comboboxId = useUniqueId('combobox-', !idForLabel) || idForLabel || 'default-combobox-id';
   const popoverRef = useRef(null);
+  const comboboxContainerRef = useRef(null);
   const popoverRefCallback = useCallback(node => {
     popoverRef.current = node;
     getPopoverRef?.(node);
@@ -238,6 +239,13 @@ const RootInner = ({
       return prev;
     });
   };
+  const handleFocusInputOnEvent = useCallback(event => {
+    // don't focus if child element event was triggered
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    focusInput();
+  }, [focusInput]);
   const removeSingleSelectInputChip = () => {
     resetSelectedValue();
     focusInput();
@@ -260,12 +268,16 @@ const RootInner = ({
     }), jsx(PopoverAnchor, {
       store: comboboxStore,
       children: jsxs("div", {
+        ref: comboboxContainerRef,
         className: clsx(styles.comboboxContainer, {
           [styles.error]: hasError,
           [styles.withChips]: showChipsGroup || showSingleSelectChip,
           [styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon)
         }),
+        "data-testid": "combobox-container",
+        onClick: handleFocusInputOnEvent,
         children: [showChipsGroup && jsx(ChipsGroup, {
+          onClick: handleFocusInputOnEvent,
           children: selectedValue.map(selected => jsx(InputChip, {
             avatar: getDisplayAvatarFromOptionValue(selected, options, displayAvatar),
             label: getDisplayValueFromOptionValue(selected, options, displayValue),

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

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

package/lib-esm/index.css

@@ -1632,7 +1632,7 @@
   max-width:100%;
 }
 
-.bp_combobox_module_container--8caae{
+.bp_combobox_module_container--fbb28{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1643,10 +1643,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--8caae.bp_combobox_module_disabled--8caae{
+.bp_combobox_module_container--fbb28.bp_combobox_module_disabled--fbb28{
   opacity:60%;
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_label--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_label--fbb28{
   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;
@@ -1658,10 +1658,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_label--8caae:not(.bp_combobox_module_hiddenLabel--8caae){
+.bp_combobox_module_container--fbb28 .bp_combobox_module_label--fbb28:not(.bp_combobox_module_hiddenLabel--fbb28){
   margin-block-end:var(--space-2);
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28{
   background-color:var(--surface-dropdown-surface);
   border-bottom:var(--blueprint-combobox-border-bottom-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
   border-left:var(--blueprint-combobox-border-left-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
@@ -1669,6 +1669,7 @@
   border-right:var(--blueprint-combobox-border-right-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
   border-top:var(--blueprint-combobox-border-top-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
   box-shadow:var(--innershadow-1);
+  cursor:text;
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-2);
@@ -1677,15 +1678,15 @@
   padding-inline:var(--space-3);
   position:relative;
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae.bp_combobox_module_withComboboxButtons--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28.bp_combobox_module_withComboboxButtons--fbb28{
   padding-inline-end:var(--space-10);
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae:not(:disabled):has(input:focus){
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28:not(:disabled):has(input:focus){
   background-color:var(--surface-dropdown-surface-focus);
   border:var(--border-2) solid var(--outline-focus-on-light);
   padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae:not(:disabled).bp_combobox_module_error--8caae,.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae:not(:disabled):has([aria-invalid=true]){
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28:not(:disabled).bp_combobox_module_error--fbb28,.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28:not(:disabled):has([aria-invalid=true]){
   background-color:var(--surface-dropdown-surface-error);
   border-bottom:var(--blueprint-combobox-border-error-bottom-width, var(--border-2)) solid var(--border-input-border-error);
   border-left:var(--blueprint-combobox-border-error-left-width, var(--border-2)) solid var(--border-input-border-error);
@@ -1693,13 +1694,13 @@
   border-top:var(--blueprint-combobox-border-error-top-width, 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--8caae .bp_combobox_module_comboboxContainer--8caae .bp_combobox_module_textInputWrapper--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28 .bp_combobox_module_textInputWrapper--fbb28{
   align-items:center;
   display:flex;
   flex:content;
   gap:var(--space-2);
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae .bp_combobox_module_textInputWrapper--8caae .bp_combobox_module_textInput--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28 .bp_combobox_module_textInputWrapper--fbb28 .bp_combobox_module_textInput--fbb28{
   background-color:initial;
   border:none;
   color:var(--text-text-on-light);
@@ -1715,28 +1716,28 @@
   text-transform:none;
   width:100%;
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae .bp_combobox_module_textInputWrapper--8caae .bp_combobox_module_errorIcon--8caae path{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28 .bp_combobox_module_textInputWrapper--fbb28 .bp_combobox_module_errorIcon--fbb28 path{
   fill:var(--icon-icon-error-on-light);
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae .bp_combobox_module_textInputWrapper--8caae .bp_combobox_module_comboboxButtons--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28 .bp_combobox_module_textInputWrapper--fbb28 .bp_combobox_module_comboboxButtons--fbb28{
   align-items:center;
   display:flex;
   position:absolute;
   right:var(--space-2);
   top:var(--space-2);
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae.bp_combobox_module_withChips--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28.bp_combobox_module_withChips--fbb28{
   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--8caae .bp_combobox_module_comboboxContainer--8caae.bp_combobox_module_withChips--8caae:not(:disabled).bp_combobox_module_error--8caae,.bp_combobox_module_container--8caae .bp_combobox_module_comboboxContainer--8caae.bp_combobox_module_withChips--8caae:not(:disabled):has(input:focus){
+.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28.bp_combobox_module_withChips--fbb28:not(:disabled).bp_combobox_module_error--fbb28,.bp_combobox_module_container--fbb28 .bp_combobox_module_comboboxContainer--fbb28.bp_combobox_module_withChips--fbb28:not(:disabled):has(input:focus){
   padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-2));
 }
-.bp_combobox_module_container--8caae .bp_combobox_module_inlineError--8caae{
+.bp_combobox_module_container--fbb28 .bp_combobox_module_inlineError--fbb28{
   margin-block-start:var(--space-2);
 }
 
-.bp_combobox_module_popover--8caae{
+.bp_combobox_module_popover--fbb28{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -1754,7 +1755,7 @@
   text-transform:none;
   z-index:380;
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_option--8caae{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_option--fbb28{
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
   box-sizing:border-box;
@@ -1768,17 +1769,17 @@
           user-select:none;
   width:100%;
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_option--8caae[aria-disabled]{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_option--fbb28[aria-disabled]{
   opacity:60%;
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_option--8caae[data-active-item]:not([aria-disabled]){
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_option--fbb28[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--8caae .bp_combobox_module_option--8caae:hover{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_option--fbb28:hover{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_option--8caae .bp_combobox_module_indicator--8caae{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_option--fbb28 .bp_combobox_module_indicator--fbb28{
   align-items:center;
   display:flex;
   height:var(--size-9);
@@ -1787,16 +1788,16 @@
   position:absolute;
   top:0;
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_option--8caae .bp_combobox_module_indicator--8caae .bp_combobox_module_indicatorIcon--8caae path{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_option--fbb28 .bp_combobox_module_indicator--fbb28 .bp_combobox_module_indicatorIcon--fbb28 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_optionWithIndicator--8caae{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_optionWithIndicator--fbb28{
   padding-inline:var(--space-10) var(--space-2);
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_loadingIndicator--8caae{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_loadingIndicator--fbb28{
   position:unset;
 }
-.bp_combobox_module_popover--8caae .bp_combobox_module_noResultOption--8caae{
+.bp_combobox_module_popover--fbb28 .bp_combobox_module_noResultOption--fbb28{
   color:var(--text-text-on-light);
   -webkit-user-select:none;
           user-select:none;

package/lib-esm/primitives/notification/notification.viewport.js

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { Viewport } from '@radix-ui/react-toast';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { useNotification } from './notification-provider.js';
 import styles from './notification.module.js';
 import { PrivateNotificationElement } from './private-notification-element.js';
 
+const VIEWPORT_DEFAULT_HOTKEY = ['F8'];
 /**
  * Renders container with Notifications.
  *
@@ -14,15 +15,33 @@ import { PrivateNotificationElement } from './private-notification-element.js';
 const NotificationViewport = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
+    hotkey = VIEWPORT_DEFAULT_HOTKEY,
     ...rest
   } = props;
   const {
     notifications
   } = useNotification();
+  useEffect(() => {
+    const handleKeyDown = event => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const isHotkeyPressed = hotkey.every(key => event[key] || event.code === key);
+      // check `isComposing` to fix issue with japanese input, see:
+      // https://github.com/radix-ui/primitives/pull/2558
+      if (isHotkeyPressed && event.isComposing) {
+        event.stopPropagation();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, {
+      capture: true,
+      passive: true
+    });
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [hotkey]);
   return jsx(Viewport, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.viewport, className),
+    hotkey: hotkey,
     children: Array.from(notifications.values()).map(({
       key,
       ...notificationProps

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.16.3",
+    "version": "9.16.5",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -62,7 +62,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "b16d18a1af84c9a7afd61816fdd396f151e317f0",
+    "gitHead": "dd2e399ce63c71557eaf5ec841ae62ce0a7d18a2",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "types": "lib-esm/index.d.ts",