@scaleflex/widget-explorer 0.0.1

package/lib/components/AssetsList/AssetsList.styled.js

@@ -0,0 +1,219 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css, keyframes } from 'styled-components';
+import { CheckBox, Input, Label as SfxLabel, Skeleton, Accordion as SfxAccordion, IconButton, Button } from '@scaleflex/ui/core';
+import { FolderIcon } from '@scaleflex/widget-icons';
+import { PC, FV, PSH, Image } from '@scaleflex/widget-common';
+import StyledOriginalBadge from '../common/OriginalBadge/OriginalBadge.styled';
+var opacityAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0.25; }\n  to { opacity: 0.6; }\n"])));
+// Since it is not possible to mix both pointer-events: none with cursor: default, so we are using this wrapper for assigning the cursor style.
+export var loadingItemMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: default !important;\n  animation: ", " 1s infinite alternate-reverse;\n  user-select: none;\n\n  /*\n    Avoid pointer-events for table's (th & td) only for showing the cursor: default style in list layout\n    as it doesn't work with tr directly while having td/th pointer-events: none\n    We should consider disabling the possibility to do any operation over those th/td elements from their components ex. clicking...etc.\n  */\n  *:not(th, td) {\n    pointer-events: none !important;\n  }\n"])), opacityAnimation);
+var FolderSectionItem = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  outline: none;\n  cursor: pointer;\n  ", "\n  ", "\n\n  svg {\n    max-width: 100%;\n  }\n\n  ", "\n"])), function (_ref) {
+  var $loading = _ref.$loading;
+  return $loading && loadingItemMixin;
+}, function (_ref2) {
+  var disableHoverEffects = _ref2.disableHoverEffects;
+  return disableHoverEffects && 'pointer-events: none;';
+}, function (props) {
+  return !props.$loading && !props.disableHoverEffects && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    &:hover {\n      & > svg > path {\n        fill: ", ";\n      }\n\n      [data-img-placeholder=\"true\"] {\n        background: ", ";\n        img {\n          filter: brightness(0.9);\n        }\n      }\n    }\n\n  ", "\n   "])), function (props) {
+    return props.theme.palette[PC.BackgroundActive];
+  }, function (_ref3) {
+    var theme = _ref3.theme;
+    return theme.palette[PC.Extra_0_3_Overlay];
+  }, function (props) {
+    return props.selected && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n       &:hover {\n        & > svg > path {\n          fill: ", ";\n        }\n      }\n\n      & > svg {\n        path {\n         fill: ", ";\n         stroke: ", ";\n        }\n      }\n\n      [data-img-placeholder=\"true\"] {\n        background: ", ";\n\n        img {\n          filter: brightness(0.9);\n        }\n      }\n    "])), function (props) {
+      return props.theme.palette[PC.BackgroundGrey];
+    }, function (props) {
+      return props.theme.palette[PC.BackgroundGrey];
+    }, function (props) {
+      return props.theme.palette[PC.AccentPrimary];
+    }, function (_ref4) {
+      var theme = _ref4.theme;
+      return theme.palette[PC.Extra_0_3_Overlay];
+    });
+  });
+});
+var StyledFolderIcon = styled(FolderIcon)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n"])));
+var getFileSectionMinHeight = function getFileSectionMinHeight(length) {
+  if (length >= 4) {
+    return '300px';
+  }
+  if (length >= 2) {
+    return '250px';
+  }
+  return 'auto';
+};
+var FileSectionItem = styled.div(function (_ref5) {
+  var $loading = _ref5.$loading,
+    theme = _ref5.theme,
+    selected = _ref5.selected,
+    isMutedFile = _ref5.isMutedFile,
+    isSkeleton = _ref5.isSkeleton,
+    thumbnailMetadataKeysLength = _ref5.thumbnailMetadataKeysLength,
+    isOverlayWithButton = _ref5.isOverlayWithButton;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  outline: none;\n  position: relative;\n  margin: 0;\n  min-height: ", ";\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &::before {\n    content: \"\";\n    padding-top: 88%;\n    display: block;\n  }\n\n  ", "\n"])), getFileSectionMinHeight(thumbnailMetadataKeysLength), $loading && loadingItemMixin, isSkeleton && "background-color: ".concat(theme.palette[PC.BackgroundHover], ";"), !$loading && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    &:hover {\n      .filerobot-common-ItemHoverTopOptions {\n        visibility: visible;\n      }\n      ", " {\n        visibility: visible;\n      }\n    }\n  "])), Styled.SelectButton), !selected && !isOverlayWithButton && !$loading && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      &:hover {\n        & > ", " {\n        background-color: ", " ;\n        border: 1px solid ", ";\n\n        .filerobot-Explorer-Item-fileInfo {\n          background-color: ", " ;\n        }\n      }\n\n      ", " {\n        visibility: hidden;\n      }\n\n      ", "{\n        visibility: hidden;\n      }\n    }\n  "])), FileSectionItemWrapper, theme.palette[PC.Extra_0_3_Overlay], theme.palette[PC.BackgroundGrey], theme.palette[PC.BackgroundActive], FileRelevanceBadge, StyledOriginalBadge.OriginalBadge), (selected || isOverlayWithButton) && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  & > ", " {\n      border: 1px solid ", ";\n      background-color: ", ";\n\n      .filerobot-Explorer-Item-fileInfo {\n        background-color: ", " ;\n      }\n    }\n  "])), FileSectionItemWrapper, theme.palette[PC.AccentStateless], theme.palette[PC.Extra_0_3_Overlay], theme.palette[PC.BordersItem]), isMutedFile && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    opacity: 0.4;\n    pointer-events: none;\n    background-color: ", ";\n  "])), theme.palette[PC.BackgroundStateless]));
+});
+var SelectButton = styled(Button)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  border-radius: 4px;\n  background: ", ";\n  color: ", ";\n  top: 37%;\n  left: 50%;\n  width: 64px;\n  height: 32px;\n  transform: translate(-50%, -50%);\n  z-index: 10;\n  visibility: hidden;\n  padding: 8px 12px;\n\n  .SfxButton-Label {\n    ", ";\n    width: 40px;\n    height: 16px;\n    line-height: 18px;\n  }\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette[PC.Extra_0_7_Overlay];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette[PC.ButtonPrimaryText];
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.typography.font[FV.ButtonMdEmphasis];
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.palette[PC.Extra_0_9_Overlay];
+});
+var SeeVariationsButton = styled(SelectButton)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: auto;\n\n  .SfxButton-Label {\n    width: auto;\n    white-space: nowrap;\n  }\n"])));
+var FolderPreviewGrid = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  flex-grow: 1;\n  padding: 8px 8px 0;\n  max-height: calc(100% - 54px); // 54px = Folder info height\n\n  ", " {\n    max-height: calc(100% - 50px); // 50px = Folder info height\n  }\n"])), function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.breakpoints.down('lg');
+});
+var FolderContent = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  outline: none;\n  top: 26px; // 26px is average = 18px height of folder flag + 8px as average height (difference of bigger folder cell as the flag gets bigger on increasing the folder's icon)\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  & > svg {\n     path {\n      transition: all 100ms ease-in-out;\n     }\n  }\n\n  ", "\n"])), function (_ref11) {
+  var fullSizeGrid = _ref11.fullSizeGrid;
+  return fullSizeGrid && css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    top: 16px;\n\n    ", " {\n      max-height: calc(100% - 5px);\n      padding: 8px;\n\n      ", " {\n        max-height: calc(100% - 8px);\n      }\n    }\n  "])), FolderPreviewGrid, function (_ref12) {
+    var theme = _ref12.theme;
+    return theme.breakpoints.down('lg');
+  });
+});
+var PreviewGridLeftColumn = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  width: 66%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n"])));
+var PreviewGridRightColumn = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 34%;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0px;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  > div {\n    height: 50%;\n  }\n"])));
+var PreviewGridImgWrapper = styled.div.attrs(function () {
+  return {
+    'data-img-placeholder': true
+  };
+})(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.palette[PC.BackgroundActive];
+});
+var PreviewGridImg = styled(Image)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  object-fit: ", ";\n"])), function (_ref14) {
+  var isContainedFit = _ref14.isContainedFit;
+  return isContainedFit ? 'contain' : 'cover';
+});
+var FolderInfo = styled.div(function (_ref15) {
+  var theme = _ref15.theme,
+    height = _ref15.height;
+  return "\n  height: ".concat(height || '54px', ";\n  padding: 8px 12px 12px;\n  margin-top: auto;\n\n  ").concat(theme.breakpoints.down('lg'), " {\n    height: 50px;\n    padding: 8px;\n  }\n");
+});
+var FolderTitle = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n"])), function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.typography.font[FV.LabelMedium];
+}, function (props) {
+  return props.theme.palette[PC.TextPrimary];
+});
+var FolderSubTitle = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n"])));
+var FolderSubTitleText = styled(SfxLabel)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 50%;\n"])));
+var FolderSectionItemCheckbox = styled(CheckBox)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  margin: 12px;\n  position: absolute;\n  visibility: ", ";\n  z-index: 1;\n  ", ":hover & {\n     visibility: visible;\n  }\n  transition: all 100ms ease-in-out;\n"])), function (props) {
+  return props.checked ? 'visible' : 'hidden';
+}, FolderSectionItem);
+var FolderInputRename = styled(Input)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 16px;\n  padding: 0.5px 4px;\n\n  &::selection {\n    background: yellow;\n  }\n\n  input {\n    height: 14px;\n  }\n"])));
+var FileSectionItemCheckbox = styled(CheckBox)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  top: 6%;\n  left: 6%;\n  position: absolute;\n  visibility: ", ";\n  z-index: 3;\n  ", ":hover & {\n    visibility: visible;\n  };\n  border: 1px solid ", ";\n  transition: all 100ms ease-in-out;\n"])), function (props) {
+  return props.checked ? 'visible' : 'hidden';
+}, FileSectionItem, function (props) {
+  return props.theme.palette[PC.BorderPrimaryStateless];
+});
+var FileSectionItemWrapper = styled.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    text-align: center;\n    border-radius: 4px;\n    border: 1px solid ", ";\n    transition: all 100ms ease-in-out;\n    cursor: pointer;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.with-meta {\n      display: flex;\n      flex-direction: column-reverse;\n      align-items: center;\n      justify-content: flex-end;\n\n      &:focus {\n        box-shadow: none;\n      }\n    }\n"])), function (props) {
+  return props.theme.palette[PC.BordersItem];
+});
+var FileSkeleton = styled(Skeleton)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: ", ";\n  margin-left: 12px;\n"])), function (props) {
+  return props.bottom;
+});
+var FileVideoDurationWrapper = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 4%;\n  left: 6%;\n  z-index: 2;\n  border-radius: 2px;\n  padding: 2px 4px;\n  text-align: center;\n  ", ";\n  background-color: ", ";\n  color: ", ";\n"])), function (props) {
+  return props.theme.typography.font[FV.LabelExtraSmallUp];
+}, function (props) {
+  return props.theme.palette[PC.Extra_0_7_Overlay];
+}, function (props) {
+  return props.theme.palette[PC.IconsInvert];
+});
+var FileListVideoDurationWrapper = styled(FileVideoDurationWrapper)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  bottom: 17%;\n  left: 7%;\n  padding: 1px 2px;\n  font-size: 9px;\n  line-height: 9px;\n"])));
+var FileVideoOptions = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  & > .filerobot-common-ItemHoverTopOptions {\n    right: calc(50% - 22px);\n    top: calc(50% - 22px);\n    padding: 0;\n\n   .filerobot-common-BaseButton {\n     width: 44px;\n     height: 44px;\n     margin: 0;\n\n     svg {\n       width: 22px;\n       height: 22px;\n     }\n   }\n  }\n\n  *:hover > & {\n    .filerobot-common-ItemHoverTopOptions {\n      visibility: visible;\n    }\n  }\n"])));
+var Accordion = styled(SfxAccordion)(function (_ref17) {
+  var hideHeader = _ref17.hideHeader,
+    noTopMargin = _ref17.noTopMargin,
+    isListView = _ref17.isListView,
+    _ref17$theme = _ref17.theme,
+    typography = _ref17$theme.typography,
+    palette = _ref17$theme.palette;
+  return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n  margin-top: ", ";\n\n  ", "\n\n  .SfxAccordionHeader-root {\n    padding: 0 24px;\n    display: ", "\n  }\n\n  .SfxAccordionHeader-label {\n    ", ";\n    color: ", "\n  }\n"])), noTopMargin ? 0 : '12px', isListView && "\n    max-width: 2200px;\n    margin: auto;\n  ", hideHeader ? 'none' : 'inline-flex', typography.font[FV.LabelMediumEmphasis], palette[PC.TextSecondary]);
+});
+var RelevanceScore = styled.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 6px 0px;\n  font-size: 20px;\n"])));
+var FileRelevanceBadge = styled.div(function (_ref18) {
+  var $isListView = _ref18.$isListView,
+    $relevance = _ref18.$relevance,
+    isFileChecked = _ref18.isFileChecked,
+    _ref18$theme = _ref18.theme,
+    palette = _ref18$theme.palette,
+    typography = _ref18$theme.typography;
+  return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  ", ";\n  ", "\n  background-color: ", ";\n  color: ", ";\n  width: 47px;\n  height: 22px;\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n  visibility: visible;\n  border-radius: 4px;\n"])), typography.font[FV.LabelMediumEmphasis], !$isListView && css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    top: 0%;\n    margin: 12px;\n    position: absolute;\n  "]))), palette[$relevance >= 90 ? PC.Success : PC.BordersPrimaryHover], palette[PC.ButtonPrimaryText], isFileChecked && !$isListView ? 'none' : 'flex');
+});
+var getScrollTopButtonPosition = function getScrollTopButtonPosition(isProgressPanelMinimized) {
+  if (isProgressPanelMinimized) {
+    return '92px';
+  }
+  return '36px';
+};
+var ScrollToTopButton = styled(IconButton)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: ", ";\n  right: 24px;\n  z-index: 1000;\n  max-height: 48px;\n  padding: 15px;\n  background-color: ", ";\n  color: ", ";\n  box-shadow:  ", ";\n\n  &:hover {\n    background-color: ", ";\n    & > svg {\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &:focus,\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref19) {
+  var isProgressPanelMinimized = _ref19.isProgressPanelMinimized;
+  return getScrollTopButtonPosition(isProgressPanelMinimized);
+}, function (_ref20) {
+  var palette = _ref20.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref21) {
+  var palette = _ref21.theme.palette;
+  return palette[PC.IconsSecondary];
+}, function (_ref22) {
+  var shadows = _ref22.theme.shadows;
+  return shadows[PSH.ShadowXl];
+}, function (_ref23) {
+  var palette = _ref23.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref24) {
+  var palette = _ref24.theme.palette;
+  return palette[PC.AccentPrimary];
+}, function (_ref25) {
+  var palette = _ref25.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref26) {
+  var palette = _ref26.theme.palette;
+  return palette[PC.IconsSecondary];
+});
+var ApprovalStatusWrapper = styled.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  display: flex;\n  visibility: visible;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: 14px;\n  right: 12px;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px 0px rgba(77, 78, 78, 0.15);\n  border-radius: 4px;\n  z-index: 100;\n  padding: 2px 4px;\n  transition: visibility 0s linear 180ms;\n\n  ", ":hover & {\n    visibility: hidden;\n    transition: visibility 0s linear 30ms;\n  };\n\n  div {\n    color: ", ";\n  }\n"])), function (_ref27) {
+  var palette = _ref27.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, FileSectionItem, function (_ref28) {
+  var palette = _ref28.theme.palette;
+  return palette[PC.TextSecondary];
+});
+var Styled = {
+  FolderSectionItem: FolderSectionItem,
+  FileSectionItem: FileSectionItem,
+  FolderSectionItemCheckbox: FolderSectionItemCheckbox,
+  FileSectionItemCheckbox: FileSectionItemCheckbox,
+  SelectButton: SelectButton,
+  FolderContent: FolderContent,
+  FolderPreviewGrid: FolderPreviewGrid,
+  PreviewGridLeftColumn: PreviewGridLeftColumn,
+  PreviewGridRightColumn: PreviewGridRightColumn,
+  PreviewGridImgWrapper: PreviewGridImgWrapper,
+  PreviewGridImg: PreviewGridImg,
+  FolderInfo: FolderInfo,
+  FileRelevanceBadge: FileRelevanceBadge,
+  FolderIcon: StyledFolderIcon,
+  FolderTitle: FolderTitle,
+  FolderSubTitle: FolderSubTitle,
+  FolderSubTitleText: FolderSubTitleText,
+  FolderInputRename: FolderInputRename,
+  FileSectionItemWrapper: FileSectionItemWrapper,
+  FileSkeleton: FileSkeleton,
+  FileVideoDurationWrapper: FileVideoDurationWrapper,
+  FileListVideoDurationWrapper: FileListVideoDurationWrapper,
+  FileVideoOptions: FileVideoOptions,
+  Accordion: Accordion,
+  RelevanceScore: RelevanceScore,
+  ScrollToTopButton: ScrollToTopButton,
+  ApprovalStatusWrapper: ApprovalStatusWrapper,
+  SeeVariationsButton: SeeVariationsButton
+};
+export default Styled;

