@atlaskit/smart-card 21.0.0 → 21.0.3

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -0,0 +1,88 @@
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import Tooltip from '@atlaskit/tooltip';
+import { SmartLinkSize } from '../../../../../../constants';
+import { sizeToButtonSpacing } from '../../../utils';
+
+const getButtonStyle = (size, iconOnly) => {
+  switch (size) {
+    case SmartLinkSize.Large:
+      return iconOnly ? css`
+            button,
+            button:hover,
+            button:focus,
+            button:active {
+              padding: 0;
+              > span {
+                margin: 0;
+              }
+            }
+          ` : '';
+
+    case SmartLinkSize.Small:
+      return css`
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 1rem;
+        button,
+        button:hover,
+        button:focus,
+        button:active {
+          line-height: 1rem;
+          ${iconOnly ? `
+            padding: 0.125rem;
+          ` : `
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+          `}
+        }
+      `;
+
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Medium:
+    default:
+      return '';
+  }
+};
+
+const ActionButton = ({
+  appearance,
+  content,
+  iconAfter,
+  iconBefore,
+  onClick,
+  overrideCss,
+  size,
+  testId,
+  tooltipMessage
+}) => {
+  const iconOnly = !content;
+  const onButtonClick = useCallback(handler => e => {
+    e.preventDefault();
+    handler();
+  }, []);
+  const onContainerClick = useCallback(e => {
+    // Stop button on click event from propagate into parent container.
+    e.stopPropagation();
+  }, []);
+  return jsx("div", {
+    css: [getButtonStyle(size, iconOnly), overrideCss],
+    "data-testid": `${testId}-button-wrapper`,
+    onClick: onContainerClick
+  }, jsx(Tooltip, {
+    content: tooltipMessage,
+    hideTooltipOnClick: true,
+    testId: `${testId}-tooltip`
+  }, jsx(Button, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    onClick: onButtonClick(onClick),
+    spacing: sizeToButtonSpacing[size],
+    testId: testId
+  }, content)));
+};
+
+export default ActionButton;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/FlexibleCard/components/actions/action/action-dropdown-item/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DropdownItem } from '@atlaskit/dropdown-menu';
+import { handleOnClick } from '../../../../../../utils';
+
+const ActionDropdownItem = ({
+  content,
+  iconAfter,
+  iconBefore,
+  onClick,
+  testId
+}) => /*#__PURE__*/React.createElement(DropdownItem, {
+  elemAfter: iconAfter,
+  elemBefore: iconBefore,
+  onClick: handleOnClick(onClick),
+  testId: testId
+}, content);
+
+export default ActionDropdownItem;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-dropdown-item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize } from '../../../../../../constants';
+import { tokens } from '../../../../../../utils/token';
+import { getIconSizeStyles } from '../../../utils';
+
+const getIconWidth = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+const getIconStyles = size => css`
+  color: ${tokens.actionIcon};
+  ${getIconSizeStyles(getIconWidth(size))};
+`;
+
+const ActionIcon = ({
+  size,
+  testId,
+  icon
+}) => jsx("span", {
+  css: getIconStyles(size),
+  "data-testid": `${testId}-icon`
+}, icon);
+
+export default ActionIcon;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -1,88 +1,10 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
-import Button from '@atlaskit/button/custom-theme-button';
+import { jsx } from '@emotion/core';
 import { SmartLinkSize } from '../../../../../constants';
