@atlaskit/editor-plugin-card 2.6.1 → 2.6.3

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/EditToolbarButton.d.ts

@@ -1,18 +0,0 @@
-import { jsx } from '@emotion/react';
-import { type IntlShape } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CardContext } from '@atlaskit/link-provider';
-import { type CardType } from '../types';
-export interface EditDatasourceToolbarButtonProps {
-    datasourceId?: string;
-    intl: IntlShape;
-    onLinkEditClick: Command;
-    editorAnalyticsApi?: EditorAnalyticsAPI;
-    url?: string;
-    editorView?: EditorView;
-    cardContext?: CardContext;
-    currentAppearance?: CardType;
-}
-export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;

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;

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

@@ -1,10 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-export type LeftIconOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
-    isSelected?: boolean;
-    isVisible?: boolean;
-    testId?: string;
-};
-declare const LeftIconOverlay: ({ children, isSelected, isVisible, testId, ...props }: React.PropsWithChildren<LeftIconOverlayProps>) => jsx.JSX.Element;
-export default LeftIconOverlay;

package/dist/types-ts4.5/ui/EditToolbarButton.d.ts

@@ -1,18 +0,0 @@
-import { jsx } from '@emotion/react';
-import { type IntlShape } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CardContext } from '@atlaskit/link-provider';
-import { type CardType } from '../types';
-export interface EditDatasourceToolbarButtonProps {
-    datasourceId?: string;
-    intl: IntlShape;
-    onLinkEditClick: Command;
-    editorAnalyticsApi?: EditorAnalyticsAPI;
-    url?: string;
-    editorView?: EditorView;
-    cardContext?: CardContext;
-    currentAppearance?: CardType;
-}
-export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;

package/dist/types-ts4.5/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;

package/dist/types-ts4.5/ui/LeftIconOverlay/index.d.ts

@@ -1,10 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-export type LeftIconOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
-    isSelected?: boolean;
-    isVisible?: boolean;
-    testId?: string;
-};
-declare const LeftIconOverlay: ({ children, isSelected, isVisible, testId, ...props }: React.PropsWithChildren<LeftIconOverlayProps>) => jsx.JSX.Element;
-export default LeftIconOverlay;