@atlaskit/dynamic-table 14.6.0 → 14.7.1

package/dist/es2019/components/{Stateless.js → stateless.js}

@@ -2,18 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
 import { ASC, DESC, LARGE, SMALL } from '../internal/constants';
 import { assertIsSortable, getPageRows, validateSortKey } from '../internal/helpers';
-import { Caption, PaginationWrapper, Table } from '../styled/DynamicTable';
-import { EmptyViewContainer, EmptyViewWithFixedHeight } from '../styled/EmptyBody';
-import Body from './Body';
-import LoadingContainer from './LoadingContainer';
-import LoadingContainerAdvanced from './LoadingContainerAdvanced';
+import { Caption, PaginationWrapper, Table } from '../styled/dynamic-table';
+import { EmptyViewContainer, EmptyViewWithFixedHeight } from '../styled/empty-body';
+import Body from './body';
+import LoadingContainer from './loading-container';
+import LoadingContainerAdvanced from './loading-container-advanced';
 import ManagedPagination from './managed-pagination';
-import RankableTableBody from './rankable/Body';
-import TableHead from './TableHead';
+import RankableTableBody from './rankable/body';
+import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.6.0";
+const packageVersion = "14.7.1";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -184,6 +185,9 @@ class DynamicTable extends React.Component {
       totalPages = rowsLength && rowsPerPage ? Math.ceil(rowsLength / rowsPerPage) : 0;
     }
 
