@atlaskit/editor-plugin-type-ahead 0.5.0 → 0.7.0

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl-next';
+import uuid from 'uuid';
+import { keyName as keyNameNormalized } from 'w3c-keyname';
+import { redo, undo } from '@atlaskit/editor-prosemirror/history';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { B400 } from '@atlaskit/theme/colors';
+import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_DECORATION_KEY } from '../constants';
+import { StatsModifier } from '../stats-modifier';
+import { closeTypeAhead } from '../transforms/close-type-ahead';
+import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
+import { getTypeAheadQuery } from '../utils';
+export const factoryDecorations = ({
+  intl,
+  popupMountRef,
+  createAnalyticsEvent
+}) => {
+  const createDecorations = (tr, {
+    triggerHandler,
+    inputMethod,
+    reopenQuery
+  }) => {
+    const {
+      selection
+    } = tr;
+    if (!(selection instanceof TextSelection) || !selection.$cursor) {
+      return {
+        decorationSet: DecorationSet.empty,
+        stats: null,
+        decorationElement: null
+      };
+    }
+    const decorationId = `decoration_id_${TYPE_AHEAD_DECORATION_KEY}_${uuid()}`;
+    const {
+      $cursor
+    } = selection;
+    const typeaheadComponent = document.createElement('mark');
+    const stats = new StatsModifier();
+    let shouldFocusCursorInsideQuery = true;
+    const deco = Decoration.widget($cursor.pos, (editorView, getDecorationPosition) => {
+      var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
+      typeaheadComponent.setAttribute('id', decorationId);
+      typeaheadComponent.setAttribute('role', 'search');
+      typeaheadComponent.dataset.typeAheadQuery = 'true';
+      typeaheadComponent.dataset.trigger = triggerHandler.trigger;
+
+      // This line below seems weird,
+      // we need that cuz the clickAreaHelper
+      // will try to hijack any click event coming
+      // from the inside of the Editor
+      // packages/editor/editor-core/src/ui/Addon/click-area-helper.ts
+      typeaheadComponent.dataset.editorPopup = 'true';
+      typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
+      typeaheadComponent.style.color = `var(--ds-text-accent-blue, ${B400})`;
+      typeaheadComponent.style.backgroundColor = 'transparent';
+      const onUndoRedo = inputType => {
+        if (!['historyUndo', 'historyRedo'].includes(inputType)) {
+          return false;
+        }
+        const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+        const currentQuery = getTypeAheadQuery(editorView.state);
+        if (hasReopenQuery || (currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.length) === 0) {
+          const command = inputType === 'historyUndo' ? undo : redo;
+          let tr = editorView.state.tr;
+          const fakeDispatch = customTr => {
+            tr = customTr;
+          };
+          const result = command(editorView.state, fakeDispatch);
+          if (result) {
+            closeTypeAhead(tr);
+            editorView.dispatch(tr);
+            editorView.focus();
+          }
+          return result;
+        }
+        return false;
+      };
+      ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: intl.locale || 'en',
+        messages: intl.messages,
+        formats: intl.formats
+      }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
+        triggerHandler: triggerHandler,
+        editorView: editorView,
+        anchorElement: typeaheadComponent,
+        createAnalyticsEvent: createAnalyticsEvent,
+        inputMethod: inputMethod,
+        getDecorationPosition: getDecorationPosition,
+        shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
+        popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
+        popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
+        popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
+        onUndoRedo: onUndoRedo,
+        reopenQuery: reopenQuery
+      })), typeaheadComponent);
+      shouldFocusCursorInsideQuery = false;
+      return typeaheadComponent;
+    }, {
+      isTypeAheadDecoration: true,
+      key: decorationId,
+      side: 0,
+      stopEvent: e => {
+        const key = keyNameNormalized(e);
+        const sel = document.getSelection();
+        if ('ArrowLeft' === key && (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+          return false;
+        }
+        return true;
+      },
+      ignoreSelection: false
+    });
+    return {
+      decorationSet: DecorationSet.create(tr.doc, [deco]),
+      decorationElement: typeaheadComponent,
+      stats
+    };
+  };
+  const removeDecorations = decorationSet => {
+    if (!decorationSet || decorationSet === DecorationSet.empty) {
+      return false;
+    }
+    const typeAheadDecorations = decorationSet.find(undefined, undefined, spec => {
+      return spec.isTypeAheadDecoration;
+    });
+    if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
+      return false;
+    }
+    typeAheadDecorations.forEach(({
+      spec
+    }) => {
+      if (!spec.key) {
+        return;
+      }
+      const decoElement = document.querySelector(`#${spec.key}`);
+      if (!decoElement) {
+        return;
+      }
+      ReactDOM.unmountComponentAtNode(decoElement);
+    });
+    return true;
+  };
+  return {
+    createDecorations,
+    removeDecorations
+  };
+};

