@atlaskit/smart-card 34.7.0 → 34.8.0

package/dist/es2019/view/common/ai-prism/index.js

@@ -1,23 +1,20 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
-import { popupContainerStyles } from '../../HoverCard/styled';
 import AIGlowingBorder from './ai-glowing-border';
+import AIPrismOld from './AIPrismOld';
 import { AI_BORDER_PALETTE } from './constants';
-const contentStyles = css({
-  transition: 'box-shadow 0.5s ease'
-});
-const contentStylesPrismVisible = css({
-  // intentionally set opacity to 0 to remove the shadow with fade out animation
-  boxShadow:
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  '0px 8px 12px rgba(9, 30, 66, 0),0px 0px 1px rgba(9, 30, 66, 0)'
-});
-const AIPrism = ({
+const contentStyles = null;
+const contentStylesPrismVisible = null;
+const animatedSvgContainerStyles = {
+  true: "_v564fs5d _tzy4kb7n",
+  false: "_v564fs5d _tzy4idpf"
+};
+const popupContainerStyles = null;
+const AIPrismNew = ({
   children,
   isGlowing = true,
   isMoving = true,
@@ -28,22 +25,20 @@ const AIPrism = ({
   const {
     colorMode = 'light'
   } = useThemeObserver();
-  return jsx(AIGlowingBorder, {
-    additionalCss: {
-      animatedSvgContainer: css({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        opacity: isVisible ? 1 : 0,
-        transition: 'opacity 0.5s ease'
-      })
-    },
+  return /*#__PURE__*/React.createElement(AIGlowingBorder, {
     palette: (_AI_BORDER_PALETTE$co = AI_BORDER_PALETTE[colorMode]) !== null && _AI_BORDER_PALETTE$co !== void 0 ? _AI_BORDER_PALETTE$co : AI_BORDER_PALETTE.light,
     isGlowing: isGlowing,
     isMoving: isMoving,
-    testId: testId
-  }, jsx("div", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    popupContainerStyles, contentStyles, isVisible ? contentStylesPrismVisible : undefined]
+    testId: testId,
+    className: ax([animatedSvgContainerStyles[isVisible ? 'true' : 'false']])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rkopd34 _bfhk1bhr _16qsie2t", "_v5649spz", isVisible && "_16qs1aef"])
   }, children));
 };
+const AIPrism = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AIPrismNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AIPrismOld, props);
+};
 export default AIPrism;

package/dist/es2019/view/common/ai-summary/AISummaryOld.js

@@ -0,0 +1,55 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import Markdown from 'markdown-to-jsx';
+import UList from './ulist';
+const AISummaryCSSStyles = css({
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  whiteSpace: 'normal',
+  WebkitUserSelect: 'text',
+  MozUserSelect: 'text',
+  MsUserSelect: 'text',
+  userSelect: 'text'
+});
+
+/**
+ * Move this type to the index file upon FF cleanup. bandicoots-compiled-migration-smartcard
+ * Remove the export as well.
+ */
+
+/**
+ * A component to render a response from AI in markdown text.
+ * @internal
+ * @param {AISummaryProps} AISummaryProps
+ */
+
+const AISummaryOld = ({
+  content = '',
+  overrideCss,
+  testId = 'ai-summary',
+  minHeight = 0
+}) => {
+  if (!content && minHeight === 0) {
+    return null;
+  }
+  return jsx(Markdown, {
+    "data-testid": testId,
+    css: [AISummaryCSSStyles, overrideCss],
+    children: content,
+    options: {
+      forceWrapper: true,
+      overrides: {
+        ul: UList
+      }
+    },
+    style: {
+      minHeight: minHeight
+    }
+  });
+};
+export default AISummaryOld;

package/dist/es2019/view/common/ai-summary/index.compiled.css

@@ -0,0 +1,8 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._181u1kdv{-webkit-user-select:text}
+._1nmz1hna{word-break:break-word}
+._1rkw1kdv{-moz-user-select:text}
+._o5724jg8{white-space:normal}
+._slp31hna{word-wrap:break-word}
+._te171kdv{-ms-user-select:text}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}

package/dist/es2019/view/common/ai-summary/index.js

@@ -1,39 +1,36 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Markdown from 'markdown-to-jsx';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * Move this import into this file when cleaning up FF bandicoots-compiled-migration-smartcard
+ * Remove the export as well
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import Markdown from 'markdown-to-jsx';
+import AISummaryOld from './AISummaryOld';
 import UList from './ulist';
-const AISummaryCSSStyles = css({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  wordWrap: 'break-word',
-  wordBreak: 'break-word',
-  whiteSpace: 'normal',
-  WebkitUserSelect: 'text',
-  MozUserSelect: 'text',
-  MsUserSelect: 'text',
-  userSelect: 'text'
-});
+const AISummaryCSSStyles = null;
+
 /**
  * A component to render a response from AI in markdown text.
  * @internal
  * @param {AISummaryProps} AISummaryProps
  */
-
-const AISummary = ({
+const AISummaryNew = ({
   content = '',
-  overrideCss,
+  className,
   testId = 'ai-summary',
   minHeight = 0
 }) => {
   if (!content && minHeight === 0) {
     return null;
   }
-  return jsx(Markdown, {
-    "data-testid": testId,
-    css: [AISummaryCSSStyles, overrideCss],
+  return /*#__PURE__*/React.createElement(Markdown, {
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_11c8qk37 _slp31hna _1nmz1hna _o5724jg8 _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", className]),
     children: content,
     options: {
       forceWrapper: true,
@@ -46,4 +43,10 @@ const AISummary = ({
     }
   });
 };
+const AISummary = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AISummaryNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AISummaryOld, props);
+};
 export default AISummary;

package/dist/es2019/view/common/ai-summary/ulist.compiled.css

@@ -0,0 +1,2 @@
+._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._bozgv47k{padding-inline-start:var(--ds-space-250,20px)}

package/dist/es2019/view/common/ai-summary/ulist.js

@@ -1,20 +1,21 @@
+/* ulist.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./ulist.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-const listStyles = css({
-  paddingLeft: "var(--ds-space-250, 20px)",
-  paddingInlineStart: "var(--ds-space-250, 20px)"
-});
-const UList = ({
+import { fg } from '@atlaskit/platform-feature-flags';
+import UListOld from './ulistOld';
+const listStyles = null;
+const UListNew = ({
   children,
   ...props
-}) => jsx("ul", _extends({
-  css: listStyles
-}, props), children);
+}) => /*#__PURE__*/React.createElement("ul", _extends({}, props, {
+  className: ax(["_19bvv47k _bozgv47k"])
+}), children);
+const UList = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(UListNew, props);
+  }
+  return /*#__PURE__*/React.createElement(UListOld, props);
+};
 export default UList;

package/dist/es2019/view/common/ai-summary/ulistOld.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+const listStyles = css({
+  paddingLeft: "var(--ds-space-250, 20px)",
+  paddingInlineStart: "var(--ds-space-250, 20px)"
+});
+const UListOld = ({
+  children,
+  ...props
+}) => jsx("ul", _extends({
+  css: listStyles
+}, props), children);
+export default UListOld;

package/dist/es2019/view/common/stop-propagation/StopPropagationOld.js

@@ -0,0 +1,28 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+const styles = css({
+  maxHeight: 0,
+  maxWidth: 0,
+  position: 'absolute'
+});
+export const StopPropagationOld = ({
+  children
+}) => {
+  const onClick = useCallback(e => {
+    // Prevent click event inside modal from bubble up
+    e.stopPropagation();
+  }, []);
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    jsx("span", {
+      css: styles,
+      onClick: onClick
+    }, children)
+  );
+};

package/dist/es2019/view/common/stop-propagation/index.compiled.css

@@ -0,0 +1,3 @@
+._c71lidpf{max-height:0}
+._kqswstnw{position:absolute}
+._p12fidpf{max-width:0}

package/dist/es2019/view/common/stop-propagation/index.js

@@ -1,28 +1,25 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-const styles = css({
-  maxHeight: 0,
-  maxWidth: 0,
-  position: 'absolute'
-});
-export const StopPropagation = ({
+import { fg } from '@atlaskit/platform-feature-flags';
+import { StopPropagationOld } from './StopPropagationOld';
+const styles = null;
+const StopPropagationNew = ({
   children
 }) => {
   const onClick = useCallback(e => {
     // Prevent click event inside modal from bubble up
     e.stopPropagation();
   }, []);
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    jsx("span", {
-      css: styles,
-      onClick: onClick
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    className: ax(["_c71lidpf _p12fidpf _kqswstnw"])
+  }, children);
+};
+export const StopPropagation = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(StopPropagationNew, props);
+  }
+  return /*#__PURE__*/React.createElement(StopPropagationOld, props);
 };

package/dist/es2019/view/common/utils.js

@@ -3,8 +3,17 @@ import facepaint from 'facepaint';
 // this function is used for spacing, fontsize and line height,
 // once design tokens have been established for the all of these categories
 // then this function can be replaced with the tokens
+/**
+ * @deprecated, these can be replaced with constants
+ */
 const gs = times => `${8 * times}px`;
+/**
+ * @deprecated, these can be replaced with constants
+ */
 const br = (times = 1) => `${3 * times}px`;
+/**
+ * @deprecated, these can be replaced with constants
+ */
 const mq = facepaint(['@media(min-width: 576px)']);
 export { gs, br, mq };
 export const handleClickCommon = (event, onClick) => {

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.7.0"
+  packageVersion: "34.8.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/styledOld.js

@@ -35,6 +35,7 @@ export var footerBlockCss = css({
   '.actions-button-group': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     'button, button:hover, button:focus, button:active': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       fontSize: '0.875rem'
     }
   }

package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css

@@ -0,0 +1,7 @@
+
+._kkk2n7od{all:unset}._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt41b66{padding:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -1,25 +1,20 @@
+/* action-button.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback } from 'react';
-import { Box, Inline, Pressable, xcss } from '@atlaskit/primitives';
+import "./action-button.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline, Pressable } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { getPrimitivesInlineSpaceBySize } from '../../../utils';
 import ActionIcon from '../action-icon';
-var buttonStyles = xcss({
-  all: 'unset',
-  padding: 'space.050',
-  width: '100%',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.subtle.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.neutral.subtle.pressed'
-  }
-});
-var contentStyles = xcss({
-  color: 'color.text',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
-var ActionButton = function ActionButton(_ref) {
+import ActionButtonOld from './action-buttonOld';
+var styles = {
+  button: "_kkk2n7od _1yt41b66 _1bsb1osq _irr3166n _1di61dty",
+  content: "_11c8qk37 _syaz1fxt"
+};
+var ActionButtonNew = function ActionButtonNew(_ref) {
   var content = _ref.content,
     iconOption = _ref.icon,
     isDisabled = _ref.isDisabled,
@@ -29,7 +24,7 @@ var ActionButton = function ActionButton(_ref) {
     spaceOption = _ref.space,
     testId = _ref.testId,
     tooltipProps = _ref.tooltipProps,
-    xcss = _ref.xcss;
+    style = _ref.style;
   var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
   var onClick = useCallback(function () {
     if (!isDisabled && !isLoading && onClickCallback) {
@@ -43,21 +38,26 @@ var ActionButton = function ActionButton(_ref) {
     }),
     size: size
   }) : iconOption;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    React.createElement(Pressable, _extends({
-      xcss: [buttonStyles, xcss]
-    }, tooltipProps, {
-      onClick: onClick,
-      testId: testId
-    }), /*#__PURE__*/React.createElement(Inline, {
-      alignBlock: "center",
-      grow: "fill",
-      space: space
-    }, icon, /*#__PURE__*/React.createElement(Box, {
-      xcss: contentStyles
-    }, content)))
-  );
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    xcss: styles.button
+  }, tooltipProps, {
+    onClick: onClick,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: style
+  }), /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    grow: "fill",
+    space: space
+  }, icon, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.content
+  }, content)));
+};
+var ActionButton = function ActionButton(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionButtonNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ActionButtonOld, props);
 };
 export default ActionButton;

