@atlaskit/editor-plugin-table 0.0.6 → 0.0.8

package/dist/esm/plugins/table/nodeviews/table.js

@@ -54,7 +54,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
     _classCallCheck(this, TableView);
 
-    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
 
     _defineProperty(_assertThisInitialized(_this), "getNode", function () {
       return _this.node;
@@ -226,6 +226,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
   var _getEditorFeatureFlag = getEditorFeatureFlags(),
       tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
 
+  var hasIntlContext = true;
   return new TableView({
     node: node,
     view: view,
@@ -236,6 +237,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
     options: options,
     tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    hasIntlContext: hasIntlContext
   }).init();
 };

package/dist/esm/plugins/table/nodeviews/tableCell.js

@@ -4,6 +4,8 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import uuid from 'uuid';
 import { DOMSerializer } from 'prosemirror-model';
 import { getCellDomAttrs, getCellAttrs } from '@atlaskit/adf-schema';
+var DEFAULT_COL_SPAN = 1;
+var DEFAULT_ROW_SPAN = 1;
 
 var TableCellNodeView = /*#__PURE__*/function () {
   function TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer) {
@@ -49,10 +51,7 @@ var TableCellNodeView = /*#__PURE__*/function () {
       // this can happen when undoing merge cells
 
 
-      var defaultColspan = 1,
-          defaultRowspan = 1;
-
-      if (colspan !== (node.attrs.colspan || defaultColspan) || rowspan !== (node.attrs.rowspan || defaultRowspan)) {
+      if (colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) || rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)) {
         return false;
       } // added + changed attributes
 

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/column-state.js

@@ -35,7 +35,7 @@ export var getCellsRefsInColumn = function getCellsRefsInColumn(columnIndex, tab
     }
   });
   return cells;
-}; // calculates column withs based on `cells` DOM refs
+}; // calculates column widths based on `cells` DOM refs
 
 export var calculateColumnWidth = function calculateColumnWidth(cells, calculateColumnWidthCb) {
   var maxColWidth = 0;

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -9,8 +9,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { getFreeSpace } from './column-state';
 import { bulkColumnsResize, getTotalWidth } from './resize-state';
 export var growColumn = function growColumn(state, colIndex, amount, selectedColumns) {
-  // can't grow the last column
-  if (!state.cols[colIndex + 1]) {
+  // can't grow if columns don't exist or it's the last column
+  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
     return state;
   }
 
@@ -29,7 +29,12 @@ export var growColumn = function growColumn(state, colIndex, amount, selectedCol
   return newState;
 };
 export var shrinkColumn = function shrinkColumn(state, colIndex, amount, selectedColumns) {
-  // try to shrink dragging column by giving from the column to the right first
+  // can't shrink if columns don't exist
+  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
+    return state;
+  } // try to shrink dragging column by giving from the column to the right first
+
+
   var res = moveSpaceFrom(state, colIndex, colIndex + 1, -amount);
   var newState = res.state;
   var isOverflownTable = getTotalWidth(newState) > newState.maxSize;

package/dist/esm/plugins/table/toolbar.js

@@ -15,8 +15,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '@atlaskit/editor-common/utils'; // TODO: ED-14403 investigate why these translations don't work
-
+import { closestElement } from '@atlaskit/editor-common/utils';
 export var messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

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

@@ -11,21 +11,29 @@ 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 classnames from 'classnames';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
+var messages = defineMessages({
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
+  }
+});
 
-var CornerControls = /*#__PURE__*/function (_Component) {
-  _inherits(CornerControls, _Component);
+var CornerControlComponent = /*#__PURE__*/function (_Component) {
+  _inherits(CornerControlComponent, _Component);
 
-  var _super = _createSuper(CornerControls);
+  var _super = _createSuper(CornerControlComponent);
 
-  function CornerControls() {
+  function CornerControlComponent() {
     var _this;
 
-    _classCallCheck(this, CornerControls);
+    _classCallCheck(this, CornerControlComponent);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -72,14 +80,15 @@ var CornerControls = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(CornerControls, [{
+  _createClass(CornerControlComponent, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
           isInDanger = _this$props2.isInDanger,
           tableRef = _this$props2.tableRef,
           isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled;
+          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+          formatMessage = _this$props2.intl.formatMessage;
 
       if (!tableRef) {
         return null;
@@ -95,6 +104,7 @@ var CornerControls = /*#__PURE__*/function (_Component) {
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
         }
       }, /*#__PURE__*/React.createElement("button", {
+        "aria-label": formatMessage(messages.cornerControl),
         type: "button",
         className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
           danger: isActive && isInDanger
@@ -114,7 +124,7 @@ var CornerControls = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return CornerControls;
+  return CornerControlComponent;
 }(Component);
 
-export { CornerControls as default };
+export var CornerControls = injectIntl(CornerControlComponent);

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/plugins/table/utils/column-controls.js

@@ -119,7 +119,7 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
   // for cells in a table with unchanged column widths,
   // these are identified by the lack of colwidth data attribute,
   // return equally partitioned total cell width in DOM for each cell.
-  if (colspan <= 1 || !colwidth) {
+  if (colspan === 1 || !colwidth) {
     return new Array(colspan).fill(width / colspan);
   } // For cells that have colSpan > 1 and
   // are part of a table with resized columns

package/dist/esm/version.json

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

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.6",
+  "version": "0.0.8",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^24.0.0",
-    "@atlaskit/editor-common": "^70.0.0",
+    "@atlaskit/editor-common": "^70.1.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
@@ -56,6 +56,7 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
+    "@atlaskit/analytics-next": "^8.3.3",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/editor-core": "^173.0.0",
     "@atlaskit/editor-test-helpers": "^17.2.0",
@@ -63,9 +64,11 @@
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
+    "@atlaskit/util-data-test": "^17.5.5",
     "@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",
@@ -79,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"
+      ]
     }
   }
 }