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

A package contains Atlassian editor core functionality

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContextPanelWrapperEmotion = exports.ContextPanelContentEmotion = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
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.
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
var ANIM_SPEED_MS = 500;
var panelHidden = (0, _react2.css)({
  width: 0
});
var panel = (0, _react2.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(_editorSharedStyles.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(_editorSharedStyles.akEditorSwoopCubicBezier),
  overflow: 'hidden',
  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
});
var disablePanelAnimation = (0, _react2.css)({
  transition: 'none'
});
var content = (0, _react2.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(_editorSharedStyles.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(_editorSharedStyles.akEditorContextPanelWidth, "px"),
  height: '100%',
  overflowY: 'auto'
});
var paddingStyles = (0, _react2.css)({
  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
});
var ContextPanelWrapperEmotion = exports.ContextPanelWrapperEmotion = function ContextPanelWrapperEmotion(_ref) {
  var children = _ref.children,
    customWidth = _ref.customWidth,
    visible = _ref.visible,
    disableAnimation = _ref.disableAnimation,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var customPanelWidthStyles = (0, _react.useMemo)(function () {
    return customWidth ? (0, _react2.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 (0, _react2.jsx)("div", (0, _extends2.default)({
    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);
};
var ContextPanelContentEmotion = exports.ContextPanelContentEmotion = function ContextPanelContentEmotion(_ref2) {
  var children = _ref2.children,
    customWidth = _ref2.customWidth,
    visible = _ref2.visible,
    disableAnimation = _ref2.disableAnimation,
    hasPadding = _ref2.hasPadding,
    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
  var customPanelWidthStyles = (0, _react.useMemo)(function () {
    return customWidth ? (0, _react2.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 (0, _react2.jsx)("div", (0, _extends2.default)({
    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);
};