@fluentui/react-datepicker-compat 0.0.0-beta.1

package/lib/components/DatePicker/useDatePicker.js

@@ -0,0 +1,453 @@
+import * as React from 'react';
+import { ArrowDown, Enter, Escape } from '@fluentui/keyboard-keys';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
+import { Input } from '@fluentui/react-input';
+import { Field } from '@fluentui/react-field';
+import { getNativeElementProps, mergeCallbacks, resolveShorthand, useControllableState, useId } from '@fluentui/react-utilities';
+import { compareDatePart, getDatePartHashValue, DayOfWeek, FirstWeekOfYear } from '../../utils';
+import { Calendar } from '../Calendar/Calendar';
+import { defaultDatePickerStrings } from './defaults';
+import { Popover } from '@fluentui/react-popover';
+import { PopoverSurface } from '@fluentui/react-popover';
+function isDateOutOfBounds(date, minDate, maxDate) {
+  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];
+}
+function useCalendarVisibility({
+  allowTextInput,
+  onAfterMenuDismiss
+}, focus) {
+  const [isCalendarShown, setIsCalendarShown] = React.useState(false);
+  const isMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMounted.current && !isCalendarShown) {
+      // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss
+      onAfterMenuDismiss === null || onAfterMenuDismiss === void 0 ? void 0 : onAfterMenuDismiss();
+    }
+    isMounted.current = true;
+  },
+  // Should only run on allowTextInput or isCalendarShown change
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [allowTextInput, isCalendarShown]);
+  return [isCalendarShown, setIsCalendarShown];
+}
+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 useErrorMessage({
+  allowTextInput,
+  formatDate,
+  isRequired,
+  maxDate,
+  minDate,
+  onSelectDate,
+  parseDateFromString,
+  strings
+}, selectedDate, setSelectedDate, inputValue, isCalendarShown) {
+  const [errorMessage, setErrorMessage] = React.useState();
+  const [statusMessage, setStatusMessage] = React.useState();
+  const validateTextInput = (date = null) => {
+    if (allowTextInput) {
+      if (inputValue || 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 && !errorMessage && formatDate && formatDate(date !== null && date !== void 0 ? date : selectedDate) === inputValue) {
+          return;
+        }
+        date = date || parseDateFromString(inputValue);
+        // Check if date is null, or date is Invalid Date
+        if (!date || isNaN(date.getTime())) {
+          // Reset invalid input field, if formatting is available
+          setSelectedDate(selectedDate);
+          // default the newer isResetStatusMessage string to invalidInputErrorMessage for legacy support
+          const selectedText = formatDate ? formatDate(selectedDate) : '';
+          const statusText = strings.isResetStatusMessage ? strings.isResetStatusMessage.replace('{0}', inputValue).replace('{1}', selectedText) : strings.invalidInputErrorMessage || '';
+          setStatusMessage(statusText);
+        } else {
+          // Check against optional date boundaries
+          if (isDateOutOfBounds(date, minDate, maxDate)) {
+            setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');
+          } else {
+            setSelectedDate(date);
+            setErrorMessage(undefined);
+            setStatusMessage(undefined);
+          }
+        }
+      } else {
+        // Only show error for empty inputValue if it is a required field
+        setErrorMessage(isRequired ? strings.isRequiredErrorMessage || ' ' : undefined);
+        // If no input date string or input date string is invalid
+        // date variable will be null, callback should expect null value for this case
+        onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(date);
+      }
+    } else if (isRequired && !inputValue) {
+      // Check when DatePicker is a required field but has NO input value
+      setErrorMessage(strings.isRequiredErrorMessage || ' ');
+    } else {
+      // Cleanup the error message and status message
+      setErrorMessage(undefined);
+      setStatusMessage(undefined);
+    }
+  };
+  const minDatePartHashValue = minDate && getDatePartHashValue(minDate);
+  const maxDatePartHashValue = maxDate && getDatePartHashValue(maxDate);
+  const selectedDatePartHashValue = selectedDate && getDatePartHashValue(selectedDate);
+  React.useEffect(() => {
+    if (isRequired && !selectedDate) {
+      setErrorMessage(strings.isRequiredErrorMessage || ' ');
+    } else if (selectedDate && isDateOutOfBounds(selectedDate, minDate, maxDate)) {
+      setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');
+    } else {
+      setErrorMessage(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+  // We don't want to compare the date itself, since two instances of date at the same time are not equal
+  minDatePartHashValue, maxDatePartHashValue, selectedDatePartHashValue, isRequired]);
+  return [isCalendarShown ? undefined : errorMessage, validateTextInput, setErrorMessage, isCalendarShown ? undefined : statusMessage, setStatusMessage];
+}
+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.
+ *
+ * The returned state can be modified with hooks such as useDatePickerStyles_unstable,
+ * before being passed to renderDatePicker_unstable.
+ *
+ * @param props - props from this instance of DatePicker
+ * @param ref - reference to root HTMLElement of DatePicker
+ */
+export const useDatePicker_unstable = (props, ref) => {
+  var _props_input;
+  const {
+    allowTextInput = false,
+    allFocusable = false,
+    borderless = false,
+    dateTimeFormatter,
+    disabled,
+    disableAutoFocus = true,
+    firstDayOfWeek = DayOfWeek.Sunday,
+    firstWeekOfYear = FirstWeekOfYear.FirstDay,
+    formatDate = defaultFormatDate,
+    highlightCurrentMonth = false,
+    highlightSelectedMonth = false,
+    initialPickerDate = new Date(),
+    isMonthPickerVisible = true,
+    isRequired = false,
+    label,
+    maxDate,
+    minDate,
+    onAfterMenuDismiss,
+    onSelectDate: onUserSelectDate,
+    parseDateFromString = defaultParseDateFromString,
+    placeholder,
+    showCloseButton = false,
+    showGoToToday = true,
+    showMonthPickerAsOverlay = false,
+    showWeekNumbers = false,
+    strings = defaultDatePickerStrings,
+    tabIndex,
+    today,
+    underlined = false,
+    value
+  } = props;
+  const id = useId('DatePicker', props.id);
+  const calloutId = useId('DatePicker-Callout');
+  const calendar = React.useRef(null);
+  const [focus, _, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic();
+  const [isCalendarShown, setIsCalendarShown] = useCalendarVisibility({
+    allowTextInput,
+    onAfterMenuDismiss
+  }, focus);
+  const [selectedDate, formattedDate, setSelectedDate, setFormattedDate] = useSelectedDate({
+    formatDate,
+    onSelectDate: onUserSelectDate,
+    value
+  });
+  const [errorMessage, validateTextInput, setErrorMessage, statusMessage, setStatusMessage] = useErrorMessage({
+    allowTextInput,
+    formatDate,
+    isRequired,
+    maxDate,
+    minDate,
+    onSelectDate: onUserSelectDate,
+    parseDateFromString,
+    strings
+  }, selectedDate, setSelectedDate, formattedDate, isCalendarShown);
+  const dismissDatePickerPopup = React.useCallback(newlySelectedDate => {
+    if (isCalendarShown) {
+      setIsCalendarShown(false);
+      validateTextInput(newlySelectedDate);
+      if (!allowTextInput && newlySelectedDate) {
+        setSelectedDate(newlySelectedDate);
+      }
+    }
+  }, [allowTextInput, isCalendarShown, setIsCalendarShown, setSelectedDate, validateTextInput]);
+  const showDatePickerPopup = React.useCallback(() => {
+    if (!isCalendarShown) {
+      preventNextFocusOpeningPicker();
+      setIsCalendarShown(true);
+    }
+  }, [isCalendarShown, preventNextFocusOpeningPicker, setIsCalendarShown]);
+  /**
+  * Callback for closing the calendar callout
+  */
+  const calendarDismissed = React.useCallback(newlySelectedDate => {
+    preventNextFocusOpeningPicker();
+    dismissDatePickerPopup(newlySelectedDate);
+    // don't need to focus the text box, if necessary the focusTrapZone will do it
+  }, [dismissDatePickerPopup, preventNextFocusOpeningPicker]);
+  const handleEscKey = React.useCallback(ev => {
+    if (isCalendarShown) {
+      ev.stopPropagation();
+      calendarDismissed();
+    }
+  }, [calendarDismissed, isCalendarShown]);
+  React.useImperativeHandle(props.componentRef, () => ({
+    focus,
+    reset() {
+      setIsCalendarShown(false);
+      setSelectedDate(undefined);
+      setErrorMessage(undefined);
+      setStatusMessage(undefined);
+    },
+    showDatePickerPopup
+  }), [focus, setErrorMessage, setIsCalendarShown, setSelectedDate, setStatusMessage, showDatePickerPopup]);
+  const onInputFocus = React.useCallback(() => {
+    if (disableAutoFocus) {
+      return;
+    }
+    if (!allowTextInput) {
+      if (!preventFocusOpeningPicker.current) {
+        showDatePickerPopup();
+      }
+      preventFocusOpeningPicker.current = false;
+    }
+  }, [allowTextInput, disableAutoFocus, preventFocusOpeningPicker, showDatePickerPopup]);
+  const onInputBlur = React.useCallback(() => {
+    validateTextInput();
+  }, [validateTextInput]);
+  const onInputChange = React.useCallback((ev, data) => {
+    const {
+      value: newValue
+    } = data;
+    if (allowTextInput) {
+      if (isCalendarShown) {
+        dismissDatePickerPopup();
+      }
+      setFormattedDate(newValue);
+    }
+  }, [allowTextInput, dismissDatePickerPopup, isCalendarShown, setFormattedDate]);
+  const onInputKeyDown = React.useCallback(ev => {
+    switch (ev.key) {
+      case Enter:
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (!isCalendarShown) {
+          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:
+        handleEscKey(ev);
+        break;
+      case ArrowDown:
+        if (ev.altKey && !isCalendarShown) {
+          showDatePickerPopup();
+        }
+        break;
+      default:
+        break;
+    }
+  }, [dismissDatePickerPopup, handleEscKey, isCalendarShown, props.allowTextInput, showDatePickerPopup, validateTextInput]);
+  const onInputClick = React.useCallback(() => {
+    // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior
+    const openOnClick = props.openOnClick || !props.disableAutoFocus;
+    if (openOnClick && !isCalendarShown && !props.disabled) {
+      showDatePickerPopup();
+      return;
+    }
+    if (props.allowTextInput) {
+      dismissDatePickerPopup();
+    }
+  }, [dismissDatePickerPopup, isCalendarShown, props.allowTextInput, props.disabled, props.disableAutoFocus, props.openOnClick, showDatePickerPopup]);
+  const onIconClick = ev => {
+    ev.stopPropagation();
+    if (!isCalendarShown && !props.disabled) {
+      showDatePickerPopup();
+    } else if (props.allowTextInput) {
+      dismissDatePickerPopup();
+    }
+  };
+  const inputId = props.id && props.id !== id ? props.id : id + '-label';
+  const inputAppearance = underlined ? 'underline' : borderless ? 'filled-lighter' : 'outline';
+  const onPopoverOpenChange = React.useCallback((ev, data) => {
+    if (!data.open) {
+      calendarDismissed();
+    }
+  }, [calendarDismissed]);
+  const root = getNativeElementProps('div', {
+    ref,
+    ...props
+  });
+  const inputRef = React.useRef(null);
+  const inputShorthand = resolveShorthand(props.input, {
+    required: true,
+    defaultProps: {
+      appearance: inputAppearance,
+      'aria-controls': isCalendarShown ? calloutId : undefined,
+      'aria-expanded': isCalendarShown,
+      'aria-haspopup': 'dialog',
+      'aria-label': props['aria-label'],
+      contentAfter: /*#__PURE__*/React.createElement(CalendarMonthRegular, {
+        onClick: onIconClick
+      }),
+      disabled,
+      id: inputId,
+      placeholder,
+      readOnly: !allowTextInput,
+      required: isRequired,
+      role: 'combobox',
+      tabIndex,
+      root: {
+        ref: inputRef
+      }
+    }
+  });
+  inputShorthand.onBlur = onInputBlur;
+  inputShorthand.onClick = onInputClick;
+  inputShorthand.onFocus = onInputFocus;
+  inputShorthand.onKeyDown = onInputKeyDown;
+  inputShorthand.onChange = mergeCallbacks(onInputChange, (_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.onChange);
+  inputShorthand.value = formattedDate;
+  const fieldShorthand = resolveShorthand(props.field, {
+    defaultProps: {
+      label,
+      required: isRequired,
+      validationMessage: errorMessage !== null && errorMessage !== void 0 ? errorMessage : statusMessage,
+      validationState: errorMessage ? 'error' : undefined
+    },
+    required: true
+  });
+  const wrapperShorthand = resolveShorthand(props.wrapper, {
+    defaultProps: {
+      'aria-owns': isCalendarShown ? calloutId : undefined
+    },
+    required: true
+  });
+  const positioningRef = React.useRef(null);
+  const popoverShorthand = resolveShorthand(props.popover, {
+    defaultProps: {
+      onOpenChange: onPopoverOpenChange,
+      open: isCalendarShown,
+      positioning: {
+        align: 'start',
+        position: 'below',
+        positioningRef
+      },
+      trapFocus: true
+    },
+    required: true
+  });
+  const popoverSurfaceShorthand = resolveShorthand(props.popoverSurface, {
+    defaultProps: {
+      'aria-label': 'Calendar',
+      id: calloutId,
+      role: 'dialog'
+    },
+    required: true
+  });
+  const calendarShorthand = resolveShorthand(props.calendar, {
+    required: true,
+    defaultProps: {
+      allFocusable,
+      componentRef: calendar,
+      dateTimeFormatter,
+      firstDayOfWeek,
+      firstWeekOfYear,
+      highlightCurrentMonth,
+      highlightSelectedMonth,
+      isMonthPickerVisible,
+      maxDate,
+      minDate,
+      onDismiss: calendarDismissed,
+      showCloseButton,
+      showGoToToday,
+      showMonthPickerAsOverlay,
+      showWeekNumbers,
+      strings,
+      today,
+      value: selectedDate || initialPickerDate
+    }
+  });
+  const state = {
+    disabled: !!disabled,
+    isDatePickerShown: isCalendarShown,
+    // Slots definition
+    components: {
+      root: 'div',
+      field: Field,
+      input: Input,
+      wrapper: 'div',
+      popover: Popover,
+      popoverSurface: PopoverSurface,
+      calendar: Calendar
+    },
+    calendar: calendarShorthand,
+    input: inputShorthand,
+    field: fieldShorthand,
+    popover: popoverShorthand,
+    popoverSurface: popoverSurfaceShorthand,
+    root,
+    wrapper: wrapperShorthand
+  };
+  state.calendar.onSelectDate = mergeCallbacks(state.calendar.onSelectDate, calendarDismissed);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      var _positioningRef_current;
+      (_positioningRef_current = positioningRef.current) === null || _positioningRef_current === void 0 ? void 0 : _positioningRef_current.setTarget(inputRef.current);
+    }
+  }, [inputRef, positioningRef]);
+  return state;
+};
+//# sourceMappingURL=useDatePicker.js.map

package/lib/components/DatePicker/useDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ArrowDown","Enter","Escape","CalendarMonthRegular","Input","Field","getNativeElementProps","mergeCallbacks","resolveShorthand","useControllableState","useId","compareDatePart","getDatePartHashValue","DayOfWeek","FirstWeekOfYear","Calendar","defaultDatePickerStrings","Popover","PopoverSurface","isDateOutOfBounds","date","minDate","maxDate","useFocusLogic","inputRef","useRef","preventFocusOpeningPicker","focus","_inputRef_current","_inputRef_current_focus","current","call","preventNextFocusOpeningPicker","useCalendarVisibility","allowTextInput","onAfterMenuDismiss","isCalendarShown","setIsCalendarShown","useState","isMounted","useEffect","useSelectedDate","formatDate","onSelectDate","value","selectedDate","setSelectedDateState","initialState","undefined","state","formattedDate","setFormattedDate","setSelectedDate","newDate","useErrorMessage","isRequired","parseDateFromString","strings","inputValue","errorMessage","setErrorMessage","statusMessage","setStatusMessage","validateTextInput","isNaN","getTime","selectedText","statusText","isResetStatusMessage","replace","invalidInputErrorMessage","isOutOfBoundsErrorMessage","isRequiredErrorMessage","minDatePartHashValue","maxDatePartHashValue","selectedDatePartHashValue","defaultFormatDate","toDateString","defaultParseDateFromString","dateStr","Date","parse","useDatePicker_unstable","props","ref","_props_input","allFocusable","borderless","dateTimeFormatter","disabled","disableAutoFocus","firstDayOfWeek","Sunday","firstWeekOfYear","FirstDay","highlightCurrentMonth","highlightSelectedMonth","initialPickerDate","isMonthPickerVisible","label","onUserSelectDate","placeholder","showCloseButton","showGoToToday","showMonthPickerAsOverlay","showWeekNumbers","tabIndex","today","underlined","id","calloutId","calendar","_","dismissDatePickerPopup","useCallback","newlySelectedDate","showDatePickerPopup","calendarDismissed","handleEscKey","ev","stopPropagation","useImperativeHandle","componentRef","reset","onInputFocus","onInputBlur","onInputChange","data","newValue","onInputKeyDown","key","preventDefault","altKey","onInputClick","openOnClick","onIconClick","inputId","inputAppearance","onPopoverOpenChange","open","root","inputShorthand","input","required","defaultProps","appearance","contentAfter","createElement","onClick","readOnly","role","onBlur","onFocus","onKeyDown","onChange","fieldShorthand","field","validationMessage","validationState","wrapperShorthand","wrapper","positioningRef","popoverShorthand","popover","onOpenChange","positioning","align","position","trapFocus","popoverSurfaceShorthand","popoverSurface","calendarShorthand","onDismiss","isDatePickerShown","components","_positioningRef_current","setTarget"],"sources":["../../../src/components/DatePicker/useDatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowDown, Enter, Escape } from '@fluentui/keyboard-keys';\nimport { CalendarMonthRegular } from '@fluentui/react-icons';\nimport { Input } from '@fluentui/react-input';\nimport { Field } from '@fluentui/react-field';\nimport {\n  getNativeElementProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useId,\n} from '@fluentui/react-utilities';\nimport { compareDatePart, getDatePartHashValue, DayOfWeek, FirstWeekOfYear } from '../../utils';\nimport { Calendar } from '../Calendar/Calendar';\nimport { defaultDatePickerStrings } from './defaults';\nimport { OnOpenChangeData, OpenPopoverEvents, Popover } from '@fluentui/react-popover';\nimport { PopoverSurface } from '@fluentui/react-popover';\nimport { PositioningImperativeRef } from '@fluentui/react-positioning';\nimport type { PopoverProps } from '@fluentui/react-popover';\nimport type { InputProps, InputOnChangeData } from '@fluentui/react-input';\nimport type { CalendarProps, ICalendar } from '../Calendar/Calendar.types';\nimport type { DatePickerProps, DatePickerState } from './DatePicker.types';\n\nfunction isDateOutOfBounds(date: Date, minDate?: Date, maxDate?: Date): boolean {\n  return (!!minDate && compareDatePart(minDate!, date) > 0) || (!!maxDate && compareDatePart(maxDate!, date) < 0);\n}\n\nfunction useFocusLogic() {\n  const inputRef = React.useRef<{ focus: () => void }>(null);\n  const preventFocusOpeningPicker = React.useRef(false);\n\n  const focus = () => {\n    inputRef.current?.focus?.();\n  };\n\n  const preventNextFocusOpeningPicker = () => {\n    preventFocusOpeningPicker.current = true;\n  };\n\n  return [focus, inputRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker] as const;\n}\n\nfunction useCalendarVisibility({ allowTextInput, onAfterMenuDismiss }: DatePickerProps, focus: () => void) {\n  const [isCalendarShown, setIsCalendarShown] = React.useState(false);\n  const isMounted = React.useRef(false);\n\n  React.useEffect(\n    () => {\n      if (isMounted.current && !isCalendarShown) {\n        // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss\n        onAfterMenuDismiss?.();\n      }\n      isMounted.current = true;\n    },\n    // Should only run on allowTextInput or isCalendarShown change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [allowTextInput, isCalendarShown],\n  );\n\n  return [isCalendarShown, setIsCalendarShown] as const;\n}\n\nfunction useSelectedDate({ formatDate, onSelectDate, value }: DatePickerProps) {\n  const [selectedDate, setSelectedDateState] = useControllableState({\n    initialState: undefined,\n    state: value,\n  });\n  const [formattedDate, setFormattedDate] = React.useState(() => (value && formatDate ? formatDate(value) : ''));\n\n  const setSelectedDate = (newDate: Date | undefined) => {\n    if (\n      (selectedDate === undefined && newDate !== undefined) ||\n      (selectedDate !== undefined && newDate === undefined) ||\n      (newDate && selectedDate && (newDate > selectedDate || newDate < selectedDate))\n    ) {\n      onSelectDate?.(newDate);\n    }\n\n    setSelectedDateState(newDate);\n    setFormattedDate(newDate && formatDate ? formatDate(newDate) : '');\n  };\n\n  React.useEffect(() => {\n    setFormattedDate(value && formatDate ? formatDate(value) : '');\n  }, [formatDate, value]);\n\n  return [selectedDate, formattedDate, setSelectedDate, setFormattedDate] as const;\n}\n\nfunction useErrorMessage(\n  {\n    allowTextInput,\n    formatDate,\n    isRequired,\n    maxDate,\n    minDate,\n    onSelectDate,\n    parseDateFromString,\n    strings,\n  }: DatePickerProps,\n  selectedDate: Date | undefined,\n  setSelectedDate: (date: Date | undefined) => void,\n  inputValue: string,\n  isCalendarShown: boolean,\n) {\n  const [errorMessage, setErrorMessage] = React.useState<string | undefined>();\n  const [statusMessage, setStatusMessage] = React.useState<string | undefined>();\n\n  const validateTextInput = (date: Date | null = null): void => {\n    if (allowTextInput) {\n      if (inputValue || date) {\n        // Don't parse if the selected date has the same formatted string as what we're about to parse.\n        // The formatted string might be ambiguous (ex: \"1/2/3\" or \"New Year Eve\") and the parser might\n        // not be able to come up with the exact same date.\n        if (selectedDate && !errorMessage && formatDate && formatDate(date ?? selectedDate) === inputValue) {\n          return;\n        }\n        date = date || parseDateFromString!(inputValue);\n\n        // Check if date is null, or date is Invalid Date\n        if (!date || isNaN(date.getTime())) {\n          // Reset invalid input field, if formatting is available\n          setSelectedDate(selectedDate);\n          // default the newer isResetStatusMessage string to invalidInputErrorMessage for legacy support\n          const selectedText = formatDate ? formatDate(selectedDate) : '';\n          const statusText = strings!.isResetStatusMessage\n            ? strings!.isResetStatusMessage.replace('{0}', inputValue).replace('{1}', selectedText)\n            : strings!.invalidInputErrorMessage || '';\n          setStatusMessage(statusText);\n        } else {\n          // Check against optional date boundaries\n          if (isDateOutOfBounds(date, minDate, maxDate)) {\n            setErrorMessage(strings!.isOutOfBoundsErrorMessage || ' ');\n          } else {\n            setSelectedDate(date);\n            setErrorMessage(undefined);\n            setStatusMessage(undefined);\n          }\n        }\n      } else {\n        // Only show error for empty inputValue if it is a required field\n        setErrorMessage(isRequired ? strings!.isRequiredErrorMessage || ' ' : undefined);\n\n        // If no input date string or input date string is invalid\n        // date variable will be null, callback should expect null value for this case\n        onSelectDate?.(date);\n      }\n    } else if (isRequired && !inputValue) {\n      // Check when DatePicker is a required field but has NO input value\n      setErrorMessage(strings!.isRequiredErrorMessage || ' ');\n    } else {\n      // Cleanup the error message and status message\n      setErrorMessage(undefined);\n      setStatusMessage(undefined);\n    }\n  };\n\n  const minDatePartHashValue = minDate && getDatePartHashValue(minDate);\n  const maxDatePartHashValue = maxDate && getDatePartHashValue(maxDate);\n  const selectedDatePartHashValue = selectedDate && getDatePartHashValue(selectedDate);\n  React.useEffect(() => {\n    if (isRequired && !selectedDate) {\n      setErrorMessage(strings!.isRequiredErrorMessage || ' ');\n    } else if (selectedDate && isDateOutOfBounds(selectedDate, minDate, maxDate)) {\n      setErrorMessage(strings!.isOutOfBoundsErrorMessage || ' ');\n    } else {\n      setErrorMessage(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    // We don't want to compare the date itself, since two instances of date at the same time are not equal\n    minDatePartHashValue,\n    maxDatePartHashValue,\n    selectedDatePartHashValue,\n    isRequired,\n  ]);\n\n  return [\n    isCalendarShown ? undefined : errorMessage,\n    validateTextInput,\n    setErrorMessage,\n    isCalendarShown ? undefined : statusMessage,\n    setStatusMessage,\n  ] as const;\n}\n\nconst defaultFormatDate = (date?: Date) => (date ? date.toDateString() : '');\nconst defaultParseDateFromString = (dateStr: string) => {\n  const date = Date.parse(dateStr);\n  return date ? new Date(date) : null;\n};\n\n/**\n * Create the state required to render DatePicker.\n *\n * The returned state can be modified with hooks such as useDatePickerStyles_unstable,\n * before being passed to renderDatePicker_unstable.\n *\n * @param props - props from this instance of DatePicker\n * @param ref - reference to root HTMLElement of DatePicker\n */\nexport const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref<HTMLElement>): DatePickerState => {\n  const {\n    allowTextInput = false,\n    allFocusable = false,\n    borderless = false,\n    dateTimeFormatter,\n    disabled,\n    disableAutoFocus = true,\n    firstDayOfWeek = DayOfWeek.Sunday,\n    firstWeekOfYear = FirstWeekOfYear.FirstDay,\n    formatDate = defaultFormatDate,\n    highlightCurrentMonth = false,\n    highlightSelectedMonth = false,\n    initialPickerDate = new Date(),\n    isMonthPickerVisible = true,\n    isRequired = false,\n    label,\n    maxDate,\n    minDate,\n    onAfterMenuDismiss,\n    onSelectDate: onUserSelectDate,\n    parseDateFromString = defaultParseDateFromString,\n    placeholder,\n    showCloseButton = false,\n    showGoToToday = true,\n    showMonthPickerAsOverlay = false,\n    showWeekNumbers = false,\n    strings = defaultDatePickerStrings,\n    tabIndex,\n    today,\n    underlined = false,\n    value,\n  } = props;\n\n  const id = useId('DatePicker', props.id);\n  const calloutId = useId('DatePicker-Callout');\n\n  const calendar = React.useRef<ICalendar>(null);\n\n  const [focus, _, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic();\n  const [isCalendarShown, setIsCalendarShown] = useCalendarVisibility({ allowTextInput, onAfterMenuDismiss }, focus);\n  const [selectedDate, formattedDate, setSelectedDate, setFormattedDate] = useSelectedDate({\n    formatDate,\n    onSelectDate: onUserSelectDate,\n    value,\n  });\n  const [errorMessage, validateTextInput, setErrorMessage, statusMessage, setStatusMessage] = useErrorMessage(\n    {\n      allowTextInput,\n      formatDate,\n      isRequired,\n      maxDate,\n      minDate,\n      onSelectDate: onUserSelectDate,\n      parseDateFromString,\n      strings,\n    },\n    selectedDate,\n    setSelectedDate,\n    formattedDate,\n    isCalendarShown,\n  );\n\n  const dismissDatePickerPopup = React.useCallback(\n    (newlySelectedDate?: Date): void => {\n      if (isCalendarShown) {\n        setIsCalendarShown(false);\n\n        validateTextInput(newlySelectedDate);\n        if (!allowTextInput && newlySelectedDate) {\n          setSelectedDate(newlySelectedDate);\n        }\n      }\n    },\n    [allowTextInput, isCalendarShown, setIsCalendarShown, setSelectedDate, validateTextInput],\n  );\n\n  const showDatePickerPopup = React.useCallback((): void => {\n    if (!isCalendarShown) {\n      preventNextFocusOpeningPicker();\n      setIsCalendarShown(true);\n    }\n  }, [isCalendarShown, preventNextFocusOpeningPicker, setIsCalendarShown]);\n\n  /**\n   * Callback for closing the calendar callout\n   */\n  const calendarDismissed = React.useCallback(\n    (newlySelectedDate?: Date): void => {\n      preventNextFocusOpeningPicker();\n      dismissDatePickerPopup(newlySelectedDate);\n      // don't need to focus the text box, if necessary the focusTrapZone will do it\n    },\n    [dismissDatePickerPopup, preventNextFocusOpeningPicker],\n  );\n\n  const handleEscKey = React.useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>): void => {\n      if (isCalendarShown) {\n        ev.stopPropagation();\n        calendarDismissed();\n      }\n    },\n    [calendarDismissed, isCalendarShown],\n  );\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus,\n      reset() {\n        setIsCalendarShown(false);\n        setSelectedDate(undefined);\n        setErrorMessage(undefined);\n        setStatusMessage(undefined);\n      },\n      showDatePickerPopup,\n    }),\n    [focus, setErrorMessage, setIsCalendarShown, setSelectedDate, setStatusMessage, showDatePickerPopup],\n  );\n\n  const onInputFocus = React.useCallback((): void => {\n    if (disableAutoFocus) {\n      return;\n    }\n\n    if (!allowTextInput) {\n      if (!preventFocusOpeningPicker.current) {\n        showDatePickerPopup();\n      }\n      preventFocusOpeningPicker.current = false;\n    }\n  }, [allowTextInput, disableAutoFocus, preventFocusOpeningPicker, showDatePickerPopup]);\n\n  const onInputBlur = React.useCallback((): void => {\n    validateTextInput();\n  }, [validateTextInput]);\n\n  const onInputChange = React.useCallback(\n    (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, data: InputOnChangeData): void => {\n      const { value: newValue } = data;\n\n      if (allowTextInput) {\n        if (isCalendarShown) {\n          dismissDatePickerPopup();\n        }\n\n        setFormattedDate(newValue);\n      }\n    },\n    [allowTextInput, dismissDatePickerPopup, isCalendarShown, setFormattedDate],\n  );\n\n  const onInputKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>): void => {\n      switch (ev.key) {\n        case Enter:\n          ev.preventDefault();\n          ev.stopPropagation();\n          if (!isCalendarShown) {\n            validateTextInput();\n            showDatePickerPopup();\n          } else {\n            // When DatePicker allows input date string directly,\n            // it is expected to hit another enter to close the popup\n            if (props.allowTextInput) {\n              dismissDatePickerPopup();\n            }\n          }\n          break;\n\n        case Escape:\n          handleEscKey(ev);\n          break;\n\n        case ArrowDown:\n          if (ev.altKey && !isCalendarShown) {\n            showDatePickerPopup();\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [\n      dismissDatePickerPopup,\n      handleEscKey,\n      isCalendarShown,\n      props.allowTextInput,\n      showDatePickerPopup,\n      validateTextInput,\n    ],\n  );\n\n  const onInputClick = React.useCallback((): void => {\n    // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior\n    const openOnClick = props.openOnClick || !props.disableAutoFocus;\n    if (openOnClick && !isCalendarShown && !props.disabled) {\n      showDatePickerPopup();\n      return;\n    }\n    if (props.allowTextInput) {\n      dismissDatePickerPopup();\n    }\n  }, [\n    dismissDatePickerPopup,\n    isCalendarShown,\n    props.allowTextInput,\n    props.disabled,\n    props.disableAutoFocus,\n    props.openOnClick,\n    showDatePickerPopup,\n  ]);\n\n  const onIconClick = (ev: React.MouseEvent<HTMLElement>): void => {\n    ev.stopPropagation();\n    if (!isCalendarShown && !props.disabled) {\n      showDatePickerPopup();\n    } else if (props.allowTextInput) {\n      dismissDatePickerPopup();\n    }\n  };\n\n  const inputId = props.id && props.id !== id ? props.id : id + '-label';\n\n  const inputAppearance: InputProps['appearance'] = underlined\n    ? 'underline'\n    : borderless\n    ? 'filled-lighter'\n    : 'outline';\n\n  const onPopoverOpenChange = React.useCallback(\n    (ev: OpenPopoverEvents, data: OnOpenChangeData) => {\n      if (!data.open) {\n        calendarDismissed();\n      }\n    },\n    [calendarDismissed],\n  );\n\n  const root = getNativeElementProps('div', {\n    ref,\n    ...props,\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const inputShorthand = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      appearance: inputAppearance,\n      'aria-controls': isCalendarShown ? calloutId : undefined,\n      'aria-expanded': isCalendarShown,\n      'aria-haspopup': 'dialog',\n      'aria-label': props['aria-label'],\n      contentAfter: <CalendarMonthRegular onClick={onIconClick as unknown as React.MouseEventHandler<SVGElement>} />,\n      disabled,\n      id: inputId,\n      placeholder,\n      readOnly: !allowTextInput,\n      required: isRequired,\n      role: 'combobox',\n      tabIndex,\n      root: {\n        ref: inputRef,\n      },\n    },\n  });\n  inputShorthand.onBlur = onInputBlur;\n  inputShorthand.onClick = onInputClick;\n  inputShorthand.onFocus = onInputFocus;\n  inputShorthand.onKeyDown = onInputKeyDown;\n  inputShorthand.onChange = mergeCallbacks(onInputChange, props.input?.onChange);\n  inputShorthand.value = formattedDate;\n\n  const fieldShorthand = resolveShorthand(props.field, {\n    defaultProps: {\n      label,\n      required: isRequired,\n      validationMessage: errorMessage ?? statusMessage,\n      validationState: errorMessage ? 'error' : undefined,\n    },\n    required: true,\n  });\n\n  const wrapperShorthand = resolveShorthand(props.wrapper, {\n    defaultProps: {\n      'aria-owns': isCalendarShown ? calloutId : undefined,\n    },\n    required: true,\n  });\n\n  const positioningRef = React.useRef<PositioningImperativeRef>(null);\n  const popoverShorthand = resolveShorthand(props.popover, {\n    defaultProps: {\n      onOpenChange: onPopoverOpenChange,\n      open: isCalendarShown,\n      positioning: { align: 'start', position: 'below', positioningRef },\n      trapFocus: true,\n    },\n    required: true,\n  });\n\n  const popoverSurfaceShorthand = resolveShorthand(props.popoverSurface, {\n    defaultProps: {\n      'aria-label': 'Calendar',\n      id: calloutId,\n      role: 'dialog',\n    },\n    required: true,\n  });\n\n  const calendarShorthand = resolveShorthand(props.calendar, {\n    required: true,\n    defaultProps: {\n      allFocusable,\n      componentRef: calendar,\n      dateTimeFormatter,\n      firstDayOfWeek,\n      firstWeekOfYear,\n      highlightCurrentMonth,\n      highlightSelectedMonth,\n      isMonthPickerVisible,\n      maxDate,\n      minDate,\n      onDismiss: calendarDismissed,\n      showCloseButton,\n      showGoToToday,\n      showMonthPickerAsOverlay,\n      showWeekNumbers,\n      strings,\n      today,\n      value: selectedDate || initialPickerDate,\n    },\n  });\n\n  const state: DatePickerState = {\n    disabled: !!disabled,\n    isDatePickerShown: isCalendarShown,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      field: Field,\n      input: Input,\n      wrapper: 'div',\n      popover: Popover as React.FC<Partial<PopoverProps>>,\n      popoverSurface: PopoverSurface,\n      calendar: Calendar as React.FC<Partial<CalendarProps>>,\n    },\n\n    calendar: calendarShorthand,\n    input: inputShorthand,\n    field: fieldShorthand,\n    popover: popoverShorthand,\n    popoverSurface: popoverSurfaceShorthand,\n    root,\n    wrapper: wrapperShorthand,\n  };\n\n  state.calendar.onSelectDate = mergeCallbacks(state.calendar.onSelectDate, calendarDismissed);\n\n  React.useEffect(() => {\n    if (inputRef.current) {\n      positioningRef.current?.setTarget(inputRef.current);\n    }\n  }, [inputRef, positioningRef]);\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/DatePicker/useDatePickerStyles.js

@@ -0,0 +1,62 @@
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const datePickerClassNames = {
+  root: 'fui-DatePicker',
+  field: 'fui-DatePicker__field',
+  wrapper: 'fui-DatePicker__wrapper',
+  popover: 'fui-DatePicker__popover',
+  popoverSurface: 'fui-DatePicker__popoverSurface',
+  input: 'fui-DatePicker__input',
+  calendar: 'fui-DatePicker__calendar'
+};
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f1pp30po",
+    Bhrd7zp: "figsok6"
+  },
+  normalize: {
+    E5pizo: "f1couhl3",
+    B7ck84d: "f1ewtqcl",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f11qmguv", "f1tyq0we"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"],
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
+});
+const useTextFieldStyles = /*#__PURE__*/__styles({
+  base: {
+    qhf8xq: "f10pi13n",
+    f6m02n: "f1lzi3di"
+  },
+  disabled: {
+    f6m02n: "f1a7qz7c"
+  }
+}, {
+  d: [".f10pi13n{position:relative;}", ".f1lzi3di input[readonly]{cursor:pointer;}", ".f1a7qz7c input[readonly]{cursor:default;}"]
+});
+/**
+ * Apply styling to the DatePicker slots based on the state
+ */
+export const useDatePickerStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const textFieldStyles = useTextFieldStyles();
+  const {
+    disabled,
+    isDatePickerShown
+  } = state;
+  state.root.className = mergeClasses(datePickerClassNames.root, rootStyles.base, isDatePickerShown && 'is-open', rootStyles.normalize, state.root.className);
+  state.wrapper.className = mergeClasses(datePickerClassNames.wrapper, state.wrapper.className);
+  state.input.className = mergeClasses(datePickerClassNames.input, textFieldStyles.base, disabled && textFieldStyles.disabled, state.input.className);
+  state.field.className = mergeClasses(datePickerClassNames.field, state.field.className);
+  state.popoverSurface.className = mergeClasses(datePickerClassNames.popoverSurface, state.popoverSurface.className);
+  state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className);
+  return state;
+};
+//# sourceMappingURL=useDatePickerStyles.js.map

