@atlaskit/datetime-picker 13.3.4 → 13.3.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/datetime-picker
 
+## 13.3.5
+
+### Patch Changes
+
+- [#95171](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95171) [`22defdb991da`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22defdb991da) - [ux] Open date picker calendar when enter or space is pressed while input is focused and calendar is closed.
+
 ## 13.3.4
 
 ### Patch Changes

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

@@ -36,7 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.3.4";
+var packageVersion = "13.3.5";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -205,6 +205,13 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
         value = _this$getSafeState2.value,
         calendarValue = _this$getSafeState2.calendarValue;
       var keyPressed = event.key.toLowerCase();
+
+      // If the input is focused and the calendar is not visible, handle space and enter clicks
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team-date-picker-input-focus-fix_awmzp') && !_this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+        _this.setState({
+          isOpen: true
+        });
+      }
       switch (keyPressed) {
         case 'escape':
           // Yes, this is not ideal. The alternative is to be able to place a ref

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

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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; } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.3.4";
+var packageVersion = "13.3.5";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

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

@@ -16,7 +16,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.3.4";
+const packageVersion = "13.3.5";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -183,6 +183,13 @@ class DatePicker extends Component {
         calendarValue
       } = this.getSafeState();
       const keyPressed = event.key.toLowerCase();
+
+      // If the input is focused and the calendar is not visible, handle space and enter clicks
+      if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp') && !this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+        this.setState({
+          isOpen: true
+        });
+      }
       switch (keyPressed) {
         case 'escape':
           // Yes, this is not ideal. The alternative is to be able to place a ref

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

@@ -15,7 +15,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.3.4";
+const packageVersion = "13.3.5";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

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

@@ -27,7 +27,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.3.4";
+var packageVersion = "13.3.5";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -196,6 +196,13 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         value = _this$getSafeState2.value,
         calendarValue = _this$getSafeState2.calendarValue;
       var keyPressed = event.key.toLowerCase();
+
+      // If the input is focused and the calendar is not visible, handle space and enter clicks
+      if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp') && !_this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+        _this.setState({
+          isOpen: true
+        });
+      }
       switch (keyPressed) {
         case 'escape':
           // Yes, this is not ideal. The alternative is to be able to place a ref

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

@@ -25,7 +25,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.3.4";
+var packageVersion = "13.3.5";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

package/dist/types/components/date-picker.d.ts

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import { CalendarRef } from '@atlaskit/calendar';
-import { LocalizationProvider } from '@atlaskit/locale';
-import { ActionMeta, DropdownIndicatorProps, InputActionMeta, OptionType, ValueType } from '@atlaskit/select';
-import { Appearance, DatePickerBaseProps, Spacing } from '../types';
+import { type CalendarRef } from '@atlaskit/calendar';
+import { type LocalizationProvider } from '@atlaskit/locale';
+import { type ActionMeta, type DropdownIndicatorProps, type InputActionMeta, type OptionType, type ValueType } from '@atlaskit/select';
+import { type Appearance, type DatePickerBaseProps, type Spacing } from '../types';
 type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
 interface State {
     isOpen: boolean;

package/dist/types-ts4.5/components/date-picker.d.ts

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import { CalendarRef } from '@atlaskit/calendar';
-import { LocalizationProvider } from '@atlaskit/locale';
-import { ActionMeta, DropdownIndicatorProps, InputActionMeta, OptionType, ValueType } from '@atlaskit/select';
-import { Appearance, DatePickerBaseProps, Spacing } from '../types';
+import { type CalendarRef } from '@atlaskit/calendar';
+import { type LocalizationProvider } from '@atlaskit/locale';
+import { type ActionMeta, type DropdownIndicatorProps, type InputActionMeta, type OptionType, type ValueType } from '@atlaskit/select';
+import { type Appearance, type DatePickerBaseProps, type Spacing } from '../types';
 type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
 interface State {
     isOpen: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "13.3.4",
+  "version": "13.3.5",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/layering": "^0.2.0",
-    "@atlaskit/locale": "^2.6.0",
+    "@atlaskit/locale": "^2.7.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/select": "^17.7.0",
@@ -66,7 +66,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^9.3.0",
     "@atlaskit/modal-dialog": "^12.12.0",
-    "@atlaskit/popup": "^1.14.0",
+    "@atlaskit/popup": "^1.15.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",