@atlaskit/datetime-picker 13.7.4 → 13.7.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/datetime-picker
 
+## 13.7.6
+
+### Patch Changes
+
+- [#125675](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125675)
+  [`56a62aafb8d80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56a62aafb8d80) -
+  Refactoring to make locally defined variables that were assigned as spread props explicit.
+
+## 13.7.5
+
+### Patch Changes
+
+- [#123484](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123484)
+  [`404b4cb52e659`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/404b4cb52e659) -
+  Launch layering in datetime picker to fix escape close issue
+
 ## 13.7.4
 
 ### Patch Changes

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

@@ -39,7 +39,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.7.4";
+var packageVersion = "13.7.6";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,

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.7.4";
+var packageVersion = "13.7.6";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -211,34 +211,29 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
     value: function render() {
       var _this$props = this.props,
         ariaDescribedBy = _this$props['aria-describedby'],
+        appearance = _this$props.appearance,
         autoFocus = _this$props.autoFocus,
+        dateFormat = _this$props.dateFormat,
+        datePickerProps = _this$props.datePickerProps,
+        datePickerSelectProps = _this$props.datePickerSelectProps,
         id = _this$props.id,
         innerProps = _this$props.innerProps,
         isDisabled = _this$props.isDisabled,
+        isInvalid = _this$props.isInvalid,
+        locale = _this$props.locale,
         name = _this$props.name,
+        spacing = _this$props.spacing,
+        testId = _this$props.testId,
+        timeFormat = _this$props.timeFormat,
         timeIsEditable = _this$props.timeIsEditable,
-        dateFormat = _this$props.dateFormat,
-        datePickerProps = _this$props.datePickerProps,
-        datePickerSelectProps = _this$props.datePickerSelectProps,
         timePickerProps = _this$props.timePickerProps,
         timePickerSelectProps = _this$props.timePickerSelectProps,
-        times = _this$props.times,
-        timeFormat = _this$props.timeFormat,
-        locale = _this$props.locale,
-        testId = _this$props.testId;
+        times = _this$props.times;
       var _this$getSafeState = this.getSafeState(),
         isFocused = _this$getSafeState.isFocused,
         value = _this$getSafeState.value,
         dateValue = _this$getSafeState.dateValue,
         timeValue = _this$getSafeState.timeValue;
-      var bothProps = {
-        isDisabled: isDisabled,
-        onBlur: this.onBlur,
-        onFocus: this.onFocus,
-        isInvalid: this.props.isInvalid,
-        appearance: this.props.appearance,
-        spacing: this.props.spacing
-      };
       var _datePickerSelectProp = datePickerSelectProps.styles,
         datePickerStyles = _datePickerSelectProp === void 0 ? {} : _datePickerSelectProp;
       var _timePickerSelectProp = timePickerSelectProps.styles,
@@ -258,10 +253,10 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
       return (0, _react2.jsx)(_dateTimePickerContainer.DateTimePickerContainer, {
-        appearance: bothProps.appearance,
+        appearance: appearance,
         isDisabled: isDisabled,
         isFocused: isFocused,
-        isInvalid: bothProps.isInvalid,
+        isInvalid: isInvalid,
         testId: testId,
         innerProps: innerProps
       }, (0, _react2.jsx)("input", {
@@ -271,28 +266,40 @@ var DateTimePickerComponent = exports.DateTimePickerWithoutAnalytics = /*#__PURE
         "data-testid": testId && "".concat(testId, "--input")
       }), (0, _react2.jsx)("div", {
         css: datePickerContainerStyles
-      }, (0, _react2.jsx)(_datePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, (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,
         selectProps: mergedDatePickerSelectProps,
-        value: dateValue,
-        locale: locale,
-        testId: testId && "".concat(testId, "--datepicker")
+        spacing: spacing,
+        testId: testId && "".concat(testId, "--datepicker"),
+        value: dateValue
       }, datePickerProps))), (0, _react2.jsx)("div", {
         css: timePickerContainerStyles
-      }, (0, _react2.jsx)(_timePicker.default, (0, _extends2.default)({}, bothProps, {
+      }, (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,
         selectProps: mergedTimePickerSelectProps,
-        value: timeValue,
+        spacing: spacing,
+        testId: testId && "".concat(testId, "--timepicker"),
+        timeFormat: timeFormat,
         timeIsEditable: timeIsEditable,
         times: times,
-        timeFormat: timeFormat,
-        locale: locale,
-        testId: testId && "".concat(testId, "--timepicker")
+        value: timeValue
       }, timePickerProps))), isClearable && !isDisabled ? (0, _react2.jsx)("button", {
         css: iconContainerStyles,
         onClick: this.onClear,

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.7.4";
+var packageVersion = "13.7.6";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/menu.js

@@ -10,7 +10,6 @@ var _react = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
 var _layering = require("@atlaskit/layering");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _fixedLayer = _interopRequireDefault(require("../internal/fixed-layer"));
@@ -43,7 +42,7 @@ var Menu = exports.Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   return (0, _react.jsx)(_layering.UNSAFE_LAYERING, {
-    isDisabled: (0, _platformFeatureFlags.fg)('platform.design-system-team.layering_qmiw3') ? false : true
+    isDisabled: false
   }, (0, _react.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,

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

@@ -21,7 +21,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.7.4";
+const packageVersion = "13.7.6";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,

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.7.4";
+const packageVersion = "13.7.6";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -193,21 +193,24 @@ class DateTimePickerComponent extends React.Component {
   render() {
     const {
       'aria-describedby': ariaDescribedBy,
+      appearance,
       autoFocus,
+      dateFormat,
+      datePickerProps,
+      datePickerSelectProps,
       id,
       innerProps,
       isDisabled,
+      isInvalid,
+      locale,
       name,
+      spacing,
+      testId,
+      timeFormat,
       timeIsEditable,
-      dateFormat,
-      datePickerProps,
-      datePickerSelectProps,
       timePickerProps,
       timePickerSelectProps,
-      times,
-      timeFormat,
-      locale,
-      testId
+      times
     } = this.props;
     const {
       isFocused,
@@ -215,14 +218,6 @@ class DateTimePickerComponent extends React.Component {
       dateValue,
       timeValue
     } = this.getSafeState();
-    const bothProps = {
-      isDisabled,
-      onBlur: this.onBlur,
-      onFocus: this.onFocus,
-      isInvalid: this.props.isInvalid,
-      appearance: this.props.appearance,
-      spacing: this.props.spacing
-    };
     const {
       styles: datePickerStyles = {}
     } = datePickerSelectProps;
@@ -246,10 +241,10 @@ class DateTimePickerComponent extends React.Component {
     // Don't use Date or TimePicker's because they can't be customised
     const isClearable = Boolean(dateValue || timeValue);
     return jsx(DateTimePickerContainer, {
-      appearance: bothProps.appearance,
+      appearance: appearance,
       isDisabled: isDisabled,
       isFocused: isFocused,
-      isInvalid: bothProps.isInvalid,
+      isInvalid: isInvalid,
       testId: testId,
       innerProps: innerProps
     }, jsx("input", {
@@ -259,28 +254,40 @@ class DateTimePickerComponent extends React.Component {
       "data-testid": testId && `${testId}--input`
     }), jsx("div", {
       css: datePickerContainerStyles
-    }, jsx(DatePicker, _extends({}, bothProps, {
+    }, 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,
       selectProps: mergedDatePickerSelectProps,
-      value: dateValue,
-      locale: locale,
-      testId: testId && `${testId}--datepicker`
+      spacing: spacing,
+      testId: testId && `${testId}--datepicker`,
+      value: dateValue
     }, datePickerProps))), jsx("div", {
       css: timePickerContainerStyles
-    }, jsx(TimePicker, _extends({}, bothProps, {
+    }, jsx(TimePicker, _extends({
+      appearance: appearance,
       hideIcon: true,
+      isDisabled: isDisabled,
+      isInvalid: isInvalid,
+      locale: locale,
+      onBlur: this.onBlur,
       onChange: this.onTimeChange,
+      onFocus: this.onFocus,
       selectProps: mergedTimePickerSelectProps,
-      value: timeValue,
+      spacing: spacing,
+      testId: testId && `${testId}--timepicker`,
+      timeFormat: timeFormat,
       timeIsEditable: timeIsEditable,
       times: times,
-      timeFormat: timeFormat,
-      locale: locale,
-      testId: testId && `${testId}--timepicker`
+      value: timeValue
     }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
       css: iconContainerStyles,
       onClick: this.onClear,

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.7.4";
+const packageVersion = "13.7.6";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/menu.js

@@ -8,7 +8,6 @@ import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -35,7 +34,7 @@ export const Menu = ({
   selectProps,
   innerProps
 }) => jsx(UNSAFE_LAYERING, {
-  isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
+  isDisabled: false
 }, jsx(FixedLayer, {
   inputValue: selectProps.inputValue,
   containerRef: selectProps.calendarContainerRef,

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

@@ -32,7 +32,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.7.4";
+var packageVersion = "13.7.6";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,

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

@@ -30,7 +30,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.4";
+var packageVersion = "13.7.6";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -207,34 +207,29 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
         ariaDescribedBy = _this$props['aria-describedby'],
+        appearance = _this$props.appearance,
         autoFocus = _this$props.autoFocus,
+        dateFormat = _this$props.dateFormat,
+        datePickerProps = _this$props.datePickerProps,
+        datePickerSelectProps = _this$props.datePickerSelectProps,
         id = _this$props.id,
         innerProps = _this$props.innerProps,
         isDisabled = _this$props.isDisabled,
+        isInvalid = _this$props.isInvalid,
+        locale = _this$props.locale,
         name = _this$props.name,
+        spacing = _this$props.spacing,
+        testId = _this$props.testId,
+        timeFormat = _this$props.timeFormat,
         timeIsEditable = _this$props.timeIsEditable,
-        dateFormat = _this$props.dateFormat,
-        datePickerProps = _this$props.datePickerProps,
-        datePickerSelectProps = _this$props.datePickerSelectProps,
         timePickerProps = _this$props.timePickerProps,
         timePickerSelectProps = _this$props.timePickerSelectProps,
-        times = _this$props.times,
-        timeFormat = _this$props.timeFormat,
-        locale = _this$props.locale,
-        testId = _this$props.testId;
+        times = _this$props.times;
       var _this$getSafeState = this.getSafeState(),
         isFocused = _this$getSafeState.isFocused,
         value = _this$getSafeState.value,
         dateValue = _this$getSafeState.dateValue,
         timeValue = _this$getSafeState.timeValue;
-      var bothProps = {
-        isDisabled: isDisabled,
-        onBlur: this.onBlur,
-        onFocus: this.onFocus,
-        isInvalid: this.props.isInvalid,
-        appearance: this.props.appearance,
-        spacing: this.props.spacing
-      };
       var _datePickerSelectProp = datePickerSelectProps.styles,
         datePickerStyles = _datePickerSelectProp === void 0 ? {} : _datePickerSelectProp;
       var _timePickerSelectProp = timePickerSelectProps.styles,
@@ -254,10 +249,10 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
       // Don't use Date or TimePicker's because they can't be customised
       var isClearable = Boolean(dateValue || timeValue);
       return jsx(DateTimePickerContainer, {
-        appearance: bothProps.appearance,
+        appearance: appearance,
         isDisabled: isDisabled,
         isFocused: isFocused,
-        isInvalid: bothProps.isInvalid,
+        isInvalid: isInvalid,
         testId: testId,
         innerProps: innerProps
       }, jsx("input", {
@@ -267,28 +262,40 @@ var DateTimePickerComponent = /*#__PURE__*/function (_React$Component) {
         "data-testid": testId && "".concat(testId, "--input")
       }), jsx("div", {
         css: datePickerContainerStyles
-      }, jsx(DatePicker, _extends({}, bothProps, {
+      }, 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,
         selectProps: mergedDatePickerSelectProps,
-        value: dateValue,
-        locale: locale,
-        testId: testId && "".concat(testId, "--datepicker")
+        spacing: spacing,
+        testId: testId && "".concat(testId, "--datepicker"),
+        value: dateValue
       }, datePickerProps))), jsx("div", {
         css: timePickerContainerStyles
-      }, jsx(TimePicker, _extends({}, bothProps, {
+      }, jsx(TimePicker, _extends({
+        appearance: appearance,
         hideIcon: true,
+        isDisabled: isDisabled,
+        isInvalid: isInvalid,
+        locale: locale,
+        onBlur: this.onBlur,
         onChange: this.onTimeChange,
+        onFocus: this.onFocus,
         selectProps: mergedTimePickerSelectProps,
-        value: timeValue,
+        spacing: spacing,
+        testId: testId && "".concat(testId, "--timepicker"),
+        timeFormat: timeFormat,
         timeIsEditable: timeIsEditable,
         times: times,
-        timeFormat: timeFormat,
-        locale: locale,
-        testId: testId && "".concat(testId, "--timepicker")
+        value: timeValue
       }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
         css: iconContainerStyles,
         onClick: this.onClear,

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

@@ -28,7 +28,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.7.4";
+var packageVersion = "13.7.6";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/menu.js

@@ -8,7 +8,6 @@ import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -35,7 +34,7 @@ export var Menu = function Menu(_ref) {
   var selectProps = _ref.selectProps,
     innerProps = _ref.innerProps;
   return jsx(UNSAFE_LAYERING, {
-    isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
+    isDisabled: false
   }, jsx(FixedLayer, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "13.7.4",
+	"version": "13.7.6",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,14 +42,14 @@
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/calendar": "^14.4.0",
 		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/icon": "^22.7.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/layering": "^0.3.0",
 		"@atlaskit/locale": "^2.7.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/select": "^17.11.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"date-fns": "^2.17.0",
@@ -104,9 +104,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.design-system-team.layering_qmiw3": {
-			"type": "boolean"
-		},
 		"platform.design-system-team.date-picker-input-a11y-fix_cbbxs": {
 			"type": "boolean"
 		},