-import Tooltip from '@atlaskit/tooltip';
-import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { getIconSizeStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
-import { handleOnClick } from '../../../../../utils';
-
-const getIconWidth = size => {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Large:
-      return '1.5rem';
-
-    case SmartLinkSize.Medium:
-    case SmartLinkSize.Small:
-    default:
-      return '1rem';
-  }
-};
-
-const getIconStyles = size => css`
-  color: ${tokens.actionIcon};
-  ${getIconSizeStyles(getIconWidth(size))};
-`;
-
-const getButtonStyle = (size, iconOnly) => {
-  switch (size) {
-    case SmartLinkSize.Large:
-      return iconOnly ? css`
-            button,
-            button:hover,
-            button:focus,
-            button:active {
-              padding: 0;
-              > span {
-                margin: 0;
-              }
-            }
-          ` : '';
-
-    case SmartLinkSize.Small:
-      return css`
-        font-size: 0.75rem;
-        font-weight: 500;
-        line-height: 1rem;
-        button,
-        button:hover,
-        button:focus,
-        button:active {
-          line-height: 1rem;
-          ${iconOnly ? `
-            padding: 0.125rem;
-          ` : `
-            padding-left: 0.25rem;
-            padding-right: 0.25rem;
-          `}
-        }
-      `;
-
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Medium:
-    default:
-      return '';
-  }
-};
-
-const ActionIcon = ({
-  size,
-  testId,
-  icon
-}) => jsx("span", {
-  css: getIconStyles(size),
-  "data-testid": `${testId}-icon`
-}, icon);
-
-export const sizeToSpacing = {
-  [SmartLinkSize.Small]: 'none',
-  [SmartLinkSize.Medium]: 'compact',
-  [SmartLinkSize.Large]: 'compact',
-  [SmartLinkSize.XLarge]: 'default'
-};
+import ActionButton from './action-button';
+import ActionDropdownItem from './action-dropdown-item';
+import ActionIcon from './action-icon';
 /**
  * A base action that can be triggered with an on click.
  * @internal
@@ -108,40 +30,34 @@ const Action = ({
     return null;
   }
 
-  const iconBefore = icon && iconPosition === 'before' ? jsx(ActionIcon, {
-    size: size,
-    testId: testId,
-    icon: icon
-  }) : undefined;
-  const iconAfter = icon && iconPosition === 'after' ? jsx(ActionIcon, {
+  const actionIcon = icon && jsx(ActionIcon, {
+    icon: icon,
     size: size,
-    testId: testId,
-    icon: icon
-  }) : undefined;
-  const iconOnly = !content;
+    testId: testId
+  });
+  const iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
+  const iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
 
   if (asDropDownItem) {
-    return jsx(DropdownItem, {
-      elemBefore: iconBefore,
-      elemAfter: iconAfter,
-      testId: testId,
-      onClick: handleOnClick(onClick)
-    }, content);
+    return jsx(ActionDropdownItem, {
+      content: content,
+      iconAfter: iconAfter,
+      iconBefore: iconBefore,
+      onClick: onClick,
+      testId: testId
+    });
   } else {
-    return jsx(Tooltip, {
-      content: tooltipMessage,
-      testId: `${testId}-tooltip`
-    }, jsx("div", {
-      css: [getButtonStyle(size, iconOnly), overrideCss],
-      "data-testid": `${testId}-button-wrapper`
-    }, jsx(Button, {
-      spacing: sizeToSpacing[size],
+    return jsx(ActionButton, {
       appearance: appearance,
-      testId: testId,
-      onClick: handleOnClick(onClick),
+      content: content,
+      iconAfter: iconAfter,
       iconBefore: iconBefore,
-      iconAfter: iconAfter
-    }, content)));
+      onClick: onClick,
+      overrideCss: overrideCss,
+      size: size,
+      testId: testId,
+      tooltipMessage: tooltipMessage
+    });
   }
 };
 

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { useCallback } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
@@ -11,7 +11,7 @@ import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
-import { sizeToSpacing } from '../../actions/action';
+import { sizeToButtonSpacing } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { messages } from '../../../../../messages';
 const styles = css`
@@ -46,35 +46,54 @@ const ActionGroup = ({
   onDropdownOpenChange,
   testId
 }) => {
-  const isMoreThenTwoItems = items.length > visibleButtonsNum;
-  const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  const restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+  const [isOpen, setIsOpen] = useState(false);
+  const [buttonActions, dropdownItemActions] = useMemo(() => {
+    const isMoreThenTwoItems = items.length > visibleButtonsNum;
+    const buttons = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
+    const dropdownItems = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+    return [buttons, dropdownItems];
+  }, [items, visibleButtonsNum]); // Stop AK dropdown menu to propagate event on click.
 
   const onClick = useCallback(e => e.stopPropagation(), []);
+  const onOpenChange = useCallback(attrs => {
+    setIsOpen(attrs.isOpen);
+
+    if (onDropdownOpenChange) {
+      onDropdownOpenChange(attrs.isOpen);
+    }
+  }, [onDropdownOpenChange]);
+  const onActionClick = useCallback(() => {
+    if (isOpen) {
+      onOpenChange({
+        isOpen: false
+      });
+    }
+  }, [isOpen, onOpenChange]);
   return jsx("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
-    onOpenChange: ({
-      isOpen
-    }) => onDropdownOpenChange && onDropdownOpenChange(isOpen),
+  }, jsx(ButtonGroup, null, renderActionItems(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? jsx(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: onOpenChange,
     trigger: ({
       triggerRef,
       ...props
     }) => jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.more_actions),
+      hideTooltipOnClick: true,
       testId: "action-group-more-button-tooltip",
       tag: "span"
     }, jsx(Button, _extends({}, props, {
-      spacing: sizeToSpacing[size],
+      spacing: sizeToButtonSpacing[size],
       testId: "action-group-more-button",
       iconBefore: jsx(MoreIcon, {
         label: "more"
       }),
       ref: triggerRef
-    })))
-  }, renderActionItems(restActions, size, appearance, true)) : null));
+    }))),
+    testId: "action-group-dropdown"
+  }, renderActionItems(dropdownItemActions, size, appearance, true, onActionClick)) : null));
 };
 
 export default ActionGroup;

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

@@ -138,7 +138,7 @@ export const renderElementItems = (items = [], display = 'inline') => {
     return elements;
   }
 };
-export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems) => {
+export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => {
   const actions = items.reduce((acc, curr, idx) => {
     const {
       name,
@@ -160,12 +160,22 @@ export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appea
     }
 
     if (Action) {
+      const handleOnClick = () => {
+        if (onActionItemClick) {
+          onActionItemClick();
+        }
+
+        if (onClick) {
+          onClick();
+        }
+      };
+
       return [...acc, /*#__PURE__*/React.createElement(Action, _extends({
         asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,
-        onClick: onClick
+        onClick: handleOnClick
       }, actionProps))];
     }
 

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -3,6 +3,12 @@ import React from 'react';
 import { css } from '@emotion/core';
 import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
