@scaleflex/widget-explorer 0.0.1

package/lib/components/AssetsList/GridView/FoldersSection/index.js

@@ -0,0 +1,23 @@
+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); }
+var _excluded = ["foldersUuids"];
+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 _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 { memo } from 'react';
+import { VirtualGrid } from '@scaleflex/widget-common';
+import FolderCell from './FolderCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FoldersSection = function FoldersSection(_ref) {
+  var foldersUuids = _ref.foldersUuids,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(VirtualGrid, {
+    items: foldersUuids,
+    injectedItemPropName: "folderUuid",
+    children: /*#__PURE__*/_jsx(FolderCell, _objectSpread({}, others))
+  });
+};
+export default /*#__PURE__*/memo(FoldersSection);

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

@@ -0,0 +1,77 @@
+import { Skeleton } from '@scaleflex/ui/core';
+import Styled from '../AssetsList.styled';
+import StyledGridView from './GridView.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var GridLayoutFoldersSkeleton = function GridLayoutFoldersSkeleton(_ref) {
+  var hidePreviewSkeleton = _ref.hidePreviewSkeleton;
+  return /*#__PURE__*/_jsx(Styled.Accordion, {
+    expanded: true,
+    label: /*#__PURE__*/_jsx(Skeleton, {
+      width: 200
+    }),
+    style: {
+      marginTop: '12px'
+    },
+    detailStyle: {
+      margin: '0px'
+    },
+    hideIcon: true,
+    onContextMenu: function onContextMenu(e) {
+      return e.stopPropagation();
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: "filerobot-Provider-ItemCategory-wrapper",
+      children: /*#__PURE__*/_jsx(StyledGridView.SkeletonContainer, {
+        children: Array(18).fill().map(function (_, index) {
+          return /*#__PURE__*/_jsxs(Styled.FolderSectionItem, {
+            className: "item-folder",
+            children: [/*#__PURE__*/_jsx(Styled.FolderIcon, {}), /*#__PURE__*/_jsxs(Styled.FolderContent, {
+              role: "button",
+              $loading: true,
+              children: [!hidePreviewSkeleton && /*#__PURE__*/_jsxs(Styled.FolderPreviewGrid, {
+                children: [/*#__PURE__*/_jsx(Styled.PreviewGridLeftColumn, {
+                  children: /*#__PURE__*/_jsx(Skeleton, {
+                    height: "100%",
+                    width: "100%"
+                  })
+                }), /*#__PURE__*/_jsxs(Styled.PreviewGridRightColumn, {
+                  children: [/*#__PURE__*/_jsx(Styled.PreviewGridImgWrapper, {
+                    children: /*#__PURE__*/_jsx(Skeleton, {
+                      height: "100%",
+                      width: "100%"
+                    })
+                  }), /*#__PURE__*/_jsx(Styled.PreviewGridImgWrapper, {
+                    children: /*#__PURE__*/_jsx(Skeleton, {
+                      height: "100%",
+                      width: "100%"
+                    })
+                  })]
+                })]
+              }), /*#__PURE__*/_jsxs(Styled.FolderInfo, {
+                children: [/*#__PURE__*/_jsx(Styled.FolderTitle, {
+                  children: /*#__PURE__*/_jsx(Skeleton, {
+                    width: 150
+                  })
+                }), /*#__PURE__*/_jsxs(Styled.FolderSubTitle, {
+                  size: "sm",
+                  children: [/*#__PURE__*/_jsx(Styled.FolderSubTitleText, {
+                    size: "sm",
+                    children: /*#__PURE__*/_jsx(Skeleton, {
+                      width: 66
+                    })
+                  }), /*#__PURE__*/_jsx(Styled.FolderSubTitleText, {
+                    size: "sm",
+                    children: /*#__PURE__*/_jsx(Skeleton, {
+                      width: 66
+                    })
+                  })]
+                })]
+              })]
+            })]
+          }, index);
+        })
+      })
+    })
+  });
+};
+export default GridLayoutFoldersSkeleton;

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