package/dist/es2019/pm-plugins/input-rules.js

@@ -0,0 +1,29 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { createPlugin, createRule, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
+import { openTypeAheadAtCursor } from '../transforms/open-typeahead-at-cursor';
+export function inputRulePlugin(schema, typeAheads, featureFlags) {
+  if (!typeAheads || typeAheads.length === 0) {
+    return;
+  }
+  const rules = typeAheads.reduce((acc, typeAhead) => {
+    const trigger = typeAhead.customRegex || typeAhead.trigger;
+    if (!trigger) {
+      return acc;
+    }
+    const regex = new RegExp(`(^|[.!?\\s${leafNodeReplacementCharacter}])(${trigger})$`);
+    acc.push(createRule(regex, (state, match) => {
+      return openTypeAheadAtCursor({
+        triggerHandler: typeAhead,
+        inputMethod: INPUT_METHOD.KEYBOARD
+      })({
+        tr: state.tr
+      });
+    }));
+    return acc;
+  }, []);
+  const plugin = createPlugin('type-ahead', rules, {
+    allowInsertTextOnDocument: false
+  });
+  return plugin;
+}
+export default inputRulePlugin;

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

@@ -0,0 +1,16 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { ACTIONS } from './actions';
+import { isInsertionTransaction } from './utils';
+export function createPlugin() {
+  return new SafePlugin({
+    appendTransaction(transactions, _oldState, newState) {
+      const insertItemCallback = isInsertionTransaction(transactions, ACTIONS.INSERT_ITEM);
+      if (insertItemCallback) {
+        const tr = insertItemCallback(newState);
+        if (tr) {
+          return tr;
+        }
+      }
+    }
+  });
+}

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('typeAheadPlugin');

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

@@ -0,0 +1,106 @@
+import { InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { closest } from '@atlaskit/editor-common/utils';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
+import { ACTIONS } from './actions';
+import { factoryDecorations } from './decorations';
+import { pluginKey } from './key';
+import { createReducer } from './reducer';
+import { isInsertionTransaction } from './utils';
+const hasValidTypeAheadStep = tr => {
+  const steps = tr.steps.filter(step => step instanceof InsertTypeAheadStep);
+
+  // There are some cases, like collab rebase, where the steps are re-applied
+  // We should not re open the type-ahead for those cases
+  if (steps.length === 1) {
+    return steps[0];
+  }
+  return null;
+};
+export function createPlugin({
+  reactDispatch,
+  popupMountRef,
+  createAnalyticsEvent,
+  typeAheadHandlers,
+  getIntl
+}) {
+  const intl = getIntl();
+  const {
+    createDecorations,
+    removeDecorations
+  } = factoryDecorations({
+    intl,
+    popupMountRef,
+    createAnalyticsEvent: createAnalyticsEvent
+  });
+  const reducer = createReducer({
+    createDecorations,
+    removeDecorations,
+    typeAheadHandlers,
+    popupMountRef
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          typeAheadHandlers,
+          query: '',
+          decorationSet: DecorationSet.empty,
+          decorationElement: null,
+          items: [],
+          selectedIndex: -1,
+          stats: null,
+          inputMethod: null
+        };
+      },
+      apply(tr, currentPluginState, oldEditorState, state) {
+        const customStep = hasValidTypeAheadStep(tr);
+        const nextPluginState = reducer(tr, currentPluginState, customStep);
+        if (currentPluginState !== nextPluginState) {
+          reactDispatch(pluginKey, nextPluginState);
+        }
+        return nextPluginState;
+      }
+    },
+    appendTransaction(transactions, _oldState, newState) {
+      const insertItemCallback = isInsertionTransaction(transactions, ACTIONS.INSERT_RAW_QUERY);
+      if (insertItemCallback) {
+        const tr = insertItemCallback(newState);
+        if (tr) {
+          return tr;
+        }
+      }
+    },
+    view() {
+      return {
+        update(editorView) {}
+      };
+    },
+    props: {
+      decorations: state => {
+        var _pluginKey$getState;
+        return (_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet;
+      },
+      handleDOMEvents: {
+        compositionend: (view, event) => {
+          return false;
+        },
+        click: (view, event) => {
+          const {
+            target
+          } = event;
+          // ProseMirror view listen to any click event inside of it
+          // When this event is coming from the typeahead
+          // we should tell to ProseMirror to sit down and relax
+          // cuz we know what we are doing (I hope)
+          if (target instanceof HTMLElement && closest(target, `[data-type-ahead=${TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE}]`)) {
+            return true;
+          }
+          return false;
+        }
+      }
+    }
+  });
+}

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

