@atlaskit/editor-common 69.2.1 → 69.3.0

package/dist/es2019/types/index.js

@@ -6,4 +6,5 @@ export let SortOrder;
   SortOrder["NO_ORDER"] = "no_order";
 })(SortOrder || (SortOrder = {}));
 
-export { AnnotationUpdateEmitter, AnnotationUpdateEvent } from './annotation';
+export { AnnotationUpdateEmitter, AnnotationUpdateEvent } from './annotation';
+export { ToolbarSize, ToolbarWidths, ToolbarWidthsFullPage } from './toolbar';

package/dist/es2019/types/plugin-factory.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/types/prosemirror-config.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/types/quick-insert.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/types/supported-browsers.js

@@ -0,0 +1,2 @@
+const SupportedBrowsers = ['ie', 'gecko', 'chrome', 'safari'];
+export {};

package/dist/es2019/types/toolbar.js

@@ -0,0 +1,30 @@
+export let ToolbarSize;
+
+(function (ToolbarSize) {
+  ToolbarSize[ToolbarSize["XXL"] = 6] = "XXL";
+  ToolbarSize[ToolbarSize["XL"] = 5] = "XL";
+  ToolbarSize[ToolbarSize["L"] = 4] = "L";
+  ToolbarSize[ToolbarSize["M"] = 3] = "M";
+  ToolbarSize[ToolbarSize["S"] = 2] = "S";
+  ToolbarSize[ToolbarSize["XXXS"] = 1] = "XXXS";
+})(ToolbarSize || (ToolbarSize = {}));
+
+export let ToolbarWidths;
+
+(function (ToolbarWidths) {
+  ToolbarWidths[ToolbarWidths["XXL"] = 610] = "XXL";
+  ToolbarWidths[ToolbarWidths["XL"] = 540] = "XL";
+  ToolbarWidths[ToolbarWidths["L"] = 460] = "L";
+  ToolbarWidths[ToolbarWidths["M"] = 450] = "M";
+  ToolbarWidths[ToolbarWidths["S"] = 370] = "S";
+})(ToolbarWidths || (ToolbarWidths = {}));
+
+export let ToolbarWidthsFullPage;
+
+(function (ToolbarWidthsFullPage) {
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XXL"] = 650] = "XXL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XL"] = 580] = "XL";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["L"] = 540] = "L";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["M"] = 490] = "M";
+  ToolbarWidthsFullPage[ToolbarWidthsFullPage["S"] = 410] = "S";
+})(ToolbarWidthsFullPage || (ToolbarWidthsFullPage = {}));

package/dist/es2019/types/ui-components.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/DropList/index.js

@@ -0,0 +1,187 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import Layer from '../Layer';
+const packageName = "@atlaskit/editor-common";
+const packageVersion = "69.3.0";
+const halfFocusRing = 1;
+const dropOffset = `0, ${gridSize()}px`;
+
+class DropList extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "wrapperStyles", css`
+    ${this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'}
+    transition-duration: 0.2s;
+    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
+  `);
+
+    _defineProperty(this, "triggerStyles", css`
+    transition-duration: 0.2s;
+    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
+    ${this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'}
+  `);
+
+    _defineProperty(this, "menuWrapper", theme => {
+      return css`
+      color: ${themed({
+        light: token('color.text', N900),
+        dark: token('color.text', DN600)
+      })(theme)};
+      background-color: ${themed({
+        light: token('elevation.surface.overlay', N0),
+        dark: token('elevation.surface.overlay', DN50)
+      })(theme)};
+      border-radius: ${borderRadius()}px;
+      box-shadow: 0 ${gridSize() / 2}px ${gridSize()}px -${gridSize() / 4}px ${N50A},
+        0 0 1px ${N60A};
+      box-sizing: border-box;
+      overflow: auto;
+      padding: ${gridSize() / 2}px 0;
+      max-height: 90vh;
+    `;
+    });
+
+    _defineProperty(this, "componentDidMount", () => {
+      this.setContentWidth(); // We use a captured event here to avoid a radio or checkbox dropdown item firing its
+      // click event first, which would cause a re-render of the element and prevent DropList
+      // from detecting the actual source of this original click event.
+
+      document.addEventListener('click', this.handleClickOutside, true);
+      document.addEventListener('keydown', this.handleEsc);
+    });
+
+    _defineProperty(this, "componentDidUpdate", () => {
+      if (this.props.isOpen) {
+        this.setContentWidth();
+      }
+    });
+
+    _defineProperty(this, "componentWillUnmount", () => {
+      document.removeEventListener('click', this.handleClickOutside, true);
+      document.removeEventListener('keydown', this.handleEsc);
+    });
+
+    _defineProperty(this, "setContentWidth", () => {
+      const {
+        dropContentRef,
+        triggerRef
+      } = this;
+      const {
+        shouldFitContainer
+      } = this.props; // We need to manually set the content width to match the trigger width
+
+      if (shouldFitContainer && dropContentRef && triggerRef) {
+        dropContentRef.style.width = `${triggerRef.offsetWidth - halfFocusRing * 2}px`;
+      }
+    });
+
+    _defineProperty(this, "handleEsc", event => {
+      if ((event.key === 'Escape' || event.key === 'Esc') && this.props.isOpen) {
+        this.close(event);
+      }
+    });
+
+    _defineProperty(this, "handleClickOutside", event => {
+      if (this.props.isOpen) {
+        if (event.target instanceof Node) {
+          // Rather than check for the target within the entire DropList, we specify the trigger/content.
+          // This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
+          // blanket which stretches to the viewport should not stop 'close' from being triggered.
+          const withinTrigger = this.triggerRef && this.triggerRef.contains(event.target);
+          const withinContent = this.dropContentRef && this.dropContentRef.contains(event.target);
+
+          if (!withinTrigger && !withinContent) {
+            this.close(event);
+          }
+        }
+      }
+    });
+
+    _defineProperty(this, "close", event => {
+      if (this.props.onOpenChange) {
+        this.props.onOpenChange({
+          isOpen: false,
+          event
+        });
+      }
+    });
+
+    _defineProperty(this, "handleContentRef", ref => {
+      this.dropContentRef = ref; // If the dropdown has just been opened, we focus on the containing element so the
+      // user can tab to the first dropdown item. We will only receive this ref if isOpen
+      // is true or null, so no need to check for truthiness here.
+
+      if (ref) {
+        ref.focus();
+      }
+    });
+
+    _defineProperty(this, "handleTriggerRef", ref => {
+      this.triggerRef = ref;
+    });
+  }
+
+  /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+  getChildContext() {
+    return {
+      shouldAllowMultilineItems: false
+    };
+  }
+
+  render() {
+    const {
+      children,
+      isOpen,
+      position,
+      trigger,
+      onPositioned,
+      testId
+    } = this.props;
+    let layerContent = isOpen ? jsx("div", {
+      css: theme => this.menuWrapper({
+        theme: theme
+      }),
+      "data-role": "droplistContent",
+      "data-testid": testId && `${testId}--content`,
+      ref: this.handleContentRef
+    }, children) : null;
+    return jsx("div", {
+      css: this.wrapperStyles
+    }, jsx(Layer, {
+      content: layerContent,
+      offset: dropOffset,
+      position: position,
+      onPositioned: onPositioned
+    }, jsx("div", {
+      css: this.triggerStyles,
+      ref: this.handleTriggerRef
+    }, trigger)));
+  }
+
+}
+
+const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+export default withAnalyticsContext({
+  componentName: 'droplist',
+  packageName,
+  packageVersion
+})(withAnalyticsEvents({
+  onOpenChange: createAndFireEventOnAtlaskit({
+    action: 'toggled',
+    actionSubject: 'droplist',
+    attributes: {
+      componentName: 'droplist',
+      packageName,
+      packageVersion
+    }
+  })
+})(DropList));

package/dist/es2019/ui/ErrorBoundary/index.js

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { ACTION, EVENT_TYPE } from '../../analytics';
+export class ErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      errorCaptured: false
+    });
+  }
+
+  hasFallback() {
+    return typeof this.props.fallbackComponent !== 'undefined';
+  }
+
+  shouldRecover() {
+    return this.hasFallback() && this.state.errorCaptured;
+  }
+
+  componentDidCatch(error, errorInfo) {
+    if (this.props.dispatchAnalyticsEvent) {
+      this.props.dispatchAnalyticsEvent({
+        action: ACTION.EDITOR_CRASHED,
+        actionSubject: this.props.component,
+        actionSubjectId: this.props.componentId,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error,
+          errorInfo,
+          // @ts-expect-error
+          errorRethrown: !this.hasFallback()
+        }
+      });
+    }
+
+    if (this.hasFallback()) {
+      this.setState({
+        errorCaptured: true
+      });
+    }
+  }
+
+  render() {
+    if (this.shouldRecover()) {
+      return this.props.fallbackComponent;
+    }
+
+    return this.props.children;
+  }
+
+}