@@ -0,0 +1,11 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import StyledVirtualGrid from '@scaleflex/widget-common/lib/VirtualGrid/VirtualGrid.styled';
+
+// Same styles as VirtualGrid's container but with overflow: auto
+var SkeletonContainer = styled(StyledVirtualGrid.GridContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: auto;\n"])));
+var Styled = {
+  SkeletonContainer: SkeletonContainer
+};
+export default Styled;

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

@@ -0,0 +1,15 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import { FV } from '@scaleflex/widget-common';
+var RowLabel = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  padding: ", ";\n  position: sticky;\n  top: -12px;\n  background: white;\n  z-index: 101;\n"])), function (_ref) {
+  var typography = _ref.theme.typography;
+  return typography.font[FV.LabelLarge];
+}, function (_ref2) {
+  var padding = _ref2.padding;
+  return padding || '27px 24px 15px !important';
+});
+var Styled = {
+  RowLabel: RowLabel
+};
+export default Styled;

package/lib/components/AssetsList/GridView/SearchGridView/SearchGridViewSkeleton.js

@@ -0,0 +1,30 @@
+import Styled from '../../AssetsList.styled';
+import StyledGridView from '../GridView.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SearchGridViewSkeleton = function SearchGridViewSkeleton() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 18 : _ref$count;
+  return /*#__PURE__*/_jsx("div", {
+    className: "filerobot-Provider-ItemCategory-wrapper",
+    children: /*#__PURE__*/_jsx(StyledGridView.SkeletonContainer, {
+      children: Array(count).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsx(Styled.FileSectionItem, {
+          children: /*#__PURE__*/_jsxs(Styled.FileSectionItemWrapper, {
+            type: "button",
+            className: "filerobot-u-reset",
+            $loading: true,
+            children: [/*#__PURE__*/_jsx(Styled.FileSkeleton, {
+              bottom: "16%",
+              width: 150
+            }), /*#__PURE__*/_jsx(Styled.FileSkeleton, {
+              bottom: "5%",
+              width: 66
+            })]
+          })
+        }, index);
+      })
+    })
+  });
+};
+export default SearchGridViewSkeleton;

package/lib/components/AssetsList/GridView/SearchGridView/index.js

