@atlaskit/editor-plugin-card 2.0.3 → 2.0.5

package/dist/esm/ui/EditToolbarButton.js

@@ -4,7 +4,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
@@ -16,19 +16,20 @@ import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 var dropdownExpandContainer = css({
   margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
 });
-var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
-  var cardContext = _ref.cardContext,
-    intl = _ref.intl,
-    editorAnalyticsApi = _ref.editorAnalyticsApi,
-    url = _ref.url,
-    editorView = _ref.editorView,
-    onLinkEditClick = _ref.onLinkEditClick;
-  var _useFetchDatasourceIn = useFetchDatasourceInfo({
-      isRegularCardNode: true,
-      url: url,
-      cardContext: cardContext
-    }),
-    datasourceId = _useFetchDatasourceIn.datasourceId;
+var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
+  var _response$datasourceI;
+  var url = props.url,
+    cardContext = props.cardContext,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  var response = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url: url,
+    cardContext: cardContext
+  });
+  var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -53,73 +54,104 @@ var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
   var onEditLink = useCallback(function () {
     dispatchCommand(onLinkEditClick);
   }, [dispatchCommand, onLinkEditClick]);
-  var shouldFallbackToEditButton = useMemo(function () {
+  var editVariant = useMemo(function () {
+    var hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
-      return true;
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
     }
-    if (url) {
+    if (hasUrl) {
       var _cardContext$store, _urlState$error;
       var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
       if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
-        return true;
+        return 'edit-link';
       }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
     }
-    return false;
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   var onEditDatasource = useCallback(function () {
     if (datasourceId) {
       dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
     }
   }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
-  if (shouldFallbackToEditButton) {
-    return jsx(Button, {
-      testId: "edit-link",
-      onClick: onEditLink
-    }, jsx(FormattedMessage, linkToolbarMessages.editLink));
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, jsx(FormattedMessage, linkToolbarMessages.editLink)), jsx(Separator, null));
+      }
+    case 'edit-datasource':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, jsx(FormattedMessage, linkToolbarMessages.editDatasourceStandalone)), jsx(Separator, null));
+      }
+    case 'edit-dropdown':
+      {
+        var trigger = jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: jsx("span", {
+            css: dropdownExpandContainer
+          }, jsx(ExpandIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, jsx(FormattedMessage, messages.editDropdownTriggerTitle)), jsx(Separator, null));
+        return jsx(Flex, {
+          ref: containerRef
+        }, jsx(UiDropdown, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: ArrowKeyNavigationType.MENU
+          }
+        }, jsx(ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
   }
-  var trigger = jsx(Button, {
-    testId: "edit-dropdown-trigger",
-    iconAfter: jsx("span", {
-      css: dropdownExpandContainer
-    }, jsx(ExpandIcon, {
-      label: intl.formatMessage(messages.editDropdownTriggerTitle)
-    })),
-    onClick: toggleOpen,
-    selected: isOpen,
-    disabled: false,
-    ariaHasPopup: true
-  }, jsx(FormattedMessage, messages.editDropdownTriggerTitle));
-  return jsx(Flex, {
-    ref: containerRef
-  }, jsx(UiDropdown, {
-    mountTo: containerRef.current,
-    isOpen: isOpen,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
-    trigger: trigger,
-    scrollableElement: containerRef.current,
-    arrowKeyNavigationProviderOptions: {
-      type: ArrowKeyNavigationType.MENU
-    }
-  }, jsx(ButtonItem, {
-    key: "edit.link",
-    onClick: onEditLink,
-    testId: "edit-dropdown-edit-link-item"
-  }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
-    key: "edit.datasource",
-    onClick: onEditDatasource,
-    testId: "edit-dropdown-edit-datasource-item"
-  }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
 };
-export var EditToolbarButton = function EditToolbarButton(_ref2) {
-  var intl = _ref2.intl,
-    editorAnalyticsApi = _ref2.editorAnalyticsApi,
-    url = _ref2.url,
-    editorView = _ref2.editorView,
-    onLinkEditClick = _ref2.onLinkEditClick;
-  return jsx(CardContextProvider, null, function (_ref3) {
-    var cardContext = _ref3.cardContext;
-    return jsx(EditButtonWithCardContext, {
+export var EditToolbarButton = function EditToolbarButton(props) {
+  var datasourceId = props.datasourceId,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    url = props.url,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  return jsx(CardContextProvider, null, function (_ref) {
+    var cardContext = _ref.cardContext;
+    return jsx(EditToolbarButtonWithCardContext, {
+      datasourceId: datasourceId,
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -11,6 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
@@ -173,7 +174,7 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
         editorView: editorView,
         editorAnalyticsApi: editorAnalyticsApi,
         inputMethod: INPUT_METHOD.FLOATING_TB
-      }));
+      }), /*#__PURE__*/React.createElement(Separator, null));
     }
   }]);
   return HyperlinkToolbarAppearance;

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

@@ -33,9 +33,11 @@ var getGradientWithColor = function getGradientWithColor(color) {
 var containerStyles = css({
   position: 'relative',
   lineHeight: 'normal',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':active': (_active = {}, _defineProperty(_active, ".".concat(ICON_AND_LABEL_CLASSNAME), {
     background: SMART_LINK_ACTIVE_COLOR
   }), _defineProperty(_active, ".".concat(OVERLAY_GRADIENT_CLASSNAME), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
   }), _active)
 });
@@ -62,6 +64,7 @@ var showOverlayStyles = css({
 });
 var iconStyles = css({
   // Position icon in the middle
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     display: 'flex'
   }
@@ -92,6 +95,7 @@ var overflowingContainerStyles = css({
 var gradientStyles = css({
   width: '2.5rem',
   height: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
 });
 var InlineCardOverlay = function InlineCardOverlay(_ref) {

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

@@ -20,8 +20,10 @@ import { getDatasource, isDatasourceTableLayout } from './utils';
 var toolbarButtonWrapperStyles = css({
   background: "".concat("var(--ds-background-neutral, ".concat(N20A, ")")),
   color: "".concat("var(--ds-icon, ".concat(N300, ")")),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     background: "".concat("var(--ds-background-neutral-hovered, ".concat(B300, ")")),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     color: "var(--ds-icon, white)".concat(" !important")
   }
 });

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

@@ -2,13 +2,13 @@ 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";
+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();
@@ -19,7 +19,7 @@ var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
       var triggerRef = _ref.triggerRef,
         props = _objectWithoutProperties(_ref, _excluded);
       return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-        spacing: "none",
+        spacing: 'none',
         ref: triggerRef
       }), /*#__PURE__*/React.createElement("span", {
         style: {
@@ -31,17 +31,17 @@ var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
         testId: "".concat(testId, "-icon")
       })));
     },
-    spacing: "compact",
-    placement: "bottom-start"
+    spacing: 'compact',
+    placement: 'bottom-start'
   }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
       label: goToLinkLabel,
