@atlaskit/teams-public 1.1.1 → 1.2.0

package/dist/types-ts4.5/ui/team-containers/main.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type TeamContainerProps } from './types';
-export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
-export declare const ICON_COLOR: "var(--ds-icon-subtle)";
+export declare const ICON_BACKGROUND: 'var(--ds-icon-inverse)';
+export declare const ICON_COLOR: 'var(--ds-icon-subtle)';
 export declare const MAX_NUMBER_OF_CONTAINERS_TO_SHOW = 4;
 export declare const TeamContainers: ({ teamId, onAddAContainerClick, onEditContainerClick, components, userId, cloudId, filterContainerId, isDisplayedOnProfileCard, isReadOnly, onError, maxNumberOfContainersToShow, elemBeforeCards, hideSubTextIcon, }: TeamContainerProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/team-containers/team-link-card/index.d.ts

@@ -12,10 +12,8 @@ export interface TeamLinkCardProps {
         subType?: ContainerSubTypes;
         name?: string;
     };
-    iconsLoading?: boolean;
-    iconHasLoaded?: boolean;
     openInNewTab?: boolean;
     isReadOnly?: boolean;
     hideSubTextIcon?: boolean;
 }
-export declare const TeamLinkCard: ({ containerType, title, containerIcon, link, containerId, containerTypeProperties, onDisconnectButtonClick, onEditLinkClick, iconsLoading, iconHasLoaded, openInNewTab, isReadOnly, hideSubTextIcon, }: TeamLinkCardProps) => React.JSX.Element;
+export declare const TeamLinkCard: ({ containerType, title, containerIcon, link, containerId, containerTypeProperties, onDisconnectButtonClick, onEditLinkClick, openInNewTab, isReadOnly, hideSubTextIcon, }: TeamLinkCardProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/team-containers/types.d.ts

@@ -2,7 +2,7 @@ import { type ComponentType } from 'react';
 import type { GridProps } from '@atlaskit/primitives/compiled';
 import { type TeamContainersSkeletonProps } from '../../common/ui/team-containers-skeleton';
 import type { AddContainerCardProps } from './add-container-card';
-import { type LinkedContainerCardProps } from './linked-container-card';
+import { type TeamLinkCardProps } from './team-link-card';
 export type FlagType = FlagAppearance;
 type FlagAppearance = 'error' | 'info' | 'normal' | 'success' | 'warning';
 export interface Flag {
@@ -75,7 +75,7 @@ export interface TeamContainersEmptyStateProps {
     hasNoPermissions?: boolean;
 }
 export interface TeamContainersComponent {
-    ContainerCard?: ComponentType<LinkedContainerCardProps>;
+    ContainerCard?: ComponentType<TeamLinkCardProps>;
     TeamContainersSkeleton?: ComponentType<TeamContainersSkeletonProps>;
     TeamContainersEmptyState?: ComponentType<TeamContainersEmptyStateProps>;
     AddContainerCard?: ComponentType<AddContainerCardProps>;

package/package.json

@@ -33,27 +33,27 @@
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-people-and-teams-teams-public": "2.39.0",
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/avatar": "^25.11.0",
+		"@atlaskit/avatar": "^25.14.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.2.0",
+		"@atlaskit/icon": "^34.3.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^14.15.0",
+		"@atlaskit/modal-dialog": "^14.18.0",
 		"@atlaskit/people-teams-ui-public": "^4.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/teams-app-internal-analytics": "^1.27.0",
-		"@atlaskit/teams-app-internal-navigation": "^1.8.0",
+		"@atlaskit/teams-app-internal-navigation": "^1.9.0",
 		"@atlaskit/teams-app-internal-product-permissions": "^1.3.0",
 		"@atlaskit/teams-client": "^4.32.0",
-		"@atlaskit/tile": "^1.0.0",
+		"@atlaskit/tile": "^1.1.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^21.1.0",
+		"@atlaskit/tooltip": "^21.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"@types/string-hash": "^1.1.3",
@@ -76,7 +76,7 @@
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ptc-test-utils": "^0.12.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
-		"@atlassian/teams-app-internal-playground": "^2.1.0",
+		"@atlassian/teams-app-internal-playground": "^2.3.0",
 		"@atlassian/testing-library": "^0.5.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -118,7 +118,7 @@
 		}
 	},
 	"name": "@atlaskit/teams-public",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "Public components related to teams",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",

package/dist/cjs/ui/team-containers/linked-container-card/index.compiled.css

@@ -1,23 +0,0 @@
-
-._2rkoy0do{border-radius:var(--ds-radius-small,8px)}
-._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}._12ji1l7x{outline-color:var(--ds-border,#0b120e24)}
-._12y3e4h9{outline-width:var(--ds-border-width,1px)}
-._18u01wug{margin-left:auto}
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
-._1bah1h6o{justify-content:center}
-._1bahesu3{justify-content:flex-end}
-._1bsb1osq{width:100%}
-._1bsb1u1b{width:34px}
-._1bsbzwfg{width:2pc}
-._1e0c1txw{display:flex}
-._1qu2nqa1{outline-style:solid}
-._1tkezwfg{min-height:2pc}
-._1ul9zwfg{min-width:2pc}
-._4cvr1h6o{align-items:center}
-._4t3i1u1b{height:34px}
-._4t3izwfg{height:2pc}
-._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
-._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
-._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
-._syazi7uo{color:var(--ds-text,#292a2e)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/cjs/ui/team-containers/linked-container-card/index.js

@@ -1,173 +0,0 @@
-/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LinkedContainerCard = void 0;
-require("./index.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactIntl = require("react-intl");
-var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
-var _new = require("@atlaskit/button/new");
-var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
-var _link = _interopRequireDefault(require("@atlaskit/link"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _compiled = require("@atlaskit/primitives/compiled");
-var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _loomAvatar = require("../../../common/ui/loom-avatar");
-var _getContainerProperties = require("../../../common/utils/get-container-properties");
-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); }
-var messages = (0, _reactIntl.defineMessages)({
-  disconnectTooltip: {
-    id: 'ptc-directory.team-containers.disconnect-button.tooltip',
-    defaultMessage: 'Disconnect',
-    description: 'Tooltip for the disconnect button'
-  }
-});
-var styles = {
-  container: "_2rkoy0do _1h6d8yml _12y3e4h9 _12ji1l7x _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syazi7uo",
-  card: "_4cvr1h6o _1bsb1osq",
-  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
-  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
-  linkIconWrapper: "_2rkoy0do _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12ji1l7x _1qu2nqa1 _bfhkhfxm"
-};
-var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
-  var children = _ref.children,
-    href = _ref.href,
-    handleMouseEnter = _ref.handleMouseEnter,
-    handleMouseLeave = _ref.handleMouseLeave,
-    containerType = _ref.containerType,
-    containerId = _ref.containerId;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    hovered = _useState2[0],
-    setHovered = _useState2[1];
-  var onMouseEnter = function onMouseEnter() {
-    handleMouseEnter();
-    setHovered(true);
-  };
-  var _useAnalyticsEvents = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
-    fireEvent = _useAnalyticsEvents.fireEvent;
-  var onMouseLeave = function onMouseLeave() {
-    handleMouseLeave();
-    setHovered(false);
-  };
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',
-    xcss: styles.container,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    testId: "linked-container-card-inner"
-  }, /*#__PURE__*/_react.default.createElement(_link.default, {
-    href: href,
-    appearance: "subtle",
-    onClick: function onClick() {
-      fireEvent('ui.container.clicked.teamContainer', {
-        containerSelected: {
-          container: containerType,
-          containerId: containerId
-        }
-      });
-    }
-  }, children));
-};
-var getContainerIcon = function getContainerIcon(containerType, title, containerIcon) {
-  if (containerType === 'LoomSpace') {
-    return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
-      spaceName: title,
-      size: 'medium',
-      testId: "linked-container-icon"
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement(_avatar.default, {
-    appearance: "square",
-    size: "medium",
-    src: containerIcon,
-    testId: "linked-container-icon"
-  });
-};
-var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainerCard(_ref2) {
-  var containerType = _ref2.containerType,
-    title = _ref2.title,
-    containerIcon = _ref2.containerIcon,
-    link = _ref2.link,
-    containerId = _ref2.containerId,
-    containerTypeProperties = _ref2.containerTypeProperties,
-    onDisconnectButtonClick = _ref2.onDisconnectButtonClick;
-  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
-      containerType: containerType,
-      iconSize: (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? 'medium' : 'small',
-      containerTypeProperties: containerTypeProperties
-    }),
-    description = _getContainerProperti.description,
-    icon = _getContainerProperti.icon,
-    containerTypeText = _getContainerProperti.containerTypeText;
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    showCloseIcon = _useState4[0],
-    setShowCloseIcon = _useState4[1];
-  var _useIntl = (0, _reactIntl.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var _useAnalyticsEvents2 = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
-    fireEvent = _useAnalyticsEvents2.fireEvent;
-  return /*#__PURE__*/_react.default.createElement(LinkedCardWrapper, {
-    href: link || '#',
-    handleMouseEnter: function handleMouseEnter() {
-      return setShowCloseIcon(true);
-    },
-    handleMouseLeave: function handleMouseLeave() {
-      return setShowCloseIcon(false);
-    },
-    containerType: containerType,
-    containerId: containerId
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
-    space: "space.100",
-    xcss: styles.card
-  }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/_react.default.createElement(_compiled.Stack, (0, _platformFeatureFlags.fg)('enable_medium_size_icons_for_team_link_cards') ? {
-    space: 'space.025'
-  } : {}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    maxLines: 1,
-    weight: "medium",
-    color: "color.text"
-  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
-    gap: "space.050",
-    alignItems: "center"
-  }, icon, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
-    space: "space.050"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, containerTypeText)))), showCloseIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.crossIconWrapper
-  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    content: formatMessage(messages.disconnectTooltip),
-    position: "top"
-  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
-    label: "disconnect the container ".concat(title),
-    appearance: "subtle",
-    icon: function icon(iconProps) {
-      return /*#__PURE__*/_react.default.createElement(_cross.default, (0, _extends2.default)({}, iconProps, {
-        size: "small"
-      }));
-    },
-    spacing: "compact",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      onDisconnectButtonClick();
-      fireEvent('ui.button.clicked.containerUnlinkButton', {
-        containerSelected: null
-      });
-    }
-  })))));
-};

