@atlaskit/datetime-picker 17.6.5 → 17.7.0

package/dist/es2019/components/date-time-picker-fc.js

@@ -1,7 +1,66 @@
-import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithCondition } from '../internal/ff-component';
-import DateTimePickerNew from './date-time-picker-fc-new';
-import DateTimePickerOld from './date-time-picker-fc-old';
+/* date-time-picker-fc.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./date-time-picker-fc.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+/// <reference types="node" />
+// for typing `process`
+
+import React, { forwardRef, useCallback, useEffect, useReducer, useState } from 'react';
+
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { format, isValid, parseISO } from 'date-fns';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { IconButton } from '@atlaskit/button/new';
+import SelectClearIcon from '@atlaskit/icon/core/cross-circle';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { mergeStyles } from '@atlaskit/select';
+import { formatDateTimeZoneIntoIso } from '../internal';
+import { DateTimePickerContainer } from '../internal/date-time-picker-container';
+import { convertTokens } from '../internal/parse-tokens';
+import DatePicker from './date-picker';
+import TimePicker from './time-picker';
+const packageName = "@atlaskit/datetime-picker";
+const packageVersion = "0.0.0-development";
+const analyticsAttributes = {
+  componentName: 'dateTimePicker',
+  packageName,
+  packageVersion
+};
+const compiledStyles = {
+  datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
+  timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",
+  iconContainerStyles: "_1e0c1txw _4cvr1h6o _i0dl1kw7"
+};
+
+// react-select overrides (via @atlaskit/select).
+const styles = {
+  control: style => ({
+    ...style,
+    backgroundColor: 'transparent',
+    border: 2,
+    borderRadius: 0,
+    paddingLeft: 0,
+    ':hover': {
+      backgroundColor: 'transparent',
+      cursor: 'inherit'
+    }
+  })
+};
+
+/**
+ * Two action types keep the reducer focused:
+ *
+ * - APPLY: used by user-interaction handlers. The handler computes the full
+ *   next state (including the new ISO value) and applies it atomically. This
+ *   guarantees a single re-render with no cascades regardless of React version.
+ *
+ * - SET_VALUE: used by the `providedValue` prop effect. The reducer owns all
+ *   parsing logic for external value changes, including the empty-string case
+ *   that the previous useState approach missed.
+ */
+
+export const datePickerDefaultAriaLabel = 'Date';
+export const timePickerDefaultAriaLabel = 'Time';
 
 /**
  * __Date time picker__
@@ -12,4 +71,394 @@ import DateTimePickerOld from './date-time-picker-fc-old';
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-export default componentWithCondition(() => fg('dst-a11y_fix-dtp-value-calculation'), DateTimePickerNew, DateTimePickerOld);
+const DateTimePicker = /*#__PURE__*/forwardRef(({
+  'aria-describedby': ariaDescribedBy,
+  appearance = 'default',
+  autoFocus = false,
+  clearControlLabel = 'clear',
+  datePickerProps: datePickerPropsWithSelectProps = {},
+  defaultValue = '',
+  id = '',
+  innerProps = {},
+  isDisabled = false,
+  isInvalid = false,
+  isRequired = false,
+  name = '',
+  // These disables are here for proper typing when used as defaults. They
+  // should *not* use the `noop` function.
+  /* eslint-disable @repo/internal/react/use-noop */
+  onBlur = _event => {},
+  onChange: onChangeProp = _value => {},
+  onFocus = _event => {},
+  /* eslint-enable @repo/internal/react/use-noop */
+  parseValue: providedParseValue,
+  spacing = 'default',
+  locale = 'en-US',
+  testId,
+  timePickerProps: timePickerPropsWithSelectProps = {},
+  value: providedValue
+}, _ref) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  /**
+   * Defined inside the component so the reducer closes over `providedParseValue`
+   * without needing to smuggle it through every action payload. React always
+   * calls the reducer from the latest render, so stale-closure is not a concern.
+   */
+  const reducer = (state, action) => {
+    switch (action.type) {
+      case 'APPLY':
+        return action.payload;
+      case 'SET_VALUE':
+        {
+          const newValue = action.payload;
+
+          // Explicit empty-string handling: clear all sub-fields so the date
+          // and time pickers visually reset when a controlled value is cleared.
+          if (!newValue) {
+            return {
+              value: '',
+              dateValue: '',
+              timeValue: '',
+              zoneValue: ''
+            };
+          }
+          if (providedParseValue) {
+            const parsed = providedParseValue(newValue, state.dateValue, state.timeValue, state.zoneValue);
+            return parsed ? {
+              value: newValue,
+              ...parsed
+            } : {
+              value: newValue,
+              dateValue: state.dateValue,
+              timeValue: state.timeValue,
+              zoneValue: state.zoneValue
+            };
+          }
+          const parsed = parseISO(newValue);
+          return isValid(parsed) ? {
+            value: newValue,
+            dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
+            timeValue: format(parsed, convertTokens('HH:mm')),
+            zoneValue: format(parsed, convertTokens('ZZ'))
+          } : {
+            value: newValue,
+            dateValue: '',
+            timeValue: '',
+            zoneValue: ''
+          };
+        }
+      default:
+        return state;
+    }
+  };
+  const [dtState, dispatch] = useReducer(reducer, null, () => {
+    const initialValue = providedValue || defaultValue || '';
+    const initialDate = (datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '';
+    const initialTime = (timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '';
+    if (!initialValue) {
+      return {
+        value: '',
+        dateValue: initialDate,
+        timeValue: initialTime,
+        zoneValue: ''
+      };
+    }
+    if (providedParseValue) {
+      const parsed = providedParseValue(initialValue, initialDate, initialTime, '');
+      return parsed ? {
+        value: initialValue,
+        ...parsed
+      } : {
+        value: initialValue,
+        dateValue: initialDate,
+        timeValue: initialTime,
+        zoneValue: ''
+      };
+    }
+    const parsed = parseISO(initialValue);
+    return isValid(parsed) ? {
+      value: initialValue,
+      dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
+      timeValue: format(parsed, convertTokens('HH:mm')),
+      zoneValue: format(parsed, convertTokens('ZZ'))
+    } : {
+      value: initialValue,
+      dateValue: initialDate,
+      timeValue: initialTime,
+      zoneValue: ''
+    };
+  });
+  useEffect(() => {
+    if (providedValue !== undefined) {
+      dispatch({
+        type: 'SET_VALUE',
+        payload: providedValue
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [providedValue]);
+  const parseValue = useCallback((value, providedDateValue, providedTimeValue, providedZoneValue) => {
+    if (providedParseValue) {
+      const parsedFromFn = providedParseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
+      // This handles cases found in Jira where the parse function actually does
+      // nothing and returns undefined. The previous `getSafeState` function
+      // just spread the values over the state, but if it returned `undefined`,
+      // it would just rely on the previous state values. Considering this is
+      // what is input to this function anyway, this is a safe way to handle
+      // this, colocate the behavior, and not rely on `getSafeState`.
+      return parsedFromFn || {
+        dateValue: providedDateValue,
+        timeValue: providedTimeValue,
+        zoneValue: providedZoneValue
+      };
+    }
+    const parsed = parseISO(value);
+    return isValid(parsed) ? {
+      dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
+      timeValue: format(parsed, convertTokens('HH:mm')),
+      zoneValue: format(parsed, convertTokens('ZZ'))
+    } : {
+      dateValue: dtState.dateValue,
+      timeValue: dtState.timeValue,
+      zoneValue: dtState.zoneValue
+    };
+  }, [providedParseValue, dtState.dateValue, dtState.timeValue, dtState.zoneValue]);
+  const onDateBlur = event => {
+    setIsFocused(false);
+    onBlur(event);
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onBlur) {
+      datePickerPropsWithSelectProps.onBlur(event);
+    }
+  };
+  const onTimeBlur = event => {
+    setIsFocused(false);
+    onBlur(event);
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onBlur) {
+      timePickerPropsWithSelectProps.onBlur(event);
+    }
+  };
+  const onDateFocus = event => {
+    setIsFocused(false);
+    onFocus(event);
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onFocus) {
+      datePickerPropsWithSelectProps.onFocus(event);
+    }
+  };
+  const onTimeFocus = event => {
+    setIsFocused(false);
+    onFocus(event);
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onFocus) {
+      timePickerPropsWithSelectProps.onFocus(event);
+    }
+  };
+  const onDateChange = newDateValue => {
+    const parsedValues = parseValue(dtState.value, newDateValue, dtState.timeValue, dtState.zoneValue);
+    onValueChange({
+      providedDateValue: newDateValue,
+      providedTimeValue: parsedValues.timeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
+      datePickerPropsWithSelectProps.onChange(newDateValue);
+    }
+  };
+  const onTimeChange = newTimeValue => {
+    const parsedValues = parseValue(dtState.value, dtState.dateValue, newTimeValue, dtState.zoneValue);
+    onValueChange({
+      providedDateValue: parsedValues.dateValue,
+      providedTimeValue: newTimeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
+      timePickerPropsWithSelectProps.onChange(newTimeValue);
+    }
+  };
+  const onClear = () => {
+    const parsedValues = parseValue(dtState.value, dtState.dateValue, dtState.timeValue, dtState.zoneValue);
+    onValueChange({
+      providedDateValue: '',
+      providedTimeValue: '',
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
+      datePickerPropsWithSelectProps.onChange('');
+    }
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
+      timePickerPropsWithSelectProps.onChange('');
+    }
+  };
+  const onChangePropWithAnalytics = usePlatformLeafEventHandler({
+    fn: onChangeProp,
+    action: 'selectedDate',
+    actionSubject: 'datePicker',
+    ...analyticsAttributes
+  });
+  const onValueChange = ({
+    providedDateValue,
+    providedTimeValue,
+    providedZoneValue
+  }) => {
+    if (providedDateValue && providedTimeValue) {
+      const isoValue = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
+      const {
+        zoneValue: parsedZone
+      } = parseValue(isoValue, providedDateValue, providedTimeValue, providedZoneValue);
+      const valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
+      dispatch({
+        type: 'APPLY',
+        payload: {
+          value: valueWithValidZone,
+          dateValue: providedDateValue,
+          timeValue: providedTimeValue,
+          zoneValue: parsedZone
+        }
+      });
+      onChangePropWithAnalytics(valueWithValidZone);
+      // If the date or time value was cleared when there is an existing datetime value, then clear the value.
+    } else if (dtState.value) {
+      dispatch({
+        type: 'APPLY',
+        payload: {
+          value: '',
+          dateValue: providedDateValue,
+          timeValue: providedTimeValue,
+          zoneValue: providedZoneValue
+        }
+      });
+      onChangePropWithAnalytics('');
+    } else {
+      dispatch({
+        type: 'APPLY',
+        payload: {
+          value: '',
+          dateValue: providedDateValue,
+          timeValue: providedTimeValue,
+          zoneValue: providedZoneValue
+        }
+      });
+    }
+  };
+  const {
+    selectProps: datePickerSelectProps,
+    ...datePickerProps
+  } = datePickerPropsWithSelectProps;
+  const datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+  const datePickerLabel = datePickerProps.label || 'Date';
+  const mergedDatePickerSelectProps = {
+    ...datePickerSelectProps,
+    styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+  };
+  const {
+    selectProps: timePickerSelectProps,
+    ...timePickerProps
+  } = timePickerPropsWithSelectProps;
+  const timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
+  const timePickerLabel = timePickerProps.label || 'Time';
+  const mergedTimePickerSelectProps = {
+    ...timePickerSelectProps,
+    styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
+  };
+
+  // Render DateTimePicker's IconContainer when a value has been filled
+  // Don't use Date or TimePicker's because they can't be customised
+  const isClearable = Boolean(dtState.dateValue || dtState.timeValue);
+  return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
+    appearance: appearance,
+    isDisabled: isDisabled,
+    isFocused: isFocused,
+    isInvalid: isInvalid,
+    testId: testId,
+    innerProps: innerProps
+  }, /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: dtState.value,
+    "data-testid": testId && `${testId}--input`
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: compiledStyles.datePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(DatePicker, {
+    appearance: appearance,
+    "aria-describedby": datePickerAriaDescribedBy,
+    autoFocus: datePickerProps.autoFocus || autoFocus,
+    dateFormat: datePickerProps.dateFormat,
+    defaultIsOpen: datePickerProps.defaultIsOpen,
+    defaultValue: datePickerProps.defaultValue,
+    disabled: datePickerProps.disabled,
+    disabledDateFilter: datePickerProps.disabledDateFilter,
+    formatDisplayLabel: datePickerProps.formatDisplayLabel,
+    hideIcon: datePickerProps.hideIcon || true,
+    icon: datePickerProps.icon,
+    id: datePickerProps.id || id,
+    innerProps: datePickerProps.innerProps,
+    inputLabel: datePickerProps.inputLabel,
+    inputLabelId: datePickerProps.inputLabelId,
+    isDisabled: datePickerProps.isDisabled || isDisabled,
+    isInvalid: datePickerProps.isInvalid || isInvalid,
+    isOpen: datePickerProps.isOpen,
+    isRequired: datePickerProps.isRequired || isRequired,
+    label: datePickerLabel,
+    locale: datePickerProps.locale || locale,
+    maxDate: datePickerProps.maxDate,
+    minDate: datePickerProps.minDate,
+    name: datePickerProps.name,
+    nextMonthLabel: datePickerProps.nextMonthLabel,
+    onBlur: onDateBlur,
+    onChange: onDateChange,
+    onFocus: onDateFocus,
+    openCalendarLabel: datePickerProps.openCalendarLabel,
+    parseInputValue: datePickerProps.parseInputValue,
+    placeholder: datePickerProps.placeholder,
+    previousMonthLabel: datePickerProps.previousMonthLabel,
+    selectProps: mergedDatePickerSelectProps,
+    shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
+    spacing: datePickerProps.spacing || spacing,
+    testId: testId && `${testId}--datepicker` || datePickerProps.testId,
+    value: dtState.dateValue,
+    weekStartDay: datePickerProps.weekStartDay
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: compiledStyles.timePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(TimePicker, {
+    appearance: timePickerProps.appearance || appearance,
+    "aria-describedby": timePickerAriaDescribedBy,
+    autoFocus: timePickerProps.autoFocus,
+    defaultIsOpen: timePickerProps.defaultIsOpen,
+    defaultValue: timePickerProps.defaultValue,
+    formatDisplayLabel: timePickerProps.formatDisplayLabel,
+    hideIcon: timePickerProps.hideIcon || true,
+    id: timePickerProps.id,
+    innerProps: timePickerProps.innerProps,
+    isDisabled: timePickerProps.isDisabled || isDisabled,
+    isInvalid: timePickerProps.isInvalid || isInvalid,
+    isOpen: timePickerProps.isOpen,
+    isRequired: timePickerProps.isRequired || isRequired,
+    label: timePickerLabel,
+    locale: timePickerProps.locale || locale,
+    name: timePickerProps.name,
+    onBlur: onTimeBlur,
+    onChange: onTimeChange,
+    onFocus: onTimeFocus,
+    parseInputValue: timePickerProps.parseInputValue,
+    placeholder: timePickerProps.placeholder,
+    selectProps: mergedTimePickerSelectProps,
+    spacing: timePickerProps.spacing || spacing,
+    testId: timePickerProps.testId || testId && `${testId}--timepicker`,
+    timeFormat: timePickerProps.timeFormat,
+    timeIsEditable: timePickerProps.timeIsEditable,
+    times: timePickerProps.times,
+    value: dtState.timeValue
+  })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
+    xcss: compiledStyles.iconContainerStyles
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: clearControlLabel,
+    icon: iconProps => /*#__PURE__*/React.createElement(SelectClearIcon, _extends({}, iconProps, {
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      size: "small"
+    })),
+    onClick: onClear,
+    testId: testId && `${testId}--icon--container`,
+    tabIndex: -1
+  })) : null);
+});
+export default DateTimePicker;

