@atlaskit/dynamic-table
Version:
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
54 lines (52 loc) • 2.04 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { forwardRef } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { tableRowCSSVars as cssVars } from './dynamic-table';
const rowStyles = css({
backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
'&:focus-visible': {
outline: `2px solid ${`var(--ds-border-focused, ${
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`}`,
outlineOffset: `-2px`
}
});
const rowBackgroundStyles = css({
'&:hover': {
backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`
}
});
const rowHighlightedBackgroundStyles = css({
backgroundColor: `var(--ds-background-selected, ${
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
`var(${cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND})`})`,
'&:hover': {
backgroundColor: `var(--ds-background-selected-hovered, ${
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
`var(${cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND})`})`
}
});
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export const TableBodyRow = /*#__PURE__*/forwardRef(({
isHighlighted,
children,
style,
testId,
...rest
}, ref) => {
return jsx("tr", _extends({
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: style,
css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
}, rest, {
ref: ref,
"data-testid": testId
}), children);
});