@atlaskit/dynamic-table 14.2.3 → 14.4.0

package/dist/esm/styled/TableHead.js

@@ -1,51 +1,162 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  ", "\n  ", " \n  ", " \n  ", " \n  border: none;\n  color: ", ";\n  box-sizing: border-box;\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n  &:focus {\n    outline: solid 2px ", ";\n  }\n"]);
+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; }
 
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
+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; }
 
-  return data;
-}
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { B100, N30A } from '@atlaskit/theme/colors';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import { ASC, DESC } from '../internal/constants';
+import { arrow, head, MSThemeColors } from '../theme';
+import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+var gridSize = getGridSize();
+var CSS_VAR_TEXT_COLOR = '--local-dynamic-table-text-color';
+var rankingStyles = css({
+  display: 'block'
+});
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  border-bottom: 2px solid ", ";\n  ", ";\n"]);
+var getHeadStyles = function getHeadStyles(theme) {
+  return css({
+    borderBottom: "2px solid ".concat(token('color.border.neutral', head.borderColor({
+      theme: theme
+    })))
+  });
+};
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+export var Head = function Head(_ref) {
+  var isRanking = _ref.isRanking,
+      props = _objectWithoutProperties(_ref, ["isRanking"]);
 
-  return data;
-}
+  var theme = useGlobalTheme();
+  return jsx("thead", _extends({
+    css: [getHeadStyles(theme), isRanking && rankingStyles]
+  }, props));
+};
+var headCellStyles = css([cellStyles, {
+  border: 'none',
+  boxSizing: 'border-box',
+  fontSize: '12px',
+  fontWeight: 600,
+  position: 'relative',
+  textAlign: 'left',
+  verticalAlign: 'top',
+  color: token('color.text.lowEmphasis', "var(".concat(CSS_VAR_TEXT_COLOR, ")")),
+  '&:focus': {
+    outline: "solid 2px ".concat(token('color.border.focus', B100))
+  }
+}]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: block;\n"]);
+export var getArrowStyles = function getArrowStyles(isSortable, sortOrder, theme) {
+  if (!isSortable) {
+    return '';
+  }
 
-  _templateObject = function _templateObject() {
-    return data;
+  var pseudoBaseStyles = {
+    border: '3px solid transparent',
+    display: 'block',
+    height: 0,
+    right: "-".concat(gridSize, "px"),
+    width: 0,
+    '@media (forced-colors: active)': {
+      border: "3px solid ".concat(MSThemeColors.Background)
+    }
   };
-
-  return data;
-}
-
-import styled, { css } from 'styled-components';
-import { B100 } from '@atlaskit/theme/colors';
-import { head } from '../theme';
-import { arrowsStyle, cellStyle, onClickStyle, truncateStyle } from './constants';
-var rankingStyles = css(_templateObject());
-export var Head = styled.thead(_templateObject2(), head.borderColor, function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
-});
-export var HeadCell = styled.th(_templateObject3(), function (_ref2) {
-  var onClick = _ref2.onClick;
-  return onClickStyle({
-    onClick: Boolean(onClick)
+  return css({
+    '& > span': {
+      position: 'relative',
+      '&::before': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderBottom: "3px solid ".concat(sortOrder === ASC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: '8px',
+        content: '""'
+      }),
+      '&::after': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderTop: "3px solid ".concat(sortOrder === DESC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: 0,
+        content: '""'
+      })
+    },
+    '&:hover > span': {
+      '&::before': {
+        borderBottom: "3px solid\n          ".concat(sortOrder === ASC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.hoverColor({
+          theme: theme
+        }))
+      },
+      '&::after': {
+        borderTop: "3px solid\n          ".concat(sortOrder === DESC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.hoverColor({
+          theme: theme
+        }))
+      }
+    },
+    '@media (forced-colors: active)': {
+      '& > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        }
+      },
+      '&:hover > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        }
+      }
+    }
   });
-}, function (p) {
-  return truncateStyle(p);
-}, function (p) {
-  return arrowsStyle(p);
-}, cellStyle, head.textColor, B100);
+};
+var onClickStyles = css({
+  '&:hover': {
+    cursor: 'pointer',
+    backgroundColor: token('color.background.subtleNeutral.hover', N30A)
+  }
+});
+export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var width = _ref2.width,
+      children = _ref2.children,
+      isSortable = _ref2.isSortable,
+      sortOrder = _ref2.sortOrder,
+      isFixedSize = _ref2.isFixedSize,
+      shouldTruncate = _ref2.shouldTruncate,
+      onClick = _ref2.onClick,
+      style = _ref2.style,
+      rest = _objectWithoutProperties(_ref2, ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"]);
+
+  var theme = useGlobalTheme();
+
+  var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && getTruncationStyleVars({
+    width: width
+  })), {}, _defineProperty({}, CSS_VAR_TEXT_COLOR, head.textColor({
+    theme: theme
+  })));
+
+  return jsx("th", _extends({
+    style: mergedStyles,
+    css: [headCellStyles, onClick && onClickStyles, truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, getArrowStyles(isSortable, sortOrder, theme)],
+    onClick: onClick,
+    ref: ref
+  }, rest), children);
+});

