@atlaskit/renderer 105.1.1 → 106.0.0

package/dist/esm/react/nodes/table.js

@@ -6,11 +6,8 @@ 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";
-
 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; } }
-
 import React from 'react';
 import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
@@ -22,23 +19,19 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
   }
-
   var order = tableOrderStatus.order,
-      columnIndex = tableOrderStatus.columnIndex;
+    columnIndex = tableOrderStatus.columnIndex;
   var compareNodesInOrder = createCompareNodes({
     getInlineCardTextFromStore: function getInlineCardTextFromStore(attrs) {
       var _ref = attrs,
-          url = _ref.url;
-
+        url = _ref.url;
       if (!url) {
         return null;
       }
-
       return smartCardStorage.get(url) || null;
     }
   }, order);
@@ -53,16 +46,13 @@ var orderChildren = function orderChildren(children, tableNode, smartCardStorage
   var sortedTable = tableArrayWithChildren.sort(function (rowA, rowB) {
     return compareNodesInOrder(rowA.rowNodes[columnIndex], rowB.rowNodes[columnIndex]);
   });
-
   if (headerRow) {
     sortedTable.unshift(headerRow);
   }
-
   return sortedTable.map(function (elem) {
     return elem.rowReact;
   });
 };
-
 var hasRowspan = function hasRowspan(row) {
   var hasRowspan = false;
   row.forEach(function (cell) {
@@ -70,19 +60,15 @@ var hasRowspan = function hasRowspan(row) {
   });
   return hasRowspan;
 };
-
 var getRefTop = function getRefTop(refElement) {
   return Math.round(refElement.getBoundingClientRect().top);
 };
-
 var shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
   return tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
 };
-
 var shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
   return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
 };
-
 var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting) {
   return React.Children.map(rows, function (row, index) {
     if (index === 0) {
@@ -91,129 +77,96 @@ var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSor
         onSorting: onSorting
       });
     }
-
     return row;
   });
 };
-
 var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
   if (!rows.length) {
     return false;
   }
-
   var children = rows[0].props.children;
-
   if (!children.length) {
     return false;
   }
-
   if (children.length === 1) {
     return children[0].type === TableHeader;
   }
-
   return children.every(function (node) {
     return node.type === TableHeader;
   });
 };
-
 var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
-
 var canUseLinelength = function canUseLinelength(appearance) {
   return appearance === 'full-page' || appearance === 'mobile';
 };
-
 export var TableContainer = /*#__PURE__*/function (_React$Component) {
   _inherits(TableContainer, _React$Component);
-
   var _super = _createSuper(TableContainer);
-
   function TableContainer() {
     var _this;
-
     _classCallCheck(this, TableContainer);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       stickyMode: 'none'
     });
-
     _defineProperty(_assertThisInitialized(_this), "tableRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "stickyHeaderRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "stickyWrapperRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(_assertThisInitialized(_this), "overflowParent", null);
-
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
       if (_this.overflowParent) {
         _this.overflowParent.removeEventListener('scroll', _this.onScroll);
       }
-
       if (_this.nextFrame) {
         cancelAnimationFrame(_this.nextFrame);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "getScrollTop", function () {
       var stickyHeaders = _this.props.stickyHeaders;
       var offsetTop = stickyHeaders && stickyHeaders.offsetTop || 0;
       return (_this.overflowParent ? _this.overflowParent.top : 0) + offsetTop;
     });
-
     _defineProperty(_assertThisInitialized(_this), "updateSticky", function () {
       var tableElem = _this.tableRef.current;
       var refElem = _this.stickyHeaderRef.current;
-
       if (!tableElem || !refElem) {
         return;
       }
-
       var scrollTop = _this.getScrollTop() + tableStickyPadding;
       var tableTop = getRefTop(tableElem);
       var tableBottom = tableTop + tableElem.clientHeight;
       var shouldSticky = shouldHeaderStick(scrollTop, tableTop, tableBottom, refElem.clientHeight);
       var shouldPin = shouldHeaderPinBottom(scrollTop, tableBottom, refElem.clientHeight);
       var stickyMode = 'none';
-
       if (shouldPin) {
         stickyMode = 'pin-bottom';
       } else if (shouldSticky) {
         stickyMode = 'stick';
       }
-
       if (_this.state.stickyMode !== stickyMode) {
         _this.setState({
           stickyMode: stickyMode
         });
       }
-
       _this.nextFrame = undefined;
     });
-
     _defineProperty(_assertThisInitialized(_this), "onScroll", function () {
       if (!_this.nextFrame) {
         _this.nextFrame = requestAnimationFrame(_this.updateSticky);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onWrapperScrolled", function () {
       if (!_this.wrapperRef.current || !_this.stickyWrapperRef.current) {
         return;
       }
-
       _this.stickyWrapperRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
     });
-
     _defineProperty(_assertThisInitialized(_this), "grabFirstRowRef", function (children) {
       return React.Children.map(children, function (child, idx) {
         if (idx === 0 && /*#__PURE__*/React.isValidElement(child)) {
@@ -221,14 +174,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
             innerRef: _this.stickyHeaderRef
           });
         }
-
         return child;
       });
     });
