@atlaskit/editor-common 116.17.0 → 116.17.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 116.17.1
+
+### Patch Changes
+
+- [`e27cc2a34b7c7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e27cc2a34b7c7) -
+  Update the editor plus menu virtualized list accessible label under the
+  `platform_editor_plus_menu_aria_label` experiment.
+- [`cc7e55c918e23`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc7e55c918e23) -
+  [ux] Adds info icon next to visually disabled table column sort buttons with a tooltip explaining
+  that sort won't work when merged cells present.
+- Updated dependencies
+
 ## 116.17.0
 
 ### Minor Changes

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _reactIntl = require("react-intl");
 var _reactVirtualized = require("react-virtualized");
 var _AutoSizer = require("react-virtualized/dist/commonjs/AutoSizer");
 var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
@@ -28,6 +29,7 @@ var _quickInsert = require("../../../quick-insert");
 var _constants = require("../../constants");
 var _useContainerWidth2 = _interopRequireDefault(require("../../hooks/use-container-width"));
 var _useFocus = _interopRequireDefault(require("../../hooks/use-focus"));
+var _messages = _interopRequireDefault(require("../../messages"));
 var _types = require("../../types");
 var _EmptyState = _interopRequireDefault(require("./EmptyState"));
 var _getColumnCount = require("./getColumnCount");
@@ -191,6 +193,9 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
     setFocusedCategoryIndex = props.setFocusedCategoryIndex,
     selectedCategoryIndex = props.selectedCategoryIndex,
     selectedItemIndex = props.selectedItemIndex;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var elementListAriaLabel = (0, _expValEquals.expValEquals)('platform_editor_plus_menu_aria_label', 'isEnabled', true) ? formatMessage(_messages.default.elementListAriaLabel) : undefined;
   var rowRenderer = (0, _react.useMemo)(function () {
     return function (_ref4) {
       var index = _ref4.index,
@@ -255,7 +260,8 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
     height: height,
     overscanRowCount: 3,
     containerRole: "presentation",
-    role: "listbox"
+    role: "listbox",
+    "aria-label": elementListAriaLabel
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, selectedItemIndex !== undefined && {
@@ -276,6 +282,9 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
     setFocusedCategoryIndex = props.setFocusedCategoryIndex,
     selectedCategoryIndex = props.selectedCategoryIndex,
     selectedItemIndex = props.selectedItemIndex;
+  var _useIntl2 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  var elementListAriaLabel = (0, _expValEquals.expValEquals)('platform_editor_plus_menu_aria_label', 'isEnabled', true) ? formatMessage(_messages.default.elementListAriaLabel) : undefined;
   var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
   var rowCount = Math.ceil(items.length / columnCount);
   var cellRenderer = (0, _react.useMemo)(function () {
@@ -343,6 +352,7 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
     containerRole: "row",
     cellRenderer: cellRenderer,
     height: height,
+    "aria-label": elementListAriaLabel,
     width: containerWidth - _constants.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
     /**
      * Refresh Grid on WidthObserver value change.

package/dist/cjs/element-browser/messages.js

@@ -16,6 +16,11 @@ var message = (0, _reactIntl.defineMessages)({
     defaultMessage: 'Search',
     description: 'The text is shown as placeholder text inside the search input field in the element browser. It prompts the user to type a query to filter available elements.'
   },
+  elementListAriaLabel: {
+    id: 'fabric.editor.elementbrowser.elementlist.ariaLabel',
+    defaultMessage: 'Select element',
+    description: 'The text is used as an aria-label for the element browser listbox. It provides an accessible name for screen readers to identify the list of elements that can be selected and inserted.'
+  },
   searchAriaLabel: {
     id: 'fabric.editor.elementbrowser.searchbar.ariaLabel',
     defaultMessage: 'Search',

package/dist/cjs/messages/table.js

@@ -316,6 +316,11 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: "\u26A0\uFE0F You can't sort a table with merged cells",
     description: "Split your cells to enable this feature"
   },
+  canNotSortTableNoIcon: {
+    id: 'fabric.editor.canNotSortTableNoIcon',
+    defaultMessage: "You can't sort a table with merged cells",
+    description: "Split your cells to enable this feature"
+  },
   distributeColumns: {
     id: 'fabric.editor.distributeColumns',
     defaultMessage: "Distribute columns",

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "116.16.0";
+var packageVersion = "116.17.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "116.16.0";
+var packageVersion = "116.17.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -8,6 +8,7 @@ import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl';
 import { Grid, List } from 'react-virtualized';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
@@ -25,6 +26,7 @@ import { IconFallback } from '../../../quick-insert';
 import { ELEMENT_ITEM_HEIGHT, ELEMENT_ITEM_PADDING, ELEMENT_LIST_PADDING, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
+import commonMessages from '../../messages';
 import { Modes } from '../../types';
 import EmptyState from './EmptyState';
 import { getColumnCount } from './getColumnCount';
@@ -179,6 +181,10 @@ const ElementListSingleColumn = props => {
     selectedCategoryIndex,
     selectedItemIndex
   } = props;
+  const {
+    formatMessage
+  } = useIntl();
+  const elementListAriaLabel = expValEquals('platform_editor_plus_menu_aria_label', 'isEnabled', true) ? formatMessage(commonMessages.elementListAriaLabel) : undefined;
   const rowRenderer = useMemo(() => ({
     index,
     key,
@@ -242,7 +248,8 @@ const ElementListSingleColumn = props => {
     height: height,
     overscanRowCount: 3,
     containerRole: "presentation",
-    role: "listbox"
+    role: "listbox",
+    "aria-label": elementListAriaLabel
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, selectedItemIndex !== undefined && {
@@ -265,6 +272,10 @@ const ElementListMultipleColumns = props => {
     selectedCategoryIndex,
     selectedItemIndex
   } = props;
+  const {
+    formatMessage
+  } = useIntl();
+  const elementListAriaLabel = expValEquals('platform_editor_plus_menu_aria_label', 'isEnabled', true) ? formatMessage(commonMessages.elementListAriaLabel) : undefined;
   const columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
   const rowCount = Math.ceil(items.length / columnCount);
   const cellRenderer = useMemo(() => ({
@@ -331,6 +342,7 @@ const ElementListMultipleColumns = props => {
     containerRole: "row",
     cellRenderer: cellRenderer,
     height: height,
+    "aria-label": elementListAriaLabel,
     width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
     /**
      * Refresh Grid on WidthObserver value change.

package/dist/es2019/element-browser/messages.js

@@ -10,6 +10,11 @@ const message = defineMessages({
     defaultMessage: 'Search',
     description: 'The text is shown as placeholder text inside the search input field in the element browser. It prompts the user to type a query to filter available elements.'
   },
+  elementListAriaLabel: {
+    id: 'fabric.editor.elementbrowser.elementlist.ariaLabel',
+    defaultMessage: 'Select element',
+    description: 'The text is used as an aria-label for the element browser listbox. It provides an accessible name for screen readers to identify the list of elements that can be selected and inserted.'
+  },
   searchAriaLabel: {
     id: 'fabric.editor.elementbrowser.searchbar.ariaLabel',
     defaultMessage: 'Search',

package/dist/es2019/messages/table.js

@@ -310,6 +310,11 @@ export const messages = defineMessages({
     defaultMessage: `⚠️ You can't sort a table with merged cells`,
     description: `Split your cells to enable this feature`
   },
