@scaleflex/widget-explorer 4.5.0 → 4.5.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.1](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.5.0...v4.5.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* update active variant handling in VariationsTab ([d631729](https://code.scaleflex.cloud/scaleflex/widget/commits/d631729d5646779218008844a92edadeee686d47))
+
+
+
+
+
 # [4.5.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.4.0...v4.5.0) (2025-10-08)
 
 

package/README.md

@@ -381,7 +381,7 @@ List of file UUIDs with the state "muted". These files cannot be selected or hav
 
 <u>Type:</u> `array`.
 
-<u>Default:</u> `['ASSETS', 'FOLDERS']`
+<u>Default:</u> `['ASSETS', 'FOLDERS', 'LABELS', 'COLLECTIONS']`
 
 List of available views.
 
@@ -401,7 +401,7 @@ View which will be currently opened.
 
 <u>Default:</u> `null`
 
-Open the provided view's item/object for ex. (folders view => folder path, labels view => label sid or uuid ...etc.)
+Open the provided view's item/object for ex. (folders view => folder path, labels view => label sid or uuid, collections view => collection uuid...etc.)
 
 > Note: No auto redirect to the view, you have to provide the proper view from [`view prop`](#view).
 
@@ -411,7 +411,7 @@ Open the provided view's item/object for ex. (folders view => folder path, label
 
 <u>Default:</u> `null`
 
-A sub item that should be opened inside the provided [`view`](#view) & [`viewItem`](#viewitem).
+A sub item that should be opened inside the provided [`view`](#view) & [`viewItem`](#viewitem), mostly used for opening a collection virtual folder that's found inside some collection.
 
 > Note: No auto redirect to the view, you have to provide the proper view from [`view prop`](#view).
 
@@ -708,6 +708,24 @@ Shows/hides on initial load the folder tree as a sidebar at the left of the plug
 
 Shows/hides the asset details view as a sidebar at the right of the plugin to view various details about selected assets. The user can shows/hides the details view from the info icon in the right side of the breadcrumbs.
 
+### `showCollectionsTree`
+
+<u>Type:</u> `boolean`.
+
+<u>Default:</u> `false`
+
+Shows/hides the collection tree as a sidebar at the left of the plugin to navigate collections. The user can shows/hides the collection tree from the tree icon in the breadcrumbs.
+
+> **_Only relevant if_** collection view is provided in [views](#views)
+
+### `showLabelsTree`
+
+<u>Type:</u> `boolean`.
+
+<u>Default:</u> `false`
+
+Shows/hides the label tree as a sidebar at the left of the plugin to navigate labels. The user can shows/hides the label tree from the tree icon in the breadcrumbs.
+
 ### `hideDetailsViewButton` ![asset-picker-supported] ![asset-manager-supported]
 
 <u>Type:</u> `boolean`.

package/lib/components/ActionBar/DownloadWithExportButton.js

@@ -23,6 +23,9 @@ import { downloadOneFile, downloadItems, emitExportEvent } from '../../thunks/do
 import { selectAllSelectedItems, selectFirstSelectedFileOrFolder, selectIsFolderSelected, selectSelectedFiles, selectionsCleared } from '../../slices/selections.slice';
 import { useDownloadConsentModal, useTransformedDownloadModal } from '../Modals';
 import Styled from './ActionBar.styled';
+import { collectionsDeselected } from '../../slices/collections.slice';
+import { selectIsCollectionsView, selectIsLabelsView } from '../../slices/views.slice';
+import { downloadLabelAssets, labelsSelectionToggled, selectLabelsArray, selectLabelsSelectedUuids } from '../../slices/labels.slice';
 import { ANIMATED_IMG_ACCEPT_HEADER } from '../../utils/constants';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var SIZE = 16;
@@ -41,6 +44,10 @@ var DownloadWithExportButton = function DownloadWithExportButton() {
   var selectedFiles = useSelector(selectSelectedFiles);
   var selectedItems = useSelector(selectAllSelectedItems);
   var firstItem = useSelector(selectFirstSelectedFileOrFolder);
+  var isCollectionsView = useSelector(selectIsCollectionsView);
+  var isLabelsView = useSelector(selectIsLabelsView);
+  var labels = useSelector(selectLabelsArray);
+  var selectedLabelsUuids = useSelector(selectLabelsSelectedUuids);
   var iconPrimaryColor = theme.palette[PC.IconsPrimary];
   var disableDownloadButton = opts.disableDownloadButton,
     preventDownloadDefaultBehavior = opts.preventDownloadDefaultBehavior,
@@ -52,13 +59,22 @@ var DownloadWithExportButton = function DownloadWithExportButton() {
     exportOptionsMenuAnchor = _useState2[0],
     setExportOptionsMenuAnchor = _useState2[1];
   var menuRef = useRef(null);
+  var firstSelectedLabelAssetsCount = useMemo(function () {
+    var _labels$find;
+    return (selectedLabelsUuids === null || selectedLabelsUuids === void 0 ? void 0 : selectedLabelsUuids.length) === 1 && ((_labels$find = labels.find(function (label) {
+      return label.uuid === selectedLabelsUuids[0];
+    })) === null || _labels$find === void 0 ? void 0 : _labels$find.assets_count);
+  }, [selectedLabelsUuids, labels]);
   var unsupportedExportReason = useMemo(function () {
     return checkItemsSupportExportWithReason(selectedFiles);
   }, [selectedFiles]);
   var hideTransformation = isFolderSelected || !!unsupportedExportReason || hideDownloadVariationsOption;
   var tooltipTitle = i18n(unsupportedExportReason);
-  var showDownloadButtonArrow = !disableDownloadButton && !isWidgetSmallSize && !useAssetsPicker;
-  var downloadButtonVisible = !preventDownloadDefaultBehavior;
+  var showDownloadButtonArrow = !disableDownloadButton && isCollectionsView && !isLabelsView && !isWidgetSmallSize && !useAssetsPicker;
+  var isSingleSelectedLabelWithAssets = (selectedLabelsUuids === null || selectedLabelsUuids === void 0 ? void 0 : selectedLabelsUuids.length) === 1 && !!firstSelectedLabelAssetsCount;
+  var isDownloadAllowedInLabelsView = !isLabelsView || isLabelsView && useAssetsPicker || isSingleSelectedLabelWithAssets;
+  var isDownloadAllowedInCollectionsView = !isCollectionsView || isCollectionsView && useAssetsPicker;
+  var downloadButtonVisible = isDownloadAllowedInLabelsView && isDownloadAllowedInCollectionsView && !preventDownloadDefaultBehavior;
   var downloadButtonDisabled = !checkUserPermissions([PERMISSIONS.DISPLAY]) || !checkFileFolderPermissions({
     permissionsToCheck: [PERMISSIONS.DISPLAY],
     permissionsList: firstItem === null || firstItem === void 0 ? void 0 : firstItem.permissions
@@ -67,8 +83,15 @@ var DownloadWithExportButton = function DownloadWithExportButton() {
     event.stopPropagation();
     setExportOptionsMenuAnchor(exportOptionsMenuAnchor ? null : menuRef.current);
   };
+  var deselectAllLabels = function deselectAllLabels() {
+    return dispatch(labelsSelectionToggled({
+      uuids: []
+    }));
+  };
   var handleClearSelection = function handleClearSelection() {
     dispatch(selectionsCleared());
+    deselectAllLabels();
+    dispatch(collectionsDeselected());
   };
   var emitExport = function emitExport() {
     if (selectedItems.length > 0) {
@@ -93,8 +116,13 @@ var DownloadWithExportButton = function DownloadWithExportButton() {
     }
   };
   var onClickDownload = function onClickDownload() {
+    if ((selectedLabelsUuids === null || selectedLabelsUuids === void 0 ? void 0 : selectedLabelsUuids.length) === 1) {
+      triggerDownloadConsentModal(function () {
+        return dispatch(downloadLabelAssets(selectedLabelsUuids[0]));
+      });
+    }
     setExportOptionsMenuAnchor(null);
-    if (!preventDownloadDefaultBehavior && !useAssetsPicker) {
+    if (!preventDownloadDefaultBehavior && (!isLabelsView || useAssetsPicker)) {
       var isOneItem = selectedItems.length === 1;
       var items = !isOneItem || isFolderSelected ? selectedItems : selectedItems[0];
       triggerDownloadConsentModal(isOneItem && !isFolderSelected ? function () {
@@ -170,7 +198,7 @@ var DownloadWithExportButton = function DownloadWithExportButton() {
           })
         })
       })]
-    }), !disableDownloadButton && /*#__PURE__*/_jsx(_Fragment, {
+    }), !disableDownloadButton && !isLabelsView && !isCollectionsView && /*#__PURE__*/_jsx(_Fragment, {
       children: /*#__PURE__*/_jsxs(Menu, {
         anchorEl: exportOptionsMenuAnchor,
         open: Boolean(exportOptionsMenuAnchor),

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

@@ -38,7 +38,7 @@ 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 { selectFileLabels } from '../../../../slices/labels.slice';
 import { selectIsAssetsView, selectViewLayout } from '../../../../slices/views.slice';
 import { selectCurrentFileByUuid } from '../../../../slices/files.slice';
 import FileMetadataFieldValue from '../../../common/FileMetadataFieldValue';

package/lib/components/Breadcrumbs/index.js

@@ -16,14 +16,19 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { useState, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { FolderTree, More } from '@scaleflex/icons';
+import { Bookmark, FolderTree, Label, More } from '@scaleflex/icons';
 import { EllipsedText } from '@scaleflex/ui/core';
 import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { PC } from '@scaleflex/widget-common';
 import { VIEW_OPTIONS } from '../Views/Views.constants';
 import { useExplorer } from '../../hooks';
-import { selectActiveView, selectAllViews, selectIsFoldersView } from '../../slices/views.slice';
+import { selectActiveView, selectAllViews, selectIsCollectionsView, selectIsFoldersView, selectIsLabelsView } from '../../slices/views.slice';
+import { collectionsSearchTermUpdated, fetchCollections, fetchCollectionsFiles, selectActiveCollection, selectCollectionsActiveVirtualFolder, selectIsCollectionTreeOpened, fetchCollectionVirtualFolders } from '../../slices/collections.slice';
+import { fetchLabels, labelsSearchTermUpdated, selectActiveLabel, selectIsLabelsTreeOpened, activateLabel } from '../../slices/labels.slice';
 import Breadcrumb from './Breadcrumb';
 import { openFolderByPath, selectIsFoldersTreeOpened, selectOpenedFolders } from '../../slices/folders.slice';
+import BreadcrumbsViews from './BreadCrumbViews';
 import Styled from './Breadcrumbs.styled';
 
 // TODO: Refactor this component to be more dynamic and not rely on conditions (isView...).
@@ -34,10 +39,18 @@ var Breadcrumbs = function Breadcrumbs() {
   var _useExplorer = useExplorer(),
     i18n = _useExplorer.i18n,
     opts = _useExplorer.opts;
+  var theme = useTheme();
   var hideLeftSideBar = opts.hideLeftSideBar;
   var openedFolders = useSelector(selectOpenedFolders);
   var activeView = useSelector(selectActiveView);
   var isFoldersView = useSelector(selectIsFoldersView);
+  var isCollectionsView = useSelector(selectIsCollectionsView);
+  var isLabelsView = useSelector(selectIsLabelsView);
+  var activeCollection = useSelector(selectActiveCollection);
+  var activeCollectionVirtualFolder = useSelector(selectCollectionsActiveVirtualFolder);
+  var showCollectionsTree = useSelector(selectIsCollectionTreeOpened);
+  var activeLabel = useSelector(selectActiveLabel);
+  var showLabelsTree = useSelector(selectIsLabelsTreeOpened);
   var allViews = useSelector(selectAllViews);
   var showFoldersTree = useSelector(selectIsFoldersTreeOpened);
   var _useState = useState(undefined),
@@ -52,7 +65,23 @@ var Breadcrumbs = function Breadcrumbs() {
     _useState6 = _slicedToArray(_useState5, 2),
     moreFolders = _useState6[0],
     setMoreFolders = _useState6[1];
-  var showTreeToggleIcon = !hideLeftSideBar && isFoldersView && !showFoldersTree;
+  var showTreeToggleIcon = !hideLeftSideBar && (isFoldersView && !showFoldersTree || isCollectionsView && !showCollectionsTree || isLabelsView && !showLabelsTree);
+  var refreshCollections = function refreshCollections() {
+    return dispatch(fetchCollections());
+  };
+  var refreshLabels = function refreshLabels() {
+    return dispatch(fetchLabels());
+  };
+  var refreshActiveCollection = function refreshActiveCollection() {
+    return dispatch(fetchCollectionVirtualFolders({
+      collectionUuid: activeCollection.uuid
+    }));
+  };
+  var refreshActiveLabel = function refreshActiveLabel() {
+    return dispatch(activateLabel({
+      uuid: activeLabel.uuid
+    }));
+  };
   var handleOpenFoldersMenu = function handleOpenFoldersMenu(event) {
     return setFoldersMenuAnchorEl(event.currentTarget);
   };
@@ -67,15 +96,67 @@ var Breadcrumbs = function Breadcrumbs() {
       }
     }
   };
+  var onClickMainItem = function onClickMainItem() {
+    if (isCollectionsView) activeCollection ? refreshActiveCollection() : refreshCollections();else if (isLabelsView) activeLabel ? refreshActiveLabel() : refreshLabels();
+  };
   var breadcrumbs = useMemo(function () {
+    var filterBreadcrumbs = function filterBreadcrumbs(breadcrumb) {
+      return breadcrumb && (breadcrumb.name || breadcrumb.title);
+    };
     var adaptedOpenedFolders = _toConsumableArray(openedFolders);
     var getMainItemName = function getMainItemName() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref$showActiveLabel = _ref.showActiveLabel,
+        showActiveLabel = _ref$showActiveLabel === void 0 ? false : _ref$showActiveLabel;
+      if (isCollectionsView) {
+        if (activeCollection) {
+          var _theme$palette;
+          return /*#__PURE__*/_jsx(BreadcrumbsViews, {
+            mainText: i18n('collectionsViewBreadcrumbLabel'),
+            icon: /*#__PURE__*/_jsx(Bookmark, {
+              size: 16,
+              color: theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette[PC.IconsPrimary]
+            }),
+            activeName: activeCollection.title,
+            onClickMain: refreshCollections,
+            showActiveLabel: showActiveLabel
+          });
+        } else {
+          return /*#__PURE__*/_jsx(BreadcrumbsViews, {
+            mainText: i18n('collectionsViewBreadcrumbLabel'),
+            activeName: i18n('collectionsViewBreadcrumbNotSelectedLabel'),
+            onClickMain: refreshCollections,
+            showActiveLabel: showActiveLabel
+          });
+        }
+      }
+      if (isLabelsView) {
+        if (!showActiveLabel || showActiveLabel && activeLabel) {
+          return /*#__PURE__*/_jsx(BreadcrumbsViews, {
+            mainText: i18n('labelsViewBreadcrumbLabel'),
+            icon: activeLabel ? /*#__PURE__*/_jsx(Label, {
+              size: 16,
+              style: {
+                color: activeLabel === null || activeLabel === void 0 ? void 0 : activeLabel.color
+              }
+            }) : null,
+            activeName: activeLabel === null || activeLabel === void 0 ? void 0 : activeLabel.name,
+            showActiveLabel: showActiveLabel,
+            onClickMain: refreshLabels
+          });
+        }
+        return null;
+      }
       return i18n(VIEW_OPTIONS[activeView].i18nKey);
     };
     var Icon = VIEW_OPTIONS[activeView].icon;
     var mainItem = {
       uuid: "view-mode-".concat(activeView),
       name: getMainItemName(),
+      activeLabel: !isFoldersView && getMainItemName({
+        showActiveLabel: true
+      }),
+      onClick: onClickMainItem,
       icon: function icon(props) {
         return /*#__PURE__*/_jsx(Icon, _objectSpread({}, props));
       }
@@ -90,13 +171,39 @@ var Breadcrumbs = function Breadcrumbs() {
       });
       return adaptedOpenedFolders;
     }
+    if (isLabelsView) {
+      return [mainItem].filter(filterBreadcrumbs);
+    }
+    if (isCollectionsView) {
+      var collectionsVirtualFoldersPath = [];
+      var _addInPath = function addInPath(folder) {
+        if (folder !== null && folder !== void 0 && folder.name) {
+          collectionsVirtualFoldersPath.push({
+            name: folder.name,
+            onClick: function onClick() {
+              return dispatch(fetchCollectionsFiles({
+                folder: folder,
+                offset: 0
+              }));
+            }
+          });
+        }
+        if (folder !== null && folder !== void 0 && folder.parent) _addInPath(folder === null || folder === void 0 ? void 0 : folder.parent);
+      };
+      _addInPath(activeCollectionVirtualFolder);
+      return [mainItem].concat(_toConsumableArray(collectionsVirtualFoldersPath.reverse())).filter(filterBreadcrumbs);
+    }
     return [mainItem].concat(adaptedOpenedFolders);
-  }, [openedFolders, activeView, allViews]);
+  }, [openedFolders, activeView, allViews, activeLabel, activeCollection, activeCollectionVirtualFolder]);
   var breadcrumbsLength = breadcrumbs.length;
   var maxNumberOfBreadcrumbsToShow = 3;
   var breadcrumbsFolders = breadcrumbsLength >= maxNumberOfBreadcrumbsToShow ? newBreadcrumbs : breadcrumbs;
   var closeMenu = function closeMenu() {
     setFoldersMenuAnchorEl(undefined);
+
+    // Reset search values from sub lists
+    dispatch(collectionsSearchTermUpdated(''));
+    dispatch(labelsSearchTermUpdated(''));
   };
   useEffect(function () {
     var _openedFolders$, _openedFolders$2;
@@ -123,7 +230,7 @@ var Breadcrumbs = function Breadcrumbs() {
     }
     setMoreFolders(breadcrumbsList);
     setNewBreadcrumbs(newBreadcrumbsArray);
-  }, [openedFolders]);
+  }, [openedFolders, activeCollectionVirtualFolder]);
   var handleToggleTree = function handleToggleTree() {
     var activeViewToggleTreeAction = VIEW_OPTIONS[activeView].toggleTreeAction;
     if (activeViewToggleTreeAction) {
@@ -156,7 +263,8 @@ var Breadcrumbs = function Breadcrumbs() {
         isLast: i + 1 === breadcrumbsFolders.length,
         isFirst: i === 0,
         Icon: breadcrumb.Icon,
-        isMenuOpen: Boolean(foldersMenuAnchorEl)
+        isMenuOpen: Boolean(foldersMenuAnchorEl),
+        activeLabel: breadcrumb.activeLabel
       }, breadcrumb.uuid || breadcrumb.id || breadcrumb.path || breadcrumb.name || breadcrumb.title);
     }), /*#__PURE__*/_jsx(Styled.Menu, {
       anchorEl: foldersMenuAnchorEl,

package/lib/components/CollectionsView/CollectionFolderIcon.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CollectionFolderIcon = function CollectionFolderIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "269",
+    height: "202",
+    viewBox: "0 0 269 202",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M0 4.53098V16H108C96.9047 3.11111 93.0089 0 89.6267 0H47.6318H5.6369C2.25476 0 0 2.26549 0 4.53098Z",
+      fill: "#F9FBFC"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M0 16H264.5C266.709 16 268.5 17.7909 268.5 20V162H0V16Z",
+      fill: "#F9FBFC"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M0 162H268.5V198C268.5 200.209 266.709 202 264.5 202H4C1.79086 202 0 200.209 0 198V162Z",
+      fill: "#F9FBFC"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M108.587 16.0715L108.736 16.2403H108.961H264.441C266.789 16.2403 268.5 17.7563 268.5 19.413V198.327C268.5 199.984 266.789 201.5 264.441 201.5H4.55933C2.21105 201.5 0.5 199.984 0.5 198.327V4.94031C0.5 2.77804 2.51087 0.5 5.66894 0.5H90.1361C91.6108 0.5 93.6068 1.40089 96.5901 3.86166C99.5538 6.3062 103.408 10.2172 108.587 16.0715Z",
+      stroke: "#E2E8EC"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M236 14H206V62.0793C206 62.8884 206.911 63.3625 207.573 62.8986L221 53.5L234.427 62.8986C235.089 63.3625 236 62.8884 236 62.0793V14Z",
+      fill: "#A9B6C2"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M206 14V13.5H205.5V14H206ZM236 14H236.5V13.5H236V14ZM234.427 62.8986L234.713 62.489L234.427 62.8986ZM221 53.5L221.287 53.0904L221 52.8897L220.713 53.0904L221 53.5ZM207.573 62.8986L207.86 63.3082H207.86L207.573 62.8986ZM206 14.5H236V13.5H206V14.5ZM235.5 14V62.0793H236.5V14H235.5ZM234.713 62.489L221.287 53.0904L220.713 53.9096L234.14 63.3082L234.713 62.489ZM220.713 53.0904L207.287 62.489L207.86 63.3082L221.287 53.9096L220.713 53.0904ZM206.5 62.0793V14H205.5V62.0793H206.5ZM207.287 62.489C206.955 62.7209 206.5 62.4839 206.5 62.0793H205.5C205.5 63.2929 206.866 64.0041 207.86 63.3082L207.287 62.489ZM235.5 62.0793C235.5 62.4839 235.045 62.7209 234.713 62.489L234.14 63.3082C235.134 64.0041 236.5 63.2929 236.5 62.0793H235.5Z",
+      fill: "#E2E8EC"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M206.5 14H235.5",
+      stroke: "#A9B6C2"
+    })]
+  });
+};
+export default CollectionFolderIcon;

package/lib/components/CollectionsView/CollectionVirtualFoldersTree/CollectionTreeSkeletion.js

@@ -0,0 +1,26 @@
+import { Skeleton } from '@scaleflex/ui/core';
+import Styled from './CollectionVirtualFoldersTree.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CollectionTreeSkeleton = function CollectionTreeSkeleton() {
+  return Array(20).fill().map(function (_, index) {
+    return /*#__PURE__*/_jsxs(Styled.SkeletonItem, {
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        width: 20,
+        height: 20,
+        style: {
+          borderRadius: 4
+        }
+      }), /*#__PURE__*/_jsx(Styled.SkeletonItemName, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 160,
+          height: 10,
+          style: {
+            marginBottom: 4,
+            borderRadius: 2
+          }
+        })
+      })]
+    }, "".concat(index, "-loading"));
+  });
+};
+export default CollectionTreeSkeleton;