package/dist/esm/styled/TableRow.js

@@ -1,42 +1,38 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: ", " solid ", ";\n    outline-offset: -", ";\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import styled, { css } from 'styled-components';
-import { row } from '../theme';
-var outlineWidth = '2px';
-export var TableBodyRow = styled.tr(_templateObject(), function (_ref) {
-  var isHighlighted = _ref.isHighlighted;
-  return isHighlighted && css(_templateObject2(), row.highlightedBackground);
-}, function (_ref2) {
-  var isHighlighted = _ref2.isHighlighted;
-  return css(_templateObject3(), isHighlighted ? row.hoverHighlightedBackground : row.hoverBackground);
-}, outlineWidth, row.focusOutline, outlineWidth);
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+import { tableRowCSSVars as cssVars } from './DynamicTable';
+var rowStyles = css({
+  '&:focus': {
+    outline: "2px solid ".concat(token('color.border.focus', "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"))),
+    outlineOffset: "-2px"
+  }
+});
+var rowBackgroundStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.transparentNeutral.hover', "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"))
+  }
+});
+var rowHighlightedBackgroundStyles = css({
+  backgroundColor: token('color.background.selected.resting', "var(".concat(cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")")),
+  '&:hover': {
+    backgroundColor: token('color.background.selected.hover', "var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"))
+  }
+});
+export var TableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var isHighlighted = _ref.isHighlighted,
+      children = _ref.children,
+      style = _ref.style,
+      rest = _objectWithoutProperties(_ref, ["isHighlighted", "children", "style"]);
+
+  return jsx("tr", _extends({
+    style: style,
+    css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
+  }, rest, {
+    ref: ref
+  }), children);
+});

package/dist/esm/styled/constants.js

@@ -1,110 +1,30 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n  border: none;\n  padding: ", "px ", "px;\n  text-align: left;\n\n  &:first-child {\n    padding-left: 0;\n  }\n  &:last-child {\n    padding-right: 0;\n  }\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n    & > span {\n      position: relative;\n      &::before {\n        ", ";\n        border-bottom: 3px solid\n          ", ";\n        bottom: 8px;\n        content: ' ';\n      }\n      &::after {\n        ", ";\n        border-top: 3px solid\n          ", ";\n        bottom: 0;\n        content: ' ';\n      }\n    }\n\n    &:hover > span {\n      &::before {\n        border-bottom: 3px solid\n          ", ";\n      }\n      &::after {\n        border-top: 3px solid\n          ", ";\n      }\n    }\n  "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -", "px;\n    width: 0;\n  "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n    &:hover {\n      cursor: pointer;\n      background-color: ", ";\n    }\n  "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n        overflow: hidden;\n      "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n        width: ", "%;\n      "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  ", " ", ";\n  ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-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 } from '../theme';
-export var truncateStyle = function truncateStyle(_ref) {
-  var width = _ref.width,
-      isFixedSize = _ref.isFixedSize,
-      shouldTruncate = _ref.shouldTruncate;
-  return css(_templateObject(), width ? css(_templateObject2(), width) : '', isFixedSize ? css(_templateObject3()) : '', isFixedSize && shouldTruncate ? css(_templateObject4()) : '');
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+var CSS_VAR_WIDTH = '--local-dynamic-table-width';
+var gridSize = getGridSize();
+export var truncationWidthStyles = css({
+  width: "var(".concat(CSS_VAR_WIDTH, ")")
+});
+export var fixedSizeTruncateStyles = css({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export var overflowTruncateStyles = css({
+  overflow: 'hidden'
+});
+export var getTruncationStyleVars = function getTruncationStyleVars(_ref) {
+  var width = _ref.width;
+  return _defineProperty({}, CSS_VAR_WIDTH, "".concat(width, "%"));
 };
-export var onClickStyle = function onClickStyle(_ref2) {
-  var onClick = _ref2.onClick;
-  return onClick && css(_templateObject5(), N30A);
-};
-export var arrowsStyle = function arrowsStyle(props) {
-  var isSortable = props.isSortable,
-      sortOrder = props.sortOrder;
-
-  if (!isSortable) {
-    return '';
+export var cellStyles = css({
+  border: 'none',
+  padding: "".concat(gridSize / 2, "px ").concat(gridSize, "px"),
+  textAlign: 'left',
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-child': {
+    paddingRight: 0
   }
-
-  var pseudoBase = css(_templateObject6(), gridSize);
-  return css(_templateObject7(), pseudoBase, sortOrder === ASC ? arrow.selectedColor(props) : arrow.defaultColor(props), pseudoBase, sortOrder === DESC ? arrow.selectedColor(props) : arrow.defaultColor(props), sortOrder === ASC ? arrow.selectedColor(props) : arrow.hoverColor(props), sortOrder === DESC ? arrow.selectedColor(props) : arrow.hoverColor(props));
-};
-export var cellStyle = css(_templateObject8(), divide(gridSize, 2), gridSize);
+});

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

@@ -1,14 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  padding: 0;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import styled from 'styled-components';
-export var RowPlaceholderCell = styled.td(_templateObject());
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+var rowPlaceholderStyles = css({
+  padding: 0
+});
+export var RowPlaceholderCell = function RowPlaceholderCell(props) {
+  return jsx("td", _extends({
+    css: rowPlaceholderStyles
+  }, props));
+};

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

@@ -1,29 +1,20 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import styled, { css } from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { TableBodyCell } from '../TableCell';
-var rankingStyles = css(_templateObject());
-export var RankableTableBodyCell = styled(TableBodyCell)(_templateObject2(), function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
-});
+var rankingStyles = css({
+  boxSizing: 'border-box'
+});
+export var RankableTableBodyCell = function RankableTableBodyCell(_ref) {
+  var isRanking = _ref.isRanking,
+      innerRef = _ref.innerRef,
+      props = _objectWithoutProperties(_ref, ["isRanking", "innerRef"]);
+
+  return jsx(TableBodyCell, _extends({
+    css: isRanking && rankingStyles
+  }, props, {
+    innerRef: innerRef
+  }));
+};

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

@@ -1,61 +1,40 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n  ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  ", " ", " &:focus {\n    outline-style: solid;\n    outline-color: ", ";\n    outline-width: 2px;\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  ", " border-radius: 2px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: block;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-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";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+/** @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';
-var rankingStyles = css(_templateObject());
+var rankingStyles = css({
+  display: 'block'
+});
+var elevationStyle = token('shadow.overlay', "0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(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
  */
 
-var rankingItemStyles = css(_templateObject2(), N20, e500());
-
-var draggableStyles = function draggableStyles(_ref) {
+var rankingItemStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  boxShadow: elevationStyle,
+  borderRadius: '2px'
+});
+var draggableStyles = css({
+  '&:focus': {
+    outlineStyle: 'solid',
+    outlineColor: token('color.border.focus', B100)
+  },
+  outlineWidth: '2px'
+});
+export var RankableTableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isRanking = _ref.isRanking,
-      isRankingItem = _ref.isRankingItem;
-  return css(_templateObject3(), isRanking && rankingStyles, isRankingItem && rankingItemStyles, B100);
-};
-
-export var RankableTableBodyRow = styled(TableBodyRow)(_templateObject4(), draggableStyles);
+      isRankingItem = _ref.isRankingItem,
+      props = _objectWithoutProperties(_ref, ["isRanking", "isRankingItem"]);
+
+  return jsx(TableBodyRow, _extends({
+    css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
+    ref: ref
+  }, props));
+});