@atlaskit/editor-common/dist/cjs/ui/Expand/index.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.sharedExpandStyles = exports.messages = exports.expandLayoutWrapperStyle = exports.ExpandLayoutWrapperWithRef = exports.ExpandIconWrapper = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _colors = require("@atlaskit/theme/colors");
var _constants = require("@atlaskit/theme/constants");
var _excluded = ["children"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
/** @jsx jsx */
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
  collapseNode: {
    id: 'fabric.editor.collapseNode',
    defaultMessage: 'Collapse content',
    description: 'Collapse the node'
  },
  expandDefaultTitle: {
    id: 'fabric.editor.expandDefaultTitle',
    defaultMessage: 'Click here to expand...',
    description: 'Placeholder text for an expand node'
  },
  expandNode: {
    id: 'fabric.editor.expandNode',
    defaultMessage: 'Expand content',
    description: 'Expand the node'
  },
  expandPlaceholderText: {
    id: 'fabric.editor.expandPlaceholder',
    defaultMessage: 'Give this expand a title...',
    description: 'Placeholder text for an expand node title input field'
  }
});
var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
var EXPAND_SELECTED_BACKGROUND = "var(--ds-surface, rgba(255, 255, 255, 0.6))";
var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, ".concat(_colors.B300, ")");
var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, ".concat(_colors.N40A, ")");
var ExpandIconWrapper = exports.ExpandIconWrapper = function ExpandIconWrapper(_ref) {
  var children = _ref.children,
    expanded = _ref.expanded;
  return (0, _react2.jsx)("div", {
    css: function css() {
      return expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle();
    }
  }, children);
};
var expandIconWrapperStyle = function expandIconWrapperStyle() {
  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), "var(--ds-icon, ".concat(_colors.N90, ")"), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
};
var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
var expandLayoutWrapperStyle = exports.expandLayoutWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
var ExpandLayoutWrapperWithRef = exports.ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var children = props.children,
    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
  return (0, _react2.jsx)("div", (0, _extends2.default)({
    css: expandLayoutWrapperStyle
  }, rest, {
    ref: ref
  }), children);
});
var containerStyles = function containerStyles(styleProps) {
  var expanded = styleProps.expanded,
    focused = styleProps.focused;
  var marginTop = "var(--ds-space-050, 0.25rem)";
  var marginBottom = 0;
  // Only only these margins if the expand isn't editable
  // and is the root level expand.
  var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
  var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
  return function () {
    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", ";\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND, margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
  };
};
var contentStyles = function contentStyles(styleProps) {
  return function () {
    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    margin-left: ", ";\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
  };
};
var titleInputStyles = function titleInputStyles() {
  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, "var(--ds-text-subtlest, ".concat(_colors.N200A, ")"), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
};
var titleContainerStyles = function titleContainerStyles() {
  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-text-subtle, ".concat(_colors.N300A, ")"));
};
var sharedExpandStyles = exports.sharedExpandStyles = {
  titleInputStyles: titleInputStyles,
  titleContainerStyles: titleContainerStyles,
  containerStyles: containerStyles,
  contentStyles: contentStyles
};