@atlaskit/smart-card 23.13.2 → 23.14.0

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -3,23 +3,18 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["name"],
-    _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
+var _excluded = ["name"];
 
 var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { css } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
-import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
-import ElementGroup from './element-group';
+import ElementGroup from './element-group'; // Determine whether the element can be display as inline/block.
+
 export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AttachmentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ChecklistProgress, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
@@ -64,7 +59,7 @@ var isElementDisplayValid = function isElementDisplayValid(name, display) {
   return (_ElementDisplaySchema2 = (_ElementDisplaySchema3 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema3 === void 0 ? void 0 : _ElementDisplaySchema3.includes(display)) !== null && _ElementDisplaySchema2 !== void 0 ? _ElementDisplaySchema2 : false;
 };
 
-var isJSXElementNull = function isJSXElementNull(children) {
+export var isJSXElementNull = function isJSXElementNull(children) {
   return Boolean(children.type() === null);
 };
 
@@ -111,61 +106,4 @@ export var renderElementItems = function renderElementItems() {
   if (elements.length) {
     return elements;
   }
-};
-export var renderActionItems = function renderActionItems() {
-  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmartLinkSize.Medium;
-  var appearance = arguments.length > 2 ? arguments[2] : undefined;
-  var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
-  var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
-  var actions = items.reduce(function (acc, curr, idx) {
-    var name = curr.name,
-        hideContent = curr.hideContent,
-        hideIcon = curr.hideIcon,
-        onClick = curr.onClick,
-        props = _objectWithoutProperties(curr, _excluded2);
-
-    var Action = Actions[name];
-
-    var actionProps = _objectSpread({}, props);
-
-    if (hideContent && !asDropDownItems) {
-      actionProps.content = '';
-    }
-
-    if (hideIcon) {
-      actionProps.icon = undefined;
-    }
-
-    if (Action) {
-      var handleOnClick = function handleOnClick() {
-        if (onActionItemClick) {
-          onActionItemClick();
-        }
-
-        if (onClick) {
-          onClick();
-        }
-      };
-
-      var action = /*#__PURE__*/React.createElement(Action, _extends({
-        url: '',
-        asDropDownItem: asDropDownItems,
-        size: size,
-        key: idx,
-        appearance: appearance,
-        onClick: handleOnClick
-      }, actionProps));
-
-      if (!isJSXElementNull(action)) {
-        return [].concat(_toConsumableArray(acc), [action]);
-      }
-    }
-
-    return acc;
-  }, []);
-
-  if (actions.length) {
-    return actions;
-  }
 };

package/dist/esm/view/FlexibleCard/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
 import { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
@@ -27,7 +27,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
-  var context = getContextByStatus(url, status, details, renderers);
+  var context = useMemo(function () {
+    return getContextByStatus(url, status, details, renderers);
+  }, [details, renderers, status, url]);
   var retry = getRetryOptions(url, status, details, onAuthorize);
 
   var _ref2 = context || {},

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -120,6 +120,31 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       hideCard();
     }
   }, [closeOnChildClick, hideCard]);
+  var content = useCallback(function (_ref2) {
+    var update = _ref2.update;
+    return jsx(HoverCardContent, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      analytics: analytics,
+      cardActions: linkActions,
+      cardState: linkState,
+      onActionClick: onActionClick,
+      onResolve: update,
+      renderers: renderers,
+      url: url
+    });
+  }, [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
+  var trigger = useCallback(function (triggerProps) {
+    return jsx("span", {
+      ref: parentSpan
+    }, jsx("span", _extends({}, triggerProps, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      onMouseMove: setMousePosition,
+      onClick: onChildClick,
+      "data-testid": "hover-card-trigger-wrapper"
+    }), children));
+  }, [children, initHideCard, initShowCard, onChildClick, setMousePosition]);
   return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
@@ -127,31 +152,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     placement: "bottom-start",
     offset: popupOffset.current,
     autoFocus: false,
-    content: function content(_ref2) {
-      var update = _ref2.update;
-      return jsx(HoverCardContent, {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard,
-        analytics: analytics,
-        cardActions: linkActions,
-        cardState: linkState,
-        onActionClick: onActionClick,
-        onResolve: update,
-        renderers: renderers,
-        url: url
-      });
-    },
-    trigger: function trigger(triggerProps) {
-      return jsx("span", {
-        ref: parentSpan
-      }, jsx("span", _extends({}, triggerProps, {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard,
-        onMouseMove: setMousePosition,
-        onClick: onChildClick,
-        "data-testid": "hover-card-trigger-wrapper"
-      }), children));
-    },
+    content: content,
+    trigger: trigger,
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 
   });

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "onResolve" | "platform" | "showAuthTooltip" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/Card/types.d.ts