-
     return _this;
   }
-
   _createClass(TableContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -246,14 +196,14 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       } else if (!this.props.stickyHeaders && this.overflowParent) {
         this.overflowParent.removeEventListener('scroll', this.onScroll);
         this.overflowParent = null;
-      } // offsetTop might have changed, re-position sticky header
-
+      }
 
+      // offsetTop might have changed, re-position sticky header
       if (this.props.stickyHeaders !== prevProps.stickyHeaders) {
         this.updateSticky();
-      } // sync horizontal scroll in floating div when toggling modes
-
+      }
 
+      // sync horizontal scroll in floating div when toggling modes
       if (prevState.stickyMode !== this.state.stickyMode) {
         this.onWrapperScrolled();
       }
@@ -264,7 +214,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (!this.tableRef.current || !this.stickyHeaderRef.current) {
         return;
       }
-
       return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + tableMarginTop - tableStickyPadding;
     }
   }, {
@@ -273,10 +222,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       switch (this.state.stickyMode) {
         case 'pin-bottom':
           return this.pinTop;
-
         case 'stick':
           return this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
-
         default:
           return undefined;
       }
@@ -290,22 +237,20 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
-          layout = _this$props.layout,
-          renderWidth = _this$props.renderWidth,
-          columnWidths = _this$props.columnWidths,
-          stickyHeaders = _this$props.stickyHeaders,
-          tableNode = _this$props.tableNode;
+        isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
+        layout = _this$props.layout,
+        renderWidth = _this$props.renderWidth,
+        columnWidths = _this$props.columnWidths,
+        stickyHeaders = _this$props.stickyHeaders,
+        tableNode = _this$props.tableNode;
       var stickyMode = this.state.stickyMode;
       var tableWidth = calcTableWidth(layout, renderWidth, false);
       var lineLength = akEditorDefaultLayoutWidth;
       var left;
-
       if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
         var tableWidthPx = Number(tableWidth.substring(0, tableWidth.length - 2));
         left = lineLength / 2 - tableWidthPx / 2;
       }
-
       var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
       var children = React.Children.toArray(this.props.children);
       return /*#__PURE__*/React.createElement(React.Fragment, null, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
@@ -343,43 +288,32 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       }, this.grabFirstRowRef(children)))));
     }
   }]);
-
   return TableContainer;
 }(React.Component);
 export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
   _inherits(TableProcessor, _React$Component2);
-
   var _super2 = _createSuper(TableProcessor);
-
   function TableProcessor() {
     var _this2;
-
     _classCallCheck(this, TableProcessor);
-
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     _this2 = _super2.call.apply(_super2, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this2), "state", {
       tableOrderStatus: undefined
     });
-
     _defineProperty(_assertThisInitialized(_this2), "addSortableColumn", function (childrenArray) {
       var _this2$props = _this2.props,
-          tableNode = _this2$props.tableNode,
-          allowColumnSorting = _this2$props.allowColumnSorting,
-          smartCardStorage = _this2$props.smartCardStorage;
+        tableNode = _this2$props.tableNode,
+        allowColumnSorting = _this2$props.allowColumnSorting,
+        smartCardStorage = _this2$props.smartCardStorage;
       var tableOrderStatus = _this2.state.tableOrderStatus;
-
       if (allowColumnSorting && isHeaderRowEnabled(childrenArray) && tableNode && !hasMergedCell(tableNode)) {
         return addSortableColumn(orderChildren(childrenArray, tableNode, smartCardStorage, tableOrderStatus), tableOrderStatus, _this2.changeSortOrder);
       }
-
       return childrenArray;
     });
