@atlaskit/dynamic-table 14.3.1 → 14.4.2

package/dist/es2019/styled/TableRow.js

@@ -1,23 +1,37 @@
-import styled, { css } from 'styled-components';
-import { row } from '../theme';
-const outlineWidth = '2px';
-export const TableBodyRow = styled.tr`
-  ${({
-  isHighlighted
-}) => isHighlighted && css`
-      background-color: ${row.highlightedBackground};
-    `}
+import _extends from "@babel/runtime/helpers/extends";
 
-  &:hover {
-    ${({
-  isHighlighted
-}) => css`
-        background-color: ${isHighlighted ? row.hoverHighlightedBackground : row.hoverBackground};
-      `}
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+import { tableRowCSSVars as cssVars } from './DynamicTable';
+const rowStyles = css({
+  '&:focus': {
+    outline: `2px solid ${token('color.border.focus', `var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`)}`,
+    outlineOffset: `-2px`
   }
-
-  &:focus {
-    outline: ${outlineWidth} solid ${row.focusOutline};
-    outline-offset: -${outlineWidth};
+});
+const rowBackgroundStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.transparentNeutral.hover', `var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`)
+  }
+});
+const rowHighlightedBackgroundStyles = css({
+  backgroundColor: token('color.background.selected.resting', `var(${cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND})`),
+  '&:hover': {
+    backgroundColor: token('color.background.selected.hover', `var(${cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND})`)
   }
-`;
+});
+export const TableBodyRow = /*#__PURE__*/forwardRef(({
+  isHighlighted,
+  children,
+  style,
+  ...rest
+}, ref) => {
+  return jsx("tr", _extends({
+    style: style,
+    css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
+  }, rest, {
+    ref: ref
+  }), children);
+});

package/dist/es2019/styled/constants.js

@@ -1,118 +1,32 @@
-import { css } from 'styled-components';
-import { N30A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { divide } from '@atlaskit/theme/math';
-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]: typeof width !== 'undefined' ? `${width}%` : undefined
+  };
 };
-export const cellStyle = css`
-  border: none;
-  padding: ${divide(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.1",
+	"version": "14.4.2",
 	"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/Stateful.js

@@ -14,6 +14,32 @@ import React from 'react';
 import { reorderRows } from '../internal/helpers';
 import DynamicTableStateless from './Stateless';
 
+/**
+ * __Dynamic Table__
+ *
+ * A table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/dynamic-table)
+ * - [Code](https://bitbucket.org/atlassian/atlassian-frontend/packages/design-system/dynamic-table)
+ *
+ * @example
+ * ```jsx
+ * import DynamicTable from '@atlaskit/dynamic-table';
+ *
+ * export default function TableUncontrolled() {
+ *  return (
+ *   <DynamicTable
+ *    head={head}
+ *    rows={rows}
+ *    rowsPerPage={10}
+ *    defaultPage={1}
+ *    loadingSpinnerSize="large"
+ *    isLoading={false}
+ *   />
+ *  );
+ * }
+ * ```
+ */
 var DynamicTable = /*#__PURE__*/function (_React$Component) {
   _inherits(DynamicTable, _React$Component);
 

package/dist/esm/components/Stateless.js

@@ -20,11 +20,11 @@ import { EmptyViewContainer, EmptyViewWithFixedHeight } from '../styled/EmptyBod
 import Body from './Body';
 import LoadingContainer from './LoadingContainer';
 import LoadingContainerAdvanced from './LoadingContainerAdvanced';
-import ManagedPagination from './managedPagination';
+import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.3.1";
+var packageVersion = "14.4.2";
 
 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/internal/constants.js

@@ -1,7 +1,5 @@
 export var ASC = 'ASC';
 export var DESC = 'DESC';
 export var SMALL = 'small';
-export var MEDIUM = 'medium';
 export var LARGE = 'large';
-export var XLARGE = 'xlarge';
 export var LOADING_CONTENTS_OPACITY = 0.22;