@atlaskit/datetime-picker 15.5.0 → 15.5.1

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

@@ -0,0 +1,437 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @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/glyph/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';
+var DatePicker = componentWithCondition(function () {
+  return fg('dst-date-picker-use-functional-component');
+}, DatePickerNew, DatePickerOld);
+var packageName = "@atlaskit/datetime-picker";
+var packageVersion = "15.5.1";
+// Make DatePicker 50% the width of DateTimePicker
+// If rendering an icon container, shrink the TimePicker
+var datePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1,
+  flexShrink: 0
+});
+var timePickerContainerStyles = css({
+  flexBasis: '50%',
+  flexGrow: 1
+});
+var iconContainerStyles = css({
+  display: 'flex',
+  margin: "var(--ds-border-width, 1px)",
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  backgroundColor: 'inherit',
+  border: 'none',
+  color: "var(--ds-text-subtlest, ".concat(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, ".concat(N500, ")")
+  }
+});
+
+// react-select overrides (via @atlaskit/select).
+var styles = {
+  control: function control(style) {
+    return _objectSpread(_objectSpread({}, style), {}, {
+      backgroundColor: 'transparent',
+      border: 2,
+      borderRadius: 0,
+      paddingLeft: 0,
+      ':hover': {
+        backgroundColor: 'transparent',
+        cursor: 'inherit'
+      }
+    });
+  }
+};
+var 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: function onBlur(_event) {},
+  onChange: function onChange(_value) {},
+  onFocus: function 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 var datePickerDefaultAriaLabel = 'Date';
+export var timePickerDefaultAriaLabel = 'Time';
+var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(DateTimePickerComponent, _React$Component);
+  var _super = _createSuper(DateTimePickerComponent);
+  function DateTimePickerComponent() {
+    var _this$props$datePicke, _this$props$timePicke;
+    var _this;
+    _classCallCheck(this, DateTimePickerComponent);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this), "getParsedValues", function () {
+      return _this.parseValue(_this.getValue(), _this.state.dateValue, _this.state.timeValue, _this.state.zoneValue);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getValue", function () {
+      var _this$props$value;
+      return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDateBlur", function (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 || _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(_assertThisInitialized(_this), "onTimeBlur", function (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 || _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(_assertThisInitialized(_this), "onDateFocus", function (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 || _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(_assertThisInitialized(_this), "onTimeFocus", function (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 || _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(_assertThisInitialized(_this), "onDateChange", function (dateValue) {
+      var _this$props$datePicke4;
+      var parsedValues = _this.getParsedValues();
+      _this.onValueChange({
+        dateValue: 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(_assertThisInitialized(_this), "onTimeChange", function (timeValue) {
+      var _this$props$timePicke4;
+      var parsedValues = _this.getParsedValues();
+      _this.onValueChange({
+        dateValue: parsedValues.dateValue,
+        timeValue: 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(_assertThisInitialized(_this), "onClear", function () {
+      var _this$props$datePicke5, _this$props$timePicke5;
+      var 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('');
+      }
+    });
+    return _this;
+  }
+  _createClass(DateTimePickerComponent, [{
+    key: "parseValue",
+    value: function parseValue(value, dateValue, timeValue, zoneValue) {
+      if (this.props.parseValue) {
+        var 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: dateValue,
+          timeValue: timeValue,
+          zoneValue: zoneValue
+        };
+      }
+      var 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: dateValue,
+        timeValue: timeValue,
+        zoneValue: zoneValue
+      };
+    }
+  }, {
+    key: "onValueChange",
+    value: function onValueChange(_ref) {
+      var dateValue = _ref.dateValue,
+        timeValue = _ref.timeValue,
+        zoneValue = _ref.zoneValue;
+      this.setState({
+        dateValue: dateValue,
+        timeValue: timeValue,
+        zoneValue: zoneValue
+      });
+      if (dateValue && timeValue) {
+        var _this$props$onChange, _this$props5;
+        var value = formatDateTimeZoneIntoIso(dateValue, timeValue, zoneValue);
+        var _this$parseValue = this.parseValue(value, dateValue, timeValue, zoneValue),
+          parsedZone = _this$parseValue.zoneValue;
+        var valueWithValidZone = formatDateTimeZoneIntoIso(dateValue, timeValue, parsedZone);
+        this.setState({
+          value: valueWithValidZone
+        });
+        (_this$props$onChange = (_this$props5 = this.props).onChange) === null || _this$props$onChange === 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 || _this$props$onChange2.call(_this$props6, '');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props7 = this.props,
+        ariaDescribedBy = _this$props7['aria-describedby'],
+        _this$props7$appearan = _this$props7.appearance,
+        appearance = _this$props7$appearan === void 0 ? 'default' : _this$props7$appearan,
+        _this$props7$autoFocu = _this$props7.autoFocus,
+        autoFocus = _this$props7$autoFocu === void 0 ? false : _this$props7$autoFocu,
+        _this$props7$clearCon = _this$props7.clearControlLabel,
+        clearControlLabel = _this$props7$clearCon === void 0 ? 'clear' : _this$props7$clearCon,
+        _this$props7$datePick = _this$props7.datePickerProps,
+        datePickerProps = _this$props7$datePick === void 0 ? {} : _this$props7$datePick,
+        _this$props7$id = _this$props7.id,
+        id = _this$props7$id === void 0 ? '' : _this$props7$id,
+        _this$props7$innerPro = _this$props7.innerProps,
+        innerProps = _this$props7$innerPro === void 0 ? {} : _this$props7$innerPro,
+        _this$props7$isDisabl = _this$props7.isDisabled,
+        isDisabled = _this$props7$isDisabl === void 0 ? false : _this$props7$isDisabl,
+        _this$props7$isInvali = _this$props7.isInvalid,
+        isInvalid = _this$props7$isInvali === void 0 ? false : _this$props7$isInvali,
+        _this$props7$isRequir = _this$props7.isRequired,
+        isRequired = _this$props7$isRequir === void 0 ? false : _this$props7$isRequir,
+        _this$props7$locale = _this$props7.locale,
+        locale = _this$props7$locale === void 0 ? 'en-US' : _this$props7$locale,
+        _this$props7$name = _this$props7.name,
+        name = _this$props7$name === void 0 ? '' : _this$props7$name,
+        _this$props7$spacing = _this$props7.spacing,
+        spacing = _this$props7$spacing === void 0 ? 'default' : _this$props7$spacing,
+        testId = _this$props7.testId,
+        _this$props7$timePick = _this$props7.timePickerProps,
+        timePickerProps = _this$props7$timePick === void 0 ? {} : _this$props7$timePick;
+      var value = this.getValue();
+      var isFocused = this.state.isFocused;
+      var parsedValues = this.getParsedValues();
+      var dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
+      var timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
+      var datePickerSelectProps = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectProps;
+      var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+      var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
+      var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
+        styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+      });
+      var timePickerSelectProps = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.selectProps;
+      var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
+      var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
+      var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, 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
+      var 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 && "".concat(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 && "".concat(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 && "".concat(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 && "".concat(testId, "--icon--container"),
+        tabIndex: -1,
+        type: "button"
+      }, jsx(SelectClearIcon, {
+        size: "small",
+        primaryColor: "inherit",
+        label: clearControlLabel
+      })) : null);
+    }
+  }]);
+  return DateTimePickerComponent;
+}(React.Component);
+_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)
+ */
+var DateTimePicker = withAnalyticsContext({
+  componentName: 'dateTimePicker',
+  packageName: packageName,
+  packageVersion: packageVersion
+})(withAnalyticsEvents({
+  onChange: createAndFireEvent('atlaskit')({
+    action: 'changed',
+    actionSubject: 'dateTimePicker',
+    attributes: {
+      componentName: 'dateTimePicker',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DateTimePickerComponent));
+export default DateTimePicker;