@fluentui/react-datepicker-compat 0.1.4 → 0.1.5

package/lib/components/DatePicker/useDatePicker.js

@@ -11,67 +11,80 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { usePopupPositioning } from '../../utils/usePopupPositioning';
 function isDateOutOfBounds(date, minDate, maxDate) {
-  return !!minDate && compareDatePart(minDate, date) > 0 || !!maxDate && compareDatePart(maxDate, date) < 0;
+    return !!minDate && compareDatePart(minDate, date) > 0 || !!maxDate && compareDatePart(maxDate, date) < 0;
 }
 function useFocusLogic() {
-  const inputRef = React.useRef(null);
-  const preventFocusOpeningPicker = React.useRef(false);
-  const focus = () => {
-    var _inputRef_current, _inputRef_current_focus;
-    (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : (_inputRef_current_focus = _inputRef_current.focus) === null || _inputRef_current_focus === void 0 ? void 0 : _inputRef_current_focus.call(_inputRef_current);
-  };
-  const preventNextFocusOpeningPicker = () => {
-    preventFocusOpeningPicker.current = true;
-  };
-  return [focus, inputRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker];
+    const inputRef = React.useRef(null);
+    const preventFocusOpeningPicker = React.useRef(false);
+    const focus = ()=>{
+        var _inputRef_current, _inputRef_current_focus;
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : (_inputRef_current_focus = _inputRef_current.focus) === null || _inputRef_current_focus === void 0 ? void 0 : _inputRef_current_focus.call(_inputRef_current);
+    };
+    const preventNextFocusOpeningPicker = ()=>{
+        preventFocusOpeningPicker.current = true;
+    };
+    return [
+        focus,
+        inputRef,
+        preventFocusOpeningPicker,
+        preventNextFocusOpeningPicker
+    ];
 }
 function usePopupVisibility(props) {
-  const [open, setOpen] = useControllableState({
-    initialState: false,
-    defaultState: props.defaultOpen,
-    state: props.open
-  });
-  const isMounted = React.useRef(false);
-  React.useEffect(() => {
-    if (isMounted.current && !open) {
-      var
-      // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss
-      _props_onOpenChange;
-      (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, false);
-    }
-    isMounted.current = true;
-  },
-  // Should only run on allowTextInput or open change
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [props.allowTextInput, open]);
-  return [open, setOpen];
+    const [open, setOpen] = useControllableState({
+        initialState: false,
+        defaultState: props.defaultOpen,
+        state: props.open
+    });
+    const isMounted = React.useRef(false);
+    React.useEffect(()=>{
+        if (isMounted.current && !open) {
+            var // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss
+            _props_onOpenChange;
+            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, false);
+        }
+        isMounted.current = true;
+    }, // Should only run on allowTextInput or open change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        props.allowTextInput,
+        open
+    ]);
+    return [
+        open,
+        setOpen
+    ];
 }
