@atlaskit/smart-card 34.6.6 → 34.7.0

package/dist/esm/view/EmbedCard/components/ExpandedFrameOld.js

@@ -0,0 +1,104 @@
+/* ExpandedFrameOld.tsx generated by @compiled/babel-plugin v0.36.0 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Tooltip from '@atlaskit/tooltip';
+import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
+import { handleClickCommon } from '../../common/utils';
+import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styledOld';
+export var ExpandedFrameOld = function ExpandedFrameOld(_ref) {
+  var _ref$isPlaceholder = _ref.isPlaceholder,
+    isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    icon = _ref.icon,
+    text = _ref.text,
+    isSelected = _ref.isSelected,
+    _ref$frameStyle = _ref.frameStyle,
+    frameStyle = _ref$frameStyle === void 0 ? 'showOnHover' : _ref$frameStyle,
+    href = _ref.href,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
+    inheritDimensions = _ref.inheritDimensions,
+    _ref$allowScrollBar = _ref.allowScrollBar,
+    allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar,
+    _ref$setOverflow = _ref.setOverflow,
+    setOverflow = _ref$setOverflow === void 0 ? true : _ref$setOverflow;
+  var isInteractive = function isInteractive() {
+    return !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  };
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+  var handleMouseDown = useMouseDownEvent();
+  var renderHeader = function renderHeader() {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement(TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))))
+    );
+  };
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement(Content, {
+      "data-testid": "embed-content-wrapper",
+      allowScrollBar: allowScrollBar,
+      removeOverflow: !setOverflow,
+      isInteractive: isInteractive(),
+      frameStyle: frameStyle
+      // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+      // See: HOT-107830
+      ,
+      contentEditable: 'false',
+      suppressContentEditableWarning: true
+    }, children);
+  };
+  if (!isPlaceholder && href) {
+    return /*#__PURE__*/React.createElement(LinkWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
+      className: className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      frameStyle: frameStyle,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected,
+      inheritDimensions: inheritDimensions
+    }, renderHeader(), renderContent());
+  } else {
+    return /*#__PURE__*/React.createElement(Wrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
+      className: className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      minWidth: minWidth,
+      frameStyle: frameStyle,
+      maxWidth: maxWidth,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId,
+      "data-is-selected": isSelected,
+      "data-wrapper-type": "default",
+      "data-is-interactive": isInteractive()
+    }, renderHeader(), renderContent());
+  }
+};

package/dist/esm/view/EmbedCard/components/Frame.compiled.css

@@ -0,0 +1,9 @@
+
+._19itidpf{border:0}
+._2rko1l7b{border-radius:3px}._154iidpf{top:0}
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1ltvidpf{left:0}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._kqswh2mm{position:relative}

package/dist/esm/view/EmbedCard/components/Frame.js

@@ -1,14 +1,13 @@
+/* Frame.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./Frame.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getIframeSandboxAttribute } from '../../../utils';
+import { FrameOld } from './FrameOld';
 import { IFrame } from './IFrame';
 import { IframeDwellTracker } from './IframeDwellTracker';
 function mergeRefs(refs) {
@@ -22,17 +21,8 @@ function mergeRefs(refs) {
     });
   };
 }
-var iframeStyles = css({
-  border: 0,
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  overflow: 'hidden',
-  borderRadius: '3px'
-});
-export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
+var iframeStyles = null;
+var FrameNew = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   var url = _ref.url,
     _ref$isTrusted = _ref.isTrusted,
     isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
@@ -103,18 +93,17 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   if (!url) {
     return null;
   }
-  return jsx(React.Fragment, null, jsx(IframeDwellTracker, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IframeDwellTracker, {
     isIframeLoaded: isIframeLoaded,
     isMouseOver: isMouseOver,
     isWindowFocused: isWindowFocused,
     iframePercentVisible: percentVisible,
     onIframeDwell: onIframeDwell
-  }), jsx(IFrame, {
+  }), /*#__PURE__*/React.createElement(IFrame, {
     childRef: mergedRef,
     src: url,
     "data-testid": "".concat(testId, "-frame"),
     "data-iframe-loaded": isIframeLoaded,
-    css: iframeStyles,
     onMouseEnter: function onMouseEnter() {
       return setMouseOver(true);
     },
@@ -128,6 +117,18 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
       setIframeLoaded(true);
     },
     sandbox: getIframeSandboxAttribute(isTrusted),
-    title: title
+    title: title,
+    className: ax(["_19itidpf _1reo15vq _18m915vq _2rko1l7b _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
   }));