package/dist/es2019/ui/team-containers/linked-container-card/index.compiled.css

@@ -1,23 +0,0 @@
-
-._2rkoy0do{border-radius:var(--ds-radius-small,8px)}
-._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}._12ji1l7x{outline-color:var(--ds-border,#0b120e24)}
-._12y3e4h9{outline-width:var(--ds-border-width,1px)}
-._18u01wug{margin-left:auto}
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
-._1bah1h6o{justify-content:center}
-._1bahesu3{justify-content:flex-end}
-._1bsb1osq{width:100%}
-._1bsb1u1b{width:34px}
-._1bsbzwfg{width:2pc}
-._1e0c1txw{display:flex}
-._1qu2nqa1{outline-style:solid}
-._1tkezwfg{min-height:2pc}
-._1ul9zwfg{min-width:2pc}
-._4cvr1h6o{align-items:center}
-._4t3i1u1b{height:34px}
-._4t3izwfg{height:2pc}
-._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
-._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
-._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
-._syazi7uo{color:var(--ds-text,#292a2e)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/es2019/ui/team-containers/linked-container-card/index.js

@@ -1,157 +0,0 @@
-/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
-import _extends from "@babel/runtime/helpers/extends";
-import "./index.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import Avatar from '@atlaskit/avatar';
-import { IconButton } from '@atlaskit/button/new';
-import CrossIcon from '@atlaskit/icon/core/cross';
-import Link from '@atlaskit/link';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
-import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
-import Tooltip from '@atlaskit/tooltip';
-import { LoomSpaceAvatar } from '../../../common/ui/loom-avatar';
-import { getContainerProperties } from '../../../common/utils/get-container-properties';
-const messages = defineMessages({
-  disconnectTooltip: {
-    id: 'ptc-directory.team-containers.disconnect-button.tooltip',
-    defaultMessage: 'Disconnect',
-    description: 'Tooltip for the disconnect button'
-  }
-});
-const styles = {
-  container: "_2rkoy0do _1h6d8yml _12y3e4h9 _12ji1l7x _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syazi7uo",
-  card: "_4cvr1h6o _1bsb1osq",
-  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
-  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
-  linkIconWrapper: "_2rkoy0do _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12ji1l7x _1qu2nqa1 _bfhkhfxm"
-};
-const LinkedCardWrapper = ({
-  children,
-  href,
-  handleMouseEnter,
-  handleMouseLeave,
-  containerType,
-  containerId
-}) => {
-  const [hovered, setHovered] = useState(false);
-  const onMouseEnter = () => {
-    handleMouseEnter();
-    setHovered(true);
-  };
-  const {
-    fireEvent
-  } = useAnalyticsEvents();
-  const onMouseLeave = () => {
-    handleMouseLeave();
-    setHovered(false);
-  };
-  return /*#__PURE__*/React.createElement(Box, {
-    backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',
-    xcss: styles.container,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    testId: "linked-container-card-inner"
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: href,
-    appearance: "subtle",
-    onClick: () => {
-      fireEvent('ui.container.clicked.teamContainer', {
-        containerSelected: {
-          container: containerType,
-          containerId
-        }
-      });
-    }
-  }, children));
-};
-const getContainerIcon = (containerType, title, containerIcon) => {
-  if (containerType === 'LoomSpace') {
-    return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
-      spaceName: title,
-      size: 'medium',
-      testId: "linked-container-icon"
-    });
-  }
-  return /*#__PURE__*/React.createElement(Avatar, {
-    appearance: "square",
-    size: "medium",
-    src: containerIcon,
-    testId: "linked-container-icon"
-  });
-};
-export const LinkedContainerCard = ({
-  containerType,
-  title,
-  containerIcon,
-  link,
-  containerId,
-  containerTypeProperties,
-  onDisconnectButtonClick
-}) => {
-  const {
-    description,
-    icon,
-    containerTypeText
-  } = getContainerProperties({
-    containerType,
-    iconSize: fg('enable_medium_size_icons_for_team_link_cards') ? 'medium' : 'small',
-    containerTypeProperties
-  });
-  const [showCloseIcon, setShowCloseIcon] = useState(false);
-  const {
-    formatMessage
-  } = useIntl();
-  const {
-    fireEvent
-  } = useAnalyticsEvents();
-  return /*#__PURE__*/React.createElement(LinkedCardWrapper, {
-    href: link || '#',
-    handleMouseEnter: () => setShowCloseIcon(true),
-    handleMouseLeave: () => setShowCloseIcon(false),
-    containerType: containerType,
-    containerId: containerId
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: "space.100",
-    xcss: styles.card
-  }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
-    space: 'space.025'
-  } : {}, /*#__PURE__*/React.createElement(Text, {
-    maxLines: 1,
-    weight: "medium",
-    color: "color.text"
-  }, title), /*#__PURE__*/React.createElement(Flex, {
-    gap: "space.050",
-    alignItems: "center"
-  }, icon, /*#__PURE__*/React.createElement(Inline, {
-    space: "space.050"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, description), /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, containerTypeText)))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.crossIconWrapper
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    content: formatMessage(messages.disconnectTooltip),
-    position: "top"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    label: `disconnect the container ${title}`,
-    appearance: "subtle",
-    icon: iconProps => /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
-      size: "small"
-    })),
-    spacing: "compact",
-    onClick: e => {
-      e.preventDefault();
-      e.stopPropagation();
-      onDisconnectButtonClick();
-      fireEvent('ui.button.clicked.containerUnlinkButton', {
-        containerSelected: null
-      });
-    }
-  })))));
-};