package/lib/components/DatePicker/useDatePickerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","datePickerClassNames","root","field","wrapper","popover","popoverSurface","input","calendar","useRootStyles","base","Bahqtrf","Be2twd7","Bhrd7zp","normalize","E5pizo","B7ck84d","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","d","useTextFieldStyles","qhf8xq","f6m02n","disabled","useDatePickerStyles_unstable","state","rootStyles","textFieldStyles","isDatePickerShown","className"],"sources":["../../../src/components/DatePicker/useDatePickerStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DatePickerSlots, DatePickerState } from './DatePicker.types';\n\nexport const datePickerClassNames: SlotClassNames<DatePickerSlots> = {\n  root: 'fui-DatePicker',\n  field: 'fui-DatePicker__field',\n  wrapper: 'fui-DatePicker__wrapper',\n  popover: 'fui-DatePicker__popover',\n  popoverSurface: 'fui-DatePicker__popoverSurface',\n  input: 'fui-DatePicker__input',\n  calendar: 'fui-DatePicker__calendar',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    fontFamily: tokens.fontFamilyBase,\n    // NOTE: Using 20px as we don't have an 18px font size in the ramp\n    fontSize: tokens.fontSizeBase500,\n    fontWeight: tokens.fontWeightRegular,\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n  },\n});\n\nconst useTextFieldStyles = makeStyles({\n  base: {\n    position: 'relative',\n    '& input[readonly]': {\n      cursor: 'pointer',\n    },\n  },\n  disabled: {\n    '& input[readonly]': {\n      cursor: 'default',\n    },\n  },\n});\n\n/**\n * Apply styling to the DatePicker slots based on the state\n */\nexport const useDatePickerStyles_unstable = (state: DatePickerState): DatePickerState => {\n  const rootStyles = useRootStyles();\n  const textFieldStyles = useTextFieldStyles();\n  const { disabled, isDatePickerShown } = state;\n\n  state.root.className = mergeClasses(\n    datePickerClassNames.root,\n    rootStyles.base,\n    isDatePickerShown && 'is-open',\n    rootStyles.normalize,\n    state.root.className,\n  );\n\n  state.wrapper.className = mergeClasses(datePickerClassNames.wrapper, state.wrapper.className);\n\n  state.input.className = mergeClasses(\n    datePickerClassNames.input,\n    textFieldStyles.base,\n    disabled && textFieldStyles.disabled,\n    state.input.className,\n  );\n\n  state.field.className = mergeClasses(datePickerClassNames.field, state.field.className);\n\n  state.popoverSurface.className = mergeClasses(datePickerClassNames.popoverSurface, state.popoverSurface.className);\n\n  state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AACvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAIrD,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;EACNC,KAAA,EAAO;EACPC,OAAA,EAAS;EACTC,OAAA,EAAS;EACTC,cAAA,EAAgB;EAChBC,KAAA,EAAO;EACPC,QAAA,EAAU;AACZ;AAEA,MAAMC,aAAA,gBAAgBX,QAAA;EAAAY,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAatB;AAEA,MAAMC,kBAAA,gBAAqB5B,QAAA;EAAAY,IAAA;IAAAiB,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,EAY3B;AAEA;;;AAGA,OAAO,MAAMK,4BAAA,GAAgCC,KAAA,IAA4C;EACvF,MAAMC,UAAA,GAAavB,aAAA;EACnB,MAAMwB,eAAA,GAAkBP,kBAAA;EACxB,MAAM;IAAEG,QAAA;IAAUK;EAAiB,CAAE,GAAGH,KAAA;EAExCA,KAAA,CAAM7B,IAAI,CAACiC,SAAS,GAAGpC,YAAA,CACrBE,oBAAA,CAAqBC,IAAI,EACzB8B,UAAA,CAAWtB,IAAI,EACfwB,iBAAA,IAAqB,WACrBF,UAAA,CAAWlB,SAAS,EACpBiB,KAAA,CAAM7B,IAAI,CAACiC,SAAS;EAGtBJ,KAAA,CAAM3B,OAAO,CAAC+B,SAAS,GAAGpC,YAAA,CAAaE,oBAAA,CAAqBG,OAAO,EAAE2B,KAAA,CAAM3B,OAAO,CAAC+B,SAAS;EAE5FJ,KAAA,CAAMxB,KAAK,CAAC4B,SAAS,GAAGpC,YAAA,CACtBE,oBAAA,CAAqBM,KAAK,EAC1B0B,eAAA,CAAgBvB,IAAI,EACpBmB,QAAA,IAAYI,eAAA,CAAgBJ,QAAQ,EACpCE,KAAA,CAAMxB,KAAK,CAAC4B,SAAS;EAGvBJ,KAAA,CAAM5B,KAAK,CAACgC,SAAS,GAAGpC,YAAA,CAAaE,oBAAA,CAAqBE,KAAK,EAAE4B,KAAA,CAAM5B,KAAK,CAACgC,SAAS;EAEtFJ,KAAA,CAAMzB,cAAc,CAAC6B,SAAS,GAAGpC,YAAA,CAAaE,oBAAA,CAAqBK,cAAc,EAAEyB,KAAA,CAAMzB,cAAc,CAAC6B,SAAS;EAEjHJ,KAAA,CAAMvB,QAAQ,CAAC2B,SAAS,GAAGpC,YAAA,CAAaE,oBAAA,CAAqBO,QAAQ,EAAEuB,KAAA,CAAMvB,QAAQ,CAAC2B,SAAS;EAE/F,OAAOJ,KAAA;AACT"}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { AnimationDirection, defaultCalendarStrings } from './Calendar';
+export { DatePicker, datePickerClassNames, defaultDatePickerStrings, renderDatePicker_unstable, useDatePicker_unstable, useDatePickerStyles_unstable } from './DatePicker';
+export { DAYS_IN_WEEK, DateRangeType, DayOfWeek, FirstWeekOfYear, MonthOfYear, TimeConstants, addDays, addMonths, addWeeks, addYears, compareDatePart, compareDates, getDatePartHashValue, getDateRangeArray, getEndDateOfWeek, getMonthEnd, getMonthStart, getStartDateOfWeek, getWeekNumber, getWeekNumbersInMonth, getYearEnd, getYearStart, isInDateRangeArray, setMonth } from './utils';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AnimationDirection","defaultCalendarStrings","DatePicker","datePickerClassNames","defaultDatePickerStrings","renderDatePicker_unstable","useDatePicker_unstable","useDatePickerStyles_unstable","DAYS_IN_WEEK","DateRangeType","DayOfWeek","FirstWeekOfYear","MonthOfYear","TimeConstants","addDays","addMonths","addWeeks","addYears","compareDatePart","compareDates","getDatePartHashValue","getDateRangeArray","getEndDateOfWeek","getMonthEnd","getMonthStart","getStartDateOfWeek","getWeekNumber","getWeekNumbersInMonth","getYearEnd","getYearStart","isInDateRangeArray","setMonth"],"sources":["../src/index.ts"],"sourcesContent":["export { AnimationDirection, defaultCalendarStrings } from './Calendar';\nexport type { CalendarProps, ICalendar } from './Calendar';\n\nexport type { CalendarDayProps, ICalendarDay } from './CalendarDay';\n\nexport type { CalendarMonthProps, ICalendarMonth } from './CalendarMonth';\n\nexport {\n  DatePicker,\n  datePickerClassNames,\n  defaultDatePickerStrings,\n  renderDatePicker_unstable,\n  useDatePicker_unstable,\n  useDatePickerStyles_unstable,\n} from './DatePicker';\nexport type { DatePickerProps, DatePickerStrings, IDatePicker } from './DatePicker';\n\nexport {\n  DAYS_IN_WEEK,\n  DateRangeType,\n  DayOfWeek,\n  FirstWeekOfYear,\n  MonthOfYear,\n  TimeConstants,\n  addDays,\n  addMonths,\n  addWeeks,\n  addYears,\n  compareDatePart,\n  compareDates,\n  getDatePartHashValue,\n  getDateRangeArray,\n  getEndDateOfWeek,\n  getMonthEnd,\n  getMonthStart,\n  getStartDateOfWeek,\n  getWeekNumber,\n  getWeekNumbersInMonth,\n  getYearEnd,\n  getYearStart,\n  isInDateRangeArray,\n  setMonth,\n} from './utils';\nexport type { CalendarStrings, DateFormatting, DateGridStrings } from './utils';\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,sBAAsB,QAAQ;AAO3D,SACEC,UAAU,EACVC,oBAAoB,EACpBC,wBAAwB,EACxBC,yBAAyB,EACzBC,sBAAsB,EACtBC,4BAA4B,QACvB;AAGP,SACEC,YAAY,EACZC,aAAa,EACbC,SAAS,EACTC,eAAe,EACfC,WAAW,EACXC,aAAa,EACbC,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,YAAY,EACZC,oBAAoB,EACpBC,iBAAiB,EACjBC,gBAAgB,EAChBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,QAAQ,QACH"}