@atlaskit/datetime-picker 15.9.2 → 15.9.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/datetime-picker
 
+## 15.9.3
+
+### Patch Changes
+
+- [#165423](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165423)
+  [`f07cb14952573`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f07cb14952573) -
+  Update internals of datetime picker to accommodate new props.
+- [#165989](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165989)
+  [`4e6b0a538b8a2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4e6b0a538b8a2) -
+  Fix bug that stopped down/up arrow presses from opening the menu on the input field.
+
 ## 15.9.2
 
 ### Patch 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.2";
+var packageVersion = "15.9.3";
 var dropdownIndicatorStyles = (0, _primitives.xcss)({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -331,8 +331,9 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
           break;
         case 'arrowdown':
         case 'arrowup':
-          if (_this.state.isOpen && !_this.state.shouldSetFocusOnCurrentDay) {
+          if (!_this.state.shouldSetFocusOnCurrentDay) {
             _this.setState({
+              isOpen: true,
               shouldSetFocusOnCurrentDay: true
             });
           }
@@ -342,6 +343,11 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarButtonKeyDown", function (e) {
+      // Don't allow an arrow up or down to open the menu, since the input key
+      // down handler is actually on the parent.
+      if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+        e.stopPropagation();
+      }
       // We want to stop this from triggering other keydown events, particularly
       // for space and enter presses. Otherwise, it opens and then closes
       // immediately.

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.2";
+var packageVersion = "15.9.3";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -414,7 +414,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
         break;
       case 'arrowdown':
       case 'arrowup':
-        if (isOpen && !shouldSetFocusOnCurrentDay) {
+        if (!shouldSetFocusOnCurrentDay) {
+          setIsOpen(true);
           setShouldSetFocusOnCurrentDay(true);
         }
         break;
@@ -423,6 +424,11 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     }
   };
   var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(e) {
+    // Don't allow an arrow up or down to open the menu, since the input key
+    // down handler is actually on the parent.
+    if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.stopPropagation();
+    }
     // We want to stop this from triggering other keydown events, particularly
     // for space and enter presses. Otherwise, it opens and then closes
     // immediately.

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.2";
+var packageVersion = "15.9.3";
 // 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.2";
+var packageVersion = "15.9.3";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -319,6 +319,8 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     icon: datePickerProps.icon,
     id: datePickerProps.id || id,
     innerProps: datePickerProps.innerProps,
+    inputLabel: datePickerProps.inputLabel,
+    inputLabelId: datePickerProps.inputLabelId,
     isDisabled: datePickerProps.isDisabled || isDisabled,
     isInvalid: datePickerProps.isInvalid || isInvalid,
     isOpen: datePickerProps.isOpen,
@@ -332,10 +334,12 @@ var DateTimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onBlur: onDateBlur,
     onChange: onDateChange,
     onFocus: onDateFocus,
+    openCalendarLabel: datePickerProps.openCalendarLabel,
     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,

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

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.2";
+const packageVersion = "15.9.3";
 const dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -314,8 +314,9 @@ class DatePickerComponent extends Component {
           break;
         case 'arrowdown':
         case 'arrowup':
-          if (this.state.isOpen && !this.state.shouldSetFocusOnCurrentDay) {
+          if (!this.state.shouldSetFocusOnCurrentDay) {
             this.setState({
+              isOpen: true,
               shouldSetFocusOnCurrentDay: true
             });
           }
@@ -325,6 +326,11 @@ class DatePickerComponent extends Component {
       }
     });
     _defineProperty(this, "onCalendarButtonKeyDown", e => {
+      // Don't allow an arrow up or down to open the menu, since the input key
+      // down handler is actually on the parent.
+      if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+        e.stopPropagation();
+      }
       // We want to stop this from triggering other keydown events, particularly
       // for space and enter presses. Otherwise, it opens and then closes
       // immediately.

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.2";
+const packageVersion = "15.9.3";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
@@ -340,7 +340,8 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         break;
       case 'arrowdown':
       case 'arrowup':
-        if (isOpen && !shouldSetFocusOnCurrentDay) {
+        if (!shouldSetFocusOnCurrentDay) {
+          setIsOpen(true);
           setShouldSetFocusOnCurrentDay(true);
         }
         break;
@@ -349,6 +350,11 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }
   };
   const onCalendarButtonKeyDown = e => {
+    // Don't allow an arrow up or down to open the menu, since the input key
+    // down handler is actually on the parent.
+    if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.stopPropagation();
+    }
     // We want to stop this from triggering other keydown events, particularly
     // for space and enter presses. Otherwise, it opens and then closes
     // immediately.

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.2";
+const packageVersion = "15.9.3";
 // 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.2";
+const packageVersion = "15.9.3";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,
@@ -281,6 +281,8 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     icon: datePickerProps.icon,
     id: datePickerProps.id || id,
     innerProps: datePickerProps.innerProps,
+    inputLabel: datePickerProps.inputLabel,
+    inputLabelId: datePickerProps.inputLabelId,
     isDisabled: datePickerProps.isDisabled || isDisabled,
     isInvalid: datePickerProps.isInvalid || isInvalid,
     isOpen: datePickerProps.isOpen,
@@ -294,10 +296,12 @@ const DateTimePicker = /*#__PURE__*/forwardRef(({
     onBlur: onDateBlur,
     onChange: onDateChange,
     onFocus: onDateFocus,
+    openCalendarLabel: datePickerProps.openCalendarLabel,
     parseInputValue: datePickerProps.parseInputValue,
     placeholder: datePickerProps.placeholder,
     previousMonthLabel: datePickerProps.previousMonthLabel,
     selectProps: mergedDatePickerSelectProps,
+    shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
     spacing: datePickerProps.spacing || spacing,
     testId: testId && `${testId}--datepicker` || datePickerProps.testId,
     value: dateValue,

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

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.2";
+var packageVersion = "15.9.3";
 var dropdownIndicatorStyles = xcss({
   minWidth: "var(--ds-space-300, 24px)",
   minHeight: "var(--ds-space-300, 24px)",
@@ -324,8 +324,9 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
           break;
         case 'arrowdown':
         case 'arrowup':
-          if (_this.state.isOpen && !_this.state.shouldSetFocusOnCurrentDay) {
+          if (!_this.state.shouldSetFocusOnCurrentDay) {
             _this.setState({
+              isOpen: true,
               shouldSetFocusOnCurrentDay: true
             });
           }
@@ -335,6 +336,11 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onCalendarButtonKeyDown", function (e) {
+      // Don't allow an arrow up or down to open the menu, since the input key
+      // down handler is actually on the parent.
+      if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+        e.stopPropagation();
+      }
       // We want to stop this from triggering other keydown events, particularly
       // for space and enter presses. Otherwise, it opens and then closes
       // immediately.

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.2";
+var packageVersion = "15.9.3";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -405,7 +405,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
         break;
       case 'arrowdown':
       case 'arrowup':
-        if (isOpen && !shouldSetFocusOnCurrentDay) {
+        if (!shouldSetFocusOnCurrentDay) {
+          setIsOpen(true);
           setShouldSetFocusOnCurrentDay(true);
         }
         break;
@@ -414,6 +415,11 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     }
   };
   var onCalendarButtonKeyDown = function onCalendarButtonKeyDown(e) {
+    // Don't allow an arrow up or down to open the menu, since the input key
+    // down handler is actually on the parent.
+    if (e.type === 'keydown' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.stopPropagation();
+    }
     // We want to stop this from triggering other keydown events, particularly
     // for space and enter presses. Otherwise, it opens and then closes
     // immediately.

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.2";
+var packageVersion = "15.9.3";
 // 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.2";
+var packageVersion = "15.9.3";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,
@@ -309,6 +309,8 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     icon: datePickerProps.icon,
     id: datePickerProps.id || id,
     innerProps: datePickerProps.innerProps,
+    inputLabel: datePickerProps.inputLabel,
+    inputLabelId: datePickerProps.inputLabelId,
     isDisabled: datePickerProps.isDisabled || isDisabled,
     isInvalid: datePickerProps.isInvalid || isInvalid,
     isOpen: datePickerProps.isOpen,
@@ -322,10 +324,12 @@ var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur: onDateBlur,
     onChange: onDateChange,
     onFocus: onDateFocus,
+    openCalendarLabel: datePickerProps.openCalendarLabel,
     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,

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "15.9.2",
+	"version": "15.9.3",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
-		"@atlaskit/primitives": "^13.1.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/select": "^18.5.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.2.0",