@@ -32,6 +32,7 @@ export interface CardProps extends WithAnalyticsEventsProps {
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
     showHoverPreview?: boolean;
+    showAuthTooltip?: boolean;
     analyticsEvents?: AnalyticsFacade;
     placeholder?: string;
 }

package/dist/types/view/CardWithUrl/component.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CardWithUrlContentProps } from './types';
-export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, showHoverPreview, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;
+export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, inheritDimensions, embedIframeRef, inlinePreloaderStyle, ui, children, showHoverPreview, showAuthTooltip: showAuthTooltipProp, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;

package/dist/types/view/CardWithUrl/types.d.ts

@@ -24,6 +24,7 @@ export declare type CardWithUrlContentProps = {
     ui?: FlexibleUiOptions;
     children?: React.ReactNode;
     showHoverPreview?: boolean;
+    showAuthTooltip?: boolean;
     analyticsEvents?: AnalyticsFacade;
     placeholder?: string;
 };

package/dist/types/view/FlexibleCard/components/blocks/action-group/action-group-item/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Appearance } from '@atlaskit/button';
+import { SmartLinkSize } from '../../../../../../constants';
+import { ActionItem } from '../../types';
+declare const ActionGroupItem: React.FC<{
+    item: ActionItem;
+    size: SmartLinkSize;
+    appearance?: Appearance;
+    asDropDownItems?: boolean;
+    onActionItemClick?: () => void;
+}>;
+export default ActionGroupItem;

package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
 import { SerializedStyles } from '@emotion/react';
-import { ActionItem, ElementItem } from './types';
+import { ElementItem } from './types';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
-import { Appearance } from '@atlaskit/button';
 export declare type ElementDisplaySchemaType = 'inline' | 'block';
 export declare const ElementDisplaySchema: Record<ElementName, ElementDisplaySchemaType[]>;
 export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
 export declare const highlightRemoveStyles: SerializedStyles;
+export declare const isJSXElementNull: (children: JSX.Element) => boolean;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
 export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
-export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: Appearance | undefined, asDropDownItems?: boolean | undefined, onActionItemClick?: (() => void) | undefined) => React.ReactElement[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.13.2",
+  "version": "23.14.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/linking-common": "^1.20.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
-    "@atlaskit/media-common": "^2.18.0",
+    "@atlaskit/media-common": "^2.19.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/popup": "^1.5.0",

package/report.api.md

@@ -254,6 +254,7 @@ export const Card: React_2.ForwardRefExoticComponent<
     | 'placeholder'
     | 'platform'
     | 'showActions'
+    | 'showAuthTooltip'
     | 'showHoverPreview'
     | 'testId'
     | 'ui'
@@ -316,6 +317,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
   // (undocumented)
   showActions?: boolean;
   // (undocumented)
+  showAuthTooltip?: boolean;
+  // (undocumented)
   showHoverPreview?: boolean;
   // (undocumented)
   testId?: string;

package/tmp/api-report-tmp.d.ts

@@ -178,7 +178,7 @@ type BlockProps = {
 };
 
 // @public (undocumented)
-export const Card: React_2.ForwardRefExoticComponent<Pick<Omit<React_2.PropsWithChildren<WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "analyticsEvents" | "appearance" | "children" | "container" | "data" | "embedIframeRef" | "forwardedRef" | "id" | "importer" | "inheritDimensions" | "inlinePreloaderStyle" | "isFrameVisible" | "isSelected" | "key" | "onClick" | "onError" | "onResolve" | "placeholder" | "platform" | "showActions" | "showHoverPreview" | "testId" | "ui" | "url"> & React_2.RefAttributes<any>>;
+export const Card: React_2.ForwardRefExoticComponent<Pick<Omit<React_2.PropsWithChildren<WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "analyticsEvents" | "appearance" | "children" | "container" | "data" | "embedIframeRef" | "forwardedRef" | "id" | "importer" | "inheritDimensions" | "inlinePreloaderStyle" | "isFrameVisible" | "isSelected" | "key" | "onClick" | "onError" | "onResolve" | "placeholder" | "platform" | "showActions" | "showAuthTooltip" | "showHoverPreview" | "testId" | "ui" | "url"> & React_2.RefAttributes<any>>;
 
 export { CardAdf }
 
@@ -230,6 +230,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
     // (undocumented)
     showActions?: boolean;
     // (undocumented)
+    showAuthTooltip?: boolean;
+    // (undocumented)
     showHoverPreview?: boolean;
     // (undocumented)
     testId?: string;