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

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

import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import React, { forwardRef } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { defineMessages } from 'react-intl-next';
import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
export const messages = 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'
  }
});
export const ExpandIconWrapper = ({
  children,
  expanded
}) => {
  return jsx("div", {
    css: () => expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle()
  }, children);
};
const expandIconWrapperStyle = () => css({
  cursor: 'pointer',
  display: 'flex',
  color: "var(--ds-icon, #44546F)",
  borderRadius: "var(--ds-border-radius-100, 4px)",
  width: '24px',
  height: '24px',
  '&:hover': {
    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
  },
  // 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 ${akEditorSwoopCubicBezier}`
  }
});
const 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 const expandLayoutWrapperStyle = css({
  width: "var(--ds-space-300, 24px)",
  height: "var(--ds-space-300, 24px)"
});
export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(props, ref) => {
  const {
    children,
    ...rest
  } = props;
  return (
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    jsx("div", _extends({
      css: expandLayoutWrapperStyle
    }, rest, {
      ref: ref
    }), children)
  );
});