@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/AssetsList/ListView/AssetsSection/AssetsSectionTableRow.js

@@ -0,0 +1,333 @@
+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 { useCallback, useRef, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import LabelIcon from '@scaleflex/icons/label';
+import { More } from '@scaleflex/icons';
+import { TooltipV2, IconButton, EllipsedText } from '@scaleflex/ui/core';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { PC } from '@scaleflex/widget-common';
+import { LIST_VIEW_COLS_IDS, LAYOUTS_IDS, NEGLECTED_MIME_TYPES, PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import _getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import humanReadableDateWithTranslations from '@scaleflex/widget-utils/lib/humanReadableDateWithTranslations';
+import getFileExtension from '@scaleflex/widget-utils/lib/getFileExtension';
+import getFileType from '@scaleflex/widget-utils/lib/getFileType';
+import { getVisibilityObject } from '@scaleflex/widget-utils/lib/visibility';
+import formatSeconds from '@scaleflex/widget-utils/lib/formatSeconds';
+import AssetPreview from '@scaleflex/widget-common/lib/AssetPreview';
+import isTransparencySupported from '@scaleflex/widget-utils/lib/isTransparencySupported';
+import { selectIsRelevanceAvailable } from '@scaleflex/widget-core/lib/slices/common.slice';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import FileInfo from '../../../FileItem/FileInfo';
+import DnD from '../../../DnD';
+import { useExplorer, useFileMetadata, useIsOverflow } from '../../../../hooks';
+import relevanceBadge from '../../relevanceBadge';
+import { selectIsItemChecked, toggleSelection } from '../../../../slices/selections.slice';
+import { fileWindowUpdated, selectIsUploadsPanelOpened, selectRenameItemFor } from '../../../../slices/panels.slice';
+import { selectActiveRegionalLang } from '../../../../slices/metadata.slice';
+import { selectIsSimilarSearchActive, selectSearchQuery, selectSimilarSearchOriginalFile } from '../../../../slices/search.slice';
+import StyledAssetsList from '../../AssetsList.styled';
+import Styled from '../ListView.styled';
+import { selectFileLabels } from '../../../../slices/common.slice';
+import { selectIsAssetsView, selectViewLayout } from '../../../../slices/views.slice';
+import { selectCurrentFileByUuid } from '../../../../slices/files.slice';
+import FileMetadataFieldValue from '../../../common/FileMetadataFieldValue';
+import { getLabelText } from '../../../FileItem/FileInfo/FileInfo.utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var checkboxOnChange = function checkboxOnChange() {};
+var COL_EMPTY_PLACEHOLDER = '';
+var AssetsSectionTableRow = function AssetsSectionTableRow(_ref) {
+  var _file$tags, _file$info, _file$info2, _thumbnailMetadataKey;
+  var fileUuid = _ref.fileUuid,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    visibleColumns = _ref.visibleColumns,
+    containerWidth = _ref.containerWidth;
+  var dispatch = useDispatch();
+  var theme = useTheme();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    isDevEnv = _useExplorer.isDevEnv,
+    container = _useExplorer.container,
+    checkUserPermissions = _useExplorer.checkUserPermissions,
+    opts = _useExplorer.opts;
+  var isFileChecked = useSelector(function (state) {
+    return selectIsItemChecked(state, fileUuid);
+  });
+  var renameItemFor = useSelector(selectRenameItemFor);
+  var isRelevanceAvailable = useSelector(selectIsRelevanceAvailable);
+  var showUploadsPanel = useSelector(selectIsUploadsPanelOpened);
+  var activeRegVarLanguage = useSelector(selectActiveRegionalLang);
+  var searchQuery = useSelector(selectSearchQuery);
+  var viewLayout = useSelector(selectViewLayout);
+  var isAssetsView = useSelector(selectIsAssetsView);
+  var file = useSelector(function (state) {
+    return selectCurrentFileByUuid(state, fileUuid);
+  });
+  var fileLabels = useSelector(function (state) {
+    return selectFileLabels(state, file.labels);
+  });
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var similarSearchOriginalFile = useSelector(selectSimilarSearchOriginalFile);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showVideoGif = _useState2[0],
+    setShowVideoGif = _useState2[1];
+  var tagsRef = useRef();
+  var labelsRef = useRef();
+  var isTagsOverflow = useIsOverflow(tagsRef);
+  var isLabelsOverflow = useIsOverflow(labelsRef);
+  var _useFileMetadata = useFileMetadata({
+      file: file
+    }),
+    findFileMetadataField = _useFileMetadata.findFileMetadataField;
+  var showMeta = opts.showMeta,
+    thumbnailMetadataKeys = opts.thumbnailMetadataKeys,
+    isFastToken = opts.isFastToken,
+    mutedFilesUuids = opts.mutedFilesUuids,
+    useAssetsPicker = opts.useAssetsPicker;
+  var isLoading = file.loading;
+  var isSearchMode = isAssetsView && searchQuery;
+  var iconPrimaryColor = theme.palette[PC.IconsPrimary];
+  var currentLanguage = activeRegVarLanguage || 'en';
+  var isNegelectedMimeType = NEGLECTED_MIME_TYPES.includes(getFileType(file));
+  var extension = getFileExtension(file, i18n('mutualizedUnknownText'), isNegelectedMimeType);
+  var visibility = getVisibilityObject(file === null || file === void 0 ? void 0 : file.visibility);
+  var visibilityName = i18n(visibility === null || visibility === void 0 ? void 0 : visibility.i18nLabel);
+  var tags = (file === null || file === void 0 ? void 0 : (_file$tags = file.tags) === null || _file$tags === void 0 ? void 0 : _file$tags[currentLanguage]) || [];
+  var showedTags = tags === null || tags === void 0 ? void 0 : tags.slice(0, 3);
+  var hasTags = tags.length > 0;
+  var showedLabels = fileLabels === null || fileLabels === void 0 ? void 0 : fileLabels.slice(0, 3);
+  var hasLabels = fileLabels.length > 0;
+  var lastModify = file.modified_at || file.updated_at || file.modifiedDate;
+  var lastModifyTime = lastModify ? humanReadableDateWithTranslations(lastModify, i18n) : COL_EMPTY_PLACEHOLDER;
+  var isItemBeingRenamed = renameItemFor === file.uuid;
+  var isImageTransparencySupported = isTransparencySupported(file);
+  var handleSelect = function handleSelect(event) {
+    if (isLoading) {
+      return;
+    }
+    event.stopPropagation();
+    dispatch(toggleSelection({
+      event: event,
+      itemUuid: file.uuid,
+      isMultiple: event.isMultiple
+    }));
+  };
+  var filePreviewToggle = useCallback(function () {
+    if (isItemBeingRenamed || isLoading || !checkUserPermissions([PERMISSIONS.DISPLAY])) return;
+    dispatch(fileWindowUpdated(file.uuid));
+  }, [file, isItemBeingRenamed, isLoading, checkUserPermissions]);
+  var getLabel = function getLabel(label) {
+    var showEllipsis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!label) return;
+    return /*#__PURE__*/_jsx(Styled.ClickableText, {
+      color: "link-basic-primary",
+      size: "md",
+      $maxWidth: showEllipsis ? '200px' : 'auto',
+      startIcon: /*#__PURE__*/_jsx(LabelIcon, {
+        color: (label === null || label === void 0 ? void 0 : label.color) || iconPrimaryColor,
+        size: 14
+      }),
+      children: showEllipsis ? /*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: 1,
+        children: getLabelText(label, currentLanguage)
+      }) : getLabelText(label, currentLanguage)
+    }, label === null || label === void 0 ? void 0 : label.sid);
+  };
+  var getTags = function getTags(uniqueTags, tag) {
+    return _objectSpread(_objectSpread({}, uniqueTags), {}, _defineProperty({}, tag.sid || tag.label, /*#__PURE__*/_jsx(Styled.Tag, {
+      size: "md",
+      children: tag.label
+    }, tag.sid || tag.label)));
+  };
+
+  // We are using .reduce to generate tags, as sometimes the tags sids & labels are the same from BE.
+  var getFormattedTags = function getFormattedTags(displayedTags) {
+    return Object.values(displayedTags.reduce(getTags, {}));
+  };
+  var openContextMenu = function openContextMenu(event) {
+    handleContextMenuToggle(event, file);
+  };
+  return /*#__PURE__*/_jsx(DnD, {
+    disableDrag: isItemBeingRenamed || isLoading,
+    disableDrop: true,
+    item: file,
+    children: /*#__PURE__*/_jsxs(Styled.TableRow, {
+      hover: true,
+      isMutedFile: mutedFilesUuids.includes(fileUuid),
+      selected: isFileChecked,
+      onClick: handleSelect,
+      onDoubleClick: filePreviewToggle,
+      onContextMenu: function onContextMenu(event) {
+        return isLoading ? ignoreEvent(event) : openContextMenu(event);
+      },
+      onKeyDown: isLoading ? undefined : handleNavigatingThroughArrows,
+      "data-filerobot-focusable-uuid": file.uuid,
+      tabIndex: "-1",
+      onMouseOver: function onMouseOver() {
+        return !isLoading && setShowVideoGif(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return !isLoading && setShowVideoGif(false);
+      },
+      $loading: isLoading,
+      children: [/*#__PURE__*/_jsx(Styled.HeaderTableCell, {
+        selected: isFileChecked,
+        children: /*#__PURE__*/_jsxs(Styled.HeaderCheckboxWrapper, {
+          children: [/*#__PURE__*/_jsx(Styled.CheckBox, {
+            // TODO: fix
+            // we use onClick instead of onChange as onChange causes multiple rerenders
+            // we add onChnage as emty function to avoid type warning
+            onClick: function onClick(e) {
+              e.isMultiple = true;
+            },
+            onChange: checkboxOnChange,
+            checked: isFileChecked,
+            onContextMenu: isLoading ? undefined : openContextMenu,
+            size: "md"
+          }), /*#__PURE__*/_jsxs(Styled.AssetPreviewWrapper, {
+            children: [((_file$info = file.info) === null || _file$info === void 0 ? void 0 : _file$info.video_duration) && /*#__PURE__*/_jsx(StyledAssetsList.FileListVideoDurationWrapper, {
+              children: formatSeconds((_file$info2 = file.info) === null || _file$info2 === void 0 ? void 0 : _file$info2.video_duration)
+            }), /*#__PURE__*/_jsx(AssetPreview, {
+              file: file,
+              getItemIcon: function getItemIcon() {
+                return _getItemIcon({
+                  fileOrFolder: file,
+                  viewLayout: LAYOUTS_IDS.LIST,
+                  showVideoGif: showVideoGif,
+                  isImageTransparencySupported: isImageTransparencySupported
+                });
+              },
+              filePreviewToggle: filePreviewToggle,
+              viewLayout: viewLayout,
+              isDevEnv: isDevEnv,
+              container: container,
+              containerHeight: "100%",
+              defaultIconWidth: 130,
+              defaultIconHeight: 130,
+              defaultIconMargin: 10,
+              isSmallSizePreview: true
+            })]
+          }), /*#__PURE__*/_jsx(FileInfo, {
+            file: file,
+            containerWidth: containerWidth,
+            showMeta: showMeta,
+            handleContextMenuToggle: isLoading ? ignoreEvent : openContextMenu,
+            noTruncate: true,
+            isListView: true,
+            showSimilarSearchOriginalBadge: isSimilarSearchActive && similarSearchOriginalFile.uuid === (file === null || file === void 0 ? void 0 : file.uuid)
+          }), isRelevanceAvailable && isSearchMode && relevanceBadge({
+            relevance: file.relevance,
+            isListView: true
+          })]
+        })
+      }), (visibleColumns === null || visibleColumns === void 0 ? void 0 : visibleColumns.includes(LIST_VIEW_COLS_IDS.TYPE)) && /*#__PURE__*/_jsx(Styled.TableCell, {
+        $width: 100,
+        children: /*#__PURE__*/_jsx(Styled.FileExtension, {
+          children: /*#__PURE__*/_jsx(Styled.Label, {
+            defaultCursor: Boolean(showUploadsPanel),
+            className: "filerobot-Explorer-Item-statusSize-text",
+            title: extension,
+            $ellipsis: true,
+            children: extension
+          })
+        })
+      }), (visibleColumns === null || visibleColumns === void 0 ? void 0 : visibleColumns.includes(LIST_VIEW_COLS_IDS.VISIBILITY)) && /*#__PURE__*/_jsx(Styled.TableCell, {
+        $width: 95,
+        children: (visibility === null || visibility === void 0 ? void 0 : visibility.icon) && /*#__PURE__*/_jsx(TooltipV2, {
+          arrow: true,
+          position: "top",
+          size: "md",
+          title: visibilityName,
+          children: /*#__PURE__*/_jsx(visibility.icon, {
+            size: 16,
+            color: iconPrimaryColor
+          })
+        })
+      }), (visibleColumns === null || visibleColumns === void 0 ? void 0 : visibleColumns.includes(LIST_VIEW_COLS_IDS.TAGS)) && /*#__PURE__*/_jsx(Styled.TableCell, {
+        $width: 200,
+        children: hasTags ? /*#__PURE__*/_jsx(Styled.FadedWrapper, {
+          ref: tagsRef,
+          fade: isTagsOverflow,
+          children: isTagsOverflow ? /*#__PURE__*/_jsx(Styled.TagsTooltip, {
+            arrow: true,
+            position: "top",
+            size: "md",
+            title: /*#__PURE__*/_jsx(Styled.ListItemTooltipTitleContainer, {
+              children: getFormattedTags(tags)
+            }),
+            children: /*#__PURE__*/_jsx(Styled.TagsContainer, {
+              children: getFormattedTags(showedTags)
+            })
+          }) : /*#__PURE__*/_jsx(Styled.TagsContainer, {
+            children: getFormattedTags(showedTags)
+          })
+        }) : COL_EMPTY_PLACEHOLDER
+      }), !isFastToken && (visibleColumns === null || visibleColumns === void 0 ? void 0 : visibleColumns.includes(LIST_VIEW_COLS_IDS.LABELS)) && /*#__PURE__*/_jsx(Styled.TableCell, {
+        $width: 200,
+        children: hasLabels ? /*#__PURE__*/_jsx(Styled.FadedWrapper, {
+          ref: labelsRef,
+          fade: isLabelsOverflow,
+          children: isLabelsOverflow ? /*#__PURE__*/_jsx(Styled.LabelsTooltip, {
+            arrow: true,
+            position: "top",
+            size: "md",
+            title: /*#__PURE__*/_jsx(Styled.ListItemTooltipTitleContainer, {
+              children: fileLabels.map(function (label) {
+                return getLabel(label, true);
+              })
+            }),
+            children: /*#__PURE__*/_jsx("div", {
+              children: showedLabels.map(function (label) {
+                return getLabel(label, false);
+              })
+            })
+          }) : showedLabels.map(function (label) {
+            return getLabel(label, false);
+          })
+        }) : COL_EMPTY_PLACEHOLDER
+      }), (visibleColumns === null || visibleColumns === void 0 ? void 0 : visibleColumns.includes(LIST_VIEW_COLS_IDS.LAST_MODIFY)) && /*#__PURE__*/_jsx(Styled.TableCell, {
+        $width: 130,
+        children: /*#__PURE__*/_jsx(Styled.ModifyAtLabel, {
+          title: lastModifyTime,
+          children: lastModifyTime
+        })
+      }), (_thumbnailMetadataKey = thumbnailMetadataKeys.map) === null || _thumbnailMetadataKey === void 0 ? void 0 : _thumbnailMetadataKey.call(thumbnailMetadataKeys, function (metadataKey) {
+        var _ref2 = findFileMetadataField(metadataKey) || {},
+          field = _ref2.field,
+          type = _ref2.type;
+        return field && /*#__PURE__*/_jsx(Styled.ThumbnailMetaDataTableCell, {
+          children: /*#__PURE__*/_jsx(FileMetadataFieldValue, {
+            file: file,
+            field: field || {},
+            fieldType: type
+          })
+        }, metadataKey);
+      }), !useAssetsPicker && /*#__PURE__*/_jsx(Styled.TableCell, {
+        $width: 65,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: function onClick(event) {
+            return !isLoading && openContextMenu(event);
+          },
+          size: "sm",
+          color: "basic",
+          children: function children(props) {
+            return /*#__PURE__*/_jsx(More, _objectSpread({}, props));
+          }
+        })
+      })]
+    })
+  });
+};
+export default AssetsSectionTableRow;

