@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -5,15 +5,10 @@ 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; } }
-
 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, { createRef } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
@@ -25,7 +20,6 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
 import { findDomRefAtPos } from 'prosemirror-utils';
-
 var addPopupOffset = function addPopupOffset(pos) {
   return _objectSpread(_objectSpread({}, pos), {}, {
     // add 12 pixels to align y position with
@@ -33,76 +27,61 @@ var addPopupOffset = function addPopupOffset(pos) {
     top: pos.top ? pos.top + 12 : undefined
   });
 };
-
 var getMessage = function getMessage(layout) {
   switch (layout) {
     case 'default':
       return commonMessages.layoutWide;
-
     case 'wide':
       return commonMessages.layoutFullWidth;
-
     default:
       return commonMessages.layoutFixedWidth;
   }
 };
-
 var LayoutButton = /*#__PURE__*/function (_React$Component) {
   _inherits(LayoutButton, _React$Component);
-
   var _super = _createSuper(LayoutButton);
-
   function LayoutButton() {
     var _this;
-
     _classCallCheck(this, LayoutButton);
-
     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), "stickyButtonRef", /*#__PURE__*/createRef());
-
     _defineProperty(_assertThisInitialized(_this), "resizeObserver", new ResizeObserver(function (entries) {
       entries.forEach(function (entry) {
         var resizeButton = _this.stickyButtonRef.current;
         var tableWrapper = _this.props.targetRef;
-
         if (resizeButton && tableWrapper) {
           var clientRect = tableWrapper.getBoundingClientRect();
           resizeButton.style.left = "".concat(clientRect.right, "px");
         }
       });
     }));
-
     _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
       var _this$props$editorVie = _this.props.editorView,
-          state = _this$props$editorVie.state,
-          dispatch = _this$props$editorVie.dispatch;
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
       toggleTableLayoutWithAnalytics(_this.props.editorAnalyticsAPI)(state, dispatch);
     });
-
     return _this;
   }
