@atlaskit/smart-card 24.3.2 → 25.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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/state/hooks/use-invoke/index.js +37 -0
- package/dist/cjs/state/hooks/use-invoke/types.js +17 -0
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/error-boundary/index.js +28 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/index.js +138 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js +24 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.js +31 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/types.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/index.js +52 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/type.js +5 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/styled.js +16 -0
- package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/types.js +5 -0
- package/dist/es2019/state/hooks/use-invoke/index.js +10 -0
- package/dist/es2019/state/hooks/use-invoke/types.js +9 -0
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/error-boundary/index.js +13 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/index.js +75 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js +13 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.js +21 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/types.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/index.js +36 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/type.js +1 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/styled.js +53 -0
- package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/types.js +1 -0
- package/dist/esm/state/hooks/use-invoke/index.js +29 -0
- package/dist/esm/state/hooks/use-invoke/types.js +9 -0
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/error-boundary/index.js +17 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/index.js +126 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js +14 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.js +20 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/types.js +1 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/index.js +45 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/type.js +1 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/styled.js +6 -0
- package/dist/esm/view/FlexibleCard/components/common/lozenge-action/types.js +1 -0
- package/dist/types/state/hooks/use-invoke/index.d.ts +3 -0
- package/dist/types/state/hooks/use-invoke/types.d.ts +10 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/error-boundary/index.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/index.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.d.ts +5 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/types.d.ts +6 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/index.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/type.d.ts +7 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/styled.d.ts +3 -0
- package/dist/types/view/FlexibleCard/components/common/lozenge-action/types.d.ts +12 -0
- package/package.json +3 -3
- package/report.api.md +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/smart-card
|
|
2
2
|
|
|
3
|
+
## 25.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c687cc0de52`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c687cc0de52) - Add lozenge action component (WIP)
|
|
8
|
+
|
|
9
|
+
## 25.0.0
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 24.3.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
9
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var useInvoke = function useInvoke() {
|
|
12
|
+
return (0, _react.useCallback)( /*#__PURE__*/function () {
|
|
13
|
+
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action) {
|
|
14
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
15
|
+
while (1) {
|
|
16
|
+
switch (_context.prev = _context.next) {
|
|
17
|
+
case 0:
|
|
18
|
+
_context.next = 2;
|
|
19
|
+
return new Promise(function (resolve) {
|
|
20
|
+
resolve();
|
|
21
|
+
});
|
|
22
|
+
case 2:
|
|
23
|
+
return _context.abrupt("return", _context.sent);
|
|
24
|
+
case 3:
|
|
25
|
+
case "end":
|
|
26
|
+
return _context.stop();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}, _callee);
|
|
30
|
+
}));
|
|
31
|
+
return function (_x) {
|
|
32
|
+
return _ref.apply(this, arguments);
|
|
33
|
+
};
|
|
34
|
+
}(), []);
|
|
35
|
+
};
|
|
36
|
+
var _default = useInvoke;
|
|
37
|
+
exports.default = _default;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.InvokeActionName = exports.InvokeActionError = void 0;
|
|
7
|
+
var InvokeActionName;
|
|
8
|
+
exports.InvokeActionName = InvokeActionName;
|
|
9
|
+
(function (InvokeActionName) {
|
|
10
|
+
InvokeActionName["UpdateAction"] = "UpdateAction";
|
|
11
|
+
})(InvokeActionName || (exports.InvokeActionName = InvokeActionName = {}));
|
|
12
|
+
var InvokeActionError;
|
|
13
|
+
exports.InvokeActionError = InvokeActionError;
|
|
14
|
+
(function (InvokeActionError) {
|
|
15
|
+
InvokeActionError["NoData"] = "NoData";
|
|
16
|
+
InvokeActionError["Unknown"] = "Unknown";
|
|
17
|
+
})(InvokeActionError || (exports.InvokeActionError = InvokeActionError = {}));
|
package/dist/cjs/version.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _reactErrorBoundary = require("react-error-boundary");
|
|
11
|
+
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
var withErrorBoundary = function withErrorBoundary(Component) {
|
|
15
|
+
return function (props) {
|
|
16
|
+
var fallback = (0, _react.useMemo)(function () {
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_lozenge.default, {
|
|
18
|
+
appearance: props === null || props === void 0 ? void 0 : props.appearance,
|
|
19
|
+
testId: "".concat(props === null || props === void 0 ? void 0 : props.testId, "-fallback")
|
|
20
|
+
}, props === null || props === void 0 ? void 0 : props.text);
|
|
21
|
+
}, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
|
|
23
|
+
fallback: fallback
|
|
24
|
+
}, /*#__PURE__*/_react.default.createElement(Component, props));
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
var _default = withErrorBoundary;
|
|
28
|
+
exports.default = _default;
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
var _react = require("@emotion/react");
|
|
14
|
+
var _react2 = require("react");
|
|
15
|
+
var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
|
|
16
|
+
var _lozengeActionItem = _interopRequireDefault(require("./lozenge-action-item"));
|
|
17
|
+
var _lozengeActionTrigger = _interopRequireDefault(require("./lozenge-action-trigger"));
|
|
18
|
+
var _lozengeActionError = _interopRequireDefault(require("./lozenge-action-error"));
|
|
19
|
+
var _errorBoundary = _interopRequireDefault(require("./error-boundary"));
|
|
20
|
+
var _useInvoke = _interopRequireDefault(require("../../../../../state/hooks/use-invoke"));
|
|
21
|
+
var _types = require("../../../../../state/hooks/use-invoke/types");
|
|
22
|
+
var _styled = require("./styled");
|
|
23
|
+
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); }
|
|
24
|
+
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; }
|
|
25
|
+
/** @jsx jsx */
|
|
26
|
+
|
|
27
|
+
var LozengeAction = function LozengeAction(_ref) {
|
|
28
|
+
var action = _ref.action,
|
|
29
|
+
appearance = _ref.appearance,
|
|
30
|
+
_ref$testId = _ref.testId,
|
|
31
|
+
testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
|
|
32
|
+
text = _ref.text;
|
|
33
|
+
var _useState = (0, _react2.useState)(false),
|
|
34
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
35
|
+
isLoaded = _useState2[0],
|
|
36
|
+
setIsLoaded = _useState2[1];
|
|
37
|
+
var _useState3 = (0, _react2.useState)(false),
|
|
38
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
39
|
+
isLoading = _useState4[0],
|
|
40
|
+
setIsLoading = _useState4[1];
|
|
41
|
+
var _useState5 = (0, _react2.useState)(),
|
|
42
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
43
|
+
items = _useState6[0],
|
|
44
|
+
setItems = _useState6[1];
|
|
45
|
+
var _useState7 = (0, _react2.useState)(),
|
|
46
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
47
|
+
errorCode = _useState8[0],
|
|
48
|
+
setErrorCode = _useState8[1];
|
|
49
|
+
var invoke = (0, _useInvoke.default)();
|
|
50
|
+
var onOpenChange = (0, _react2.useCallback)( /*#__PURE__*/function () {
|
|
51
|
+
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(args) {
|
|
52
|
+
var lozengeItems;
|
|
53
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
54
|
+
while (1) {
|
|
55
|
+
switch (_context.prev = _context.next) {
|
|
56
|
+
case 0:
|
|
57
|
+
if (!(args.isOpen && !isLoaded && action)) {
|
|
58
|
+
_context.next = 20;
|
|
59
|
+
break;
|
|
60
|
+
}
|
|
61
|
+
_context.prev = 1;
|
|
62
|
+
setIsLoading(true);
|
|
63
|
+
_context.next = 5;
|
|
64
|
+
return invoke(action);
|
|
65
|
+
case 5:
|
|
66
|
+
_context.t0 = _context.sent;
|
|
67
|
+
if (_context.t0) {
|
|
68
|
+
_context.next = 8;
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
_context.t0 = [];
|
|
72
|
+
case 8:
|
|
73
|
+
lozengeItems = _context.t0;
|
|
74
|
+
setItems(lozengeItems);
|
|
75
|
+
setIsLoaded(true);
|
|
76
|
+
if (lozengeItems.length === 0) {
|
|
77
|
+
setErrorCode(_types.InvokeActionError.NoData);
|
|
78
|
+
}
|
|
79
|
+
_context.next = 17;
|
|
80
|
+
break;
|
|
81
|
+
case 14:
|
|
82
|
+
_context.prev = 14;
|
|
83
|
+
_context.t1 = _context["catch"](1);
|
|
84
|
+
// TODO: EDM-5746 and EDM-5782
|
|
85
|
+
setErrorCode(_types.InvokeActionError.Unknown);
|
|
86
|
+
case 17:
|
|
87
|
+
_context.prev = 17;
|
|
88
|
+
setIsLoading(false);
|
|
89
|
+
return _context.finish(17);
|
|
90
|
+
case 20:
|
|
91
|
+
case "end":
|
|
92
|
+
return _context.stop();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}, _callee, null, [[1, 14, 17, 20]]);
|
|
96
|
+
}));
|
|
97
|
+
return function (_x) {
|
|
98
|
+
return _ref2.apply(this, arguments);
|
|
99
|
+
};
|
|
100
|
+
}(), [action, invoke, isLoaded]);
|
|
101
|
+
var trigger = (0, _react2.useCallback)(function (props) {
|
|
102
|
+
return (0, _react.jsx)(_lozengeActionTrigger.default, (0, _extends2.default)({}, props, {
|
|
103
|
+
appearance: appearance,
|
|
104
|
+
testId: testId,
|
|
105
|
+
text: text
|
|
106
|
+
}));
|
|
107
|
+
}, [appearance, testId, text]);
|
|
108
|
+
var dropdownItemGroup = (0, _react2.useMemo)(function () {
|
|
109
|
+
if (items && items.length > 0) {
|
|
110
|
+
return (0, _react.jsx)("span", {
|
|
111
|
+
css: _styled.dropdownItemGroupStyles
|
|
112
|
+
}, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, items.map(function (_ref3, idx) {
|
|
113
|
+
var appearance = _ref3.appearance,
|
|
114
|
+
text = _ref3.text;
|
|
115
|
+
return (0, _react.jsx)(_lozengeActionItem.default, {
|
|
116
|
+
appearance: appearance,
|
|
117
|
+
key: idx,
|
|
118
|
+
testId: "".concat(testId, "-item-").concat(idx),
|
|
119
|
+
text: text
|
|
120
|
+
});
|
|
121
|
+
})));
|
|
122
|
+
}
|
|
123
|
+
if (errorCode) {
|
|
124
|
+
return (0, _react.jsx)(_lozengeActionError.default, {
|
|
125
|
+
errorCode: errorCode,
|
|
126
|
+
testId: testId
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
}, [errorCode, items, testId]);
|
|
130
|
+
return (0, _react.jsx)(_dropdownMenu.default, {
|
|
131
|
+
isLoading: isLoading,
|
|
132
|
+
onOpenChange: onOpenChange,
|
|
133
|
+
testId: testId,
|
|
134
|
+
trigger: trigger
|
|
135
|
+
}, dropdownItemGroup);
|
|
136
|
+
};
|
|
137
|
+
var _default = (0, _errorBoundary.default)(LozengeAction);
|
|
138
|
+
exports.default = _default;
|
package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _dropdownMenu = require("@atlaskit/dropdown-menu");
|
|
10
|
+
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); }
|
|
11
|
+
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; }
|
|
12
|
+
var LozengeActionError = function LozengeActionError(_ref) {
|
|
13
|
+
var errorCode = _ref.errorCode,
|
|
14
|
+
testId = _ref.testId;
|
|
15
|
+
// TODO: EDM-5746 and EDM-5782
|
|
16
|
+
var content = (0, _react.useMemo)(function () {
|
|
17
|
+
return errorCode;
|
|
18
|
+
}, [errorCode]);
|
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
20
|
+
testId: "".concat(testId, "-error")
|
|
21
|
+
}, content));
|
|
22
|
+
};
|
|
23
|
+
var _default = LozengeActionError;
|
|
24
|
+
exports.default = _default;
|
package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _dropdownMenu = require("@atlaskit/dropdown-menu");
|
|
11
|
+
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
var LozengeActionItem = function LozengeActionItem(_ref) {
|
|
15
|
+
var appearance = _ref.appearance,
|
|
16
|
+
testId = _ref.testId,
|
|
17
|
+
text = _ref.text;
|
|
18
|
+
var onMouseEnter = (0, _react.useCallback)(function (e) {
|
|
19
|
+
var _e$currentTarget, _e$currentTarget$firs;
|
|
20
|
+
(_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$firs = _e$currentTarget.firstElementChild) === null || _e$currentTarget$firs === void 0 ? void 0 : _e$currentTarget$firs.focus();
|
|
21
|
+
}, []);
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
23
|
+
onMouseEnter: onMouseEnter
|
|
24
|
+
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
25
|
+
testId: testId
|
|
26
|
+
}, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
|
|
27
|
+
appearance: appearance
|
|
28
|
+
}, text)));
|
|
29
|
+
};
|
|
30
|
+
var _default = LozengeActionItem;
|
|
31
|
+
exports.default = _default;
|
package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/index.js
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
+
var _react = require("@emotion/react");
|
|
12
|
+
var _react2 = require("react");
|
|
13
|
+
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
|
|
14
|
+
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
|
|
15
|
+
var _styled = require("../styled");
|
|
16
|
+
var _excluded = ["appearance", "testId", "text", "triggerRef"];
|
|
17
|
+
var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
|
|
18
|
+
var appearance = _ref.appearance,
|
|
19
|
+
testId = _ref.testId,
|
|
20
|
+
text = _ref.text,
|
|
21
|
+
triggerRef = _ref.triggerRef,
|
|
22
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
23
|
+
var _useState = (0, _react2.useState)(false),
|
|
24
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
25
|
+
isBold = _useState2[0],
|
|
26
|
+
setIsBold = _useState2[1];
|
|
27
|
+
var onMouseEnter = (0, _react2.useCallback)(function () {
|
|
28
|
+
return setIsBold(true);
|
|
29
|
+
}, []);
|
|
30
|
+
var onMouseLeave = (0, _react2.useCallback)(function () {
|
|
31
|
+
return setIsBold(false);
|
|
32
|
+
}, []);
|
|
33
|
+
return (0, _react.jsx)("button", (0, _extends2.default)({
|
|
34
|
+
type: "button"
|
|
35
|
+
}, props, {
|
|
36
|
+
css: _styled.triggerButtonStyles,
|
|
37
|
+
"data-testid": "".concat(testId, "--trigger"),
|
|
38
|
+
onMouseEnter: onMouseEnter,
|
|
39
|
+
onMouseLeave: onMouseLeave,
|
|
40
|
+
ref: triggerRef
|
|
41
|
+
}), (0, _react.jsx)(_lozenge.default, {
|
|
42
|
+
appearance: appearance,
|
|
43
|
+
isBold: isBold
|
|
44
|
+
}, (0, _react.jsx)("span", {
|
|
45
|
+
css: _styled.triggerLozengeStyles
|
|
46
|
+
}, (0, _react.jsx)("span", null, text), (0, _react.jsx)(_chevronDown.default, {
|
|
47
|
+
label: "options",
|
|
48
|
+
size: "medium"
|
|
49
|
+
}))));
|
|
50
|
+
};
|
|
51
|
+
var _default = LozengeActionTrigger;
|
|
52
|
+
exports.default = _default;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.triggerLozengeStyles = exports.triggerButtonStyles = exports.dropdownItemGroupStyles = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
11
|
+
var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n all: unset;\n background-color: transparent;\n color: unset;\n cursor: pointer;\n font-family: unset;\n font-size: unset;\n font-style: unset;\n font-weight: unset;\n font-variant: unset;\n line-height: 0;\n padding: 0;\n text-transform: unset;\n\n border: 2px solid transparent;\n margin: -2px;\n\n &:focus-visible,\n &:focus-within,\n &[aria-expanded='true'] {\n outline: none;\n box-shadow: 0 0 0 2px ", ";\n border-radius: 5px;\n }\n"])), "var(--ds-border-focused, #388BFF)");
|
|
12
|
+
exports.triggerButtonStyles = triggerButtonStyles;
|
|
13
|
+
var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n display: flex;\n\n span[role='img'] {\n margin: -4px -8px -4px -1px;\n }\n"])));
|
|
14
|
+
exports.triggerLozengeStyles = triggerLozengeStyles;
|
|
15
|
+
var dropdownItemGroupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n button {\n padding: 6px 12px;\n min-height: 28px;\n width: 220px;\n\n &:hover {\n background-color: inherit;\n }\n\n &:focus,\n &:focus-visible {\n background-color: ", ";\n box-sizing: border-box;\n box-shadow: inset 2px 0 0 ", ";\n outline: none;\n }\n }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
|
|
16
|
+
exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export let InvokeActionName;
|
|
2
|
+
(function (InvokeActionName) {
|
|
3
|
+
InvokeActionName["UpdateAction"] = "UpdateAction";
|
|
4
|
+
})(InvokeActionName || (InvokeActionName = {}));
|
|
5
|
+
export let InvokeActionError;
|
|
6
|
+
(function (InvokeActionError) {
|
|
7
|
+
InvokeActionError["NoData"] = "NoData";
|
|
8
|
+
InvokeActionError["Unknown"] = "Unknown";
|
|
9
|
+
})(InvokeActionError || (InvokeActionError = {}));
|
package/dist/es2019/version.json
CHANGED
package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/error-boundary/index.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { ErrorBoundary } from 'react-error-boundary';
|
|
3
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
4
|
+
const withErrorBoundary = Component => props => {
|
|
5
|
+
const fallback = useMemo(() => /*#__PURE__*/React.createElement(Lozenge, {
|
|
6
|
+
appearance: props === null || props === void 0 ? void 0 : props.appearance,
|
|
7
|
+
testId: `${props === null || props === void 0 ? void 0 : props.testId}-fallback`
|
|
8
|
+
}, props === null || props === void 0 ? void 0 : props.text), [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
|
|
9
|
+
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
10
|
+
fallback: fallback
|
|
11
|
+
}, /*#__PURE__*/React.createElement(Component, props));
|
|
12
|
+
};
|
|
13
|
+
export default withErrorBoundary;
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
5
|
+
import DropdownMenu, { DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
6
|
+
import LozengeActionItem from './lozenge-action-item';
|
|
7
|
+
import LozengeActionTrigger from './lozenge-action-trigger';
|
|
8
|
+
import LozengeActionError from './lozenge-action-error';
|
|
9
|
+
import withErrorBoundary from './error-boundary';
|
|
10
|
+
import useInvoke from '../../../../../state/hooks/use-invoke';
|
|
11
|
+
import { InvokeActionError } from '../../../../../state/hooks/use-invoke/types';
|
|
12
|
+
import { dropdownItemGroupStyles } from './styled';
|
|
13
|
+
const LozengeAction = ({
|
|
14
|
+
action,
|
|
15
|
+
appearance,
|
|
16
|
+
testId = 'smart-element-lozenge-action',
|
|
17
|
+
text
|
|
18
|
+
}) => {
|
|
19
|
+
const [isLoaded, setIsLoaded] = useState(false);
|
|
20
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
21
|
+
const [items, setItems] = useState();
|
|
22
|
+
const [errorCode, setErrorCode] = useState();
|
|
23
|
+
const invoke = useInvoke();
|
|
24
|
+
const onOpenChange = useCallback(async args => {
|
|
25
|
+
if (args.isOpen && !isLoaded && action) {
|
|
26
|
+
try {
|
|
27
|
+
setIsLoading(true);
|
|
28
|
+
const lozengeItems = (await invoke(action)) || [];
|
|
29
|
+
setItems(lozengeItems);
|
|
30
|
+
setIsLoaded(true);
|
|
31
|
+
if (lozengeItems.length === 0) {
|
|
32
|
+
setErrorCode(InvokeActionError.NoData);
|
|
33
|
+
}
|
|
34
|
+
} catch (err) {
|
|
35
|
+
// TODO: EDM-5746 and EDM-5782
|
|
36
|
+
setErrorCode(InvokeActionError.Unknown);
|
|
37
|
+
} finally {
|
|
38
|
+
setIsLoading(false);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}, [action, invoke, isLoaded]);
|
|
42
|
+
const trigger = useCallback(props => jsx(LozengeActionTrigger, _extends({}, props, {
|
|
43
|
+
appearance: appearance,
|
|
44
|
+
testId: testId,
|
|
45
|
+
text: text
|
|
46
|
+
})), [appearance, testId, text]);
|
|
47
|
+
const dropdownItemGroup = useMemo(() => {
|
|
48
|
+
if (items && items.length > 0) {
|
|
49
|
+
return jsx("span", {
|
|
50
|
+
css: dropdownItemGroupStyles
|
|
51
|
+
}, jsx(DropdownItemGroup, null, items.map(({
|
|
52
|
+
appearance,
|
|
53
|
+
text
|
|
54
|
+
}, idx) => jsx(LozengeActionItem, {
|
|
55
|
+
appearance: appearance,
|
|
56
|
+
key: idx,
|
|
57
|
+
testId: `${testId}-item-${idx}`,
|
|
58
|
+
text: text
|
|
59
|
+
}))));
|
|
60
|
+
}
|
|
61
|
+
if (errorCode) {
|
|
62
|
+
return jsx(LozengeActionError, {
|
|
63
|
+
errorCode: errorCode,
|
|
64
|
+
testId: testId
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}, [errorCode, items, testId]);
|
|
68
|
+
return jsx(DropdownMenu, {
|
|
69
|
+
isLoading: isLoading,
|
|
70
|
+
onOpenChange: onOpenChange,
|
|
71
|
+
testId: testId,
|
|
72
|
+
trigger: trigger
|
|
73
|
+
}, dropdownItemGroup);
|
|
74
|
+
};
|
|
75
|
+
export default withErrorBoundary(LozengeAction);
|
package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
3
|
+
const LozengeActionError = ({
|
|
4
|
+
errorCode,
|
|
5
|
+
testId
|
|
6
|
+
}) => {
|
|
7
|
+
// TODO: EDM-5746 and EDM-5782
|
|
8
|
+
const content = useMemo(() => errorCode, [errorCode]);
|
|
9
|
+
return /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
10
|
+
testId: `${testId}-error`
|
|
11
|
+
}, content));
|
|
12
|
+
};
|
|
13
|
+
export default LozengeActionError;
|
package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { DropdownItem } from '@atlaskit/dropdown-menu';
|
|
3
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
4
|
+
const LozengeActionItem = ({
|
|
5
|
+
appearance,
|
|
6
|
+
testId,
|
|
7
|
+
text
|
|
8
|
+
}) => {
|
|
9
|
+
const onMouseEnter = useCallback(e => {
|
|
10
|
+
var _e$currentTarget, _e$currentTarget$firs;
|
|
11
|
+
(_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$firs = _e$currentTarget.firstElementChild) === null || _e$currentTarget$firs === void 0 ? void 0 : _e$currentTarget$firs.focus();
|
|
12
|
+
}, []);
|
|
13
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
14
|
+
onMouseEnter: onMouseEnter
|
|
15
|
+
}, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
16
|
+
testId: testId
|
|
17
|
+
}, /*#__PURE__*/React.createElement(Lozenge, {
|
|
18
|
+
appearance: appearance
|
|
19
|
+
}, text)));
|
|
20
|
+
};
|
|
21
|
+
export default LozengeActionItem;
|
package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
import { useCallback, useState } from 'react';
|
|
5
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
6
|
+
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
7
|
+
import { triggerButtonStyles, triggerLozengeStyles } from '../styled';
|
|
8
|
+
const LozengeActionTrigger = ({
|
|
9
|
+
appearance,
|
|
10
|
+
testId,
|
|
11
|
+
text,
|
|
12
|
+
triggerRef,
|
|
13
|
+
...props
|
|
14
|
+
}) => {
|
|
15
|
+
const [isBold, setIsBold] = useState(false);
|
|
16
|
+
const onMouseEnter = useCallback(() => setIsBold(true), []);
|
|
17
|
+
const onMouseLeave = useCallback(() => setIsBold(false), []);
|
|
18
|
+
return jsx("button", _extends({
|
|
19
|
+
type: "button"
|
|
20
|
+
}, props, {
|
|
21
|
+
css: triggerButtonStyles,
|
|
22
|
+
"data-testid": `${testId}--trigger`,
|
|
23
|
+
onMouseEnter: onMouseEnter,
|
|
24
|
+
onMouseLeave: onMouseLeave,
|
|
25
|
+
ref: triggerRef
|
|
26
|
+
}), jsx(Lozenge, {
|
|
27
|
+
appearance: appearance,
|
|
28
|
+
isBold: isBold
|
|
29
|
+
}, jsx("span", {
|
|
30
|
+
css: triggerLozengeStyles
|
|
31
|
+
}, jsx("span", null, text), jsx(ChevronDownIcon, {
|
|
32
|
+
label: "options",
|
|
33
|
+
size: "medium"
|
|
34
|
+
}))));
|
|
35
|
+
};
|
|
36
|
+
export default LozengeActionTrigger;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { css } from '@emotion/react';
|
|
2
|
+
export const triggerButtonStyles = css`
|
|
3
|
+
all: unset;
|
|
4
|
+
background-color: transparent;
|
|
5
|
+
color: unset;
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
font-family: unset;
|
|
8
|
+
font-size: unset;
|
|
9
|
+
font-style: unset;
|
|
10
|
+
font-weight: unset;
|
|
11
|
+
font-variant: unset;
|
|
12
|
+
line-height: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
text-transform: unset;
|
|
15
|
+
|
|
16
|
+
border: 2px solid transparent;
|
|
17
|
+
margin: -2px;
|
|
18
|
+
|
|
19
|
+
&:focus-visible,
|
|
20
|
+
&:focus-within,
|
|
21
|
+
&[aria-expanded='true'] {
|
|
22
|
+
outline: none;
|
|
23
|
+
box-shadow: 0 0 0 2px ${"var(--ds-border-focused, #388BFF)"};
|
|
24
|
+
border-radius: 5px;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
export const triggerLozengeStyles = css`
|
|
28
|
+
align-items: center;
|
|
29
|
+
display: flex;
|
|
30
|
+
|
|
31
|
+
span[role='img'] {
|
|
32
|
+
margin: -4px -8px -4px -1px;
|
|
33
|
+
}
|
|
34
|
+
`;
|
|
35
|
+
export const dropdownItemGroupStyles = css`
|
|
36
|
+
button {
|
|
37
|
+
padding: 6px 12px;
|
|
38
|
+
min-height: 28px;
|
|
39
|
+
width: 220px;
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
background-color: inherit;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:focus,
|
|
46
|
+
&:focus-visible {
|
|
47
|
+
background-color: ${"var(--ds-background-neutral-subtle-hovered, #091E420F)"};
|
|
48
|
+
box-sizing: border-box;
|
|
49
|
+
box-shadow: inset 2px 0 0 ${"var(--ds-border-selected, #0C66E4)"};
|
|
50
|
+
outline: none;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
|
+
var useInvoke = function useInvoke() {
|
|
5
|
+
return useCallback( /*#__PURE__*/function () {
|
|
6
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(action) {
|
|
7
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
8
|
+
while (1) {
|
|
9
|
+
switch (_context.prev = _context.next) {
|
|
10
|
+
case 0:
|
|
11
|
+
_context.next = 2;
|
|
12
|
+
return new Promise(function (resolve) {
|
|
13
|
+
resolve();
|
|
14
|
+
});
|
|
15
|
+
case 2:
|
|
16
|
+
return _context.abrupt("return", _context.sent);
|
|
17
|
+
case 3:
|
|
18
|
+
case "end":
|
|
19
|
+
return _context.stop();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}, _callee);
|
|
23
|
+
}));
|
|
24
|
+
return function (_x) {
|
|
25
|
+
return _ref.apply(this, arguments);
|
|
26
|
+
};
|
|
27
|
+
}(), []);
|
|
28
|
+
};
|
|
29
|
+
export default useInvoke;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export var InvokeActionName;
|
|
2
|
+
(function (InvokeActionName) {
|
|
3
|
+
InvokeActionName["UpdateAction"] = "UpdateAction";
|
|
4
|
+
})(InvokeActionName || (InvokeActionName = {}));
|
|
5
|
+
export var InvokeActionError;
|
|
6
|
+
(function (InvokeActionError) {
|
|
7
|
+
InvokeActionError["NoData"] = "NoData";
|
|
8
|
+
InvokeActionError["Unknown"] = "Unknown";
|
|
9
|
+
})(InvokeActionError || (InvokeActionError = {}));
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { ErrorBoundary } from 'react-error-boundary';
|
|
3
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
4
|
+
var withErrorBoundary = function withErrorBoundary(Component) {
|
|
5
|
+
return function (props) {
|
|
6
|
+
var fallback = useMemo(function () {
|
|
7
|
+
return /*#__PURE__*/React.createElement(Lozenge, {
|
|
8
|
+
appearance: props === null || props === void 0 ? void 0 : props.appearance,
|
|
9
|
+
testId: "".concat(props === null || props === void 0 ? void 0 : props.testId, "-fallback")
|
|
10
|
+
}, props === null || props === void 0 ? void 0 : props.text);
|
|
11
|
+
}, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
|
|
12
|
+
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
13
|
+
fallback: fallback
|
|
14
|
+
}, /*#__PURE__*/React.createElement(Component, props));
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export default withErrorBoundary;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
5
|
+
/** @jsx jsx */
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
7
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
8
|
+
import DropdownMenu, { DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
9
|
+
import LozengeActionItem from './lozenge-action-item';
|
|
10
|
+
import LozengeActionTrigger from './lozenge-action-trigger';
|
|
11
|
+
import LozengeActionError from './lozenge-action-error';
|
|
12
|
+
import withErrorBoundary from './error-boundary';
|
|
13
|
+
import useInvoke from '../../../../../state/hooks/use-invoke';
|
|
14
|
+
import { InvokeActionError } from '../../../../../state/hooks/use-invoke/types';
|
|
15
|
+
import { dropdownItemGroupStyles } from './styled';
|
|
16
|
+
var LozengeAction = function LozengeAction(_ref) {
|
|
17
|
+
var action = _ref.action,
|
|
18
|
+
appearance = _ref.appearance,
|
|
19
|
+
_ref$testId = _ref.testId,
|
|
20
|
+
testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
|
|
21
|
+
text = _ref.text;
|
|
22
|
+
var _useState = useState(false),
|
|
23
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
24
|
+
isLoaded = _useState2[0],
|
|
25
|
+
setIsLoaded = _useState2[1];
|
|
26
|
+
var _useState3 = useState(false),
|
|
27
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
28
|
+
isLoading = _useState4[0],
|
|
29
|
+
setIsLoading = _useState4[1];
|
|
30
|
+
var _useState5 = useState(),
|
|
31
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
32
|
+
items = _useState6[0],
|
|
33
|
+
setItems = _useState6[1];
|
|
34
|
+
var _useState7 = useState(),
|
|
35
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
36
|
+
errorCode = _useState8[0],
|
|
37
|
+
setErrorCode = _useState8[1];
|
|
38
|
+
var invoke = useInvoke();
|
|
39
|
+
var onOpenChange = useCallback( /*#__PURE__*/function () {
|
|
40
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(args) {
|
|
41
|
+
var lozengeItems;
|
|
42
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
43
|
+
while (1) {
|
|
44
|
+
switch (_context.prev = _context.next) {
|
|
45
|
+
case 0:
|
|
46
|
+
if (!(args.isOpen && !isLoaded && action)) {
|
|
47
|
+
_context.next = 20;
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
_context.prev = 1;
|
|
51
|
+
setIsLoading(true);
|
|
52
|
+
_context.next = 5;
|
|
53
|
+
return invoke(action);
|
|
54
|
+
case 5:
|
|
55
|
+
_context.t0 = _context.sent;
|
|
56
|
+
if (_context.t0) {
|
|
57
|
+
_context.next = 8;
|
|
58
|
+
break;
|
|
59
|
+
}
|
|
60
|
+
_context.t0 = [];
|
|
61
|
+
case 8:
|
|
62
|
+
lozengeItems = _context.t0;
|
|
63
|
+
setItems(lozengeItems);
|
|
64
|
+
setIsLoaded(true);
|
|
65
|
+
if (lozengeItems.length === 0) {
|
|
66
|
+
setErrorCode(InvokeActionError.NoData);
|
|
67
|
+
}
|
|
68
|
+
_context.next = 17;
|
|
69
|
+
break;
|
|
70
|
+
case 14:
|
|
71
|
+
_context.prev = 14;
|
|
72
|
+
_context.t1 = _context["catch"](1);
|
|
73
|
+
// TODO: EDM-5746 and EDM-5782
|
|
74
|
+
setErrorCode(InvokeActionError.Unknown);
|
|
75
|
+
case 17:
|
|
76
|
+
_context.prev = 17;
|
|
77
|
+
setIsLoading(false);
|
|
78
|
+
return _context.finish(17);
|
|
79
|
+
case 20:
|
|
80
|
+
case "end":
|
|
81
|
+
return _context.stop();
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}, _callee, null, [[1, 14, 17, 20]]);
|
|
85
|
+
}));
|
|
86
|
+
return function (_x) {
|
|
87
|
+
return _ref2.apply(this, arguments);
|
|
88
|
+
};
|
|
89
|
+
}(), [action, invoke, isLoaded]);
|
|
90
|
+
var trigger = useCallback(function (props) {
|
|
91
|
+
return jsx(LozengeActionTrigger, _extends({}, props, {
|
|
92
|
+
appearance: appearance,
|
|
93
|
+
testId: testId,
|
|
94
|
+
text: text
|
|
95
|
+
}));
|
|
96
|
+
}, [appearance, testId, text]);
|
|
97
|
+
var dropdownItemGroup = useMemo(function () {
|
|
98
|
+
if (items && items.length > 0) {
|
|
99
|
+
return jsx("span", {
|
|
100
|
+
css: dropdownItemGroupStyles
|
|
101
|
+
}, jsx(DropdownItemGroup, null, items.map(function (_ref3, idx) {
|
|
102
|
+
var appearance = _ref3.appearance,
|
|
103
|
+
text = _ref3.text;
|
|
104
|
+
return jsx(LozengeActionItem, {
|
|
105
|
+
appearance: appearance,
|
|
106
|
+
key: idx,
|
|
107
|
+
testId: "".concat(testId, "-item-").concat(idx),
|
|
108
|
+
text: text
|
|
109
|
+
});
|
|
110
|
+
})));
|
|
111
|
+
}
|
|
112
|
+
if (errorCode) {
|
|
113
|
+
return jsx(LozengeActionError, {
|
|
114
|
+
errorCode: errorCode,
|
|
115
|
+
testId: testId
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}, [errorCode, items, testId]);
|
|
119
|
+
return jsx(DropdownMenu, {
|
|
120
|
+
isLoading: isLoading,
|
|
121
|
+
onOpenChange: onOpenChange,
|
|
122
|
+
testId: testId,
|
|
123
|
+
trigger: trigger
|
|
124
|
+
}, dropdownItemGroup);
|
|
125
|
+
};
|
|
126
|
+
export default withErrorBoundary(LozengeAction);
|
package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
3
|
+
var LozengeActionError = function LozengeActionError(_ref) {
|
|
4
|
+
var errorCode = _ref.errorCode,
|
|
5
|
+
testId = _ref.testId;
|
|
6
|
+
// TODO: EDM-5746 and EDM-5782
|
|
7
|
+
var content = useMemo(function () {
|
|
8
|
+
return errorCode;
|
|
9
|
+
}, [errorCode]);
|
|
10
|
+
return /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
11
|
+
testId: "".concat(testId, "-error")
|
|
12
|
+
}, content));
|
|
13
|
+
};
|
|
14
|
+
export default LozengeActionError;
|
package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { DropdownItem } from '@atlaskit/dropdown-menu';
|
|
3
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
4
|
+
var LozengeActionItem = function LozengeActionItem(_ref) {
|
|
5
|
+
var appearance = _ref.appearance,
|
|
6
|
+
testId = _ref.testId,
|
|
7
|
+
text = _ref.text;
|
|
8
|
+
var onMouseEnter = useCallback(function (e) {
|
|
9
|
+
var _e$currentTarget, _e$currentTarget$firs;
|
|
10
|
+
(_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$firs = _e$currentTarget.firstElementChild) === null || _e$currentTarget$firs === void 0 ? void 0 : _e$currentTarget$firs.focus();
|
|
11
|
+
}, []);
|
|
12
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
13
|
+
onMouseEnter: onMouseEnter
|
|
14
|
+
}, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
15
|
+
testId: testId
|
|
16
|
+
}, /*#__PURE__*/React.createElement(Lozenge, {
|
|
17
|
+
appearance: appearance
|
|
18
|
+
}, text)));
|
|
19
|
+
};
|
|
20
|
+
export default LozengeActionItem;
|
package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/index.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["appearance", "testId", "text", "triggerRef"];
|
|
5
|
+
/** @jsx jsx */
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
7
|
+
import { useCallback, useState } from 'react';
|
|
8
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
9
|
+
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
10
|
+
import { triggerButtonStyles, triggerLozengeStyles } from '../styled';
|
|
11
|
+
var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
|
|
12
|
+
var appearance = _ref.appearance,
|
|
13
|
+
testId = _ref.testId,
|
|
14
|
+
text = _ref.text,
|
|
15
|
+
triggerRef = _ref.triggerRef,
|
|
16
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
17
|
+
var _useState = useState(false),
|
|
18
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
+
isBold = _useState2[0],
|
|
20
|
+
setIsBold = _useState2[1];
|
|
21
|
+
var onMouseEnter = useCallback(function () {
|
|
22
|
+
return setIsBold(true);
|
|
23
|
+
}, []);
|
|
24
|
+
var onMouseLeave = useCallback(function () {
|
|
25
|
+
return setIsBold(false);
|
|
26
|
+
}, []);
|
|
27
|
+
return jsx("button", _extends({
|
|
28
|
+
type: "button"
|
|
29
|
+
}, props, {
|
|
30
|
+
css: triggerButtonStyles,
|
|
31
|
+
"data-testid": "".concat(testId, "--trigger"),
|
|
32
|
+
onMouseEnter: onMouseEnter,
|
|
33
|
+
onMouseLeave: onMouseLeave,
|
|
34
|
+
ref: triggerRef
|
|
35
|
+
}), jsx(Lozenge, {
|
|
36
|
+
appearance: appearance,
|
|
37
|
+
isBold: isBold
|
|
38
|
+
}, jsx("span", {
|
|
39
|
+
css: triggerLozengeStyles
|
|
40
|
+
}, jsx("span", null, text), jsx(ChevronDownIcon, {
|
|
41
|
+
label: "options",
|
|
42
|
+
size: "medium"
|
|
43
|
+
}))));
|
|
44
|
+
};
|
|
45
|
+
export default LozengeActionTrigger;
|
package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/type.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
3
|
+
import { css } from '@emotion/react';
|
|
4
|
+
export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n all: unset;\n background-color: transparent;\n color: unset;\n cursor: pointer;\n font-family: unset;\n font-size: unset;\n font-style: unset;\n font-weight: unset;\n font-variant: unset;\n line-height: 0;\n padding: 0;\n text-transform: unset;\n\n border: 2px solid transparent;\n margin: -2px;\n\n &:focus-visible,\n &:focus-within,\n &[aria-expanded='true'] {\n outline: none;\n box-shadow: 0 0 0 2px ", ";\n border-radius: 5px;\n }\n"])), "var(--ds-border-focused, #388BFF)");
|
|
5
|
+
export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n\n span[role='img'] {\n margin: -4px -8px -4px -1px;\n }\n"])));
|
|
6
|
+
export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n button {\n padding: 6px 12px;\n min-height: 28px;\n width: 220px;\n\n &:hover {\n background-color: inherit;\n }\n\n &:focus,\n &:focus-visible {\n background-color: ", ";\n box-sizing: border-box;\n box-shadow: inset 2px 0 0 ", ";\n outline: none;\n }\n }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ThemeAppearance } from '@atlaskit/lozenge';
|
|
2
|
+
import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
|
|
3
|
+
export declare type LozengeActionTriggerProps = {
|
|
4
|
+
appearance?: ThemeAppearance;
|
|
5
|
+
testId?: string;
|
|
6
|
+
text: string;
|
|
7
|
+
} & CustomTriggerProps<HTMLButtonElement>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ThemeAppearance } from '@atlaskit/lozenge';
|
|
2
|
+
import type { InvokeAction } from '../../../../../state/hooks/use-invoke/types';
|
|
3
|
+
export declare type LozengeItem = {
|
|
4
|
+
appearance?: ThemeAppearance;
|
|
5
|
+
text: string;
|
|
6
|
+
};
|
|
7
|
+
export declare type LozengeActionProps = {
|
|
8
|
+
action?: InvokeAction;
|
|
9
|
+
appearance?: ThemeAppearance;
|
|
10
|
+
testId?: string;
|
|
11
|
+
text: string;
|
|
12
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/smart-card",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.1",
|
|
4
4
|
"description": "Smart card component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@atlaskit/icon-object": "^6.2.0",
|
|
34
34
|
"@atlaskit/icon-priority": "^6.3.0",
|
|
35
35
|
"@atlaskit/in-product-testing": "^0.1.0",
|
|
36
|
-
"@atlaskit/linking-common": "^2.
|
|
36
|
+
"@atlaskit/linking-common": "^2.2.0",
|
|
37
37
|
"@atlaskit/logo": "^13.11.0",
|
|
38
38
|
"@atlaskit/lozenge": "^11.3.0",
|
|
39
39
|
"@atlaskit/media-common": "^2.19.0",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"uuid": "^3.1.0"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
|
-
"@atlaskit/link-provider": "^1.
|
|
61
|
+
"@atlaskit/link-provider": "^1.5.0",
|
|
62
62
|
"react": "^16.8.0",
|
|
63
63
|
"react-dom": "^16.8.0",
|
|
64
64
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
package/report.api.md
CHANGED