-function useSelectedDate({
-  formatDate,
-  onSelectDate,
-  value
-}) {
-  const [selectedDate, setSelectedDateState] = useControllableState({
-    initialState: undefined,
-    state: value
-  });
-  const [formattedDate, setFormattedDate] = React.useState(() => value && formatDate ? formatDate(value) : '');
-  const setSelectedDate = newDate => {
-    if (selectedDate === undefined && newDate !== undefined || selectedDate !== undefined && newDate === undefined || newDate && selectedDate && (newDate > selectedDate || newDate < selectedDate)) {
-      onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(newDate);
-    }
-    setSelectedDateState(newDate);
-    setFormattedDate(newDate && formatDate ? formatDate(newDate) : '');
-  };
-  React.useEffect(() => {
-    setFormattedDate(value && formatDate ? formatDate(value) : '');
-  }, [formatDate, value]);
-  return [selectedDate, formattedDate, setSelectedDate, setFormattedDate];
+function useSelectedDate({ formatDate , onSelectDate , value  }) {
+    const [selectedDate, setSelectedDateState] = useControllableState({
+        initialState: undefined,
+        state: value
+    });
+    const [formattedDate, setFormattedDate] = React.useState(()=>value && formatDate ? formatDate(value) : '');
+    const setSelectedDate = (newDate)=>{
+        if (selectedDate === undefined && newDate !== undefined || selectedDate !== undefined && newDate === undefined || newDate && selectedDate && (newDate > selectedDate || newDate < selectedDate)) {
+            onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(newDate);
+        }
+        setSelectedDateState(newDate);
+        setFormattedDate(newDate && formatDate ? formatDate(newDate) : '');
+    };
+    React.useEffect(()=>{
+        setFormattedDate(value && formatDate ? formatDate(value) : '');
+    }, [
+        formatDate,
+        value
+    ]);
+    return [
+        selectedDate,
+        formattedDate,
+        setSelectedDate,
+        setFormattedDate
+    ];
 }
-const defaultFormatDate = date => date ? date.toDateString() : '';
-const defaultParseDateFromString = dateStr => {
-  const date = Date.parse(dateStr);
-  return date ? new Date(date) : null;
+const defaultFormatDate = (date)=>date ? date.toDateString() : '';
+const defaultParseDateFromString = (dateStr)=>{
+    const date = Date.parse(dateStr);
+    return date ? new Date(date) : null;
 };
 /**
  * Create the state required to render DatePicker.
@@ -81,310 +94,345 @@ const defaultParseDateFromString = dateStr => {
  *
  * @param props - props from this instance of DatePicker
  * @param ref - reference to root Input slot
- */
-export const useDatePicker_unstable = (props, ref) => {
-  const {
-    allowTextInput = false,
-    allFocusable = false,
-    borderless = false,
-    dateTimeFormatter,
-    defaultOpen = false,
-    disableAutoFocus = true,
-    firstDayOfWeek = DayOfWeek.Sunday,
-    firstWeekOfYear = FirstWeekOfYear.FirstDay,
-    formatDate = defaultFormatDate,
-    highlightCurrentMonth = false,
-    highlightSelectedMonth = false,
-    initialPickerDate = new Date(),
-    inlinePopup = false,
-    isMonthPickerVisible = true,
-    maxDate,
-    minDate,
-    onOpenChange,
-    onSelectDate: onUserSelectDate,
-    openOnClick = true,
-    onValidationResult,
-    parseDateFromString = defaultParseDateFromString,
-    showCloseButton = false,
-    showGoToToday = true,
-    showMonthPickerAsOverlay = false,
-    showWeekNumbers = false,
-    strings = defaultDatePickerStrings,
-    today,
-    underlined = false,
-    value,
-    ...restOfProps
-  } = props;
-  const calendar = React.useRef(null);
-  const [focus, rootRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic();
-  const [selectedDate, formattedDate, setSelectedDate, setFormattedDate] = useSelectedDate({
-    formatDate,
-    onSelectDate: onUserSelectDate,
-    value
-  });
-  const [open, setOpenState] = usePopupVisibility(props);
-  const fieldContext = useFieldContext();
-  var _fieldContext_required;
-  const required = (_fieldContext_required = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.required) !== null && _fieldContext_required !== void 0 ? _fieldContext_required : props.required;
-  const popupSurfaceId = useId('datePicker-popupSurface');
-  const validateTextInput = React.useCallback((date = null) => {
-    let error;
-    if (allowTextInput) {
-      if (formattedDate || date) {
-        // Don't parse if the selected date has the same formatted string as what we're about to parse.
-        // The formatted string might be ambiguous (ex: "1/2/3" or "New Year Eve") and the parser might
-        // not be able to come up with the exact same date.
-        if (selectedDate && formatDate && formatDate(date !== null && date !== void 0 ? date : selectedDate) === formattedDate) {
-          return;
-        }
-        date = date || parseDateFromString(formattedDate);
-        // Check if date is null or date is an invalid date
-        if (!date || isNaN(date.getTime())) {
-          // Reset input if formatting is available
-          setSelectedDate(selectedDate);
-          error = 'invalid-input';
-        } else {
-          if (isDateOutOfBounds(date, minDate, maxDate)) {
-            error = 'out-of-bounds';
-          } else {
-            setSelectedDate(date);
-          }
+ */ export const useDatePicker_unstable = (props, ref)=>{
+    const { allowTextInput =false , allFocusable =false , borderless =false , dateTimeFormatter , defaultOpen =false , disableAutoFocus =true , firstDayOfWeek =DayOfWeek.Sunday , firstWeekOfYear =FirstWeekOfYear.FirstDay , formatDate =defaultFormatDate , highlightCurrentMonth =false , highlightSelectedMonth =false , initialPickerDate =new Date() , inlinePopup =false , isMonthPickerVisible =true , maxDate , minDate , onOpenChange , onSelectDate: onUserSelectDate , openOnClick =true , onValidationResult , parseDateFromString =defaultParseDateFromString , showCloseButton =false , showGoToToday =true , showMonthPickerAsOverlay =false , showWeekNumbers =false , strings =defaultDatePickerStrings , today , underlined =false , value , ...restOfProps } = props;
+    const calendar = React.useRef(null);
+    const [focus, rootRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic();
+    const [selectedDate, formattedDate, setSelectedDate, setFormattedDate] = useSelectedDate({
+        formatDate,
+        onSelectDate: onUserSelectDate,
+        value
+    });
+    const [open, setOpenState] = usePopupVisibility(props);
+    const fieldContext = useFieldContext();
+    var _fieldContext_required;
+    const required = (_fieldContext_required = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.required) !== null && _fieldContext_required !== void 0 ? _fieldContext_required : props.required;
+    const popupSurfaceId = useId('datePicker-popupSurface');
+    const validateTextInput = React.useCallback((date = null)=>{
+        let error;
+        if (allowTextInput) {
+            if (formattedDate || date) {
+                // Don't parse if the selected date has the same formatted string as what we're about to parse.
+                // The formatted string might be ambiguous (ex: "1/2/3" or "New Year Eve") and the parser might
+                // not be able to come up with the exact same date.
+                if (selectedDate && formatDate && formatDate(date !== null && date !== void 0 ? date : selectedDate) === formattedDate) {
+                    return;
+                }
+                date = date || parseDateFromString(formattedDate);
+                // Check if date is null or date is an invalid date
+                if (!date || isNaN(date.getTime())) {
+                    // Reset input if formatting is available
+                    setSelectedDate(selectedDate);
+                    error = 'invalid-input';
+                } else {
+                    if (isDateOutOfBounds(date, minDate, maxDate)) {
+                        error = 'out-of-bounds';
+                    } else {
+                        setSelectedDate(date);
+                    }
+                }
+            } else {
+                if (required) {
+                    error = 'required-input';
+                }
+                onUserSelectDate === null || onUserSelectDate === void 0 ? void 0 : onUserSelectDate(date);
+            }
+        } else if (required && !formattedDate) {
+            error = 'required-input';
         }
-      } else {
-        if (required) {
-          error = 'required-input';
+        onValidationResult === null || onValidationResult === void 0 ? void 0 : onValidationResult({
+            error
+        });
+    }, [
+        allowTextInput,
+        formatDate,
+        formattedDate,
+        maxDate,
+        minDate,
+        onUserSelectDate,
+        onValidationResult,
+        parseDateFromString,
+        required,
+        selectedDate,
+        setSelectedDate
+    ]);
+    const setOpen = React.useCallback((newState)=>{
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(newState);
+        setOpenState(newState);
+    }, [
+        onOpenChange,
+        setOpenState
+    ]);
+    const dismissDatePickerPopup = React.useCallback((newlySelectedDate)=>{
+        if (open) {
+            setOpen(false);
+            validateTextInput(newlySelectedDate);
+            if (!allowTextInput && newlySelectedDate) {
+                setSelectedDate(newlySelectedDate);
+            }
         }
-        onUserSelectDate === null || onUserSelectDate === void 0 ? void 0 : onUserSelectDate(date);
-      }
-    } else if (required && !formattedDate) {
-      error = 'required-input';
-    }
-    onValidationResult === null || onValidationResult === void 0 ? void 0 : onValidationResult({
-      error
-    });
-  }, [allowTextInput, formatDate, formattedDate, maxDate, minDate, onUserSelectDate, onValidationResult, parseDateFromString, required, selectedDate, setSelectedDate]);
-  const setOpen = React.useCallback(newState => {
-    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(newState);
-    setOpenState(newState);
-  }, [onOpenChange, setOpenState]);
-  const dismissDatePickerPopup = React.useCallback(newlySelectedDate => {
-    if (open) {
-      setOpen(false);
-      validateTextInput(newlySelectedDate);
-      if (!allowTextInput && newlySelectedDate) {
-        setSelectedDate(newlySelectedDate);
-      }
-    }
-  }, [allowTextInput, open, setOpen, setSelectedDate, validateTextInput]);
-  const showDatePickerPopup = React.useCallback(() => {
-    if (!open) {
-      preventNextFocusOpeningPicker();
-      setOpen(true);
-    }
-  }, [open, preventNextFocusOpeningPicker, setOpen]);
-  /**
-  * Callback for closing the calendar callout
-  */
-  const calendarDismissed = React.useCallback(newlySelectedDate => {
-    preventNextFocusOpeningPicker();
-    dismissDatePickerPopup(newlySelectedDate);
-  }, [dismissDatePickerPopup, preventNextFocusOpeningPicker]);
-  const onInputChange = React.useCallback((ev, data) => {
-    const {
-      value: newValue
-    } = data;
-    if (allowTextInput) {
-      if (open) {
-        dismissDatePickerPopup();
-      }
-      setFormattedDate(newValue);
-    }
-  }, [allowTextInput, dismissDatePickerPopup, open, setFormattedDate]);
-  const onInputBlur = React.useCallback(() => {
-    validateTextInput();
-  }, [validateTextInput]);
-  const onInputKeyDown = React.useCallback(ev => {
-    switch (ev.key) {
-      case Enter:
-        ev.preventDefault();
-        ev.stopPropagation();
+    }, [
+        allowTextInput,
+        open,
+        setOpen,
+        setSelectedDate,
+        validateTextInput
+    ]);
+    const showDatePickerPopup = React.useCallback(()=>{
         if (!open) {
-          validateTextInput();
-          showDatePickerPopup();
-        } else {
-          // When DatePicker allows input date string directly,
-          // it is expected to hit another enter to close the popup
-          if (props.allowTextInput) {
+            preventNextFocusOpeningPicker();
+            setOpen(true);
+        }
+    }, [
+        open,
+        preventNextFocusOpeningPicker,
+        setOpen
+    ]);
+    /**
+   * Callback for closing the calendar callout
+   */ const calendarDismissed = React.useCallback((newlySelectedDate)=>{
+        preventNextFocusOpeningPicker();
+        dismissDatePickerPopup(newlySelectedDate);
+    }, [
+        dismissDatePickerPopup,
+        preventNextFocusOpeningPicker
+    ]);
+    const onInputChange = React.useCallback((ev, data)=>{
+        const { value: newValue  } = data;
+        if (allowTextInput) {
+            if (open) {
+                dismissDatePickerPopup();
+            }
+            setFormattedDate(newValue);
+        }
+    }, [
+        allowTextInput,
+        dismissDatePickerPopup,
+        open,
+        setFormattedDate
+    ]);
+    const onInputBlur = React.useCallback(()=>{
+        validateTextInput();
+    }, [
+        validateTextInput
+    ]);
+    const onInputKeyDown = React.useCallback((ev)=>{
+        switch(ev.key){
+            case Enter:
+                ev.preventDefault();
+                ev.stopPropagation();
+                if (!open) {
+                    validateTextInput();
+                    showDatePickerPopup();
+                } else {
+                    // When DatePicker allows input date string directly,
+                    // it is expected to hit another enter to close the popup
+                    if (props.allowTextInput) {
+                        dismissDatePickerPopup();
+                    }
+                }
+                break;
+            case Escape:
+                ev.stopPropagation();
+                ev.preventDefault();
+                if (open) {
+                    calendarDismissed();
+                }
+                break;
+            case ArrowDown:
+                ev.preventDefault();
+                if (ev.altKey && !open) {
+                    showDatePickerPopup();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [
+        calendarDismissed,
+        dismissDatePickerPopup,
+        open,
+        props.allowTextInput,
+        showDatePickerPopup,
+        validateTextInput
+    ]);
+    const onInputFocus = React.useCallback(()=>{
+        if (disableAutoFocus) {
+            return;
+        }
+        if (!allowTextInput) {
+            if (!preventFocusOpeningPicker.current) {
+                showDatePickerPopup();
+            }
+            preventFocusOpeningPicker.current = false;
+        }
+    }, [
+        allowTextInput,
+        disableAutoFocus,
+        preventFocusOpeningPicker,
+        showDatePickerPopup
+    ]);
+    const onInputClick = React.useCallback(()=>{
+        // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior
+        if ((props.openOnClick || !props.disableAutoFocus) && !open && !props.disabled) {
+            showDatePickerPopup();
+            return;
+        }
+        if (allowTextInput) {
             dismissDatePickerPopup();
-          }
         }
-        break;
-      case Escape:
+    }, [
+        allowTextInput,
+        dismissDatePickerPopup,
+        open,
+        props.disabled,
+        props.disableAutoFocus,
+        props.openOnClick,
+        showDatePickerPopup
+    ]);
+    const onIconClick = (ev)=>{
         ev.stopPropagation();
-        ev.preventDefault();
-        if (open) {
-          calendarDismissed();
+        if (!open && !props.disabled) {
+            showDatePickerPopup();
+        } else if (props.allowTextInput) {
+            dismissDatePickerPopup();
         }
-        break;
-      case ArrowDown:
-        ev.preventDefault();
-        if (ev.altKey && !open) {
-          showDatePickerPopup();
+    };
+    const inputAppearance = underlined ? 'underline' : borderless ? 'filled-lighter' : 'outline';
+    const [triggerWrapperRef, popupRef] = usePopupPositioning(props);
+    const rootShorthand = resolveShorthand(restOfProps, {
+        required: true,
+        defaultProps: {
+            appearance: inputAppearance,
+            'aria-controls': open ? popupSurfaceId : undefined,
+            'aria-expanded': open,
+            'aria-haspopup': 'dialog',
+            contentAfter: /*#__PURE__*/ React.createElement(CalendarMonthRegular, {
+                onClick: onIconClick
+            }),
+            readOnly: !allowTextInput,
+            role: 'combobox',
+            root: {
+                'aria-owns': open ? popupSurfaceId : undefined,
+                ref: useMergedRefs(triggerWrapperRef, ref)
+            },
+            input: {
+                ref: rootRef
+            }
+        }
+    });
+    rootShorthand.onChange = mergeCallbacks(rootShorthand.onChange, onInputChange);
+    rootShorthand.onBlur = mergeCallbacks(rootShorthand.onBlur, onInputBlur);
+    rootShorthand.onKeyDown = mergeCallbacks(rootShorthand.onKeyDown, onInputKeyDown);
+    rootShorthand.onFocus = mergeCallbacks(rootShorthand.onFocus, onInputFocus);
+    rootShorthand.onClick = mergeCallbacks(rootShorthand.onClick, onInputClick);
+    const { modalAttributes  } = useModalAttributes({
+        trapFocus: true,
+        alwaysFocusable: true,
+        legacyTrapFocus: false
+    });
+    const popupSurfaceShorthand = open ? resolveShorthand(props.popupSurface, {
+        required: true,
+        defaultProps: {
+            'aria-label': 'Calendar',
+            'aria-modal': true,
+            id: popupSurfaceId,
+            role: 'dialog',
+            ref: popupRef,
+            ...modalAttributes
         }
-        break;
-      default:
-        break;
-    }
-  }, [calendarDismissed, dismissDatePickerPopup, open, props.allowTextInput, showDatePickerPopup, validateTextInput]);
-  const onInputFocus = React.useCallback(() => {
-    if (disableAutoFocus) {
-      return;
-    }
-    if (!allowTextInput) {
-      if (!preventFocusOpeningPicker.current) {
-        showDatePickerPopup();
-      }
-      preventFocusOpeningPicker.current = false;
-    }
-  }, [allowTextInput, disableAutoFocus, preventFocusOpeningPicker, showDatePickerPopup]);
-  const onInputClick = React.useCallback(() => {
-    // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior
-    if ((props.openOnClick || !props.disableAutoFocus) && !open && !props.disabled) {
-      showDatePickerPopup();
-      return;
-    }
-    if (allowTextInput) {
-      dismissDatePickerPopup();
-    }
-  }, [allowTextInput, dismissDatePickerPopup, open, props.disabled, props.disableAutoFocus, props.openOnClick, showDatePickerPopup]);
-  const onIconClick = ev => {
-    ev.stopPropagation();
-    if (!open && !props.disabled) {
-      showDatePickerPopup();
-    } else if (props.allowTextInput) {
-      dismissDatePickerPopup();
-    }
-  };
-  const inputAppearance = underlined ? 'underline' : borderless ? 'filled-lighter' : 'outline';
-  const [triggerWrapperRef, popupRef] = usePopupPositioning(props);
-  const rootShorthand = resolveShorthand(restOfProps, {
-    required: true,
-    defaultProps: {
-      appearance: inputAppearance,
-      'aria-controls': open ? popupSurfaceId : undefined,
-      'aria-expanded': open,
-      'aria-haspopup': 'dialog',
-      contentAfter: /*#__PURE__*/React.createElement(CalendarMonthRegular, {
-        onClick: onIconClick
-      }),
-      readOnly: !allowTextInput,
-      role: 'combobox',
-      root: {
-        'aria-owns': open ? popupSurfaceId : undefined,
-        ref: useMergedRefs(triggerWrapperRef, ref)
-      },
-      input: {
-        ref: rootRef
-      }
-    }
-  });
-  rootShorthand.onChange = mergeCallbacks(rootShorthand.onChange, onInputChange);
-  rootShorthand.onBlur = mergeCallbacks(rootShorthand.onBlur, onInputBlur);
-  rootShorthand.onKeyDown = mergeCallbacks(rootShorthand.onKeyDown, onInputKeyDown);
-  rootShorthand.onFocus = mergeCallbacks(rootShorthand.onFocus, onInputFocus);
-  rootShorthand.onClick = mergeCallbacks(rootShorthand.onClick, onInputClick);
-  const {
-    modalAttributes
-  } = useModalAttributes({
-    trapFocus: true,
-    alwaysFocusable: true,
-    legacyTrapFocus: false
-  });
-  const popupSurfaceShorthand = open ? resolveShorthand(props.popupSurface, {
-    required: true,
-    defaultProps: {
-      'aria-label': 'Calendar',
-      'aria-modal': true,
-      id: popupSurfaceId,
-      role: 'dialog',
-      ref: popupRef,
-      ...modalAttributes
-    }
-  }) : undefined;
-  const {
-    targetDocument
-  } = useFluent();
-  useOnClickOutside({
-    element: targetDocument,
-    callback: ev => dismissDatePickerPopup(),
-    refs: [triggerWrapperRef, popupRef],
-    disabled: !open
-  });
-  useOnScrollOutside({
-    element: targetDocument,
-    callback: ev => dismissDatePickerPopup(),
-    refs: [triggerWrapperRef, popupRef],
-    disabled: !open
-  });
-  // When the popup is opened, focus should go to the calendar.
-  // In v8 this was done by focusing after the callout was positioned, but in v9 this can be simulated by using a
-  // useEffect hook.
-  React.useEffect(() => {
-    if (open && !props.disabled && calendar.current) {
-      calendar.current.focus();
-    }
-  }, [disableAutoFocus, open, props.disabled]);
-  // When the popup is closed, focus should go back to the input.
-  React.useEffect(() => {
-    if (!open && !props.disabled) {
-      focus();
-    }
-  }, [open, props.disabled, focus]);
-  const calendarShorthand = resolveShorthand(props.calendar, {
-    required: true,
-    defaultProps: {
-      allFocusable,
-      componentRef: calendar,
-      dateTimeFormatter,
-      firstDayOfWeek,
-      firstWeekOfYear,
-      highlightCurrentMonth,
-      highlightSelectedMonth,
-      isMonthPickerVisible,
-      maxDate,
-      minDate,
-      showCloseButton,
-      showGoToToday,
-      showMonthPickerAsOverlay,
-      showWeekNumbers,
-      strings,
-      today,
-      value: selectedDate || initialPickerDate
-    }
-  });
-  calendarShorthand.onDismiss = mergeCallbacks(calendarShorthand.onDismiss, calendarDismissed);
-  calendarShorthand.onSelectDate = mergeCallbacks(calendarShorthand.onSelectDate, calendarDismissed);
-  React.useImperativeHandle(props.componentRef, () => ({
-    focus,
-    reset() {
-      setOpen(false);
-      setSelectedDate(undefined);
-    },
-    showDatePickerPopup
-  }), [focus, setOpen, setSelectedDate, showDatePickerPopup]);
-  const state = {
-    disabled: !!props.disabled,
-    inlinePopup,
-    components: {
-      root: Input,
-      calendar: Calendar,
-      popupSurface: 'div'
-    },
-    calendar: calendarShorthand,
-    root: rootShorthand,
-    popupSurface: popupSurfaceShorthand
-  };
-  state.root.value = formattedDate;
-  return state;
+    }) : undefined;
+    const { targetDocument  } = useFluent();
+    useOnClickOutside({
+        element: targetDocument,
+        callback: (ev)=>dismissDatePickerPopup(),
+        refs: [
+            triggerWrapperRef,
+            popupRef
+        ],
+        disabled: !open
+    });
+    useOnScrollOutside({
+        element: targetDocument,
+        callback: (ev)=>dismissDatePickerPopup(),
+        refs: [
+            triggerWrapperRef,
+            popupRef
+        ],
+        disabled: !open
+    });
+    // When the popup is opened, focus should go to the calendar.
+    // In v8 this was done by focusing after the callout was positioned, but in v9 this can be simulated by using a
+    // useEffect hook.
+    React.useEffect(()=>{
+        if (open && !props.disabled && calendar.current) {
+            calendar.current.focus();
+        }
+    }, [
+        disableAutoFocus,
+        open,
+        props.disabled
+    ]);
+    // When the popup is closed, focus should go back to the input.
+    React.useEffect(()=>{
+        if (!open && !props.disabled) {
+            focus();
+        }
+    // Focus function keeps changing, so we need to skip it in the deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open,
+        props.disabled
+    ]);
+    const calendarShorthand = resolveShorthand(props.calendar, {
+        required: true,
+        defaultProps: {
+            allFocusable,
+            componentRef: calendar,
+            dateTimeFormatter,
+            firstDayOfWeek,
+            firstWeekOfYear,
+            highlightCurrentMonth,
+            highlightSelectedMonth,
+            isMonthPickerVisible,
+            maxDate,
+            minDate,
+            showCloseButton,
+            showGoToToday,
+            showMonthPickerAsOverlay,
+            showWeekNumbers,
+            strings,
+            today,
+            value: selectedDate || initialPickerDate
+        }
+    });
+    calendarShorthand.onDismiss = mergeCallbacks(calendarShorthand.onDismiss, calendarDismissed);
+    calendarShorthand.onSelectDate = mergeCallbacks(calendarShorthand.onSelectDate, calendarDismissed);
+    React.useImperativeHandle(props.componentRef, ()=>({
+            focus,
+            reset () {
+                setOpen(false);
+                setSelectedDate(undefined);
+            },
+            showDatePickerPopup
+        }), [
+        focus,
+        setOpen,
+        setSelectedDate,
+        showDatePickerPopup
+    ]);
+    const state = {
+        disabled: !!props.disabled,
+        inlinePopup,
+        components: {
+            root: Input,
+            calendar: Calendar,
+            popupSurface: 'div'
+        },
+        calendar: calendarShorthand,
+        root: rootShorthand,
+        popupSurface: popupSurfaceShorthand
+    };
+    state.root.value = formattedDate;
+    return state;
 };
-//# sourceMappingURL=useDatePicker.js.map