package/dist/esm/ui/team-containers/linked-container-card/index.compiled.css

@@ -1,23 +0,0 @@
-
-._2rkoy0do{border-radius:var(--ds-radius-small,8px)}
-._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}._12ji1l7x{outline-color:var(--ds-border,#0b120e24)}
-._12y3e4h9{outline-width:var(--ds-border-width,1px)}
-._18u01wug{margin-left:auto}
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
-._1bah1h6o{justify-content:center}
-._1bahesu3{justify-content:flex-end}
-._1bsb1osq{width:100%}
-._1bsb1u1b{width:34px}
-._1bsbzwfg{width:2pc}
-._1e0c1txw{display:flex}
-._1qu2nqa1{outline-style:solid}
-._1tkezwfg{min-height:2pc}
-._1ul9zwfg{min-width:2pc}
-._4cvr1h6o{align-items:center}
-._4t3i1u1b{height:34px}
-._4t3izwfg{height:2pc}
-._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
-._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
-._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
-._syazi7uo{color:var(--ds-text,#292a2e)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/esm/ui/team-containers/linked-container-card/index.js

@@ -1,164 +0,0 @@
-/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "./index.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React, { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import Avatar from '@atlaskit/avatar';
-import { IconButton } from '@atlaskit/button/new';
-import CrossIcon from '@atlaskit/icon/core/cross';
-import Link from '@atlaskit/link';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
-import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
-import Tooltip from '@atlaskit/tooltip';
-import { LoomSpaceAvatar } from '../../../common/ui/loom-avatar';
-import { getContainerProperties } from '../../../common/utils/get-container-properties';
-var messages = defineMessages({
-  disconnectTooltip: {
-    id: 'ptc-directory.team-containers.disconnect-button.tooltip',
-    defaultMessage: 'Disconnect',
-    description: 'Tooltip for the disconnect button'
-  }
-});
-var styles = {
-  container: "_2rkoy0do _1h6d8yml _12y3e4h9 _12ji1l7x _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syazi7uo",
-  card: "_4cvr1h6o _1bsb1osq",
-  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
-  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug",
-  linkIconWrapper: "_2rkoy0do _1bsb1u1b _4t3i1u1b _1e0c1txw _4cvr1h6o _1bah1h6o _12ji1l7x _1qu2nqa1 _bfhkhfxm"
-};
-var LinkedCardWrapper = function LinkedCardWrapper(_ref) {
-  var children = _ref.children,
-    href = _ref.href,
-    handleMouseEnter = _ref.handleMouseEnter,
-    handleMouseLeave = _ref.handleMouseLeave,
-    containerType = _ref.containerType,
-    containerId = _ref.containerId;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hovered = _useState2[0],
-    setHovered = _useState2[1];
-  var onMouseEnter = function onMouseEnter() {
-    handleMouseEnter();
-    setHovered(true);
-  };
-  var _useAnalyticsEvents = useAnalyticsEvents(),
-    fireEvent = _useAnalyticsEvents.fireEvent;
-  var onMouseLeave = function onMouseLeave() {
-    handleMouseLeave();
-    setHovered(false);
-  };
-  return /*#__PURE__*/React.createElement(Box, {
-    backgroundColor: hovered ? 'color.background.input.hovered' : 'color.background.input',
-    xcss: styles.container,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    testId: "linked-container-card-inner"
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: href,
-    appearance: "subtle",
-    onClick: function onClick() {
-      fireEvent('ui.container.clicked.teamContainer', {
-        containerSelected: {
-          container: containerType,
-          containerId: containerId
-        }
-      });
-    }
-  }, children));
-};
-var getContainerIcon = function getContainerIcon(containerType, title, containerIcon) {
-  if (containerType === 'LoomSpace') {
-    return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
-      spaceName: title,
-      size: 'medium',
-      testId: "linked-container-icon"
-    });
-  }
-  return /*#__PURE__*/React.createElement(Avatar, {
-    appearance: "square",
-    size: "medium",
-    src: containerIcon,
-    testId: "linked-container-icon"
-  });
-};
-export var LinkedContainerCard = function LinkedContainerCard(_ref2) {
-  var containerType = _ref2.containerType,
-    title = _ref2.title,
-    containerIcon = _ref2.containerIcon,
-    link = _ref2.link,
-    containerId = _ref2.containerId,
-    containerTypeProperties = _ref2.containerTypeProperties,
-    onDisconnectButtonClick = _ref2.onDisconnectButtonClick;
-  var _getContainerProperti = getContainerProperties({
-      containerType: containerType,
-      iconSize: fg('enable_medium_size_icons_for_team_link_cards') ? 'medium' : 'small',
-      containerTypeProperties: containerTypeProperties
-    }),
-    description = _getContainerProperti.description,
-    icon = _getContainerProperti.icon,
-    containerTypeText = _getContainerProperti.containerTypeText;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showCloseIcon = _useState4[0],
-    setShowCloseIcon = _useState4[1];
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var _useAnalyticsEvents2 = useAnalyticsEvents(),
-    fireEvent = _useAnalyticsEvents2.fireEvent;
-  return /*#__PURE__*/React.createElement(LinkedCardWrapper, {
-    href: link || '#',
-    handleMouseEnter: function handleMouseEnter() {
-      return setShowCloseIcon(true);
-    },
-    handleMouseLeave: function handleMouseLeave() {
-      return setShowCloseIcon(false);
-    },
-    containerType: containerType,
-    containerId: containerId
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: "space.100",
-    xcss: styles.card
-  }, getContainerIcon(containerType, title, containerIcon), /*#__PURE__*/React.createElement(Stack, fg('enable_medium_size_icons_for_team_link_cards') ? {
-    space: 'space.025'
-  } : {}, /*#__PURE__*/React.createElement(Text, {
-    maxLines: 1,
-    weight: "medium",
-    color: "color.text"
-  }, title), /*#__PURE__*/React.createElement(Flex, {
-    gap: "space.050",
-    alignItems: "center"
-  }, icon, /*#__PURE__*/React.createElement(Inline, {
-    space: "space.050"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, description), /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, containerTypeText)))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.crossIconWrapper
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    content: formatMessage(messages.disconnectTooltip),
-    position: "top"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    label: "disconnect the container ".concat(title),
-    appearance: "subtle",
-    icon: function icon(iconProps) {
-      return /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
-        size: "small"
-      }));
-    },
-    spacing: "compact",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      onDisconnectButtonClick();
-      fireEvent('ui.button.clicked.containerUnlinkButton', {
-        containerSelected: null
-      });
-    }
-  })))));
-};