@atlaskit/smart-card 23.14.1 → 23.14.2

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -1,107 +1,72 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderElementItems = exports.renderChildren = exports.isJSXElementNull = exports.highlightRemoveStyles = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _constants = require("../../../../constants");
-
 var Elements = _interopRequireWildcard(require("../elements"));
-
 var _flexible = require("../../../../utils/flexible");
-
 var _actionGroup = _interopRequireDefault(require("./action-group"));
-
 var _elementGroup = _interopRequireDefault(require("./element-group"));
-
 var _excluded = ["name"];
-
 var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
-
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {
     case _constants.SmartLinkDirection.Vertical:
       return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        flex-direction: column;\n        align-items: flex-start;\n      "])));
-
     case _constants.SmartLinkDirection.Horizontal:
     default:
       return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        flex-direction: row;\n        align-items: center;\n      "])));
   }
 };
-
 var getGapSize = function getGapSize(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
       return 1.25;
-
     case _constants.SmartLinkSize.Large:
       return 1;
-
     case _constants.SmartLinkSize.Medium:
       return 0.5;
-
     case _constants.SmartLinkSize.Small:
     default:
       return 0.25;
   }
 };
-
 exports.getGapSize = getGapSize;
-
 var getBaseStyles = function getBaseStyles(direction, size) {
   return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
-
 exports.getBaseStyles = getBaseStyles;
 var highlightRemoveStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none !important;\n  outline-color: inherit;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
 exports.highlightRemoveStyles = highlightRemoveStyles;
-
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;
 };
-
 var isElementDisplayValid = function isElementDisplayValid(name, display) {
   var _ElementDisplaySchema2, _ElementDisplaySchema3;
-
   return (_ElementDisplaySchema2 = (_ElementDisplaySchema3 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema3 === void 0 ? void 0 : _ElementDisplaySchema3.includes(display)) !== null && _ElementDisplaySchema2 !== void 0 ? _ElementDisplaySchema2 : false;
 };
-
 var isJSXElementNull = function isJSXElementNull(children) {
   return Boolean(children.type() === null);
 };
-
 exports.isJSXElementNull = isJSXElementNull;
-
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && ((0, _flexible.isFlexibleUiElement)(node) || node.type === _elementGroup.default);
 };
-
 var renderChildren = function renderChildren(children, size) {
   return _react.default.Children.map(children, function (child) {
     if (isElementOrElementGroup(child) || isActionGroup(child)) {
@@ -111,38 +76,30 @@ var renderChildren = function renderChildren(children, size) {
         size: childSize || size
       });
     }
-
     return child;
   });
 };
-
 exports.renderChildren = renderChildren;
-
 var renderElementItems = function renderElementItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inline';
   var elements = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
-        props = (0, _objectWithoutProperties2.default)(curr, _excluded);
+      props = (0, _objectWithoutProperties2.default)(curr, _excluded);
     var Element = Elements[name];
     var typedProps = props;
-
     if (Element && isElementDisplayValid(name, display)) {
       var element = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
         key: idx
       }, typedProps));
-
       if (!isJSXElementNull(element)) {
         return [].concat((0, _toConsumableArray2.default)(acc), [element]);
       }
     }
-
     return acc;
   }, []);
-
   if (elements.length) {
     return elements;
   }
 };
-
 exports.renderElementItems = renderElementItems;

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -1,34 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
-
 var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/blog/16"));
-
 var _constants = require("../../../../../constants");
-
 var _importIconMapper;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // prettier-ignore
 var importIconMapper = (_importIconMapper = {}, (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Archive, function () {
   return Promise.resolve().then(function () {
@@ -281,11 +268,9 @@ var importIconMapper = (_importIconMapper = {}, (0, _defineProperty2.default)(_i
     return _interopRequireWildcard(require('@atlaskit/icon/glyph/people'));
   });
 }), _importIconMapper);
-
 var getIconImportFn = function getIconImportFn(icon) {
   return importIconMapper[icon];
 };
-
 var importIcon = function importIcon(importFn) {
   return (0, _reactLoadable.default)({
     loader: function loader() {
@@ -301,9 +286,8 @@ var importIcon = function importIcon(importFn) {
 
 var AtlaskitIcon = function AtlaskitIcon(_ref3) {
   var icon = _ref3.icon,
-      label = _ref3.label,
-      testId = _ref3.testId;
-
+    label = _ref3.label,
+    testId = _ref3.testId;
   // Check for synchonously loaded icons first for SSR purposes
   switch (icon) {
     case _constants.IconType.Document:
@@ -311,34 +295,27 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
         label: label || 'document',
         testId: testId
       });
-
     case _constants.IconType.Blog:
       return /*#__PURE__*/_react.default.createElement(_2.default, {
         label: label || 'blog',
         testId: testId
       });
   }
-
   var importFn = getIconImportFn(icon);
-
   if (!importFn) {
     return null;
   }
-
   var ImportedIcon = importIcon(importFn);
-
   switch (icon) {
     case _constants.IconType.Confluence:
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         testId: testId,
         textColor: "var(--ds-text-subtle, ".concat(_colors.N700, ")")
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-        ,
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */,
         iconColor: _colors.B200,
         iconGradientStart: _colors.B400,
         iconGradientStop: _colors.B200
         /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
       });
 
     case _constants.IconType.Jira:
@@ -346,13 +323,11 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         testId: testId,
         textColor: "var(--ds-text-subtle, ".concat(_colors.N700, ")")
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-        ,
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */,
         iconColor: _colors.B200,
         iconGradientStart: _colors.B400,
         iconGradientStop: _colors.B200
         /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
       });
 
     case _constants.IconType.Error:
@@ -362,7 +337,6 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
         testId: testId,
         primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
       });
-
     default:
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         label: label,
@@ -370,6 +344,5 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       });
   }
 };
