@atlaskit/dynamic-table 14.3.2 → 14.4.0

package/dist/es2019/styled/constants.js

@@ -1,117 +1,32 @@
-import { css } from 'styled-components';
-import { N30A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { ASC, DESC } from '../internal/constants';
-import { arrow, MSThemeColors } from '../theme';
-export const truncateStyle = ({
-  width,
-  isFixedSize,
-  shouldTruncate
-}) => css`
-  ${width ? css`
-        width: ${width}%;
-      ` : ''} ${isFixedSize ? css`
-        overflow: hidden;
-      ` : ''};
-  ${isFixedSize && shouldTruncate ? css`
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      ` : ''};
-`;
-export const onClickStyle = ({
-  onClick
-}) => onClick && css`
-    &:hover {
-      cursor: pointer;
-      background-color: ${N30A};
-    }
-  `;
-export const arrowsStyle = props => {
-  const {
-    isSortable,
-    sortOrder
-  } = props;
-
-  if (!isSortable) {
-    return '';
-  }
-
-  const pseudoBase = css`
-    border: 3px solid transparent;
-    display: block;
-    height: 0;
-    position: absolute;
-    right: -${gridSize}px;
-    width: 0;
-
-    @media (forced-colors: active) {
-      border: 3px solid ${MSThemeColors.Background};
-    }
-  `;
-  return css`
-    & > span {
-      position: relative;
-      &::before {
-        ${pseudoBase};
-        border-bottom: 3px solid
-          ${sortOrder === ASC ? arrow.selectedColor(props) : arrow.defaultColor(props)};
-        bottom: 8px;
-        content: ' ';
-      }
-      &::after {
-        ${pseudoBase};
-        border-top: 3px solid
-          ${sortOrder === DESC ? arrow.selectedColor(props) : arrow.defaultColor(props)};
-        bottom: 0;
-        content: ' ';
-      }
-    }
-
-    &:hover > span {
-      &::before {
-        border-bottom: 3px solid
-          ${sortOrder === ASC ? arrow.selectedColor(props) : arrow.hoverColor(props)};
-      }
-      &::after {
-        border-top: 3px solid
-          ${sortOrder === DESC ? arrow.selectedColor(props) : arrow.hoverColor(props)};
-      }
-    }
-
-    @media (forced-colors: active) {
-      & > span {
-        &::before {
-          border-bottom: 3px solid
-            ${sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text};
-        }
-        &::after {
-          border-top: 3px solid
-            ${sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text};
-        }
-      }
-
-      &:hover > span {
-        &::before {
-          border-bottom: 3px solid
-            ${sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text};
-        }
-        &::after {
-          border-top: 3px solid
-            ${sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text};
-        }
-      }
-    }
-  `;
+import { css } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+const CSS_VAR_WIDTH = '--local-dynamic-table-width';
+const gridSize = getGridSize();
+export const truncationWidthStyles = css({
+  width: `var(${CSS_VAR_WIDTH})`
+});
+export const fixedSizeTruncateStyles = css({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export const overflowTruncateStyles = css({
+  overflow: 'hidden'
+});
+export const getTruncationStyleVars = ({
+  width
+}) => {
+  return {
+    [CSS_VAR_WIDTH]: `${width}%`
+  };
 };
-export const cellStyle = css`
-  border: none;
-  padding: ${gridSize() / 2}px ${gridSize}px;
-  text-align: left;
-
-  &:first-child {
-    padding-left: 0;
-  }
-  &:last-child {
-    padding-right: 0;
+export const cellStyles = css({
+  border: 'none',
+  padding: `${gridSize / 2}px ${gridSize}px`,
+  textAlign: 'left',
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-child': {
+    paddingRight: 0
   }
-`;
+});

package/dist/es2019/styled/rankable/RowPlaceholder.js

@@ -1,4 +1,10 @@
-import styled from 'styled-components';
-export const RowPlaceholderCell = styled.td`
-  padding: 0;
-`;
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+const rowPlaceholderStyles = css({
+  padding: 0
+});
+export const RowPlaceholderCell = props => jsx("td", _extends({
+  css: rowPlaceholderStyles
+}, props));

package/dist/es2019/styled/rankable/TableCell.js

@@ -1,10 +1,17 @@
-import styled, { css } from 'styled-components';
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { TableBodyCell } from '../TableCell';
-const rankingStyles = css`
-  box-sizing: border-box;
-`;
-export const RankableTableBodyCell = styled(TableBodyCell)`
-  ${({
-  isRanking
-}) => isRanking && rankingStyles};
-`;
+const rankingStyles = css({
+  boxSizing: 'border-box'
+});
+export const RankableTableBodyCell = ({
+  isRanking,
+  innerRef,
+  ...props
+}) => jsx(TableBodyCell, _extends({
+  css: isRanking && rankingStyles
+}, props, {
+  innerRef: innerRef
+}));

package/dist/es2019/styled/rankable/TableRow.js

@@ -1,31 +1,39 @@
-import styled, { css } from 'styled-components';
-import { B100, N20 } from '@atlaskit/theme/colors';
-import { e500 } from '@atlaskit/theme/elevation';
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { TableBodyRow } from '../TableRow';
-const rankingStyles = css`
-  display: block;
-`;
+const rankingStyles = css({
+  display: 'block'
+});
+const elevationStyle = token('shadow.overlay', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`);
 /**
  * TODO: Pass the props here to get particular theme for the table
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
  */
 
-const rankingItemStyles = css`
-  background-color: ${N20};
-  ${e500()} border-radius: 2px;
-`;
-
-const draggableStyles = ({
+const rankingItemStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  boxShadow: elevationStyle,
+  borderRadius: '2px'
+});
+const draggableStyles = css({
+  '&:focus': {
+    outlineStyle: 'solid',
+    outlineColor: token('color.border.focus', B100)
+  },
+  outlineWidth: '2px'
+});
+export const RankableTableBodyRow = /*#__PURE__*/forwardRef(({
   isRanking,
-  isRankingItem
-}) => css`
-  ${isRanking && rankingStyles} ${isRankingItem && rankingItemStyles} &:focus {
-    outline-style: solid;
-    outline-color: ${B100};
-    outline-width: 2px;
-  }
-`;
-
-export const RankableTableBodyRow = styled(TableBodyRow)`
-  ${draggableStyles};
-`;
+  isRankingItem,
+  ...props
+}, ref) => {
+  return jsx(TableBodyRow, _extends({
+    css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
+    ref: ref
+  }, props));
+});

package/dist/es2019/theme.js

@@ -1,5 +1,6 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 export const MSThemeColors = {
   Background: 'Canvas',
   Text: 'CanvasText',
@@ -8,43 +9,43 @@ export const MSThemeColors = {
 };
 export const arrow = {
   defaultColor: themed({
-    light: colors.N40,
-    dark: colors.DN40
+    light: token('color.background.subtleNeutral.resting', colors.N40),
+    dark: token('color.background.subtleNeutral.resting', colors.DN40)
   }),
   selectedColor: themed({
-    light: colors.N300,
-    dark: colors.DN300
+    light: token('color.text.lowEmphasis', colors.N300),
+    dark: token('color.text.lowEmphasis', colors.DN300)
   }),
   hoverColor: themed({
-    light: colors.N60,
-    dark: colors.DN60
+    light: token('color.background.subtleNeutral.pressed', colors.N60),
+    dark: token('color.background.subtleNeutral.pressed', colors.DN60)
   })
 };
 export const row = {
   focusOutline: themed({
-    light: colors.B100,
-    dark: colors.B100
+    light: token('color.border.focus', colors.B100),
+    dark: token('color.border.focus', colors.B100)
   }),
   highlightedBackground: themed({
-    light: colors.B50,
-    dark: colors.DN50
+    light: token('color.background.selected.resting', colors.B50),
+    dark: token('color.background.selected.resting', colors.DN50)
   }),
   hoverBackground: themed({
-    light: colors.N10,
-    dark: colors.DN40
+    light: token('color.background.subtleBorderedNeutral.resting', colors.N10),
+    dark: token('color.background.subtleBorderedNeutral.resting', colors.DN40)
   }),
   hoverHighlightedBackground: themed({
-    light: colors.B75,
-    dark: colors.DN60
+    light: token('color.background.selected.hover', colors.B75),
+    dark: token('color.background.selected.hover', colors.DN60)
   })
 };
 export const head = {
   borderColor: themed({
-    light: colors.N40,
-    dark: colors.DN50
+    light: token('color.border.neutral', colors.N40),
+    dark: token('color.border.neutral', colors.DN50)
   }),
   textColor: themed({
-    light: colors.N300,
-    dark: colors.DN300
+    light: token('color.text.lowEmphasis', colors.N300),
+    dark: token('color.text.lowEmphasis', colors.DN300)
   })
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.3.2",
+	"version": "14.4.0",
 	"sideEffects": false
 }

package/dist/esm/components/LoadingContainerAdvanced.js

@@ -89,7 +89,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getSpinnerNode", function () {
-      return safeFindDOMNode(_this.spinner);
+      return safeFindDOMNode(_this.spinnerRef);
     });
 
     _defineProperty(_assertThisInitialized(_this), "hasTargetNode", function (nextProps) {
@@ -237,8 +237,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
           _this2.children = el;
         }
       }), isLoading && /*#__PURE__*/React.createElement(SpinnerBackdrop, null, /*#__PURE__*/React.createElement(SpinnerContainer, {
-        innerRef: function innerRef(el) {
-          _this2.spinner = el;
+        ref: function ref(el) {
+          return _this2.spinnerRef = el;
         }
       }, /*#__PURE__*/React.createElement(Spinner, {
         size: spinnerSize,

package/dist/esm/components/Stateless.js

@@ -24,7 +24,7 @@ import ManagedPagination from './managedPagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.3.2";
+var packageVersion = "14.4.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/esm/components/TableHeadCell.js

@@ -1,54 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-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";
-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 { HeadCell } from '../styled/TableHead';
 
-var TableHeadCell = /*#__PURE__*/function (_React$Component) {
-  _inherits(TableHeadCell, _React$Component);
-
-  var _super = _createSuper(TableHeadCell);
-
-  function TableHeadCell() {
-    _classCallCheck(this, TableHeadCell);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(TableHeadCell, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          content = _this$props.content,
-          inlineStyles = _this$props.inlineStyles,
-          testId = _this$props.testId,
-          rest = _objectWithoutProperties(_this$props, ["content", "inlineStyles", "testId"]);
-
-      return /*#__PURE__*/React.createElement(HeadCell, _extends({
-        style: inlineStyles,
-        "data-testid": testId && "".concat(testId, "--head--cell")
-      }, rest, {
-        tabIndex: rest.isSortable ? 0 : undefined
-      }), /*#__PURE__*/React.createElement("span", null, content));
-    }
-  }]);
-
-  return TableHeadCell;
-}(React.Component);
-
-_defineProperty(TableHeadCell, "defaultProps", {
-  innerRef: function innerRef() {},
-  inlineStyles: {}
-});
+var TableHeadCell = function TableHeadCell(_ref) {
+  var content = _ref.content,
+      inlineStyles = _ref.inlineStyles,
+      testId = _ref.testId,
+      isRanking = _ref.isRanking,
+      innerRef = _ref.innerRef,
+      isSortable = _ref.isSortable,
+      rest = _objectWithoutProperties(_ref, ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"]);
+
+  return /*#__PURE__*/React.createElement(HeadCell, _extends({
+    style: inlineStyles,
+    "data-testid": testId && "".concat(testId, "--head--cell"),
+    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
+
+  }, rest, {
+    tabIndex: isSortable ? 0 : undefined,
+    isSortable: isSortable
+  }), /*#__PURE__*/React.createElement("span", null, content));
+};
 
 export default TableHeadCell;

package/dist/esm/components/rankable/TableCell.js

@@ -33,8 +33,8 @@ export var RankableTableCell = /*#__PURE__*/function (_React$Component) {
           head = _this$props.head,
           isFixedSize = _this$props.isFixedSize,
           isRanking = _this$props.isRanking,
-          innerRef = _this$props.innerRef,
-          refWidth = _this$props.refWidth;
+          refWidth = _this$props.refWidth,
+          innerRef = _this$props.innerRef;
 
       var content = cell.content,
           restCellProps = _objectWithoutProperties(cell, ["content"]);
@@ -50,10 +50,10 @@ export var RankableTableCell = /*#__PURE__*/function (_React$Component) {
         width: width,
         isRanking: isRanking,
         style: inlineStyles,
-        innerRef: innerRef,
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();
-        }
+        },
+        innerRef: innerRef
       }), content);
     }
   }]);

package/dist/esm/components/rankable/TableHeadCell.js

@@ -33,13 +33,11 @@ var RankableTableHeadCell = /*#__PURE__*/function (_React$Component) {
           isRanking = _this$props.isRanking,
           refHeight = _this$props.refHeight,
           refWidth = _this$props.refWidth,
-          innerRef = _this$props.innerRef,
-          restProps = _objectWithoutProperties(_this$props, ["isRanking", "refHeight", "refWidth", "innerRef"]);
+          restProps = _objectWithoutProperties(_this$props, ["isRanking", "refHeight", "refWidth"]);
 
       var inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
       return /*#__PURE__*/React.createElement(HeadCell, _extends({
-        inlineStyles: inlineStyles,
-        innerRef: innerRef
+        inlineStyles: inlineStyles
       }, restProps));
     }
   }]);

package/dist/esm/components/rankable/TableRow.js

@@ -42,7 +42,7 @@ export var RankableTableRow = /*#__PURE__*/function (_React$Component) {
       return function (ref) {
         innerRefFn(ref);
 
-        if (_this.props.innerRef) {
+        if (typeof _this.props.innerRef === 'function') {
           _this.props.innerRef(ref);
         }
       };
@@ -78,12 +78,12 @@ export var RankableTableRow = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/React.createElement(Draggable, {
-        draggableId: key || "".concat(rowIndex),
+        draggableId: key || rowIndex.toString(),
         index: rowIndex,
         isDragDisabled: isRankingDisabled
       }, function (provided, snapshot) {
         return /*#__PURE__*/React.createElement(RankableTableBodyRow, _extends({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
-          innerRef: _this2.innerRef(provided.innerRef),
+          ref: _this2.innerRef(provided.innerRef),
           style: _objectSpread(_objectSpread({}, provided.draggableProps.style), inlineStyles),
           isHighlighted: isHighlighted,
           isRanking: isRanking,

package/dist/esm/styled/DynamicTable.js

@@ -1,12 +1,80 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { row } from '../theme';
+var gridSize = getGridSize();
+// CSS vars for table row
+// these are declared here to avoid being re-declared in each table row
+export var tableRowCSSVars = {
+  CSS_VAR_HOVER_BACKGROUND: '--local-dynamic-table-hover-bg',
+  CSS_VAR_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-highlighted-bg',
+  CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-hover-highlighted-bg',
+  CSS_VAR_ROW_FOCUS_OUTLINE: '--local-dynamic-table-row-focus-outline'
+};
+var fixedSizeTableStyles = css({
+  tableLayout: 'fixed'
+});
+var tableStyles = css({
+  borderCollapse: 'collapse',
+  width: '100%'
+});
+export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref2;
+
+  var isFixedSize = _ref.isFixedSize,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["isFixedSize", "children"]);
 
-import styled, { css } from 'styled-components';
-import { gridSize } from '@atlaskit/theme/constants';
-export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n"])), function (_ref) {
-  var isFixedSize = _ref.isFixedSize;
-  return isFixedSize && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      table-layout: fixed;\n    "])));
+  var theme = useGlobalTheme();
+  return jsx("table", _extends({
+    style: (_ref2 = {}, _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, row.hoverBackground({
+      theme: theme
+    })), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, row.highlightedBackground({
+      theme: theme
+    })), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, row.hoverHighlightedBackground({
+      theme: theme
+    })), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, row.focusOutline({
+      theme: theme
+    })), _ref2),
+    css: [tableStyles, isFixedSize && fixedSizeTableStyles],
+    ref: ref
+  }, rest), children);
+});
+var captionStyles = css({
+  fontSize: '1.42857143em',
+
+  /* there is a bug in Safari: if element which creates a new stacking context
+     is a child of a table, table caption re-renders in bad wrong position
+     https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom
+  */
+  willChange: 'transform',
+  fontStyle: 'inherit',
+  fontWeight: 500,
+  letterSpacing: '-0.008em',
+  lineHeight: 1.2,
+  marginBottom: "".concat(gridSize, "px"),
+  marginTop: "".concat(gridSize * 3.5, "px"),
+  textAlign: 'left'
+});
+export var Caption = function Caption(_ref3) {
+  var children = _ref3.children;
+  return jsx("caption", {
+    css: captionStyles
+  }, children);
+};
+var paginationWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center'
 });
-export var Caption = styled.caption(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 1.42857143em;\n  /* there is a bug in Safari: if element which creates a new stacking context\n     is a child of a table, table caption re-renders in bad wrong position\n     https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom\n  */\n  will-change: transform;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  text-align: left;\n"])), gridSize, gridSize() * 3.5);
-export var PaginationWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n"])));
+export var PaginationWrapper = function PaginationWrapper(_ref4) {
+  var children = _ref4.children;
+  return jsx("div", {
+    css: paginationWrapperStyles
+  }, children);
+};

package/dist/esm/styled/EmptyBody.js

@@ -1,8 +1,24 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
-export var EmptyViewWithFixedHeight = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "px;\n"])), gridSize() * 18);
-export var EmptyViewContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: auto;\n  padding: 10px;\n  text-align: center;\n  width: 50%;\n"])));
+var fixedHeightStyles = css({
+  height: "".concat(gridSize() * 18, "px")
+});
+export var EmptyViewWithFixedHeight = function EmptyViewWithFixedHeight(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: fixedHeightStyles
+  }, children);
+};
+var emptyViewContainerStyles = css({
+  margin: 'auto',
+  padding: '10px',
+  textAlign: 'center',
+  width: '50%'
+});
+export var EmptyViewContainer = function EmptyViewContainer(_ref2) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: emptyViewContainerStyles
+  }, children);
+};