+  canNotSortTableNoIcon: {
+    id: 'fabric.editor.canNotSortTableNoIcon',
+    defaultMessage: `You can't sort a table with merged cells`,
+    description: `Split your cells to enable this feature`
+  },
   distributeColumns: {
     id: 'fabric.editor.distributeColumns',
     defaultMessage: `Distribute columns`,

package/dist/es2019/monitoring/error.js

@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "116.16.0";
+const packageVersion = "116.17.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "116.16.0";
+const packageVersion = "116.17.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/element-browser/components/ElementList/ElementList.js

@@ -9,6 +9,7 @@ import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl';
 import { Grid, List } from 'react-virtualized';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
@@ -26,6 +27,7 @@ import { IconFallback } from '../../../quick-insert';
 import { ELEMENT_ITEM_HEIGHT, ELEMENT_ITEM_PADDING, ELEMENT_LIST_PADDING, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
+import commonMessages from '../../messages';
 import { Modes } from '../../types';
 import EmptyState from './EmptyState';
 import { getColumnCount } from './getColumnCount';
@@ -180,6 +182,9 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
     setFocusedCategoryIndex = props.setFocusedCategoryIndex,
     selectedCategoryIndex = props.selectedCategoryIndex,
     selectedItemIndex = props.selectedItemIndex;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var elementListAriaLabel = expValEquals('platform_editor_plus_menu_aria_label', 'isEnabled', true) ? formatMessage(commonMessages.elementListAriaLabel) : undefined;
   var rowRenderer = useMemo(function () {
     return function (_ref4) {
       var index = _ref4.index,
@@ -244,7 +249,8 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
     height: height,
     overscanRowCount: 3,
     containerRole: "presentation",
-    role: "listbox"
+    role: "listbox",
+    "aria-label": elementListAriaLabel
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, selectedItemIndex !== undefined && {
@@ -265,6 +271,9 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
     setFocusedCategoryIndex = props.setFocusedCategoryIndex,
     selectedCategoryIndex = props.selectedCategoryIndex,
     selectedItemIndex = props.selectedItemIndex;
+  var _useIntl2 = useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  var elementListAriaLabel = expValEquals('platform_editor_plus_menu_aria_label', 'isEnabled', true) ? formatMessage(commonMessages.elementListAriaLabel) : undefined;
   var columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
   var rowCount = Math.ceil(items.length / columnCount);
   var cellRenderer = useMemo(function () {
@@ -332,6 +341,7 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
     containerRole: "row",
     cellRenderer: cellRenderer,
     height: height,
+    "aria-label": elementListAriaLabel,
     width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
     /**
      * Refresh Grid on WidthObserver value change.

package/dist/esm/element-browser/messages.js

@@ -10,6 +10,11 @@ var message = defineMessages({
     defaultMessage: 'Search',
     description: 'The text is shown as placeholder text inside the search input field in the element browser. It prompts the user to type a query to filter available elements.'
   },
+  elementListAriaLabel: {
+    id: 'fabric.editor.elementbrowser.elementlist.ariaLabel',
+    defaultMessage: 'Select element',
+    description: 'The text is used as an aria-label for the element browser listbox. It provides an accessible name for screen readers to identify the list of elements that can be selected and inserted.'
+  },
   searchAriaLabel: {
     id: 'fabric.editor.elementbrowser.searchbar.ariaLabel',
     defaultMessage: 'Search',

package/dist/esm/messages/table.js

@@ -310,6 +310,11 @@ export var messages = defineMessages({
     defaultMessage: "\u26A0\uFE0F You can't sort a table with merged cells",
     description: "Split your cells to enable this feature"
   },
+  canNotSortTableNoIcon: {
+    id: 'fabric.editor.canNotSortTableNoIcon',
+    defaultMessage: "You can't sort a table with merged cells",
+    description: "Split your cells to enable this feature"
+  },
   distributeColumns: {
     id: 'fabric.editor.distributeColumns',
     defaultMessage: "Distribute columns",

package/dist/esm/monitoring/error.js

@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "116.16.0";
+var packageVersion = "116.17.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "116.16.0";
+var packageVersion = "116.17.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/types/element-browser/messages.d.ts

@@ -1,7 +1,7 @@
-type MessageKeys = 'assistiveTextDefault' | 'assistiveTextResult' | 'elementAfterInputMessage' | 'placeHolderMessage' | 'searchAriaLabel' | 'searchAriaLabelNew';
+type MessageKeys = 'assistiveTextDefault' | 'assistiveTextResult' | 'elementAfterInputMessage' | 'elementListAriaLabel' | 'placeHolderMessage' | 'searchAriaLabel' | 'searchAriaLabelNew';
 declare const message: Record<MessageKeys, {
-    id: string;
     defaultMessage: string;
     description?: string;
+    id: string;
 }>;
 export default message;

package/dist/types/messages/table.d.ts

@@ -44,6 +44,11 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    canNotSortTableNoIcon: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     cellAlignment: {
         defaultMessage: string;
         description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "116.17.0",
+	"version": "116.17.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -80,7 +80,7 @@
 		"@atlaskit/task-decision": "^21.4.0",
 		"@atlaskit/teams-app-config": "^2.1.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/tmp-editor-statsig": "^114.4.0",
+		"@atlaskit/tmp-editor-statsig": "^114.5.0",
 		"@atlaskit/tokens": "^15.2.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/width-detector": "^6.1.0",