-
     _defineProperty(_assertThisInitialized(_this2), "changeSortOrder", function (columnIndex, sortOrder) {
       _this2.setState({
         tableOrderStatus: {
@@ -388,7 +322,6 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
         }
       });
     });
-
     _defineProperty(_assertThisInitialized(_this2), "addNumberColumnIndexes", function (rows) {
       var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
       var headerRowEnabled = isHeaderRowEnabled(rows);
@@ -399,54 +332,45 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
         });
       });
     });
-
     return _this2;
   }
-
   _createClass(TableProcessor, [{
     key: "render",
     value: function render() {
       var children = this.props.children;
-
       if (!children) {
         return null;
       }
-
       var childrenArray = React.Children.toArray(children);
       var orderedChildren = compose(this.addNumberColumnIndexes, this.addSortableColumn)(childrenArray);
       return /*#__PURE__*/React.createElement(TableContainer, this.props, orderedChildren);
-    } // adds sortable + re-orders children
+    }
 
+    // adds sortable + re-orders children
   }]);
-
   return TableProcessor;
 }(React.Component);
 var TableWithShadows = overflowShadow(TableProcessor, {
   overflowSelector: ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
   useShadowObserver: true
 });
-
 var TableWithWidth = function TableWithWidth(props) {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
     var _props$columnWidths;
-
     var width = _ref2.width;
     var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;
     }, 0)) || 0;
-
     if (colWidthsSum) {
       return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
         renderWidth: renderWidth
       }, props));
-    } // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-
-
+    }
+    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
     return /*#__PURE__*/React.createElement(TableProcessor, _extends({
       renderWidth: renderWidth
     }, props));
   });
 };
-
 export default withSmartCardStorage(TableWithWidth);

package/dist/esm/react/nodes/tableCell.js

@@ -6,11 +6,8 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
 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; } }
-
 import React from 'react';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import { compose } from '@atlaskit/editor-common/utils';
@@ -22,98 +19,77 @@ import { RendererCssClassName } from '../../consts';
 import { injectIntl } from 'react-intl-next';
 import { tableCellMessages } from '../../messages';
 var IgnoreSorting = ['LABEL', 'INPUT'];
-
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case SortOrder.NO_ORDER:
       return SortOrder.ASC;
-
     case SortOrder.ASC:
       return SortOrder.DESC;
-
     case SortOrder.DESC:
       return SortOrder.NO_ORDER;
   }
-
   return SortOrder.NO_ORDER;
 };
-
 var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
   var noneSortingLabel = tableCellMessages.noneSortingLabel,
-      ascSortingLabel = tableCellMessages.ascSortingLabel,
-      descSortingLabel = tableCellMessages.descSortingLabel;
-
+    ascSortingLabel = tableCellMessages.ascSortingLabel,
+    descSortingLabel = tableCellMessages.descSortingLabel;
   switch (currentSortOrder) {
     case SortOrder.NO_ORDER:
       return intl.formatMessage(noneSortingLabel);
-
     case SortOrder.ASC:
       return intl.formatMessage(ascSortingLabel);
-
     case SortOrder.DESC:
       return intl.formatMessage(descSortingLabel);
-
     default:
       return intl.formatMessage(noneSortingLabel);
   }
 };
-
 var getDataAttributes = function getDataAttributes(colwidth) {
   var attrs = {};
-
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
   }
-
   return attrs;
 };