package/dist/es2019/ui/Layer/index.js

@@ -0,0 +1,195 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import Popper from 'popper.js'; // eslint-disable-line import/extensions
+
+import rafSchedule from 'raf-schd';
+import { positionPropToPopperPosition } from './internal/helpers';
+const defaultState = {
+  hasExtractedStyles: false,
+  // We set these default offsets to prevent a flash of popper content in the wrong position
+  // which can cause incorrect height calculations. Popper will calculate these values
+  offsets: {
+    popper: {
+      left: -9999,
+      top: -9999,
+      position: null
+    }
+  },
+  // fix Safari parent width: https://product-fabric.atlassian.net/browse/ED-1784
+  cssPosition: 'absolute',
+  originalHeight: null,
+  maxHeight: null
+};
+export default class Layer extends Component {
+  // working with extract-react-types
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "targetRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(this, "contentRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(this, "extractStyles", state => {
+      if (state) {
+        const popperHeight = state.offsets.popper.height;
+        const left = Math.round(state.offsets.popper.left);
+        const top = Math.round(state.offsets.popper.top);
+        const cssPosition = 'absolute';
+        const originalHeight = this.state.originalHeight || popperHeight;
+        const maxHeight = this.calculateMaxHeight(originalHeight, popperHeight, top, cssPosition);
+        this.setState({
+          // position: fixed or absolute
+          cssPosition,
+          hasExtractedStyles: true,
+          transform: `translate3d(${left}px, ${top}px, 0px)`,
+          originalHeight,
+          maxHeight
+        });
+      }
+    });
+
+    this.state = defaultState;
+    this.extractStyles = rafSchedule(this.extractStyles.bind(this));
+  }
+
+  componentDidMount() {
+    this.applyPopper(this.props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.applyPopper(nextProps);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      onPositioned
+    } = this.props;
+    const {
+      hasExtractedStyles
+    } = this.state; // This flag is set the first time the position is calculated from Popper and applied to the content
+
+    if (!prevState.hasExtractedStyles && hasExtractedStyles && onPositioned) {
+      onPositioned();
+    }
+  }
+
+  componentWillUnmount() {
+    // this.extractStyles.cancel();
+    if (this.popper) {
+      this.popper.destroy();
+    }
+  }
+  /* Calculate the max height of the popper if it's height is greater than the viewport to prevent
+   * the bottom of the popper not being viewable.
+   * Only works if the popper uses viewport as the boundary and has a fixed position ancestor.
+   */
+
+
+  calculateMaxHeight(originalHeight, currentHeight, positionTop, cssPosition) {
+    let DocumentElementClientHeight = 0;
+
+    if (document.documentElement) {
+      DocumentElementClientHeight = document.documentElement.clientHeight;
+    }
+
+    if (cssPosition !== 'fixed') {
+      return null;
+    }
+
+    const viewportHeight = Math.max(DocumentElementClientHeight, window.innerHeight || 0);
+    return viewportHeight < originalHeight && currentHeight + positionTop >= viewportHeight - 50 ? // allow some spacing either side of viewport height
+    viewportHeight - 12 : null;
+  }
+
+  applyPopper(props) {
+    if (!this.targetRef.current || !this.contentRef.current) {
+      return;
+    }
+
+    if (this.popper) {
+      this.popper.destroy();
+    } // "new Popper(...)" operation is very expensive when called on virtual DOM.
+    // This condition reduces the number of calls so we can run our tests faster
+    // (time was reduced from 100s to 13s).
+
+
+    if (!props.content) {
+      return;
+    } // we wrap our target in a div so that we can safely get a reference to it, but we pass the
+    // actual target to popper
+
+
+    const isAlwaysFixed = false;
+    const actualTarget = this.targetRef.current.children[0];
+    const popperOpts = {
+      placement: positionPropToPopperPosition(props.position),
+      onCreate: this.extractStyles,
+      onUpdate: this.extractStyles,
+      modifiers: {
+        applyStyle: {
+          enabled: false
+        },
+        hide: {
+          enabled: false
+        },
+        offset: {
+          enabled: true,
+          offset: this.props.offset
+        },
+        flip: {
+          enabled: false,
+          flipVariations: true,
+          boundariesElement: 'viewport',
+          padding: 0 // leave 0 pixels between popper and the boundariesElement
+
+        },
+        preventOverflow: {
+          enabled: false,
+          escapeWithReference: true
+        }
+      },
+      positionFixed: isAlwaysFixed
+    };
+
+    if (actualTarget) {
+      this.popper = new Popper(actualTarget, this.contentRef.current, popperOpts);
+    }
+  }
+
+  render() {
+    const {
+      transform,
+      hasExtractedStyles,
+      maxHeight
+    } = this.state;
+    const opacity = hasExtractedStyles ? {} : {
+      opacity: 0
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      ref: this.targetRef
+    }, this.props.children), /*#__PURE__*/React.createElement("div", {
+      ref: this.contentRef,
+      style: {
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        transform,
+        maxHeight: maxHeight ? maxHeight : 'auto',
+        ...opacity
+      }
+    }, this.props.content));
+  }
+
+}
+
+_defineProperty(Layer, "defaultProps", {
+  boundariesElement: 'viewport',
+  children: null,
+  content: null,
+  offset: '0, 0',
+  position: 'right middle',
+  zIndex: 400,
+  lockScroll: false,
+  isAlwaysFixed: false,
+  onPositioned: () => {}
+});

