@atlaskit/datetime-picker 13.11.2 → 14.0.0

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
@@ -9,7 +8,6 @@ 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 pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { mergeStyles } from '@atlaskit/select';
@@ -20,7 +18,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.11.2";
+const packageVersion = "14.0.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -83,8 +81,6 @@ const dateTimePickerDefaultProps = {
   isInvalid: false,
   datePickerProps: {},
   timePickerProps: {},
-  datePickerSelectProps: {},
-  timePickerSelectProps: {},
   times: defaultTimes,
   spacing: 'default',
   locale: 'en-US'
@@ -105,15 +101,10 @@ class DateTimePickerComponent extends React.Component {
     });
     // 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, "getSafeState", () => {
-      const mappedState = {
-        ...this.state,
-        ...pick(this.props, ['value'])
-      };
-      return {
-        ...mappedState,
-        ...this.parseValue(mappedState.value, mappedState.dateValue, mappedState.timeValue, mappedState.zoneValue)
-      };
+    _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, "onBlur", event => {
       this.setState({
@@ -128,28 +119,44 @@ class DateTimePickerComponent extends React.Component {
       this.props.onFocus(event);
     });
     _defineProperty(this, "onDateChange", dateValue => {
+      const parsedValues = this.getParsedValues();
       this.onValueChange({
-        ...this.getSafeState(),
-        dateValue
+        dateValue,
+        timeValue: parsedValues.timeValue,
+        zoneValue: parsedValues.zoneValue
       });
     });
     _defineProperty(this, "onTimeChange", timeValue => {
+      const parsedValues = this.getParsedValues();
       this.onValueChange({
-        ...this.getSafeState(),
-        timeValue
+        dateValue: parsedValues.dateValue,
+        timeValue,
+        zoneValue: parsedValues.zoneValue
       });
     });
     _defineProperty(this, "onClear", () => {
+      const parsedValues = this.getParsedValues();
       this.onValueChange({
-        ...this.getSafeState(),
+        dateValue: '',
         timeValue: '',
-        dateValue: ''
+        zoneValue: parsedValues.zoneValue
       });
     });
   }
   parseValue(value, dateValue, timeValue, zoneValue) {
     if (this.props.parseValue) {
-      return this.props.parseValue(value, dateValue, timeValue, zoneValue);
+      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) ? {
@@ -183,7 +190,7 @@ class DateTimePickerComponent extends React.Component {
       });
       this.props.onChange(valueWithValidZone);
       // If the date or time value was cleared when there is an existing datetime value, then clear the value.
-    } else if (this.getSafeState().value) {
+    } else if (this.getValue()) {
       this.setState({
         value: ''
       });
@@ -195,9 +202,7 @@ class DateTimePickerComponent extends React.Component {
       'aria-describedby': ariaDescribedBy,
       appearance,
       autoFocus,
-      dateFormat,
-      datePickerProps,
-      datePickerSelectProps,
+      datePickerProps: datePickerPropsWithSelectProps,
       id,
       innerProps,
       isDisabled,
@@ -206,35 +211,34 @@ class DateTimePickerComponent extends React.Component {
       name,
       spacing,
       testId,
-      timeFormat,
-      timeIsEditable,
-      timePickerProps,
-      timePickerSelectProps,
-      times
+      timePickerProps: timePickerPropsWithSelectProps
     } = this.props;
+    const value = this.getValue();
     const {
-      isFocused,
-      value,
-      dateValue,
-      timeValue
-    } = this.getSafeState();
-    const {
-      styles: datePickerStyles = {}
-    } = datePickerSelectProps;
+      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 {
-      styles: timePickerStyles = {}
-    } = timePickerSelectProps;
+      selectProps: datePickerSelectProps,
+      ...datePickerProps
+    } = datePickerPropsWithSelectProps;
+    const datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+    const datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
     const mergedDatePickerSelectProps = {
       ...datePickerSelectProps,
-      'aria-describedby': datePickerProps['aria-describedby'] || ariaDescribedBy,
-      'aria-label': datePickerProps['label'] || datePickerSelectProps['aria-label'] || datePickerDefaultAriaLabel,
-      styles: mergeStyles(styles, datePickerStyles)
+      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,
-      'aria-describedby': timePickerProps['aria-describedby'] || ariaDescribedBy,
-      'aria-label': timePickerProps['label'] || timePickerSelectProps['aria-label'] || timePickerDefaultAriaLabel,
-      styles: mergeStyles(styles, timePickerStyles)
+      styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
     };
 
     // Render DateTimePicker's IconContainer when a value has been filled
@@ -254,10 +258,11 @@ class DateTimePickerComponent extends React.Component {
       "data-testid": testId && `${testId}--input`
     }), jsx("div", {
       css: datePickerContainerStyles
-    }, jsx(DatePicker, _extends({
+    }, jsx(DatePicker, {
       appearance: appearance,
+      "aria-describedby": datePickerAriaDescribedBy,
       autoFocus: datePickerProps.autoFocus || autoFocus,
-      dateFormat: datePickerProps.dateFormat || dateFormat,
+      dateFormat: datePickerProps.dateFormat,
       defaultIsOpen: datePickerProps.defaultIsOpen,
       defaultValue: datePickerProps.defaultValue,
       disabled: datePickerProps.disabled,
@@ -268,15 +273,9 @@ class DateTimePickerComponent extends React.Component {
       id: datePickerProps.id || id,
       innerProps: datePickerProps.innerProps,
       isDisabled: datePickerProps.isDisabled || isDisabled,
-      isInvalid: datePickerProps.isInvalid || isInvalid
-      // If you set this or `value` explicitly like
-      // `isOpen={datePickerProps.isOpen}`, the date picker will set
-      // `isOpen` to `undefined` forever. I believe this has to do with
-      // the `getSafeState` function in the picker, since it overwrites
-      // state with values from the props.
-    }, datePickerProps.isOpen ? {
-      isOpen: datePickerProps.isOpen
-    } : {}, {
+      isInvalid: datePickerProps.isInvalid || isInvalid,
+      isOpen: datePickerProps.isOpen,
+      label: datePickerLabel,
       locale: datePickerProps.locale || locale,
       maxDate: datePickerProps.maxDate,
       minDate: datePickerProps.minDate,
@@ -293,10 +292,11 @@ class DateTimePickerComponent extends React.Component {
       testId: testId && `${testId}--datepicker` || datePickerProps.testId,
       value: dateValue,
       weekStartDay: datePickerProps.weekStartDay
-    }))), jsx("div", {
+    })), jsx("div", {
       css: timePickerContainerStyles
-    }, jsx(TimePicker, _extends({
+    }, jsx(TimePicker, {
       appearance: timePickerProps.appearance || appearance,
+      "aria-describedby": timePickerAriaDescribedBy,
       autoFocus: timePickerProps.autoFocus,
       defaultIsOpen: timePickerProps.defaultIsOpen,
       defaultValue: timePickerProps.defaultValue,
@@ -305,15 +305,9 @@ class DateTimePickerComponent extends React.Component {
       id: timePickerProps.id,
       innerProps: timePickerProps.innerProps,
       isDisabled: timePickerProps.isDisabled || isDisabled,
-      isInvalid: timePickerProps.isInvalid || isInvalid
-      // If you set this or `value` explicitly like
-      // `isOpen={datePickerProps.isOpen}`, the date picker will set
-      // `isOpen` to `undefined` forever. I believe this has to do with
-      // the `getSafeState` function in the picker, since it overwrites
-      // state with values from the props.
-    }, timePickerProps.isOpen ? {
-      isOpen: timePickerProps.isOpen
-    } : {}, {
+      isInvalid: timePickerProps.isInvalid || isInvalid,
+      isOpen: timePickerProps.isOpen,
+      label: timePickerLabel,
       locale: timePickerProps.locale || locale,
       name: timePickerProps.name,
       onBlur: timePickerProps.onBlur || this.onBlur,
@@ -324,11 +318,11 @@ class DateTimePickerComponent extends React.Component {
       selectProps: mergedTimePickerSelectProps,
       spacing: timePickerProps.spacing || spacing,
       testId: timePickerProps.testId || testId && `${testId}--timepicker`,
-      timeFormat: timePickerProps.timeFormat || timeFormat,
-      timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
-      times: timePickerProps.times || times,
+      timeFormat: timePickerProps.timeFormat,
+      timeIsEditable: timePickerProps.timeIsEditable,
+      times: timePickerProps.times,
       value: timeValue
-    }))), isClearable && !isDisabled ? jsx("button", {
+    })), isClearable && !isDisabled ? jsx("button", {
       css: iconContainerStyles,
       onClick: this.onClear,
       "data-testid": testId && `${testId}--icon--container`,

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

@@ -4,7 +4,6 @@ import React from 'react';
 
 // eslint-disable-next-line no-restricted-imports
 import { format, isValid } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
@@ -16,7 +15,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 = "13.11.2";
+const packageVersion = "14.0.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -65,11 +64,13 @@ class TimePickerComponent extends React.Component {
     });
     // 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, "getSafeState", () => {
-      return {
-        ...this.state,
-        ...pick(this.props, ['value', 'isOpen'])
-      };
+    _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, "getIsOpen", () => {
+      var _this$props$isOpen;
+      return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
     });
     _defineProperty(this, "onChange", (newValue, action) => {
       const rawValue = newValue ? newValue.value || newValue : '';
@@ -114,7 +115,7 @@ class TimePickerComponent extends React.Component {
     });
     _defineProperty(this, "onMenuOpen", () => {
       // Don't open menu after the user has clicked clear
-      if (this.getSafeState().clearingFromIcon) {
+      if (this.state.clearingFromIcon) {
         this.setState({
           clearingFromIcon: false
         });
@@ -126,7 +127,7 @@ class TimePickerComponent extends React.Component {
     });
     _defineProperty(this, "onMenuClose", () => {
       // Don't close menu after the user has clicked clear
-      if (this.getSafeState().clearingFromIcon) {
+      if (this.state.clearingFromIcon) {
         this.setState({
           clearingFromIcon: false
         });
@@ -162,7 +163,7 @@ class TimePickerComponent extends React.Component {
         key
       } = event;
       const keyPressed = key.toLowerCase();
-      if (this.getSafeState().clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
+      if (this.state.clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
         // If being cleared from keyboard, don't change behaviour
         this.setState({
           clearingFromIcon: false
@@ -194,10 +195,8 @@ class TimePickerComponent extends React.Component {
     } = this.props;
     const ICON_PADDING = 2;
     const l10n = createLocalizationProvider(locale);
-    const {
-      value = '',
-      isOpen
-    } = this.getSafeState();
+    const value = this.getValue() || '';
+    const isOpen = this.getIsOpen();
     const {
       styles: selectStyles = {},
       ...otherSelectProps

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

@@ -20,7 +20,6 @@ import { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
@@ -31,7 +30,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.2";
+var packageVersion = "14.0.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -73,8 +72,13 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "containerRef", null);
     // 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), "getSafeState", function () {
-      return _objectSpread(_objectSpread(_objectSpread({}, _this.state), pick(_this.props, ['value', 'isOpen'])), pick(_this.props.selectProps, ['inputValue']));
+    _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), "getIsOpen", function () {
+      var _this$props$isOpen;
+      return (_this$props$isOpen = _this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : _this.state.isOpen;
     });
     _defineProperty(_assertThisInitialized(_this), "isDateDisabled", function (date) {
       return _this.props.disabled.indexOf(date) > -1;
@@ -124,7 +128,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onInputClick", function () {
-      if (!_this.props.isDisabled && !_this.getSafeState().isOpen) {
+      if (!_this.props.isDisabled && !_this.getIsOpen()) {
         _this.setState({
           isOpen: true
         });
@@ -149,7 +153,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onSelectBlur", function (event) {
       var _this$containerRef3;
       var newlyFocusedElement = event.relatedTarget;
-      if (_this.getSafeState().clearingFromIcon) {
+      if (_this.state.clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         _this.setState({
           clearingFromIcon: false
@@ -164,9 +168,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onSelectFocus", function (event) {
-      var _this$getSafeState = _this.getSafeState(),
-        clearingFromIcon = _this$getSafeState.clearingFromIcon,
-        value = _this$getSafeState.value;
+      var clearingFromIcon = _this.state.clearingFromIcon;
+      var value = _this.getValue();
       if (clearingFromIcon) {
         // Don't open menu if focussing after the user has clicked clear
         _this.setState({
@@ -200,9 +203,8 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
       var _this$containerRef4;
-      var _this$getSafeState2 = _this.getSafeState(),
-        value = _this$getSafeState2.value,
-        calendarValue = _this$getSafeState2.calendarValue;
+      var calendarValue = _this.state.calendarValue;
+      var value = _this.getValue();
       var keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
@@ -330,8 +332,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       if (parseInputValue) {
         return parseInputValue(date, dateFormat || defaultDateFormat);
       }
-      var _this$getSafeState3 = _this.getSafeState(),
-        l10n = _this$getSafeState3.l10n;
+      var l10n = _this.state.l10n;
       return l10n.parseDate(date);
     });
     /**
@@ -345,8 +346,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         formatDisplayLabel = _this$props2.formatDisplayLabel,
         dateFormat = _this$props2.dateFormat;
-      var _this$getSafeState4 = _this.getSafeState(),
-        l10n = _this$getSafeState4.l10n;
+      var l10n = _this.state.l10n;
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || defaultDateFormat);
       }
@@ -358,8 +358,7 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       if (placeholder) {
         return placeholder;
       }
-      var _this$getSafeState5 = _this.getSafeState(),
-        l10n = _this$getSafeState5.l10n;
+      var l10n = _this.state.l10n;
       return l10n.formatDate(placeholderDatetime);
     });
     _this.state = {
@@ -401,14 +400,13 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
         locale = _this$props3.locale,
         testId = _this$props3.testId,
         weekStartDay = _this$props3.weekStartDay;
-      var _this$getSafeState6 = this.getSafeState(),
-        value = _this$getSafeState6.value,
-        calendarValue = _this$getSafeState6.calendarValue,
-        isOpen = _this$getSafeState6.isOpen,
-        selectInputValue = _this$getSafeState6.selectInputValue;
+      var _this$state = this.state,
+        calendarValue = _this$state.calendarValue,
+        selectInputValue = _this$state.selectInputValue;
+      var value = this.getValue();
       var actualSelectInputValue;
       actualSelectInputValue = selectInputValue;
-      var menuIsOpen = isOpen && !isDisabled;
+      var menuIsOpen = this.getIsOpen() && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
       var SingleValue = makeSingleValue({