-
 var getStyle = function getStyle(background, colGroupWidth, offsetTop) {
   var style = {};
-
-  if (background && // ignore setting inline styles if ds neutral token is detected
+  if (background &&
+  // ignore setting inline styles if ds neutral token is detected
   !background.includes('--ds-background-neutral')) {
     style.backgroundColor = background;
   }
-
   if (colGroupWidth) {
     style.width = colGroupWidth;
     style.minWidth = colGroupWidth;
   }
-
   if (offsetTop !== undefined) {
     style.top = offsetTop;
   }
-
   return style;
 };
-
 var withCellProps = function withCellProps(WrapperComponent) {
   return /*#__PURE__*/function (_React$Component) {
     _inherits(WithCellProps, _React$Component);
-
     var _super = _createSuper(WithCellProps);
-
     function WithCellProps() {
       _classCallCheck(this, WithCellProps);
-
       return _super.apply(this, arguments);
     }
-
     _createClass(WithCellProps, [{
       key: "render",
       value: function render() {
         var _this$props = this.props,
-            children = _this$props.children,
-            className = _this$props.className,
-            onClick = _this$props.onClick,
-            colwidth = _this$props.colwidth,
-            colGroupWidth = _this$props.colGroupWidth,
-            rowspan = _this$props.rowspan,
-            colspan = _this$props.colspan,
-            background = _this$props.background,
-            offsetTop = _this$props.offsetTop,
-            ariaSort = _this$props.ariaSort;
+          children = _this$props.children,
+          className = _this$props.className,
+          onClick = _this$props.onClick,
+          colwidth = _this$props.colwidth,
+          colGroupWidth = _this$props.colGroupWidth,
+          rowspan = _this$props.rowspan,
+          colspan = _this$props.colspan,
+          background = _this$props.background,
+          offsetTop = _this$props.offsetTop,
+          ariaSort = _this$props.ariaSort;
         var colorName = background ? tableBackgroundColorPalette.get(background) : '';
         return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
           rowSpan: rowspan,
@@ -127,43 +103,33 @@ var withCellProps = function withCellProps(WrapperComponent) {
         }), children);
       }
     }]);
-
     return WithCellProps;
   }(React.Component);
 };
-
 export var withSortableColumn = function withSortableColumn(WrapperComponent) {
   var WithSortableColumn = /*#__PURE__*/function (_React$Component2) {
     _inherits(WithSortableColumn, _React$Component2);
-
     var _super2 = _createSuper(WithSortableColumn);
-
     function WithSortableColumn(props) {
       var _this;
-
       _classCallCheck(this, WithSortableColumn);
-
       _this = _super2.call(this, props);
-
       _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
         var keys = [' ', 'Enter', 'Spacebar'];
         var _ref = event.target,
-            tagName = _ref.tagName; // trigger sorting if space or enter are clicked but not when in an input field (template variables)
-
+          tagName = _ref.tagName;
+        // trigger sorting if space or enter are clicked but not when in an input field (template variables)
         if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
           event.preventDefault();
-
           _this.sort();
         }
       });
-
       _defineProperty(_assertThisInitialized(_this), "sort", function () {
         var _this$props2 = _this.props,
-            fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
-            onSorting = _this$props2.onSorting,
-            columnIndex = _this$props2.columnIndex,
-            sortOrdered = _this$props2.sortOrdered;
-
+          fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
+          onSorting = _this$props2.onSorting,
+          columnIndex = _this$props2.columnIndex,
+          sortOrdered = _this$props2.sortOrdered;
         if (onSorting && columnIndex != null) {
           var sortOrder = nextStatusOrder(sortOrdered);
           onSorting(columnIndex, sortOrder);
@@ -190,26 +156,22 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
           });
         }
       });
-
       return _this;
     }
-
     _createClass(WithSortableColumn, [{
       key: "render",
       value: function render() {
         var _this$props3 = this.props,
-            allowColumnSorting = _this$props3.allowColumnSorting,
-            onSorting = _this$props3.onSorting,
-            children = _this$props3.children,
-            sortOrdered = _this$props3.sortOrdered,
-            isHeaderRow = _this$props3.isHeaderRow,
-            intl = _this$props3.intl;
+          allowColumnSorting = _this$props3.allowColumnSorting,
+          onSorting = _this$props3.onSorting,
+          children = _this$props3.children,
+          sortOrdered = _this$props3.sortOrdered,
+          isHeaderRow = _this$props3.isHeaderRow,
+          intl = _this$props3.intl;
         var sortOrderedClassName = sortOrdered === SortOrder.NO_ORDER ? RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
-
         if (!allowColumnSorting || !isHeaderRow) {
           return /*#__PURE__*/React.createElement(WrapperComponent, this.props);
         }
-
         return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, this.props, {
           className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
           ariaSort: getSortOrderLabel(intl, sortOrdered)
@@ -225,10 +187,8 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
         }))));
       }
     }]);
-
     return WithSortableColumn;
   }(React.Component);
-
   return injectIntl(WithSortableColumn);
 };
 export var TableHeader = compose(withSortableColumn, withCellProps)('th');