@atlaskit/dynamic-table 14.2.3 → 14.4.0

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

@@ -8,13 +8,13 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 { Draggable } from 'react-beautiful-dnd';
@@ -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/hoc/withDimensions.js

@@ -9,14 +9,12 @@ 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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';
 // Compute height and width of wrapped component before ranking
 export default function withDimensions(WrappedComponent) {
-  var _temp;
-
-  return _temp = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     _inherits(WithDimensions, _React$Component);
 
     var _super = _createSuper(WithDimensions);
@@ -91,5 +89,5 @@ export default function withDimensions(WrappedComponent) {
     }]);
 
     return WithDimensions;
-  }(React.Component), _temp;
+  }(React.Component);
 }

package/dist/esm/hoc/withSortedPageRows.js

@@ -9,13 +9,13 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 { ASC } from '../internal/constants';
@@ -102,9 +102,7 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
 
 // get one page of data in table, sorting all rows previously
 export default function withSortedPageRows(WrappedComponent) {
-  var _temp;
-
-  return _temp = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     _inherits(WithSortedPageRows, _React$Component);
 
     var _super = _createSuper(WithSortedPageRows);
@@ -186,5 +184,5 @@ export default function withSortedPageRows(WrappedComponent) {
     }]);
 
     return WithSortedPageRows;
-  }(React.Component), _temp;
+  }(React.Component);
 }

package/dist/esm/styled/DynamicTable.js

@@ -1,51 +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";
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _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"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n      table-layout: fixed;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n"]);
+/** @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;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+  var isFixedSize = _ref.isFixedSize,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["isFixedSize", "children"]);
 
-  return data;
-}
+  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',
 
-import styled, { css } from 'styled-components';
-import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
-export var Table = styled.table(_templateObject(), function (_ref) {
-  var isFixedSize = _ref.isFixedSize;
-  return isFixedSize && css(_templateObject2());
+  /* 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(), gridSize, multiply(gridSize, 3.5));
-export var PaginationWrapper = styled.div(_templateObject4());
+export var PaginationWrapper = function PaginationWrapper(_ref4) {
+  var children = _ref4.children;
+  return jsx("div", {
+    css: paginationWrapperStyles
+  }, children);
+};

package/dist/esm/styled/EmptyBody.js

@@ -1,27 +1,24 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  margin: auto;\n  padding: 10px;\n  text-align: center;\n  width: 50%;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  height: ", "px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
-export var EmptyViewWithFixedHeight = styled.div(_templateObject(), multiply(gridSize, 18));
-export var EmptyViewContainer = styled.div(_templateObject2());
+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);
+};

package/dist/esm/styled/LoadingContainer.js

@@ -1,38 +1,42 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  pointer-events: none;\n  opacity: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import styled from 'styled-components';
-export var Container = styled.div(_templateObject());
-export var ContentsContainer = styled.div(_templateObject2(), function (p) {
-  return p.contentsOpacity;
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+var CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
+var containerStyles = css({
+  position: 'relative'
+});
+export var Container = function Container(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: containerStyles
+  }, children);
+};
+var contentsContainerStyles = css({
+  pointerEvents: 'none',
+  opacity: "var(".concat(CSS_VAR_CONTENTS_OPACITY, ")")
+});
+export var ContentsContainer = function ContentsContainer(_ref2) {
+  var contentsOpacity = _ref2.contentsOpacity,
+      children = _ref2.children;
+  return jsx("div", {
+    style: _defineProperty({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity),
+    css: [contentsContainerStyles]
+  }, children);
+};
+var spinnerContainerStyles = css({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
 });
-export var SpinnerContainer = styled.div(_templateObject3());
+export var SpinnerContainer = function SpinnerContainer(_ref4) {
+  var children = _ref4.children;
+  return jsx("div", {
+    css: spinnerContainerStyles
+  }, children);
+};

package/dist/esm/styled/LoadingContainerAdvanced.js

@@ -1,37 +1,43 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
 
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  top: 0;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n  position: relative;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import styled from 'styled-components';
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
-export var Container = styled.div(_templateObject(), gridSize() * 3);
-export var SpinnerBackdrop = styled.div(_templateObject2());
-export var SpinnerContainer = styled.div(_templateObject3());
+var containerStyles = css({
+  marginBottom: "".concat(gridSize() * 3, "px"),
+  position: 'relative'
+});
+export var Container = function Container(props) {
+  return jsx("div", _extends({
+    css: containerStyles
+  }, props));
+};
+var spinnerBackdropStyles = css({
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: spinnerBackdropStyles
+  }, children);
+};
+var spinnerContainerStyles = css({
+  position: 'relative',
+  top: 0
+});
+export var SpinnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: spinnerContainerStyles,
+    ref: ref
+  }, children);
+});

package/dist/esm/styled/TableCell.js

@@ -1,17 +1,23 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  ", " ", ";\n"]);
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+export var TableBodyCell = function TableBodyCell(_ref) {
+  var width = _ref.width,
+      isFixedSize = _ref.isFixedSize,
+      shouldTruncate = _ref.shouldTruncate,
+      innerRef = _ref.innerRef,
+      props = _objectWithoutProperties(_ref, ["width", "isFixedSize", "shouldTruncate", "innerRef"]);
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import styled from 'styled-components';
-import { cellStyle, truncateStyle } from './constants';
-export var TableBodyCell = styled.td(_templateObject(), function (props) {
-  return truncateStyle(props);
-}, cellStyle);
+  return jsx("td", _extends({
+    style: getTruncationStyleVars({
+      width: width
+    }),
+    css: [truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, cellStyles] // HOC withDimensions complains about the types but it is working fine
+    // @ts-ignore
+    ,
+    ref: innerRef
+  }, props));
+};