-      size: "small"
+      size: 'small'
     })
   }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
       label: configureLinkLabel,
-      size: "small"
+      size: 'small'
     })
   }, configureLinkLabel)));
 };

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

@@ -45,12 +45,15 @@ var showOverlayStyles = css({
 });
 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%)
@@ -169,7 +172,9 @@ var LeftIconOverlay = function LeftIconOverlay(_ref) {
       tabIndex: -1,
       "data-testid": testId
     }, jsx("span", _extends({}, tooltipProps, {
-      css: iconAndLabelStyles,
+      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

package/dist/esm/ui/ResizableEmbedCard.js

@@ -360,9 +360,11 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
       return jsx("div", {
         "data-testid": "resizable-embed-card-spacing"
       }, jsx("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: wrapperStyle({
           layout: layout,
           isResized: !!pctWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
           fullWidthMode: fullWidthMode
         })

package/dist/types/ui/EditLinkToolbar.d.ts

@@ -26,7 +26,7 @@ export declare class EditLinkToolbar extends React.Component<EditLinkToolbarProp
     private hideLinkToolbar;
     render(): JSX.Element;
 }
-export declare const editLink: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
+export declare const editLink: (editorAnalyticsApi: EditorAnalyticsAPI | undefined, scrollIntoView: boolean) => Command;
 export declare const buildEditLinkToolbar: ({ providerFactory, node, pluginInjectionApi, linkPicker, lpLinkPicker, }: {
     providerFactory: ProviderFactory;
     node: Node;

package/dist/types/ui/EditToolbarButton.d.ts

@@ -4,7 +4,8 @@ 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';
-export interface EditToolbarButtonProps {
+export interface EditDatasourceToolbarButtonProps {
+    datasourceId?: string;
     intl: IntlShape;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     url?: string;
@@ -12,4 +13,4 @@ export interface EditToolbarButtonProps {
     cardContext?: CardContext;
     onLinkEditClick: Command;
 }
-export declare const EditToolbarButton: ({ intl, editorAnalyticsApi, url, editorView, onLinkEditClick, }: EditToolbarButtonProps) => jsx.JSX.Element;
+export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;

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

@@ -26,7 +26,7 @@ export declare class EditLinkToolbar extends React.Component<EditLinkToolbarProp
     private hideLinkToolbar;
     render(): JSX.Element;
 }
-export declare const editLink: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
+export declare const editLink: (editorAnalyticsApi: EditorAnalyticsAPI | undefined, scrollIntoView: boolean) => Command;
 export declare const buildEditLinkToolbar: ({ providerFactory, node, pluginInjectionApi, linkPicker, lpLinkPicker, }: {
     providerFactory: ProviderFactory;
     node: Node;

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

@@ -4,7 +4,8 @@ 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';
-export interface EditToolbarButtonProps {
+export interface EditDatasourceToolbarButtonProps {
+    datasourceId?: string;
     intl: IntlShape;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     url?: string;
@@ -12,4 +13,4 @@ export interface EditToolbarButtonProps {
     cardContext?: CardContext;
     onLinkEditClick: Command;
 }
-export declare const EditToolbarButton: ({ intl, editorAnalyticsApi, url, editorView, onLinkEditClick, }: EditToolbarButtonProps) => jsx.JSX.Element;
+export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;