package/lib/components/AssetsList/GridView/FilesAccordion.js

@@ -0,0 +1,76 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import InfiniteScroll from '../../InfiniteScroll/InfiniteScroll';
+import GridLayoutFilesSkeleton from './FilesSkeleton';
+import FilesSection from './FilesSection';
+import Styled from '../AssetsList.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FilesAccordion = function FilesAccordion(_ref) {
+  var hideAccordionHeader = _ref.hideAccordionHeader,
+    noTopMargin = _ref.noTopMargin,
+    label = _ref.label,
+    filesUuids = _ref.filesUuids,
+    fetchNextFiles = _ref.fetchNextFiles,
+    noMoreFiles = _ref.noMoreFiles,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    isLoading = _ref.isLoading,
+    openCurrentFolderContextMenu = _ref.openCurrentFolderContextMenu,
+    onScroll = _ref.onScroll,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    containerWidth = _ref.containerWidth,
+    filesSectionProps = _ref.filesSectionProps,
+    scrollableElem = _ref.scrollableElem,
+    isSimilarSearchActive = _ref.isSimilarSearchActive,
+    isAiSearch = _ref.isAiSearch;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showFiles = _useState2[0],
+    setShowFiles = _useState2[1];
+  var enableFetchNextFiles = !isSimilarSearchActive && !isAiSearch;
+  var handleToggleFiles = function handleToggleFiles() {
+    return setShowFiles(!showFiles);
+  };
+  if (isLoading) return /*#__PURE__*/_jsx(GridLayoutFilesSkeleton, {});
+  return /*#__PURE__*/_jsx(Styled.Accordion, {
+    expanded: showFiles,
+    hideHeader: hideAccordionHeader,
+    noTopMargin: noTopMargin,
+    label: label,
+    onClick: handleToggleFiles,
+    detailStyle: {
+      margin: '0px'
+    },
+    onContextMenu: function onContextMenu(e) {
+      return e.stopPropagation();
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: "filerobot-Provider-ItemCategory-wrapper",
+      onContextMenu: openCurrentFolderContextMenu,
+      children: showFiles && /*#__PURE__*/_jsx(InfiniteScroll, {
+        dataLength: filesUuids.length,
+        next: enableFetchNextFiles ? fetchNextFiles : undefined,
+        hasMore: !noMoreFiles,
+        scrollableTarget: scrollableElem,
+        onScroll: onScroll,
+        children: /*#__PURE__*/_jsx(FilesSection, _objectSpread({
+          filesUuids: filesUuids,
+          handleContextMenuToggle: handleContextMenuToggle,
+          handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+          containerWidth: containerWidth
+        }, filesSectionProps))
+      })
+    })
+  });
+};
+export default FilesAccordion;

