@atlaskit/editor-plugin-card 2.6.0 → 2.6.2

package/dist/cjs/ui/LeftIconOverlay/index.js

@@ -1,199 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _reactIntlNext = require("react-intl-next");
-var _messages = require("@atlaskit/editor-common/messages");
-var _whitespace = require("@atlaskit/editor-common/whitespace");
-var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
-var _colors = require("@atlaskit/theme/colors");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _utils = require("../InlineCardOverlay/utils");
-var _excluded = ["children", "isSelected", "isVisible", "testId"];
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-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 DEBOUNCE_IN_MS = 5;
-var PADDING_IN_PX = 4;
-var ICON_WIDTH_IN_PX = 16;
-var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
-var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
-var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
-var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(_colors.N0, ")");
-var CONFIGURE_ICON_BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(_colors.N30A, ")");
-var CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR = "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")");
-var CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR = "var(--ds-background-neutral-pressed, ".concat(_colors.N60A, ")");
-var containerStyles = (0, _react2.css)({
-  position: 'relative',
-  lineHeight: 'normal'
-});
-var overlayStyles = (0, _react2.css)({
-  position: 'absolute',
-  // Vertically align. Required for overlay to be centered inside the inline link (the inline lozenge is slightly larger than the designs)
-  transform: 'translate(0%, -50%)',
-  top: '50%',
-  // Set default styling to be invisible but available in dom for width calculation.
-  visibility: 'hidden',
-  overflow: 'hidden',
-  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
-  zIndex: 2
-});
-var showOverlayStyles = (0, _react2.css)({
-  visibility: 'visible'
-});
-var iconStyles = (0, _react2.css)({
-  background: CONFIGURE_ICON_BACKGROUND_COLOR,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    background: CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':active': {
-    background: CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  span: {
-    // If PreferencesIcon left as inline-block (default), height is incorrect and border radius is clipped when parent element
-    // uses 1lh height (rather than 100%)
-    display: 'block'
-  },
-  // Note: The spec recomends 3px, but the icon doesn't fit left of the lozenge text if this size
-  padding: "var(--ds-space-025, 2px)",
-  borderRadius: '3px'
-});
-var iconAndLabelStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  height: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '2.5px',
-  // Margin from very left of entire card (inclusive of blue)
-
-  // This exists so if we set a semi-transparent background above, the provider icon doesn't show
-  background: SMART_LINK_BACKGROUND_COLOR,
-  // Ensure we don't have a white gap when the inline-card is in an active state
-  borderRadius: '3px',
-  color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")")
-});
-var LeftIconOverlay = function LeftIconOverlay(_ref) {
-  var children = _ref.children,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showOverlay = _useState2[0],
-    setShowOverlay = _useState2[1];
-  var _useState3 = (0, _react.useState)(undefined),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    availableWidth = _useState4[0],
-    setAvailableWidth = _useState4[1];
-  var containerRef = (0, _react.useRef)(null);
-
-  // TODO EDM-9853: Use availableWidth for small link edge case
-  // Calculation logic will need to updated.
-  availableWidth;
-  var setVisibility = (0, _react.useCallback)(function () {
-    if (!containerRef.current) {
-      return;
-    }
-    var marker = (0, _utils.getChildElement)(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
-    if (!marker) {
-      return;
-    }
-    try {
-      var oneLine = (0, _utils.isOneLine)(containerRef.current, marker);
-
-      // Get the width of the available space to display overlay.
-      // This is the width of the inline link itself. If the inline
-      // is wrapped to the next line, this is width of the last line.
-      var _availableWidth = (0, _utils.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
-      // Always leave at least the icon visible
-      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
-      setAvailableWidth(_availableWidth);
-      var canShowOverlay = !isSelected;
-      setShowOverlay(canShowOverlay);
-    } catch (_unused) {
-      // If something goes wrong, hide the overlay all together.
-      setShowOverlay(false);
-    }
-  }, [isSelected]);
-  (0, _react.useLayoutEffect)(function () {
-    if (!containerRef.current) {
-      return;
-    }
-    if (isVisible) {
-      setVisibility();
-    }
-  }, [setVisibility, isVisible]);
-  (0, _react.useEffect)(function () {
-    var _containerRef$current;
-    // Find the closest block parent to observe size change
-    var parent = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(TEXT_NODE_SELECTOR);
-    if (!parent) {
-      return;
-    }
-    var updateOverlay = (0, _debounce.default)(function (entries) {
-      var _entries$;
-      if (!isVisible) {
-        return;
-      }
-      var size = entries === null || entries === void 0 || (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize) === null || _entries$ === void 0 || (_entries$ = _entries$[0]) === null || _entries$ === void 0 ? void 0 : _entries$.inlineSize;
-      if (!size) {
-        return;
-      }
-      setVisibility();
-    }, DEBOUNCE_IN_MS);
-    var observer = new ResizeObserver(updateOverlay);
-    observer.observe(parent);
-    return function () {
-      observer.disconnect();
-    };
-  }, [isVisible, setVisibility]);
-  var intl = (0, _reactIntlNext.useIntl)();
-  var configureLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
-  return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
-    css: containerStyles,
-    ref: containerRef
-  }), isVisible && (0, _react2.jsx)(_tooltip.default, {
-    content: configureLinkLabel
-  }, function (tooltipProps) {
-    return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
-      "aria-hidden": "true",
-      className: OVERLAY_MARKER_CLASSNAME
-    }, _whitespace.ZERO_WIDTH_JOINER), (0, _react2.jsx)("span", {
-      css: [overlayStyles, showOverlay && showOverlayStyles],
-      tabIndex: -1,
-      "data-testid": testId
-    }, (0, _react2.jsx)("span", (0, _extends2.default)({}, tooltipProps, {
-      css: iconAndLabelStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: ICON_AND_LABEL_CLASSNAME
-    }), (0, _react2.jsx)("span", {
-      css: iconStyles
-    }, (0, _react2.jsx)(_preferences.default, {
-      label: configureLinkLabel,
-      size: 'small',
-      testId: "".concat(testId, "-icon")
-    })))));
-  }), children);
-};
-var _default = exports.default = LeftIconOverlay;

