@atlaskit/teams-public 2.9.4 → 2.10.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 +16 -0
- package/dist/cjs/common/ui/container-icon/index.js +1 -1
- package/dist/cjs/common/ui/loom-avatar/main.js +1 -1
- package/dist/cjs/common/ui/separator/index.js +1 -1
- package/dist/cjs/common/ui/team-containers-skeleton/index.js +1 -1
- package/dist/cjs/common/ui/team-containers-skeleton/linked-container-card-skeleton/index.js +1 -1
- package/dist/cjs/common/ui/team-link-card-actions/index.js +1 -1
- package/dist/cjs/common/utils/get-container-properties.js +1 -1
- package/dist/cjs/next/common/ui/team-container-skeleton/index.js +1 -1
- package/dist/cjs/next/ui/team-containers/add-container-card/index.js +1 -1
- package/dist/cjs/next/ui/team-containers/team-link-card/index.js +1 -1
- package/dist/cjs/ui/team-containers/add-container-card/AddContainerCard.js +1 -1
- package/dist/cjs/ui/team-containers/main.js +1 -1
- package/dist/cjs/ui/team-containers/no-product-access-empty-state/index.js +1 -1
- package/dist/cjs/ui/team-containers/no-product-access-empty-state/no-product-access-icon/index.js +1 -1
- package/dist/cjs/ui/team-containers/team-link-card/index.compiled.css +0 -4
- package/dist/cjs/ui/team-containers/team-link-card/index.js +9 -149
- package/dist/cjs/ui/team-containers/team-link-card/team-link-card-title.js +1 -1
- package/dist/es2019/common/ui/container-icon/index.js +1 -1
- package/dist/es2019/common/ui/loom-avatar/main.js +1 -1
- package/dist/es2019/common/ui/separator/index.js +1 -1
- package/dist/es2019/common/ui/team-containers-skeleton/index.js +1 -1
- package/dist/es2019/common/ui/team-containers-skeleton/linked-container-card-skeleton/index.js +1 -1
- package/dist/es2019/common/ui/team-link-card-actions/index.js +1 -1
- package/dist/es2019/common/utils/get-container-properties.js +1 -1
- package/dist/es2019/next/common/ui/team-container-skeleton/index.js +1 -1
- package/dist/es2019/next/ui/team-containers/add-container-card/index.js +1 -1
- package/dist/es2019/next/ui/team-containers/team-link-card/index.js +1 -1
- package/dist/es2019/ui/team-containers/add-container-card/AddContainerCard.js +1 -1
- package/dist/es2019/ui/team-containers/main.js +1 -1
- package/dist/es2019/ui/team-containers/no-product-access-empty-state/index.js +1 -1
- package/dist/es2019/ui/team-containers/no-product-access-empty-state/no-product-access-icon/index.js +1 -1
- package/dist/es2019/ui/team-containers/team-link-card/index.compiled.css +0 -4
- package/dist/es2019/ui/team-containers/team-link-card/index.js +5 -135
- package/dist/es2019/ui/team-containers/team-link-card/team-link-card-title.js +1 -1
- package/dist/esm/common/ui/container-icon/index.js +1 -1
- package/dist/esm/common/ui/loom-avatar/main.js +1 -1
- package/dist/esm/common/ui/separator/index.js +1 -1
- package/dist/esm/common/ui/team-containers-skeleton/index.js +1 -1
- package/dist/esm/common/ui/team-containers-skeleton/linked-container-card-skeleton/index.js +1 -1
- package/dist/esm/common/ui/team-link-card-actions/index.js +1 -1
- package/dist/esm/common/utils/get-container-properties.js +1 -1
- package/dist/esm/next/common/ui/team-container-skeleton/index.js +1 -1
- package/dist/esm/next/ui/team-containers/add-container-card/index.js +1 -1
- package/dist/esm/next/ui/team-containers/team-link-card/index.js +1 -1
- package/dist/esm/ui/team-containers/add-container-card/AddContainerCard.js +1 -1
- package/dist/esm/ui/team-containers/main.js +1 -1
- package/dist/esm/ui/team-containers/no-product-access-empty-state/index.js +1 -1
- package/dist/esm/ui/team-containers/no-product-access-empty-state/no-product-access-icon/index.js +1 -1
- package/dist/esm/ui/team-containers/team-link-card/index.compiled.css +0 -4
- package/dist/esm/ui/team-containers/team-link-card/index.js +9 -149
- package/dist/esm/ui/team-containers/team-link-card/team-link-card-title.js +1 -1
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/teams-public
|
|
2
2
|
|
|
3
|
+
## 2.10.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`2c412fe430071`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2c412fe430071) -
|
|
8
|
+
Cleanup feature gate `fix_team_link_card_a11y`. The accessible team link card markup
|
|
9
|
+
(anchor-wrapped content with the shared team link card actions) is now the only behaviour.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 2.10.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [`a75866f802a52`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a75866f802a52) -
|
|
17
|
+
Update i18n NPM package versions for people-and-teams,identity (Group 8)
|
|
18
|
+
|
|
3
19
|
## 2.9.4
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
|
|
3
3
|
._12ji1l7x{outline-color:var(--ds-border,#0b120e24)}
|
|
4
4
|
._12y3e4h9{outline-width:var(--ds-border-width,1px)}
|
|
5
|
-
._16jlkb7n{flex-grow:1}
|
|
6
|
-
._18u01wug{margin-left:auto}
|
|
7
5
|
._18u0u2gc{margin-left:var(--ds-space-100,8px)}
|
|
8
6
|
._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
9
7
|
._1bah1yb4{justify-content:space-between}
|
|
@@ -11,14 +9,12 @@
|
|
|
11
9
|
._1bsb1osq{width:100%}
|
|
12
10
|
._1e0c1txw{display:flex}
|
|
13
11
|
._1hmsglyw{text-decoration-line:none}
|
|
14
|
-
._1o9zkb7n{flex-shrink:1}
|
|
15
12
|
._1qu2nqa1{outline-style:solid}
|
|
16
13
|
._4bfu1r31{text-decoration-color:currentColor}
|
|
17
14
|
._4cvr1h6o{align-items:center}
|
|
18
15
|
._ajmmnqa1{text-decoration-style:solid}
|
|
19
16
|
._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
|
|
20
17
|
._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
|
|
21
|
-
._i0dlf1ug{flex-basis:0%}
|
|
22
18
|
._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
|
|
23
19
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
24
20
|
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}._1053i7uo:visited{color:var(--ds-text,#292a2e)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -9,32 +9,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
exports.TeamLinkCard = void 0;
|
|
10
10
|
require("./index.compiled.css");
|
|
11
11
|
var _runtime = require("@compiled/react/runtime");
|
|
12
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
14
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
13
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
16
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
15
|
var _reactIntl = require("react-intl");
|
|
18
|
-
var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
|
|
19
16
|
var _css = require("@atlaskit/css");
|
|
20
|
-
var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu/dropdown-menu"));
|
|
21
|
-
var _dropdownMenuItem = _interopRequireDefault(require("@atlaskit/dropdown-menu/dropdown-menu-item"));
|
|
22
|
-
var _dropdownMenuItemGroup = _interopRequireDefault(require("@atlaskit/dropdown-menu/dropdown-menu-item-group"));
|
|
23
|
-
var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
|
|
24
17
|
var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
|
|
25
|
-
var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
|
|
26
|
-
var _link = _interopRequireDefault(require("@atlaskit/link/link"));
|
|
27
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
28
18
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
29
19
|
var _useAnalyticsEvents2 = require("@atlaskit/teams-app-internal-analytics/use-analytics-events");
|
|
30
|
-
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
|
|
31
20
|
var _containerIcon = require("../../../common/ui/container-icon");
|
|
32
21
|
var _separator = require("../../../common/ui/separator");
|
|
33
22
|
var _teamLinkCardActions = require("../../../common/ui/team-link-card-actions");
|
|
34
23
|
var _getContainerProperties = require("../../../common/utils/get-container-properties");
|
|
35
24
|
var _getDomainFromLinkUri = require("../../../common/utils/get-domain-from-link-uri");
|
|
36
25
|
var _teamLinkCardTitle = require("./team-link-card-title");
|
|
37
|
-
var _excluded = ["triggerRef"];
|
|
38
26
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
39
27
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
40
28
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -44,9 +32,6 @@ var styles = {
|
|
|
44
32
|
anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkoy0do _1bsb1osq _syazi7uo _1053i7uo _1hvwdkaa _nt751v1w _49pcnqa1 _1bg4v77o _30l3i7uo",
|
|
45
33
|
anchorNoUnderline: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3i7uo",
|
|
46
34
|
anchorWithExternalLinkIcon: "_1e0c1txw _4cvr1h6o _1bah1yb4",
|
|
47
|
-
crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
48
|
-
showMoreIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
49
|
-
linkableContent: "_16jlkb7n _1o9zkb7n _i0dlf1ug",
|
|
50
35
|
externalLinkIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u0u2gc"
|
|
51
36
|
};
|
|
52
37
|
var renderContainerTypeTextWithSeparator = function renderContainerTypeTextWithSeparator(containerTypeText, description) {
|
|
@@ -88,16 +73,12 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
88
73
|
setFocused = _useState4[1];
|
|
89
74
|
var _useState5 = (0, _react.useState)(false),
|
|
90
75
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
91
|
-
|
|
92
|
-
|
|
76
|
+
isDropdownOpen = _useState6[0],
|
|
77
|
+
setIsDropdownOpen = _useState6[1];
|
|
93
78
|
var _useState7 = (0, _react.useState)(false),
|
|
94
79
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
var _useState9 = (0, _react.useState)(false),
|
|
98
|
-
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
99
|
-
showKeyboardFocus = _useState0[0],
|
|
100
|
-
setShowKeyboardFocus = _useState0[1];
|
|
80
|
+
showKeyboardFocus = _useState8[0],
|
|
81
|
+
setShowKeyboardFocus = _useState8[1];
|
|
101
82
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
102
83
|
formatMessage = _useIntl.formatMessage;
|
|
103
84
|
var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
|
|
@@ -108,38 +89,24 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
108
89
|
return;
|
|
109
90
|
}
|
|
110
91
|
setHovered(true);
|
|
111
|
-
if (containerType !== 'WebLink') {
|
|
112
|
-
setShowCloseIcon(true);
|
|
113
|
-
}
|
|
114
92
|
};
|
|
115
93
|
var handleFocus = function handleFocus() {
|
|
116
94
|
if (isReadOnly) {
|
|
117
95
|
return;
|
|
118
96
|
}
|
|
119
97
|
setFocused(true);
|
|
120
|
-
if (containerType !== 'WebLink') {
|
|
121
|
-
setShowCloseIcon(true);
|
|
122
|
-
}
|
|
123
98
|
};
|
|
124
99
|
var handleBlur = function handleBlur() {
|
|
125
100
|
setFocused(false);
|
|
126
|
-
if (containerType !== 'WebLink' && !hovered) {
|
|
127
|
-
setShowCloseIcon(false);
|
|
128
|
-
}
|
|
129
101
|
};
|
|
130
102
|
var handleMouseLeave = function handleMouseLeave() {
|
|
131
103
|
setHovered(false);
|
|
132
|
-
if (containerType !== 'WebLink' && !focused) {
|
|
133
|
-
setShowCloseIcon(false);
|
|
134
|
-
}
|
|
135
104
|
};
|
|
136
105
|
var handleIconClick = function handleIconClick() {
|
|
137
|
-
|
|
138
|
-
setShowKeyboardFocus(false);
|
|
139
|
-
}
|
|
106
|
+
setShowKeyboardFocus(false);
|
|
140
107
|
};
|
|
141
108
|
var handleKeyDown = function handleKeyDown(e) {
|
|
142
|
-
if (
|
|
109
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Tab' || e.key === 'Escape') {
|
|
143
110
|
setShowKeyboardFocus(true);
|
|
144
111
|
}
|
|
145
112
|
};
|
|
@@ -178,7 +145,7 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
178
145
|
title: title,
|
|
179
146
|
containerIcon: containerIcon,
|
|
180
147
|
size: "medium"
|
|
181
|
-
}),
|
|
148
|
+
}), /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
|
|
182
149
|
xcss: (0, _css.cx)(styles.anchor, styles.anchorNoUnderline, isOpenWebLinkInNewTabEnabled && styles.anchorWithExternalLinkIcon),
|
|
183
150
|
href: link || '#',
|
|
184
151
|
onClick: handleLinkClick,
|
|
@@ -219,116 +186,9 @@ var TeamLinkCard = exports.TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
219
186
|
_onEditLinkClick === null || _onEditLinkClick === void 0 || _onEditLinkClick();
|
|
220
187
|
},
|
|
221
188
|
onDropdownOpenChange: setIsDropdownOpen
|
|
222
|
-
}))
|
|
223
|
-
xcss: styles.linkableContent,
|
|
224
|
-
testId: "team-link-card-linkable-content"
|
|
225
|
-
}, /*#__PURE__*/_react.default.createElement(_link.default, {
|
|
226
|
-
href: link || '#',
|
|
227
|
-
appearance: "subtle",
|
|
228
|
-
onClick: handleLinkClick
|
|
229
|
-
}, /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_teamLinkCardTitle.TeamLinkCardTitle, {
|
|
230
|
-
isTeamLensInHomeEnabled: true,
|
|
231
|
-
isOpenWebLinkInNewTabEnabled: isOpenWebLinkInNewTabEnabled,
|
|
232
|
-
link: link || '#',
|
|
233
|
-
handleLinkClick: handleLinkClick,
|
|
234
|
-
title: title
|
|
235
|
-
}), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
|
|
236
|
-
gap: "space.050",
|
|
237
|
-
alignItems: "center"
|
|
238
|
-
}, !hideSubTextIcon ? icon : null, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
|
|
239
|
-
space: "space.050",
|
|
240
|
-
alignBlock: "center"
|
|
241
|
-
}, renderContainerTypeTextWithSeparator(containerTypeText, description)))))), showCloseIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
242
|
-
xcss: styles.crossIconWrapper
|
|
243
|
-
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
|
|
244
|
-
content: formatMessage(messages.disconnectTooltip),
|
|
245
|
-
position: "top"
|
|
246
|
-
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
247
|
-
label: "disconnect the container ".concat(title),
|
|
248
|
-
appearance: "subtle",
|
|
249
|
-
icon: function icon(iconProps) {
|
|
250
|
-
return /*#__PURE__*/_react.default.createElement(_cross.default, (0, _extends2.default)({}, iconProps, {
|
|
251
|
-
size: "small"
|
|
252
|
-
}));
|
|
253
|
-
},
|
|
254
|
-
spacing: "compact",
|
|
255
|
-
onClick: function onClick(e) {
|
|
256
|
-
e.preventDefault();
|
|
257
|
-
e.stopPropagation();
|
|
258
|
-
_onDisconnectButtonClick();
|
|
259
|
-
fireEvent('ui.button.clicked.containerUnlinkButton', {
|
|
260
|
-
containerSelected: {
|
|
261
|
-
container: containerType,
|
|
262
|
-
containerId: containerId
|
|
263
|
-
}
|
|
264
|
-
});
|
|
265
|
-
}
|
|
266
|
-
}))), containerType === 'WebLink' && (hovered || isDropdownOpen) && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
267
|
-
xcss: styles.showMoreIconWrapper
|
|
268
|
-
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
|
|
269
|
-
trigger: function trigger(_ref2) {
|
|
270
|
-
var triggerRef = _ref2.triggerRef,
|
|
271
|
-
triggerProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
|
272
|
-
return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({
|
|
273
|
-
ref: triggerRef
|
|
274
|
-
}, triggerProps, {
|
|
275
|
-
label: "more options for ".concat(title),
|
|
276
|
-
appearance: "subtle",
|
|
277
|
-
icon: function icon(iconProps) {
|
|
278
|
-
return /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, (0, _extends2.default)({}, iconProps, {
|
|
279
|
-
size: "small"
|
|
280
|
-
}));
|
|
281
|
-
},
|
|
282
|
-
spacing: "compact"
|
|
283
|
-
}));
|
|
284
|
-
},
|
|
285
|
-
placement: "bottom-end",
|
|
286
|
-
shouldRenderToParent: true,
|
|
287
|
-
onOpenChange: function onOpenChange(attrs) {
|
|
288
|
-
setIsDropdownOpen(attrs.isOpen);
|
|
289
|
-
}
|
|
290
|
-
}, /*#__PURE__*/_react.default.createElement(_dropdownMenuItemGroup.default, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
|
|
291
|
-
onClick: function onClick(e) {
|
|
292
|
-
e.preventDefault();
|
|
293
|
-
e.stopPropagation();
|
|
294
|
-
_onEditLinkClick === null || _onEditLinkClick === void 0 || _onEditLinkClick();
|
|
295
|
-
fireEvent('ui.button.clicked.containerEditLinkButton', {
|
|
296
|
-
containerSelected: {
|
|
297
|
-
container: containerType,
|
|
298
|
-
containerId: containerId
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
}, formatMessage(messages.editLink)), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
|
|
303
|
-
onClick: function onClick(e) {
|
|
304
|
-
e.preventDefault();
|
|
305
|
-
e.stopPropagation();
|
|
306
|
-
_onDisconnectButtonClick();
|
|
307
|
-
fireEvent('ui.button.clicked.containerUnlinkButton', {
|
|
308
|
-
containerSelected: {
|
|
309
|
-
container: containerType,
|
|
310
|
-
containerId: containerId
|
|
311
|
-
}
|
|
312
|
-
});
|
|
313
|
-
}
|
|
314
|
-
}, formatMessage(messages.removeLink))))))));
|
|
189
|
+
})));
|
|
315
190
|
};
|
|
316
191
|
var messages = (0, _reactIntl.defineMessages)({
|
|
317
|
-
disconnectTooltip: {
|
|
318
|
-
id: 'ptc-directory.team-containers.disconnect-button.tooltip',
|
|
319
|
-
defaultMessage: 'Disconnect',
|
|
320
|
-
description: 'Tooltip for the disconnect button'
|
|
321
|
-
},
|
|
322
|
-
editLink: {
|
|
323
|
-
id: 'ptc-directory.team-containers.edit-link',
|
|
324
|
-
defaultMessage: 'Edit link',
|
|
325
|
-
description: 'Label for the edit link option in the team link card dropdown menu'
|
|
326
|
-
},
|
|
327
|
-
removeLink: {
|
|
328
|
-
id: 'ptc-directory.team-containers.remove-link',
|
|
329
|
-
defaultMessage: 'Remove',
|
|
330
|
-
description: 'Remove link option in dropdown'
|
|
331
|
-
},
|
|
332
192
|
linkExternalIconLabel: {
|
|
333
193
|
id: 'ptc-directory.team-containers.link-external-icon-label',
|
|
334
194
|
defaultMessage: 'Open link in new tab',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* get-container-properties.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* get-container-properties.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import "./get-container-properties.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* AddContainerCard.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* AddContainerCard.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./AddContainerCard.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* main.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* main.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import "./main.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
|
|
3
3
|
._12ji1l7x{outline-color:var(--ds-border,#0b120e24)}
|
|
4
4
|
._12y3e4h9{outline-width:var(--ds-border-width,1px)}
|
|
5
|
-
._16jlkb7n{flex-grow:1}
|
|
6
|
-
._18u01wug{margin-left:auto}
|
|
7
5
|
._18u0u2gc{margin-left:var(--ds-space-100,8px)}
|
|
8
6
|
._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
9
7
|
._1bah1yb4{justify-content:space-between}
|
|
@@ -11,14 +9,12 @@
|
|
|
11
9
|
._1bsb1osq{width:100%}
|
|
12
10
|
._1e0c1txw{display:flex}
|
|
13
11
|
._1hmsglyw{text-decoration-line:none}
|
|
14
|
-
._1o9zkb7n{flex-shrink:1}
|
|
15
12
|
._1qu2nqa1{outline-style:solid}
|
|
16
13
|
._4bfu1r31{text-decoration-color:currentColor}
|
|
17
14
|
._4cvr1h6o{align-items:center}
|
|
18
15
|
._ajmmnqa1{text-decoration-style:solid}
|
|
19
16
|
._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
|
|
20
17
|
._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
|
|
21
|
-
._i0dlf1ug{flex-basis:0%}
|
|
22
18
|
._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
|
|
23
19
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
24
20
|
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}._1053i7uo:visited{color:var(--ds-text,#292a2e)}
|
|
@@ -1,22 +1,12 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
2
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
3
2
|
import "./index.compiled.css";
|
|
4
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
4
|
import React, { useState } from 'react';
|
|
6
5
|
import { defineMessages, useIntl } from 'react-intl';
|
|
7
|
-
import IconButton from '@atlaskit/button/icon/button';
|
|
8
6
|
import { cx } from '@atlaskit/css';
|
|
9
|
-
import DropdownMenu from '@atlaskit/dropdown-menu/dropdown-menu';
|
|
10
|
-
import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
|
|
11
|
-
import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
|
|
12
|
-
import CrossIcon from '@atlaskit/icon/core/cross';
|
|
13
7
|
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
|
|
14
|
-
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
|
|
15
|
-
import Link from '@atlaskit/link/link';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
17
8
|
import { Anchor, Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
|
|
18
9
|
import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics/use-analytics-events';
|
|
19
|
-
import Tooltip from '@atlaskit/tooltip/Tooltip';
|
|
20
10
|
import { ContainerIcon } from '../../../common/ui/container-icon';
|
|
21
11
|
import { Separator } from '../../../common/ui/separator';
|
|
22
12
|
import { TeamLinkCardActions } from '../../../common/ui/team-link-card-actions';
|
|
@@ -29,9 +19,6 @@ const styles = {
|
|
|
29
19
|
anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkoy0do _1bsb1osq _syazi7uo _1053i7uo _1hvwdkaa _nt751v1w _49pcnqa1 _1bg4v77o _30l3i7uo",
|
|
30
20
|
anchorNoUnderline: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3i7uo",
|
|
31
21
|
anchorWithExternalLinkIcon: "_1e0c1txw _4cvr1h6o _1bah1yb4",
|
|
32
|
-
crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
33
|
-
showMoreIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
34
|
-
linkableContent: "_16jlkb7n _1o9zkb7n _i0dlf1ug",
|
|
35
22
|
externalLinkIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u0u2gc"
|
|
36
23
|
};
|
|
37
24
|
const renderContainerTypeTextWithSeparator = (containerTypeText, description) => {
|
|
@@ -67,7 +54,6 @@ export const TeamLinkCard = ({
|
|
|
67
54
|
});
|
|
68
55
|
const [hovered, setHovered] = useState(false);
|
|
69
56
|
const [focused, setFocused] = useState(false);
|
|
70
|
-
const [showCloseIcon, setShowCloseIcon] = useState(false);
|
|
71
57
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
72
58
|
const [showKeyboardFocus, setShowKeyboardFocus] = useState(false);
|
|
73
59
|
const {
|
|
@@ -82,38 +68,24 @@ export const TeamLinkCard = ({
|
|
|
82
68
|
return;
|
|
83
69
|
}
|
|
84
70
|
setHovered(true);
|
|
85
|
-
if (containerType !== 'WebLink') {
|
|
86
|
-
setShowCloseIcon(true);
|
|
87
|
-
}
|
|
88
71
|
};
|
|
89
72
|
const handleFocus = () => {
|
|
90
73
|
if (isReadOnly) {
|
|
91
74
|
return;
|
|
92
75
|
}
|
|
93
76
|
setFocused(true);
|
|
94
|
-
if (containerType !== 'WebLink') {
|
|
95
|
-
setShowCloseIcon(true);
|
|
96
|
-
}
|
|
97
77
|
};
|
|
98
78
|
const handleBlur = () => {
|
|
99
79
|
setFocused(false);
|
|
100
|
-
if (containerType !== 'WebLink' && !hovered) {
|
|
101
|
-
setShowCloseIcon(false);
|
|
102
|
-
}
|
|
103
80
|
};
|
|
104
81
|
const handleMouseLeave = () => {
|
|
105
82
|
setHovered(false);
|
|
106
|
-
if (containerType !== 'WebLink' && !focused) {
|
|
107
|
-
setShowCloseIcon(false);
|
|
108
|
-
}
|
|
109
83
|
};
|
|
110
84
|
const handleIconClick = () => {
|
|
111
|
-
|
|
112
|
-
setShowKeyboardFocus(false);
|
|
113
|
-
}
|
|
85
|
+
setShowKeyboardFocus(false);
|
|
114
86
|
};
|
|
115
87
|
const handleKeyDown = e => {
|
|
116
|
-
if (
|
|
88
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Tab' || e.key === 'Escape') {
|
|
117
89
|
setShowKeyboardFocus(true);
|
|
118
90
|
}
|
|
119
91
|
};
|
|
@@ -153,7 +125,7 @@ export const TeamLinkCard = ({
|
|
|
153
125
|
title: title,
|
|
154
126
|
containerIcon: containerIcon,
|
|
155
127
|
size: "medium"
|
|
156
|
-
}),
|
|
128
|
+
}), /*#__PURE__*/React.createElement(Anchor, {
|
|
157
129
|
xcss: cx(styles.anchor, styles.anchorNoUnderline, isOpenWebLinkInNewTabEnabled && styles.anchorWithExternalLinkIcon),
|
|
158
130
|
href: link || '#',
|
|
159
131
|
onClick: handleLinkClick,
|
|
@@ -194,111 +166,9 @@ export const TeamLinkCard = ({
|
|
|
194
166
|
onEditLinkClick === null || onEditLinkClick === void 0 ? void 0 : onEditLinkClick();
|
|
195
167
|
},
|
|
196
168
|
onDropdownOpenChange: setIsDropdownOpen
|
|
197
|
-
}))
|
|
198
|
-
xcss: styles.linkableContent,
|
|
199
|
-
testId: "team-link-card-linkable-content"
|
|
200
|
-
}, /*#__PURE__*/React.createElement(Link, {
|
|
201
|
-
href: link || '#',
|
|
202
|
-
appearance: "subtle",
|
|
203
|
-
onClick: handleLinkClick
|
|
204
|
-
}, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(TeamLinkCardTitle, {
|
|
205
|
-
isTeamLensInHomeEnabled: true,
|
|
206
|
-
isOpenWebLinkInNewTabEnabled: isOpenWebLinkInNewTabEnabled,
|
|
207
|
-
link: link || '#',
|
|
208
|
-
handleLinkClick: handleLinkClick,
|
|
209
|
-
title: title
|
|
210
|
-
}), /*#__PURE__*/React.createElement(Flex, {
|
|
211
|
-
gap: "space.050",
|
|
212
|
-
alignItems: "center"
|
|
213
|
-
}, !hideSubTextIcon ? icon : null, /*#__PURE__*/React.createElement(Inline, {
|
|
214
|
-
space: "space.050",
|
|
215
|
-
alignBlock: "center"
|
|
216
|
-
}, renderContainerTypeTextWithSeparator(containerTypeText, description)))))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
|
|
217
|
-
xcss: styles.crossIconWrapper
|
|
218
|
-
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
219
|
-
content: formatMessage(messages.disconnectTooltip),
|
|
220
|
-
position: "top"
|
|
221
|
-
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
222
|
-
label: `disconnect the container ${title}`,
|
|
223
|
-
appearance: "subtle",
|
|
224
|
-
icon: iconProps => /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
|
|
225
|
-
size: "small"
|
|
226
|
-
})),
|
|
227
|
-
spacing: "compact",
|
|
228
|
-
onClick: e => {
|
|
229
|
-
e.preventDefault();
|
|
230
|
-
e.stopPropagation();
|
|
231
|
-
onDisconnectButtonClick();
|
|
232
|
-
fireEvent('ui.button.clicked.containerUnlinkButton', {
|
|
233
|
-
containerSelected: {
|
|
234
|
-
container: containerType,
|
|
235
|
-
containerId
|
|
236
|
-
}
|
|
237
|
-
});
|
|
238
|
-
}
|
|
239
|
-
}))), containerType === 'WebLink' && (hovered || isDropdownOpen) && /*#__PURE__*/React.createElement(Box, {
|
|
240
|
-
xcss: styles.showMoreIconWrapper
|
|
241
|
-
}, /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
242
|
-
trigger: ({
|
|
243
|
-
triggerRef,
|
|
244
|
-
...triggerProps
|
|
245
|
-
}) => /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
246
|
-
ref: triggerRef
|
|
247
|
-
}, triggerProps, {
|
|
248
|
-
label: `more options for ${title}`,
|
|
249
|
-
appearance: "subtle",
|
|
250
|
-
icon: iconProps => /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, _extends({}, iconProps, {
|
|
251
|
-
size: "small"
|
|
252
|
-
})),
|
|
253
|
-
spacing: "compact"
|
|
254
|
-
})),
|
|
255
|
-
placement: "bottom-end",
|
|
256
|
-
shouldRenderToParent: true,
|
|
257
|
-
onOpenChange: attrs => {
|
|
258
|
-
setIsDropdownOpen(attrs.isOpen);
|
|
259
|
-
}
|
|
260
|
-
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
261
|
-
onClick: e => {
|
|
262
|
-
e.preventDefault();
|
|
263
|
-
e.stopPropagation();
|
|
264
|
-
onEditLinkClick === null || onEditLinkClick === void 0 ? void 0 : onEditLinkClick();
|
|
265
|
-
fireEvent('ui.button.clicked.containerEditLinkButton', {
|
|
266
|
-
containerSelected: {
|
|
267
|
-
container: containerType,
|
|
268
|
-
containerId
|
|
269
|
-
}
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
}, formatMessage(messages.editLink)), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
273
|
-
onClick: e => {
|
|
274
|
-
e.preventDefault();
|
|
275
|
-
e.stopPropagation();
|
|
276
|
-
onDisconnectButtonClick();
|
|
277
|
-
fireEvent('ui.button.clicked.containerUnlinkButton', {
|
|
278
|
-
containerSelected: {
|
|
279
|
-
container: containerType,
|
|
280
|
-
containerId
|
|
281
|
-
}
|
|
282
|
-
});
|
|
283
|
-
}
|
|
284
|
-
}, formatMessage(messages.removeLink))))))));
|
|
169
|
+
})));
|
|
285
170
|
};
|
|
286
171
|
const messages = defineMessages({
|
|
287
|
-
disconnectTooltip: {
|
|
288
|
-
id: 'ptc-directory.team-containers.disconnect-button.tooltip',
|
|
289
|
-
defaultMessage: 'Disconnect',
|
|
290
|
-
description: 'Tooltip for the disconnect button'
|
|
291
|
-
},
|
|
292
|
-
editLink: {
|
|
293
|
-
id: 'ptc-directory.team-containers.edit-link',
|
|
294
|
-
defaultMessage: 'Edit link',
|
|
295
|
-
description: 'Label for the edit link option in the team link card dropdown menu'
|
|
296
|
-
},
|
|
297
|
-
removeLink: {
|
|
298
|
-
id: 'ptc-directory.team-containers.remove-link',
|
|
299
|
-
defaultMessage: 'Remove',
|
|
300
|
-
description: 'Remove link option in dropdown'
|
|
301
|
-
},
|
|
302
172
|
linkExternalIconLabel: {
|
|
303
173
|
id: 'ptc-directory.team-containers.link-external-icon-label',
|
|
304
174
|
defaultMessage: 'Open link in new tab',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* team-link-card-title.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* team-link-card-title.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import "./team-link-card-title.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./index.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import "./index.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["triggerRef"];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* get-container-properties.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* get-container-properties.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import "./get-container-properties.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import "./index.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import "./index.compiled.css";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* AddContainerCard.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* AddContainerCard.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import "./AddContainerCard.compiled.css";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* main.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* main.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import "./main.compiled.css";
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
|
|
3
3
|
._12ji1l7x{outline-color:var(--ds-border,#0b120e24)}
|
|
4
4
|
._12y3e4h9{outline-width:var(--ds-border-width,1px)}
|
|
5
|
-
._16jlkb7n{flex-grow:1}
|
|
6
|
-
._18u01wug{margin-left:auto}
|
|
7
5
|
._18u0u2gc{margin-left:var(--ds-space-100,8px)}
|
|
8
6
|
._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
9
7
|
._1bah1yb4{justify-content:space-between}
|
|
@@ -11,14 +9,12 @@
|
|
|
11
9
|
._1bsb1osq{width:100%}
|
|
12
10
|
._1e0c1txw{display:flex}
|
|
13
11
|
._1hmsglyw{text-decoration-line:none}
|
|
14
|
-
._1o9zkb7n{flex-shrink:1}
|
|
15
12
|
._1qu2nqa1{outline-style:solid}
|
|
16
13
|
._4bfu1r31{text-decoration-color:currentColor}
|
|
17
14
|
._4cvr1h6o{align-items:center}
|
|
18
15
|
._ajmmnqa1{text-decoration-style:solid}
|
|
19
16
|
._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
|
|
20
17
|
._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
|
|
21
|
-
._i0dlf1ug{flex-basis:0%}
|
|
22
18
|
._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
|
|
23
19
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
24
20
|
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}._1053i7uo:visited{color:var(--ds-text,#292a2e)}
|
|
@@ -1,28 +1,16 @@
|
|
|
1
|
-
/* index.tsx generated by @compiled/babel-plugin
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
1
|
+
/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
4
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
5
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
6
|
-
var _excluded = ["triggerRef"];
|
|
7
4
|
import "./index.compiled.css";
|
|
8
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
9
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
8
|
import React, { useState } from 'react';
|
|
12
9
|
import { defineMessages, useIntl } from 'react-intl';
|
|
13
|
-
import IconButton from '@atlaskit/button/icon/button';
|
|
14
10
|
import { cx } from '@atlaskit/css';
|
|
15
|
-
import DropdownMenu from '@atlaskit/dropdown-menu/dropdown-menu';
|
|
16
|
-
import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
|
|
17
|
-
import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
|
|
18
|
-
import CrossIcon from '@atlaskit/icon/core/cross';
|
|
19
11
|
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
|
|
20
|
-
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
|
|
21
|
-
import Link from '@atlaskit/link/link';
|
|
22
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
23
12
|
import { Anchor, Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
|
|
24
13
|
import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics/use-analytics-events';
|
|
25
|
-
import Tooltip from '@atlaskit/tooltip/Tooltip';
|
|
26
14
|
import { ContainerIcon } from '../../../common/ui/container-icon';
|
|
27
15
|
import { Separator } from '../../../common/ui/separator';
|
|
28
16
|
import { TeamLinkCardActions } from '../../../common/ui/team-link-card-actions';
|
|
@@ -35,9 +23,6 @@ var styles = {
|
|
|
35
23
|
anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rkoy0do _1bsb1osq _syazi7uo _1053i7uo _1hvwdkaa _nt751v1w _49pcnqa1 _1bg4v77o _30l3i7uo",
|
|
36
24
|
anchorNoUnderline: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3i7uo",
|
|
37
25
|
anchorWithExternalLinkIcon: "_1e0c1txw _4cvr1h6o _1bah1yb4",
|
|
38
|
-
crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
39
|
-
showMoreIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
|
|
40
|
-
linkableContent: "_16jlkb7n _1o9zkb7n _i0dlf1ug",
|
|
41
26
|
externalLinkIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u0u2gc"
|
|
42
27
|
};
|
|
43
28
|
var renderContainerTypeTextWithSeparator = function renderContainerTypeTextWithSeparator(containerTypeText, description) {
|
|
@@ -79,16 +64,12 @@ export var TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
79
64
|
setFocused = _useState4[1];
|
|
80
65
|
var _useState5 = useState(false),
|
|
81
66
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
82
|
-
|
|
83
|
-
|
|
67
|
+
isDropdownOpen = _useState6[0],
|
|
68
|
+
setIsDropdownOpen = _useState6[1];
|
|
84
69
|
var _useState7 = useState(false),
|
|
85
70
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
var _useState9 = useState(false),
|
|
89
|
-
_useState0 = _slicedToArray(_useState9, 2),
|
|
90
|
-
showKeyboardFocus = _useState0[0],
|
|
91
|
-
setShowKeyboardFocus = _useState0[1];
|
|
71
|
+
showKeyboardFocus = _useState8[0],
|
|
72
|
+
setShowKeyboardFocus = _useState8[1];
|
|
92
73
|
var _useIntl = useIntl(),
|
|
93
74
|
formatMessage = _useIntl.formatMessage;
|
|
94
75
|
var _useAnalyticsEvents = useAnalyticsEvents(),
|
|
@@ -99,38 +80,24 @@ export var TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
99
80
|
return;
|
|
100
81
|
}
|
|
101
82
|
setHovered(true);
|
|
102
|
-
if (containerType !== 'WebLink') {
|
|
103
|
-
setShowCloseIcon(true);
|
|
104
|
-
}
|
|
105
83
|
};
|
|
106
84
|
var handleFocus = function handleFocus() {
|
|
107
85
|
if (isReadOnly) {
|
|
108
86
|
return;
|
|
109
87
|
}
|
|
110
88
|
setFocused(true);
|
|
111
|
-
if (containerType !== 'WebLink') {
|
|
112
|
-
setShowCloseIcon(true);
|
|
113
|
-
}
|
|
114
89
|
};
|
|
115
90
|
var handleBlur = function handleBlur() {
|
|
116
91
|
setFocused(false);
|
|
117
|
-
if (containerType !== 'WebLink' && !hovered) {
|
|
118
|
-
setShowCloseIcon(false);
|
|
119
|
-
}
|
|
120
92
|
};
|
|
121
93
|
var handleMouseLeave = function handleMouseLeave() {
|
|
122
94
|
setHovered(false);
|
|
123
|
-
if (containerType !== 'WebLink' && !focused) {
|
|
124
|
-
setShowCloseIcon(false);
|
|
125
|
-
}
|
|
126
95
|
};
|
|
127
96
|
var handleIconClick = function handleIconClick() {
|
|
128
|
-
|
|
129
|
-
setShowKeyboardFocus(false);
|
|
130
|
-
}
|
|
97
|
+
setShowKeyboardFocus(false);
|
|
131
98
|
};
|
|
132
99
|
var handleKeyDown = function handleKeyDown(e) {
|
|
133
|
-
if (
|
|
100
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Tab' || e.key === 'Escape') {
|
|
134
101
|
setShowKeyboardFocus(true);
|
|
135
102
|
}
|
|
136
103
|
};
|
|
@@ -169,7 +136,7 @@ export var TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
169
136
|
title: title,
|
|
170
137
|
containerIcon: containerIcon,
|
|
171
138
|
size: "medium"
|
|
172
|
-
}),
|
|
139
|
+
}), /*#__PURE__*/React.createElement(Anchor, {
|
|
173
140
|
xcss: cx(styles.anchor, styles.anchorNoUnderline, isOpenWebLinkInNewTabEnabled && styles.anchorWithExternalLinkIcon),
|
|
174
141
|
href: link || '#',
|
|
175
142
|
onClick: handleLinkClick,
|
|
@@ -210,116 +177,9 @@ export var TeamLinkCard = function TeamLinkCard(_ref) {
|
|
|
210
177
|
_onEditLinkClick === null || _onEditLinkClick === void 0 || _onEditLinkClick();
|
|
211
178
|
},
|
|
212
179
|
onDropdownOpenChange: setIsDropdownOpen
|
|
213
|
-
}))
|
|
214
|
-
xcss: styles.linkableContent,
|
|
215
|
-
testId: "team-link-card-linkable-content"
|
|
216
|
-
}, /*#__PURE__*/React.createElement(Link, {
|
|
217
|
-
href: link || '#',
|
|
218
|
-
appearance: "subtle",
|
|
219
|
-
onClick: handleLinkClick
|
|
220
|
-
}, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(TeamLinkCardTitle, {
|
|
221
|
-
isTeamLensInHomeEnabled: true,
|
|
222
|
-
isOpenWebLinkInNewTabEnabled: isOpenWebLinkInNewTabEnabled,
|
|
223
|
-
link: link || '#',
|
|
224
|
-
handleLinkClick: handleLinkClick,
|
|
225
|
-
title: title
|
|
226
|
-
}), /*#__PURE__*/React.createElement(Flex, {
|
|
227
|
-
gap: "space.050",
|
|
228
|
-
alignItems: "center"
|
|
229
|
-
}, !hideSubTextIcon ? icon : null, /*#__PURE__*/React.createElement(Inline, {
|
|
230
|
-
space: "space.050",
|
|
231
|
-
alignBlock: "center"
|
|
232
|
-
}, renderContainerTypeTextWithSeparator(containerTypeText, description)))))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
|
|
233
|
-
xcss: styles.crossIconWrapper
|
|
234
|
-
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
235
|
-
content: formatMessage(messages.disconnectTooltip),
|
|
236
|
-
position: "top"
|
|
237
|
-
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
238
|
-
label: "disconnect the container ".concat(title),
|
|
239
|
-
appearance: "subtle",
|
|
240
|
-
icon: function icon(iconProps) {
|
|
241
|
-
return /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
|
|
242
|
-
size: "small"
|
|
243
|
-
}));
|
|
244
|
-
},
|
|
245
|
-
spacing: "compact",
|
|
246
|
-
onClick: function onClick(e) {
|
|
247
|
-
e.preventDefault();
|
|
248
|
-
e.stopPropagation();
|
|
249
|
-
_onDisconnectButtonClick();
|
|
250
|
-
fireEvent('ui.button.clicked.containerUnlinkButton', {
|
|
251
|
-
containerSelected: {
|
|
252
|
-
container: containerType,
|
|
253
|
-
containerId: containerId
|
|
254
|
-
}
|
|
255
|
-
});
|
|
256
|
-
}
|
|
257
|
-
}))), containerType === 'WebLink' && (hovered || isDropdownOpen) && /*#__PURE__*/React.createElement(Box, {
|
|
258
|
-
xcss: styles.showMoreIconWrapper
|
|
259
|
-
}, /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
260
|
-
trigger: function trigger(_ref2) {
|
|
261
|
-
var triggerRef = _ref2.triggerRef,
|
|
262
|
-
triggerProps = _objectWithoutProperties(_ref2, _excluded);
|
|
263
|
-
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
264
|
-
ref: triggerRef
|
|
265
|
-
}, triggerProps, {
|
|
266
|
-
label: "more options for ".concat(title),
|
|
267
|
-
appearance: "subtle",
|
|
268
|
-
icon: function icon(iconProps) {
|
|
269
|
-
return /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, _extends({}, iconProps, {
|
|
270
|
-
size: "small"
|
|
271
|
-
}));
|
|
272
|
-
},
|
|
273
|
-
spacing: "compact"
|
|
274
|
-
}));
|
|
275
|
-
},
|
|
276
|
-
placement: "bottom-end",
|
|
277
|
-
shouldRenderToParent: true,
|
|
278
|
-
onOpenChange: function onOpenChange(attrs) {
|
|
279
|
-
setIsDropdownOpen(attrs.isOpen);
|
|
280
|
-
}
|
|
281
|
-
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
282
|
-
onClick: function onClick(e) {
|
|
283
|
-
e.preventDefault();
|
|
284
|
-
e.stopPropagation();
|
|
285
|
-
_onEditLinkClick === null || _onEditLinkClick === void 0 || _onEditLinkClick();
|
|
286
|
-
fireEvent('ui.button.clicked.containerEditLinkButton', {
|
|
287
|
-
containerSelected: {
|
|
288
|
-
container: containerType,
|
|
289
|
-
containerId: containerId
|
|
290
|
-
}
|
|
291
|
-
});
|
|
292
|
-
}
|
|
293
|
-
}, formatMessage(messages.editLink)), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
294
|
-
onClick: function onClick(e) {
|
|
295
|
-
e.preventDefault();
|
|
296
|
-
e.stopPropagation();
|
|
297
|
-
_onDisconnectButtonClick();
|
|
298
|
-
fireEvent('ui.button.clicked.containerUnlinkButton', {
|
|
299
|
-
containerSelected: {
|
|
300
|
-
container: containerType,
|
|
301
|
-
containerId: containerId
|
|
302
|
-
}
|
|
303
|
-
});
|
|
304
|
-
}
|
|
305
|
-
}, formatMessage(messages.removeLink))))))));
|
|
180
|
+
})));
|
|
306
181
|
};
|
|
307
182
|
var messages = defineMessages({
|
|
308
|
-
disconnectTooltip: {
|
|
309
|
-
id: 'ptc-directory.team-containers.disconnect-button.tooltip',
|
|
310
|
-
defaultMessage: 'Disconnect',
|
|
311
|
-
description: 'Tooltip for the disconnect button'
|
|
312
|
-
},
|
|
313
|
-
editLink: {
|
|
314
|
-
id: 'ptc-directory.team-containers.edit-link',
|
|
315
|
-
defaultMessage: 'Edit link',
|
|
316
|
-
description: 'Label for the edit link option in the team link card dropdown menu'
|
|
317
|
-
},
|
|
318
|
-
removeLink: {
|
|
319
|
-
id: 'ptc-directory.team-containers.remove-link',
|
|
320
|
-
defaultMessage: 'Remove',
|
|
321
|
-
description: 'Remove link option in dropdown'
|
|
322
|
-
},
|
|
323
183
|
linkExternalIconLabel: {
|
|
324
184
|
id: 'ptc-directory.team-containers.link-external-icon-label',
|
|
325
185
|
defaultMessage: 'Open link in new tab',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* team-link-card-title.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* team-link-card-title.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import "./team-link-card-title.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
package/package.json
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
],
|
|
24
24
|
"atlaskit:src": "src/index.ts",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@atlaskit/afm-i18n-platform-people-and-teams-teams-public": "2.
|
|
26
|
+
"@atlaskit/afm-i18n-platform-people-and-teams-teams-public": "2.243.0",
|
|
27
27
|
"@atlaskit/analytics-next": "^12.5.0",
|
|
28
28
|
"@atlaskit/avatar": "^28.0.0",
|
|
29
29
|
"@atlaskit/button": "^25.3.0",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"react-intl": "^7.0.0"
|
|
78
78
|
},
|
|
79
79
|
"name": "@atlaskit/teams-public",
|
|
80
|
-
"version": "2.
|
|
80
|
+
"version": "2.10.1",
|
|
81
81
|
"description": "Public components related to teams",
|
|
82
82
|
"author": "Atlassian Pty Ltd",
|
|
83
83
|
"license": "Apache-2.0",
|
|
@@ -89,9 +89,6 @@
|
|
|
89
89
|
"test:coverage": "(cd ../../.. && yarn test 'packages/people-and-teams/teams-public/src' --coverage --coverageProvider=v8 --collectCoverageFrom='[\"packages/people-and-teams/teams-public/src/**\", \"!packages/people-and-teams/teams-public/src/**/**/types.ts\", \"!packages/people-and-teams/teams-public/src/ui/**/styled.tsx\"]')"
|
|
90
90
|
},
|
|
91
91
|
"platform-feature-flags": {
|
|
92
|
-
"fix_team_link_card_a11y": {
|
|
93
|
-
"type": "boolean"
|
|
94
|
-
},
|
|
95
92
|
"migrate-product-permissions": {
|
|
96
93
|
"type": "boolean"
|
|
97
94
|
},
|