@atlaskit/editor-plugin-type-ahead 2.2.4 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.3.0
+
+### Minor Changes
+
+- [#135301](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135301)
+  [`282513a152fa2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/282513a152fa2) -
+  [A11Y-9960] Extract the AssistiveText component from the typeahead plugin for reuse in other
+  editor plugins
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.4
 
 ### Patch Changes

package/dist/cjs/ui/InputQuery.js

@@ -13,11 +13,11 @@ var _reactIntlNext = require("react-intl-next");
 var _w3cKeyname = require("w3c-keyname");
 var _browser = require("@atlaskit/editor-common/browser");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
-var _AssistiveText = require("./AssistiveText");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -450,7 +450,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     style: {
       display: 'none'
     }
-  }, intl.formatMessage(_typeAhead.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+  }, intl.formatMessage(_typeAhead.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_ui.AssistiveText, {
     assistiveText: items.length === 0 ? intl.formatMessage(_typeAhead.typeAheadListMessages.noSearchResultsLabel, {
       itemsLength: items.length
     }) : '',

package/dist/cjs/ui/TypeAheadList.js

@@ -14,13 +14,13 @@ var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 var _List = require("react-virtualized/dist/commonjs/List");
 var _messages = require("@atlaskit/editor-common/messages");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _ui = require("@atlaskit/editor-common/ui");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
-var _AssistiveText = require("./AssistiveText");
 var _ListRow = require("./ListRow");
 var _TypeAheadListItem = require("./TypeAheadListItem");
 var _ViewMore = require("./ViewMore");
@@ -44,7 +44,7 @@ var list = (0, _react2.css)({
 var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
   var numberOfResults = _ref.numberOfResults;
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+  return (0, _react2.jsx)(_ui.AssistiveText, {
     assistiveText: intl.formatMessage(_typeAhead.typeAheadListMessages.searchResultsLabel, {
       itemsLength: numberOfResults
     })

package/dist/es2019/ui/InputQuery.js

@@ -10,11 +10,11 @@ import { useIntl } from 'react-intl-next';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
-import { AssistiveText } from './AssistiveText';
 const placeholderStyles = css({
   '&::after': {
     content: 'attr(data-place-holder)',

package/dist/es2019/ui/TypeAheadList.js

@@ -12,13 +12,13 @@ import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
-import { AssistiveText } from './AssistiveText';
 import { ListRow } from './ListRow';
 import { TypeAheadListItem } from './TypeAheadListItem';
 import { ViewMore } from './ViewMore';

package/dist/esm/ui/InputQuery.js

@@ -11,11 +11,11 @@ import { useIntl } from 'react-intl-next';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
-import { AssistiveText } from './AssistiveText';
 var placeholderStyles = css({
   '&::after': {
     content: 'attr(data-place-holder)',

package/dist/esm/ui/TypeAheadList.js

@@ -13,13 +13,13 @@ import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Box } from '@atlaskit/primitives';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
-import { AssistiveText } from './AssistiveText';
 import { ListRow } from './ListRow';
 import { TypeAheadListItem } from './TypeAheadListItem';
 import { ViewMore } from './ViewMore';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.2.4",
+	"version": "2.3.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.14.0",
+		"@atlaskit/editor-common": "^102.18.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -42,14 +42,14 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.4.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",

package/dist/cjs/ui/AssistiveText.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AssistiveText = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var assitiveTextStyles = (0, _react2.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'
-});
-var AssistiveText = exports.AssistiveText = function AssistiveText(_ref) {
-  var _ref$assistiveText = _ref.assistiveText,
-    assistiveText = _ref$assistiveText === void 0 ? '' : _ref$assistiveText,
-    _ref$isInFocus = _ref.isInFocus,
-    isInFocus = _ref$isInFocus === void 0 ? false : _ref$isInFocus,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id,
-    _ref$statusDebounceMi = _ref.statusDebounceMillis,
-    statusDebounceMillis = _ref$statusDebounceMi === void 0 ? 1400 : _ref$statusDebounceMi;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    bump = _useState2[0],
-    setBump = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    debounced = _useState4[0],
-    setDebounced = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    silenced = _useState6[0],
-    setSilenced = _useState6[1];
-  var debounceStatusUpdate = (0, _react.useMemo)(function () {
-    return (0, _debounce.default)(function () {
-      var shouldSilence = !isInFocus;
-      setBump(function (prevBump) {
-        return !prevBump;
-      });
-      setDebounced(true);
-      setSilenced(shouldSilence);
-    });
-  }, [isInFocus]);
-  (0, _react.useEffect)(function () {
-    if (!debounced) {
-      debounceStatusUpdate();
-      return function () {
-        debounceStatusUpdate.cancel();
-      };
-    }
-  }, [assistiveText, isInFocus, debounced, debounceStatusUpdate]);
-  (0, _react.useEffect)(function () {
-    if (debounced) {
-      setBump(function (prevBump) {
-        return !prevBump;
-      });
-      setDebounced(true);
-      setSilenced(!isInFocus);
-    }
-  }, [assistiveText, isInFocus, debounced]);
-  return (0, _react2.jsx)("div", {
-    css: assitiveTextStyles
-  }, (0, _react2.jsx)("div", {
-    "data-testid": id + '__status--A',
-    id: id + '__status--A',
-    role: "status",
-    "aria-atomic": "true",
-    "aria-live": "polite"
-  }, !silenced && debounced && bump ? assistiveText : ''), (0, _react2.jsx)("div", {
-    "data-testid": id + '__status--B',
-    id: id + '__status--B',
-    role: "status",
-    "aria-atomic": "true",
-    "aria-live": "polite"
-  }, !silenced && debounced && !bump ? assistiveText : ''));
-};

package/dist/es2019/ui/AssistiveText.js

@@ -1,68 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { useEffect, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import debounce from 'lodash/debounce';
-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'
-});
-export const AssistiveText = ({
-  assistiveText = '',
-  isInFocus = false,
-  id = '',
-  statusDebounceMillis = 1400
-}) => {
-  const [bump, setBump] = useState(false);
-  const [debounced, setDebounced] = useState(false);
-  const [silenced, setSilenced] = useState(false);
-  const debounceStatusUpdate = useMemo(() => debounce(() => {
-    const shouldSilence = !isInFocus;
-    setBump(prevBump => !prevBump);
-    setDebounced(true);
-    setSilenced(shouldSilence);
-  }), [isInFocus]);
-  useEffect(() => {
-    if (!debounced) {
-      debounceStatusUpdate();
-      return () => {
-        debounceStatusUpdate.cancel();
-      };
-    }
-  }, [assistiveText, isInFocus, debounced, debounceStatusUpdate]);
-  useEffect(() => {
-    if (debounced) {
-      setBump(prevBump => !prevBump);
-      setDebounced(true);
-      setSilenced(!isInFocus);
-    }
-  }, [assistiveText, isInFocus, debounced]);
-  return jsx("div", {
-    css: assitiveTextStyles
-  }, jsx("div", {
-    "data-testid": id + '__status--A',
-    id: id + '__status--A',
-    role: "status",
-    "aria-atomic": "true",
-    "aria-live": "polite"
-  }, !silenced && debounced && bump ? assistiveText : ''), jsx("div", {
-    "data-testid": id + '__status--B',
-    id: id + '__status--B',
-    role: "status",
-    "aria-atomic": "true",
-    "aria-live": "polite"
-  }, !silenced && debounced && !bump ? assistiveText : ''));
-};

package/dist/esm/ui/AssistiveText.js

@@ -1,87 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { useEffect, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import debounce from 'lodash/debounce';
-var 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'
-});
-export var AssistiveText = function AssistiveText(_ref) {
-  var _ref$assistiveText = _ref.assistiveText,
-    assistiveText = _ref$assistiveText === void 0 ? '' : _ref$assistiveText,
-    _ref$isInFocus = _ref.isInFocus,
-    isInFocus = _ref$isInFocus === void 0 ? false : _ref$isInFocus,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? '' : _ref$id,
-    _ref$statusDebounceMi = _ref.statusDebounceMillis,
-    statusDebounceMillis = _ref$statusDebounceMi === void 0 ? 1400 : _ref$statusDebounceMi;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    bump = _useState2[0],
-    setBump = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    debounced = _useState4[0],
-    setDebounced = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    silenced = _useState6[0],
-    setSilenced = _useState6[1];
-  var debounceStatusUpdate = useMemo(function () {
-    return debounce(function () {
-      var shouldSilence = !isInFocus;
-      setBump(function (prevBump) {
-        return !prevBump;
-      });
-      setDebounced(true);
-      setSilenced(shouldSilence);
-    });
-  }, [isInFocus]);
-  useEffect(function () {
-    if (!debounced) {
-      debounceStatusUpdate();
-      return function () {
-        debounceStatusUpdate.cancel();
-      };
-    }
-  }, [assistiveText, isInFocus, debounced, debounceStatusUpdate]);
-  useEffect(function () {
-    if (debounced) {
-      setBump(function (prevBump) {
-        return !prevBump;
-      });
-      setDebounced(true);
-      setSilenced(!isInFocus);
-    }
-  }, [assistiveText, isInFocus, debounced]);
-  return jsx("div", {
-    css: assitiveTextStyles
-  }, jsx("div", {
-    "data-testid": id + '__status--A',
-    id: id + '__status--A',
-    role: "status",
-    "aria-atomic": "true",
-    "aria-live": "polite"
-  }, !silenced && debounced && bump ? assistiveText : ''), jsx("div", {
-    "data-testid": id + '__status--B',
-    id: id + '__status--B',
-    role: "status",
-    "aria-atomic": "true",
-    "aria-live": "polite"
-  }, !silenced && debounced && !bump ? assistiveText : ''));
-};

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

@@ -1,14 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
-type AssistiveTextProps = {
-    assistiveText: string;
-    isInFocus: boolean;
-    id: string;
-    statusDebounceMillis?: number;
-    debounce?: boolean;
-};
-export declare const AssistiveText: ({ assistiveText, isInFocus, id, statusDebounceMillis, }: AssistiveTextProps) => jsx.JSX.Element;
-export {};

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

@@ -1,14 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
-type AssistiveTextProps = {
-    assistiveText: string;
-    isInFocus: boolean;
-    id: string;
-    statusDebounceMillis?: number;
-    debounce?: boolean;
-};
-export declare const AssistiveText: ({ assistiveText, isInFocus, id, statusDebounceMillis, }: AssistiveTextProps) => jsx.JSX.Element;
-export {};