@atlaskit/dynamic-table 14.3.2 → 14.4.0

package/dist/es2019/components/TableHeadCell.js

@@ -1,29 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { HeadCell } from '../styled/TableHead';
 
-class TableHeadCell extends React.Component {
-  render() {
-    const {
-      content,
-      inlineStyles,
-      testId,
-      ...rest
-    } = this.props;
-    return /*#__PURE__*/React.createElement(HeadCell, _extends({
-      style: inlineStyles,
-      "data-testid": testId && `${testId}--head--cell`
-    }, rest, {
-      tabIndex: rest.isSortable ? 0 : undefined
-    }), /*#__PURE__*/React.createElement("span", null, content));
-  }
+const TableHeadCell = ({
+  content,
+  inlineStyles,
+  testId,
+  isRanking,
+  innerRef,
+  isSortable,
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(HeadCell, _extends({
+    style: inlineStyles,
+    "data-testid": testId && `${testId}--head--cell`,
+    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
 
-}
-
-_defineProperty(TableHeadCell, "defaultProps", {
-  innerRef: () => {},
-  inlineStyles: {}
-});
+  }, rest, {
+    tabIndex: isSortable ? 0 : undefined,
+    isSortable: isSortable
+  }), /*#__PURE__*/React.createElement("span", null, content));
+};
 
 export default TableHeadCell;

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

@@ -10,8 +10,8 @@ export class RankableTableCell extends React.Component {
       head,
       isFixedSize,
       isRanking,
-      innerRef,
-      refWidth
+      refWidth,
+      innerRef
     } = this.props;
     const {
       content,
@@ -28,8 +28,8 @@ export class RankableTableCell extends React.Component {
       width: width,
       isRanking: isRanking,
       style: inlineStyles,
-      innerRef: innerRef,
-      onKeyDown: e => e.stopPropagation()
+      onKeyDown: e => e.stopPropagation(),
+      innerRef: innerRef
     }), content);
   }
 

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

@@ -10,13 +10,11 @@ class RankableTableHeadCell extends React.Component {
       isRanking,
       refHeight,
       refWidth,
-      innerRef,
       ...restProps
     } = this.props;
     const inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
     return /*#__PURE__*/React.createElement(HeadCell, _extends({
-      inlineStyles: inlineStyles,
-      innerRef: innerRef
+      inlineStyles: inlineStyles
     }, restProps));
   }
 

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

