@atlaskit/editor-plugin-table 2.6.6 → 2.6.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.8
+
+### Patch Changes
+
+- [`d432ad14798`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d432ad14798) - [ux] Added standard page guidelines when custom table width enabled and is resizing table.
+
+## 2.6.7
+
+### Patch Changes
+
+- [`56f4b88f7c2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56f4b88f7c2) - [ux] ED-19317: fix numbered column shifted up issue when sticky header
+
 ## 2.6.6
 
 ### Patch Changes

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

@@ -13,8 +13,8 @@ var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
@@ -32,20 +32,28 @@ var _utils2 = require("../utils");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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; } }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var tableAttributes = function tableAttributes(node, options, state, pos) {
   // provide a width for tables when custom table width is supported
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !(0, _utils2.isTableNested)(state, pos);
-  var style = shouldHaveInlineWidth ? "width: ".concat(node.attrs.isNumberColumnEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) - _editorSharedStyles.akEditorTableNumberColumnWidth : (0, _nodeWidth.getTableContainerWidth)(node), "px") : undefined;
-  return {
+  var style = "width: ".concat(node.attrs.isNumberColumnEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) - _editorSharedStyles.akEditorTableNumberColumnWidth : (0, _nodeWidth.getTableContainerWidth)(node), "px");
+  var dataAttrsInTable = {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
-    style: style
+    'data-table-width': node.attrs.width
   };
+  if (shouldHaveInlineWidth) {
+    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
+    return _objectSpread(_objectSpread({}, dataAttrsInTable), {}, {
+      style: style
+    });
+  }
+  return dataAttrsInTable;
 };
 var toDOM = function toDOM(node, props) {
   var colgroup = '';

package/dist/cjs/plugins/table/utils/guidelines.js

@@ -1,12 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultGuidelines = exports.defaultGuidelineWidths = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var defaultGuidelineWidths = [_editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorWideLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth];
+var numberOfLanesInDefaultLayoutWidth = 12;
+var calculateGuidelineWidthsInDefaultLayoutWidth = function calculateGuidelineWidthsInDefaultLayoutWidth() {
+  var widths = [];
+  for (var i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
+    widths.push(_editorSharedStyles.akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth * i * 2);
+  }
+  return widths;
+};
+var defaultGuidelineWidths = [].concat((0, _toConsumableArray2.default)(calculateGuidelineWidthsInDefaultLayoutWidth()), [_editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorWideLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth]);
 exports.defaultGuidelineWidths = defaultGuidelineWidths;
 var defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)(defaultGuidelineWidths);
 exports.defaultGuidelines = defaultGuidelines;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.6",
+	"version": "2.6.8",
 	"sideEffects": false
 }

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

@@ -19,15 +19,22 @@ const tableAttributes = (node, options, state, pos) => {
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   const shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  let style = shouldHaveInlineWidth ? `width: ${node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node)}px` : undefined;
-  return {
+  let style = `width: ${node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node)}px`;
+  const dataAttrsInTable = {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
-    style
+    'data-table-width': node.attrs.width
   };
+  if (shouldHaveInlineWidth) {
+    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
+    return {
+      ...dataAttrsInTable,
+      style
+    };
+  }
+  return dataAttrsInTable;
 };
 const toDOM = (node, props) => {
   let colgroup = '';

package/dist/es2019/plugins/table/utils/guidelines.js

@@ -1,4 +1,12 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-export const defaultGuidelineWidths = [akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth];
+const numberOfLanesInDefaultLayoutWidth = 12;
+const calculateGuidelineWidthsInDefaultLayoutWidth = () => {
+  let widths = [];
+  for (let i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
+    widths.push(akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth * i * 2);
+  }
+  return widths;
+};
+export const defaultGuidelineWidths = [...calculateGuidelineWidthsInDefaultLayoutWidth(), akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth];
 export const defaultGuidelines = createFixedGuidelinesFromLengths(defaultGuidelineWidths);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.6",
+	"version": "2.6.8",
 	"sideEffects": false
 }

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

@@ -6,10 +6,12 @@ import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 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; } }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -30,15 +32,21 @@ var tableAttributes = function tableAttributes(node, options, state, pos) {
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  var style = shouldHaveInlineWidth ? "width: ".concat(node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node), "px") : undefined;
-  return {
+  var style = "width: ".concat(node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node), "px");
+  var dataAttrsInTable = {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
-    style: style
+    'data-table-width': node.attrs.width
   };
+  if (shouldHaveInlineWidth) {
+    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
+    return _objectSpread(_objectSpread({}, dataAttrsInTable), {}, {
+      style: style
+    });
+  }
+  return dataAttrsInTable;
 };
 var toDOM = function toDOM(node, props) {
   var colgroup = '';

package/dist/esm/plugins/table/utils/guidelines.js

@@ -1,4 +1,13 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-export var defaultGuidelineWidths = [akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth];
+var numberOfLanesInDefaultLayoutWidth = 12;
+var calculateGuidelineWidthsInDefaultLayoutWidth = function calculateGuidelineWidthsInDefaultLayoutWidth() {
+  var widths = [];
+  for (var i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
+    widths.push(akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth * i * 2);
+  }
+  return widths;
+};
+export var defaultGuidelineWidths = [].concat(_toConsumableArray(calculateGuidelineWidthsInDefaultLayoutWidth()), [akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth]);
 export var defaultGuidelines = createFixedGuidelinesFromLengths(defaultGuidelineWidths);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.6",
+	"version": "2.6.8",
 	"sideEffects": false
 }

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { TableEventPayload } from '@atlaskit/editor-common/analytics';
-import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';

package/dist/types/plugins/table/utils/guidelines.d.ts

@@ -1,3 +1,3 @@
-import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelineWidths: number[];
 export declare const defaultGuidelines: GuidelineConfig[];

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { TableEventPayload } from '@atlaskit/editor-common/analytics';
-import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';

package/dist/types-ts4.5/plugins/table/utils/guidelines.d.ts

@@ -1,3 +1,3 @@
-import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelineWidths: number[];
 export declare const defaultGuidelines: GuidelineConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.4.0",
-    "@atlaskit/editor-common": "^74.32.0",
+    "@atlaskit/editor-common": "^74.34.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.7",
@@ -38,7 +38,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/plugins/table/nodeviews/TableContainer.tsx

@@ -8,10 +8,10 @@ import React, {
 import classNames from 'classnames';
 
 import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -15,12 +15,12 @@ import {
   TableEventPayload,
 } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import {
   HandleHeightSizeType,
   HandleResize,
   ResizerNext,
 } from '@atlaskit/editor-common/resizer';
-import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';

package/src/plugins/table/nodeviews/table.tsx

@@ -48,22 +48,29 @@ const tableAttributes = (
   const shouldHaveInlineWidth =
     options?.isTableResizingEnabled && !isTableNested(state, pos);
 
-  let style = shouldHaveInlineWidth
-    ? `width: ${
-        node.attrs.isNumberColumnEnabled
-          ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth
-          : getTableContainerWidth(node)
-      }px`
-    : undefined;
-
-  return {
+  let style = `width: ${
+    node.attrs.isNumberColumnEnabled
+      ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth
+      : getTableContainerWidth(node)
+  }px`;
+
+  const dataAttrsInTable = {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width,
-    style,
   };
+
+  if (shouldHaveInlineWidth) {
+    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
+    return {
+      ...dataAttrsInTable,
+      style,
+    };
+  }
+
+  return dataAttrsInTable;
 };
 
 const toDOM = (node: PmNode, props: Props) => {

package/src/plugins/table/utils/guidelines.ts

@@ -1,12 +1,25 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
-import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import {
   akEditorDefaultLayoutWidth,
   akEditorFullWidthLayoutWidth,
   akEditorWideLayoutWidth,
 } from '@atlaskit/editor-shared-styles';
 
+const numberOfLanesInDefaultLayoutWidth = 12;
+
+const calculateGuidelineWidthsInDefaultLayoutWidth = () => {
+  let widths: number[] = [];
+  for (let i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
+    widths.push(
+      (akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth) * i * 2,
+    );
+  }
+  return widths;
+};
+
 export const defaultGuidelineWidths = [
+  ...calculateGuidelineWidthsInDefaultLayoutWidth(),
   akEditorDefaultLayoutWidth,
   akEditorWideLayoutWidth,
   akEditorFullWidthLayoutWidth,