@atlaskit/inline-dialog
Version:
An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
42 lines • 1.56 kB
JavaScript
/* container.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./container.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
const CSS_THEME_BACKGROUND = '--theme-background';
const CSS_THEME_COLOR = '--theme-color';
const CSS_THEME_BOX_SHADOW = '--theme-box-shadow';
const containerStyles = null;
/**
* __Container__
*
* A container is used as a styled wrapper around the contents of an inline dialog.
* Note that the styles here are merged with the style prop that comes from the popper.js library.
*
*/
export const Container = /*#__PURE__*/forwardRef(({
children,
onBlur,
onClick,
onFocus,
style,
testId
}, ref) => {
return /*#__PURE__*/React.createElement("div", {
"data-testid": testId,
onBlur: onBlur,
onClick: onClick,
onFocus: onFocus,
ref: ref
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: {
[CSS_THEME_BACKGROUND]: `var(--ds-surface-overlay, ${N0})`,
[CSS_THEME_COLOR]: `var(--ds-text, ${N900})`,
[CSS_THEME_BOX_SHADOW]: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
...style
},
className: ax(["_11q7gluh _2rkofajl _vchh1ntv _p12flti4 _c71llti4 _1pbyowjs _16qs1r44 _syazjslb _85i5pxbi _1q51pxbi _y4ti1ejb _bozg1ejb _nt751r31 _49pcglyw _1hvw1o36"])
}, typeof children === 'function' ? children() : children);
});