@atlaskit/editor-core/dist/esm/ui/ContextPanel/index-emotion.js

A package contains Atlassian editor core functionality

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
  _excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
/**
 * @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';
var ANIM_SPEED_MS = 500;
var panelHidden = css({
  width: 0
});
var 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: "".concat(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 ".concat(ANIM_SPEED_MS, "ms ").concat(akEditorSwoopCubicBezier),
  overflow: 'hidden',
  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
});
var disablePanelAnimation = css({
  transition: 'none'
});
var 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 ".concat(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: "".concat(akEditorContextPanelWidth, "px"),
  height: '100%',
  overflowY: 'auto'
});
var paddingStyles = css({
  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
});
export var ContextPanelWrapperEmotion = function ContextPanelWrapperEmotion(_ref) {
  var children = _ref.children,
    customWidth = _ref.customWidth,
    visible = _ref.visible,
    disableAnimation = _ref.disableAnimation,
    rest = _objectWithoutProperties(_ref, _excluded);
  var customPanelWidthStyles = useMemo(function () {
    return customWidth ? css({
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
      width: "".concat(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 var ContextPanelContentEmotion = function ContextPanelContentEmotion(_ref2) {
  var children = _ref2.children,
    customWidth = _ref2.customWidth,
    visible = _ref2.visible,
    disableAnimation = _ref2.disableAnimation,
    hasPadding = _ref2.hasPadding,
    rest = _objectWithoutProperties(_ref2, _excluded2);
  var customPanelWidthStyles = useMemo(function () {
    return customWidth ? css({
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
      width: "".concat(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);
};