package/lib/components/CollectionsView/CollectionVirtualFoldersTree/CollectionVirtualFoldersTree.styled.js

@@ -0,0 +1,52 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC } from '@scaleflex/widget-common/lib';
+import styled from 'styled-components';
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var FolderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var FolderArrow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.IconsPrimary];
+});
+var FolderIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.IconsSecondary];
+});
+var FolderName = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  color: ", ";\n"])), function (props) {
+  return props.theme.typography.font[FV.LabelSmall];
+}, function (_ref3) {
+  var font = _ref3.theme.typography.font;
+  return font[FV.LabelMedium];
+}, function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PC.TextPrimary];
+});
+var Folder = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n  padding: 8px 12px;\n  cursor: pointer;\n  gap: 6px;\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  ", "\n\n  &:hover {\n    background: ", ";\n  }\n\n  ", "\n"])), function (props) {
+  return "margin-left: ".concat(props.$level * 12, "px;");
+}, FolderArrow, function (props) {
+  return props.$hasChildren ? '' : 'visibility: hidden;';
+}, function (props) {
+  return !props.$hasChildren ? "\n    ".concat(FolderArrow, " { visibility: hidden; }\n  ") : '';
+}, function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.BackgroundHover];
+}, function (_ref6) {
+  var $active = _ref6.$active,
+    palette = _ref6.theme.palette;
+  return $active ? "\n    background: ".concat(palette[PC.BackgroundActive], " !important;\n\n    ").concat(FolderIcon, " svg { color: ").concat(palette[PC.AccentStateless], "; }\n    ").concat(FolderName, " { color: ").concat(palette[PC.AccentStateless], "; }\n  ") : '';
+});
+var FolderChildren = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+var SkeletonItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 36px;\n  padding: 8px 0;\n  border-radius: 4px;\n  column-gap: 6px;\n  transition: all 100ms ease-out;\n\n  span {\n    border-radius: 4px;\n  }\n"])));
+var SkeletonItemName = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var Styled = {
+  Container: Container,
+  FolderContainer: FolderContainer,
+  Folder: Folder,
+  FolderArrow: FolderArrow,
+  FolderIcon: FolderIcon,
+  FolderName: FolderName,
+  FolderChildren: FolderChildren,
+  SkeletonItem: SkeletonItem,
+  SkeletonItemName: SkeletonItemName
+};
+export default Styled;