@@ -0,0 +1,97 @@
+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 { Notification } from '@scaleflex/ui/core';
+import SearchGridViewSkeleton from './SearchGridViewSkeleton';
+import { useSearchView } from '../../SearchView.hook';
+import { useExplorerI18n } from '../../../../hooks';
+import FilesAccordion from '../FilesAccordion';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var SearchGridView = function SearchGridView(_ref) {
+  var openCurrentFolderContextMenu = _ref.openCurrentFolderContextMenu,
+    noTopMargin = _ref.noTopMargin,
+    containerWidth = _ref.containerWidth,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    filesSectionProps = _ref.filesSectionProps,
+    children = _ref.children;
+  var _useSearchView = useSearchView(),
+    searchViewDetails = _useSearchView.searchViewDetails,
+    isNotificationVisible = _useSearchView.isNotificationVisible,
+    setIsNotificationVisible = _useSearchView.setIsNotificationVisible;
+  var i18n = useExplorerI18n();
+  var renderContent = function renderContent() {
+    var _ref2 = searchViewDetails || {},
+      showSkeletonLoader = _ref2.showSkeletonLoader,
+      noResultsContent = _ref2.noResultsContent,
+      itemsDetails = _ref2.itemsDetails;
+    if (showSkeletonLoader) return /*#__PURE__*/_jsx(SearchGridViewSkeleton, {});
+    if (noResultsContent) return children || noResultsContent;
+    if (itemsDetails) {
+      var firstRowLabel = itemsDetails.firstRowLabel,
+        firstRowLoading = itemsDetails.firstRowLoading,
+        _itemsDetails$firstRo = itemsDetails.firstRowFilesUuids,
+        firstRowFilesUuids = _itemsDetails$firstRo === void 0 ? [] : _itemsDetails$firstRo,
+        _itemsDetails$firstRo2 = itemsDetails.firstRowIsNoMoreFiles,
+        firstRowIsNoMoreFiles = _itemsDetails$firstRo2 === void 0 ? true : _itemsDetails$firstRo2,
+        firstRowFetchNextFiles = itemsDetails.firstRowFetchNextFiles,
+        _itemsDetails$showSec = itemsDetails.showSecondRow,
+        showSecondRow = _itemsDetails$showSec === void 0 ? true : _itemsDetails$showSec,
+        secondRowLabel = itemsDetails.secondRowLabel,
+        _itemsDetails$secondR = itemsDetails.secondRowFilesUuids,
+        secondRowFilesUuids = _itemsDetails$secondR === void 0 ? [] : _itemsDetails$secondR,
+        _itemsDetails$secondR2 = itemsDetails.secondRowLoading,
+        secondRowLoading = _itemsDetails$secondR2 === void 0 ? false : _itemsDetails$secondR2,
+        _itemsDetails$secondR3 = itemsDetails.secondRowIsNoMoreFiles,
+        secondRowIsNoMoreFiles = _itemsDetails$secondR3 === void 0 ? true : _itemsDetails$secondR3,
+        secondRowFetchNextFiles = itemsDetails.secondRowFetchNextFiles,
+        infoMessage = itemsDetails.infoMessage;
+      var commonProps = {
+        noTopMargin: noTopMargin,
+        containerWidth: containerWidth,
+        filesSectionProps: filesSectionProps,
+        handleContextMenuToggle: handleContextMenuToggle,
+        handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+        openCurrentFolderContextMenu: openCurrentFolderContextMenu
+      };
+      var renderInfoMessage = function renderInfoMessage() {
+        if (!(infoMessage && isNotificationVisible)) return;
+        return /*#__PURE__*/_jsx("div", {
+          className: "filerobot-Provider-ItemCategory-wrapper",
+          children: /*#__PURE__*/_jsx(Notification, {
+            status: "info",
+            message: infoMessage,
+            onClose: function onClose() {
+              return setIsNotificationVisible(false);
+            }
+          })
+        });
+      };
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderInfoMessage(), children, firstRowFilesUuids.length > 0 && /*#__PURE__*/_jsx(FilesAccordion, _objectSpread({
+          label: firstRowLabel,
+          isLoading: firstRowLoading,
+          filesUuids: firstRowFilesUuids,
+          noMoreFiles: firstRowIsNoMoreFiles,
+          fetchNextFiles: firstRowFetchNextFiles,
+          hideAccordionHeader: !firstRowLabel
+        }, commonProps)), showSecondRow && /*#__PURE__*/_jsx(FilesAccordion, _objectSpread({
+          label: secondRowLabel || i18n('searchExtendedWithCountLabel', {
+            files_count: (secondRowFilesUuids === null || secondRowFilesUuids === void 0 ? void 0 : secondRowFilesUuids.length) || 0
+          }),
+          isLoading: secondRowLoading,
+          filesUuids: secondRowFilesUuids,
+          noMoreFiles: secondRowIsNoMoreFiles,
+          fetchNextFiles: secondRowFetchNextFiles
+        }, commonProps))]
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: renderContent()
+  });
+};
+export default SearchGridView;

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

