@box/blueprint-web 6.15.1 → 6.15.3

package/lib-esm/combobox/combobox.js

@@ -100,14 +100,7 @@ const RootInner = ({
     }
     return getSelectedOptionValues(valueProp);
   }, [getSelectedOptionValues, valueProp]);
-  const focusInput = useCallback(() => {
-    inputRef.current?.focus();
-  }, []);
   const setValue = newSelectedValue => {
-    // Move focus back to input for single selects
-    if (!Array.isArray(newSelectedValue)) {
-      focusInput();
-    }
     if (!onValueChange) {
       return;
     }
@@ -148,6 +141,9 @@ const RootInner = ({
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [displayAvatar]);
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
   const renderSelectItemOption = useCallback(option => {
     const value = getOptionValue(option);
     return jsxs(OptionWithIndicator, {
@@ -166,8 +162,10 @@ const RootInner = ({
       setInputValue('');
     } else if (selectedValueMemoized) {
       setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized));
+      // Also focus input for single-select variant
+      focusInput();
     }
-  }, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue]);
+  }, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue, focusInput]);
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {

package/lib-esm/primitives/calendar/calendar.js

@@ -3,10 +3,56 @@ import { ChevronLeft, ChevronRight } from '@box/blueprint-web-assets/icons/Fill'
 import { Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
 import { isSameDay, today, getLocalTimeZone } from '@internationalized/date';
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { Calendar as Calendar$1, Button, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
 import styles from './calendar.module.js';
 
+// Dispatch duplicated event with bubbling enabled, so Radix popover knows that this click happened.
+const handlePointerDownInCell = e => {
+  const newEvent = new PointerEvent('pointerdown', {
+    ...e,
+    bubbles: true
+  });
+  // Dispatch event on the parent to avoid infinite loop
+  e.currentTarget.parentElement?.dispatchEvent(newEvent);
+};
+/**
+ * Custom calendar cell that adds a pointerdown event listener to the CalendarCell.
+ * This fixes DSYS-872 issue, where it takes 2 clicks to close the popover.
+ */
+const CustomCalendarCell = ({
+  date,
+  className
+}) => {
+  const calendarCellRef = useRef(null);
+  useEffect(() => {
+    const calendarCell = calendarCellRef.current;
+    const shouldModifyEventListener = calendarCell && !calendarCell.ariaDisabled;
+    if (shouldModifyEventListener) {
+      // Attach the listener to the `div` with `role=button` instead of `td`, since we don't want the event to be triggered when clicking on td's padding.
+      calendarCell.firstElementChild?.addEventListener('pointerdown', handlePointerDownInCell);
+    }
+    return () => {
+      if (shouldModifyEventListener) {
+        calendarCell.firstElementChild?.removeEventListener('pointerdown', handlePointerDownInCell);
+      }
+    };
+  }, []);
+  return jsx(CalendarCell, {
+    ref: calendarCellRef,
+    className: className,
+    date: date,
+    children: ({
+      formattedDate
+    }) => jsx("span", {
+      children: formattedDate
+    })
+  });
+};
+// Ensure clicking on the header button triggers Radix onPointerDown event handler to close the popover with single click.
+function continuePropagation(e) {
+  e.continuePropagation();
+}
 const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
@@ -25,6 +71,7 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       children: [jsx(Button, {
         "aria-label": previousMonthAriaLabel,
         className: styles.calendarHeaderButton,
+        onPressStart: continuePropagation,
         slot: "previous",
         children: jsx(ChevronLeft, {
           "aria-label": previousMonthAriaLabel,
@@ -35,6 +82,7 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       }), jsx(Button, {
         "aria-label": nextMonthAriaLabel,
         className: styles.calendarHeaderButton,
+        onPressStart: continuePropagation,
         slot: "next",
         children: jsx(ChevronRight, {
           "aria-label": nextMonthAriaLabel,
@@ -49,16 +97,11 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           children: day
         })
       }), jsx(CalendarGridBody, {
-        children: date => jsx(CalendarCell, {
+        children: date => jsx(CustomCalendarCell, {
           className: clsx(styles.calendarCell, {
             [styles.today]: isSameDay(date, today(getLocalTimeZone()))
           }),
-          date: date,
-          children: ({
-            formattedDate
-          }) => jsx("span", {
-            children: formattedDate
-          })
+          date: date
         })
       })]
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.15.1",
+    "version": "6.15.3",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "1f7ff1dd54e90dd51c1766a4c51ee7da2fd39552",
+    "gitHead": "dfb4022d75a7c0fc43d599749ce92d61aa576254",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {