@atlaskit/datetime-picker 17.5.7 → 17.6.0

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

@@ -0,0 +1,336 @@
+/* date-time-picker-fc-old.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./date-time-picker-fc-old.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+/// <reference types="node" />
+// for typing `process`
+
+import React, { forwardRef, useCallback, useEffect, 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'
+    }
+  })
+};
+export const datePickerDefaultAriaLabel = 'Date';
+export const timePickerDefaultAriaLabel = 'Time';
+const DateTimePickerOld = /*#__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 [dateValue, setDateValue] = useState((datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '');
+  const [isFocused, setIsFocused] = useState(false);
+  const [timeValue, setTimeValue] = useState((timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '');
+  const [value, setValue] = useState(defaultValue || '');
+  const [zoneValue, setZoneValue] = useState('');
+  useEffect(() => {
+    if (providedValue !== undefined) {
+      setValue(providedValue);
+    }
+  }, [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,
+      timeValue,
+      zoneValue
+    };
+  }, [providedParseValue, dateValue, timeValue, zoneValue]);
+  useEffect(() => {
+    const parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
+    setDateValue(parsedValues.dateValue);
+    setTimeValue(parsedValues.timeValue);
+    setZoneValue(parsedValues.zoneValue);
+  }, [value, dateValue, timeValue, zoneValue, parseValue]);
+  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 = dateValue => {
+    const parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
+    onValueChange({
+      providedDateValue: dateValue,
+      providedTimeValue: parsedValues.timeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
+      datePickerPropsWithSelectProps.onChange(dateValue);
+    }
+  };
+  const onTimeChange = timeValue => {
+    const parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
+    onValueChange({
+      providedDateValue: parsedValues.dateValue,
+      providedTimeValue: timeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
+      timePickerPropsWithSelectProps.onChange(timeValue);
+    }
+  };
+  const onClear = () => {
+    const parsedValues = parseValue(value, dateValue, timeValue, 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
+  }) => {
+    setDateValue(providedDateValue);
+    setTimeValue(providedTimeValue);
+    setZoneValue(providedZoneValue);
+    if (providedDateValue && providedTimeValue) {
+      const value = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
+      const {
+        zoneValue: parsedZone
+      } = parseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
+      const valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
+      setValue(valueWithValidZone);
+      onChangePropWithAnalytics(valueWithValidZone);
+      // If the date or time value was cleared when there is an existing datetime value, then clear the value.
+    } else if (value) {
+      setValue('');
+      onChangePropWithAnalytics('');
+    }
+  };
+  const {
+    selectProps: datePickerSelectProps,
+    ...datePickerProps
+  } = datePickerPropsWithSelectProps;
+  const datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+  const datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
+  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 || timePickerDefaultAriaLabel;
+  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(dateValue || 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: 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: 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: 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);
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default DateTimePickerOld;

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

@@ -1,53 +1,7 @@
-/* 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, 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'
-    }
-  })
-};
-export const datePickerDefaultAriaLabel = 'Date';
-export const timePickerDefaultAriaLabel = 'Time';
+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__
@@ -58,287 +12,4 @@ export const timePickerDefaultAriaLabel = 'Time';
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-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 [dateValue, setDateValue] = useState((datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || '');
-  const [isFocused, setIsFocused] = useState(false);
-  const [timeValue, setTimeValue] = useState((timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || '');
-  const [value, setValue] = useState(defaultValue || '');
-  const [zoneValue, setZoneValue] = useState('');
-  useEffect(() => {
-    if (providedValue !== undefined) {
-      setValue(providedValue);
-    }
-  }, [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,
-      timeValue,
-      zoneValue
-    };
-  }, [providedParseValue, dateValue, timeValue, zoneValue]);
-  useEffect(() => {
-    const parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
-    setDateValue(parsedValues.dateValue);
-    setTimeValue(parsedValues.timeValue);
-    setZoneValue(parsedValues.zoneValue);
-  }, [value, dateValue, timeValue, zoneValue, parseValue]);
-  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 = dateValue => {
-    const parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
-    onValueChange({
-      providedDateValue: dateValue,
-      providedTimeValue: parsedValues.timeValue,
-      providedZoneValue: parsedValues.zoneValue
-    });
-    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
-      datePickerPropsWithSelectProps.onChange(dateValue);
-    }
-  };
-  const onTimeChange = timeValue => {
-    const parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
-    onValueChange({
-      providedDateValue: parsedValues.dateValue,
-      providedTimeValue: timeValue,
-      providedZoneValue: parsedValues.zoneValue
-    });
-    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
-      timePickerPropsWithSelectProps.onChange(timeValue);
-    }
-  };
-  const onClear = () => {
-    const parsedValues = parseValue(value, dateValue, timeValue, 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
-  }) => {
-    setDateValue(providedDateValue);
-    setTimeValue(providedTimeValue);
-    setZoneValue(providedZoneValue);
-    if (providedDateValue && providedTimeValue) {
-      const value = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
-      const {
-        zoneValue: parsedZone
-      } = parseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
-      const valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
-      setValue(valueWithValidZone);
-      onChangePropWithAnalytics(valueWithValidZone);
-      // If the date or time value was cleared when there is an existing datetime value, then clear the value.
-    } else if (value) {
-      setValue('');
-      onChangePropWithAnalytics('');
-    }
-  };
-  const {
-    selectProps: datePickerSelectProps,
-    ...datePickerProps
-  } = datePickerPropsWithSelectProps;
-  const datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
-  const datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
-  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 || timePickerDefaultAriaLabel;
-  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(dateValue || 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: 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: 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: 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;
+export default componentWithCondition(() => fg('dst-a11y_fix-dtp-value-calculation'), DateTimePickerNew, DateTimePickerOld);

package/dist/esm/components/date-time-picker-fc-new.compiled.css

@@ -0,0 +1,6 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._4cvr1h6o{align-items:center}
+._i0dl1kw7{flex-basis:inherit}
+._i0dl1ssb{flex-basis:50%}