package/dist/es2019/components/time-picker.js

@@ -13,7 +13,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.6.5";
+const packageVersion = "0.0.0-development";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/convert-to24hr-time.js

@@ -0,0 +1,60 @@
+const map24 = {
+  '12': '12',
+  '01': '13',
+  '02': '14',
+  '03': '15',
+  '04': '16',
+  '05': '17',
+  '06': '18',
+  '07': '19',
+  '08': '20',
+  '09': '21',
+  '10': '22',
+  '11': '23'
+};
+function formatSemi24(time) {
+  if (time.length === 1) {
+    return `0${time}00`;
+  }
+  if (time.length === 2) {
+    return `${time}00`;
+  }
+  if (time.length === 3 || time.length === 5) {
+    return `0${time}`;
+  }
+  return time;
+}
+function checkHour(hour, meridiem) {
+  if (hour > '24') {
+    return null;
+  }
+  if (hour === '12' && meridiem === 'a') {
+    return '00';
+  }
+  if (hour < '12' && meridiem === 'p') {
+    return map24[hour];
+  }
+  return hour;
+}
+function checkMinuteSecond(value) {
+  if (value > '59') {
+    return null;
+  }
+  return value;
+}
+export function convertTo24hrTime(time) {
+  const timeArray = time.toLowerCase().split(/(p|a)/i);
+  const meridiem = timeArray[1];
+  const semi24 = formatSemi24(timeArray[0].trim());
+  const hour = checkHour(semi24.substring(0, 2), meridiem);
+  const minute = checkMinuteSecond(semi24.substring(2, 4));
+  const seconds = semi24.length === 6 && checkMinuteSecond(semi24.substring(4, 6));
+  if (!hour || !minute) {
+    return null;
+  }
+  return {
+    hour: parseInt(hour, 10),
+    minute: parseInt(minute, 10),
+    seconds: parseInt(seconds || '0', 10) || 0
+  };
+}