-
 var _default = AtlaskitIcon;
 exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -1,27 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
-
 var _loadingSkeleton = _interopRequireDefault(require("../loading-skeleton"));
-
 /** @jsx jsx */
+
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
-      testId = _ref.testId,
-      url = _ref.url,
-      onError = _ref.onError,
-      onLoad = _ref.onLoad;
+    testId = _ref.testId,
+    url = _ref.url,
+    onError = _ref.onError,
+    onLoad = _ref.onLoad;
   return (0, _react2.jsx)(_reactRenderImage.default, {
     src: url,
     loading: (0, _react2.jsx)(_loadingSkeleton.default, {
@@ -36,6 +31,5 @@ var ImageIcon = function ImageIcon(_ref) {
     onLoad: onLoad
   });
 };
-
 var _default = ImageIcon;
 exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,24 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _templateObject, _templateObject2;
-
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
-      width = _ref.width,
-      height = _ref.height;
+    width = _ref.width,
+    height = _ref.height;
   var animationNameStyles = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
   var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    background-image: linear-gradient(\n      to right,\n      transparent 0%,\n      ", " 20%,\n      transparent 40%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", animationNameStyles);
   return (0, _react2.jsx)("span", {
@@ -26,6 +20,5 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
     "data-testid": testId
   });
 };
-
 var _default = LoadingSkeleton;
 exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -1,101 +1,70 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getContainerStyles = exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _constants = require("../../../../constants");
-
 var _flexible = require("../../../../utils/flexible");
-
 var _token = require("../../../../utils/token");
-
 var _flexibleUiContext = require("../../../../state/flexible-ui-context");
-
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
-
 var _HoverCard = require("../../../HoverCard");
-
 var _utils = require("../../../../state/flexible-ui-context/utils");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
-
 var getGap = function getGap(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
       return '1.25rem';
-
     case _constants.SmartLinkSize.Large:
       return '1rem';
-
     case _constants.SmartLinkSize.Medium:
       return '.5rem';
-
     case _constants.SmartLinkSize.Small:
     default:
       return '.25rem';
   }
 };
-
 var getPadding = function getPadding(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
       return '1.5rem';
-
     case _constants.SmartLinkSize.Large:
       return '1.25rem';
-
     case _constants.SmartLinkSize.Medium:
       return '1rem';
-
     case _constants.SmartLinkSize.Small:
     default:
       return '.5rem';
   }
 };
-
 var clickableContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
-
 var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
   var padding = hidePadding ? '0rem' : getPadding(size);
   var gap = getGap(size);
   var previewOnLeft = childrenOptions.previewOnLeft,
-      previewOnRight = childrenOptions.previewOnRight;
+    previewOnRight = childrenOptions.previewOnRight;
   return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    // Set variables for PreviewBlock to use.\n    --container-padding: ", ";\n    --container-gap-left: ", ";\n    --container-gap-right: ", ";\n    --preview-block-width: 30%;\n\n    padding: ", ";\n    ", "\n    ", "\n  "])), padding, previewOnLeft ? gap : padding, previewOnRight ? gap : padding, padding, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
 };
