@box/blueprint-web 7.18.3 → 7.19.1

package/lib-esm/combobox/combobox.js

@@ -43,6 +43,7 @@ const RootInner = ({
     defaultOpen = false,
     open,
     onOpenChange,
+    onFocus,
     defaultInputValue = '',
     inputValue: inputValueProp,
     onInputValueChange,
@@ -64,12 +65,18 @@ const RootInner = ({
     hideSelectedOptions = false,
     unmountOnHide = false,
     experimentalVirtualization = false,
+    getPopoverRef,
+    focusLoop,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
   const inputRef = useRef(null);
-  const popoverRef = useRef(null);
   const comboboxId = useUniqueId('combobox-');
+  const popoverRef = useRef(null);
+  const popoverRefCallback = useCallback(node => {
+    popoverRef.current = node;
+    getPopoverRef?.(node);
+  }, [getPopoverRef]);
   const hasError = !!error && !disabled;
   const comboboxStore = useComboboxStore({
     // Input state
@@ -81,7 +88,8 @@ const RootInner = ({
     open: open && !disabled,
     setOpen: onOpenChange,
     includesBaseElement: true,
-    virtualFocus: false
+    virtualFocus: false,
+    focusLoop
   });
   const {
     setValue: setInputValue,
@@ -199,6 +207,9 @@ const RootInner = ({
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [clearOnBlur, isOpen, selectedValue, setInputValue]);
+  const handleOnFocus = useCallback(() => {
+    onFocus?.();
+  }, [onFocus]);
   const removeInputChip = id => {
     // For multi-select variant only
     selectStore.setValue(prev => {
@@ -253,6 +264,7 @@ const RootInner = ({
             disabled: disabled,
             id: comboboxId,
             onBlur: handleOnBlur,
+            onFocus: handleOnFocus,
             onKeyDown: handleKeyDown,
             required: required,
             store: comboboxStore
@@ -277,6 +289,7 @@ const RootInner = ({
       hideLabel: hideLabel,
       label: label,
       onBlur: handleOnBlur,
+      onFocus: handleOnFocus,
       onKeyDown: handleKeyDown,
       required: required
     }),
@@ -297,7 +310,7 @@ const RootInner = ({
       [styles.disabled]: disabled
     }, className),
     children: [inputComponent, showLoading || filteredOptions.length > 0 || filteredOptions.length <= 0 && noResultMessage ? jsx(ComboboxPopover, {
-      ref: popoverRef,
+      ref: popoverRefCallback,
       "aria-labelledby": comboboxId,
       className: styles.popover,
       fitViewport: true,

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

@@ -175,6 +175,19 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default false
      */
     experimentalVirtualization?: boolean;
+    /**
+     * Callback ref when popover is mounted or unmounted
+     */
+    getPopoverRef?: (node: HTMLDivElement | null) => void;
+    /**
+     * Determines how the focus behaves when the user reaches the end of the combobox. Can be useful to turn off when implementing infinite scrolling.
+     * @default true
+     */
+    focusLoop?: boolean;
+    /**
+     * Callback used when combobox input/textarea is focused
+     */
+    onFocus?: () => void;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength'> & {
     as: 'textarea';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.18.3",
+    "version": "7.19.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -27,7 +27,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.5",
         "@ariakit/react-core": "0.4.5",
-        "@box/blueprint-web-assets": "^4.19.0",
+        "@box/blueprint-web-assets": "^4.19.1",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -66,7 +66,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "12b5f781586458fc2f5889c85af939cd19bce66b",
+    "gitHead": "ecbf610b70f2c1c82d64036d7af6e0490f4c7010",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {