@fluentui/react-datepicker-compat 0.0.0-nightly-20230512-0423.1 → 0.1.0

package/lib/components/DatePicker/useDatePicker.js

@@ -0,0 +1,395 @@
+import * as React from 'react';
+import { ArrowDown, Enter, Escape } from '@fluentui/keyboard-keys';
+import { Calendar } from '../Calendar/Calendar';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
+import { compareDatePart, DayOfWeek, FirstWeekOfYear } from '../../utils';
+import { defaultDatePickerStrings } from './defaults';
+import { Input } from '@fluentui/react-input';
+import { mergeCallbacks, resolveShorthand, useControllableState, useEventCallback, useId, useMergedRefs, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
+import { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFocusFinders, 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;
+}
+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 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];
+}
+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;
+};
+/**
+ * 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 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-popoverSurface');
+  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';
+    }
+    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();
+        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 ((openOnClick || !disableAutoFocus) && !open && !props.disabled) {
+      showDatePickerPopup();
+      return;
+    }
+    if (allowTextInput) {
+      dismissDatePickerPopup();
+    }
+  }, [allowTextInput, disableAutoFocus, dismissDatePickerPopup, openOnClick, open, props.disabled, 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: {
+        ref: useMergedRefs(triggerWrapperRef, ref),
+        'aria-owns': popupSurfaceId
+      },
+      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
+  });
+  const {
+    findFirstFocusable
+  } = useFocusFinders();
+  React.useEffect(() => {
+    if (disableAutoFocus) {
+      return;
+    }
+    if (open && popupRef.current) {
+      const firstFocusable = findFirstFocusable(popupRef.current);
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }
+  }, [disableAutoFocus, findFirstFocusable, open, popupRef]);
+  const popupOnClick = useEventCallback(mergeCallbacks(ev => {
+    var _rootRef_current;
+    (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.focus();
+  }, popupSurfaceShorthand === null || popupSurfaceShorthand === void 0 ? void 0 : popupSurfaceShorthand.onClick));
+  if (popupSurfaceShorthand) {
+    popupSurfaceShorthand.onClick = popupOnClick;
+  }
+  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
+    }
+  });
+  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;
+  state.calendar.onSelectDate = mergeCallbacks(state.calendar.onSelectDate, calendarDismissed);
+  return state;
+};
+//# sourceMappingURL=useDatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","ArrowDown","Enter","Escape","Calendar","CalendarMonthRegular","compareDatePart","DayOfWeek","FirstWeekOfYear","defaultDatePickerStrings","Input","mergeCallbacks","resolveShorthand","useControllableState","useEventCallback","useId","useMergedRefs","useOnClickOutside","useOnScrollOutside","useFieldContext_unstable","useFieldContext","useFluent_unstable","useFluent","useFocusFinders","useModalAttributes","usePopupPositioning","isDateOutOfBounds","date","minDate","maxDate","useFocusLogic","inputRef","useRef","preventFocusOpeningPicker","focus","_inputRef_current","_inputRef_current_focus","current","call","preventNextFocusOpeningPicker","usePopupVisibility","props","open","setOpen","initialState","defaultState","defaultOpen","state","isMounted","useEffect","_props_onOpenChange","onOpenChange","allowTextInput","useSelectedDate","formatDate","onSelectDate","value","selectedDate","setSelectedDateState","undefined","formattedDate","setFormattedDate","useState","setSelectedDate","newDate","defaultFormatDate","toDateString","defaultParseDateFromString","dateStr","Date","parse","useDatePicker_unstable","ref","allFocusable","borderless","dateTimeFormatter","disableAutoFocus","firstDayOfWeek","Sunday","firstWeekOfYear","FirstDay","highlightCurrentMonth","highlightSelectedMonth","initialPickerDate","inlinePopup","isMonthPickerVisible","onUserSelectDate","openOnClick","onValidationResult","parseDateFromString","showCloseButton","showGoToToday","showMonthPickerAsOverlay","showWeekNumbers","strings","today","underlined","restOfProps","calendar","rootRef","setOpenState","fieldContext","_fieldContext_required","required","popupSurfaceId","validateTextInput","useCallback","error","isNaN","getTime","newState","dismissDatePickerPopup","newlySelectedDate","showDatePickerPopup","calendarDismissed","onInputChange","ev","data","newValue","onInputBlur","onInputKeyDown","key","preventDefault","stopPropagation","altKey","onInputFocus","onInputClick","disabled","onIconClick","inputAppearance","triggerWrapperRef","popupRef","rootShorthand","defaultProps","appearance","contentAfter","createElement","onClick","readOnly","role","root","input","onChange","onBlur","onKeyDown","onFocus","modalAttributes","trapFocus","alwaysFocusable","legacyTrapFocus","popupSurfaceShorthand","popupSurface","id","targetDocument","element","callback","refs","findFirstFocusable","firstFocusable","popupOnClick","_rootRef_current","calendarShorthand","componentRef","onDismiss","useImperativeHandle","reset","components"],"sources":["../../../src/components/DatePicker/useDatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowDown, Enter, Escape } from '@fluentui/keyboard-keys';\nimport { Calendar } from '../Calendar/Calendar';\nimport { CalendarMonthRegular } from '@fluentui/react-icons';\nimport { compareDatePart, DayOfWeek, FirstWeekOfYear } from '../../utils';\nimport { defaultDatePickerStrings } from './defaults';\nimport { Input } from '@fluentui/react-input';\nimport {\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusFinders, useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopupPositioning } from '../../utils/usePopupPositioning';\nimport type { CalendarProps, ICalendar } from '../Calendar/Calendar.types';\nimport type { DatePickerProps, DatePickerState, DatePickerValidationResultData } from './DatePicker.types';\nimport type { InputProps, InputOnChangeData } from '@fluentui/react-input';\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<HTMLInputElement>(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 usePopupVisibility(props: DatePickerProps) {\n  const [open, setOpen] = useControllableState({\n    initialState: false,\n    defaultState: props.defaultOpen,\n    state: props.open,\n  });\n  const isMounted = React.useRef(false);\n\n  React.useEffect(\n    () => {\n      if (isMounted.current && !open) {\n        // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss\n        props.onOpenChange?.(false);\n      }\n      isMounted.current = true;\n    },\n    // Should only run on allowTextInput or open change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.allowTextInput, open],\n  );\n\n  return [open, setOpen] 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\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 Input slot\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    defaultOpen = false,\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    inlinePopup = false,\n    isMonthPickerVisible = true,\n    maxDate,\n    minDate,\n    onOpenChange,\n    onSelectDate: onUserSelectDate,\n    openOnClick = true,\n    onValidationResult,\n    parseDateFromString = defaultParseDateFromString,\n    showCloseButton = false,\n    showGoToToday = true,\n    showMonthPickerAsOverlay = false,\n    showWeekNumbers = false,\n    strings = defaultDatePickerStrings,\n    today,\n    underlined = false,\n    value,\n    ...restOfProps\n  } = props;\n  const calendar = React.useRef<ICalendar>(null);\n  const [focus, rootRef, preventFocusOpeningPicker, preventNextFocusOpeningPicker] = useFocusLogic();\n  const [selectedDate, formattedDate, setSelectedDate, setFormattedDate] = useSelectedDate({\n    formatDate,\n    onSelectDate: onUserSelectDate,\n    value,\n  });\n  const [open, setOpenState] = usePopupVisibility(props);\n  const fieldContext = useFieldContext();\n  const required = fieldContext?.required ?? props.required;\n  const popupSurfaceId = useId('datePicker-popoverSurface');\n\n  const validateTextInput = React.useCallback(\n    (date: Date | null = null): void => {\n      let error: DatePickerValidationResultData['error'] | undefined;\n\n      if (allowTextInput) {\n        if (formattedDate || 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 && formatDate && formatDate(date ?? selectedDate) === formattedDate) {\n            return;\n          }\n          date = date || parseDateFromString!(formattedDate);\n\n          // Check if date is null or date is an invalid date\n          if (!date || isNaN(date.getTime())) {\n            // Reset input if formatting is available\n            setSelectedDate(selectedDate);\n            error = 'invalid-input';\n          } else {\n            if (isDateOutOfBounds(date, minDate, maxDate)) {\n              error = 'out-of-bounds';\n            } else {\n              setSelectedDate(date);\n            }\n          }\n        } else {\n          if (required) {\n            error = 'required-input';\n          }\n\n          onUserSelectDate?.(date);\n        }\n      } else if (required && !formattedDate) {\n        error = 'required-input';\n      }\n\n      onValidationResult?.({ error });\n    },\n    [\n      allowTextInput,\n      formatDate,\n      formattedDate,\n      maxDate,\n      minDate,\n      onUserSelectDate,\n      onValidationResult,\n      parseDateFromString,\n      required,\n      selectedDate,\n      setSelectedDate,\n    ],\n  );\n\n  const setOpen = React.useCallback(\n    (newState: boolean) => {\n      onOpenChange?.(newState);\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  const dismissDatePickerPopup = React.useCallback(\n    (newlySelectedDate?: Date): void => {\n      if (open) {\n        setOpen(false);\n\n        validateTextInput(newlySelectedDate);\n        if (!allowTextInput && newlySelectedDate) {\n          setSelectedDate(newlySelectedDate);\n        }\n      }\n    },\n    [allowTextInput, open, setOpen, setSelectedDate, validateTextInput],\n  );\n\n  const showDatePickerPopup = React.useCallback((): void => {\n    if (!open) {\n      preventNextFocusOpeningPicker();\n      setOpen(true);\n    }\n  }, [open, preventNextFocusOpeningPicker, setOpen]);\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    },\n    [dismissDatePickerPopup, preventNextFocusOpeningPicker],\n  );\n\n  const onInputChange = React.useCallback(\n    (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {\n      const { value: newValue } = data;\n\n      if (allowTextInput) {\n        if (open) {\n          dismissDatePickerPopup();\n        }\n\n        setFormattedDate(newValue);\n      }\n    },\n    [allowTextInput, dismissDatePickerPopup, open, setFormattedDate],\n  );\n\n  const onInputBlur: React.FocusEventHandler<HTMLInputElement> = React.useCallback((): void => {\n    validateTextInput();\n  }, [validateTextInput]);\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 (!open) {\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          ev.stopPropagation();\n          ev.preventDefault();\n          if (open) {\n            calendarDismissed();\n          }\n          break;\n\n        case ArrowDown:\n          ev.preventDefault();\n          if (ev.altKey && !open) {\n            showDatePickerPopup();\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [calendarDismissed, dismissDatePickerPopup, open, props.allowTextInput, showDatePickerPopup, validateTextInput],\n  );\n\n  const onInputFocus: React.FocusEventHandler<HTMLInputElement> = 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 onInputClick: React.MouseEventHandler<HTMLInputElement> = React.useCallback((): void => {\n    // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior\n    if ((openOnClick || !disableAutoFocus) && !open && !props.disabled) {\n      showDatePickerPopup();\n      return;\n    }\n\n    if (allowTextInput) {\n      dismissDatePickerPopup();\n    }\n  }, [\n    allowTextInput,\n    disableAutoFocus,\n    dismissDatePickerPopup,\n    openOnClick,\n    open,\n    props.disabled,\n    showDatePickerPopup,\n  ]);\n\n  const onIconClick = (ev: React.MouseEvent<HTMLElement>): void => {\n    ev.stopPropagation();\n    if (!open && !props.disabled) {\n      showDatePickerPopup();\n    } else if (props.allowTextInput) {\n      dismissDatePickerPopup();\n    }\n  };\n\n  const inputAppearance: InputProps['appearance'] = underlined\n    ? 'underline'\n    : borderless\n    ? 'filled-lighter'\n    : 'outline';\n\n  const [triggerWrapperRef, popupRef] = usePopupPositioning(props);\n  const rootShorthand = resolveShorthand(restOfProps, {\n    required: true,\n    defaultProps: {\n      appearance: inputAppearance,\n      'aria-controls': open ? popupSurfaceId : undefined,\n      'aria-expanded': open,\n      'aria-haspopup': 'dialog',\n      contentAfter: <CalendarMonthRegular onClick={onIconClick as unknown as React.MouseEventHandler<SVGElement>} />,\n      readOnly: !allowTextInput,\n      role: 'combobox',\n      root: {\n        ref: useMergedRefs(triggerWrapperRef, ref),\n        'aria-owns': popupSurfaceId,\n      },\n      input: {\n        ref: rootRef,\n      },\n    },\n  });\n  rootShorthand.onChange = mergeCallbacks(rootShorthand.onChange, onInputChange);\n  rootShorthand.onBlur = mergeCallbacks(rootShorthand.onBlur, onInputBlur);\n  rootShorthand.onKeyDown = mergeCallbacks(rootShorthand.onKeyDown, onInputKeyDown);\n  rootShorthand.onFocus = mergeCallbacks(rootShorthand.onFocus, onInputFocus);\n  rootShorthand.onClick = mergeCallbacks(rootShorthand.onClick, onInputClick);\n\n  const { modalAttributes } = useModalAttributes({ trapFocus: true, alwaysFocusable: true, legacyTrapFocus: false });\n  const popupSurfaceShorthand = open\n    ? resolveShorthand(props.popupSurface, {\n        required: true,\n        defaultProps: {\n          'aria-label': 'Calendar',\n          'aria-modal': true,\n          id: popupSurfaceId,\n          role: 'dialog',\n          ref: popupRef,\n          ...modalAttributes,\n        },\n      })\n    : undefined;\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    element: targetDocument,\n    callback: ev => dismissDatePickerPopup(),\n    refs: [triggerWrapperRef, popupRef],\n    disabled: !open,\n  });\n\n  useOnScrollOutside({\n    element: targetDocument,\n    callback: ev => dismissDatePickerPopup(),\n    refs: [triggerWrapperRef, popupRef],\n    disabled: !open,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n  React.useEffect(() => {\n    if (disableAutoFocus) {\n      return;\n    }\n\n    if (open && popupRef.current) {\n      const firstFocusable = findFirstFocusable(popupRef.current);\n      firstFocusable?.focus();\n    }\n  }, [disableAutoFocus, findFirstFocusable, open, popupRef]);\n\n  const popupOnClick = useEventCallback(\n    mergeCallbacks((ev: React.MouseEvent<HTMLDivElement>) => {\n      rootRef.current?.focus();\n    }, popupSurfaceShorthand?.onClick),\n  );\n\n  if (popupSurfaceShorthand) {\n    popupSurfaceShorthand.onClick = popupOnClick;\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  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus,\n      reset() {\n        setOpen(false);\n        setSelectedDate(undefined);\n      },\n      showDatePickerPopup,\n    }),\n    [focus, setOpen, setSelectedDate, showDatePickerPopup],\n  );\n\n  const state: DatePickerState = {\n    disabled: !!props.disabled,\n    inlinePopup,\n\n    components: {\n      root: Input,\n      calendar: Calendar as React.FC<Partial<CalendarProps>>,\n      popupSurface: 'div',\n    },\n\n    calendar: calendarShorthand,\n    root: rootShorthand,\n    popupSurface: popupSurfaceShorthand,\n  };\n\n  state.root.value = formattedDate;\n  state.calendar.onSelectDate = mergeCallbacks(state.calendar.onSelectDate, calendarDismissed);\n\n  return state;\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const datePickerClassNames = {
+  root: 'fui-DatePicker',
+  calendar: 'fui-DatePicker__calendar',
+  popupSurface: 'fui-DatePicker__popupSurface'
+};
+const useStyles = /*#__PURE__*/__styles({
+  base: {
+    qhf8xq: "f10pi13n",
+    Bceei9c: "f1k6fduh",
+    xfaavh: "faxec97"
+  },
+  disabled: {
+    Bceei9c: "f158kwzp",
+    xfaavh: "f19qwlmg"
+  }
+}, {
+  d: [".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".faxec97 input{cursor:pointer;}", ".f158kwzp{cursor:default;}", ".f19qwlmg input{cursor:default;}"]
+});
+const usePopupSurfaceClassName = /*#__PURE__*/__resetStyles("r1ytv1z8", null, [".r1ytv1z8{background-color:var(--colorNeutralBackground1);box-shadow:var(--shadow16);border-radius:var(--borderRadiusMedium);border-width:1px;border-style:solid;border-color:var(--colorTransparentStroke);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+/**
+ * Apply styling to the DatePicker slots based on the state
+ */
+export const useDatePickerStyles_unstable = state => {
+  const styles = useStyles();
+  const popupSurfaceClassName = usePopupSurfaceClassName();
+  const {
+    disabled
+  } = state;
+  state.root.className = mergeClasses(datePickerClassNames.root, styles.base, disabled && styles.disabled, state.root.className);
+  if (state.popupSurface) {
+    state.popupSurface.className = mergeClasses(datePickerClassNames.popupSurface, popupSurfaceClassName, state.popupSurface.className);
+  }
+  state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className);
+  return state;
+};
+//# sourceMappingURL=useDatePickerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","datePickerClassNames","root","calendar","popupSurface","useStyles","base","qhf8xq","Bceei9c","xfaavh","disabled","d","usePopupSurfaceClassName","useDatePickerStyles_unstable","state","styles","popupSurfaceClassName","className"],"sources":["../../../src/components/DatePicker/useDatePickerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\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  calendar: 'fui-DatePicker__calendar',\n  popupSurface: 'fui-DatePicker__popupSurface',\n};\n\nconst useStyles = makeStyles({\n  base: {\n    position: 'relative',\n    cursor: 'pointer',\n    '& input': {\n      cursor: 'pointer',\n    },\n  },\n  disabled: {\n    cursor: 'default',\n    '& input': {\n      cursor: 'default',\n    },\n  },\n});\n\nconst usePopupSurfaceClassName = makeResetStyles({\n  backgroundColor: tokens.colorNeutralBackground1,\n  boxShadow: tokens.shadow16,\n  borderRadius: tokens.borderRadiusMedium,\n  borderWidth: '1px',\n  borderStyle: 'solid',\n  borderColor: tokens.colorTransparentStroke,\n  display: 'inline-flex',\n  color: tokens.colorNeutralForeground1,\n  ...typographyStyles.body1,\n});\n\n/**\n * Apply styling to the DatePicker slots based on the state\n */\nexport const useDatePickerStyles_unstable = (state: DatePickerState): DatePickerState => {\n  const styles = useStyles();\n  const popupSurfaceClassName = usePopupSurfaceClassName();\n  const { disabled } = state;\n\n  state.root.className = mergeClasses(\n    datePickerClassNames.root,\n    styles.base,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.popupSurface) {\n    state.popupSurface.className = mergeClasses(\n      datePickerClassNames.popupSurface,\n      popupSurfaceClassName,\n      state.popupSurface.className,\n    );\n  }\n\n  state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ;AAIzC,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;EACNC,QAAA,EAAU;EACVC,YAAA,EAAc;AAChB;AAEA,MAAMC,SAAA,gBAAYR,QAAA;EAAAS,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,EAclB;AAEA,MAAMC,wBAAA,gBAA2BhB,aAAA,6fAUjC;AAEA;;;AAGA,OAAO,MAAMiB,4BAAA,GAAgCC,KAAA,IAA4C;EACvF,MAAMC,MAAA,GAASV,SAAA;EACf,MAAMW,qBAAA,GAAwBJ,wBAAA;EAC9B,MAAM;IAAEF;EAAQ,CAAE,GAAGI,KAAA;EAErBA,KAAA,CAAMZ,IAAI,CAACe,SAAS,GAAGnB,YAAA,CACrBG,oBAAA,CAAqBC,IAAI,EACzBa,MAAA,CAAOT,IAAI,EACXI,QAAA,IAAYK,MAAA,CAAOL,QAAQ,EAC3BI,KAAA,CAAMZ,IAAI,CAACe,SAAS;EAGtB,IAAIH,KAAA,CAAMV,YAAY,EAAE;IACtBU,KAAA,CAAMV,YAAY,CAACa,SAAS,GAAGnB,YAAA,CAC7BG,oBAAA,CAAqBG,YAAY,EACjCY,qBAAA,EACAF,KAAA,CAAMV,YAAY,CAACa,SAAS;EAEhC;EAEAH,KAAA,CAAMX,QAAQ,CAACc,SAAS,GAAGnB,YAAA,CAAaG,oBAAA,CAAqBE,QAAQ,EAAEW,KAAA,CAAMX,QAAQ,CAACc,SAAS;EAE/F,OAAOH,KAAA;AACT"}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { AnimationDirection } from './Calendar';
+export { DatePicker, datePickerClassNames, defaultDatePickerErrorStrings, 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","DatePicker","datePickerClassNames","defaultDatePickerErrorStrings","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 } 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  defaultDatePickerErrorStrings,\n  defaultDatePickerStrings,\n  renderDatePicker_unstable,\n  useDatePicker_unstable,\n  useDatePickerStyles_unstable,\n} from './DatePicker';\nexport type { DatePickerErrorType, DatePickerProps, DatePickerValidationResultData, 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,QAAQ;AAOnC,SACEC,UAAU,EACVC,oBAAoB,EACpBC,6BAA6B,EAC7BC,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"}

package/lib/utils/animations.js

@@ -0,0 +1,98 @@
+import { shorthands } from '@griffel/react';
+export const EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
+export const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
+export const DURATION_1 = '0.167s';
+export const DURATION_2 = '0.267s';
+export const DURATION_3 = '0.367s';
+export const DURATION_4 = '0.467s';
+export const FADE_IN = {
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+};
+export const FADE_OUT = {
+  from: {
+    opacity: 1
+  },
+  to: {
+    opacity: 0,
+    visibility: 'hidden'
+  }
+};
+export const SLIDE_DOWN_IN20 = {
+  from: {
+    pointerEvents: 'none',
+    transform: 'translate3d(0, -20px, 0)'
+  },
+  to: {
+    pointerEvents: 'auto',
+    transform: 'translate3d(0, 0, 0)'
+  }
+};
+export const SLIDE_LEFT_IN20 = {
+  from: {
+    pointerEvents: 'none',
+    transform: 'translate3d(20px, 0, 0)'
+  },
+  to: {
+    pointerEvents: 'auto',
+    transform: 'translate3d(0, 0, 0)'
+  }
+};
+export const SLIDE_RIGHT_IN20 = {
+  from: {
+    pointerEvents: 'none',
+    transform: 'translate3d(-20px, 0, 0)'
+  },
+  to: {
+    pointerEvents: 'auto',
+    transform: 'translate3d(0, 0, 0)'
+  }
+};
+export const SLIDE_UP_IN20 = {
+  from: {
+    pointerEvents: 'none',
+    transform: 'translate3d(0, 20px, 0)'
+  },
+  to: {
+    pointerEvents: 'auto',
+    transform: 'translate3d(0, 0, 0)'
+  }
+};
+export const SLIDE_DOWN_OUT20 = {
+  from: {
+    transform: 'translate3d(0, 0, 0)'
+  },
+  to: {
+    transform: 'translate3d(0, 20px, 0)'
+  }
+};
+export const SLIDE_UP_OUT20 = {
+  from: {
+    transform: 'translate3d(0, 0, 0)'
+  },
+  to: {
+    transform: 'translate3d(0, -20px, 0)'
+  }
+};
+export const TRANSITION_ROW_DISAPPEARANCE = {
+  '100%': {
+    height: '0px',
+    ... /*#__PURE__*/shorthands.overflow('hidden'),
+    width: '0px'
+  },
+  '99.9%': {
+    height: '28px',
+    ... /*#__PURE__*/shorthands.overflow('visible'),
+    width: '100%'
+  },
+  '0%': {
+    height: '28px',
+    ... /*#__PURE__*/shorthands.overflow('visible'),
+    width: '100%'
+  }
+};
+//# sourceMappingURL=animations.js.map

package/lib/utils/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shorthands","EASING_FUNCTION_1","EASING_FUNCTION_2","DURATION_1","DURATION_2","DURATION_3","DURATION_4","FADE_IN","from","opacity","to","FADE_OUT","visibility","SLIDE_DOWN_IN20","pointerEvents","transform","SLIDE_LEFT_IN20","SLIDE_RIGHT_IN20","SLIDE_UP_IN20","SLIDE_DOWN_OUT20","SLIDE_UP_OUT20","TRANSITION_ROW_DISAPPEARANCE","height","overflow","width"],"sources":["../../src/utils/animations.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\n\nexport const EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';\nexport const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';\nexport const DURATION_1 = '0.167s';\nexport const DURATION_2 = '0.267s';\nexport const DURATION_3 = '0.367s';\nexport const DURATION_4 = '0.467s';\n\nexport const FADE_IN = {\n  from: {\n    opacity: 0,\n  },\n  to: {\n    opacity: 1,\n  },\n};\nexport const FADE_OUT = {\n  from: {\n    opacity: 1,\n  },\n  to: {\n    opacity: 0,\n    visibility: 'hidden' as const,\n  },\n};\nexport const SLIDE_DOWN_IN20 = {\n  from: {\n    pointerEvents: 'none' as const,\n    transform: 'translate3d(0, -20px, 0)',\n  },\n  to: {\n    pointerEvents: 'auto' as const,\n    transform: 'translate3d(0, 0, 0)',\n  },\n};\nexport const SLIDE_LEFT_IN20 = {\n  from: {\n    pointerEvents: 'none' as const,\n    transform: 'translate3d(20px, 0, 0)',\n  },\n  to: {\n    pointerEvents: 'auto' as const,\n    transform: 'translate3d(0, 0, 0)',\n  },\n};\nexport const SLIDE_RIGHT_IN20 = {\n  from: {\n    pointerEvents: 'none' as const,\n    transform: 'translate3d(-20px, 0, 0)',\n  },\n  to: {\n    pointerEvents: 'auto' as const,\n    transform: 'translate3d(0, 0, 0)',\n  },\n};\nexport const SLIDE_UP_IN20 = {\n  from: {\n    pointerEvents: 'none' as const,\n    transform: 'translate3d(0, 20px, 0)',\n  },\n  to: {\n    pointerEvents: 'auto' as const,\n    transform: 'translate3d(0, 0, 0)',\n  },\n};\nexport const SLIDE_DOWN_OUT20 = {\n  from: {\n    transform: 'translate3d(0, 0, 0)',\n  },\n  to: {\n    transform: 'translate3d(0, 20px, 0)',\n  },\n};\nexport const SLIDE_UP_OUT20 = {\n  from: {\n    transform: 'translate3d(0, 0, 0)',\n  },\n  to: {\n    transform: 'translate3d(0, -20px, 0)',\n  },\n};\nexport const TRANSITION_ROW_DISAPPEARANCE = {\n  '100%': {\n    height: '0px',\n    ...shorthands.overflow('hidden'),\n    width: '0px',\n  },\n  '99.9%': {\n    height: '28px',\n    ...shorthands.overflow('visible'),\n    width: '100%',\n  },\n  '0%': {\n    height: '28px',\n    ...shorthands.overflow('visible'),\n    width: '100%',\n  },\n};\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ;AAE3B,OAAO,MAAMC,iBAAA,GAAoB;AACjC,OAAO,MAAMC,iBAAA,GAAoB;AACjC,OAAO,MAAMC,UAAA,GAAa;AAC1B,OAAO,MAAMC,UAAA,GAAa;AAC1B,OAAO,MAAMC,UAAA,GAAa;AAC1B,OAAO,MAAMC,UAAA,GAAa;AAE1B,OAAO,MAAMC,OAAA,GAAU;EACrBC,IAAA,EAAM;IACJC,OAAA,EAAS;EACX;EACAC,EAAA,EAAI;IACFD,OAAA,EAAS;EACX;AACF;AACA,OAAO,MAAME,QAAA,GAAW;EACtBH,IAAA,EAAM;IACJC,OAAA,EAAS;EACX;EACAC,EAAA,EAAI;IACFD,OAAA,EAAS;IACTG,UAAA,EAAY;EACd;AACF;AACA,OAAO,MAAMC,eAAA,GAAkB;EAC7BL,IAAA,EAAM;IACJM,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;EACAL,EAAA,EAAI;IACFI,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;AACF;AACA,OAAO,MAAMC,eAAA,GAAkB;EAC7BR,IAAA,EAAM;IACJM,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;EACAL,EAAA,EAAI;IACFI,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;AACF;AACA,OAAO,MAAME,gBAAA,GAAmB;EAC9BT,IAAA,EAAM;IACJM,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;EACAL,EAAA,EAAI;IACFI,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;AACF;AACA,OAAO,MAAMG,aAAA,GAAgB;EAC3BV,IAAA,EAAM;IACJM,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;EACAL,EAAA,EAAI;IACFI,aAAA,EAAe;IACfC,SAAA,EAAW;EACb;AACF;AACA,OAAO,MAAMI,gBAAA,GAAmB;EAC9BX,IAAA,EAAM;IACJO,SAAA,EAAW;EACb;EACAL,EAAA,EAAI;IACFK,SAAA,EAAW;EACb;AACF;AACA,OAAO,MAAMK,cAAA,GAAiB;EAC5BZ,IAAA,EAAM;IACJO,SAAA,EAAW;EACb;EACAL,EAAA,EAAI;IACFK,SAAA,EAAW;EACb;AACF;AACA,OAAO,MAAMM,4BAAA,GAA+B;EAC1C,QAAQ;IACNC,MAAA,EAAQ;IACR,iBAAGtB,UAAA,CAAWuB,QAAQ,CAAC,SAAS;IAChCC,KAAA,EAAO;EACT;EACA,SAAS;IACPF,MAAA,EAAQ;IACR,iBAAGtB,UAAA,CAAWuB,QAAQ,CAAC,UAAU;IACjCC,KAAA,EAAO;EACT;EACA,MAAM;IACJF,MAAA,EAAQ;IACR,iBAAGtB,UAAA,CAAWuB,QAAQ,CAAC,UAAU;IACjCC,KAAA,EAAO;EACT;AACF"}