package/lib/components/CollectionsView/CollectionVirtualFoldersTree/CollectionVirtualFoldersTree.utils.js

@@ -0,0 +1,24 @@
+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); }
+export var filterFolders = function filterFolders() {
+  var folders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var searchTerm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var _getChildren = function getChildren(result, folder) {
+    if ((folder.name || '').toLowerCase().includes((searchTerm || '').toLowerCase())) {
+      result.push(folder);
+      return result;
+    }
+    if (Array.isArray(folder.children)) {
+      var children = folder.children.reduce(_getChildren, []);
+      if (children.length) result.push(_objectSpread(_objectSpread({}, folder), {}, {
+        children: children
+      }));
+    }
+    return result;
+  };
+  return folders.reduce(_getChildren, []);
+};

package/lib/components/CollectionsView/CollectionVirtualFoldersTree/Folder.js

@@ -0,0 +1,88 @@
+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, memo } from 'react';
+import { ArrowBottom, ArrowRightOutline, Collections } from '@scaleflex/icons';
+import { EllipsedText } from '@scaleflex/ui/core';
+import Styled from './CollectionVirtualFoldersTree.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var _Folder = function Folder(_ref) {
+  var name = _ref.name,
+    childrenFolders = _ref.childrenFolders,
+    _ref$noArrow = _ref.noArrow,
+    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 0 : _ref$level,
+    activeFolder = _ref.activeFolder,
+    activateFolder = _ref.activateFolder,
+    folder = _ref.folder,
+    _ref$expandedByDefaul = _ref.expandedByDefault,
+    expandedByDefault = _ref$expandedByDefaul === void 0 ? false : _ref$expandedByDefaul,
+    _ref$forceExpanded = _ref.forceExpanded,
+    forceExpanded = _ref$forceExpanded === void 0 ? false : _ref$forceExpanded;
+  var _useState = useState(expandedByDefault),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var isActive = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.path) === (folder === null || folder === void 0 ? void 0 : folder.path);
+  return /*#__PURE__*/_jsxs(Styled.FolderContainer, {
+    children: [/*#__PURE__*/_jsxs(Styled.Folder, {
+      $level: level,
+      $hasChildren: Boolean(childrenFolders === null || childrenFolders === void 0 ? void 0 : childrenFolders.length),
+      $active: isActive,
+      onClick: function onClick() {
+        activateFolder(folder);
+        setIsExpanded(true);
+      },
+      children: [!noArrow && /*#__PURE__*/_jsx(Styled.FolderArrow, {
+        // $expanded={isExpanded}
+        onClick: forceExpanded ? undefined : function (event) {
+          event.stopPropagation();
+          setIsExpanded(function (_isExpanded) {
+            return !_isExpanded;
+          });
+        },
+        children: forceExpanded || isExpanded ? /*#__PURE__*/_jsx(ArrowBottom, {
+          size: 11
+        }) : /*#__PURE__*/_jsx(ArrowRightOutline, {
+          size: 11
+        })
+      }), /*#__PURE__*/_jsx(Styled.FolderIcon, {
+        children: /*#__PURE__*/_jsx(Collections, {
+          size: 16
+        })
+      }), /*#__PURE__*/_jsx(Styled.FolderName, {
+        children: /*#__PURE__*/_jsx(EllipsedText, {
+          maxLinesCount: 1,
+          children: name
+        })
+      })]
+    }), (forceExpanded || isExpanded) && childrenFolders && childrenFolders.length > 0 && /*#__PURE__*/_jsx(Styled.FolderChildren, {
+      children: childrenFolders.map(function (childFolder) {
+        return /*#__PURE__*/_jsx(_Folder, {
+          name: childFolder === null || childFolder === void 0 ? void 0 : childFolder.name
+          // path={`${path}/${decodeURIComponent(childFolder?.name)}`}
+          ,
+          childrenFolders: childFolder === null || childFolder === void 0 ? void 0 : childFolder.children,
+          level: level + 1,
+          activateFolder: activateFolder,
+          activeFolder: activeFolder,
+          folder: _objectSpread(_objectSpread({}, childFolder), {}, {
+            parent: folder
+          }),
+          forceExpanded: forceExpanded
+        }, childFolder === null || childFolder === void 0 ? void 0 : childFolder.name);
+      })
+    })]
+  });
+};
+export default /*#__PURE__*/memo(_Folder);

