@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
82 lines • 3.58 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
/**
* Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
* Used via `componentWithCondition` in `index.tsx`.
*
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
*/
import { useMemo } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
import { css, jsx } from '@emotion/react';
import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
const ANIM_SPEED_MS = 500;
const panelHidden = css({
width: 0
});
const panel = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: `${akEditorContextPanelWidth}px`,
height: '100%',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
transition: `width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
overflow: 'hidden',
boxShadow: `inset 2px 0 0 0 ${"var(--ds-border, #0B120E24)"}`
});
const disablePanelAnimation = css({
transition: 'none'
});
const content = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
transition: `width 600ms ${akEditorSwoopCubicBezier}`,
boxSizing: 'border-box',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: `${akEditorContextPanelWidth}px`,
height: '100%',
overflowY: 'auto'
});
const paddingStyles = css({
padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`
});
export const ContextPanelWrapperEmotion = ({
children,
customWidth,
visible,
disableAnimation,
...rest
}) => {
const customPanelWidthStyles = useMemo(() => customWidth ? css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
width: `${customWidth}px`,
overflowX: 'hidden'
}) : undefined, [customWidth]);
return jsx("div", _extends({
css: [panel,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
// eslint-disable-next-line react/jsx-props-no-spreading
}, rest), children);
};
export const ContextPanelContentEmotion = ({
children,
customWidth,
visible,
disableAnimation,
hasPadding,
...rest
}) => {
const customPanelWidthStyles = useMemo(() => customWidth ? css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
width: `${customWidth}px`,
overflowX: 'hidden'
}) : undefined, [customWidth]);
return jsx("div", _extends({
css: [content, hasPadding && paddingStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
// eslint-disable-next-line react/jsx-props-no-spreading
}, rest), children);
};