@atlaskit/editor-core/dist/es2019/ui/Appearance/Comment/Toolbar.js

A package contains Atlassian editor core functionality

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

import React, { useEffect, useState } 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 { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
const akEditorMenuZIndex = 500;
const akEditorToolbarKeylineHeight = 2;
const mainToolbarWrapperStyleNew = css({
  position: 'relative',
  alignItems: 'center',
  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`,
  display: 'flex',
  height: 'auto',
  backgroundColor: "var(--ds-surface, #FFFFFF)",
  boxShadow: 'none',
  paddingLeft: "var(--ds-space-250, 20px)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '> div': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
    '> div:first-of-type:not(style), > style:first-of-type + *': {
      marginLeft: 0
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
  '.block-type-btn': {
    paddingLeft: 0
  }
});

/** keep default padding for entire toolbar */
const mainToolbarWithoutLeftPadding = css({
  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`
});
const mainToolbarWithPadding = css({
  padding: `${"var(--ds-space-100, 8px)"}`
});
const mainToolbarTwoLineStylesNew = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '& > div': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
      flexDirection: 'column-reverse',
      alignItems: 'end',
      display: 'flex',
      justifyContent: 'flex-end'
    },
    /* make this more explicit for a toolbar */
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
    '> div:first-of-type': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
      [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
        '> div:nth-of-type(2)': {
          justifyContent: 'flex-end',
          display: 'flex'
        }
      }
    }
  }
});
const mainToolbarWrapperStylesVisualRefresh = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  'span svg': {
    maxWidth: '100%'
  }
});
const mainToolbarWithRadiusStyle = css({
  borderRadius: `${"var(--ds-radius-small, 3px)"} ${"var(--ds-radius-small, 3px)"} 0 0`
});
const mainToolbarRadius = css({
  borderRadius: `${"var(--ds-radius-medium, 6px)"} ${"var(--ds-radius-medium, 6px)"} 0 0`
});
const stickyToolbarWrapperStyleNew = css({
  position: 'sticky',
  paddingBottom: "var(--ds-space-100, 8px)",
  zIndex: akEditorMenuZIndex,
  transition: 'box-shadow ease-in-out 0.2s',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '&.show-keyline': {
    boxShadow: `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"}`
  }
});
const StickyToolbar = props => {
  const [top, setTop] = useState(0);

  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
  // else if offsetTop is a number set top to offsetTop
  // otherwise top is 0 as initial state
  useEffect(() => {
    var _props$externalToolba, _props$externalToolba2;
    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
      setTop(props.externalToolbarRef.current.clientHeight);
    } else {
      setTop(props.offsetTop || 0);
    }
  }, [props.externalToolbarRef, props.offsetTop]);
  return (
    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
    jsx("div", {
      css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew, props.isNewToolbarEnabled && mainToolbarWithPadding, expValEquals('platform_editor_fix_comment_border', 'isEnabled', true) && expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius, expValEquals('platform_editor_fix_comment_border', 'isEnabled', true) && !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle]
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      ,
      style: {
        top: `${top}px`
      },
      "data-testid": "ak-editor-main-toolbar"
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: 'show-keyline'
    }, props.children)
  );
};
const FixedToolbar = props =>
// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
jsx("div", {
  css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, props.isNewToolbarEnabled && mainToolbarWithoutLeftPadding, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius],
  "data-testid": "ak-editor-main-toolbar"
}, props.children);

/**
 * ED-15802: Scenarios when a sticky bar is used:
 * 1. useStickyToolbar is true
 * 2. useStickyToolbar is a DOM element
 * 3. useStickyToolbar is an object and has offsetTop key;
 */
const getStickyParameters = configuration => {
  // const isUsingStickyOffset, isHTMLElement is used so TS can properly infer types.
  const isHTMLElement = typeof configuration === 'object' && !('offsetTop' in configuration);
  const isUsingStickyOffset = typeof configuration === 'object' && 'offsetTop' in configuration;
  if (typeof configuration !== 'object') {
    return {
      externalToolbarRef: undefined,
      offsetTop: undefined
    };
  }
  if (isUsingStickyOffset) {
    return {
      offsetTop: configuration.offsetTop
    };
  }
  if (isHTMLElement) {
    return {
      externalToolbarRef: configuration
    };
  }
};
export const MainToolbar = ({
  useStickyToolbar,
  twoLineEditorToolbar,
  children,
  isNewToolbarEnabled
}) => {
  if (useStickyToolbar) {
    return jsx(StickyToolbar
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , _extends({}, getStickyParameters(useStickyToolbar), {
      twoLineEditorToolbar: twoLineEditorToolbar,
      isNewToolbarEnabled: isNewToolbarEnabled
    }), children);
  }
  return jsx(FixedToolbar, {
    twoLineEditorToolbar: twoLineEditorToolbar,
    isNewToolbarEnabled: isNewToolbarEnabled
  }, children);
};