package/lib/components/AssetsList/GridView/FilesSection/FileCell.js

@@ -0,0 +1,276 @@
+var _excluded = ["fileUuid", "handleNavigatingThroughArrows", "hideOverlayOptions"];
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useMemo, useState, useCallback, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Play } from '@scaleflex/icons';
+import FileInfo from '@scaleflex/widget-explorer/lib/components/FileItem/FileInfo';
+import formatSeconds from '@scaleflex/widget-utils/lib/formatSeconds';
+import _getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import isPreviewSupported from '@scaleflex/widget-utils/lib/isPreviewSupported';
+import { ItemHoverTopOptions, AssetPreview } from '@scaleflex/widget-common';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { selectIsRelevanceAvailable } from '@scaleflex/widget-core/lib/slices/common.slice';
+import isVideo from '@scaleflex/widget-utils/lib/isVideo';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import DnD from '../../../DnD';
+import FileOverlayOptions from './FileOverlayOptions';
+import Styled from '../../AssetsList.styled';
+import relevanceBadge from '../../relevanceBadge';
+import { useExplorer, useFetchFileFolderPermissions } from '../../../../hooks';
+import { fileWindowUpdated, selectRenameItemFor } from '../../../../slices/panels.slice';
+import { selectIsItemChecked, toggleSelection } from '../../../../slices/selections.slice';
+import { selectIsSimilarSearchActive, selectSearchQuery, selectSimilarSearchOriginalFile } from '../../../../slices/search.slice';
+import { selectCurrentFileByUuid } from '../../../../slices/files.slice';
+import { selectIsAssetsView, selectIsSearchOrFiltersMode, selectViewLayout } from '../../../../slices/views.slice';
+import OriginalBadge from '../../../common/OriginalBadge';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var checkboxOnChange = function checkboxOnChange() {};
+var FileCell = function FileCell(_ref) {
+  var fileUuid = _ref.fileUuid,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    hideOverlayOptions = _ref.hideOverlayOptions,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    container = _useExplorer.container,
+    isDevEnv = _useExplorer.isDevEnv,
+    checkUserPermissions = _useExplorer.checkUserPermissions,
+    opts = _useExplorer.opts;
+  var renameItemFor = useSelector(selectRenameItemFor);
+  var isChecked = useSelector(function (state) {
+    return selectIsItemChecked(state, fileUuid);
+  });
+  var isRelevanceAvailable = useSelector(selectIsRelevanceAvailable);
+  var searchQuery = useSelector(selectSearchQuery);
+  var fromSearch = useSelector(selectIsSearchOrFiltersMode);
+  var isAssetsView = useSelector(selectIsAssetsView);
+  var viewLayout = useSelector(selectViewLayout);
+  var file = useSelector(function (state) {
+    return selectCurrentFileByUuid(state, fileUuid);
+  });
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var similarSearchOriginalFile = useSelector(selectSimilarSearchOriginalFile);
+  var _useFetchFileFolderPe = useFetchFileFolderPermissions(),
+    fetchPermissions = _useFetchFileFolderPe.fetchPermissions,
+    clearFetchPermissionsTimer = _useFetchFileFolderPe.clearFetchPermissionsTimer;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showVideoGif = _useState2[0],
+    setShowVideoGif = _useState2[1];
+  var clickTimeout = useRef(null);
+  var showMeta = opts.showMeta,
+    useAssetsPicker = opts.useAssetsPicker,
+    thumbnailMetadataKeys = opts.thumbnailMetadataKeys,
+    mutedFilesUuids = opts.mutedFilesUuids,
+    disableMultipleSelect = opts.disableMultipleSelect;
+  var isSearchMode = isAssetsView && searchQuery;
+  var uuid = file.uuid;
+  var fileName = file.name;
+  var isLoading = file.loading;
+  var showSearchDebugInfo = JSON.parse(localStorage.getItem('debug_search')) || false;
+  var handleSelect = function handleSelect(event) {
+    if (isLoading || useAssetsPicker && disableMultipleSelect) {
+      return;
+    }
+    if (clickTimeout.current) {
+      clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+      return;
+    }
+    clickTimeout.current = setTimeout(function () {
+      dispatch(toggleSelection({
+        event: event,
+        itemUuid: uuid,
+        isMultiple: event.isMultiple
+      }));
+      clickTimeout.current = null;
+    }, 250); // Delay to distinguish single vs double click
+  };
+  var handleOnContextMenu = function handleOnContextMenu(event) {
+    if (!isLoading && typeof props.handleContextMenuToggle === 'function') {
+      props.handleContextMenuToggle(event, file);
+    }
+  };
+  var toggleFileWindow = useCallback(function (event) {
+    if (event.target.tagName === 'INPUT' || isLoading || !checkUserPermissions([PERMISSIONS.DISPLAY])) return;
+    if (clickTimeout.current) {
+      clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+    }
+    dispatch(fileWindowUpdated(uuid));
+  }, [file]);
+  var isItemBeingRenamed = renameItemFor === uuid;
+  var isFileChecked = isChecked;
+  var options = useMemo(function () {
+    return [{
+      key: 'GridLi-PreviewVideo',
+      Icon: Play,
+      iconSize: 22,
+      onClick: toggleFileWindow,
+      hidden: !isPreviewSupported(file)
+    }];
+  }, [file]);
+  var handleMouseOver = function handleMouseOver() {
+    var _file$info, _file$info2;
+    if (isLoading) {
+      return;
+    }
+    if (showSearchDebugInfo && fromSearch) {
+      console.log('Name: ', file.name);
+      console.log('Uuid:', file.uuid);
+      console.log('Relevance Score:', file.relevance);
+      console.log('Debug Search:', file.debug_search);
+      console.log('________________________');
+    }
+    if ((_file$info = file.info) !== null && _file$info !== void 0 && _file$info.video_gif || (_file$info2 = file.info) !== null && _file$info2 !== void 0 && _file$info2.video_thumbnail) {
+      setShowVideoGif(true);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    var _file$info3, _file$info4;
+    if (isLoading) {
+      return;
+    }
+    clearFetchPermissionsTimer();
+    if ((_file$info3 = file.info) !== null && _file$info3 !== void 0 && _file$info3.video_gif || (_file$info4 = file.info) !== null && _file$info4 !== void 0 && _file$info4.video_thumbnail) {
+      setShowVideoGif(false);
+    }
+  };
+  var getSearchDebugInfo = function getSearchDebugInfo() {
+    var _file$debug_search;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Styled.RelevanceScore, {
+        children: "Score: ".concat(file.relevance)
+      }), /*#__PURE__*/_jsx("table", {
+        children: Object.keys((file === null || file === void 0 ? void 0 : (_file$debug_search = file.debug_search) === null || _file$debug_search === void 0 ? void 0 : _file$debug_search.details) || {}).map(function (item, key) {
+          var _file$debug_search2, _file$debug_search2$d;
+          return /*#__PURE__*/_jsxs("tr", {
+            children: [/*#__PURE__*/_jsxs("td", {
+              children: [item, ":"]
+            }), /*#__PURE__*/_jsx("td", {
+              children: file === null || file === void 0 ? void 0 : (_file$debug_search2 = file.debug_search) === null || _file$debug_search2 === void 0 ? void 0 : (_file$debug_search2$d = _file$debug_search2.details) === null || _file$debug_search2$d === void 0 ? void 0 : _file$debug_search2$d[item]
+            })]
+          }, key);
+        })
+      })]
+    });
+  };
+  var renderFileCell = function renderFileCell() {
+    var _file$info5, _file$info6;
+    return /*#__PURE__*/_jsxs(Styled.FileSectionItem, {
+      isMutedFile: mutedFilesUuids.includes(uuid),
+      className: "".concat(props.isDragging ? ' filerobot-Dragging-files' : ''),
+      onKeyDown: isLoading ? undefined : handleNavigatingThroughArrows,
+      onKeyUp: function onKeyUp() {
+        return fetchPermissions({
+          filesUuids: [uuid]
+        });
+      },
+      "data-filerobot-focusable-uuid": uuid,
+      tabIndex: "-1",
+      onClick: handleSelect,
+      onMouseEnter: function onMouseEnter() {
+        return fetchPermissions({
+          filesUuids: [uuid]
+        });
+      },
+      onMouseOver: handleMouseOver,
+      onMouseLeave: handleMouseLeave,
+      onContextMenu: ignoreEvent,
+      selected: isFileChecked && !useAssetsPicker,
+      $loading: isLoading,
+      thumbnailMetadataKeysLength: thumbnailMetadataKeys.length,
+      isOverlayWithButton: isFileChecked && useAssetsPicker,
+      children: [typeof isChecked !== 'undefined' && !(useAssetsPicker && disableMultipleSelect) && /*#__PURE__*/_jsx(Styled.FileSectionItemCheckbox, {
+        // TODO: fix
+        // we use onClick instead of onChange as onChange causes multiple rerenders
+        // we add onChange as empty function to avoid type warning
+        onClick: function onClick(e) {
+          e.isMultiple = true;
+        },
+        onChange: checkboxOnChange,
+        checked: isFileChecked,
+        onContextMenu: handleOnContextMenu,
+        size: "md",
+        selected: isFileChecked
+      }), isRelevanceAvailable && isSearchMode && relevanceBadge({
+        relevance: file.relevance,
+        isListView: false,
+        isFileChecked: isFileChecked
+      }), isSimilarSearchActive && similarSearchOriginalFile.uuid === uuid && /*#__PURE__*/_jsx(OriginalBadge, {
+        isHidden: isFileChecked,
+        showOnTop: true
+      }), /*#__PURE__*/_jsxs(Styled.FileSectionItemWrapper, {
+        type: "button",
+        className: "filerobot-u-reset".concat(showMeta ? ' with-meta' : ''),
+        onDoubleClick: toggleFileWindow,
+        onContextMenu: handleOnContextMenu,
+        role: "option",
+        "aria-label": isFileChecked ? i18n('mutualizedUnselectFileNamedLabel', {
+          name: fileName
+        }) : i18n('mutualizedSelectFileNamedLabel', {
+          name: props.title
+        }),
+        "aria-selected": isFileChecked,
+        "aria-disabled": isFileChecked,
+        children: [showMeta && /*#__PURE__*/_jsx(FileInfo, {
+          file: file,
+          containerWidth: props.containerWidth,
+          showMeta: showMeta,
+          handleContextMenuToggle: handleOnContextMenu,
+          noTruncate: true,
+          showThumbnailMetadata: true
+        }), /*#__PURE__*/_jsxs(AssetPreview, {
+          file: file,
+          getItemIcon: function getItemIcon() {
+            return _getItemIcon({
+              fileOrFolder: file,
+              viewLayout: viewLayout,
+              forceIcon: false,
+              showVideoGif: showVideoGif
+            });
+          },
+          filePreviewToggle: toggleFileWindow,
+          viewLayout: viewLayout,
+          isDevEnv: isDevEnv,
+          container: container,
+          children: [!!((_file$info5 = file.info) !== null && _file$info5 !== void 0 && _file$info5.video_duration) && /*#__PURE__*/_jsx(Styled.FileVideoDurationWrapper, {
+            children: formatSeconds((_file$info6 = file.info) === null || _file$info6 === void 0 ? void 0 : _file$info6.video_duration)
+          }), isVideo(file) && /*#__PURE__*/_jsx(Styled.FileVideoOptions, {
+            children: /*#__PURE__*/_jsx(ItemHoverTopOptions, {
+              options: options
+            })
+          }), !hideOverlayOptions && /*#__PURE__*/_jsx(FileOverlayOptions, {
+            file: file,
+            onContextMenu: handleOnContextMenu,
+            toggleFileWindow: toggleFileWindow
+          })]
+        })]
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsx(DnD, {
+    disableDrag: isItemBeingRenamed || isLoading,
+    item: file,
+    disableDrop: true,
+    children: showSearchDebugInfo && fromSearch ? /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(TooltipV2, {
+        arrow: true,
+        position: "right",
+        size: "md",
+        title: getSearchDebugInfo(),
+        children: renderFileCell()
+      })
+    }) : renderFileCell()
+  });
+};
+export default FileCell;