@atlaskit/datetime-picker 15.13.0 → 16.0.0

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

@@ -0,0 +1,400 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { format, isValid, parseISO } from 'date-fns';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { mergeStyles } from '@atlaskit/select';
+import { N500, N70 } from '@atlaskit/theme/colors';
+import { formatDateTimeZoneIntoIso } from '../internal';
+import { DateTimePickerContainer } from '../internal/date-time-picker-container';
+import { componentWithCondition } from '../internal/ff-component';
+import { convertTokens } from '../internal/parse-tokens';
+import DatePickerOld from './date-picker-class';
+import DatePickerNew from './date-picker-fc';
+import TimePicker from './time-picker';
+const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
+const packageName = "@atlaskit/datetime-picker";
+const packageVersion = "16.0.0";
+// Make DatePicker 50% the width of DateTimePicker
+// If rendering an icon container, shrink the TimePicker
+const datePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1,
+  flexShrink: 0
+});
+const timePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1
+});
+const iconContainerStyles = css({
+  display: 'flex',
+  margin: "var(--ds-border-width, 1px)",
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  backgroundColor: 'inherit',
+  border: 'none',
+  color: `var(--ds-text-subtlest, ${N70})`,
+  paddingBlockEnd: "var(--ds-space-075, 6px)",
+  paddingBlockStart: "var(--ds-space-075, 6px)",
+  paddingInlineEnd: "var(--ds-space-100, 8px)",
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  transition: `color 150ms`,
+  '&:hover': {
+    color: `var(--ds-text-subtle, ${N500})`
+  }
+});
+
+// react-select overrides (via @atlaskit/select).
+const styles = {
+  control: style => ({
+    ...style,
+    backgroundColor: 'transparent',
+    border: 2,
+    borderRadius: 0,
+    paddingLeft: 0,
+    ':hover': {
+      backgroundColor: 'transparent',
+      cursor: 'inherit'
+    }
+  })
+};
+const dateTimePickerDefaultProps = {
+  // 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: _value => {},
+  onFocus: _event => {}
+  /* eslint-enable @repo/internal/react/use-noop */
+  // Not including a default prop for value as it will
+  // Make the component a controlled component
+};
+export const datePickerDefaultAriaLabel = 'Date';
+export const timePickerDefaultAriaLabel = 'Time';
+class DateTimePickerComponent extends React.Component {
+  constructor(...args) {
+    var _this$props$datePicke, _this$props$timePicke;
+    super(...args);
+    _defineProperty(this, "state", {
+      dateValue: ((_this$props$datePicke = this.props.datePickerProps) === null || _this$props$datePicke === void 0 ? void 0 : _this$props$datePicke.defaultValue) || '',
+      isFocused: false,
+      timeValue: ((_this$props$timePicke = this.props.timePickerProps) === null || _this$props$timePicke === void 0 ? void 0 : _this$props$timePicke.defaultValue) || '',
+      value: this.props.defaultValue || '',
+      zoneValue: ''
+    });
+    // All state needs to be accessed via this function so that the state is mapped from props
+    // correctly to allow controlled/uncontrolled usage.
+    _defineProperty(this, "getParsedValues", () => this.parseValue(this.getValue(), this.state.dateValue, this.state.timeValue, this.state.zoneValue));
+    _defineProperty(this, "getValue", () => {
+      var _this$props$value;
+      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
+    });
+    _defineProperty(this, "onDateBlur", event => {
+      var _this$props$onBlur, _this$props, _this$props$datePicke2;
+      this.setState({
+        isFocused: false
+      });
+      (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, event);
+      if ((_this$props$datePicke2 = this.props.datePickerProps) !== null && _this$props$datePicke2 !== void 0 && _this$props$datePicke2.onBlur) {
+        this.props.datePickerProps.onBlur(event);
+      }
+    });
+    _defineProperty(this, "onTimeBlur", event => {
+      var _this$props$onBlur2, _this$props2, _this$props$timePicke2;
+      this.setState({
+        isFocused: false
+      });
+      (_this$props$onBlur2 = (_this$props2 = this.props).onBlur) === null || _this$props$onBlur2 === void 0 ? void 0 : _this$props$onBlur2.call(_this$props2, event);
+      if ((_this$props$timePicke2 = this.props.timePickerProps) !== null && _this$props$timePicke2 !== void 0 && _this$props$timePicke2.onBlur) {
+        this.props.timePickerProps.onBlur(event);
+      }
+    });
+    _defineProperty(this, "onDateFocus", event => {
+      var _this$props$onFocus, _this$props3, _this$props$datePicke3;
+      this.setState({
+        isFocused: true
+      });
+      (_this$props$onFocus = (_this$props3 = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, event);
+      if ((_this$props$datePicke3 = this.props.datePickerProps) !== null && _this$props$datePicke3 !== void 0 && _this$props$datePicke3.onFocus) {
+        this.props.datePickerProps.onFocus(event);
+      }
+    });
+    _defineProperty(this, "onTimeFocus", event => {
+      var _this$props$onFocus2, _this$props4, _this$props$timePicke3;
+      this.setState({
+        isFocused: true
+      });
+      (_this$props$onFocus2 = (_this$props4 = this.props).onFocus) === null || _this$props$onFocus2 === void 0 ? void 0 : _this$props$onFocus2.call(_this$props4, event);
+      if ((_this$props$timePicke3 = this.props.timePickerProps) !== null && _this$props$timePicke3 !== void 0 && _this$props$timePicke3.onFocus) {
+        this.props.timePickerProps.onFocus(event);
+      }
+    });
+    _defineProperty(this, "onDateChange", dateValue => {
+      var _this$props$datePicke4;
+      const parsedValues = this.getParsedValues();
+      this.onValueChange({
+        dateValue,
+        timeValue: parsedValues.timeValue,
+        zoneValue: parsedValues.zoneValue
+      });
+      if ((_this$props$datePicke4 = this.props.datePickerProps) !== null && _this$props$datePicke4 !== void 0 && _this$props$datePicke4.onChange) {
+        this.props.datePickerProps.onChange(dateValue);
+      }
+    });
+    _defineProperty(this, "onTimeChange", timeValue => {
+      var _this$props$timePicke4;
+      const parsedValues = this.getParsedValues();
+      this.onValueChange({
+        dateValue: parsedValues.dateValue,
+        timeValue,
+        zoneValue: parsedValues.zoneValue
+      });
+      if ((_this$props$timePicke4 = this.props.timePickerProps) !== null && _this$props$timePicke4 !== void 0 && _this$props$timePicke4.onChange) {
+        this.props.timePickerProps.onChange(timeValue);
+      }
+    });
+    _defineProperty(this, "onClear", () => {
+      var _this$props$datePicke5, _this$props$timePicke5;
+      const parsedValues = this.getParsedValues();
+      this.onValueChange({
+        dateValue: '',
+        timeValue: '',
+        zoneValue: parsedValues.zoneValue
+      });
+      if ((_this$props$datePicke5 = this.props.datePickerProps) !== null && _this$props$datePicke5 !== void 0 && _this$props$datePicke5.onChange) {
+        this.props.datePickerProps.onChange('');
+      }
+      if ((_this$props$timePicke5 = this.props.timePickerProps) !== null && _this$props$timePicke5 !== void 0 && _this$props$timePicke5.onChange) {
+        this.props.timePickerProps.onChange('');
+      }
+    });
+  }
+  parseValue(value, dateValue, timeValue, zoneValue) {
+    if (this.props.parseValue) {
+      const parsedFromFn = this.props.parseValue(value, dateValue, timeValue, zoneValue);
+      // 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,
+        timeValue,
+        zoneValue
+      };
+    }
+    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
+    };
+  }
+  onValueChange({
+    dateValue,
+    timeValue,
+    zoneValue
+  }) {
+    this.setState({
+      dateValue,
+      timeValue,
+      zoneValue
+    });
+    if (dateValue && timeValue) {
+      var _this$props$onChange, _this$props5;
+      const value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
+      const {
+        zoneValue: parsedZone
+      } = this.parseValue(value, dateValue, timeValue, zoneValue);
+      const valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
+      this.setState({
+        value: valueWithValidZone
+      });
+      (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props5, valueWithValidZone);
+      // If the date or time value was cleared when there is an existing datetime value, then clear the value.
+    } else if (this.getValue()) {
+      var _this$props$onChange2, _this$props6;
+      this.setState({
+        value: ''
+      });
+      (_this$props$onChange2 = (_this$props6 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props6, '');
+    }
+  }
+  render() {
+    const {
+      'aria-describedby': ariaDescribedBy,
+      appearance = 'default',
+      autoFocus = false,
+      clearControlLabel = 'clear',
+      datePickerProps = {},
+      id = '',
+      innerProps = {},
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      locale = 'en-US',
+      name = '',
+      spacing = 'default',
+      testId,
+      timePickerProps = {}
+    } = this.props;
+    const value = this.getValue();
+    const {
+      isFocused
+    } = this.state;
+    const parsedValues = this.getParsedValues();
+    const dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
+    const timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
+    const datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
+    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 timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
+    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 jsx(DateTimePickerContainer, {
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isFocused: isFocused,
+      isInvalid: isInvalid,
+      testId: testId,
+      innerProps: innerProps
+    }, jsx("input", {
+      name: name,
+      type: "hidden",
+      value: value,
+      "data-testid": testId && `${testId}--input`
+    }), jsx("div", {
+      css: datePickerContainerStyles
+    }, jsx(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,
+      isDisabled: datePickerProps.isDisabled || isDisabled,
+      isInvalid: datePickerProps.isInvalid || isInvalid,
+      isRequired: datePickerProps.isRequired || isRequired,
+      isOpen: datePickerProps.isOpen,
+      label: datePickerLabel,
+      locale: datePickerProps.locale || locale,
+      maxDate: datePickerProps.maxDate,
+      minDate: datePickerProps.minDate,
+      name: datePickerProps.name,
+      nextMonthLabel: datePickerProps.nextMonthLabel,
+      onBlur: this.onDateBlur,
+      onChange: this.onDateChange,
+      onFocus: this.onDateFocus,
+      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
+    })), jsx("div", {
+      css: timePickerContainerStyles
+    }, jsx(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: this.onTimeBlur,
+      onChange: this.onTimeChange,
+      onFocus: this.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 ? jsx("button", {
+      css: iconContainerStyles,
+      onClick: this.onClear,
+      "data-testid": testId && `${testId}--icon--container`,
+      tabIndex: -1,
+      type: "button"
+    }, jsx(SelectClearIcon, {
+      LEGACY_size: "small",
+      color: "currentColor",
+      label: clearControlLabel
+    }), ' ') : null);
+  }
+}
+_defineProperty(DateTimePickerComponent, "defaultProps", dateTimePickerDefaultProps);
+export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
+
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/usage)
+ */
+const DateTimePicker = withAnalyticsContext({
+  componentName: 'dateTimePicker',
+  packageName,
+  packageVersion
+})(withAnalyticsEvents({
+  onChange: createAndFireEvent('atlaskit')({
+    action: 'changed',
+    actionSubject: 'dateTimePicker',
+    attributes: {
+      componentName: 'dateTimePicker',
+      packageName,
+      packageVersion
+    }
+  })
+})(DateTimePickerComponent));
+export default DateTimePicker;