+});
+export var Frame = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(FrameNew, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(FrameOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
 });

package/dist/esm/view/EmbedCard/components/FrameOld.js

@@ -0,0 +1,133 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { di } from 'react-magnetic-di';
+import { getIframeSandboxAttribute } from '../../../utils';
+import { IFrame } from './IFrame';
+import { IframeDwellTracker } from './IframeDwellTracker';
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref !== null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+var iframeStyles = css({
+  border: 0,
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  overflow: 'hidden',
+  borderRadius: '3px'
+});
+export var FrameOld = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
+  var url = _ref.url,
+    _ref$isTrusted = _ref.isTrusted,
+    isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+    testId = _ref.testId,
+    onIframeDwell = _ref.onIframeDwell,
+    onIframeFocus = _ref.onIframeFocus,
+    title = _ref.title;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isIframeLoaded = _useState2[0],
+    setIframeLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMouseOver = _useState4[0],
+    setMouseOver = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isWindowFocused = _useState6[0],
+    setWindowFocused = _useState6[1];
+  var ref = useRef();
+  var mergedRef = mergeRefs([iframeRef, ref]);
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    percentVisible = _useState8[0],
+    setPercentVisible = _useState8[1];
+
+  /**
+   * These are the 'percent visible' thresholds at which the intersectionObserver will
+   * trigger a state change. Eg. when the user scrolls and moves from 74% to 76%, or
+   * vice versa. It's in a state object so that its static for the useEffect
+   */
+  var _useState9 = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
+    _useState10 = _slicedToArray(_useState9, 1),
+    threshold = _useState10[0];
+  useEffect(function () {
+    if (!ref || !ref.current) {
+      return;
+    }
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
+      });
+    }, {
+      threshold: threshold
+    });
+    observer.observe(ref.current);
+    return function () {
+      observer.disconnect();
+    };
+  }, [threshold, mergedRef]);
+  useEffect(function () {
+    var onBlur = function onBlur() {
+      setWindowFocused(false);
+      if (document.activeElement === ref.current) {
+        onIframeFocus && onIframeFocus();
+      }
+    };
+    var onFocus = function onFocus() {
+      setWindowFocused(true);
+    };
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('focus', onFocus);
+    return function () {
+      window.removeEventListener('blur', onBlur);
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [ref, onIframeFocus]);
+  if (!url) {
+    return null;
+  }
+  return jsx(React.Fragment, null, jsx(IframeDwellTracker, {
+    isIframeLoaded: isIframeLoaded,
+    isMouseOver: isMouseOver,
+    isWindowFocused: isWindowFocused,
+    iframePercentVisible: percentVisible,
+    onIframeDwell: onIframeDwell
+  }), jsx(IFrame, {
+    childRef: mergedRef,
+    src: url,
+    "data-testid": "".concat(testId, "-frame"),
+    "data-iframe-loaded": isIframeLoaded,
+    css: iframeStyles,
+    onMouseEnter: function onMouseEnter() {
+      return setMouseOver(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setMouseOver(false);
+    },
+    allowFullScreen: true,
+    scrolling: "yes",
+    allow: "autoplay; encrypted-media; clipboard-write",
+    onLoad: function onLoad() {
+      setIframeLoaded(true);
+    },
+    sandbox: getIframeSandboxAttribute(isTrusted),
+    title: title
+  }));
+});

package/dist/esm/view/EmbedCard/components/ImageIcon.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ImageLoader from 'react-render-image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Image } from './styled';
+import { Image as ImageOld } from './styledOld';
 export var ImageIcon = function ImageIcon(_ref) {
   var _ref$alt = _ref.alt,
     alt = _ref$alt === void 0 ? '' : _ref$alt,
@@ -13,18 +15,27 @@ export var ImageIcon = function ImageIcon(_ref) {
   if (!src) {
     return defaultIcon || null;
   }
+  var LoadedImageComponent = fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(Image
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
+    className: "smart-link-icon",
+    src: src,
+    alt: alt,
+    size: size,
+    title: title
+  }) : /*#__PURE__*/React.createElement(ImageOld
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
+    className: "smart-link-icon",
+    src: src,
+    alt: alt,
+    size: size,
+    title: title
+  });
   return /*#__PURE__*/React.createElement(ImageLoader, {
     src: src,
     loading: defaultIcon,
-    loaded: /*#__PURE__*/React.createElement(Image
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    , {
-      className: "smart-link-icon",
-      src: src,
-      alt: alt,
-      size: size,
-      title: title
-    }),
+    loaded: LoadedImageComponent,
     errored: defaultIcon
   });
 };

