@atlaskit/smart-card 18.0.0 → 18.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/cjs/view/HoverCard/index.js +68 -12
  4. package/dist/es2019/version.json +1 -1
  5. package/dist/es2019/view/HoverCard/index.js +49 -11
  6. package/dist/esm/version.json +1 -1
  7. package/dist/esm/view/HoverCard/index.js +62 -12
  8. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 18.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`75c16ae4964`](https://bitbucket.org/atlassian/atlassian-frontend/commits/75c16ae4964) - refactor code to use atlaskit/popup instead of atlaskit/tooltip as a base component
8
+
3
9
  ## 18.0.0
4
10
 
5
11
  ### Major Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "18.0.0",
3
+ "version": "18.0.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/view/HoverCard/index.js CHANGED
@@ -2,36 +2,92 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports.HoverCard = void 0;
9
11
 
10
- var _react = _interopRequireDefault(require("react"));
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
15
 
12
- var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
16
+ var _react = _interopRequireWildcard(require("react"));
13
17
 
14
18
  var _blocks = require("../FlexibleCard/components/blocks");
15
19
 
16
20
  var _Card = require("../Card");
17
21
 
18
- var _styled = require("./styled");
22
+ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
23
+
24
+ var _constants = require("../../constants");
25
+
26
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
28
+ 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; }
19
29
 
20
30
  var HoverCard = function HoverCard(_ref) {
21
31
  var children = _ref.children,
22
32
  url = _ref.url;
33
+ var delay = 300;
23
34
 
24
- var cardComponent = /*#__PURE__*/_react.default.createElement(_Card.Card, {
25
- appearance: "block",
26
- url: url
27
- }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, null));
35
+ var _React$useState = _react.default.useState(false),
36
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
37
+ isOpen = _React$useState2[0],
38
+ setIsOpen = _React$useState2[1];
28
39
 
29
- return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
30
- content: cardComponent,
31
- component: _styled.HoverCardContainer,
40
+ var fadeOutTimeoutId = (0, _react.useRef)();
41
+ var fadeInTimeoutId = (0, _react.useRef)();
42
+ var initHideCard = (0, _react.useCallback)(function () {
43
+ if (fadeInTimeoutId.current) {
44
+ clearTimeout(fadeInTimeoutId.current);
45
+ }
46
+
47
+ fadeOutTimeoutId.current = setTimeout(function () {
48
+ setIsOpen(false);
49
+ }, delay);
50
+ }, [delay]);
51
+ var initShowCard = (0, _react.useCallback)(function () {
52
+ if (fadeOutTimeoutId.current) {
53
+ clearTimeout(fadeOutTimeoutId.current);
54
+ }
55
+
56
+ fadeInTimeoutId.current = setTimeout(function () {
57
+ setIsOpen(true);
58
+ }, delay);
59
+ }, [delay]);
60
+
61
+ var cardComponent = function cardComponent() {
62
+ return /*#__PURE__*/_react.default.createElement("span", {
63
+ onMouseEnter: initShowCard,
64
+ onMouseLeave: initHideCard
65
+ }, /*#__PURE__*/_react.default.createElement(_Card.Card, {
66
+ appearance: "block",
67
+ url: url,
68
+ ui: {
69
+ hideElevation: true,
70
+ size: _constants.SmartLinkSize.Large
71
+ }
72
+ }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, null)));
73
+ };
74
+
75
+ var onClose = (0, _react.useCallback)(function () {
76
+ return setIsOpen(false);
77
+ }, []);
78
+ return /*#__PURE__*/_react.default.createElement(_popup.default, {
32
79
  testId: "hover-card",
33
- tag: "span"
34
- }, children);
80
+ isOpen: isOpen,
81
+ onClose: onClose,
82
+ placement: "bottom",
83
+ content: cardComponent,
84
+ trigger: function trigger(triggerProps) {
85
+ return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, triggerProps, {
86
+ onMouseEnter: initShowCard,
87
+ onMouseLeave: initHideCard
88
+ }), children);
89
+ }
90
+ });
35
91
  };
36
92
 
37
93
  exports.HoverCard = HoverCard;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "18.0.0",
3
+ "version": "18.0.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/view/HoverCard/index.js CHANGED
@@ -1,20 +1,58 @@
1
- import React from 'react';
2
- import Tooltip from '@atlaskit/tooltip';
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { useCallback, useRef } from 'react';
3
3
  import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
4
4
  import { Card } from '../Card';
