@desynova-digital/components 9.2.22 → 9.2.24

package/atoms/cardV2/cardV2.js

@@ -41,7 +41,7 @@ var CommonStyles = exports.CommonStyles = (0, _styledComponents.css)(_templateOb
 var DivStyles = exports.DivStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n"])), CommonStyles);
 var BaseParaStyles = exports.BaseParaStyles = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
 var BaseButtonStyles = exports.BaseButtonStyles = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: SFUIText-Regular;\n  ", ";\n"])), CommonStyles);
-var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  width: ", ";\n\n  border: 1px solid transparent;\n  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);\n\n  /* \u2705 Center pop baseline */\n  transform: scale(1);\n  transform-origin: 50% 50%;\n\n  /* \u2705 Make it pop above siblings */\n  z-index: 0;\n  isolation: isolate;\n\n  transition:\n    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),\n    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);\n\n  will-change: transform;\n\n  /* \uD83D\uDD25 Glow Layer */\n  &::after {\n    content: '';\n    position: absolute;\n    inset: -2px;\n    border-radius: 10px;\n    pointer-events: none;\n    opacity: 0;\n     transition: all 0.4s ease-out;\n\n    box-shadow: ", ";\n  }\n\n  /* \u2705 Hover = pop from center (NO translate) */\n  &:hover {\n    transform: scale(1.035);\n    z-index: 5;\nborder-color: ", ";\n  }\n    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n  }\n\n  &:hover::after {\n    opacity: 1;\n  }\n"])), function (_ref2) {
+var CardStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  width: ", ";\n\n  border: 1px solid transparent;\n  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);\n\n  /* \u2705 Center pop baseline */\n  transform: scale(1);\n  transform-origin: 50% 50%;\n\n  /* \u2705 Make it pop above siblings */\n  z-index: 0;\n  isolation: isolate;\n\n  transition:\n    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),\n    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),\n    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);\n\n  will-change: transform;\n\n  /* \uD83D\uDD25 Glow Layer */\n  &::after {\n    content: '';\n    position: absolute;\n    inset: -2px;\n    border-radius: 10px;\n    pointer-events: none;\n    opacity: 0;\n    transition: all 0.4s ease-out;\n\n    box-shadow: ", ";\n  }\n\n  /* \u2705 Hover = pop from center (NO translate) */\n  &:hover {\n    transform: scale(1.035);\n    z-index: 5;\n    border-color: ", ";\n    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);\n  }\n\n  &:hover::after {\n    opacity: 1;\n  }\n"])), function (_ref2) {
   var width = _ref2.width;
   return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
 }, function (_ref3) {
@@ -94,7 +94,9 @@ CardV2.propTypes = {
   theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
   type: _propTypes["default"].oneOf(['asset', 'search']),
   bgColor: _propTypes["default"].oneOf(['primary', 'secondary']),
-  isCardv2: _propTypes["default"].bool
+  isCardv2: _propTypes["default"].bool,
+  nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  onNestedDropdownSelect: _propTypes["default"].func
 };
 CardV2.defaultProps = {
   isSegment: false,

package/atoms/cardV2/contentV2.js

@@ -94,7 +94,8 @@ var ContentV2 = function ContentV2(props) {
     h1 = props.h1,
     creation = props.creation,
     extension = props.extension,
-    season_id = props.season_id;
+    season_id = props.season_id,
+    isAdobe = props.isAdobe;
   var ICON_DIMENSION_MAP = {
     snp_edit: {
       width: 10,
@@ -195,7 +196,7 @@ var ContentV2 = function ContentV2(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "title-text",
     title: title || h1
-  }, title || h1), episode_label ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, episode_label) : null, show_page_id && asset_type !== 'sports' ? /*#__PURE__*/_react["default"].createElement("span", {
+  }, title || h1), episode_label ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, episode_label) : null, show_page_id && asset_type !== 'sports' && !isAdobe ? /*#__PURE__*/_react["default"].createElement("span", {
     title: "Open Page",
     className: "files-associated-icon",
     onMouseEnter: function onMouseEnter() {
@@ -299,10 +300,12 @@ ContentV2.propTypes = {
   width: _propTypes["default"].string,
   type: _propTypes["default"].string,
   titleClick: _propTypes["default"].func,
-  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  isAdobe: _propTypes["default"].bool
 };
 ContentV2.defaultProps = {
   theme: 'dark',
-  isSegment: false
+  isSegment: false,
+  isAdobe: false
 };
 var _default = exports["default"] = ContentV2;

package/atoms/cardV2/thumbnailV2.js

@@ -9,13 +9,14 @@ 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 _reactDom = require("react-dom");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tokens = require("@desynova-digital/tokens");
 var _icon = _interopRequireDefault(require("../../atoms/icon"));
 var _tokens2 = require("../../../tokens");
 var _cardV = require("./cardV2");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9; // atoms
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17; // atoms
 // tokens
 // styles
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -23,51 +24,148 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
 var assetStyles = {
   folder: {
-    backgroundColor: '#121D29',
-    backgroundSize: 'inherit'
+    backgroundColor: "#121D29",
+    backgroundSize: "inherit"
   },
   asset: {
-    backgroundColor: 'inherit',
-    backgroundSize: 'cover'
+    backgroundColor: "inherit",
+    backgroundSize: "cover"
   }
 };
-var HoverActionButton = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  border: none;\n  cursor: pointer;\n  width: 26px;\n  height: 26px;\n  border-radius: 15px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 200ms ease;\n"])), OverlayBackgroundStyles);
-var ThumbnailStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 8px 8px 0 0;\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n      svg path {\n        fill: #AFB2BA;\n      }\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: linear-gradient(359deg, #182738 19.98%, #182738 48.97%, rgba(24, 39, 56, 0.42) 99.47%);\n  }\n\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), function (_ref) {
+var HoverActionButton = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  border: none;\n  cursor: pointer;\n  width: 26px;\n  height: 26px;\n  border-radius: 15px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 200ms ease;\n\n  /* Add rotation only when the 'rotate-icon' class is present */\n  &.rotate-icon svg,\n  &.rotate-icon i {\n    transform: rotate(90deg);\n  }\n"])), OverlayBackgroundStyles);
+var ThumbnailStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background: ", ";\n  background-color: ", ";\n  background-size: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 8px 8px 0 0;\n\n  .iframe-image-block {\n    cursor: ", ";\n    background: #000;\n    opacity: 0;\n    &:hover {\n      opacity: 1;\n    }\n    .hover-pointer {\n      position: absolute;\n      width: 1px;\n      height: 100%;\n      top: 0;\n      background: #fff;\n      pointer-events: none;\n      z-index: 1;\n    }\n  }\n  .background-block {\n    position: absolute;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n    .circle {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      background-color: #15212f;\n      svg path {\n        fill: #afb2ba;\n      }\n    }\n    i {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n    img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: auto;\n    }\n  }\n  .thumbnail-image-block {\n    cursor: pointer;\n    background: linear-gradient(\n      359deg,\n      #182738 19.98%,\n      #182738 48.97%,\n      rgba(24, 39, 56, 0.42) 99.47%\n    );\n  }\n\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), function (_ref) {
   var thumbnail = _ref.thumbnail;
   return "url(".concat(thumbnail, ") no-repeat 50%");
 }, function (_ref2) {
   var data_type = _ref2.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
+  return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
 }, function (_ref3) {
   var data_type = _ref3.data_type;
-  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
+  return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
 }, function (_ref4) {
   var width = _ref4.width;
-  return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
+  return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
 }, function (_ref5) {
   var width = _ref5.width;
-  return width === 'sm' ? '50px' : width === 'md' ? '70px' : '110px';
+  return width === "sm" ? "50px" : width === "md" ? "70px" : "110px";
 }, function (_ref6) {
   var isClickPrevented = _ref6.isClickPrevented;
-  return !isClickPrevented ? 'pointer' : 'default';
+  return !isClickPrevented ? "pointer" : "default";
 }, HoverActionButton);
-var UploadTypeContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  cursor: pointer;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: 'SFUIText-Regular';\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
-  return props.upload_type === 'rc' ? '#FF6327' : _tokens.colors[props.theme].card.themeColor;
+var UploadTypeContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 2;\n  cursor: pointer;\n  .uploadWrapper {\n    border-radius: 50%;\n    background: ", ";\n\n    color: ", ";\n    width: 25px;\n    height: 25px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .wrapper {\n      font-size: 10px;\n      font-family: \"SFUIText-Regular\";\n      line-height: 1.1;\n      text-transform: uppercase;\n    }\n  }\n"])), function (props) {
+  return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
 }, function (props) {
-  return props.upload_type === 'rc' ? '#FFFFFF' : '#15212F';
+  return props.upload_type === "rc" ? "#FFFFFF" : "#15212F";
 });
 var HoverActionContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-left: 6px;\n"])));
 var StatusBoxStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  padding: 5px 8px;\n  width: fit-content;\n  border-radius: 15px;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n  ", ";\n\n  .status-color {\n    height: 6px;\n    width: 6px;\n    border-radius: 100%;\n    background-color: ", ";\n    margin-right: 5px;\n  }\n\n  .status-text {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    -webkit-line-clamp: 1;\n    height: 10px;\n  }\n"])), OverlayBackgroundStyles, function (_ref7) {
   var hex = _ref7.hex;
   return hex.background;
 });
+
+// ---------- New styled components for nested dropdown ----------
+var TopRightMenuContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  z-index: 99999;\n"])));
+var DropdownContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: inline-block;\n"])));
+var Menu = _styledComponents["default"].ul(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  list-style: none;\n  margin: 0;\n  padding: 4px 0;\n  width: max-content;\n  background: #182738;\n  border-radius: 4px;\n  min-width: 100px;\n  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.25);\n"])));
+var MenuItemWrapper = _styledComponents["default"].li(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  font-family: \"SFUIText-Regular\";\n  display: flex;\n  flex-direction: column;\n\n  &:last-child hr {\n    display: none;\n  }\n"])));
+var MenuItem = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  color: #ffffff;\n  padding: 8px 12px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  white-space: nowrap;\n  font-size: 14px;\n  transition: background 0.2s ease;\n\n  &:hover {\n    background: #1c2d44;\n  }\n\n  & svg {\n    width: 14px;\n    height: 14px;\n    color: #fff;\n    margin-left: 8px;\n  }\n"])));
+var Divider = _styledComponents["default"].hr(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  margin: 0;\n"])));
+var SubMenu = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 0;\n  left: calc(100% - 2px);\n  margin-left: 0;\n  z-index: 100;\n"])));
+var RightArrow = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 5px solid #fff;\n  margin-left: 8px;\n  opacity: 0.8;\n"])));
+// ----------------------------------------------------------------
+
+// NestedDropdown and DropdownItem components
+var NestedDropdown = function NestedDropdown(_ref8) {
+  var data = _ref8.data,
+    onSelect = _ref8.onSelect;
+  return /*#__PURE__*/_react["default"].createElement(DropdownContainer, null, /*#__PURE__*/_react["default"].createElement(Menu, null, (data || []).map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_DropdownItem, {
+      key: "".concat(item.label || item.value || index, "-").concat(index),
+      item: item,
+      onSelect: onSelect
+    });
+  })));
+};
+var _DropdownItem = function DropdownItem(_ref9) {
+  var item = _ref9.item,
+    onSelect = _ref9.onSelect;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var handleClick = function handleClick(e) {
+    e.stopPropagation();
+    if (item.children && item.children.length) {
+      setOpen(function (prev) {
+        return !prev;
+      });
+      return;
+    }
+    if (onSelect) {
+      onSelect(item);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(MenuItemWrapper, {
+    onClick: handleClick,
+    onMouseEnter: function onMouseEnter() {
+      return setOpen(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setOpen(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(MenuItem, null, /*#__PURE__*/_react["default"].createElement("span", null, item.label), item.children && item.children.length ? /*#__PURE__*/_react["default"].createElement(RightArrow, null) : null), item.children && open ? /*#__PURE__*/_react["default"].createElement(SubMenu, null, /*#__PURE__*/_react["default"].createElement(Menu, null, item.children.map(function (child, i) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: "".concat(child.label || child.value || i, "-").concat(i)
+    }, /*#__PURE__*/_react["default"].createElement(_DropdownItem, {
+      item: child,
+      onSelect: onSelect
+    }), /*#__PURE__*/_react["default"].createElement(Divider, null));
+  }))) : null, /*#__PURE__*/_react["default"].createElement(Divider, null));
+};
+var DropdownPortal = function DropdownPortal(_ref10) {
+  var open = _ref10.open,
+    anchorRef = _ref10.anchorRef,
+    children = _ref10.children,
+    onMouseEnter = _ref10.onMouseEnter,
+    onMouseLeave = _ref10.onMouseLeave;
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    style = _useState4[0],
+    setStyle = _useState4[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (!open || !anchorRef.current) return;
+    var updatePosition = function updatePosition() {
+      var rect = anchorRef.current.getBoundingClientRect();
+      setStyle({
+        top: rect.bottom + 2,
+        left: rect.right - 140
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return function () {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, anchorRef]);
+  if (!open) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(TopRightMenuContainer, {
+    style: style,
+    onMouseEnter: onMouseEnter /* Fixed: use passed prop instead of undefined openMenu */,
+    onMouseLeave: onMouseLeave /* Fixed: use passed prop instead of undefined closeMenu */,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children), document.body);
+};
 var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
   return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
-})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    right: 0;\n    transform: translateX(0);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    width: max-content;\n    max-width: 200px;\n    white-space: normal;\n    overflow-wrap: break-word;\n    text-align: center;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: 'SFUIText-Regular';\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: 'SFUIText-Light';\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
+})(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  .tooltip {\n    position: absolute;\n    bottom: 130%;\n    right: 0;\n    transform: translateX(0);\n    padding: 5px 9px;\n    box-sizing: border-box;\n    background: #000000;\n    color: #fff;\n    border-radius: 10px;\n    width: max-content;\n    max-width: 200px;\n    white-space: normal;\n    overflow-wrap: break-word;\n    text-align: center;\n    visibility: hidden;\n    opacity: 0;\n    z-index: 10;\n    transition: all 350ms ease-in-out 0s;\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid #000;\n      bottom: -5px;\n      left: 50%;\n    }\n    .details-header {\n      color: #666666;\n      font-family: \"SFUIText-Regular\";\n      text-transform: none;\n      margin-bottom: 8px;\n    }\n    .details-value {\n      color: #999999;\n      font-family: \"SFUIText-Light\";\n      text-transform: none;\n      font-size: 10px;\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &:active,\n  &:focus {\n    outline: none;\n  }\n"])), OverlayBackgroundStyles, function (props) {
   return _tokens.colors[props.theme].card.themeColor;
 });
-var CardHeader = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
-var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 3;\n  opacity: 1;\n"])));
+var CardHeader = _styledComponents["default"].div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
+var BottomActionContainer = _styledComponents["default"].div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 3;\n  opacity: 1;\n"])));
 var ThumbnailV2 = function ThumbnailV2(props) {
   var theme = props.theme,
     width = props.width,
@@ -83,39 +181,62 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     data_type = props.data_type,
     onUploadTypeClick = props.onUploadTypeClick,
     showPointer = props.showPointer,
-    value = props.value;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    statusIndex = _useState2[0],
-    setStatusIndex = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isClickPrevented = _useState4[0],
-    setClickPreventation = _useState4[1];
+    value = props.value,
+    nestedDropdownData = props.nestedDropdownData,
+    onNestedDropdownSelect = props.onNestedDropdownSelect,
+    _props$isAdobe = props.isAdobe,
+    isAdobe = _props$isAdobe === void 0 ? false : _props$isAdobe;
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    statusIndex = _useState6[0],
+    setStatusIndex = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isClickPrevented = _useState8[0],
+    setClickPreventation = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    showTopRightAction = _useState10[0],
+    setShowTopRightAction = _useState10[1];
   var iframeImageBlockRef = (0, _react.useRef)(null);
   var iframeImageRef = (0, _react.useRef)(null);
   var hoverPointerRef = (0, _react.useRef)(null);
+  var menuAnchorRef = (0, _react.useRef)(null);
+  var closeTimer = (0, _react.useRef)(null);
+  var openMenu = function openMenu() {
+    clearTimeout(closeTimer.current);
+    setShowTopRightAction(true);
+  };
+  var closeMenu = function closeMenu() {
+    closeTimer.current = setTimeout(function () {
+      setShowTopRightAction(false);
+    }, 150);
+  };
   (0, _react.useEffect)(function () {
     if (actions && actions.length > 0 && actions.some(function (item) {
-      return item.field === 'upload' || item.field === 'phupload_ingest';
-    }) // can add multiple condition in future to prevent click
-    ) {
+      return item.field === "upload" || item.field === "phupload_ingest";
+    })) {
       setClickPreventation(true);
     }
   }, [actions && JSON.stringify(actions).length > 0]);
   (0, _react.useEffect)(function () {
-    /**
-     * will return the hex based status passed
-     * eg. status = In Progress -> will format to "in_progress"
-     * then it will find its index in CARD_ASSET_STATUS which will
-     * return hex
-     * @const
-     */
     var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
-      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
+      return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
     });
     setStatusIndex(index);
   }, [upload_status, card_status]);