@@ -13,7 +13,7 @@ export class RankableTableRow extends React.Component {
     _defineProperty(this, "innerRef", innerRefFn => ref => {
       innerRefFn(ref);
 
-      if (this.props.innerRef) {
+      if (typeof this.props.innerRef === 'function') {
         this.props.innerRef(ref);
       }
     });
@@ -43,11 +43,11 @@ export class RankableTableRow extends React.Component {
     }
 
     return /*#__PURE__*/React.createElement(Draggable, {
-      draggableId: key || `${rowIndex}`,
+      draggableId: key || rowIndex.toString(),
       index: rowIndex,
       isDragDisabled: isRankingDisabled
     }, (provided, snapshot) => /*#__PURE__*/React.createElement(RankableTableBodyRow, _extends({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
-      innerRef: this.innerRef(provided.innerRef),
+      ref: this.innerRef(provided.innerRef),
       style: { ...provided.draggableProps.style,
         ...inlineStyles
       },

package/dist/es2019/styled/DynamicTable.js

@@ -1,30 +1,79 @@
-import styled, { css } from 'styled-components';
-import { gridSize } from '@atlaskit/theme/constants';
-export const Table = styled.table`
-  ${({
-  isFixedSize
-}) => isFixedSize && css`
-      table-layout: fixed;
-    `};
-  border-collapse: collapse;
-  width: 100%;
-`;
-export const Caption = styled.caption`
-  font-size: 1.42857143em;
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+const gridSize = getGridSize();
+// CSS vars for table row
+// these are declared here to avoid being re-declared in each table row
+export const 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'
+};
+const fixedSizeTableStyles = css({
+  tableLayout: 'fixed'
+});
+const tableStyles = css({
+  borderCollapse: 'collapse',
+  width: '100%'
+});
+export const Table = /*#__PURE__*/forwardRef(({
+  isFixedSize,
+  children,
+  ...rest
+}, ref) => {
+  const theme = useGlobalTheme();
+  return jsx("table", _extends({
+    style: {
+      [tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND]: row.hoverBackground({
+        theme
+      }),
+      [tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND]: row.highlightedBackground({
+        theme
+      }),
+      [tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND]: row.hoverHighlightedBackground({
+        theme
+      }),
+      [tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE]: row.focusOutline({
+        theme
+      })
+    },
+    css: [tableStyles, isFixedSize && fixedSizeTableStyles],
+    ref: ref
+  }, rest), children);
+});
+const 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
   */
-  will-change: transform;
-  font-style: inherit;
-  font-weight: 500;
-  letter-spacing: -0.008em;
-  line-height: 1.2;
-  margin-bottom: ${gridSize}px;
-  margin-top: ${gridSize() * 3.5}px;
-  text-align: left;
-`;
-export const PaginationWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-`;
+  willChange: 'transform',
+  fontStyle: 'inherit',
+  fontWeight: 500,
+  letterSpacing: '-0.008em',
+  lineHeight: 1.2,
+  marginBottom: `${gridSize}px`,
+  marginTop: `${gridSize * 3.5}px`,
+  textAlign: 'left'
+});
+export const Caption = ({
+  children
+}) => jsx("caption", {
+  css: captionStyles
+}, children);
+const paginationWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center'
+});
+export const PaginationWrapper = ({
+  children
+}) => jsx("div", {
+  css: paginationWrapperStyles
+}, children);

package/dist/es2019/styled/EmptyBody.js

@@ -1,11 +1,22 @@
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
-export const EmptyViewWithFixedHeight = styled.div`
-  height: ${gridSize() * 18}px;
-`;
-export const EmptyViewContainer = styled.div`
-  margin: auto;
-  padding: 10px;
-  text-align: center;
-  width: 50%;
-`;
+const fixedHeightStyles = css({
+  height: `${gridSize() * 18}px`
+});
+export const EmptyViewWithFixedHeight = ({
+  children
+}) => jsx("div", {
+  css: fixedHeightStyles
+}, children);
+const emptyViewContainerStyles = css({
+  margin: 'auto',
+  padding: '10px',
+  textAlign: 'center',
+  width: '50%'
+});
+export const EmptyViewContainer = ({
+  children
+}) => jsx("div", {
+  css: emptyViewContainerStyles
+}, children);

package/dist/es2019/styled/LoadingContainer.js

@@ -1,18 +1,39 @@
-import styled from 'styled-components';
-export const Container = styled.div`
-  position: relative;
-`;
-export const ContentsContainer = styled.div`
-  pointer-events: none;
-  opacity: ${p => p.contentsOpacity};
-`;
-export const SpinnerContainer = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+const CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
+const containerStyles = css({
+  position: 'relative'
+});
+export const Container = ({
+  children
+}) => jsx("div", {
+  css: containerStyles
+}, children);
+const contentsContainerStyles = css({
+  pointerEvents: 'none',
+  opacity: `var(${CSS_VAR_CONTENTS_OPACITY})`
+});
+export const ContentsContainer = ({
+  contentsOpacity,
+  children
+}) => jsx("div", {
+  style: {
+    [CSS_VAR_CONTENTS_OPACITY]: contentsOpacity
+  },
+  css: [contentsContainerStyles]
+}, children);
+const spinnerContainerStyles = css({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export const SpinnerContainer = ({
+  children
+}) => jsx("div", {
+  css: spinnerContainerStyles
+}, children);

package/dist/es2019/styled/LoadingContainerAdvanced.js

@@ -1,21 +1,39 @@
-import styled from 'styled-components';
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
-export const Container = styled.div`
-  margin-bottom: ${gridSize() * 3}px;
-  position: relative;
-`;
-export const SpinnerBackdrop = styled.div`
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const SpinnerContainer = styled.div`
-  position: relative;
-  top: 0;
-`;
+const containerStyles = css({
+  marginBottom: `${gridSize() * 3}px`,
+  position: 'relative'
+});
+export const Container = props => jsx("div", _extends({
+  css: containerStyles
+}, props));
+const spinnerBackdropStyles = css({
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export const SpinnerBackdrop = ({
+  children
+}) => jsx("div", {
+  css: spinnerBackdropStyles
+}, children);
+const spinnerContainerStyles = css({
+  position: 'relative',
+  top: 0
+});
+export const SpinnerContainer = /*#__PURE__*/forwardRef(({
+  children
+}, ref) => jsx("div", {
+  css: spinnerContainerStyles,
+  ref: ref
+}, children));

package/dist/es2019/styled/TableCell.js

@@ -1,5 +1,20 @@
-import styled from 'styled-components';
-import { cellStyle, truncateStyle } from './constants';
-export const TableBodyCell = styled.td`
-  ${props => truncateStyle(props)} ${cellStyle};
-`;
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+export const TableBodyCell = ({
+  width,
+  isFixedSize,
+  shouldTruncate,
+  innerRef,
+  ...props
+}) => jsx("td", _extends({
+  style: getTruncationStyleVars({
+    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));

package/dist/es2019/styled/TableHead.js

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