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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children"];
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import React, { forwardRef } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import { defineMessages } from 'react-intl';
import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
export var messages = defineMessages({
  loading: {
    id: 'fabric.editor.expand.loading',
    defaultMessage: 'Loading...',
    description: 'Text shown inside an expand node while its content is being loaded, indicating to the user that data is still being fetched.'
  },
  collapseNode: {
    id: 'fabric.editor.collapseNode',
    defaultMessage: 'Collapse content',
    description: 'The text is shown as a tooltip on a button when the user clicks to collapse an expand node in the editor, hiding its content.'
  },
  expandDefaultTitle: {
    id: 'fabric.editor.expandDefaultTitle',
    defaultMessage: 'Click here to expand...',
    description: 'Placeholder text shown in the title field of an expand node when no title has been entered, prompting the user to click and expand the content.'
  },
  expandNode: {
    id: 'fabric.editor.expandNode',
    defaultMessage: 'Expand content',
    description: 'The text is shown as a tooltip on a button when the user clicks to expand a collapsed expand node in the editor, revealing its content.'
  },
  expandPlaceholderText: {
    id: 'fabric.editor.expandPlaceholder',
    defaultMessage: 'Give this expand a title...',
    description: 'Placeholder text for an expand node title input field'
  },
  expandArialabel: {
    id: 'fabric.editor.expandAriaLabel',
    defaultMessage: 'Give this expand a title',
    description: 'aria label for an expand node title input field'
  },
  expandBodyAriaLabel: {
    id: 'fabric.editor.expandBodyAriaLabel',
    defaultMessage: 'Expand body content',
    description: 'Aria label for the body content of an expand node'
  }
});
export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
  var children = _ref.children,
    expanded = _ref.expanded;
  return jsx("div", {
    css: function css() {
      return expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle();
    }
  }, children);
};
var expandIconWrapperStyle = function expandIconWrapperStyle() {
  return css({
    cursor: 'pointer',
    display: 'flex',
    color: "var(--ds-icon, #292A2E)",
    borderRadius: "var(--ds-radius-small, 4px)",
    width: '24px',
    height: '24px',
    '&:hover': {
      background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    svg: {
      // 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: "transform 0.2s ".concat(akEditorSwoopCubicBezier)
    }
  });
};
var expandIconWrapperExpandedStyle = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  svg: {
    transform: 'rotate(90deg)'
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var expandLayoutWrapperStyle = css({
  width: "var(--ds-space-300, 24px)",
  height: "var(--ds-space-300, 24px)"
});
export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (_ref2, ref) {
  var children = _ref2.children,
    otherProps = _objectWithoutProperties(_ref2, _excluded);
  return jsx("div", _extends({
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    css: expandLayoutWrapperStyle,
    ref: ref
    // eslint-disable-next-line react/jsx-props-no-spreading -- Spreading otherProps to pass through HTML attributes (aria-*, data-*, event handlers, etc.) to the native div element
  }, otherProps), children);
});