@@ -0,0 +1,196 @@
+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); }
+var _excluded = ["foldersUuids", "filesUuids", "hasFolders", "hasFiles", "isFoldersLoading", "isFilesLoading", "handleNavigatingThroughArrows", "containerWidth", "handleContextMenuToggle", "noTopMargin", "hideAccordionHeader", "openCurrentFolderContextMenu", "fetchNextFiles", "fetchNextFolders", "scrollableElem"];
+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; }
+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 { useState } from 'react';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { useSelector, useDispatch } from 'react-redux';
+import { NoResult } from '@scaleflex/icons';
+import { Label } from '@scaleflex/ui/core';
+import Styled from '../AssetsList.styled';
+import FoldersSection from './FoldersSection';
+import SearchGridView from './SearchGridView';
+import InfiniteScroll from '../../InfiniteScroll/InfiniteScroll';
+import { useExplorer, useToLocaleNumber } from '../../../hooks';
+import { selectFoldersStats, selectIsFolderFilesRecursiveFetch, selectNoMoreFolders } from '../../../slices/folders.slice';
+import { selectIsSimilarSearchActive, selectIsAiSearch } from '../../../slices/search.slice';
+import { selectIsFoldersView, selectIsSearchMode } from '../../../slices/views.slice';
+import { selectIsNoMoreFiles, selectFilesStats } from '../../../slices/files.slice';
+import { selectIsFiltersActive } from '../../../slices/filters.slice';
+import { scrollToTopButtonToggled, topSectionElevated } from '../../../slices/topSection.slice';
+import GridLayoutFoldersSkeleton from './FoldersSkeleton';
+import GridLayoutFilesSkeleton from './FilesSkeleton';
+import FilesAccordion from './FilesAccordion';
+import Placeholder from '../../Filters/Placeholder';
+
+// TODO: This component needs to be refactored, to split FoldersSection with its skeleton/selectors/functions into a component
+// and another for FilesSection and avoid the usage of isAssetsView, isFoldersView....etc. if possible.  or maybe compose it with ListView as they are almost similar?
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var GridView = function GridView(_ref) {
+  var foldersUuids = _ref.foldersUuids,
+    filesUuids = _ref.filesUuids,
+    hasFolders = _ref.hasFolders,
+    hasFiles = _ref.hasFiles,
+    isFoldersLoading = _ref.isFoldersLoading,
+    isFilesLoading = _ref.isFilesLoading,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    containerWidth = _ref.containerWidth,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    noTopMargin = _ref.noTopMargin,
+    hideAccordionHeader = _ref.hideAccordionHeader,
+    openCurrentFolderContextMenu = _ref.openCurrentFolderContextMenu,
+    fetchNextFiles = _ref.fetchNextFiles,
+    fetchNextFolders = _ref.fetchNextFolders,
+    scrollableElem = _ref.scrollableElem,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  var toLocaleNumber = useToLocaleNumber();
+  var _useSelector = useSelector(selectFoldersStats),
+    foldersStatsLoading = _useSelector.loading,
+    totalFoldersCount = _useSelector.totalFoldersCount,
+    totalFilesCount = _useSelector.totalFilesCount;
+  var _useSelector2 = useSelector(selectFilesStats),
+    filesStatsLoading = _useSelector2.loading,
+    filesCount = _useSelector2.filesCount;
+  var isSearchMode = useSelector(selectIsSearchMode);
+  var isFiltersActive = useSelector(selectIsFiltersActive);
+  var isFoldersView = useSelector(selectIsFoldersView);
+  var noMoreFiles = useSelector(selectIsNoMoreFiles);
+  var noMoreFolders = useSelector(selectNoMoreFolders);
+  var isAiSearch = useSelector(selectIsAiSearch);
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var isFolderFilesFetchedRecursively = useSelector(selectIsFolderFilesRecursiveFetch);
+  var isFiltersOrSearchActive = isFiltersActive || isSearchMode;
+  var _useState = useState(!isFiltersOrSearchActive),
+    _useState2 = _slicedToArray(_useState, 2),
+    showFolders = _useState2[0],
+    setShowFolders = _useState2[1];
+  var foldersLength = (foldersUuids === null || foldersUuids === void 0 ? void 0 : foldersUuids.length) || 0;
+  var filesLength = filesUuids.length;
+  var isFoldersSectionVisible = isFoldersView && !isFolderFilesFetchedRecursively;
+  useUpdateEffect(function () {
+    // Auto Collapse/Fold the folders accordion on applying the first filter.
+    setShowFolders(!isFiltersActive);
+  }, [isFiltersActive]);
+  useUpdateEffect(function () {
+    // Auto Collapse/Fold the folders accordion on applying the first search.
+    setShowFolders(!isSearchMode);
+  }, [isSearchMode]);
+  var handleToggleFolders = function handleToggleFolders() {
+    setShowFolders(!showFolders);
+  };
+  var onScroll = function onScroll(e) {
+    if ((e === null || e === void 0 ? void 0 : e.target.scrollTop) > 0) {
+      dispatch(topSectionElevated(true));
+    }
+    if ((e === null || e === void 0 ? void 0 : e.target.scrollTop) >= 500) {
+      dispatch(scrollToTopButtonToggled(true));
+    }
+    if ((e === null || e === void 0 ? void 0 : e.target.scrollTop) === 0) {
+      dispatch(topSectionElevated(false));
+      dispatch(scrollToTopButtonToggled(false));
+    }
+  };
+  var getFilesCount = function getFilesCount() {
+    var isFilesLoading = (!isFoldersView || typeof foldersStatsLoading === 'undefined') && filesStatsLoading;
+    var isLoadingState = filesStatsLoading && foldersStatsLoading;
+    if (isFilesLoading || isLoadingState) return '...';
+    return toLocaleNumber(filesCount || totalFilesCount || filesLength);
+  };
+  var foldersSection = isFoldersSectionVisible && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isFoldersLoading && /*#__PURE__*/_jsx(GridLayoutFoldersSkeleton, {}), hasFolders && !isFoldersLoading && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Styled.Accordion, {
+        expanded: showFolders,
+        hideHeader: hideAccordionHeader,
+        noTopMargin: noTopMargin,
+        label: i18n(isFiltersOrSearchActive ? 'foldersViewSubFoldersWithCountLabel' : 'foldersViewFoldersWithCountLabel', {
+          folders_count: foldersStatsLoading ? '...' : toLocaleNumber(totalFoldersCount || foldersLength)
+        }),
+        onClick: handleToggleFolders,
+        detailStyle: {
+          margin: '0px'
+        },
+        onContextMenu: function onContextMenu(e) {
+          return e.stopPropagation();
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "filerobot-Provider-ItemCategory-wrapper",
+          onContextMenu: openCurrentFolderContextMenu,
+          id: "foldersScrollableElement",
+          children: showFolders && /*#__PURE__*/_jsx(InfiniteScroll, {
+            dataLength: foldersUuids.length,
+            next: fetchNextFolders,
+            hasMore: !noMoreFolders,
+            scrollableTarget: scrollableElem,
+            targetedScrollElement: "foldersScrollableElement",
+            onScroll: onScroll,
+            children: /*#__PURE__*/_jsx(FoldersSection, _objectSpread({
+              foldersUuids: foldersUuids,
+              handleContextMenuToggle: handleContextMenuToggle,
+              handleNavigatingThroughArrows: handleNavigatingThroughArrows
+            }, props))
+          })
+        })
+      }), isSearchMode && !hasFiles && /*#__PURE__*/_jsx(Placeholder, {
+        "data-placeholder": true,
+        className: "filerobot-Provider-Filters-noResults-placeholder",
+        icon: /*#__PURE__*/_jsx(NoResult, {
+          size: 120
+        }),
+        title: /*#__PURE__*/_jsx(Label, {
+          size: "xl",
+          children: i18n('filtersNoResult')
+        }),
+        desc: i18n('explorerAssetsListEmptyLocalSearchHint')
+      })]
+    })]
+  });
+  if (isSearchMode && !isAiSearch) {
+    return /*#__PURE__*/_jsx(SearchGridView, {
+      openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+      containerWidth: containerWidth,
+      handleContextMenuToggle: handleContextMenuToggle,
+      handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+      noTopMargin: noTopMargin,
+      filesSectionProps: props,
+      children: foldersSection
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [foldersSection, isFilesLoading && /*#__PURE__*/_jsx(GridLayoutFilesSkeleton, {
+      hideAccordionHeader: hideAccordionHeader
+    }), hasFiles && !isFilesLoading && /*#__PURE__*/_jsx(FilesAccordion, {
+      containerWidth: containerWidth,
+      fetchNextFiles: fetchNextFiles,
+      filesUuids: filesUuids,
+      handleContextMenuToggle: handleContextMenuToggle,
+      handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+      hideAccordionHeader: hideAccordionHeader,
+      label: i18n(isFiltersActive ? 'explorerFilesAccordionSearchResults' : 'mutualizedFilesWithCountLabel', {
+        files_count: getFilesCount()
+      }),
+      noMoreFiles: noMoreFiles,
+      noTopMargin: noTopMargin,
+      onScroll: onScroll,
+      openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+      filesSectionProps: props,
+      scrollableElem: scrollableElem,
+      isAiSearch: isAiSearch,
+      isSimilarSearchActive: isSimilarSearchActive
+    })]
+  });
+};
+export default GridView;

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