package/lib/components/AssetsList/ListView/AssetsSection/index.js

@@ -0,0 +1,99 @@
+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); }
+import { Fragment, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { Table, TableBody, TableRow, TableCell, EllipsedText } from '@scaleflex/ui/core';
+import { VirtualList } from '@scaleflex/widget-common';
+import { LIST_VIEW_COLS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { VirtualListDataContext } from '@scaleflex/widget-core/lib/Providers';
+import { useExplorer } from '../../../../hooks';
+import AssetsSectionTableRow from './AssetsSectionTableRow';
+import AssetsSectionTableHeader from './AssetsSectionTableHeader';
+import { selectMetaMappedLicenseExpireDateField, selectMetadataFields } from '../../../../slices/metadata.slice';
+import Styled from '../ListView.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var renderTableRowSpacer = function renderTableRowSpacer(props) {
+  return /*#__PURE__*/_jsx("tr", _objectSpread({}, props));
+};
+var AssetsSection = function AssetsSection(_ref) {
+  var _thumbnailMetadataKey;
+  var filesUuids = _ref.filesUuids,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    hideHeader = _ref.hideHeader,
+    tableHeadStickTop = _ref.tableHeadStickTop,
+    openCurrentFolderContextMenu = _ref.openCurrentFolderContextMenu,
+    sortProps = _ref.sortProps,
+    _ref$visibleColumns = _ref.visibleColumns,
+    visibleColumns = _ref$visibleColumns === void 0 ? [] : _ref$visibleColumns,
+    _ref$setVisibleColumn = _ref.setVisibleColumns,
+    setVisibleColumns = _ref$setVisibleColumn === void 0 ? function () {} : _ref$setVisibleColumn,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    containerWidth = _ref.containerWidth;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    opts = _useExplorer.opts;
+  var thumbnailMetadataKeys = opts.thumbnailMetadataKeys,
+    useAssetsPicker = opts.useAssetsPicker;
+  var _useContext = useContext(VirtualListDataContext),
+    apiRef = _useContext.apiRef,
+    parentRef = _useContext.parentRef;
+  var metadataFields = useSelector(function (state) {
+    return selectMetadataFields(state, false);
+  });
+  var expireDateMappedField = useSelector(selectMetaMappedLicenseExpireDateField);
+  var findThumbnailMetadataFieldTitle = function findThumbnailMetadataFieldTitle(metadataKey) {
+    var _metadataFields$find;
+    return (_metadataFields$find = metadataFields.find(function (field) {
+      return field.key === metadataKey;
+    })) === null || _metadataFields$find === void 0 ? void 0 : _metadataFields$find.title;
+  };
+  var renderMetadataFieldTableCell = function renderMetadataFieldTableCell(metadataKey, title) {
+    return /*#__PURE__*/_jsx(TableCell, {
+      children: /*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: 1,
+        children: title
+      })
+    }, metadataKey);
+  };
+  return /*#__PURE__*/_jsxs(Table, {
+    onContextMenu: openCurrentFolderContextMenu,
+    ref: parentRef,
+    children: [!hideHeader && /*#__PURE__*/_jsx(Styled.TableHead, {
+      $tableHeadStickTop: tableHeadStickTop,
+      children: /*#__PURE__*/_jsxs(TableRow, {
+        children: [visibleColumns.map(function (columnId, index) {
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: /*#__PURE__*/_jsx(AssetsSectionTableHeader, {
+              sortProps: sortProps,
+              visibleColumns: visibleColumns,
+              setVisibleColumns: setVisibleColumns,
+              columnId: columnId,
+              filesUuids: filesUuids
+            })
+          }, columnId);
+        }), !visibleColumns.includes(LIST_VIEW_COLS_IDS.LAST_MODIFY) && /*#__PURE__*/_jsx(TableCell, {}), (_thumbnailMetadataKey = thumbnailMetadataKeys.map) === null || _thumbnailMetadataKey === void 0 ? void 0 : _thumbnailMetadataKey.call(thumbnailMetadataKeys, function (metadataKey) {
+          return (expireDateMappedField === null || expireDateMappedField === void 0 ? void 0 : expireDateMappedField.key) === metadataKey ? renderMetadataFieldTableCell(metadataKey, i18n('explorerGeneralFileDetailsExpiryDateLabel')) : renderMetadataFieldTableCell(metadataKey, findThumbnailMetadataFieldTitle(metadataKey));
+        }), !useAssetsPicker && /*#__PURE__*/_jsx(TableCell, {})]
+      })
+    }), /*#__PURE__*/_jsx(TableBody, {
+      children: /*#__PURE__*/_jsx(VirtualList, {
+        items: filesUuids,
+        injectedItemPropName: "fileUuid",
+        renderSpacer: renderTableRowSpacer,
+        parentRef: parentRef,
+        apiRef: apiRef,
+        children: /*#__PURE__*/_jsx(AssetsSectionTableRow, {
+          handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+          visibleColumns: visibleColumns,
+          handleContextMenuToggle: handleContextMenuToggle,
+          containerWidth: containerWidth
+        })
+      })
+    })]
+  });
+};
+export default AssetsSection;

package/lib/components/AssetsList/ListView/ColumnsMenu.js

@@ -0,0 +1,89 @@
+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 { More } from '@scaleflex/icons';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import Styled from './ListView.styled';
+import { CheckBox, Menu, MenuItem, MenuItemIcon, MenuItemLabel } from '@scaleflex/ui/core';
+import { useExplorerI18n } from '../../../hooks';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var ListViewColumnsMenu = function ListViewColumnsMenu(_ref) {
+  var visibleColumns = _ref.visibleColumns,
+    setVisibleColumns = _ref.setVisibleColumns,
+    allColumns = _ref.allColumns;
+  var i18n = useExplorerI18n();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var toggleMenu = function toggleMenu(e) {
+    setAnchorEl(anchorEl ? null : e.currentTarget);
+  };
+  var toggleColumnVisibility = function toggleColumnVisibility(_ref2) {
+    var order = _ref2.order,
+      id = _ref2.id;
+    var newVisibleColumns;
+    if (visibleColumns.includes(id)) {
+      newVisibleColumns = visibleColumns.filter(function (item) {
+        return item !== id;
+      });
+    } else {
+      newVisibleColumns = visibleColumns.toSpliced(parseInt(order), 0, id);
+    }
+    setVisibleColumns(newVisibleColumns);
+  };
+  if (!allColumns) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Styled.HeaderIconButton, {
+      size: "xs",
+      color: "basic",
+      onClick: toggleMenu,
+      onContextMenu: ignoreEvent,
+      children: function children(iconProps) {
+        return /*#__PURE__*/_jsx(More, _objectSpread(_objectSpread({}, iconProps), {}, {
+          size: 12
+        }));
+      }
+    }), /*#__PURE__*/_jsx(Menu, {
+      enableOverlay: true,
+      anchorEl: anchorEl,
+      open: Boolean(anchorEl),
+      onClose: toggleMenu,
+      children: allColumns.map(function (_ref3) {
+        var labelI18n = _ref3.labelI18n,
+          id = _ref3.id,
+          order = _ref3.order;
+        return /*#__PURE__*/_jsxs(MenuItem, {
+          onClick: function onClick() {
+            return toggleColumnVisibility({
+              order: order,
+              id: id
+            });
+          },
+          children: [/*#__PURE__*/_jsx(MenuItemIcon, {
+            size: "md",
+            children: /*#__PURE__*/_jsx(CheckBox, {
+              checked: visibleColumns.includes(id),
+              onChange: function onChange() {}
+            })
+          }), /*#__PURE__*/_jsx(MenuItemLabel, {
+            children: i18n(labelI18n)
+          })]
+        }, id);
+      })
+    })]
+  });
+};
+export default ListViewColumnsMenu;

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

