@atlaskit/editor-plugin-date 12.2.5 → 12.2.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-date
 
+## 12.2.7
+
+### Patch Changes
+
+- [`832b5c12a55e7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/832b5c12a55e7) -
+  Improve date picker keyboard behaviour in modal-mounted editor popups behind
+  create_work_item_modernization_exp or platform_editor_datepicker_focus_fix.
+- Updated dependencies
+
+## 12.2.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.2.5
 
 ### Patch Changes

package/dist/cjs/ui/DatePicker/date-picker-input.js

@@ -19,7 +19,9 @@ var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _form = require("@atlaskit/form");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _formatParse = require("./utils/formatParse");
 var _internal = require("./utils/internal");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -135,6 +137,11 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
       if (adjustment === undefined) {
         return;
       }
+
+      // focus trap for arrow keys in input field
+      if ((0, _platformFeatureFlags.fg)('platform_editor_datepicker_focus_fix') || (0, _expValEquals.expValEquals)('create_work_item_modernization_exp', 'isEnabled', true)) {
+        event.stopPropagation();
+      }
       var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
       var cursorPos = (_this$inputRef3 = _this.inputRef) === null || _this$inputRef3 === void 0 ? void 0 : _this$inputRef3.selectionStart;
       if (cursorPos === null || cursorPos === undefined) {
@@ -215,13 +222,14 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps) {
       var setInputSelectionPos = this.setInputSelectionPos;
       if (this.inputRef && setInputSelectionPos !== undefined) {
         this.inputRef.setSelectionRange(setInputSelectionPos, setInputSelectionPos);
         this.setInputSelectionPos = undefined;
       }
-      if (this.inputRef && this.props.autoFocus) {
+      var shouldFocusInput = (0, _platformFeatureFlags.fg)('platform_editor_datepicker_focus_fix') || (0, _expValEquals.expValEquals)('create_work_item_modernization_exp', 'isEnabled', true) ? !prevProps.autoFocus && this.props.autoFocus : this.props.autoFocus;
+      if (this.inputRef && shouldFocusInput) {
         this.focusInput();
       }
 

package/dist/es2019/ui/DatePicker/date-picker-input.js

@@ -7,7 +7,9 @@ import { injectIntl } from 'react-intl';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { dateMessages as messages } from '@atlaskit/editor-common/messages';
 import { ErrorMessage } from '@atlaskit/form';
+import { fg } from '@atlaskit/platform-feature-flags';
 import TextField from '@atlaskit/textfield';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { formatDateType, parseDateType } from './utils/formatParse';
 import { adjustDate, findDateSegmentByPosition, isDatePossiblyValid } from './utils/internal';
 
@@ -125,6 +127,11 @@ class DatePickerInput extends React.Component {
       if (adjustment === undefined) {
         return;
       }
+
+      // focus trap for arrow keys in input field
+      if (fg('platform_editor_datepicker_focus_fix') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true)) {
+        event.stopPropagation();
+      }
       const {
         dispatchAnalyticsEvent
       } = this.props;
@@ -208,13 +215,14 @@ class DatePickerInput extends React.Component {
       "aria-label": formatMessage(messages.onKeyUpDownText)
     }), displayError && /*#__PURE__*/React.createElement(ErrorMessage, null, formatMessage(messages.invalidDateError)));
   }
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     const setInputSelectionPos = this.setInputSelectionPos;
     if (this.inputRef && setInputSelectionPos !== undefined) {
       this.inputRef.setSelectionRange(setInputSelectionPos, setInputSelectionPos);
       this.setInputSelectionPos = undefined;
     }
-    if (this.inputRef && this.props.autoFocus) {
+    const shouldFocusInput = fg('platform_editor_datepicker_focus_fix') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true) ? !prevProps.autoFocus && this.props.autoFocus : this.props.autoFocus;
+    if (this.inputRef && shouldFocusInput) {
       this.focusInput();
     }
 

package/dist/esm/ui/DatePicker/date-picker-input.js

@@ -14,7 +14,9 @@ import { injectIntl } from 'react-intl';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { dateMessages as messages } from '@atlaskit/editor-common/messages';
 import { ErrorMessage } from '@atlaskit/form';
+import { fg } from '@atlaskit/platform-feature-flags';
 import TextField from '@atlaskit/textfield';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { formatDateType, parseDateType } from './utils/formatParse';
 import { adjustDate, findDateSegmentByPosition, isDatePossiblyValid } from './utils/internal';
 
@@ -129,6 +131,11 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
       if (adjustment === undefined) {
         return;
       }
+
+      // focus trap for arrow keys in input field
+      if (fg('platform_editor_datepicker_focus_fix') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true)) {
+        event.stopPropagation();
+      }
       var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
       var cursorPos = (_this$inputRef3 = _this.inputRef) === null || _this$inputRef3 === void 0 ? void 0 : _this$inputRef3.selectionStart;
       if (cursorPos === null || cursorPos === undefined) {
@@ -209,13 +216,14 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps) {
       var setInputSelectionPos = this.setInputSelectionPos;
       if (this.inputRef && setInputSelectionPos !== undefined) {
         this.inputRef.setSelectionRange(setInputSelectionPos, setInputSelectionPos);
         this.setInputSelectionPos = undefined;
       }
-      if (this.inputRef && this.props.autoFocus) {
+      var shouldFocusInput = fg('platform_editor_datepicker_focus_fix') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true) ? !prevProps.autoFocus && this.props.autoFocus : this.props.autoFocus;
+      if (this.inputRef && shouldFocusInput) {
         this.focusInput();
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-date",
-	"version": "12.2.5",
+	"version": "12.2.7",
 	"description": "Date plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.14.0",
+		"@atlaskit/adf-schema": "^52.15.0",
 		"@atlaskit/calendar": "^17.2.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
@@ -43,8 +43,8 @@
 		"@atlaskit/locale": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^84.0.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/tmp-editor-statsig": "^85.0.0",
+		"@atlaskit/tokens": "^13.1.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
@@ -58,7 +58,7 @@
 		"react-intl": "^6.6.2"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.47.0",
+		"@atlaskit/editor-common": "^114.51.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -104,6 +104,9 @@
 		},
 		"platform_editor_adf_with_localid": {
 			"type": "boolean"
+		},
+		"platform_editor_datepicker_focus_fix": {
+			"type": "boolean"
 		}
 	}
 }