package/lib/components/CollectionsView/CollectionVirtualFoldersTree/Tree.js

@@ -0,0 +1,50 @@
+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 Folder from './Folder';
+import CollectionTreeSkeleton from './CollectionTreeSkeletion';
+import Styled from './CollectionVirtualFoldersTree.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+var Tree = function Tree(_ref) {
+  var activeCollectionVirtualFolders = _ref.activeCollectionVirtualFolders,
+    activeCollectionVirtualFolder = _ref.activeCollectionVirtualFolder,
+    isActiveCollectionVirtualFoldersLoading = _ref.isActiveCollectionVirtualFoldersLoading,
+    activateFolder = _ref.activateFolder,
+    searchTerm = _ref.searchTerm;
+  /**
+   * Main value is stored in activeCollectionVirtualFoldersPath global state but we use extra state level to avoid delay between click on virtual folder and activation.
+   * Hence the only reason of having extra state level is better UI performance.
+   *
+   * TODO Vitaly: Check this part. It doesn't optimise performance.
+   */
+  // const [activePath, setActivePath] = useState(activeCollectionVirtualFoldersPath)
+
+  // useEffect(() => {
+  //   setActivePath(activeCollectionVirtualFoldersPath)
+  // }, [activeCollectionVirtualFoldersPath])
+
+  var folderCommonProps = {
+    activeFolder: activeCollectionVirtualFolder,
+    activateFolder: activateFolder
+  };
+  if (isActiveCollectionVirtualFoldersLoading) {
+    return /*#__PURE__*/_jsx(CollectionTreeSkeleton, {});
+  }
+  return /*#__PURE__*/_jsx(Styled.Container, {
+    children: (activeCollectionVirtualFolders || []).map(function (folder) {
+      return /*#__PURE__*/_createElement(Folder, _objectSpread(_objectSpread({}, folderCommonProps), {}, {
+        key: folder === null || folder === void 0 ? void 0 : folder.name,
+        folder: folder,
+        name: folder === null || folder === void 0 ? void 0 : folder.name,
+        childrenFolders: folder === null || folder === void 0 ? void 0 : folder.children,
+        expandedByDefault: (activeCollectionVirtualFolder === null || activeCollectionVirtualFolder === void 0 ? void 0 : activeCollectionVirtualFolder.path) === (folder === null || folder === void 0 ? void 0 : folder.path),
+        forceExpanded: Boolean(searchTerm)
+      }));
+    })
+  });
+};
+export default Tree;