@atlaskit/dynamic-table
Version:
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
49 lines (48 loc) • 1.33 kB
JavaScript
/* eslint-disable @repo/internal/react/require-jsdoc */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
export const CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
const containerStyles = css({
position: 'relative'
});
export const Container = ({
children,
testId
}) => jsx("div", {
css: containerStyles,
"data-testid": testId && `${testId}--container`
}, children);
const contentsContainerStyles = css({
opacity: `var(${CSS_VAR_CONTENTS_OPACITY})`,
pointerEvents: 'none'
});
export const ContentsContainer = ({
children,
contentsOpacity,
testId
}) => jsx("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: {
[CSS_VAR_CONTENTS_OPACITY]: contentsOpacity
},
css: [contentsContainerStyles],
"data-testid": testId && `${testId}--contents--container`
}, children);
const spinnerContainerStyles = css({
display: 'flex',
position: 'absolute',
inset: 0,
alignItems: 'center',
justifyContent: 'center'
});
export const SpinnerContainer = ({
children,
testId
}) => jsx("div", {
css: spinnerContainerStyles,
"data-testid": testId && `${testId}--spinner--container`
}, children);