5
- import { HoverCardContainer } from './styled';
5
+ import Popup from '@atlaskit/popup';
6
+ import { SmartLinkSize } from '../../constants';
6
7
  export const HoverCard = ({
7
8
  children,
8
9
  url
9
10
  }) => {
10
- const cardComponent = /*#__PURE__*/React.createElement(Card, {
11
+ const delay = 300;
12
+ const [isOpen, setIsOpen] = React.useState(false);
13
+ const fadeOutTimeoutId = useRef();
14
+ const fadeInTimeoutId = useRef();
15
+ const initHideCard = useCallback(() => {
16
+ if (fadeInTimeoutId.current) {
17
+ clearTimeout(fadeInTimeoutId.current);
18
+ }
19
+
20
+ fadeOutTimeoutId.current = setTimeout(() => {
21
+ setIsOpen(false);
22
+ }, delay);
23
+ }, [delay]);
24
+ const initShowCard = useCallback(() => {
25
+ if (fadeOutTimeoutId.current) {
26
+ clearTimeout(fadeOutTimeoutId.current);
27
+ }
28
+
29
+ fadeInTimeoutId.current = setTimeout(() => {
30
+ setIsOpen(true);
31
+ }, delay);
32
+ }, [delay]);
33
+
34
+ const cardComponent = () => /*#__PURE__*/React.createElement("span", {
35
+ onMouseEnter: initShowCard,
36
+ onMouseLeave: initHideCard
37
+ }, /*#__PURE__*/React.createElement(Card, {
11
38
  appearance: "block",
12
- url: url
13
- }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null));
14
- return /*#__PURE__*/React.createElement(Tooltip, {
15
- content: cardComponent,
16
- component: HoverCardContainer,
39
+ url: url,
40
+ ui: {
41
+ hideElevation: true,
42
+ size: SmartLinkSize.Large
43
+ }
44
+ }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null)));
45
+
46
+ const onClose = useCallback(() => setIsOpen(false), []);
47
+ return /*#__PURE__*/React.createElement(Popup, {
17
48
  testId: "hover-card",
18
- tag: "span"
19
- }, children);
49
+ isOpen: isOpen,
50
+ onClose: onClose,
51
+ placement: "bottom",
52
+ content: cardComponent,
53
+ trigger: triggerProps => /*#__PURE__*/React.createElement("span", _extends({}, triggerProps, {
54
+ onMouseEnter: initShowCard,
55
+ onMouseLeave: initHideCard
56
+ }), children)
57
+ });
20
58
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "18.0.0",
3
+ "version": "18.0.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/view/HoverCard/index.js CHANGED
@@ -1,19 +1,69 @@
1
- import React from 'react';
2
- import Tooltip from '@atlaskit/tooltip';
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import React, { useCallback, useRef } from 'react';
3
4
  import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
4
5
  import { Card } from '../Card';
5
- import { HoverCardContainer } from './styled';
6
+ import Popup from '@atlaskit/popup';
7
+ import { SmartLinkSize } from '../../constants';
6
8
  export var HoverCard = function HoverCard(_ref) {
7
9
  var children = _ref.children,
8
10
  url = _ref.url;
9
- var cardComponent = /*#__PURE__*/React.createElement(Card, {
10
- appearance: "block",
11
- url: url
12
- }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null));
13
- return /*#__PURE__*/React.createElement(Tooltip, {
14
- content: cardComponent,
15
- component: HoverCardContainer,
11
+ var delay = 300;
12
+
13
+ var _React$useState = React.useState(false),
14
+ _React$useState2 = _slicedToArray(_React$useState, 2),
15
+ isOpen = _React$useState2[0],
16
+ setIsOpen = _React$useState2[1];
17
+
18
+ var fadeOutTimeoutId = useRef();
19
+ var fadeInTimeoutId = useRef();
20
+ var initHideCard = useCallback(function () {
21
+ if (fadeInTimeoutId.current) {
22
+ clearTimeout(fadeInTimeoutId.current);
23
+ }
24
+
25
+ fadeOutTimeoutId.current = setTimeout(function () {
26
+ setIsOpen(false);
27
+ }, delay);
28
+ }, [delay]);
29
+ var initShowCard = useCallback(function () {
30
+ if (fadeOutTimeoutId.current) {
31
+ clearTimeout(fadeOutTimeoutId.current);
32
+ }
33
+
34
+ fadeInTimeoutId.current = setTimeout(function () {
35
+ setIsOpen(true);
36
+ }, delay);
37
+ }, [delay]);
38
+
39
+ var cardComponent = function cardComponent() {
40
+ return /*#__PURE__*/React.createElement("span", {
41
+ onMouseEnter: initShowCard,
42
+ onMouseLeave: initHideCard
43
+ }, /*#__PURE__*/React.createElement(Card, {
44
+ appearance: "block",
45
+ url: url,
46
+ ui: {
47
+ hideElevation: true,
48
+ size: SmartLinkSize.Large
49
+ }
50
+ }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null)));
51
+ };
52
+
53
+ var onClose = useCallback(function () {
54
+ return setIsOpen(false);
55
+ }, []);
56
+ return /*#__PURE__*/React.createElement(Popup, {
16
57
  testId: "hover-card",
17
- tag: "span"
18
- }, children);
58
+ isOpen: isOpen,
59
+ onClose: onClose,
60
+ placement: "bottom",
61
+ content: cardComponent,
62
+ trigger: function trigger(triggerProps) {
63
+ return /*#__PURE__*/React.createElement("span", _extends({}, triggerProps, {
64
+ onMouseEnter: initShowCard,
65
+ onMouseLeave: initHideCard
66
+ }), children);
67
+ }
68
+ });
19
69
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "18.0.0",
3
+ "version": "18.0.1",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,6 +39,7 @@
39
39
  "@atlaskit/media-ui": "^21.0.0",
40
40
  "@atlaskit/modal-dialog": "^12.2.0",
41
41
  "@atlaskit/outbound-auth-flow-client": "^3.3.0",
42
+ "@atlaskit/popup": "^1.3.0",
42
43
  "@atlaskit/spinner": "^15.1.0",
43
44
  "@atlaskit/theme": "^12.1.0",
44
45
  "@atlaskit/tokens": "^0.8.0",