package/dist/es2019/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -1,47 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/new';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import { cardMessages as messages } from '@atlaskit/editor-common/messages';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-const ConfigureLinkDropdown = props => {
-  const {
-    testId
-  } = props;
-  const intl = useIntl();
-  const configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
-  const goToLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    trigger: ({
-      triggerRef,
-      ...props
-    }) => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-      spacing: 'none',
-      ref: triggerRef
-    }), /*#__PURE__*/React.createElement("span", {
-      style: {
-        padding: `0 ${"var(--ds-space-025, 2px)"}`
-      }
-    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      label: configureLinkLabel,
-      size: 'small',
-      testId: `${testId}-icon`
-    }))),
-    spacing: 'compact',
-    placement: 'bottom-start'
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
-      label: goToLinkLabel,
-      size: 'small'
-    })
-  }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
-      label: configureLinkLabel,
-      size: 'small'
-    })
-  }, configureLinkLabel)));
-};
-export default ConfigureLinkDropdown;

package/dist/es2019/ui/LeftIconOverlay/index.js

@@ -1,177 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import debounce from 'lodash/debounce';
-import { useIntl } from 'react-intl-next';
-import { cardMessages as messages } from '@atlaskit/editor-common/messages';
-import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
-import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N0, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
-import Tooltip from '@atlaskit/tooltip';
-import { getChildElement, getInlineCardAvailableWidth, isOneLine } from '../InlineCardOverlay/utils';
-const DEBOUNCE_IN_MS = 5;
-const PADDING_IN_PX = 4;
-const ICON_WIDTH_IN_PX = 16;
-const ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
-const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
-const TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
-const SMART_LINK_BACKGROUND_COLOR = `var(--ds-surface-raised, ${N0})`;
-const CONFIGURE_ICON_BACKGROUND_COLOR = `var(--ds-background-neutral, ${N30A})`;
-const CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR = `var(--ds-background-neutral-hovered, ${N40A})`;
-const CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR = `var(--ds-background-neutral-pressed, ${N60A})`;
-const containerStyles = css({
-  position: 'relative',
-  lineHeight: 'normal'
-});
-const overlayStyles = css({
-  position: 'absolute',
-  // Vertically align. Required for overlay to be centered inside the inline link (the inline lozenge is slightly larger than the designs)
-  transform: 'translate(0%, -50%)',
-  top: '50%',
-  // Set default styling to be invisible but available in dom for width calculation.
-  visibility: 'hidden',
-  overflow: 'hidden',
-  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
-  zIndex: 2
-});
-const showOverlayStyles = css({
-  visibility: 'visible'
-});
-const iconStyles = css({
-  background: CONFIGURE_ICON_BACKGROUND_COLOR,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    background: CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':active': {
-    background: CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  span: {
-    // If PreferencesIcon left as inline-block (default), height is incorrect and border radius is clipped when parent element
-    // uses 1lh height (rather than 100%)
-    display: 'block'
-  },
-  // Note: The spec recomends 3px, but the icon doesn't fit left of the lozenge text if this size
-  padding: "var(--ds-space-025, 2px)",
-  borderRadius: '3px'
-});
-const iconAndLabelStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  height: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '2.5px',
-  // Margin from very left of entire card (inclusive of blue)
-
-  // This exists so if we set a semi-transparent background above, the provider icon doesn't show
-  background: SMART_LINK_BACKGROUND_COLOR,
-  // Ensure we don't have a white gap when the inline-card is in an active state
-  borderRadius: '3px',
-  color: `var(--ds-text-subtlest, ${N700})`
-});
-const LeftIconOverlay = ({
-  children,
-  isSelected = false,
-  isVisible = false,
-  testId = 'inline-card-overlay',
-  ...props
-}) => {
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [availableWidth, setAvailableWidth] = useState(undefined);
-  const containerRef = useRef(null);
-
-  // TODO EDM-9853: Use availableWidth for small link edge case
-  // Calculation logic will need to updated.
-  availableWidth;
-  const setVisibility = useCallback(() => {
-    if (!containerRef.current) {
-      return;
-    }
-    const marker = getChildElement(containerRef, `.${OVERLAY_MARKER_CLASSNAME}`);
-    if (!marker) {
-      return;
-    }
-    try {
-      const oneLine = isOneLine(containerRef.current, marker);
-
-      // Get the width of the available space to display overlay.
-      // This is the width of the inline link itself. If the inline
-      // is wrapped to the next line, this is width of the last line.
-      const availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
-      // Always leave at least the icon visible
-      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
-      setAvailableWidth(availableWidth);
-      const canShowOverlay = !isSelected;
-      setShowOverlay(canShowOverlay);
-    } catch {
-      // If something goes wrong, hide the overlay all together.
-      setShowOverlay(false);
-    }
-  }, [isSelected]);
-  useLayoutEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
-    if (isVisible) {
-      setVisibility();
-    }
-  }, [setVisibility, isVisible]);
-  useEffect(() => {
-    var _containerRef$current;
-    // Find the closest block parent to observe size change
-    const parent = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(TEXT_NODE_SELECTOR);
-    if (!parent) {
-      return;
-    }
-    const updateOverlay = debounce(entries => {
-      var _entries$, _entries$$contentBoxS, _entries$$contentBoxS2;
-      if (!isVisible) {
-        return;
-      }
-      const size = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : (_entries$$contentBoxS = _entries$.contentBoxSize) === null || _entries$$contentBoxS === void 0 ? void 0 : (_entries$$contentBoxS2 = _entries$$contentBoxS[0]) === null || _entries$$contentBoxS2 === void 0 ? void 0 : _entries$$contentBoxS2.inlineSize;
-      if (!size) {
-        return;
-      }
-      setVisibility();
-    }, DEBOUNCE_IN_MS);
-    const observer = new ResizeObserver(updateOverlay);
-    observer.observe(parent);
-    return () => {
-      observer.disconnect();
-    };
-  }, [isVisible, setVisibility]);
-  const intl = useIntl();
-  const configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
-  return jsx("span", _extends({}, props, {
-    css: containerStyles,
-    ref: containerRef
-  }), isVisible && jsx(Tooltip, {
-    content: configureLinkLabel
-  }, tooltipProps => jsx(React.Fragment, null, jsx("span", {
-    "aria-hidden": "true",
-    className: OVERLAY_MARKER_CLASSNAME
-  }, ZERO_WIDTH_JOINER), jsx("span", {
-    css: [overlayStyles, showOverlay && showOverlayStyles],
-    tabIndex: -1,
-    "data-testid": testId
-  }, jsx("span", _extends({}, tooltipProps, {
-    css: iconAndLabelStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: ICON_AND_LABEL_CLASSNAME
-  }), jsx("span", {
-    css: iconStyles
-  }, jsx(PreferencesIcon, {
-    label: configureLinkLabel,
-    size: 'small',
-    testId: `${testId}-icon`
-  })))))), children);
-};
-export default LeftIconOverlay;

