@box/blueprint-web 16.19.2 → 16.20.0

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

@@ -11,6 +11,7 @@ import '@internationalized/date';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { useControllableState } from '../utils/useControllableState.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './date-picker.module.js';
 
@@ -38,6 +39,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     openCalendarDropdownAriaLabel,
     clearDatePickerAriaLabel,
     error,
+    isOpen: isOpenProp,
+    onOpenChange,
     defaultOpen = false,
     isDisabled,
     calendarAriaLabel,
@@ -55,10 +58,17 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       setInternalValue(value);
     }
   }, [value]);
-  const [isCalendarOpen, setIsCalendarOpen] = useState(defaultOpen);
-  const firstDateSegmentRef = useRef(null);
+  const [isCalendarOpen = false, setIsCalendarOpen] = useControllableState({
+    prop: isOpenProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const dateInputRef = useRef(null);
   const calendarButtonRef = useRef(null);
   const shouldFocusStayInInput = useRef(false);
+  const focusFirstDateSegment = useCallback(() => {
+    dateInputRef.current?.querySelector('[role="spinbutton"]')?.focus();
+  }, []);
   const onDatePickerValueChanged = useCallback(newValue => {
     onChange?.(newValue);
     if (value === undefined) {
@@ -73,23 +83,26 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }, [onChange, value]);
   const onCalendarDateSelect = useCallback(() => {
     setIsCalendarOpen(false);
-  }, []);
+  }, [setIsCalendarOpen]);
   const onPressCalendar = useCallback(() => {
-    setIsCalendarOpen(v => !v);
     shouldFocusStayInInput.current = false;
-  }, []);
+    setIsCalendarOpen(isOpen => !isOpen);
+  }, [setIsCalendarOpen]);
+  const onPopoverOpenChange = useCallback(isOpen => {
+    setIsCalendarOpen(isOpen);
+  }, [setIsCalendarOpen]);
   const onClearButtonKeypress = useCallback(({
     key
   }) => {
     handleSubmitKeyPress(key, () => {
       onClearInputButtonClicked();
-      firstDateSegmentRef.current?.focus();
+      focusFirstDateSegment();
     });
-  }, [onClearInputButtonClicked]);
+  }, [focusFirstDateSegment, onClearInputButtonClicked]);
   const onDateInputClick = useCallback(() => {
     setIsCalendarOpen(true);
     shouldFocusStayInInput.current = true;
-  }, []);
+  }, [setIsCalendarOpen]);
   const hasError = !!error && !isDisabled;
   const calendarKey = `${internalValue?.day}/${internalValue?.month}/${internalValue?.year}${internalValue?.era}`;
   const onOpenAutoFocus = useCallback(e => {
@@ -104,15 +117,19 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     } = document;
     const isFocusLost = !activeElement || activeElement === document.body || activeElement === document.documentElement || isRadixFocusGuard(activeElement);
     const focusAlreadyOutsidePopover = !isFocusLost && !(e.currentTarget instanceof Node && e.currentTarget.contains(activeElement));
+    // Clear after close-focus uses it so a later open does not keep suppressing autofocus,
+    // without racing Esc/date-select focus restore (which needs the flag during this callback).
+    const shouldKeepFocusInInput = shouldFocusStayInInput.current;
+    shouldFocusStayInInput.current = false;
     if (focusAlreadyOutsidePopover) {
       return;
     }
-    if (shouldFocusStayInInput.current) {
-      firstDateSegmentRef.current?.focus();
+    if (shouldKeepFocusInInput) {
+      focusFirstDateSegment();
     } else {
       calendarButtonRef.current?.focus();
     }
-  }, []);
+  }, [focusFirstDateSegment]);
   const onFocusOutside = useCallback(e => {
     const wasCalendarButtonPressed = calendarButtonRef.current && calendarButtonRef.current.contains(e.target);
     if (!wasCalendarButtonPressed) {
@@ -126,7 +143,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     [inlineErrorId]: hasError
   });
   return jsx(RadixPopover.Root, {
-    onOpenChange: setIsCalendarOpen,
+    onOpenChange: onPopoverOpenChange,
     open: isCalendarOpen,
     children: jsxs(DatePicker$1, {
       ...rest,
@@ -151,6 +168,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           className: clsx(styles.group),
           "data-target-id": rest.dataTargetId,
           children: [jsx("div", {
+            ref: dateInputRef,
             className: clsx(styles.groupContainer, {
               [styles.error]: hasError
             }),
@@ -159,11 +177,6 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             children: jsx(DateInput, {
               className: clsx(styles.groupContainerInput),
               children: segment => jsx(DateSegment, {
-                ref: node => {
-                  if (!firstDateSegmentRef.current) {
-                    firstDateSegmentRef.current = node;
-                  }
-                },
                 className: styles.groupContainerInputSegment,
                 segment: segment
               })

package/dist/lib-esm/date-picker/types.d.ts

@@ -3,7 +3,7 @@ import { type CalendarBase } from '../primitives/calendar/types';
 import { type InputValueProps } from '../types/input-value-props';
 import { type Modify } from '../types/modify';
 import { type Labelable } from '../util-components/labelable/types';
-interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'>, Labelable {
+interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children' | 'isOpen' | 'onOpenChange' | 'defaultOpen'>, Labelable {
     /**
      * When `true`, label text is hidden.
      *
@@ -23,7 +23,15 @@ interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'child
      */
     error?: React.ReactNode;
     /**
-     * controls whether calendar dialog is initially opened
+     * Controlled popover open state.
+     */
+    isOpen?: boolean;
+    /**
+     * Called when the calendar popover open state changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Controls whether calendar dialog is initially opened in uncontrolled mode.
      */
     defaultOpen?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.19.2",
+    "version": "16.20.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -50,7 +50,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.7.6",
+        "@box/blueprint-web-assets": "^5.7.7",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -79,7 +79,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^1.2.15",
+        "@box/storybook-utils": "^1.2.16",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",