package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-buttonOld.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import { Box, Inline, Pressable, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import { getPrimitivesInlineSpaceBySize } from '../../../utils';
+import ActionIcon from '../action-icon';
+var buttonStyles = xcss({
+  all: 'unset',
+  padding: 'space.050',
+  width: '100%',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+var contentStyles = xcss({
+  color: 'color.text',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+var ActionButtonOld = function ActionButtonOld(_ref) {
+  var content = _ref.content,
+    iconOption = _ref.icon,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading,
+    onClickCallback = _ref.onClick,
+    size = _ref.size,
+    spaceOption = _ref.space,
+    testId = _ref.testId,
+    tooltipProps = _ref.tooltipProps,
+    xcss = _ref.xcss;
+  var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
+  var onClick = useCallback(function () {
+    if (!isDisabled && !isLoading && onClickCallback) {
+      onClickCallback();
+    }
+  }, [isDisabled, isLoading, onClickCallback]);
+  var icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(ActionIcon, {
+    asStackItemIcon: true,
+    icon: /*#__PURE__*/React.createElement(Spinner, {
+      testId: "".concat(testId, "-loading")
+    }),
+    size: size
+  }) : iconOption;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    React.createElement(Pressable, _extends({
+      xcss: [buttonStyles, xcss]
+    }, tooltipProps, {
+      onClick: onClick,
+      testId: testId
+    }), /*#__PURE__*/React.createElement(Inline, {
+      alignBlock: "center",
+      grow: "fill",
+      space: space
+    }, icon, /*#__PURE__*/React.createElement(Box, {
+      xcss: contentStyles
+    }, content)))
+  );
+};
+export default ActionButtonOld;

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -31,7 +31,7 @@ var ActionNew = function ActionNew(_ref) {
     tooltipOnHide = _ref.tooltipOnHide,
     hideTooltip = _ref.hideTooltip,
     hideTooltipOnMouseDown = _ref.hideTooltipOnMouseDown,
-    xcss = _ref.xcss,
+    style = _ref.style,
     asDropDownItem = _ref.asDropDownItem,
     className = _ref.className,
     isDisabled = _ref.isDisabled,
@@ -63,9 +63,9 @@ var ActionNew = function ActionNew(_ref) {
       size: size,
       testId: testId,
       tooltipMessage: tooltipMessage || content
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
-      xcss: xcss,
+      style: style,
       tooltipOnHide: tooltipOnHide,
       hideTooltipOnMouseDown: hideTooltipOnMouseDown,
       hideTooltip: hideTooltip