@@ -0,0 +1,160 @@
+import { InsertTypeAheadStages, InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { isTypeAheadHandler } from '../utils';
+import { ACTIONS } from './actions';
+import { pluginKey } from './key';
+const shouldForceOpen = step => {
+  if (!(step instanceof InsertTypeAheadStep)) {
+    return false;
+  }
+  const isDeletionRawQueryOperation = step.isInsertionStep() && step.stage === InsertTypeAheadStages.DELETING_RAW_QUERY;
+  const isUndoingInsertionItem = step.isUndoingStep() && step.stage === InsertTypeAheadStages.INSERTING_ITEM;
+  return isDeletionRawQueryOperation || isUndoingInsertionItem;
+};
+const shouldForceClose = step => {
+  if (!(step instanceof InsertTypeAheadStep)) {
+    return false;
+  }
+  const isInsertingItem = step.isInsertionStep() && step.stage === InsertTypeAheadStages.INSERTING_ITEM;
+  const isUndoingDeletionRawQuery = step.isUndoingStep() && step.stage === InsertTypeAheadStages.DELETING_RAW_QUERY;
+  return isInsertingItem || isUndoingDeletionRawQuery;
+};
+const createFindHandler = typeAheadHandlers => step => {
+  if (!(step instanceof InsertTypeAheadStep)) {
+    return null;
+  }
+  const handler = typeAheadHandlers.find(h => h.trigger === step.trigger);
+  return handler || null;
+};
+export const createReducer = ({
+  typeAheadHandlers,
+  removeDecorations,
+  createDecorations
+}) => {
+  const findHandler = createFindHandler(typeAheadHandlers);
+  const openMenu = (currentPluginState, {
+    tr,
+    triggerHandler,
+    inputMethod,
+    reopenQuery,
+    selectedIndex
+  }) => {
+    removeDecorations(currentPluginState.decorationSet);
+    const {
+      decorationSet,
+      decorationElement,
+      stats
+    } = createDecorations(tr, {
+      triggerHandler,
+      inputMethod,
+      reopenQuery
+    });
+    return {
+      ...currentPluginState,
+      stats,
+      decorationSet,
+      triggerHandler,
+      decorationElement,
+      inputMethod,
+      selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
+      items: [],
+      query: reopenQuery || ''
+    };
+  };
+  const closeMenu = currentPluginState => {
+    removeDecorations(currentPluginState.decorationSet);
+    return {
+      ...currentPluginState,
+      inputMethod: null,
+      query: '',
+      decorationElement: null,
+      decorationSet: DecorationSet.empty,
+      stats: null,
+      triggerHandler: undefined,
+      items: []
+    };
+  };
+  return (tr, currentPluginState, typeAheadStepOverride) => {
+    const meta = tr.getMeta(pluginKey) || {};
+
+    // This code below controls when we should force
+    // the menu to open or close during undo/redo operations
+    const overrideHandler = findHandler(typeAheadStepOverride);
+    if (typeAheadStepOverride && overrideHandler && shouldForceOpen(typeAheadStepOverride)) {
+      return openMenu(currentPluginState, {
+        tr,
+        triggerHandler: overrideHandler,
+        inputMethod: INPUT_METHOD.KEYBOARD,
+        reopenQuery: typeAheadStepOverride.query,
+        selectedIndex: typeAheadStepOverride.selectedIndex
+      });
+    } else if (shouldForceClose(typeAheadStepOverride)) {
+      return closeMenu(currentPluginState);
+    }
+    const {
+      action,
+      params
+    } = meta || {};
+    const shouldOpenMenu = action === ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR && isTypeAheadHandler(params === null || params === void 0 ? void 0 : params.triggerHandler);
+    const selectionChanged = tr.selectionSet && (tr.isGeneric || Boolean(tr.getMeta('pointer')));
+    const shouldCloseMenu = [ACTIONS.CLOSE_TYPE_AHEAD, ACTIONS.INSERT_ITEM].includes(action) || selectionChanged;
+    const shouldUpdateQuery = action === ACTIONS.CHANGE_QUERY;
+    const shouldUpdateListItems = action === ACTIONS.UPDATE_LIST_ITEMS;
+    const shouldUpdateSelectedIndex = action === ACTIONS.UPDATE_SELECTED_INDEX;
+    if (shouldOpenMenu) {
+      return openMenu(currentPluginState, {
+        tr,
+        triggerHandler: params.triggerHandler,
+        inputMethod: params.inputMethod
+      });
+    } else if (shouldCloseMenu) {
+      return closeMenu(currentPluginState);
+    } else if (shouldUpdateQuery) {
+      return {
+        ...currentPluginState,
+        query: params.query
+      };
+    } else if (shouldUpdateListItems) {
+      const {
+        items
+      } = params;
+      const {
+        selectedIndex
+      } = currentPluginState;
+      return {
+        ...currentPluginState,
+        items,
+        selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, -1)
+      };
+    } else if (shouldUpdateSelectedIndex) {
+      return {
+        ...currentPluginState,
+        selectedIndex: params.selectedIndex
+      };
+    }
+    if (tr.docChanged) {
+      const {
+        decorationSet
+      } = currentPluginState;
+      const onRemove = () => {
+        // Make sure we are unmounting the component
+        // from the react tree when this decoration is removed
+        removeDecorations(currentPluginState.decorationSet);
+      };
+      const mappedDecorationSet = decorationSet.map(tr.mapping, tr.doc, {
+        onRemove
+      });
+
+      // return same pluginState if decorationSet did not change
+      if (mappedDecorationSet === currentPluginState.decorationSet) {
+        return currentPluginState;
+      }
+      return {
+        ...currentPluginState,
+        decorationSet: mappedDecorationSet
+      };
+    }
+    return currentPluginState;
+  };
+};

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