-
 var getChildrenOptions = function getChildrenOptions(children, context) {
   var options = {};
-
   if ((0, _utils.isFlexUiPreviewPresent)(context)) {
     _react.default.Children.map(children, function (child) {
       if ( /*#__PURE__*/_react.default.isValidElement(child)) {
         if ((0, _flexible.isFlexibleUiPreviewBlock)(child)) {
           var placement = child.props.placement;
-
           if (placement === _constants.MediaPlacement.Left) {
             options.previewOnLeft = true;
           }
-
           if (placement === _constants.MediaPlacement.Right) {
             options.previewOnRight = true;
           }
@@ -103,23 +72,18 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
       }
     });
   }
-
   return options;
 };
-
 var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
   return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
-
 exports.getContainerStyles = getContainerStyles;
-
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
       var size = blockSize || containerSize;
-
       if ((0, _flexible.isFlexibleUiTitleBlock)(child)) {
         return /*#__PURE__*/_react.default.cloneElement(child, {
           onClick: onClick,
@@ -135,7 +99,6 @@ var renderChildren = function renderChildren(children, containerSize, containerT
           onActionMenuOpenChange: onActionMenuOpenChange
         });
       }
-
       return /*#__PURE__*/_react.default.cloneElement(child, {
         size: size,
         status: status
@@ -143,27 +106,22 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
-
 var getTitleBlockProps = function getTitleBlockProps(children) {
   var block = _react.default.Children.toArray(children).find(function (child) {
     return (0, _flexible.isFlexibleUiTitleBlock)(child);
   });
-
   if ( /*#__PURE__*/_react.default.isValidElement(block)) {
     return block.props;
   }
 };
-
 var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
   var _ref = context || {},
-      title = _ref.title,
-      _ref$url = _ref.url,
-      url = _ref$url === void 0 ? '' : _ref$url;
-
+    title = _ref.title,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? '' : _ref$url;
   var _ref2 = getTitleBlockProps(children) || {},
-      target = _ref2.anchorTarget,
-      text = _ref2.text;
-
+    target = _ref2.anchorTarget,
+    text = _ref2.text;
   return (0, _react2.jsx)(_layeredLink.default, {
     onClick: onClick,
     target: target,
@@ -172,6 +130,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
     url: url
   });
 };
+
 /**
  * A container is a hidden component that build the Flexible Smart Link.
  * All of the Flexible UI components are wrapped inside the container.
@@ -180,37 +139,33 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
  * @internal
  * @see Block
  */
-
-
 var Container = function Container(_ref3) {
   var children = _ref3.children,
-      _ref3$clickableContai = _ref3.clickableContainer,
-      clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
-      _ref3$hideBackground = _ref3.hideBackground,
-      hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
-      _ref3$hideElevation = _ref3.hideElevation,
-      hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
-      _ref3$hidePadding = _ref3.hidePadding,
-      hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
-      _ref3$showHoverPrevie = _ref3.showHoverPreview,
-      showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
-      onClick = _ref3.onClick,
-      retry = _ref3.retry,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
-      status = _ref3.status,
-      _ref3$testId = _ref3.testId,
-      testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
-      _ref3$theme = _ref3.theme,
-      theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
+    _ref3$clickableContai = _ref3.clickableContainer,
+    clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
+    _ref3$hideBackground = _ref3.hideBackground,
+    hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
+    _ref3$hideElevation = _ref3.hideElevation,
+    hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+    _ref3$hidePadding = _ref3.hidePadding,
+    hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+    _ref3$showHoverPrevie = _ref3.showHoverPreview,
+    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
+    onClick = _ref3.onClick,
+    retry = _ref3.retry,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
+    status = _ref3.status,
+    _ref3$testId = _ref3.testId,
+    testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
+    _ref3$theme = _ref3.theme,
+    theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
   var childrenOptions = getChildrenOptions(children, context);
-
   var _useState = (0, _react.useState)(true),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      hoverCardCanOpen = _useState2[0],
-      setHoverCardCanOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hoverCardCanOpen = _useState2[0],
+    setHoverCardCanOpen = _useState2[1];
   var onActionMenuOpenChange = (0, _react.useCallback)(function (options) {
     return setHoverCardCanOpen(!options.isOpen);
   }, []);
@@ -219,7 +174,6 @@ var Container = function Container(_ref3) {
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-
   if (showHoverPreview && context !== null && context !== void 0 && context.url) {
     return (0, _react2.jsx)(_HoverCard.HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
@@ -227,9 +181,7 @@ var Container = function Container(_ref3) {
       closeOnChildClick: true
     }, containerContent);
   }
-
   return containerContent;
 };
-
 var _default = Container;
 exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,33 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _templateObject;
-
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+
 /**
  * An anchor component to cover the entire container creating a clickable area.
  * @internal
  * @see `clickableContainer`
  */
-
 var LayeredLink = function LayeredLink(_ref) {
   var onClick = _ref.onClick,
-      target = _ref.target,
-      testId = _ref.testId,
-      text = _ref.text,
-      url = _ref.url;
+    target = _ref.target,
+    testId = _ref.testId,
+    text = _ref.text,
+    url = _ref.url;
   return (0, _react2.jsx)("a", {
     className: "layered-link",
     css: styles,
@@ -36,9 +30,7 @@ var LayeredLink = function LayeredLink(_ref) {
     onClick: onClick,
     target: target,
     tabIndex: -1 // Hide tab index and let the title link be the link.
-
   }, text);
 };
-
 var _default = LayeredLink;
 exports.default = _default;