+export const sizeToButtonSpacing = {
+  [SmartLinkSize.Small]: 'none',
+  [SmartLinkSize.Medium]: 'compact',
+  [SmartLinkSize.Large]: 'compact',
+  [SmartLinkSize.XLarge]: 'default'
+};
 export const getFormattedMessage = message => {
   if (message) {
     const {

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

@@ -22,16 +22,23 @@ export const HoverCardComponent = ({
   const fadeOutTimeoutId = useRef();
   const fadeInTimeoutId = useRef();
   const cardOpenTime = useRef();
-  const mousePos = useRef({
-    x: 0,
-    y: 0
-  });
+  const mousePos = useRef();
   const popupOffset = useRef();
   const parentSpan = useRef(null);
   const renderers = useSmartLinkRenderers();
   const linkState = useLinkState(url);
   const hoverDisplay = 'card';
   const invokeMethod = 'mouse_hover';
+  const setMousePosition = useCallback(event => {
+    if (isOpen) {
+      return;
+    }
+
+    mousePos.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, [isOpen]);
   const hideCard = useCallback(() => {
     //Check its previously open to avoid firing events when moving between the child and hover card components
     if (isOpen === true && cardOpenTime.current) {
@@ -48,19 +55,22 @@ export const HoverCardComponent = ({
 
     fadeOutTimeoutId.current = setTimeout(() => hideCard(), delay);
   }, [hideCard]);
-  const initShowCard = useCallback(() => {
+  const initShowCard = useCallback(event => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
-    }
+    } //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
+
 
+    setMousePosition(event);
     fadeInTimeoutId.current = setTimeout(() => {
       //Check if its previously closed to avoid firing events when moving between the child and hover card components
       if (isOpen === false) {
         cardOpenTime.current = Date.now();
         analytics.ui.hoverCardViewedEvent(hoverDisplay, invokeMethod);
-      }
+      } //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
+
 
-      if (parentSpan.current) {
+      if (parentSpan.current && mousePos.current) {
         const {
           bottom,
           left
@@ -70,7 +80,7 @@ export const HoverCardComponent = ({
 
       setIsOpen(true);
     }, delay);
-  }, [delay, isOpen, analytics.ui]);
+  }, [isOpen, setMousePosition, analytics.ui]);
   const linkActions = useSmartLinkActions({
     url,
     appearance: SMART_CARD_ANALYTICS_DISPLAY,
@@ -80,17 +90,7 @@ export const HoverCardComponent = ({
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]);
-  const setMousePosition = useCallback(event => {
-    if (isOpen) {
-      return;
-    }
-
-    mousePos.current = {
-      x: event.clientX,
-      y: event.clientY
-    };
-  }, [isOpen]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]); // Stop hover preview content to propagate event to parent.
 
   const onClick = useCallback(e => e.stopPropagation(), []);
   return jsx(Popup, {
@@ -99,6 +99,7 @@ export const HoverCardComponent = ({
     onClose: hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
+    autoFocus: false,
     content: ({
       update
     }) => jsx("div", {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "21.0.0",
+	"version": "21.0.3",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -0,0 +1,67 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import Tooltip from '@atlaskit/tooltip';
+import { SmartLinkSize } from '../../../../../../constants';
+import { sizeToButtonSpacing } from '../../../utils';
+
+var getButtonStyle = function getButtonStyle(size, iconOnly) {
+  switch (size) {
+    case SmartLinkSize.Large:
+      return iconOnly ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+
+    case SmartLinkSize.Small:
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
+
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Medium:
+    default:
+      return '';
+  }
+};
+
+var ActionButton = function ActionButton(_ref) {
+  var appearance = _ref.appearance,
+      content = _ref.content,
+      iconAfter = _ref.iconAfter,
+      iconBefore = _ref.iconBefore,
+      onClick = _ref.onClick,
+      overrideCss = _ref.overrideCss,
+      size = _ref.size,
+      testId = _ref.testId,
+      tooltipMessage = _ref.tooltipMessage;
+  var iconOnly = !content;
+  var onButtonClick = useCallback(function (handler) {
+    return function (e) {
+      e.preventDefault();
+      handler();
+    };
+  }, []);
+  var onContainerClick = useCallback(function (e) {
+    // Stop button on click event from propagate into parent container.
+    e.stopPropagation();
+  }, []);
+  return jsx("div", {
+    css: [getButtonStyle(size, iconOnly), overrideCss],
+    "data-testid": "".concat(testId, "-button-wrapper"),
+    onClick: onContainerClick
+  }, jsx(Tooltip, {
+    content: tooltipMessage,
+    hideTooltipOnClick: true,
+    testId: "".concat(testId, "-tooltip")
+  }, jsx(Button, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    onClick: onButtonClick(onClick),
+    spacing: sizeToButtonSpacing[size],
+    testId: testId
+  }, content)));
+};
+
+export default ActionButton;

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/actions/action/action-dropdown-item/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DropdownItem } from '@atlaskit/dropdown-menu';
+import { handleOnClick } from '../../../../../../utils';
+
+var ActionDropdownItem = function ActionDropdownItem(_ref) {
+  var content = _ref.content,
+      iconAfter = _ref.iconAfter,
+      iconBefore = _ref.iconBefore,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(DropdownItem, {
+    elemAfter: iconAfter,
+    elemBefore: iconBefore,
+    onClick: handleOnClick(onClick),
+    testId: testId
+  }, content);
+};
+
+export default ActionDropdownItem;

package/dist/esm/view/FlexibleCard/components/actions/action/action-dropdown-item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -0,0 +1,39 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize } from '../../../../../../constants';
+import { tokens } from '../../../../../../utils/token';
+import { getIconSizeStyles } from '../../../utils';
+
+var getIconWidth = function getIconWidth(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+var getIconStyles = function getIconStyles(size) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getIconWidth(size)));
+};
+
+var ActionIcon = function ActionIcon(_ref) {
+  var size = _ref.size,
+      testId = _ref.testId,
+      icon = _ref.icon;
+  return jsx("span", {
+    css: getIconStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+
+export default ActionIcon;

package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/types.js

@@ -0,0 +1 @@
+export {};