package/dist/esm/view/EmbedCard/components/styled.compiled.css

@@ -0,0 +1,92 @@
+._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)}
+._14mjpd34:after{border-radius:var(--ds-border-radius-200,8px)}
+._18s81cq1{margin:var(--ds-space-050,4px) 0 var(--ds-space-150,9pt) var(--ds-space-150,9pt)}
+._18s81xf9{margin:0 var(--ds-space-100,8px) var(--ds-space-100,8px)}
+._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
+._1u3rh6cr:hover:after{border:1px solid var(--ds-border,#dfe1e6)}
+._1yt4h8dc{padding:0 var(--ds-space-100,8px)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._eq431kw7:after{border:inherit}
+._eq43h6cr:after{border:1px solid var(--ds-border,#dfe1e6)}
+._qc5o94zs:after{transition:background .3s,box-shadow .3s}
+._v56414ba{transition:box-shadow .3s}
+._v5641y8x{transition:background .3s}
+._v564ojwh{transition:opacity .3s cubic-bezier(.15,1,.3,1)}
+._154ixy5q{top:var(--ds-space-400,2pc)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._18postnw:after{position:absolute}
+._18u01wug{margin-left:auto}
+._19do1kw7:after{left:inherit}
+._19doidpf:after{left:0}
+._19dox0bf:after{left:var(--ds-space-negative-100,-8px)}
+._19pk19bv{margin-top:10px}
+._19pkidpf{margin-top:0}
+._1aaxusic{float:right}
+._1bsb176v{width:125px}
+._1bsb17ym{width:var(--_rcxkve)}
+._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1bsbckbl{width:3pc}
+._1bsbwgg2{width:calc(100% - var(--ds-space-200, 1pc) - 2px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1g4jidpf >.embed-preview>div{margin-bottom:0}
+._1hfk1kw7:after{background-color:inherit}
+._1hfkhp5a:after{background-color:var(--ds-surface-raised,#fff)}
+._1ifiidpf .embed-header{opacity:0}
+._1ifikb7n .embed-header{opacity:1}
+._1itk2pcs{background-image:var(--_13orr8u)}
+._1lrw1dfr{background-size:cover}
+._1pbykb7n{z-index:1}
+._1qdg1rgy:after{height:calc(100% + var(--ds-space-100, 8px))}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1ul91pd6{min-width:var(--_10q0298)}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2hwx1wug{margin-right:auto}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i17ym{height:var(--_rcxkve)}
+._4t3i1crf{height:9pt}
+._4t3i1j2a{height:calc(100% - var(--ds-space-400, 2pc))}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._4t3ickbl{height:3pc}
+._4t3ik5xz{height:27pc}
+._4t3izwfg{height:2pc}
+._4tpuhp5a:hover:after{background-color:var(--ds-surface-raised,#fff)}
+._631ousvi:after{box-sizing:border-box}
+._6syz1kw7:after{cursor:inherit}
+._6syztlke:after{cursor:pointer}
+._8x3u1kw7:after{box-shadow:inherit}
+._8x3umqxb:after{box-shadow:0 0 0 3px var(--ds-border-selected,#4c9aff)}
+._aetrb3bt:after{content:""}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._bfhkqrzy{background-color:var(--ds-skeleton,#ebecf0)}
+._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._hlq8idpf >.embed-preview>div{margin-top:0}
+._jk3p1wug >.embed-preview>div{margin-left:auto}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._o5721q9c{white-space:nowrap}
+._otyridpf{margin-bottom:0}
+._p12f1ayu{max-width:var(--_1et2rhb)}
+._rd9b1wug >.embed-preview>div{margin-right:auto}
+._syaz1rc1{color:var(--ds-text-subtlest,#5e6c84)}
+._syazqjbk{color:var(--ds-icon,#5e6c84)}
+._tzy4idpf{opacity:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchhusvi{box-sizing:border-box}
+._vwz44jg8{line-height:normal}
+._x148idpf:hover .embed-header{opacity:0}
+._x148kb7n:hover .embed-header{opacity:1}
+._z0ai1osq:after{width:100%}
+._z0aie9lw:after{width:calc(100% + var(--ds-space-200, 1pc))}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di629zg:active{background-color:var(--ds-background-selected,#deebff)}