@atlaskit/dynamic-table 14.2.3 → 14.4.0

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/hoc/withDimensions.js

@@ -3,9 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 // Compute height and width of wrapped component before ranking
 export default function withDimensions(WrappedComponent) {
-  var _temp;
-
-  return _temp = class WithDimensions extends React.Component {
+  return class WithDimensions extends React.Component {
     constructor(...args) {
       super(...args);
 
@@ -65,5 +63,5 @@ export default function withDimensions(WrappedComponent) {
       }, this.props));
     }
 
-  }, _temp;
+  };
 }

package/dist/es2019/hoc/withSortedPageRows.js

@@ -85,9 +85,7 @@ const 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 = class WithSortedPageRows extends React.Component {
+  return class WithSortedPageRows extends React.Component {
     constructor(...args) {
       super(...args);
 
@@ -151,5 +149,5 @@ export default function withSortedPageRows(WrappedComponent) {
       }, restProps));
     }
 
-  }, _temp;
+  };
 }

package/dist/es2019/styled/DynamicTable.js

@@ -1,31 +1,79 @@
-import styled, { css } from 'styled-components';
-import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
-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: ${multiply(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,12 +1,22 @@
-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 const EmptyViewWithFixedHeight = styled.div`
-  height: ${multiply(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);
+});