@@ -0,0 +1,74 @@
+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 AssetsSection from './AssetsSection';
+import Styled from '../AssetsList.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FilesAccordion = function FilesAccordion(_ref) {
+  var hideAccordionHeader = _ref.hideAccordionHeader,
+    label = _ref.label,
+    loading = _ref.loading,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    tableHeadStickTop = _ref.tableHeadStickTop,
+    sortProps = _ref.sortProps,
+    filesUuids = _ref.filesUuids,
+    fetchNextFiles = _ref.fetchNextFiles,
+    noMoreFiles = _ref.noMoreFiles,
+    onScroll = _ref.onScroll,
+    containerWidth = _ref.containerWidth,
+    visibleColumns = _ref.visibleColumns,
+    setVisibleColumns = _ref.setVisibleColumns,
+    openCurrentFolderContextMenu = _ref.openCurrentFolderContextMenu,
+    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() {
+    setShowFiles(!showFiles);
+  };
+  return /*#__PURE__*/_jsx(Styled.Accordion, {
+    expanded: showFiles,
+    hideHeader: hideAccordionHeader,
+    label: label,
+    onClick: loading ? undefined : handleToggleFiles,
+    onContextMenu: function onContextMenu(e) {
+      return e.stopPropagation();
+    },
+    hideIcon: loading,
+    detailStyle: {
+      paddingLeft: 24,
+      paddingRight: 24
+    },
+    isListView: true,
+    children: /*#__PURE__*/_jsx(InfiniteScroll, {
+      dataLength: filesUuids.length,
+      next: enableFetchNextFiles ? fetchNextFiles : undefined,
+      hasMore: !noMoreFiles,
+      scrollableTarget: scrollableElem,
+      onScroll: onScroll,
+      hideOverflow: true,
+      children: /*#__PURE__*/_jsx(AssetsSection, {
+        filesUuids: filesUuids,
+        handleContextMenuToggle: handleContextMenuToggle,
+        handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+        containerWidth: containerWidth,
+        visibleColumns: visibleColumns,
+        setVisibleColumns: setVisibleColumns,
+        tableHeadStickTop: tableHeadStickTop,
+        openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+        sortProps: sortProps
+      })
+    })
+  });
+};
+export default FilesAccordion;