package/dist/es2019/internal/format-date.js

@@ -0,0 +1,34 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { format, parseISO } from 'date-fns';
+import { convertTokens } from './parse-tokens';
+import { defaultDateFormat } from './index';
+export const formatDate = (value, di) => {
+  const {
+    formatDisplayLabel,
+    dateFormat,
+    l10n
+  } = di;
+  if (formatDisplayLabel) {
+    return formatDisplayLabel(value, dateFormat || defaultDateFormat);
+  }
+  const date = parseISO(value);
+  return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
+};

package/dist/es2019/internal/{date-picker-migration.js → get-parsed-iso.js}

@@ -17,15 +17,8 @@
  */
 
 // oxlint-disable-next-line @atlassian/no-restricted-imports
-import { format, lastDayOfMonth, parseISO } from 'date-fns';
-import { convertTokens } from './parse-tokens';
-import { defaultDateFormat, padToTwo, placeholderDatetime } from './index';
-export const isDateDisabled = (date, di) => {
-  const {
-    disabled
-  } = di;
-  return disabled.indexOf(date) > -1;
-};
+import { lastDayOfMonth } from 'date-fns';
+import { padToTwo } from './index';
 export const getParsedISO = di => {
   const {
     iso
@@ -43,49 +36,4 @@ export const getParsedISO = di => {
     newIso = `${parsedYear}-${padToTwo(parsedMonth)}-${padToTwo(parsedDate)}`;
   }
   return newIso;
-};
-
-/**
- * There are two props that can change how the date is parsed.
- * The priority of props used is:
- *   1. `parseInputValue`
- *   2. `locale`
- */
-export const parseDate = (date, di) => {
-  const {
-    parseInputValue,
-    dateFormat,
-    l10n
-  } = di;
-  if (parseInputValue) {
-    return parseInputValue(date, dateFormat || defaultDateFormat);
-  }
-  return l10n.parseDate(date);
-};
-
-/**
- * There are multiple props that can change how the date is formatted.
- * The priority of props used is:
- *   1. `formatDisplayLabel`
- *   2. `dateFormat`
- *   3. `locale`
- */
-export const formatDate = (value, di) => {
-  const {
-    formatDisplayLabel,
-    dateFormat,
-    l10n
-  } = di;
-  if (formatDisplayLabel) {
-    return formatDisplayLabel(value, dateFormat || defaultDateFormat);
-  }
-  const date = parseISO(value);
-  return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
-};
-export const getPlaceholder = di => {
-  const {
-    placeholder,
-    l10n
-  } = di;
-  return placeholder || l10n.formatDate(placeholderDatetime);
 };

package/dist/es2019/internal/get-placeholder.js

@@ -0,0 +1,28 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+
+import { placeholderDatetime } from './index';
+export const getPlaceholder = di => {
+  const {
+    placeholder,
+    l10n
+  } = di;
+  return placeholder || l10n.formatDate(placeholderDatetime);
+};

package/dist/es2019/internal/get-safe-calendar-value.js

@@ -0,0 +1,11 @@
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { getShortISOString } from './get-short-iso-string';
+export function getSafeCalendarValue(calendarValue) {
+  // If `calendarValue` has a year that is greater than 9999, default to
+  // today's date
+  const yearIsOverLimit = calendarValue.match(/^\d{5,}/);
+  if (yearIsOverLimit) {
+    return getShortISOString(new Date());
+  }
+  return calendarValue;
+}

package/dist/es2019/internal/get-short-iso-string.js

@@ -0,0 +1,6 @@
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { format } from 'date-fns';
+import { convertTokens } from './parse-tokens';
+export function getShortISOString(date) {
+  return format(date, convertTokens('YYYY-MM-DD'));
+}