@atlaskit/editor-core 188.8.0 → 188.9.0

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -1,293 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N0 } from '@atlaskit/theme/colors';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
-import { DEFAULT_STATUS } from '../actions';
-import { analyticsState, createStatusAnalyticsAndFire } from '../analytics';
-const PopupWithListeners = withOuterListeners(Popup);
-export let InputMethod = /*#__PURE__*/function (InputMethod) {
-  InputMethod["blur"] = "blur";
-  InputMethod["escKey"] = "escKey";
-  InputMethod["enterKey"] = "enterKey";
-  return InputMethod;
-}({});
-export let closingMethods = /*#__PURE__*/function (closingMethods) {
-  closingMethods["ArrowLeft"] = "arrowLeft";
-  closingMethods["ArrowRight"] = "arrowRight";
-  return closingMethods;
-}({});
-const pickerContainer = css`
-  background: ${`var(--ds-surface-overlay, ${N0})`};
-  padding: ${"var(--ds-space-100, 8px)"} 0;
-  border-radius: ${borderRadius()}px;
-  box-shadow: ${"var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))"};
-  :focus {
-    outline: none;
-  }
-  input {
-    text-transform: uppercase;
-  }
-`;
-export class StatusPickerWithoutAnalytcs extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "handleClickOutside", event => {
-      event.preventDefault();
-      this.inputMethod = InputMethod.blur;
-      const selectedText = window.getSelection();
-      if (!selectedText) {
-        this.props.closeStatusPicker();
-      }
-    });
-    _defineProperty(this, "handleEscapeKeydown", event => {
-      event.preventDefault();
-      this.inputMethod = InputMethod.escKey;
-      this.props.onEnter(this.state);
-    });
-    _defineProperty(this, "handleTabPress", event => {
-      const colorButtons = event.currentTarget.querySelectorAll('button');
-      const inputField = event.currentTarget.querySelector('input');
-      const isInputFocussed = document.activeElement === inputField;
-      const isButtonFocussed = Array.from(colorButtons).some(buttonElement => {
-        var _document;
-        return ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement) === buttonElement;
-      });
-      if (event !== null && event !== void 0 && event.shiftKey) {
-        /* shift + tab */
-        if (isInputFocussed) {
-          colorButtons[0].focus();
-          event.preventDefault();
-        }
-        /* After the user presses shift + tab the color-palette component updates tab index for the first color to be 0.
-            To correctly set focus to the input field instead of the first color button we need to set focus manually
-            */
-        if (isButtonFocussed) {
-          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
-          event.preventDefault();
-        }
-      } else {
-        /* tab */
-        if (isButtonFocussed) {
-          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
-          event.preventDefault();
-        }
-      }
-    });
-    _defineProperty(this, "handleArrow", (event, closingMethod) => {
-      var _document2;
-      if (((_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement) === this.popupBodyWrapper.current) {
-        var _this$popupBodyWrappe, _this$popupBodyWrappe2;
-        event.preventDefault();
-        (_this$popupBodyWrappe = this.popupBodyWrapper) === null || _this$popupBodyWrappe === void 0 ? void 0 : (_this$popupBodyWrappe2 = _this$popupBodyWrappe.current) === null || _this$popupBodyWrappe2 === void 0 ? void 0 : _this$popupBodyWrappe2.blur();
-        this.props.closeStatusPicker({
-          closingMethod
-        });
-      }
-    });
-    _defineProperty(this, "onKeyDown", event => {
-      const isTabPressed = event.key === 'Tab';
-      if (isTabPressed) {
-        return this.handleTabPress(event);
-      }
-      if (event.key in closingMethods) {
-        return this.handleArrow(event, closingMethods[event.key]);
-      }
-    });
-    _defineProperty(this, "onColorHover", color => {
-      this.createStatusAnalyticsAndFireFunc({
-        action: 'hovered',
-        actionSubject: 'statusColorPicker',
-        attributes: {
-          color,
-          localId: this.state.localId,
-          state: analyticsState(this.props.isNew)
-        }
-      });
-    });
-    _defineProperty(this, "onColorClick", color => {
-      const {
-        text,
-        localId
-      } = this.state;
-      if (color === this.state.color) {
-        this.createStatusAnalyticsAndFireFunc({
-          action: 'clicked',
-          actionSubject: 'statusColorPicker',
-          attributes: {
-            color,
-            localId,
-            state: analyticsState(this.props.isNew)
-          }
-        });
-        // closes status box and commits colour
-        this.onEnter();
-      } else {
-        this.setState({
-          color
-        });
-        this.props.onSelect({
-          text,
-          color,
-          localId
-        });
-      }
-    });
-    _defineProperty(this, "onTextChanged", text => {
-      const {
-        color,
-        localId
-      } = this.state;
-      this.setState({
-        text
-      });
-      this.props.onTextChanged({
-        text,
-        color,
-        localId
-      }, !!this.props.isNew);
-    });
-    _defineProperty(this, "onEnter", () => {
-      this.inputMethod = InputMethod.enterKey;
-      this.props.onEnter(this.state);
-    });
-    // cancel bubbling to fix clickOutside logic:
-    // popup re-renders its content before the click event bubbles up to the document
-    // therefore click target element would be different from the popup content
-    _defineProperty(this, "handlePopupClick", event => event.nativeEvent.stopImmediatePropagation());
-    this.state = this.extractStateFromProps(props);
-    this.createStatusAnalyticsAndFireFunc = createStatusAnalyticsAndFire(props.createAnalyticsEvent);
-    this.popupBodyWrapper = /*#__PURE__*/React.createRef();
-  }
-  fireStatusPopupOpenedAnalytics(state) {
-    const {
-      color,
-      text,
-      localId,
-      isNew
-    } = state;
-    this.startTime = Date.now();
-    this.createStatusAnalyticsAndFireFunc({
-      action: 'opened',
-      actionSubject: 'statusPopup',
-      attributes: {
-        textLength: text ? text.length : 0,
-        selectedColor: color,
-        localId,
-        state: analyticsState(isNew)
-      }
-    });
-  }
-  fireStatusPopupClosedAnalytics(state) {
-    const {
-      color,
-      text,
-      localId,
-      isNew
-    } = state;
-    this.createStatusAnalyticsAndFireFunc({
-      action: 'closed',
-      actionSubject: 'statusPopup',
-      attributes: {
-        inputMethod: this.inputMethod,
-        duration: Date.now() - this.startTime,
-        textLength: text ? text.length : 0,
-        selectedColor: color,
-        localId,
-        state: analyticsState(isNew)
-      }
-    });
-  }
-  reset() {
-    this.startTime = Date.now();
-    this.inputMethod = InputMethod.blur;
-  }
-  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);
-    this.fireStatusPopupClosedAnalytics(this.state);
-    this.startTime = 0;
-  }
-  componentDidUpdate(prevProps, prevState, _snapshot) {
-    const element = this.props.target;
-    if (prevProps.target !== element) {
-      const newState = this.extractStateFromProps(this.props);
-      this.setState(newState);
-      this.fireStatusPopupClosedAnalytics(prevState);
-      this.reset();
-      this.fireStatusPopupOpenedAnalytics(newState);
-    }
-  }
-  extractStateFromProps(props) {
-    const {
-      defaultColor,
-      defaultText,
-      defaultLocalId,
-      isNew
-    } = props;
-    return {
-      color: defaultColor || DEFAULT_STATUS.color,
-      text: defaultText || DEFAULT_STATUS.text,
-      localId: defaultLocalId,
-      isNew
-    };
-  }
-  render() {
-    const {
-      isNew,
-      target,
-      mountTo,
-      boundariesElement,
-      scrollableElement
-    } = this.props;
-    const {
-      color,
-      text
-    } = this.state;
-    return target && jsx(PopupWithListeners, {
-      target: target,
-      offset: [0, 8],
-      handleClickOutside: this.handleClickOutside,
-      handleEscapeKeydown: this.handleEscapeKeydown,
-      zIndex: akEditorFloatingDialogZIndex,
-      fitHeight: 40,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      closeOnTab: false
-    }, jsx("div", {
-      css: pickerContainer,
-      tabIndex: -1,
-      ref: this.popupBodyWrapper,
-      onClick: this.handlePopupClick,
-      onKeyDown: this.onKeyDown
-    }, jsx(AkStatusPicker, {
-      autoFocus: isNew,
-      selectedColor: color,
-      text: text,
-      onColorClick: this.onColorClick,
-      onColorHover: this.onColorHover,
-      onTextChanged: this.onTextChanged,
-      onEnter: this.onEnter
-    })));
-  }
-}
-export default withAnalyticsEvents()(StatusPickerWithoutAnalytcs);

package/dist/es2019/plugins/status/utils.js

@@ -1,12 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export const mayGetStatusAtSelection = selection => {
-  if (selection && selection instanceof NodeSelection) {
-    const nodeSelection = selection;
-    if (nodeSelection.node.type.name === 'status') {
-      return selection.node.attrs || null;
-    }
-  }
-  return null;
-};
-export const isEmptyStatus = node => node && (node.text && node.text.trim().length === 0 || node.text === '');
-export const setNodeSelectionNearPos = (tr, pos) => tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map(pos)));