package/dist/es2019/ui/Layer/internal/helpers.js

@@ -0,0 +1,62 @@
+const positionMap = {
+  'top left': {
+    position: 'top-start',
+    animation: 'top'
+  },
+  'top center': {
+    position: 'top',
+    animation: 'top'
+  },
+  'top right': {
+    position: 'top-end',
+    animation: 'top'
+  },
+  'right top': {
+    position: 'right-start',
+    animation: 'right'
+  },
+  'right middle': {
+    position: 'right',
+    animation: 'right'
+  },
+  'right bottom': {
+    position: 'right-end',
+    animation: 'right'
+  },
+  'bottom left': {
+    position: 'bottom-start',
+    animation: 'bottom'
+  },
+  'bottom center': {
+    position: 'bottom',
+    animation: 'bottom'
+  },
+  'bottom right': {
+    position: 'bottom-end',
+    animation: 'bottom'
+  },
+  'left top': {
+    position: 'left-start',
+    animation: 'left'
+  },
+  'left middle': {
+    position: 'left',
+    animation: 'left'
+  },
+  'left bottom': {
+    position: 'left-end',
+    animation: 'left'
+  }
+};
+export const POSITION_ATTRIBUTE_ENUM = {
+  values: ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left middle', 'left bottom'],
+  default: 'right middle'
+};
+
+function positionToPopper(position) {
+  return position && positionMap[position] ? positionMap[position].position : null;
+}
+
+export function positionPropToPopperPosition(position) {
+  return positionToPopper(position) || positionMap[POSITION_ATTRIBUTE_ENUM.default].position;
+}

package/dist/es2019/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import AtlaskitTheme from '@atlaskit/theme/components';
+import { CHANNEL } from '@atlaskit/theme/constants';
+export function PortalProviderThemeProviders(props) {
+  const {
+    children,
+    mode
+  } = props;
+  const styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  () => ({
+    [CHANNEL]: {
+      mode
+    },
+    theme: {
+      [CHANNEL]: {
+        mode
+      }
+    }
+  }), [mode]);
+  const atlaskitTheme = React.useCallback(() => ({
+    mode
+  }), [mode]);
+  return (
+    /*#__PURE__*/
+    // TODO: ED-15585
+    // import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
+    // <DeprectateStyledComponentsProvider theme={styledComponentsAndEmotionTheme}>
+    // </DeprectateStyledComponentsProvider>
+    React.createElement(ThemeProvider, {
+      theme: styledComponentsAndEmotionTheme
+    }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+      value: atlaskitTheme
+    }, children))
+  );
+}