@atlaskit/datetime-picker 13.11.1 → 13.11.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/datetime-picker
 
+## 13.11.2
+
+### Patch Changes
+
+- [#130953](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130953)
+  [`a6c1f10b9f4b7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6c1f10b9f4b7) -
+  Refactor internal types to make spread props explicit.
+
 ## 13.11.1
 
 ### Patch Changes

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

@@ -38,7 +38,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.1";
+var packageVersion = "13.11.2";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -447,8 +447,6 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         onCalendarSelect: this.onCalendarSelect,
         calendarLocale: locale,
         calendarWeekStartDay: weekStartDay,
-        nextMonthLabel: nextMonthLabel,
-        previousMonthLabel: previousMonthLabel,
         shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
       };
       var mergedStyles = (0, _select.mergeStyles)(selectStyles, {
@@ -485,31 +483,48 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           value: value,
           "data-testid": testId && "".concat(testId, "--input")
         }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
+          appearance: this.props.appearance,
           "aria-describedby": ariaDescribedBy,
           "aria-label": label || undefined,
-          appearance: this.props.appearance,
-          enableAnimation: false,
-          menuIsOpen: menuIsOpen,
-          closeMenuOnSelect: true,
           autoFocus: autoFocus,
+          closeMenuOnSelect: true,
+          components: selectComponents,
+          enableAnimation: false,
           inputId: id,
+          inputValue: actualSelectInputValue,
           isDisabled: isDisabled,
+          menuIsOpen: menuIsOpen,
           onBlur: this.onSelectBlur,
+          onChange: this.onSelectChange,
           onFocus: this.onSelectFocus,
-          inputValue: actualSelectInputValue,
           onInputChange: this.handleSelectInputChange,
-          components: selectComponents,
-          onChange: this.onSelectChange
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          ,
-          styles: mergedStyles,
           placeholder: this.getPlaceholder(),
+          styles: mergedStyles,
           value: initialValue
-        }, selectProps, calendarProps, {
+        }, selectProps, {
+          // These are below the spread because I don't know what is in
+          // selectProps or not and what wil be overwritten
           isClearable: true,
-          spacing: spacing,
           isInvalid: isInvalid,
+          spacing: spacing,
           testId: testId
+          // These aren't part of `Select`'s API, but we're using them here.
+          ,
+          calendarContainerRef: calendarProps.calendarContainerRef,
+          calendarDisabled: calendarProps.calendarDisabled,
+          calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+          calendarLocale: calendarProps.calendarLocale,
+          calendarMaxDate: calendarProps.calendarMaxDate,
+          calendarMinDate: calendarProps.calendarMinDate,
+          calendarRef: calendarProps.calendarRef,
+          calendarValue: calendarProps.calendarValue,
+          calendarView: calendarProps.calendarView,
+          calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+          nextMonthLabel: nextMonthLabel,
+          onCalendarChange: calendarProps.onCalendarChange,
+          onCalendarSelect: calendarProps.onCalendarSelect,
+          previousMonthLabel: previousMonthLabel,
+          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
         })))
       );
     }

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

@@ -34,7 +34,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.1";
+var packageVersion = "13.11.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -268,39 +268,79 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         css: datePickerContainerStyles
       }, (0, _react2.jsx)(_datePicker.default, (0, _extends2.default)({
         appearance: appearance,
-        autoFocus: autoFocus,
-        dateFormat: dateFormat,
-        hideIcon: true,
-        id: id,
-        isDisabled: isDisabled,
-        isInvalid: isInvalid,
-        locale: locale,
-        onBlur: this.onBlur,
-        onChange: this.onDateChange,
-        onFocus: this.onFocus,
+        autoFocus: datePickerProps.autoFocus || autoFocus,
+        dateFormat: datePickerProps.dateFormat || 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
+        // 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
+      } : {}, {
+        locale: datePickerProps.locale || locale,
+        maxDate: datePickerProps.maxDate,
+        minDate: datePickerProps.minDate,
+        name: datePickerProps.name,
+        nextMonthLabel: datePickerProps.nextMonthLabel,
+        onBlur: datePickerProps.onBlur || this.onBlur,
+        onChange: datePickerProps.onChange || this.onDateChange,
+        onFocus: datePickerProps.onFocus || this.onFocus,
+        parseInputValue: datePickerProps.parseInputValue,
+        placeholder: datePickerProps.placeholder,
+        previousMonthLabel: datePickerProps.previousMonthLabel,
         selectProps: mergedDatePickerSelectProps,
-        spacing: spacing,
-        testId: testId && "".concat(testId, "--datepicker"),
-        value: dateValue
-      }, datePickerProps))), (0, _react2.jsx)("div", {
+        spacing: datePickerProps.spacing || spacing,
+        testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
+        value: dateValue,
+        weekStartDay: datePickerProps.weekStartDay
+      }))), (0, _react2.jsx)("div", {
         css: timePickerContainerStyles
       }, (0, _react2.jsx)(_timePicker.default, (0, _extends2.default)({
-        appearance: appearance,
-        hideIcon: true,
-        isDisabled: isDisabled,
-        isInvalid: isInvalid,
-        locale: locale,
-        onBlur: this.onBlur,
-        onChange: this.onTimeChange,
-        onFocus: this.onFocus,
+        appearance: timePickerProps.appearance || appearance,
+        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
+        // 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
+      } : {}, {
+        locale: timePickerProps.locale || locale,
+        name: timePickerProps.name,
+        onBlur: timePickerProps.onBlur || this.onBlur,
+        onChange: timePickerProps.onChange || this.onTimeChange,
+        onFocus: timePickerProps.onFocus || this.onFocus,
+        parseInputValue: timePickerProps.parseInputValue,
+        placeholder: timePickerProps.placeholder,
         selectProps: mergedTimePickerSelectProps,
-        spacing: spacing,
-        testId: testId && "".concat(testId, "--timepicker"),
-        timeFormat: timeFormat,
-        timeIsEditable: timeIsEditable,
-        times: times,
+        spacing: timePickerProps.spacing || spacing,
+        testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
+        timeFormat: timePickerProps.timeFormat || timeFormat,
+        timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
+        times: timePickerProps.times || times,
         value: timeValue
-      }, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
+      }))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
         css: iconContainerStyles,
         onClick: this.onClear,
         "data-testid": testId && "".concat(testId, "--icon--container"),

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

@@ -36,7 +36,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.1";
+var packageVersion = "13.11.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -321,9 +321,7 @@ var TimePickerComponent = exports.TimePickerWithoutAnalytics = /*#__PURE__*/func
         placeholder: placeholder || l10n.formatTime(_internal.placeholderDatetime),
         styles: mergedStyles,
         value: initialValue,
-        spacing: spacing
-        // @ts-ignore caused by prop not part of @atlaskit/select
-        ,
+        spacing: spacing,
         fixedLayerRef: this.containerRef,
         isInvalid: isInvalid,
         testId: testId

package/dist/cjs/internal/fixed-layer-menu.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("@emotion/react");
 var _select = require("@atlaskit/select");
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
-var _excluded = ["selectProps"];
+var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "theme", "children"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -20,14 +20,60 @@ var _excluded = ["selectProps"];
  * This is the fixed layer menu used in the time picker.
  */
 var FixedLayerMenu = exports.FixedLayerMenu = function FixedLayerMenu(_ref) {
-  var selectProps = _ref.selectProps,
+  var className = _ref.className,
+    clearValue = _ref.clearValue,
+    cx = _ref.cx,
+    getStyles = _ref.getStyles,
+    getValue = _ref.getValue,
+    hasValue = _ref.hasValue,
+    innerProps = _ref.innerProps,
+    innerRef = _ref.innerRef,
+    isLoading = _ref.isLoading,
+    isMulti = _ref.isMulti,
+    isRtl = _ref.isRtl,
+    maxMenuHeight = _ref.maxMenuHeight,
+    menuPlacement = _ref.menuPlacement,
+    menuPosition = _ref.menuPosition,
+    menuShouldScrollIntoView = _ref.menuShouldScrollIntoView,
+    minMenuHeight = _ref.minMenuHeight,
+    options = _ref.options,
+    placement = _ref.placement,
+    selectOption = _ref.selectOption,
+    selectProps = _ref.selectProps,
+    setValue = _ref.setValue,
+    theme = _ref.theme,
+    children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.fixedLayerRef,
     content: (0, _react.jsx)(_select.components.Menu, (0, _extends2.default)({}, rest, {
-      menuShouldScrollIntoView: false
-    })),
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
+      className: className,
+      clearValue: clearValue,
+      cx: cx,
+      getStyles: getStyles,
+      getValue: getValue,
+      hasValue: hasValue,
+      innerProps: innerProps,
+      innerRef: innerRef,
+      isLoading: isLoading,
+      isMulti: isMulti,
+      isRtl: isRtl,
+      maxMenuHeight: maxMenuHeight,
+      menuPlacement: menuPlacement,
+      menuPosition: menuPosition,
+      menuShouldScrollIntoView: false || menuShouldScrollIntoView,
+      minMenuHeight: minMenuHeight,
+      options: options,
+      placement: placement,
+      selectOption: selectOption,
+      selectProps: selectProps,
+      setValue: setValue
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
+      ,
+      theme: theme
+    }), children),
     testId: selectProps.testId
   });
 };

package/dist/cjs/internal/menu.js

@@ -19,13 +19,19 @@ var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-function getValidDate(iso) {
-  var date = (0, _dateFns.parseISO)(iso);
-  return (0, _dateFns.isValid)(date) ? {
-    day: date.getDate(),
-    month: date.getMonth() + 1,
-    year: date.getFullYear()
-  } : {};
+/**
+ * @param isos A series of ISO dates.
+ * @returns The last valid date within the array of ISO strings.
+ */
+function getValidDate(isos) {
+  return isos.reduce(function (acc, iso) {
+    var date = (0, _dateFns.parseISO)(iso);
+    return (0, _dateFns.isValid)(date) ? {
+      day: date.getDate(),
+      month: date.getMonth() + 1,
+      year: date.getFullYear()
+    } : acc;
+  }, {});
 }
 var menuStyles = (0, _react.css)({
   zIndex: _constants.layers.dialog(),
@@ -41,6 +47,12 @@ var menuStyles = (0, _react.css)({
 var Menu = exports.Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
+  var calendarValue = selectProps.calendarValue,
+    calendarView = selectProps.calendarView;
+  var _getValidDate = getValidDate([calendarValue, calendarView]),
+    day = _getValidDate.day,
+    month = _getValidDate.month,
+    year = _getValidDate.year;
   return (0, _react.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: false
   }, (0, _react.jsx)(_fixedLayer.default, {
@@ -48,7 +60,10 @@ var Menu = exports.Menu = function Menu(_ref) {
     containerRef: selectProps.calendarContainerRef,
     content: (0, _react.jsx)("div", (0, _extends2.default)({
       css: menuStyles
-    }, innerProps), (0, _react.jsx)(_calendar.default, (0, _extends2.default)({}, getValidDate(selectProps.calendarValue), getValidDate(selectProps.calendarView), {
+    }, innerProps), (0, _react.jsx)(_calendar.default, {
+      day: day,
+      month: month,
+      year: year,
       disabled: selectProps.calendarDisabled,
       disabledDateFilter: selectProps.calendarDisabledDateFilter,
       minDate: selectProps.calendarMinDate,
@@ -63,7 +78,7 @@ var Menu = exports.Menu = function Menu(_ref) {
       locale: selectProps.calendarLocale,
       testId: selectProps.testId && "".concat(selectProps.testId, "--calendar"),
       weekStartDay: selectProps.calendarWeekStartDay
-    }))),
+    })),
     testId: selectProps.testId
   }));
 };

package/dist/cjs/internal/single-value.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _select = require("@atlaskit/select");
-var _excluded = ["children"];
+var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles", "getValue", "hasValue", "isDisabled", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
 /**
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
@@ -18,11 +18,44 @@ var makeSingleValue = exports.makeSingleValue = function makeSingleValue(_ref) {
   var lang = _ref.lang;
   return function (_ref2) {
     var children = _ref2.children,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_select.components.SingleValue, (0, _extends2.default)({}, props, {
+      className = _ref2.className,
+      clearValue = _ref2.clearValue,
+      cx = _ref2.cx,
+      data = _ref2.data,
+      getStyles = _ref2.getStyles,
+      getValue = _ref2.getValue,
+      hasValue = _ref2.hasValue,
+      isDisabled = _ref2.isDisabled,
+      isMulti = _ref2.isMulti,
+      isRtl = _ref2.isRtl,
+      options = _ref2.options,
+      selectOption = _ref2.selectOption,
+      selectProps = _ref2.selectProps,
+      setValue = _ref2.setValue,
+      theme = _ref2.theme,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return /*#__PURE__*/_react.default.createElement(_select.components.SingleValue, (0, _extends2.default)({}, rest, {
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
+      className: className,
+      clearValue: clearValue,
+      cx: cx,
+      data: data,
+      getStyles: getStyles,
+      getValue: getValue,
+      hasValue: hasValue,
       innerProps: {
         lang: lang
-      }
+      },
+      isDisabled: isDisabled,
+      isMulti: isMulti,
+      isRtl: isRtl,
+      options: options,
+      selectOption: selectOption,
+      selectProps: selectProps,
+      setValue: setValue
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
+      ,
+      theme: theme
     }), children);
   };
 };

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

@@ -20,7 +20,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.11.1";
+const packageVersion = "13.11.2";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -448,8 +448,6 @@ class DatePickerComponent extends Component {
       onCalendarSelect: this.onCalendarSelect,
       calendarLocale: locale,
       calendarWeekStartDay: weekStartDay,
-      nextMonthLabel,
-      previousMonthLabel,
       shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
     };
     const mergedStyles = mergeStyles(selectStyles, {
@@ -486,31 +484,48 @@ class DatePickerComponent extends Component {
         value: value,
         "data-testid": testId && `${testId}--input`
       }), jsx(Select, _extends({
+        appearance: this.props.appearance,
         "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
-        appearance: this.props.appearance,
-        enableAnimation: false,
-        menuIsOpen: menuIsOpen,
-        closeMenuOnSelect: true,
         autoFocus: autoFocus,
+        closeMenuOnSelect: true,
+        components: selectComponents,
+        enableAnimation: false,
         inputId: id,
+        inputValue: actualSelectInputValue,
         isDisabled: isDisabled,
+        menuIsOpen: menuIsOpen,
         onBlur: this.onSelectBlur,
+        onChange: this.onSelectChange,
         onFocus: this.onSelectFocus,
-        inputValue: actualSelectInputValue,
         onInputChange: this.handleSelectInputChange,
-        components: selectComponents,
-        onChange: this.onSelectChange
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
-        styles: mergedStyles,
         placeholder: this.getPlaceholder(),
+        styles: mergedStyles,
         value: initialValue
-      }, selectProps, calendarProps, {
+      }, selectProps, {
+        // These are below the spread because I don't know what is in
+        // selectProps or not and what wil be overwritten
         isClearable: true,
-        spacing: spacing,
         isInvalid: isInvalid,
+        spacing: spacing,
         testId: testId
+        // These aren't part of `Select`'s API, but we're using them here.
+        ,
+        calendarContainerRef: calendarProps.calendarContainerRef,
+        calendarDisabled: calendarProps.calendarDisabled,
+        calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+        calendarLocale: calendarProps.calendarLocale,
+        calendarMaxDate: calendarProps.calendarMaxDate,
+        calendarMinDate: calendarProps.calendarMinDate,
+        calendarRef: calendarProps.calendarRef,
+        calendarValue: calendarProps.calendarValue,
+        calendarView: calendarProps.calendarView,
+        calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+        nextMonthLabel: nextMonthLabel,
+        onCalendarChange: calendarProps.onCalendarChange,
+        onCalendarSelect: calendarProps.onCalendarSelect,
+        previousMonthLabel: previousMonthLabel,
+        shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
       })))
     );
   }

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

@@ -20,7 +20,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.1";
+const packageVersion = "13.11.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -256,39 +256,79 @@ class DateTimePickerComponent extends React.Component {
       css: datePickerContainerStyles
     }, jsx(DatePicker, _extends({
       appearance: appearance,
-      autoFocus: autoFocus,
-      dateFormat: dateFormat,
-      hideIcon: true,
-      id: id,
-      isDisabled: isDisabled,
-      isInvalid: isInvalid,
-      locale: locale,
-      onBlur: this.onBlur,
-      onChange: this.onDateChange,
-      onFocus: this.onFocus,
+      autoFocus: datePickerProps.autoFocus || autoFocus,
+      dateFormat: datePickerProps.dateFormat || 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
+      // 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
+    } : {}, {
+      locale: datePickerProps.locale || locale,
+      maxDate: datePickerProps.maxDate,
+      minDate: datePickerProps.minDate,
+      name: datePickerProps.name,
+      nextMonthLabel: datePickerProps.nextMonthLabel,
+      onBlur: datePickerProps.onBlur || this.onBlur,
+      onChange: datePickerProps.onChange || this.onDateChange,
+      onFocus: datePickerProps.onFocus || this.onFocus,
+      parseInputValue: datePickerProps.parseInputValue,
+      placeholder: datePickerProps.placeholder,
+      previousMonthLabel: datePickerProps.previousMonthLabel,
       selectProps: mergedDatePickerSelectProps,
-      spacing: spacing,
-      testId: testId && `${testId}--datepicker`,
-      value: dateValue
-    }, datePickerProps))), jsx("div", {
+      spacing: datePickerProps.spacing || spacing,
+      testId: testId && `${testId}--datepicker` || datePickerProps.testId,
+      value: dateValue,
+      weekStartDay: datePickerProps.weekStartDay
+    }))), jsx("div", {
       css: timePickerContainerStyles
     }, jsx(TimePicker, _extends({
-      appearance: appearance,
-      hideIcon: true,
-      isDisabled: isDisabled,
-      isInvalid: isInvalid,
-      locale: locale,
-      onBlur: this.onBlur,
-      onChange: this.onTimeChange,
-      onFocus: this.onFocus,
+      appearance: timePickerProps.appearance || appearance,
+      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
+      // 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
+    } : {}, {
+      locale: timePickerProps.locale || locale,
+      name: timePickerProps.name,
+      onBlur: timePickerProps.onBlur || this.onBlur,
+      onChange: timePickerProps.onChange || this.onTimeChange,
+      onFocus: timePickerProps.onFocus || this.onFocus,
+      parseInputValue: timePickerProps.parseInputValue,
+      placeholder: timePickerProps.placeholder,
       selectProps: mergedTimePickerSelectProps,
-      spacing: spacing,
-      testId: testId && `${testId}--timepicker`,
-      timeFormat: timeFormat,
-      timeIsEditable: timeIsEditable,
-      times: times,
+      spacing: timePickerProps.spacing || spacing,
+      testId: timePickerProps.testId || testId && `${testId}--timepicker`,
+      timeFormat: timePickerProps.timeFormat || timeFormat,
+      timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
+      times: timePickerProps.times || times,
       value: timeValue
-    }, timePickerProps))), 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

@@ -16,7 +16,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.1";
+const packageVersion = "13.11.2";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -297,9 +297,7 @@ class TimePickerComponent extends React.Component {
       placeholder: placeholder || l10n.formatTime(placeholderDatetime),
       styles: mergedStyles,
       value: initialValue,
-      spacing: spacing
-      // @ts-ignore caused by prop not part of @atlaskit/select
-      ,
+      spacing: spacing,
       fixedLayerRef: this.containerRef,
       isInvalid: isInvalid,
       testId: testId