package/dist/esm/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -1,48 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["triggerRef"];
-import React from 'react';
-import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/new';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import { cardMessages as messages } from '@atlaskit/editor-common/messages';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
-  var testId = props.testId;
-  var intl = useIntl();
-  var configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
-  var goToLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-        props = _objectWithoutProperties(_ref, _excluded);
-      return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-        spacing: 'none',
-        ref: triggerRef
-      }), /*#__PURE__*/React.createElement("span", {
-        style: {
-          padding: "0 ".concat("var(--ds-space-025, 2px)")
-        }
-      }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        label: configureLinkLabel,
-        size: 'small',
-        testId: "".concat(testId, "-icon")
-      })));
-    },
-    spacing: 'compact',
-    placement: 'bottom-start'
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
-      label: goToLinkLabel,
-      size: 'small'
-    })
-  }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
-    elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
-      label: configureLinkLabel,
-      size: 'small'
-    })
-  }, configureLinkLabel)));
-};
-export default ConfigureLinkDropdown;

package/dist/esm/ui/LeftIconOverlay/index.js

@@ -1,190 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "isSelected", "isVisible", "testId"];
-/* eslint-disable @atlaskit/design-system/no-nested-styles */
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import debounce from 'lodash/debounce';
-import { useIntl } from 'react-intl-next';
-import { cardMessages as messages } from '@atlaskit/editor-common/messages';
-import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
-import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N0, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
-import Tooltip from '@atlaskit/tooltip';
-import { getChildElement, getInlineCardAvailableWidth, isOneLine } from '../InlineCardOverlay/utils';
-var DEBOUNCE_IN_MS = 5;
-var PADDING_IN_PX = 4;
-var ICON_WIDTH_IN_PX = 16;
-var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
-var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
-var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
-var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(N0, ")");
-var CONFIGURE_ICON_BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(N30A, ")");
-var CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR = "var(--ds-background-neutral-hovered, ".concat(N40A, ")");
-var CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR = "var(--ds-background-neutral-pressed, ".concat(N60A, ")");
-var containerStyles = css({
-  position: 'relative',
-  lineHeight: 'normal'
-});
-var overlayStyles = css({
-  position: 'absolute',
-  // Vertically align. Required for overlay to be centered inside the inline link (the inline lozenge is slightly larger than the designs)
-  transform: 'translate(0%, -50%)',
-  top: '50%',
-  // Set default styling to be invisible but available in dom for width calculation.
-  visibility: 'hidden',
-  overflow: 'hidden',
-  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
-  zIndex: 2
-});
-var showOverlayStyles = css({
-  visibility: 'visible'
-});
-var iconStyles = css({
-  background: CONFIGURE_ICON_BACKGROUND_COLOR,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    background: CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':active': {
-    background: CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  span: {
-    // If PreferencesIcon left as inline-block (default), height is incorrect and border radius is clipped when parent element
-    // uses 1lh height (rather than 100%)
-    display: 'block'
-  },
-  // Note: The spec recomends 3px, but the icon doesn't fit left of the lozenge text if this size
-  padding: "var(--ds-space-025, 2px)",
-  borderRadius: '3px'
-});
-var iconAndLabelStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  height: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '2.5px',
-  // Margin from very left of entire card (inclusive of blue)
-
-  // This exists so if we set a semi-transparent background above, the provider icon doesn't show
-  background: SMART_LINK_BACKGROUND_COLOR,
-  // Ensure we don't have a white gap when the inline-card is in an active state
-  borderRadius: '3px',
-  color: "var(--ds-text-subtlest, ".concat(N700, ")")
-});
-var LeftIconOverlay = function LeftIconOverlay(_ref) {
-  var children = _ref.children,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-    _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showOverlay = _useState2[0],
-    setShowOverlay = _useState2[1];
-  var _useState3 = useState(undefined),
-    _useState4 = _slicedToArray(_useState3, 2),
-    availableWidth = _useState4[0],
-    setAvailableWidth = _useState4[1];
-  var containerRef = useRef(null);
-
-  // TODO EDM-9853: Use availableWidth for small link edge case
-  // Calculation logic will need to updated.
-  availableWidth;
-  var setVisibility = useCallback(function () {
-    if (!containerRef.current) {
-      return;
-    }
-    var marker = getChildElement(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
-    if (!marker) {
-      return;
-    }
-    try {
-      var oneLine = isOneLine(containerRef.current, marker);
-
-      // Get the width of the available space to display overlay.
-      // This is the width of the inline link itself. If the inline
-      // is wrapped to the next line, this is width of the last line.
-      var _availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
-      // Always leave at least the icon visible
-      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
-      setAvailableWidth(_availableWidth);
-      var canShowOverlay = !isSelected;
-      setShowOverlay(canShowOverlay);
-    } catch (_unused) {
-      // If something goes wrong, hide the overlay all together.
-      setShowOverlay(false);
-    }
-  }, [isSelected]);
-  useLayoutEffect(function () {
-    if (!containerRef.current) {
-      return;
-    }
-    if (isVisible) {
-      setVisibility();
-    }
-  }, [setVisibility, isVisible]);
-  useEffect(function () {
-    var _containerRef$current;
-    // Find the closest block parent to observe size change
-    var parent = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(TEXT_NODE_SELECTOR);
-    if (!parent) {
-      return;
-    }
-    var updateOverlay = debounce(function (entries) {
-      var _entries$;
-      if (!isVisible) {
-        return;
-      }
-      var size = entries === null || entries === void 0 || (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize) === null || _entries$ === void 0 || (_entries$ = _entries$[0]) === null || _entries$ === void 0 ? void 0 : _entries$.inlineSize;
-      if (!size) {
-        return;
-      }
-      setVisibility();
-    }, DEBOUNCE_IN_MS);
-    var observer = new ResizeObserver(updateOverlay);
-    observer.observe(parent);
-    return function () {
-      observer.disconnect();
-    };
-  }, [isVisible, setVisibility]);
-  var intl = useIntl();
-  var configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
-  return jsx("span", _extends({}, props, {
-    css: containerStyles,
-    ref: containerRef
-  }), isVisible && jsx(Tooltip, {
-    content: configureLinkLabel
-  }, function (tooltipProps) {
-    return jsx(React.Fragment, null, jsx("span", {
-      "aria-hidden": "true",
-      className: OVERLAY_MARKER_CLASSNAME
-    }, ZERO_WIDTH_JOINER), jsx("span", {
-      css: [overlayStyles, showOverlay && showOverlayStyles],
-      tabIndex: -1,
-      "data-testid": testId
-    }, jsx("span", _extends({}, tooltipProps, {
-      css: iconAndLabelStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: ICON_AND_LABEL_CLASSNAME
-    }), jsx("span", {
-      css: iconStyles
-    }, jsx(PreferencesIcon, {
-      label: configureLinkLabel,
-      size: 'small',
-      testId: "".concat(testId, "-icon")
-    })))));
-  }), children);
-};
-export default LeftIconOverlay;

package/dist/types/ui/LeftIconOverlay/ConfigureLinkDropdown/index.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export type SmallLinkDropdownProps = {
-    testId: string;
-};
-declare const ConfigureLinkDropdown: (props: SmallLinkDropdownProps) => JSX.Element;
-export default ConfigureLinkDropdown;