-
   _createClass(LayoutButton, [{
     key: "getTitle",
     value: function getTitle() {
       var _this$props = this.props,
-          formatMessage = _this$props.intl.formatMessage,
-          _this$props$layout = _this$props.layout,
-          layout = _this$props$layout === void 0 ? 'default' : _this$props$layout;
+        formatMessage = _this$props.intl.formatMessage,
+        _this$props$layout = _this$props.layout,
+        layout = _this$props$layout === void 0 ? 'default' : _this$props$layout;
       return formatMessage(getMessage(layout));
     }
   }, {
     key: "toolbarButton",
     value: function toolbarButton() {
       var _this$props2 = this.props,
-          isResizing = _this$props2.isResizing,
-          _this$props2$layout = _this$props2.layout,
-          layout = _this$props2$layout === void 0 ? 'default' : _this$props2$layout;
+        isResizing = _this$props2.isResizing,
+        _this$props2$layout = _this$props2.layout,
+        layout = _this$props2$layout === void 0 ? 'default' : _this$props2$layout;
       var title = this.getTitle();
       return /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.LAYOUT_BUTTON, _defineProperty({}, ClassName.IS_RESIZING, isResizing))
@@ -128,11 +107,9 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
     key: "renderSticky",
     value: function renderSticky(button, targetRef, tableRef) {
       var title = this.getTitle();
-
       if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
         return null;
       }
-
       var pos = targetRef.getBoundingClientRect();
       var tablePos = tableRef.getBoundingClientRect();
       return /*#__PURE__*/React.createElement("div", {
@@ -149,15 +126,13 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
     key: "renderPopup",
     value: function renderPopup(button) {
       var _this$props3 = this.props,
-          mountPoint = _this$props3.mountPoint,
-          boundariesElement = _this$props3.boundariesElement,
-          scrollableElement = _this$props3.scrollableElement,
-          targetRef = _this$props3.targetRef;
-
+        mountPoint = _this$props3.mountPoint,
+        boundariesElement = _this$props3.boundariesElement,
+        scrollableElement = _this$props3.scrollableElement,
+        targetRef = _this$props3.targetRef;
       if (!targetRef) {
         return null;
       }
-
       var title = this.getTitle();
       return /*#__PURE__*/React.createElement(Popup, {
         ariaLabel: title,
@@ -178,7 +153,6 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
       var stickyHeader = this.props.stickyHeader;
       var button = this.toolbarButton();
       var stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
-
       if (stickyTargetRef && this.props.targetRef) {
         return this.renderSticky(button, stickyTargetRef, this.props.targetRef);
       } else {
@@ -190,7 +164,6 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       var dom = this.props.editorView.dom;
       var scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
-
       if (scrollPanel instanceof HTMLElement) {
         this.resizeObserver.observe(scrollPanel);
       }
@@ -200,7 +173,6 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       var dom = this.props.editorView.dom;
       var scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
-
       if (scrollPanel instanceof HTMLElement) {
         this.resizeObserver.unobserve(scrollPanel);
       }
@@ -209,17 +181,14 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
       var _this$props4 = this.props,
-          targetRef = _this$props4.targetRef,
-          layout = _this$props4.layout,
-          isResizing = _this$props4.isResizing,
-          stickyHeader = _this$props4.stickyHeader;
+        targetRef = _this$props4.targetRef,
+        layout = _this$props4.layout,
+        isResizing = _this$props4.isResizing,
+        stickyHeader = _this$props4.stickyHeader;
       return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing;
     }
   }]);
-
   return LayoutButton;
 }(React.Component);
-
 _defineProperty(LayoutButton, "displayName", 'LayoutButton');
-
 export default injectIntl(LayoutButton);

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

@@ -5,11 +5,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, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import classnames from 'classnames';
@@ -24,76 +21,60 @@ var messages = defineMessages({
     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 CornerControlComponent = /*#__PURE__*/function (_Component) {
   _inherits(CornerControlComponent, _Component);
-
   var _super = _createSuper(CornerControlComponent);
-
   function CornerControlComponent() {
     var _this;
-
     _classCallCheck(this, CornerControlComponent);
-
     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), "isActive", function () {
       var _this$props = _this.props,
-          editorView = _this$props.editorView,
-          hoveredRows = _this$props.hoveredRows,
-          isResizing = _this$props.isResizing;
+        editorView = _this$props.editorView,
+        hoveredRows = _this$props.hoveredRows,
+        isResizing = _this$props.isResizing;
       var selection = editorView.state.selection;
       var table = findTable(selection);
-
       if (!table) {
         return false;
       }
-
       return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
     });
-
     _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
       var _this$props$editorVie = _this.props.editorView,
-          state = _this$props$editorVie.state,
-          dispatch = _this$props$editorVie.dispatch;
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
       clearHoverSelection()(state, dispatch);
     });
-
     _defineProperty(_assertThisInitialized(_this), "selectTable", function () {
       var _this$props$editorVie2 = _this.props.editorView,
-          state = _this$props$editorVie2.state,
-          dispatch = _this$props$editorVie2.dispatch;
+        state = _this$props$editorVie2.state,
+        dispatch = _this$props$editorVie2.dispatch;
       dispatch(selectTable(state.tr).setMeta('addToHistory', false));
     });
-
     _defineProperty(_assertThisInitialized(_this), "hoverTable", function () {
       var _this$props$editorVie3 = _this.props.editorView,
-          state = _this$props$editorVie3.state,
-          dispatch = _this$props$editorVie3.dispatch;
+        state = _this$props$editorVie3.state,
+        dispatch = _this$props$editorVie3.dispatch;
       hoverTable()(state, dispatch);
     });
-
     return _this;
   }
-
   _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,
-          formatMessage = _this$props2.intl.formatMessage;
-
+        isInDanger = _this$props2.isInDanger,
+        tableRef = _this$props2.tableRef,
+        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
+        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+        formatMessage = _this$props2.intl.formatMessage;
       if (!tableRef) {
         return null;
       }
-
       var isActive = this.isActive();
       return /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.CORNER_CONTROLS, {
@@ -124,8 +105,6 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-
   return CornerControlComponent;
 }(Component);
-
 export var CornerControls = injectIntl(CornerControlComponent);

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

@@ -5,94 +5,78 @@ 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, { Component } from 'react';
 import { Selection } from 'prosemirror-state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
-
 var NumberColumn = /*#__PURE__*/function (_Component) {
   _inherits(NumberColumn, _Component);
-
   var _super = _createSuper(NumberColumn);
-
   function NumberColumn() {
     var _this;
-
     _classCallCheck(this, NumberColumn);
-
     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), "hoverRows", function (index) {
       return _this.props.tableActive ? _this.props.hoverRows([index]) : null;
     });
-
     _defineProperty(_assertThisInitialized(_this), "selectRow", function (index, event) {
       var _this$props = _this.props,
-          tableActive = _this$props.tableActive,
-          editorView = _this$props.editorView,
-          selectRow = _this$props.selectRow; // If selection is outside the table then first reset the selection inside table
-
+        tableActive = _this$props.tableActive,
+        editorView = _this$props.editorView,
+        selectRow = _this$props.selectRow;
+      // If selection is outside the table then first reset the selection inside table
       if (!tableActive && event.target && event.target instanceof Node) {
         var _editorView$state = editorView.state,
-            doc = _editorView$state.doc,
-            selection = _editorView$state.selection,
-            tr = _editorView$state.tr;
+          doc = _editorView$state.doc,
+          selection = _editorView$state.selection,
+          tr = _editorView$state.tr;
         var pos = editorView.posAtDOM(event.target, 1);
         var $pos = doc.resolve(pos);
-        var newPos = selection.head > pos ? // Selection is after table
+        var newPos = selection.head > pos ?
+        // Selection is after table
         // nodeSize - 3 will move the position inside last table cell
-        Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) : // Selection is before table
+        Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) :
+        // Selection is before table
         Selection.near($pos);
         editorView.dispatch(tr.setSelection(newPos));
       }
-
       selectRow(index, event.shiftKey);
     });
-
     _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
       var _this$props2 = _this.props,
-          tableActive = _this$props2.tableActive,
-          editorView = _this$props2.editorView;
-
+        tableActive = _this$props2.tableActive,
+        editorView = _this$props2.editorView;
       if (tableActive) {
         var state = editorView.state,
-            dispatch = editorView.dispatch;
+          dispatch = editorView.dispatch;
         clearHoverSelection()(state, dispatch);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "getClassNames", function (index) {
       var _this$props3 = _this.props,
-          hoveredRows = _this$props3.hoveredRows,
-          editorView = _this$props3.editorView,
-          isInDanger = _this$props3.isInDanger,
-          isResizing = _this$props3.isResizing;
+        hoveredRows = _this$props3.hoveredRows,
+        editorView = _this$props3.editorView,
+        isInDanger = _this$props3.isInDanger,
+        isResizing = _this$props3.isResizing;
       var isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
       return [ClassName.NUMBERED_COLUMN_BUTTON, isActive ? ClassName.HOVERED_CELL_ACTIVE : '', isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : ''].join(' ');
     });
-
     return _this;
   }