@@ -0,0 +1,12 @@
+import { pluginKey } from './key';
+export const isInsertionTransaction = (transactions, action) => {
+  var _tr$getMeta2;
+  const tr = transactions.find(tr => {
+    var _tr$getMeta;
+    return ((_tr$getMeta = tr.getMeta(pluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === action;
+  });
+  if (!tr) {
+    return null;
+  }
+  return (_tr$getMeta2 = tr.getMeta(pluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.params;
+};

package/dist/es2019/stats-modifier.js

@@ -0,0 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export class StatsModifier {
+  constructor() {
+    _defineProperty(this, "startedAt", 0);
+    _defineProperty(this, "endedAt", 0);
+    _defineProperty(this, "keyCount", {
+      arrowUp: 0,
+      arrowDown: 0
+    });
+    _defineProperty(this, "increaseArrowUp", () => {
+      this.keyCount.arrowUp += 1;
+    });
+    _defineProperty(this, "increaseArrowDown", () => {
+      this.keyCount.arrowDown += 1;
+    });
+    _defineProperty(this, "serialize", () => {
+      var _this$keyCount, _this$keyCount2;
+      return {
+        startedAt: this.startedAt,
+        endedAt: performance.now(),
+        keyCount: {
+          arrowUp: ((_this$keyCount = this.keyCount) === null || _this$keyCount === void 0 ? void 0 : _this$keyCount.arrowUp) || 0,
+          arrowDown: ((_this$keyCount2 = this.keyCount) === null || _this$keyCount2 === void 0 ? void 0 : _this$keyCount2.arrowDown) || 0
+        }
+      };
+    });
+    this.startedAt = performance.now();
+    this.keyCount = {
+      arrowUp: 0,
+      arrowDown: 0
+    };
+  }
+}

package/dist/es2019/transforms/close-type-ahead.js

@@ -0,0 +1,7 @@
+import { ACTIONS } from '../pm-plugins/actions';
+import { pluginKey } from '../pm-plugins/key';
+export const closeTypeAhead = tr => {
+  return tr.setMeta(pluginKey, {
+    action: ACTIONS.CLOSE_TYPE_AHEAD
+  });
+};

package/dist/es2019/transforms/open-typeahead-at-cursor.js

@@ -0,0 +1,71 @@
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { ACTIONS } from '../pm-plugins/actions';
+import { pluginKey } from '../pm-plugins/key';
+export const openTypeAhead = props => tr => {
+  const {
+    triggerHandler,
+    inputMethod,
+    query
+  } = props;
+  tr.setMeta(pluginKey, {
+    action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
+    params: {
+      triggerHandler,
+      inputMethod,
+      query
+    }
+  });
+};
+export const openTypeAheadAtCursor = ({
+  triggerHandler,
+  inputMethod,
+  query
+}) => ({
+  tr
+}) => {
+  openTypeAhead({
+    triggerHandler,
+    inputMethod,
+    query
+  })(tr);
+  const {
+    selection
+  } = tr;
+  if (!(selection instanceof TextSelection || selection instanceof GapCursorSelection)) {
+    return tr;
+  }
+  if (selection instanceof GapCursorSelection) {
+    // Create space for the typeahead menu in gap cursor
+    tr.insertText(' ');
+    // delete 1 pos before wherever selection is now - that will delete the empty space
+    tr.delete(tr.selection.from - 1, tr.selection.from);
+  } else {
+    var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
+    if (!selection.$cursor) {
+      tr.deleteSelection();
+      return tr;
+    }
+
+    // Search & Destroy placeholder
+    const cursorPos = selection.$cursor.pos;
+    const nodeAtCursor = tr.doc.nodeAt(cursorPos);
+    const isPlaceholderAtCursorPosition = nodeAtCursor && nodeAtCursor.type.name === 'placeholder';
+    if (nodeAtCursor && isPlaceholderAtCursorPosition) {
+      tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+    }
+
+    // ME-2375 remove the superfluous '@' inserted before decoration
+    // by composition (https://github.com/ProseMirror/prosemirror/issues/903)
+    //
+    // Update:
+    // Now also handles any use case with superfluous typeahead triggers (ie. '@', ':', '/')
+    // being inserted due to composition by checking if we have the trigger
+    // directly before the typeahead. This should not happen unless it has
+    // been eroneously added because we require whitespace/newline for typeahead.
+    if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare = _selection$$head.parent) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.textContent) && (_selection$$head$pare2 = (_selection$$head$pare3 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare2 !== void 0 && _selection$$head$pare2.call(_selection$$head$pare3, triggerHandler.trigger)) {
+      tr.delete(cursorPos - 1, cursorPos);
+    }
+  }
+  return tr;
+};

package/dist/es2019/transforms/set-selection-before-query.js

@@ -0,0 +1,10 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const setSelectionBeforeQuery = rawText => tr => {
+  const currentPosition = tr.selection.$from.pos;
+  const positionBeforeRawText = Math.max(currentPosition - rawText.length, 0);
+  const resolvedPositionBeforeText = tr.doc.resolve(positionBeforeRawText);
+  const nextSelection = TextSelection.findFrom(resolvedPositionBeforeText, -1, true);
+  if (nextSelection) {
+    tr.setSelection(nextSelection);
+  }
+};

package/dist/es2019/ui/AssistiveText.js

@@ -0,0 +1,88 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
+const statusDebounceMillis = 1400;
+const assitiveTextStyles = css({
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  marginbottom: '-1px',
+  marginright: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whitespace: 'nowrap',
+  width: '1px'
+});
+class AssistveTextComponent extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      bump: false,
+      //when the same text needs to be read again, Hence it needs to be toggled between __status--A and __status--B
+      debounced: false,
+      silenced: false
+    });
+  }
+  componentWillMount() {
+    this.debounceStatusUpdate = debounce(() => {
+      if (!this.state.debounced) {
+        const shouldSilence = !this.props.isInFocus;
+        this.setState(({
+          bump
+        }) => ({
+          bump: !bump,
+          debounced: true,
+          silenced: shouldSilence
+        }));
+      }
+    }, statusDebounceMillis);
+  }
+  componentWillUnmount() {
+    this.debounceStatusUpdate.cancel();
+  }
+  componentWillReceiveProps() {
+    this.setState(({
+      bump
+    }) => ({
+      bump: !bump,
+      debounced: false
+    }));
+  }
+  render() {
+    const {
+      assistiveText,
+      id
+    } = this.props;
+    const {
+      bump,
+      debounced,
+      silenced
+    } = this.state;
+    this.debounceStatusUpdate();
+    return jsx("div", {
+      css: assitiveTextStyles
+    }, jsx("div", {
+      id: id + '__status--A',
+      role: "status",
+      "aria-atomic": "true",
+      "aria-live": "polite"
+    }, `${!silenced && debounced && bump ? assistiveText : ''}`), jsx("div", {
+      id: id + '__status--B',
+      role: "status",
+      "aria-atomic": "true",
+      "aria-live": "polite"
+    }, `${!silenced && debounced && !bump ? assistiveText : ''}`));
+  }
+}
+_defineProperty(AssistveTextComponent, "defaultProps", {
+  statusDebounceMillis: 1400,
+  debounce: true,
+  assistiveText: '',
+  isInFocus: false,
+  id: ''
+});
+export const AssistiveText = AssistveTextComponent;