@@ -0,0 +1,152 @@
+import { useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { LIST_VIEW_COLS_OBJECTS, LIST_VIEW_COLS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { MAIN_SORT_OPTIONS, SORT_ORDER } from '../../../common/Sort/Sort.constants';
+import { useExplorer } from '../../../../hooks';
+import { filesSelected, selectAllFiles, selectIsAllFilesSelected, selectIsAllItemsSelected, selectIsFileSelected } from '../../../../slices/selections.slice';
+import Styled from '../ListView.styled';
+import ListViewColumnsMenu from '../ColumnsMenu';
+import { searchOrListViewFiles } from '../../../../slices/views.slice';
+import { selectFilesSortOrder, selectFilesSortedBy } from '../../../../slices/files.slice';
+import { selectIsSearchFetchType } from '../../../../slices/search.slice';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var checkboxOnChange = function checkboxOnChange() {};
+var getColumns = function getColumns(_ref) {
+  var isFastToken = _ref.isFastToken;
+  return [{
+    labelI18n: LIST_VIEW_COLS_OBJECTS.TYPE.i18nStr,
+    id: LIST_VIEW_COLS_IDS.TYPE,
+    order: 1
+  }, {
+    labelI18n: LIST_VIEW_COLS_OBJECTS.VISIBILITY.i18nStr,
+    id: LIST_VIEW_COLS_IDS.VISIBILITY,
+    order: 2
+  }, {
+    labelI18n: LIST_VIEW_COLS_OBJECTS.TAGS.i18nStr,
+    id: LIST_VIEW_COLS_IDS.TAGS,
+    order: 3
+  }, {
+    labelI18n: LIST_VIEW_COLS_OBJECTS.LABELS.i18nStr,
+    id: LIST_VIEW_COLS_IDS.LABELS,
+    order: 4,
+    hide: function hide(_ref2) {
+      var isFastToken = _ref2.isFastToken;
+      return isFastToken;
+    }
+  }, {
+    labelI18n: LIST_VIEW_COLS_OBJECTS.LAST_MODIFY.i18nStr,
+    id: LIST_VIEW_COLS_IDS.LAST_MODIFY,
+    order: 5
+  }].filter(function (column) {
+    var _column$hide;
+    return !((_column$hide = column.hide) !== null && _column$hide !== void 0 && _column$hide.call(column, {
+      isFastToken: isFastToken
+    }));
+  });
+};
+var AssetsSectionTableHeader = function AssetsSectionTableHeader(_ref3) {
+  var visibleColumns = _ref3.visibleColumns,
+    setVisibleColumns = _ref3.setVisibleColumns,
+    columnId = _ref3.columnId,
+    sortProps = _ref3.sortProps;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    disableMultipleSelect = _useExplorer$opts.disableMultipleSelect,
+    isFastToken = _useExplorer$opts.isFastToken;
+  var isFileSelected = useSelector(selectIsFileSelected);
+  var isAllSelected = useSelector(selectIsAllItemsSelected);
+  var isAllFilesSelected = useSelector(selectIsAllFilesSelected);
+  var internalSortBy = useSelector(selectFilesSortedBy);
+  var internalSortOrder = useSelector(selectFilesSortOrder);
+  var _ref4 = sortProps || {},
+    _ref4$options = _ref4.options,
+    sortOptions = _ref4$options === void 0 ? MAIN_SORT_OPTIONS : _ref4$options,
+    _ref4$sortBy = _ref4.sortBy,
+    sortBy = _ref4$sortBy === void 0 ? internalSortBy : _ref4$sortBy,
+    _ref4$sortOrder = _ref4.sortOrder,
+    sortOrder = _ref4$sortOrder === void 0 ? internalSortOrder : _ref4$sortOrder,
+    onSortChange = _ref4.onChange,
+    sortDisabled = _ref4.disabled,
+    useFilesSort = _ref4.useFilesSort;
+  var isSearchViewSorting = useSelector(selectIsSearchFetchType);
+  var isUseInternalSort = typeof onSortChange !== 'function' || useFilesSort;
+  var isAscOrder = (isUseInternalSort ? internalSortOrder : sortOrder) === SORT_ORDER.ASC;
+  var _LIST_VIEW_COLS_OBJEC = LIST_VIEW_COLS_OBJECTS[columnId],
+    i18nStr = _LIST_VIEW_COLS_OBJEC.i18nStr,
+    sortValue = _LIST_VIEW_COLS_OBJEC.sortValue;
+  var isNotAllowedViewSort = useMemo(function () {
+    return sortDisabled || !sortOptions.find(function () {
+      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        value = _ref5.value;
+      return value === sortValue;
+    });
+  }, [sortOptions, isSearchViewSorting, sortValue, sortDisabled]);
+  var columns = useMemo(function () {
+    return getColumns({
+      isFastToken: isFastToken
+    });
+  }, [isFastToken]);
+  var isFirstColumn = columnId === LIST_VIEW_COLS_IDS.NAME;
+  var isSortActive = (isUseInternalSort ? internalSortBy : sortBy) === sortValue;
+  var isAllAssetsSelected = isAllFilesSelected || isAllSelected;
+  var showIntermediateCheckbox = !isAllAssetsSelected && isFileSelected;
+  var handleChangeSort = function handleChangeSort() {
+    if (sortDisabled) {
+      return;
+    }
+    var nextSortOrder = isAscOrder ? SORT_ORDER.DSC : SORT_ORDER.ASC;
+
+    // if there is sorting's onChange function is provided, then use it instead of internal sorting, otherwise use files internal sorting.
+    if (typeof onSortChange === 'function') {
+      var isSortValueChanged = sortValue !== sortBy;
+      if (isSortValueChanged) nextSortOrder = SORT_ORDER.ASC;
+      onSortChange(sortValue, nextSortOrder);
+      return;
+    }
+    if (sortValue !== internalSortBy) nextSortOrder = SORT_ORDER.ASC;
+    dispatch(searchOrListViewFiles({
+      withStats: false,
+      sorting: [sortValue, nextSortOrder]
+    }));
+  };
+  var toggleSelectAllHandler = function toggleSelectAllHandler(event) {
+    event.stopPropagation();
+    if (isFileSelected) {
+      dispatch(filesSelected([]));
+    } else {
+      dispatch(selectAllFiles());
+    }
+  };
+  return /*#__PURE__*/_jsxs(Styled.InnerHeaderTableCell, {
+    children: [isFirstColumn && !disableMultipleSelect && /*#__PURE__*/_jsxs(_Fragment, {
+      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: toggleSelectAllHandler,
+        onChange: checkboxOnChange,
+        checked: isFileSelected,
+        type: showIntermediateCheckbox ? 'intermediate' : 'checkbox'
+      }), /*#__PURE__*/_jsx(ListViewColumnsMenu, {
+        visibleColumns: visibleColumns,
+        setVisibleColumns: setVisibleColumns,
+        allColumns: columns
+      })]
+    }), !isNotAllowedViewSort ? /*#__PURE__*/_jsxs(Styled.SortLabel, {
+      onClick: handleChangeSort,
+      name: columnId,
+      sortable: !!sortValue,
+      color: "link-secondary",
+      size: "sm",
+      children: [i18n(i18nStr), /*#__PURE__*/_jsx(Styled.SortArrowIcon, {
+        name: "name",
+        $isAscOrder: isAscOrder,
+        $isActive: isSortActive,
+        size: 12
+      })]
+    }) : i18n(i18nStr)]
+  }, columnId);
+};
+export default AssetsSectionTableHeader;