+    totalPages = totalPages < 1 ? 1 : totalPages;
+    const getPageNumber = page > totalPages ? totalPages : page; // page! required, because typescript can't yet see defaultProps to know that this won't be undefined
+
     const bodyProps = {
       highlightedRowIndex,
       rows,
@@ -191,7 +195,7 @@ class DynamicTable extends React.Component {
       sortKey,
       sortOrder,
       rowsPerPage,
-      page,
+      page: getPageNumber,
       isFixedSize: isFixedSize || false,
       onPageRowsUpdate,
       isTotalPagesControlledExternally,
@@ -212,7 +216,8 @@ class DynamicTable extends React.Component {
     }, /*#__PURE__*/React.createElement(Table, {
       isFixedSize: isFixedSize,
       "data-testid": testId && `${testId}--table`,
-      "aria-label": label
+      "aria-label": label,
+      hasDataRow: rowsExist
     }, !!caption && /*#__PURE__*/React.createElement(Caption, null, caption), head && /*#__PURE__*/React.createElement(TableHead, {
       head: head,
       onSort: this.onSort,
@@ -226,8 +231,11 @@ class DynamicTable extends React.Component {
       onRankStart: this.onRankStart,
       onRankEnd: this.onRankEnd,
       isRankingDisabled: isRankingDisabled || isLoading || false
-    })) : /*#__PURE__*/React.createElement(Body, bodyProps)))), !totalPages ? null : /*#__PURE__*/React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement(ManagedPagination, {
-      value: page,
+    })) : /*#__PURE__*/React.createElement(Body, bodyProps)))), totalPages <= 1 ? null :
+    /*#__PURE__*/
+    // only show pagination if there's MORE than 1 page
+    React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement(ManagedPagination, {
+      value: getPageNumber,
       onChange: this.onSetPage,
       total: totalPages,
       i18n: paginationi18n,
@@ -245,13 +253,13 @@ _defineProperty(DynamicTable, "defaultProps", {
   isLoading: false,
   isFixedSize: false,
   rowsPerPage: Infinity,
-  onSetPage: () => {},
-  onSort: () => {},
+  onSetPage: noop,
+  onSort: noop,
   page: 1,
   isRankable: false,
   isRankingDisabled: false,
-  onRankStart: () => {},
-  onRankEnd: () => {},
+  onRankStart: noop,
+  onRankEnd: noop,
   paginationi18n: {
     prev: 'Prev',
     next: 'Next',

package/dist/es2019/components/{TableHeadCell.js → table-head-cell.js}

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { HeadCell } from '../styled/TableHead';
+import { HeadCell } from '../styled/table-head';
 
 const TableHeadCell = ({
   content,
@@ -15,11 +15,13 @@ const TableHeadCell = ({
     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
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, rest, {
     tabIndex: isSortable ? 0 : undefined,
     isSortable: isSortable
   }), /*#__PURE__*/React.createElement("span", null, content));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default TableHeadCell;

package/dist/es2019/components/{TableHead.js → table-head.js}

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { validateSortKey } from '../internal/helpers';
-import { Head } from '../styled/TableHead';
-import RankableHeadCell from './rankable/TableHeadCell';
-import HeadCell from './TableHeadCell';
+import { Head } from '../styled/table-head';
+import RankableHeadCell from './rankable/table-head-cell';
+import HeadCell from './table-head-cell';
 
 class TableHead extends React.Component {
   constructor(...args) {
@@ -66,6 +66,7 @@ class TableHead extends React.Component {
     })));
   }
 
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default TableHead;

package/dist/es2019/components/{TableRow.js → table-row.js}

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { TableBodyCell } from '../styled/TableCell';
-import { TableBodyRow } from '../styled/TableRow';
+import { TableBodyCell } from '../styled/table-cell';
+import { TableBodyRow } from '../styled/table-row';
 
 const Row = ({
   row,
@@ -41,6 +41,7 @@ const Row = ({
       width: width
     }), content);
   }));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Row;

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-export { default } from './components/Stateful';
-export { default as DynamicTableStateless } from './components/Stateless';
+export { default } from './components/stateful';
+export { default as DynamicTableStateless } from './components/stateless';

package/dist/es2019/styled/constants.js

@@ -14,14 +14,12 @@ export const overflowTruncateStyles = css({
 });
 export const getTruncationStyleVars = ({
   width
-}) => {
-  return {
-    [CSS_VAR_WIDTH]: typeof width !== 'undefined' ? `${width}%` : undefined
-  };
-};
+}) => typeof width !== 'undefined' ? {
+  [CSS_VAR_WIDTH]: `${width}%`
+} : undefined;
 export const cellStyles = css({
-  border: 'none',
   padding: `${gridSize / 2}px ${gridSize}px`,
+  border: 'none',
   textAlign: 'left',
   '&:first-of-type': {
     paddingLeft: 0

package/dist/es2019/styled/{DynamicTable.js → dynamic-table.js}

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 /** @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';
+import { row, tableBorder } from '../theme';
 const gridSize = getGridSize();
 // CSS vars for table row
 // these are declared here to avoid being re-declared in each table row
@@ -19,49 +20,45 @@ const fixedSizeTableStyles = css({
   tableLayout: 'fixed'
 });
 const tableStyles = css({
-  borderCollapse: 'collapse',
-  width: '100%'
+  width: '100%',
+  borderCollapse: 'separate',
+  borderSpacing: '0px'
+});
+const bodyBorder = css({
+  borderBottom: `2px solid ${tableBorder.borderColor}`
 });
 export const Table = /*#__PURE__*/forwardRef(({
   isFixedSize,
+  hasDataRow,
   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
-      })
+      [tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND]: row.hoverBackground,
+      [tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND]: row.highlightedBackground,
+      [tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND]: row.hoverHighlightedBackground,
+      [tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE]: row.focusOutline
     },
-    css: [tableStyles, isFixedSize && fixedSizeTableStyles],
+    css: [tableStyles, isFixedSize && fixedSizeTableStyles, hasDataRow && bodyBorder],
     ref: ref
   }, rest), children);
 });
 const captionStyles = css({
+  marginTop: `${gridSize * 3.5}px`,
+  marginBottom: `${gridSize}px`,
   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
-  */
-  willChange: 'transform',
   fontStyle: 'inherit',
   fontWeight: 500,
   letterSpacing: '-0.008em',
   lineHeight: 1.2,
-  marginBottom: `${gridSize}px`,
-  marginTop: `${gridSize * 3.5}px`,
-  textAlign: 'left'
+  textAlign: 'left',
+
+  /* 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'
 });
 export const Caption = ({
   children

package/dist/es2019/styled/{EmptyBody.js → empty-body.js}

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -10,10 +12,10 @@ export const EmptyViewWithFixedHeight = ({
   css: fixedHeightStyles
 }, children);
 const emptyViewContainerStyles = css({
+  width: '50%',
   margin: 'auto',
   padding: '10px',
-  textAlign: 'center',
-  width: '50%'
+  textAlign: 'center'
 });
 export const EmptyViewContainer = ({
   children

package/dist/es2019/styled/{LoadingContainerAdvanced.js → loading-container-advanced.js}

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
@@ -8,19 +10,20 @@ const containerStyles = css({
   marginBottom: `${gridSize() * 3}px`,
   position: 'relative'
 });
-export const Container = props => jsx("div", _extends({
+export const Container = props => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx("div", _extends({
   css: containerStyles
 }, props));
 const spinnerBackdropStyles = css({
-  pointerEvents: 'none',
+  display: 'flex',
   position: 'absolute',
   top: 0,
   right: 0,
   bottom: 0,
   left: 0,
-  display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  pointerEvents: 'none'
 });
 export const SpinnerBackdrop = ({
   children

package/dist/es2019/styled/{LoadingContainer.js → loading-container.js}

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 const CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
@@ -10,8 +12,8 @@ export const Container = ({
   css: containerStyles
 }, children);
 const contentsContainerStyles = css({
-  pointerEvents: 'none',
-  opacity: `var(${CSS_VAR_CONTENTS_OPACITY})`
+  opacity: `var(${CSS_VAR_CONTENTS_OPACITY})`,
+  pointerEvents: 'none'
 });
 export const ContentsContainer = ({
   contentsOpacity,
@@ -23,12 +25,12 @@ export const ContentsContainer = ({
   css: [contentsContainerStyles]
 }, children);
 const spinnerContainerStyles = css({
+  display: 'flex',
   position: 'absolute',
   top: 0,
   right: 0,
   bottom: 0,
   left: 0,
-  display: 'flex',
   alignItems: 'center',
   justifyContent: 'center'
 });

package/dist/es2019/styled/rankable/row-placeholder.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+const rowPlaceholderStyles = css({
+  padding: 0
+}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
+export const RowPlaceholderCell = props => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx("td", _extends({
+  css: rowPlaceholderStyles
+}, props));

package/dist/es2019/styled/rankable/{TableCell.js → table-cell.js}

@@ -2,16 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { TableBodyCell } from '../TableCell';
+import { TableBodyCell } from '../table-cell';
 const rankingStyles = css({
   boxSizing: 'border-box'
-});
+}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export const RankableTableBodyCell = ({
   isRanking,
   innerRef,
   ...props
 }) => jsx(TableBodyCell, _extends({
-  css: isRanking && rankingStyles
+  css: isRanking && rankingStyles // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
 }, props, {
   innerRef: innerRef
 }));

package/dist/es2019/styled/rankable/{TableRow.js → table-row.js}

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
-import { TableBodyRow } from '../TableRow';
+import { TableBodyRow } from '../table-row';
 const rankingStyles = css({
   display: 'block'
 });
@@ -16,16 +16,17 @@ const elevationStyle = `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${N50A}, 0
 
 const rankingItemStyles = css({
   backgroundColor: `var(--ds-background-neutral, ${N20})`,
-  boxShadow: elevationStyle,
-  borderRadius: '2px'
+  borderRadius: '2px',
+  boxShadow: elevationStyle
 });
 const draggableStyles = css({
+  outlineWidth: '2px',
   '&:focus': {
-    outlineStyle: 'solid',
-    outlineColor: `var(--ds-border-focused, ${B100})`
-  },
-  outlineWidth: '2px'
-});
+    outlineColor: `var(--ds-border-focused, ${B100})`,
+    outlineStyle: 'solid'
+  }
+}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export const RankableTableBodyRow = /*#__PURE__*/forwardRef(({
   isRanking,
   isRankingItem,

package/dist/es2019/styled/{TableCell.js → table-cell.js}

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export const TableBodyCell = ({
   width,
   isFixedSize,
@@ -16,5 +17,6 @@ export const TableBodyCell = ({
   css: [truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, cellStyles] // HOC withDimensions complains about the types but it is working fine
   // @ts-ignore
   ,
-  ref: innerRef
+  ref: innerRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
 }, props));

package/dist/es2019/styled/table-head.js

@@ -0,0 +1,138 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { B100, N30A } from '@atlaskit/theme/colors';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { ASC, DESC } from '../internal/constants';
+import { arrow, head, MSThemeColors, tableBorder } 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 headStyles = css({
+  borderBottom: `none`
+});
+export const Head = ({
+  isRanking,
+  ...props
+}) => {
+  return jsx("thead", _extends({
+    css: [headStyles, isRanking && rankingStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, props));
+};
+const headCellStyles = css([cellStyles, {
+  boxSizing: 'border-box',
+  position: 'relative',
+  border: 'none',
+  borderBottom: `2px solid ${tableBorder.borderColor}`,
+  color: `var(--ds-text-subtlest, ${`var(${CSS_VAR_TEXT_COLOR})`})`,
+  fontSize: '12px',
+  fontWeight: 600,
+  textAlign: 'left',
+  verticalAlign: 'top',
+  '&:focus': {
+    outline: `solid 2px ${`var(--ds-border-focused, ${B100})`}`
+  }
+}]);
+const onClickStyles = css({
+  '&:hover': {
+    backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`,
+    cursor: 'pointer'
+  }
+});
+const baseStyles = css({
+  '& > span': {
+    position: 'relative',
+    '&::before, &::after': {
+      display: 'block',
+      width: 0,
+      height: 0,
+      position: 'absolute',
+      right: `-${gridSize}px`,
+      border: '3px solid transparent',
+      content: '""'
+    },
+    '&::before': {
+      bottom: '8px',
+      borderBottom: `3px solid ${arrow.defaultColor}`
+    },
+    '&::after': {
+      bottom: 0,
+      borderTop: `3px solid ${arrow.defaultColor}`
+    }
+  },
+  '@media (forced-colors: active)': {
+    '& > span': {
+      '&::before, &::after': {
+        border: `3px solid ${MSThemeColors.Background}`
+      },
+      '&::before': {
+        borderBottom: `3px solid ${MSThemeColors.Text}`
+      },
+      '&::after': {
+        borderTop: `3px solid ${MSThemeColors.Text}`
+      }
+    }
+  }
+});
+const ascendingStyles = css({
+  '& > span': {
+    '&::before': {
+      borderBottom: `3px solid ${arrow.selectedColor}`
+    }
+  },
+  '@media (forced-colors: active)': {
+    '& > span': {
+      '&::before': {
+        borderBottom: `3px solid ${MSThemeColors.SelectedBackground}`
+      }
+    }
+  }
+});
+const descendingStyles = css({
+  '& > span': {
+    '&::after': {
+      borderTop: `3px solid ${arrow.selectedColor}`
+    }
+  },
+  '@media (forced-colors: active)': {
+    '& > span': {
+      '&::after': {
+        borderTop: `3px solid ${MSThemeColors.SelectedBackground}`
+      }
+    }
+  }
+});
+export const HeadCell = /*#__PURE__*/forwardRef(({
+  width,
+  children,
+  isSortable,
+  sortOrder,
+  isFixedSize,
+  shouldTruncate,
+  onClick,
+  style,
+  ...rest
+}, ref) => {
+  const mergedStyles = { ...style,
+    ...(width && getTruncationStyleVars({
+      width
+    })),
+    [CSS_VAR_TEXT_COLOR]: head.textColor
+  };
+  const isASC = sortOrder === ASC;
+  const isDESC = sortOrder === DESC;
+  return jsx("th", _extends({
+    style: mergedStyles,
+    css: [headCellStyles, onClick && onClickStyles, truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, isSortable && baseStyles, isASC && ascendingStyles, isDESC && descendingStyles],
+    onClick: onClick,
+    ref: ref
+  }, rest), children);
+});

package/dist/es2019/styled/{TableRow.js → table-row.js}

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/core';
-import { tableRowCSSVars as cssVars } from './DynamicTable';
+import { tableRowCSSVars as cssVars } from './dynamic-table';
 const rowStyles = css({
   '&:focus': {
     outline: `2px solid ${`var(--ds-border-focused, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`}`,
@@ -20,7 +20,8 @@ const rowHighlightedBackgroundStyles = css({
   '&:hover': {
     backgroundColor: `var(--ds-background-selected-hovered, ${`var(${cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND})`})`
   }
-});
+}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export const TableBodyRow = /*#__PURE__*/forwardRef(({
   isHighlighted,
   children,

package/dist/es2019/theme.js

@@ -1,5 +1,4 @@
 import * as colors from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 export const MSThemeColors = {
   Background: 'Canvas',
   Text: 'CanvasText',
@@ -7,44 +6,18 @@ export const MSThemeColors = {
   SelectedText: 'HighlightText'
 };
 export const arrow = {
-  defaultColor: themed({
-    light: `var(--ds-icon-disabled, ${colors.N40})`,
-    dark: `var(--ds-icon-disabled, ${colors.DN40})`
-  }),
-  selectedColor: themed({
-    light: `var(--ds-icon-subtle, ${colors.N300})`,
-    dark: `var(--ds-icon-subtle, ${colors.DN300})`
-  }),
-  hoverColor: themed({
-    light: `var(--ds-icon-disabled, ${colors.N60})`,
-    dark: `var(--ds-icon-disabled, ${colors.DN60})`
-  })
+  defaultColor: `var(--ds-icon-disabled, ${colors.N40})`,
+  selectedColor: `var(--ds-icon-subtle, ${colors.N300})`
 };
 export const row = {
-  focusOutline: themed({
-    light: `var(--ds-border-focused, ${colors.B100})`,
-    dark: `var(--ds-border-focused, ${colors.B100})`
-  }),
-  highlightedBackground: themed({
-    light: `var(--ds-background-selected, ${colors.B50})`,
-    dark: `var(--ds-background-selected, ${colors.DN50})`
-  }),
-  hoverBackground: themed({
-    light: `var(--ds-background-neutral-subtle-hovered, ${colors.N10})`,
-    dark: `var(--ds-background-neutral-subtle-hovered, ${colors.DN40})`
-  }),
-  hoverHighlightedBackground: themed({
-    light: `var(--ds-background-selected-hovered, ${colors.B75})`,
-    dark: `var(--ds-background-selected-hovered, ${colors.DN60})`
-  })
+  focusOutline: `var(--ds-border-focused, ${colors.B100})`,
+  highlightedBackground: `var(--ds-background-selected, ${colors.B50})`,
+  hoverBackground: `var(--ds-background-neutral-subtle-hovered, ${colors.N10})`,
+  hoverHighlightedBackground: `var(--ds-background-selected-hovered, ${colors.B75})`
 };
 export const head = {
-  borderColor: themed({
-    light: `var(--ds-border, ${colors.N40})`,
-    dark: `var(--ds-border, ${colors.DN50})`
-  }),
-  textColor: themed({
-    light: `var(--ds-text-subtlest, ${colors.N300})`,
-    dark: `var(--ds-text-subtlest, ${colors.DN300})`
-  })
+  textColor: `var(--ds-text-subtlest, ${colors.N300})`
+};
+export const tableBorder = {
+  borderColor: `var(--ds-border, ${colors.N40})`
 };

package/dist/es2019/types.js

@@ -1 +1,2 @@
+/* eslint-disable @repo/internal/react/consistent-types-definitions */
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';