@atlaskit/datetime-picker 15.9.0 → 15.9.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/datetime-picker
 
+## 15.9.2
+
+### Patch Changes
+
+- [#163831](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163831)
+  [`bdee2726c1e39`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bdee2726c1e39) -
+  Fix bug in calendar date selection caused by underlying `react-select` mousedown event.
+
+## 15.9.1
+
+### Patch Changes
+
+- [#161638](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161638)
+  [`d2e5e5ce0053d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d2e5e5ce0053d) -
+  Use new API of layering without UNSAFE prefix
+
 ## 15.9.0
 
 ### Minor Changes

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

@@ -43,7 +43,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 = "15.9.0";
+var packageVersion = "15.9.2";
 var dropdownIndicatorStyles = (0, _primitives.xcss)({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",

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

@@ -39,7 +39,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,

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

@@ -38,7 +38,7 @@ var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

@@ -37,7 +37,7 @@ function () {
   return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
 }, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/menu.js

@@ -53,14 +53,31 @@ var Menu = exports.Menu = function Menu(_ref) {
     day = _getValidDate.day,
     month = _getValidDate.month,
     year = _getValidDate.year;
-  return (0, _react.jsx)(_layering.UNSAFE_LAYERING, {
+  var onMenuMouseDown = function onMenuMouseDown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  return (0, _react.jsx)(_layering.Layering, {
     isDisabled: false
   }, (0, _react.jsx)(_fixedLayer.default, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content: (0, _react.jsx)("div", (0, _extends2.default)({
+    content:
+    // The mousedown event is required for a date selection to work when
+    // the menu is opened via the calendar button. The reason why is
+    // because there is a mousedown event on the menu inside of
+    // `react-select` that will stop the calendar select event from
+    // firing. This is passed in via the `innerProps`. Therefore, we must
+    // pass it in *after* the `innerProps` spread.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react.jsx)("div", (0, _extends2.default)({
       css: menuStyles
-    }, innerProps), (0, _react.jsx)(_calendar.default, {
+    }, innerProps, {
+      onMouseDown: onMenuMouseDown
+    }), (0, _react.jsx)(_calendar.default, {
       day: day,
       month: month,
       year: year,

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

@@ -26,7 +26,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.9.0";
+const packageVersion = "15.9.2";
 const dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",

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

@@ -24,7 +24,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.9.0";
+const packageVersion = "15.9.2";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,

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

@@ -22,7 +22,7 @@ import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
 const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.9.0";
+const packageVersion = "15.9.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

@@ -18,7 +18,7 @@ const DatePicker = componentWithCondition(
 // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
 () => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.9.0";
+const packageVersion = "15.9.2";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

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

package/dist/es2019/internal/menu.js

@@ -4,10 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
-import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { Layering } from '@atlaskit/layering';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -50,14 +51,31 @@ export const Menu = ({
     month,
     year
   } = getValidDate([calendarValue, calendarView]);
-  return jsx(UNSAFE_LAYERING, {
+  const onMenuMouseDown = event => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  return jsx(Layering, {
     isDisabled: false
   }, jsx(FixedLayer, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content: jsx("div", _extends({
+    content:
+    // The mousedown event is required for a date selection to work when
+    // the menu is opened via the calendar button. The reason why is
+    // because there is a mousedown event on the menu inside of
+    // `react-select` that will stop the calendar select event from
+    // firing. This is passed in via the `innerProps`. Therefore, we must
+    // pass it in *after* the `innerProps` spread.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("div", _extends({
       css: menuStyles
-    }, innerProps), jsx(Calendar, {
+    }, innerProps, {
+      onMouseDown: onMenuMouseDown
+    }), jsx(Calendar, {
       day: day,
       month: month,
       year: year,

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

@@ -36,7 +36,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 var dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",

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

@@ -30,7 +30,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,

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

@@ -34,7 +34,7 @@ var DatePicker = componentWithCondition(function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -27,7 +27,7 @@ function () {
   return fg('dst-date-picker-use-functional-component');
 }, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.9.0";
+var packageVersion = "15.9.2";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

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

package/dist/esm/internal/menu.js

@@ -4,10 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
-import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { Layering } from '@atlaskit/layering';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
@@ -46,14 +47,31 @@ export var Menu = function Menu(_ref) {
     day = _getValidDate.day,
     month = _getValidDate.month,
     year = _getValidDate.year;
-  return jsx(UNSAFE_LAYERING, {
+  var onMenuMouseDown = function onMenuMouseDown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  return jsx(Layering, {
     isDisabled: false
   }, jsx(FixedLayer, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content: jsx("div", _extends({
+    content:
+    // The mousedown event is required for a date selection to work when
+    // the menu is opened via the calendar button. The reason why is
+    // because there is a mousedown event on the menu inside of
+    // `react-select` that will stop the calendar select event from
+    // firing. This is passed in via the `innerProps`. Therefore, we must
+    // pass it in *after* the `innerProps` spread.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("div", _extends({
       css: menuStyles
-    }, innerProps), jsx(Calendar, {
+    }, innerProps, {
+      onMouseDown: onMenuMouseDown
+    }), jsx(Calendar, {
       day: day,
       month: month,
       year: year,

package/dist/types/internal/menu.d.ts

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { jsx } from '@emotion/react';
 import { type MenuProps } from '@atlaskit/select';
 /**

package/dist/types-ts4.5/internal/menu.d.ts

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { jsx } from '@emotion/react';
 import { type MenuProps } from '@atlaskit/select';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "15.9.0",
+	"version": "15.9.2",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,9 +38,9 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.3.1",
 		"@atlaskit/calendar": "^15.1.0",
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/ds-lib": "^3.2.0",
 		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/layering": "^0.7.0",
+		"@atlaskit/layering": "^0.7.3",
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",