-
   _createClass(NumberColumn, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props4 = this.props,
-          tableRef = _this$props4.tableRef,
-          hasHeaderRow = _this$props4.hasHeaderRow;
+        tableRef = _this$props4.tableRef,
+        hasHeaderRow = _this$props4.hasHeaderRow;
       var rowHeights = getRowHeights(tableRef);
       return /*#__PURE__*/React.createElement("div", {
         className: ClassName.NUMBERED_COLUMN,
@@ -120,8 +104,6 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-
   return NumberColumn;
 }(Component);
-
 export { NumberColumn as default };

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

@@ -5,11 +5,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, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { clearHoverSelection } from '../../../commands';
@@ -23,50 +20,38 @@ var messages = defineMessages({
     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 RowControlsComponent = /*#__PURE__*/function (_Component) {
   _inherits(RowControlsComponent, _Component);
-
   var _super = _createSuper(RowControlsComponent);
-
   function RowControlsComponent() {
     var _this;
-
     _classCallCheck(this, RowControlsComponent);
-
     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), "clearHoverSelection", function () {
       var _this$props$editorVie = _this.props.editorView,
-          state = _this$props$editorVie.state,
-          dispatch = _this$props$editorVie.dispatch;
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
       clearHoverSelection()(state, dispatch);
     });
-
     return _this;
   }
-
   _createClass(RowControlsComponent, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          editorView = _this$props.editorView,
-          tableRef = _this$props.tableRef,
-          hoveredRows = _this$props.hoveredRows,
-          isInDanger = _this$props.isInDanger,
-          isResizing = _this$props.isResizing,
-          formatMessage = _this$props.intl.formatMessage;
-
+        editorView = _this$props.editorView,
+        tableRef = _this$props.tableRef,
+        hoveredRows = _this$props.hoveredRows,
+        isInDanger = _this$props.isInDanger,
+        isResizing = _this$props.isResizing,
+        formatMessage = _this$props.intl.formatMessage;
       if (!tableRef) {
         return null;
       }
-
       var selection = editorView.state.selection;
       var rowHeights = getRowHeights(tableRef);
       var rowsParams = getRowsParams(rowHeights);
@@ -78,15 +63,13 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
         className: ClassName.ROW_CONTROLS_INNER
       }, rowsParams.map(function (_ref, index) {
         var startIndex = _ref.startIndex,
-            endIndex = _ref.endIndex,
-            height = _ref.height;
+          endIndex = _ref.endIndex,
+          height = _ref.height;
         // if previous row was header row, add its height to our margin
         var marginTop = -1;
-
         if (index === 1 && hasHeaderRow && _this2.props.stickyTop !== undefined) {
           marginTop += rowHeights[index - 1] + tableToolbarSize;
         }
-
         var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
         return /*#__PURE__*/React.createElement("div", {
           className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
@@ -116,8 +99,6 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-
   return RowControlsComponent;
 }(Component);
-
 export var RowControls = injectIntl(RowControlsComponent);