@atlaskit/editor-plugin-status 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-status
 
+## 0.2.0
+
+### Minor Changes
+
+- [#42325](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42325) [`58f1fd91d09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58f1fd91d09) - ED-20512 Set Focus on status input field when tab is pressed
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.removeStatus = exports.createStatus = exports.commitStatusPicker = exports.DEFAULT_STATUS = void 0;
+exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.setFocusOnStatusInput = exports.removeStatus = exports.createStatus = exports.commitStatusPicker = exports.DEFAULT_STATUS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -108,6 +108,18 @@ var removeStatus = exports.removeStatus = function removeStatus(showStatusPicker
     return tr;
   };
 };
+var setFocusOnStatusInput = exports.setFocusOnStatusInput = function setFocusOnStatusInput() {
+  return function (state, dispatch) {
+    if (!dispatch) {
+      return false;
+    }
+    var tr = state.tr.setMeta(_pluginKey.pluginKey, {
+      focusStatusInput: true
+    });
+    dispatch(tr);
+    return true;
+  };
+};
 var handleClosingByArrows = function handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr) {
   if (closingMethod === 'arrowLeft') {
     // put cursor right before status Lozenge
@@ -135,6 +147,7 @@ var commitStatusPicker = exports.commitStatusPicker = function commitStatusPicke
     var tr = state.tr;
     tr = tr.setMeta(_pluginKey.pluginKey, {
       showStatusPickerAt: null,
+      focusStatusInput: false,
       isNew: false
     });
     if (closingMethod) {

package/dist/cjs/plugin.js

@@ -75,6 +75,7 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
             localId = _statusNode$attrs.localId;
           return /*#__PURE__*/_react.default.createElement(_statusPicker.default, {
             isNew: statusState.isNew,
+            focusStatusInput: statusState.focusStatusInput,
             target: target,
             defaultText: text,
             defaultColor: color,

package/dist/cjs/pm-plugins/keymap.js

@@ -7,11 +7,25 @@ exports.default = void 0;
 exports.keymapPlugin = keymapPlugin;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _actions = require("../actions");
 var _utils = require("../utils");
+var _pluginKey = require("./plugin-key");
 function keymapPlugin() {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, consumeKeyEvent, list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, consumeKeyEvent, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch) {
+    var statusPluginState = _pluginKey.pluginKey.getState(state);
+    var isStatusNode = state.selection instanceof _state.NodeSelection ? state.selection.node.type === state.schema.nodes.status : false;
+    if (!isStatusNode) {
+      return false;
+    }
+    if (statusPluginState !== null && statusPluginState !== void 0 && statusPluginState.showStatusPickerAt) {
+      (0, _actions.setFocusOnStatusInput)()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
   return (0, _keymap.keymap)(list);
 }
 

package/dist/cjs/pm-plugins/plugin.js

@@ -33,7 +33,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
       init: function init() {
         return {
           isNew: false,
-          showStatusPickerAt: null
+          showStatusPickerAt: null,
+          focusStatusInput: false
         };
       },
       apply: function apply(tr, state, oldEditorState) {
@@ -67,7 +68,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
           if (_showStatusPickerAt !== state.showStatusPickerAt) {
             var _newState2 = _objectSpread(_objectSpread({}, state), {}, {
               isNew: false,
-              showStatusPickerAt: _showStatusPickerAt
+              showStatusPickerAt: _showStatusPickerAt,
+              focusStatusInput: false
             });
             pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, _newState2);
             return _newState2;

package/dist/cjs/ui/statusPicker.js

@@ -235,17 +235,8 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
       this.reset();
       this.fireStatusPopupOpenedAnalytics(this.state);
-      if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
-        // Wrapper should be focused only if status already exists otherwise input field will receive focus
-        this.focusTimeout = requestAnimationFrame(function () {
-          var _this2$popupBodyWrapp;
-          // Defer to prevent editor scrolling to top. See https://product-fabric.atlassian.net/browse/DTR-1952
-          (_this2$popupBodyWrapp = _this2.popupBodyWrapper) === null || _this2$popupBodyWrapp === void 0 || (_this2$popupBodyWrapp = _this2$popupBodyWrapp.current) === null || _this2$popupBodyWrapp === void 0 || _this2$popupBodyWrapp.focus();
-        });
-      }
     }
   }, {
     key: "componentWillUnmount",
@@ -288,7 +279,8 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
         target = _this$props.target,
         mountTo = _this$props.mountTo,
         boundariesElement = _this$props.boundariesElement,
-        scrollableElement = _this$props.scrollableElement;
+        scrollableElement = _this$props.scrollableElement,
+        focusStatusInput = _this$props.focusStatusInput;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
@@ -310,7 +302,7 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
         onClick: this.handlePopupClick,
         onKeyDown: this.onKeyDown
       }, (0, _react2.jsx)(_picker.StatusPicker, {
-        autoFocus: isNew,
+        autoFocus: isNew || focusStatusInput,
         selectedColor: color,
         text: text,
         onColorClick: this.onColorClick,

package/dist/es2019/actions.js

@@ -93,6 +93,16 @@ export const removeStatus = showStatusPickerAt => ({
   tr.replace(showStatusPickerAt, showStatusPickerAt + 1);
   return tr;
 };
+export const setFocusOnStatusInput = () => (state, dispatch) => {
+  if (!dispatch) {
+    return false;
+  }
+  const tr = state.tr.setMeta(pluginKey, {
+    focusStatusInput: true
+  });
+  dispatch(tr);
+  return true;
+};
 const handleClosingByArrows = (closingMethod, state, showStatusPickerAt, tr) => {
   if (closingMethod === 'arrowLeft') {
     // put cursor right before status Lozenge
@@ -123,6 +133,7 @@ export const commitStatusPicker = closingPayload => editorView => {
   let tr = state.tr;
   tr = tr.setMeta(pluginKey, {
     showStatusPickerAt: null,
+    focusStatusInput: false,
     isNew: false
   });
   if (closingMethod) {

package/dist/es2019/plugin.js

@@ -71,6 +71,7 @@ const baseStatusPlugin = ({
           } = statusNode.attrs;
           return /*#__PURE__*/React.createElement(StatusPicker, {
             isNew: statusState.isNew,
+            focusStatusInput: statusState.focusStatusInput,
             target: target,
             defaultText: text,
             defaultColor: color,

package/dist/es2019/pm-plugins/keymap.js

@@ -1,10 +1,24 @@
 import { bindKeymapWithCommand, enter, tab } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { setFocusOnStatusInput } from '../actions';
 import { mayGetStatusAtSelection } from '../utils';
+import { pluginKey } from './plugin-key';
 export function keymapPlugin() {
   const list = {};
   bindKeymapWithCommand(enter.common, consumeKeyEvent, list);
-  bindKeymapWithCommand(tab.common, consumeKeyEvent, list);
+  bindKeymapWithCommand(tab.common, (state, dispatch) => {
+    const statusPluginState = pluginKey.getState(state);
+    const isStatusNode = state.selection instanceof NodeSelection ? state.selection.node.type === state.schema.nodes.status : false;
+    if (!isStatusNode) {
+      return false;
+    }
+    if (statusPluginState !== null && statusPluginState !== void 0 && statusPluginState.showStatusPickerAt) {
+      setFocusOnStatusInput()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
   return keymap(list);
 }
 

package/dist/es2019/pm-plugins/plugin.js

@@ -10,7 +10,8 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
   state: {
     init: () => ({
       isNew: false,
-      showStatusPickerAt: null
+      showStatusPickerAt: null,
+      focusStatusInput: false
     }),
     apply(tr, state, oldEditorState) {
       const meta = tr.getMeta(pluginKey);
@@ -49,7 +50,8 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
           const newState = {
             ...state,
             isNew: false,
-            showStatusPickerAt
+            showStatusPickerAt,
+            focusStatusInput: false
           };
           pmPluginFactoryParams.dispatch(pluginKey, newState);
           return newState;

package/dist/es2019/ui/statusPicker.js

@@ -215,14 +215,6 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
   componentDidMount() {
     this.reset();
     this.fireStatusPopupOpenedAnalytics(this.state);
-    if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
-      // Wrapper should be focused only if status already exists otherwise input field will receive focus
-      this.focusTimeout = requestAnimationFrame(() => {
-        var _this$popupBodyWrappe3, _this$popupBodyWrappe4;
-        // Defer to prevent editor scrolling to top. See https://product-fabric.atlassian.net/browse/DTR-1952
-        (_this$popupBodyWrappe3 = this.popupBodyWrapper) === null || _this$popupBodyWrappe3 === void 0 ? void 0 : (_this$popupBodyWrappe4 = _this$popupBodyWrappe3.current) === null || _this$popupBodyWrappe4 === void 0 ? void 0 : _this$popupBodyWrappe4.focus();
-      });
-    }
   }
   componentWillUnmount() {
     this.focusTimeout && cancelAnimationFrame(this.focusTimeout);
@@ -259,7 +251,8 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       target,
       mountTo,
       boundariesElement,
-      scrollableElement
+      scrollableElement,
+      focusStatusInput
     } = this.props;
     const {
       color,
@@ -283,7 +276,7 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       onClick: this.handlePopupClick,
       onKeyDown: this.onKeyDown
     }, jsx(AkStatusPicker, {
-      autoFocus: isNew,
+      autoFocus: isNew || focusStatusInput,
       selectedColor: color,
       text: text,
       onColorClick: this.onColorClick,

package/dist/esm/actions.js

@@ -101,6 +101,18 @@ export var removeStatus = function removeStatus(showStatusPickerAt) {
     return tr;
   };
 };
+export var setFocusOnStatusInput = function setFocusOnStatusInput() {
+  return function (state, dispatch) {
+    if (!dispatch) {
+      return false;
+    }
+    var tr = state.tr.setMeta(pluginKey, {
+      focusStatusInput: true
+    });
+    dispatch(tr);
+    return true;
+  };
+};
 var handleClosingByArrows = function handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr) {
   if (closingMethod === 'arrowLeft') {
     // put cursor right before status Lozenge
@@ -128,6 +140,7 @@ export var commitStatusPicker = function commitStatusPicker(closingPayload) {
     var tr = state.tr;
     tr = tr.setMeta(pluginKey, {
       showStatusPickerAt: null,
+      focusStatusInput: false,
       isNew: false
     });
     if (closingMethod) {

package/dist/esm/plugin.js

@@ -68,6 +68,7 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
             localId = _statusNode$attrs.localId;
           return /*#__PURE__*/React.createElement(StatusPicker, {
             isNew: statusState.isNew,
+            focusStatusInput: statusState.focusStatusInput,
             target: target,
             defaultText: text,
             defaultColor: color,

package/dist/esm/pm-plugins/keymap.js

@@ -1,10 +1,24 @@
 import { bindKeymapWithCommand, enter, tab } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { setFocusOnStatusInput } from '../actions';
 import { mayGetStatusAtSelection } from '../utils';
+import { pluginKey } from './plugin-key';
 export function keymapPlugin() {
   var list = {};
   bindKeymapWithCommand(enter.common, consumeKeyEvent, list);
-  bindKeymapWithCommand(tab.common, consumeKeyEvent, list);
+  bindKeymapWithCommand(tab.common, function (state, dispatch) {
+    var statusPluginState = pluginKey.getState(state);
+    var isStatusNode = state.selection instanceof NodeSelection ? state.selection.node.type === state.schema.nodes.status : false;
+    if (!isStatusNode) {
+      return false;
+    }
+    if (statusPluginState !== null && statusPluginState !== void 0 && statusPluginState.showStatusPickerAt) {
+      setFocusOnStatusInput()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
   return keymap(list);
 }
 

package/dist/esm/pm-plugins/plugin.js

@@ -15,7 +15,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
       init: function init() {
         return {
           isNew: false,
-          showStatusPickerAt: null
+          showStatusPickerAt: null,
+          focusStatusInput: false
         };
       },
       apply: function apply(tr, state, oldEditorState) {
@@ -49,7 +50,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
           if (_showStatusPickerAt !== state.showStatusPickerAt) {
             var _newState2 = _objectSpread(_objectSpread({}, state), {}, {
               isNew: false,
-              showStatusPickerAt: _showStatusPickerAt
+              showStatusPickerAt: _showStatusPickerAt,
+              focusStatusInput: false
             });
             pmPluginFactoryParams.dispatch(pluginKey, _newState2);
             return _newState2;

package/dist/esm/ui/statusPicker.js

@@ -230,17 +230,8 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
       this.reset();
       this.fireStatusPopupOpenedAnalytics(this.state);
-      if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
-        // Wrapper should be focused only if status already exists otherwise input field will receive focus
-        this.focusTimeout = requestAnimationFrame(function () {
-          var _this2$popupBodyWrapp;
-          // Defer to prevent editor scrolling to top. See https://product-fabric.atlassian.net/browse/DTR-1952
-          (_this2$popupBodyWrapp = _this2.popupBodyWrapper) === null || _this2$popupBodyWrapp === void 0 || (_this2$popupBodyWrapp = _this2$popupBodyWrapp.current) === null || _this2$popupBodyWrapp === void 0 || _this2$popupBodyWrapp.focus();
-        });
-      }
     }
   }, {
     key: "componentWillUnmount",
@@ -283,7 +274,8 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         target = _this$props.target,
         mountTo = _this$props.mountTo,
         boundariesElement = _this$props.boundariesElement,
-        scrollableElement = _this$props.scrollableElement;
+        scrollableElement = _this$props.scrollableElement,
+        focusStatusInput = _this$props.focusStatusInput;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
@@ -305,7 +297,7 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         onClick: this.handlePopupClick,
         onKeyDown: this.onKeyDown
       }, jsx(AkStatusPicker, {
-        autoFocus: isNew,
+        autoFocus: isNew || focusStatusInput,
         selectedColor: color,
         text: text,
         onColorClick: this.onColorClick,

package/dist/types/actions.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+import type { Command, CommandDispatch, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ClosingPayload, StatusType } from './types';
@@ -12,4 +12,5 @@ export type UpdateStatus = (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType)
 export declare const updateStatusWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const setStatusPickerAt: (showStatusPickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
 export declare const removeStatus: (showStatusPickerAt: number) => EditorCommand;
+export declare const setFocusOnStatusInput: () => (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
 export declare const commitStatusPicker: (closingPayload?: ClosingPayload) => (editorView: EditorView) => void;

package/dist/types/types.d.ts

@@ -8,6 +8,7 @@ export type StatusType = {
 export type StatusState = {
     isNew: boolean;
     showStatusPickerAt: number | null;
+    focusStatusInput?: boolean;
 };
 export interface StatusPluginOptions {
     menuDisabled: boolean;

package/dist/types/ui/statusPicker.d.ts

@@ -19,6 +19,7 @@ export interface Props {
     onTextChanged: (status: StatusType, isNew: boolean) => void;
     onEnter: (status: StatusType) => void;
     isNew?: boolean;
+    focusStatusInput?: boolean;
     defaultText?: string;
     defaultColor?: Color;
     defaultLocalId?: string;

package/dist/types-ts4.5/actions.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+import type { Command, CommandDispatch, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ClosingPayload, StatusType } from './types';
@@ -12,4 +12,5 @@ export type UpdateStatus = (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType)
 export declare const updateStatusWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const setStatusPickerAt: (showStatusPickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
 export declare const removeStatus: (showStatusPickerAt: number) => EditorCommand;
+export declare const setFocusOnStatusInput: () => (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
 export declare const commitStatusPicker: (closingPayload?: ClosingPayload) => (editorView: EditorView) => void;

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

@@ -8,6 +8,7 @@ export type StatusType = {
 export type StatusState = {
     isNew: boolean;
     showStatusPickerAt: number | null;
+    focusStatusInput?: boolean;
 };
 export interface StatusPluginOptions {
     menuDisabled: boolean;

package/dist/types-ts4.5/ui/statusPicker.d.ts

@@ -19,6 +19,7 @@ export interface Props {
     onTextChanged: (status: StatusType, isNew: boolean) => void;
     onEnter: (status: StatusType) => void;
     isNew?: boolean;
+    focusStatusInput?: boolean;
     defaultText?: string;
     defaultColor?: Color;
     defaultLocalId?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-status",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Status plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,13 +33,13 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/editor-common": "^76.10.0",
-    "@atlaskit/editor-plugin-analytics": "^0.2.0",
+    "@atlaskit/editor-common": "^76.17.0",
+    "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.8.0",
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.26.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -76,6 +76,7 @@ interface StatusPluginOptions {
 export type StatusState = {
   isNew: boolean;
   showStatusPickerAt: null | number;
+  focusStatusInput?: boolean;
 };
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -60,6 +60,7 @@ interface StatusPluginOptions {
 export type StatusState = {
     isNew: boolean;
     showStatusPickerAt: null | number;
+    focusStatusInput?: boolean;
 };
 
 // @public (undocumented)