+  (0, _react.useEffect)(function () {
+    if (!showTopRightAction) return;
+    var handleClick = function handleClick(e) {
+      if (menuAnchorRef.current && !menuAnchorRef.current.contains(e.target)) {
+        setShowTopRightAction(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function () {
+      return document.removeEventListener("mousedown", handleClick);
+    };
+  }, [showTopRightAction]);
   var handleMouseMove = (0, _react.useCallback)(function () {
     if (iframeImageBlockRef && hoverPointerRef && iframeImageRef) {
       var iframeBlockHeight = iframeImageBlockRef.current.offsetHeight;
@@ -127,24 +248,18 @@ var ThumbnailV2 = function ThumbnailV2(props) {
       var iframeOffsetHeight = offsetHeight / iframeCount;
       var imageChangePoint = offsetWidth / iframeCount;
       var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
-      hoverPointerRef.current.style.left = event.offsetX + 'px';
+      hoverPointerRef.current.style.left = event.offsetX + "px";
       var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
       var imageTop = iframeOffsetHeight * imageNum + offsetTop;
       if (imageTop > offsetHeight) {
         imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
       }
-      iframeImageRef.current.style.top = '-' + imageTop + 'px';
+      iframeImageRef.current.style.top = "-" + imageTop + "px";
     }
   }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
-
-  /**
-   * will decide thumbnail click based on its condition
-   * eg. if task_type === upload then prevent click
-   * @function
-   */
   var handleThumbnailClick = (0, _react.useCallback)(function (e) {
     if (!isClickPrevented) {
-      actionClick(e, 'play', ingest_db_id);
+      actionClick(e, "play", ingest_db_id);
     } else {
       e.preventDefault();
     }
@@ -155,10 +270,22 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   }, [actionClick]);
   var handleUploadTypeClick = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
+    if (nestedDropdownData && nestedDropdownData.length) {
+      setShowTopRightAction(function (prev) {
+        return !prev;
+      });
+      return;
+    }
     if (onUploadTypeClick) {
       onUploadTypeClick();
     }
-  }, [onUploadTypeClick]);
+  }, [onUploadTypeClick, nestedDropdownData]);
+  var handleNestedSelect = (0, _react.useCallback)(function (item) {
+    setShowTopRightAction(false);
+    if (onNestedDropdownSelect) {
+      onNestedDropdownSelect(item);
+    }
+  }, [onNestedDropdownSelect]);
   return /*#__PURE__*/_react["default"].createElement(ThumbnailStyles, {
     width: width,
     thumbnail: thumbnail,
@@ -175,7 +302,31 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     position: "relative",
     zIndex: "2",
     marginLeft: "auto"
-  }, ingest_db_id && /*#__PURE__*/_react["default"].createElement(HoverActionContainer, null, /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
+  }, ingest_db_id && /*#__PURE__*/_react["default"].createElement(HoverActionContainer, null, nestedDropdownData && nestedDropdownData.length && isAdobe ? /*#__PURE__*/_react["default"].createElement("div", {
+    ref: menuAnchorRef,
+    style: {
+      position: "relative"
+    },
+    onMouseEnter: openMenu,
+    onMouseLeave: closeMenu
+  }, /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
+    className: "rotate-icon",
+    type: "button",
+    title: "More"
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "dots",
+    width: 14,
+    height: 14,
+    theme: props.theme
+  })), /*#__PURE__*/_react["default"].createElement(DropdownPortal, {
+    open: showTopRightAction,
+    anchorRef: menuAnchorRef,
+    onMouseEnter: openMenu,
+    onMouseLeave: closeMenu
+  }, /*#__PURE__*/_react["default"].createElement(NestedDropdown, {
+    data: nestedDropdownData,
+    onSelect: handleNestedSelect
+  }))) : !isAdobe && /*#__PURE__*/_react["default"].createElement(HoverActionButton, {
     type: "button",
     onClick: handleUploadTypeClick,
     title: "Info"
@@ -214,7 +365,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "circle"
   }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-    name: file_type == 'video' && value == 'collateral' ? 'video-icon' : "".concat(file_type, "-icon"),
+    name: file_type == "video" && value == "collateral" ? "video-icon" : "".concat(file_type, "-icon"),
     width: 15,
     height: 15
   }))) : null, iframeurl && /*#__PURE__*/_react["default"].createElement("div", {
@@ -231,7 +382,7 @@ var ThumbnailV2 = function ThumbnailV2(props) {
   })) || null);
 };
 ThumbnailV2.propTypes = {
-  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
   width: _propTypes["default"].string,
   thumbnail: _propTypes["default"].string,
   file_type: _propTypes["default"].string,
@@ -241,12 +392,16 @@ ThumbnailV2.propTypes = {
   ingest_db_id: _propTypes["default"].string,
   actions: _propTypes["default"].instanceOf(Array),
   actionClick: _propTypes["default"].func,
-  onUploadTypeClick: _propTypes["default"].func
+  onUploadTypeClick: _propTypes["default"].func,
+  nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  onNestedDropdownSelect: _propTypes["default"].func,
+  isAdobe: _propTypes["default"].bool
 };
 ThumbnailV2.defaultProps = {
-  theme: 'dark',
-  width: 'lg',
-  thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
-  iframeurl: ''
+  theme: "dark",
+  width: "lg",
+  thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
+  iframeurl: "",
+  isAdobe: false
 };
 var _default = exports["default"] = ThumbnailV2;

package/atoms/icon/icons.json

@@ -1981,6 +1981,13 @@
       "paths": ["M.006 10.286L12 5.143.006 0 0 4l8.571 1.143L0 6.286z"],
       "width": 12,
       "height": 11
+    },
+    "notes-comment":{
+      "paths": [
+        "M0 10V1C0 0.725 0.0979167 0.489583 0.29375 0.29375C0.489583 0.0979167 0.725 0 1 0H9C9.275 0 9.51042 0.0979167 9.70625 0.29375C9.90208 0.489583 10 0.725 10 1V7C10 7.275 9.90208 7.51042 9.70625 7.70625C9.51042 7.90208 9.275 8 9 8H2L0 10ZM2 6H6V5H2V6ZM2 4.5H8V3.5H2V4.5ZM2 3H8V2H2V3Z"
+      ],
+      "width": 10,
+      "height": 10
     }
   }
-}
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.2.22",
+  "version": "9.2.24",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.2.22",
+    "@desynova-digital/tokens": "9.2.24",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },