@atlaskit/smart-card 18.0.8 → 18.0.11

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/smart-card
 
+## 18.0.11
+
+### Patch Changes
+
+- [`ec98e2d8ebc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec98e2d8ebc) - feat: Expose `useSmartLinkReload` hook.
+
+  ### Example Usage
+
+  As a consumer if you want to be able to reload the data backing a Smart Link, you may do:
+
+  ```tsx
+  export const MyComponent = () => {
+    const reloader = useSmartLinkReload(url, analytics);
+
+    return (
+      <MyInterfaceItem>
+        <Card />
+        <Button text="Retry" onClick={reloader} />
+      </MyInterfaceItem>
+    );
+  };
+  ```
+
+## 18.0.10
+
+### Patch Changes
+
+- [`b687926f768`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b687926f768) - Fix bug where individual action item was not hidden by default with showActionOnHover flag
+
+## 18.0.9
+
+### Patch Changes
+
+- [`6adaa6b5c18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6adaa6b5c18) - Updated default renderer onClick to not fire on a Flexible UI link to prevent links from being openned twice
+
 ## 18.0.8
 
 ### Patch Changes

package/dist/cjs/hooks.js

@@ -9,5 +9,13 @@ Object.defineProperty(exports, "useSmartLinkActions", {
     return _useSmartLinkActions.useSmartLinkActions;
   }
 });
+Object.defineProperty(exports, "useSmartLinkReload", {
+  enumerable: true,
+  get: function get() {
+    return _useSmartLinkReload.useSmartLinkReload;
+  }
+});
+
+var _useSmartLinkActions = require("./state/hooks-external/useSmartLinkActions");
 
-var _useSmartLinkActions = require("./state/hooks-external/useSmartLinkActions");
+var _useSmartLinkReload = require("./state/hooks-external/useSmartLinkReload");

package/dist/cjs/state/hooks-external/useSmartLinkReload.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkReload = useSmartLinkReload;
+
+var _react = require("react");
+
+var _uuid = _interopRequireDefault(require("uuid"));
+
+var _actions = require("../actions");
+
+var _analytics = require("../analytics");
+
+/**
+ * Exposes a programmatic way to reload the data being used to render a Smart Link.
+ * @param
+ * @returns
+ */
+function useSmartLinkReload(_ref) {
+  var url = _ref.url,
+      analyticsHandler = _ref.analyticsHandler;
+  var id = (0, _react.useMemo)(function () {
+    return (0, _uuid.default)();
+  }, []);
+  var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(analyticsHandler);
+  var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics);
+  return linkActions.reload;
+}

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/component.js

@@ -80,7 +80,11 @@ function CardWithUrlContent(_ref) {
       analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
     }
 
-    onClick ? onClick(event) : handleClick(event);
+    if (onClick) {
+      onClick(event);
+    } else if (!isFlexibleUi) {
+      handleClick(event);
+    }
   }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);

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

@@ -48,7 +48,8 @@ var ActionGroup = function ActionGroup(_ref) {
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
   var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
   return (0, _core.jsx)("div", {
-    css: styles
+    css: styles,
+    className: "actions-button-group"
   }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(firstActions, size, appearance), restActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
     onOpenChange: function onOpenChange(_ref2) {
       var isOpen = _ref2.isOpen;
@@ -59,7 +60,6 @@ var ActionGroup = function ActionGroup(_ref) {
           props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
       return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
         spacing: _action.sizeToSpacing[size],
-        className: "action-group-more-button",
         testId: "action-group-more-button",
         iconBefore: (0, _core.jsx)(_more.default, {
           label: "more"

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/utils.js

@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var actionOnHoverOnlyStyle = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .action-group-more-button {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .action-group-more-button {\n      visibility: visible;\n    }\n  }\n"])));
+var actionOnHoverOnlyStyle = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .actions-button-group {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .actions-button-group {\n      visibility: visible;\n    }\n  }\n"])));
 exports.actionOnHoverOnlyStyle = actionOnHoverOnlyStyle;
 
 var BaseTitleBlockComponent = function BaseTitleBlockComponent(_ref) {

package/dist/es2019/hooks.js

@@ -1 +1,2 @@
-export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';
+export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';
+export { useSmartLinkReload } from './state/hooks-external/useSmartLinkReload';

package/dist/es2019/state/hooks-external/useSmartLinkReload.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import uuid from 'uuid';
+import { useSmartCardActions as useLinkActions } from '../actions';
+import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
+
+/**
+ * Exposes a programmatic way to reload the data being used to render a Smart Link.
+ * @param
+ * @returns
+ */
+export function useSmartLinkReload({
+  url,
+  analyticsHandler
+}) {
+  const id = useMemo(() => uuid(), []);
+  const linkAnalytics = useLinkAnalytics(analyticsHandler);
+  const linkActions = useLinkActions(id, url, linkAnalytics);
+  return linkActions.reload;
+}

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -52,7 +52,11 @@ export function CardWithUrlContent({
       analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
     }
 
-    onClick ? onClick(event) : handleClick(event);
+    if (onClick) {
+      onClick(event);
+    } else if (!isFlexibleUi) {
+      handleClick(event);
+    }
   }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
   const handleRetry = useCallback(() => {

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

@@ -25,7 +25,8 @@ const ActionGroup = ({
   const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
   const restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
   return jsx("div", {
-    css: styles
+    css: styles,
+    className: "actions-button-group"
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
     onOpenChange: ({
       isOpen
@@ -35,7 +36,6 @@ const ActionGroup = ({
       ...props
     }) => jsx(Button, _extends({}, props, {
       spacing: sizeToSpacing[size],
-      className: "action-group-more-button",
       testId: "action-group-more-button",
       iconBefore: jsx(MoreIcon, {
         label: "more"

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/utils.js

@@ -11,12 +11,12 @@ import { SmartLinkAlignment, SmartLinkWidth, SmartLinkDirection } from '../../..
 import ElementGroup from '../element-group';
 import { renderElementItems } from '../utils';
 export const actionOnHoverOnlyStyle = css`
-  .action-group-more-button {
+  .actions-button-group {
     visibility: hidden;
   }
 
   &:hover {
-    .action-group-more-button {
+    .actions-button-group {
       visibility: visible;
     }
   }

package/dist/esm/hooks.js

@@ -1 +1,2 @@
-export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';
+export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';
+export { useSmartLinkReload } from './state/hooks-external/useSmartLinkReload';

package/dist/esm/state/hooks-external/useSmartLinkReload.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import uuid from 'uuid';
+import { useSmartCardActions as useLinkActions } from '../actions';
+import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
+
+/**
+ * Exposes a programmatic way to reload the data being used to render a Smart Link.
+ * @param
+ * @returns
+ */
+export function useSmartLinkReload(_ref) {
+  var url = _ref.url,
+      analyticsHandler = _ref.analyticsHandler;
+  var id = useMemo(function () {
+    return uuid();
+  }, []);
+  var linkAnalytics = useLinkAnalytics(analyticsHandler);
+  var linkActions = useLinkActions(id, url, linkAnalytics);
+  return linkActions.reload;
+}

package/dist/esm/version.json

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

package/dist/esm/view/CardWithUrl/component.js

@@ -54,7 +54,11 @@ export function CardWithUrlContent(_ref) {
       analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
     }
 
-    onClick ? onClick(event) : handleClick(event);
+    if (onClick) {
+      onClick(event);
+    } else if (!isFlexibleUi) {
+      handleClick(event);
+    }
   }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   var handleAuthorize = useCallback(function () {
     return actions.authorize(appearance);

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

@@ -29,7 +29,8 @@ var ActionGroup = function ActionGroup(_ref) {
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
   var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
   return jsx("div", {
-    css: styles
+    css: styles,
+    className: "actions-button-group"
   }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
     onOpenChange: function onOpenChange(_ref2) {
       var isOpen = _ref2.isOpen;
@@ -41,7 +42,6 @@ var ActionGroup = function ActionGroup(_ref) {
 
       return jsx(Button, _extends({}, props, {
         spacing: sizeToSpacing[size],
-        className: "action-group-more-button",
         testId: "action-group-more-button",
         iconBefore: jsx(MoreIcon, {
           label: "more"

package/dist/esm/view/FlexibleCard/components/blocks/title-block/utils.js

@@ -16,7 +16,7 @@ import ActionGroup from '../action-group';
 import { SmartLinkAlignment, SmartLinkWidth, SmartLinkDirection } from '../../../../../constants';
 import ElementGroup from '../element-group';
 import { renderElementItems } from '../utils';
-export var actionOnHoverOnlyStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .action-group-more-button {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .action-group-more-button {\n      visibility: visible;\n    }\n  }\n"])));
+export var actionOnHoverOnlyStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .actions-button-group {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .actions-button-group {\n      visibility: visible;\n    }\n  }\n"])));
 export var BaseTitleBlockComponent = function BaseTitleBlockComponent(_ref) {
   var children = _ref.children,
       blockTestIdPostfix = _ref.blockTestIdPostfix,

package/dist/types/hooks.d.ts

@@ -1 +1,2 @@
 export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';
+export { useSmartLinkReload } from './state/hooks-external/useSmartLinkReload';

package/dist/types/state/hooks-external/useSmartLinkReload.d.ts

@@ -0,0 +1,19 @@
+import type { AnalyticsHandler } from '../../utils/types';
+export interface UseSmartLinkReloadOpts {
+    /**
+     * Smart Link URL for which the reload will be invoked.
+     * @example https://start.atlassian.com
+     */
+    url: string;
+    /**
+     * Callback for sending analytics events.
+     * @description Accepts an analytics payload and fires it to a system.
+     */
+    analyticsHandler: AnalyticsHandler;
+}
+/**
+ * Exposes a programmatic way to reload the data being used to render a Smart Link.
+ * @param
+ * @returns
+ */
+export declare function useSmartLinkReload({ url, analyticsHandler, }: UseSmartLinkReloadOpts): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "18.0.8",
+  "version": "18.0.11",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"