@box/blueprint-web 17.12.3 → 17.13.1

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, {