@atlaskit/editor-plugin-table 0.0.7 → 0.0.9

package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -11,20 +11,28 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
 import { tableControlsSpacing, tableToolbarSize } from '../../consts';
+var messages = defineMessages({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+  }
+});
 
-var RowControls = /*#__PURE__*/function (_Component) {
-  _inherits(RowControls, _Component);
+var RowControlsComponent = /*#__PURE__*/function (_Component) {
+  _inherits(RowControlsComponent, _Component);
 
-  var _super = _createSuper(RowControls);
+  var _super = _createSuper(RowControlsComponent);
 
-  function RowControls() {
+  function RowControlsComponent() {
     var _this;
 
-    _classCallCheck(this, RowControls);
+    _classCallCheck(this, RowControlsComponent);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -42,7 +50,7 @@ var RowControls = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(RowControls, [{
+  _createClass(RowControlsComponent, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -52,7 +60,8 @@ var RowControls = /*#__PURE__*/function (_Component) {
           tableRef = _this$props.tableRef,
           hoveredRows = _this$props.hoveredRows,
           isInDanger = _this$props.isInDanger,
-          isResizing = _this$props.isResizing;
+          isResizing = _this$props.isResizing,
+          formatMessage = _this$props.intl.formatMessage;
 
       if (!tableRef) {
         return null;
@@ -89,6 +98,7 @@ var RowControls = /*#__PURE__*/function (_Component) {
             paddingTop: thisRowSticky ? "".concat(tableControlsSpacing, "px") : undefined
           }
         }, /*#__PURE__*/React.createElement("button", {
+          "aria-label": formatMessage(messages.rowControl),
           type: "button",
           className: "".concat(ClassName.ROW_CONTROLS_BUTTON, "\n                  ").concat(ClassName.CONTROLS_BUTTON, "\n                "),
           onClick: function onClick(event) {
@@ -107,7 +117,7 @@ var RowControls = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return RowControls;
+  return RowControlsComponent;
 }(Component);
 
-export { RowControls as default };
+export var RowControls = injectIntl(RowControlsComponent);

package/dist/esm/plugins/table/ui/TableFloatingControls/index.js

@@ -20,9 +20,9 @@ import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverRows, selectRow } from '../../commands';
 import { isSelectionUpdated } from '../../utils';
-import CornerControls from './CornerControls';
+import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import RowControls from './RowControls';
+import { RowControls } from './RowControls';
 
 var TableFloatingControls = /*#__PURE__*/function (_Component) {
   _inherits(TableFloatingControls, _Component);

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.7"
+	"version": "0.0.9"
 }

package/dist/types/plugins/table/nodeviews/types.d.ts

@@ -20,4 +20,5 @@ export interface Props {
     tableRenderOptimization?: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
     getEditorFeatureFlags: GetEditorFeatureFlags;
+    hasIntlContext: boolean;
 }

package/dist/types/plugins/table/ui/TableFloatingControls/CornerControls/index.d.ts

@@ -1,4 +1,5 @@
-import { Component } from 'react';
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import { EditorView } from 'prosemirror-view';
 export interface Props {
     editorView: EditorView;
@@ -10,10 +11,6 @@ export interface Props {
     isHeaderRowEnabled?: boolean;
     stickyTop?: number;
 }
-export default class CornerControls extends Component<Props, any> {
-    render(): JSX.Element | null;
-    private isActive;
-    private clearHoverSelection;
-    private selectTable;
-    private hoverTable;
-}
+export declare const CornerControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts

@@ -1,5 +1,6 @@
-import { Component } from 'react';
+import React from 'react';
 import { EditorView } from 'prosemirror-view';
+import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     editorView: EditorView;
     tableRef: HTMLTableElement;
@@ -11,7 +12,6 @@ export interface Props {
     insertRowButtonIndex?: number;
     stickyTop?: number;
 }
-export default class RowControls extends Component<Props> {
-    render(): JSX.Element | null;
-    private clearHoverSelection;
-}
+export declare const RowControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/dist/types-ts4.0/plugins/table/nodeviews/types.d.ts

@@ -20,4 +20,5 @@ export interface Props {
     tableRenderOptimization?: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
     getEditorFeatureFlags: GetEditorFeatureFlags;
+    hasIntlContext: boolean;
 }

package/dist/types-ts4.0/plugins/table/ui/TableFloatingControls/CornerControls/index.d.ts

@@ -1,4 +1,5 @@
-import { Component } from 'react';
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
 import { EditorView } from 'prosemirror-view';
 export interface Props {
     editorView: EditorView;
@@ -10,10 +11,6 @@ export interface Props {
     isHeaderRowEnabled?: boolean;
     stickyTop?: number;
 }
-export default class CornerControls extends Component<Props, any> {
-    render(): JSX.Element | null;
-    private isActive;
-    private clearHoverSelection;
-    private selectTable;
-    private hoverTable;
-}
+export declare const CornerControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/dist/types-ts4.0/plugins/table/ui/TableFloatingControls/RowControls/index.d.ts

@@ -1,5 +1,6 @@
-import { Component } from 'react';
+import React from 'react';
 import { EditorView } from 'prosemirror-view';
+import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     editorView: EditorView;
     tableRef: HTMLTableElement;
@@ -11,7 +12,6 @@ export interface Props {
     insertRowButtonIndex?: number;
     stickyTop?: number;
 }
-export default class RowControls extends Component<Props> {
-    render(): JSX.Element | null;
-    private clearHoverSelection;
-}
+export declare const RowControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -68,6 +68,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^12.1.5",
     "@types/prosemirror-history": "^1.0.1",
     "enzyme": "^3.10.0",
     "prosemirror-history": "^1.1.3",
@@ -81,7 +82,11 @@
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   }
 }

package/src/__tests__/unit/hover-selection.ts

@@ -87,7 +87,7 @@ describe('table hover selection plugin', () => {
         selectColumns([column])(editorView.state, editorView.dispatch);
       });
 
-      test('should add decoration', () => {
+      it('should add decoration', () => {
         const cells = getCellsInColumn(column)(editorView.state.selection)!;
 
         const decor = getTableDecorations(

package/src/__tests__/unit/index-with-fake-timers.ts

@@ -82,6 +82,7 @@ describe.skip('TableView', () => {
       getPos: () => 1,
       getEditorContainerWidth,
       getEditorFeatureFlags: fakeGetEditorFeatureFlags,
+      hasIntlContext: true,
     }).init();
 
     // we expect to have a contentDOM after instanciating the NodeView so that

package/src/__tests__/unit/ui/CornerControls.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
 import {
   doc,
   table,
@@ -10,17 +11,12 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import {
-  TablePluginState,
-  TableCssClassName as ClassName,
-} from '../../../plugins/table/types';
-import CornerControls from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
+import { TablePluginState } from '../../../plugins/table/types';
+import { CornerControls } from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../../plugins/table-plugin';
 
-const CornerButton = `.${ClassName.CONTROLS_CORNER_BUTTON}`;
-
 describe('CornerControls', () => {
   const createEditor = createEditorFactory<TablePluginState>();
 
@@ -40,17 +36,19 @@ describe('CornerControls', () => {
         doc(table()(tr(thEmpty, thEmpty, thEmpty))),
       );
 
-      const controls = mountWithIntl(
-        <CornerControls
-          tableRef={document.querySelector('table')!}
-          editorView={editorView}
-        />,
+      const ref = editorView.dom.querySelector('table') || undefined;
+
+      render(
+        <IntlProvider locale="en">
+          <CornerControls tableRef={ref} editorView={editorView} />
+        </IntlProvider>,
       );
 
-      controls.find(CornerButton).simulate('click');
+      const cornerControl = screen.getByLabelText('Highlight table');
+
+      fireEvent.click(cornerControl);
 
       expect(isTableSelected(editorView.state.selection)).toBe(true);
-      controls.unmount();
     });
   });
 
@@ -62,19 +60,21 @@ describe('CornerControls', () => {
         ),
       );
 
-      const controls = mountWithIntl(
-        <CornerControls
-          tableRef={document.querySelector('table')!}
-          editorView={editorView}
-        />,
+      const ref = editorView.dom.querySelector('table') || undefined;
+
+      render(
+        <IntlProvider locale="en">
+          <CornerControls tableRef={ref} editorView={editorView} />
+        </IntlProvider>,
       );
 
-      controls.find(CornerButton).simulate('mouseover');
+      const cornerControl = screen.getByLabelText('Highlight table');
+
+      fireEvent.mouseOver(cornerControl);
 
       const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
       expect(hoveredColumns).toEqual([0, 1, 2]);
       expect(hoveredRows).toEqual([0, 1]);
-      controls.unmount();
     });
   });
 });

package/src/__tests__/unit/ui/FloatingDeleteButton.tsx

@@ -69,11 +69,11 @@ describe('Floating Delete Button', () => {
     }
   });
 
-  test('should not render a delete button with no selection', () => {
+  it('should not render a delete button with no selection', () => {
     expect(wrapper.find(DeleteButton).length).toBe(0);
   });
 
-  test('should not render a delete button with whole table selected', () => {
+  it('should not render a delete button with whole table selected', () => {
     // select the whole table
     editorView.dispatch(selectTable(editorView.state.tr));
 
@@ -112,7 +112,7 @@ describe('Floating Delete Button', () => {
       },
     );
 
-    test('should render a single delete button over multiple column selections', () => {
+    it('should render a single delete button over multiple column selections', () => {
       selectColumns([0, 1])(editorView.state, editorView.dispatch);
 
       // We need to force renderer

package/src/__tests__/unit/ui/FloatingInsertButton.tsx

@@ -94,8 +94,8 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
     jest.restoreAllMocks();
   });
 
-  test('sends error analytics event after attempting to render for second column', () => {
-    // We need to set the props here, as by default insertColumnButtonIndex in undefined (in
+  it('sends error analytics event after attempting to render for second column', () => {
+    // We need to set the props here, as by default insertColumnButtonIndex is undefined (in
     // mountWithIntl()) and rendering halts when it's undefined
     wrapper.setProps({
       insertColumnButtonIndex: 1,
@@ -115,11 +115,11 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
     });
   });
 
-  test('should not render insert button with index', () => {
+  it('should not render insert button by default', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test("shouldn't render insert button for second column", () => {
+  it("shouldn't render insert button for second column", () => {
     wrapper.setProps({
       insertColumnButtonIndex: 1,
     });
@@ -127,7 +127,7 @@ describe('Floating Insert Button when findDomRefAtPos fails', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test("shouldn't render insert button for second row", () => {
+  it("shouldn't render insert button for second row", () => {
     wrapper.setProps({
       insertRowButtonIndex: 1,
     });
@@ -181,21 +181,21 @@ describe('Floating Insert Button', () => {
     wrapper.unmount();
   });
 
-  test('should not render insert button with index', () => {
+  it('should not render insert button by default', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should render insert button for second column', () => {
+  it('should render insert button for second column', () => {
     wrapper.setProps({ insertColumnButtonIndex: 1 });
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should render insert button for second row', () => {
+  it('should render insert button for second row', () => {
     wrapper.setProps({ insertRowButtonIndex: 1 });
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should no render insert button for first row when row header is enabled', () => {
+  it('should not render insert button for first row when row header is enabled', () => {
     wrapper.setProps({
       insertRowButtonIndex: 0,
       isHeaderRowEnabled: true,
@@ -204,7 +204,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should render insert button for first row when row header is disabled', () => {
+  it('should render insert button for first row when row header is disabled', () => {
     wrapper.setProps({
       insertRowButtonIndex: 0,
       isHeaderRowEnabled: false,
@@ -213,7 +213,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should no render insert button for first col when column header is enabled', () => {
+  it('should not render insert button for first col when column header is enabled', () => {
     wrapper.setProps({
       insertColumnButtonIndex: 0,
       isHeaderColumnEnabled: true,
@@ -222,7 +222,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should render insert button for first col when column header is disabled', () => {
+  it('should render insert button for first col when column header is disabled', () => {
     wrapper.setProps({
       insertColumnButtonIndex: 0,
       isHeaderColumnEnabled: false,
@@ -231,7 +231,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should render insert button when a single cell is selected', () => {
+  it('should render insert button when a single cell is selected', () => {
     selectCell(1, 1)(editorView.state, editorView.dispatch);
 
     wrapper.setProps({
@@ -242,7 +242,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(1);
   });
 
-  test('should no render insert button when a whole column is selected', () => {
+  it('should not render insert button when a whole column is selected', () => {
     selectColumns([1])(editorView.state, editorView.dispatch);
 
     wrapper.setProps({
@@ -253,7 +253,7 @@ describe('Floating Insert Button', () => {
     expect(wrapper.find(InsertButton).length).toBe(0);
   });
 
-  test('should no render insert button when a whole row is selected', () => {
+  it('should no render insert button when a whole row is selected', () => {
     selectRows([1])(editorView.state, editorView.dispatch);
 
     wrapper.setProps({

package/src/__tests__/unit/ui/RowControls.tsx

@@ -22,7 +22,7 @@ import {
   TablePluginState,
 } from '../../../plugins/table/types';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
-import RowControls from '../../../plugins/table/ui/TableFloatingControls/RowControls';
+import { RowControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { ReactWrapper } from 'enzyme';
 import tablePlugin from '../../../plugins/table-plugin';

package/src/__tests__/unit/ui/TableFloatingControls.tsx

@@ -19,8 +19,8 @@ import {
 import { TablePluginState } from '../../../plugins/table/types';
 import { hoverTable } from '../../../plugins/table/commands';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
-import CornerControls from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
-import RowControls from '../../../plugins/table/ui/TableFloatingControls/RowControls';
+import { CornerControls } from '../../../plugins/table/ui/TableFloatingControls/CornerControls';
+import { RowControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import tablePlugin from '../../../plugins/table-plugin';

package/src/plugins/table/__tests__/unit/commands/insert.ts

@@ -53,7 +53,7 @@ describe('table plugin: insert', () => {
         pluginKey,
       });
 
-    test('does scale cells in tables which are not overflowing', () => {
+    it('does scale cells in tables which are not overflowing', () => {
       const { editorView } = editor(
         doc(
           table({ localId: TABLE_LOCAL_ID })(
@@ -84,7 +84,7 @@ describe('table plugin: insert', () => {
       );
     });
 
-    test('does not scale cells in tables which are overflowing', () => {
+    it('does not scale cells in tables which are overflowing', () => {
       const { editorView } = editor(
         doc(
           table({ localId: TABLE_LOCAL_ID })(

package/src/plugins/table/__tests__/unit/commands.ts

@@ -810,7 +810,7 @@ describe('table plugin: actions', () => {
      * | th | th | th |
      * | th | td | td |
      */
-    test('should keep right row header and cells after split', () => {
+    it('should keep right row header and cells after split', () => {
       const { editorView } = editor(
         doc(
           table()(
@@ -833,7 +833,7 @@ describe('table plugin: actions', () => {
       );
     });
 
-    test('should split cell with media selected', () => {
+    it('should split cell with media selected', () => {
       const { editorView } = editor(
         doc(
           table()(

package/src/plugins/table/__tests__/unit/nodeviews/TableComponent.tsx

@@ -259,7 +259,7 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       return { wrapper, view };
     }
 
-    describe('with optimisation on', () => {
+    describe('with optimization on', () => {
       let wrapper: ReactWrapper;
       beforeEach(() => {
         wrapper = setupTable(true).wrapper;
@@ -306,7 +306,7 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       });
     });
 
-    describe('with optimisation off', () => {
+    describe('with optimization off', () => {
       let wrapper: ReactWrapper;
       beforeEach(() => {
         wrapper = setupTable(false).wrapper;

package/src/plugins/table/__tests__/unit/nodeviews/table.ts

@@ -73,6 +73,7 @@ describe('table -> nodeviews -> table.tsx', () => {
             tableRenderOptimization: true,
             getEditorContainerWidth: () => ({ width: 500 }),
             getEditorFeatureFlags: () => ({}),
+            hasIntlContext: true,
           }).init();
 
           renderSpy = jest.spyOn(tableNodeView, 'render');