@atlaskit/renderer 108.4.2 → 108.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 108.4.3
+
+### Patch Changes
+
+- [`a390f5a61da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a390f5a61da) - [ux] The change here enables the datasource table to render based on the layout defined in ADF.
+
 ## 108.4.2
 
 ### Patch Changes

package/dist/cjs/react/nodes/blockCard.js

@@ -15,12 +15,15 @@ var _fallback = require("./fallback");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkDatasource = require("@atlaskit/link-datasource");
+var _utils2 = require("@atlaskit/editor-common/utils");
 /** @jsx jsx */
 
 //  Temporary, until we add aspect ratio to the datasource table
 var datasourceContainerStyle = (0, _react2.css)({
   height: '500px',
-  overflow: 'auto'
+  overflow: 'auto',
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
 });
 function BlockCard(props) {
   var url = props.url,
@@ -59,23 +62,31 @@ function BlockCard(props) {
         var key = _ref2.key;
         return key;
       });
+      var datasource = props.datasource,
+        layout = props.layout;
       return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: analyticsData
-      }, (0, _react2.jsx)("div", {
-        css: datasourceContainerStyle
       }, (0, _react2.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
         unsupportedComponent: _ui.UnsupportedBlock
-      }, cardProps), (0, _react2.jsx)(_linkDatasource.DatasourceTableView, {
-        datasourceId: props.datasource.id,
-        parameters: props.datasource.parameters,
-        visibleColumnKeys: visibleColumnKeys,
-        onVisibleColumnKeysChange: undefined
-      }))));
+      }, cardProps), (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {
+        var width = _ref3.width;
+        return (0, _react2.jsx)("div", {
+          css: datasourceContainerStyle,
+          style: {
+            width: (0, _utils2.calcBreakoutWidth)(layout, width)
+          }
+        }, (0, _react2.jsx)(_linkDatasource.DatasourceTableView, {
+          datasourceId: datasource.id,
+          parameters: datasource.parameters,
+          visibleColumnKeys: visibleColumnKeys,
+          onVisibleColumnKeysChange: undefined
+        }));
+      })));
     }
     return null;
   }
-  var onError = function onError(_ref3) {
-    var err = _ref3.err;
+  var onError = function onError(_ref4) {
+    var err = _ref4.err;
     if (err) {
       throw err;
     }

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.4.2";
+var packageVersion = "108.4.3";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.4.2",
+	"version": "108.4.3",
 	"sideEffects": false
 }

package/dist/es2019/react/nodes/blockCard.js

@@ -3,16 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
-import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { UnsupportedBlock, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+
 //  Temporary, until we add aspect ratio to the datasource table
 const datasourceContainerStyle = css({
   height: '500px',
-  overflow: 'auto'
+  overflow: 'auto',
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
 });
 export default function BlockCard(props) {
   const {
@@ -49,18 +53,27 @@ export default function BlockCard(props) {
       const visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(({
         key
       }) => key);
+      const {
+        datasource,
+        layout
+      } = props;
       return jsx(AnalyticsContext, {
         data: analyticsData
-      }, jsx("div", {
-        css: datasourceContainerStyle
       }, jsx(CardErrorBoundary, _extends({
         unsupportedComponent: UnsupportedBlock
-      }, cardProps), jsx(DatasourceTableView, {
-        datasourceId: props.datasource.id,
-        parameters: props.datasource.parameters,
+      }, cardProps), jsx(WidthConsumer, null, ({
+        width
+      }) => jsx("div", {
+        css: datasourceContainerStyle,
+        style: {
+          width: calcBreakoutWidth(layout, width)
+        }
+      }, jsx(DatasourceTableView, {
+        datasourceId: datasource.id,
+        parameters: datasource.parameters,
         visibleColumnKeys: visibleColumnKeys,
         onVisibleColumnKeysChange: undefined
-      }))));
+      })))));
     }
     return null;
   }

package/dist/es2019/ui/Renderer/index.js

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.4.2";
+const packageVersion = "108.4.3";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.4.2",
+	"version": "108.4.3",
 	"sideEffects": false
 }

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

@@ -3,16 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
-import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { UnsupportedBlock, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+
 //  Temporary, until we add aspect ratio to the datasource table
 var datasourceContainerStyle = css({
   height: '500px',
-  overflow: 'auto'
+  overflow: 'auto',
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
 });
 export default function BlockCard(props) {
   var url = props.url,
@@ -51,23 +55,31 @@ export default function BlockCard(props) {
         var key = _ref2.key;
         return key;
       });
+      var datasource = props.datasource,
+        layout = props.layout;
       return jsx(AnalyticsContext, {
         data: analyticsData
-      }, jsx("div", {
-        css: datasourceContainerStyle
       }, jsx(CardErrorBoundary, _extends({
         unsupportedComponent: UnsupportedBlock
-      }, cardProps), jsx(DatasourceTableView, {
-        datasourceId: props.datasource.id,
-        parameters: props.datasource.parameters,
-        visibleColumnKeys: visibleColumnKeys,
-        onVisibleColumnKeysChange: undefined
-      }))));
+      }, cardProps), jsx(WidthConsumer, null, function (_ref3) {
+        var width = _ref3.width;
+        return jsx("div", {
+          css: datasourceContainerStyle,
+          style: {
+            width: calcBreakoutWidth(layout, width)
+          }
+        }, jsx(DatasourceTableView, {
+          datasourceId: datasource.id,
+          parameters: datasource.parameters,
+          visibleColumnKeys: visibleColumnKeys,
+          onVisibleColumnKeysChange: undefined
+        }));
+      })));
     }
     return null;
   }
-  var onError = function onError(_ref3) {
-    var err = _ref3.err;
+  var onError = function onError(_ref4) {
+    var err = _ref4.err;
     if (err) {
       throw err;
     }

package/dist/esm/ui/Renderer/index.js

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.4.2";
+var packageVersion = "108.4.3";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.4.2",
+	"version": "108.4.3",
 	"sideEffects": false
 }

package/dist/types/react/nodes/blockCard.d.ts

@@ -11,4 +11,5 @@ export default function BlockCard(props: {
     portal?: HTMLElement;
     rendererAppearance?: RendererAppearance;
     smartLinks?: SmartLinksOptions;
+    layout?: string;
 }): jsx.JSX.Element | null;

package/dist/types/react/nodes/index.d.ts

@@ -53,6 +53,7 @@ declare const BlockCard: React.ComponentType<{
     portal?: HTMLElement | undefined;
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;
+    layout?: string | undefined;
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;

package/dist/types-ts4.5/react/nodes/blockCard.d.ts

@@ -11,4 +11,5 @@ export default function BlockCard(props: {
     portal?: HTMLElement;
     rendererAppearance?: RendererAppearance;
     smartLinks?: SmartLinksOptions;
+    layout?: string;
 }): jsx.JSX.Element | null;

package/dist/types-ts4.5/react/nodes/index.d.ts

@@ -53,6 +53,7 @@ declare const BlockCard: React.ComponentType<{
     portal?: HTMLElement | undefined;
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;
+    layout?: string | undefined;
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.4.2",
+  "version": "108.4.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"