@box/blueprint-web 17.13.0 → 17.14.0

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

@@ -92,6 +92,7 @@ const RootInner = ({
     idForLabel,
     displaySingleSelectionAsChip = multiselect,
     autoComplete,
+    virtualFocus = false,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
@@ -119,7 +120,7 @@ const RootInner = ({
     open: open && !disabled,
     setOpen: onOpenChange,
     includesBaseElement: true,
-    virtualFocus: false,
+    virtualFocus,
     focusLoop
   });
   const {

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

@@ -209,6 +209,13 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default true
      */
     focusLoop?: boolean;
+    /**
+     * When set to `true`, arrow keys highlight options with `aria-activedescendant` and keyboard focus
+     * stays on the input, so navigating the list never blurs the field. Useful when the input validates
+     * or reacts to losing focus. When `false`, DOM focus moves onto the options themselves.
+     * @default false
+     */
+    virtualFocus?: boolean;
     /**
      * Callback used when combobox input/textarea is focused
      */

package/dist/lib-esm/date-picker/date-picker.js

@@ -70,6 +70,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
   const dateInputRef = useRef(null);
   const calendarButtonRef = useRef(null);
+  const groupRef = useRef(null);
   const shouldFocusStayInInput = useRef(autoFocus && isCalendarOpen);
   const focusFirstDateSegment = useCallback(() => {
     dateInputRef.current?.querySelector('[role="spinbutton"]')?.focus();
@@ -108,6 +109,23 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     setIsCalendarOpen(true);
     shouldFocusStayInInput.current = true;
   }, [setIsCalendarOpen]);
+  const onDateInputKeyDownCapture = useCallback(event => {
+    if (event.key !== 'Enter' || !isCalendarOpen) {
+      return;
+    }
+    const {
+      target
+    } = event;
+    if (!(target instanceof HTMLElement) || target.getAttribute('role') !== 'spinbutton') {
+      return;
+    }
+    event.preventDefault();
+    shouldFocusStayInInput.current = true;
+    setIsCalendarOpen(false);
+  }, [isCalendarOpen, setIsCalendarOpen]);
+  const onGroupFocusCapture = useCallback(() => {
+    shouldFocusStayInInput.current = true;
+  }, []);
   const hasError = !!error && !isDisabled;
   const calendarKey = `${internalValue?.day}/${internalValue?.month}/${internalValue?.year}${internalValue?.era}`;
   const onOpenAutoFocus = useCallback(e => {
@@ -135,11 +153,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       calendarButtonRef.current?.focus();
     }
   }, [focusFirstDateSegment]);
-  const onFocusOutside = useCallback(e => {
-    const wasCalendarButtonPressed = calendarButtonRef.current && calendarButtonRef.current.contains(e.target);
-    if (!wasCalendarButtonPressed) {
-      e.preventDefault();
-    }
+  const onFocusOutside = useCallback(event => {
+    event.preventDefault();
   }, []);
   const displayValue = value !== undefined ? value : internalValue;
   const Label = useLabelable(label, '');
@@ -171,8 +186,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       }), jsx(RadixPopover.Anchor, {
         asChild: true,
         children: jsxs(Group, {
+          ref: groupRef,
           className: clsx(styles.group),
           "data-target-id": rest.dataTargetId,
+          onFocusCapture: onGroupFocusCapture,
           children: [jsx("div", {
             ref: dateInputRef,
             className: clsx(styles.groupContainer, {
@@ -181,6 +198,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
             "data-testid": "date-picker-input",
             onClickCapture: onDateInputClick,
+            onKeyDownCapture: onDateInputKeyDownCapture,
             children: jsx(DateInput, {
               className: clsx(styles.groupContainerInput),
               children: segment => jsx(DateSegment, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.13.0",
+    "version": "17.14.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.10.17",
+        "@box/blueprint-web-assets": "^5.10.19",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.2.61",
+        "@box/storybook-utils": "^1.2.63",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",