@scaleflex/widget-explorer 4.5.0 → 4.5.4

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;

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

@@ -0,0 +1,75 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+import { useSelector, useDispatch } from 'react-redux';
+import { Skeleton } from '@scaleflex/ui/core';
+import NoCollections from '@scaleflex/widget-icons/lib/NoCollections';
+import NoItems from '@scaleflex/widget-explorer/lib/components/NoItems';
+import { useExplorerI18n } from '../../../hooks';
+import { fetchCollectionsFiles, selectActiveCollectionsVirtualFoldersPaths, selectCollectionsActiveVirtualFolder, selectCollectionsFilteredVirtualFolders, selectIsActiveVirtualFolderLoading } from '../../../slices/collections.slice';
+import Tree from './Tree';
+import Styled from './CollectionVirtualFoldersTree.styled';
+
+/**
+ * In current component we use extra component Tree, to be able to use React.memo optimisation.
+ * useBrowserContext works good but increase amount of rendering in some cases
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var CollectionVirtualFoldersTree = function CollectionVirtualFoldersTree(_ref) {
+  var searchTerm = _ref.searchTerm;
+  var dispatch = useDispatch();
+  var i18n = useExplorerI18n();
+  var activeCollectionVirtualFoldersPaths = useSelector(selectActiveCollectionsVirtualFoldersPaths);
+  var activeCollectionVirtualFolder = useSelector(selectCollectionsActiveVirtualFolder);
+  var isActiveCollectionVirtualFoldersLoading = useSelector(selectIsActiveVirtualFolderLoading);
+  var filteredFolders = useSelector(function (state) {
+    return selectCollectionsFilteredVirtualFolders(state, searchTerm);
+  });
+  var activateFolder = function activateFolder(folder) {
+    dispatch(fetchCollectionsFiles({
+      folder: folder || null,
+      offset: 0
+    }));
+  };
+  if (isActiveCollectionVirtualFoldersLoading) {
+    return /*#__PURE__*/_jsx(Styled.Container, {
+      children: _toConsumableArray(new Array(12)).map(function (_, i) {
+        return /*#__PURE__*/_jsx(Styled.FolderContainer, {
+          children: /*#__PURE__*/_jsx(Styled.SkeletonItem, {
+            children: /*#__PURE__*/_jsx(Skeleton, {
+              width: "100%"
+            })
+          })
+        }, i);
+      })
+    });
+  }
+  if (!activeCollectionVirtualFoldersPaths.length) {
+    return /*#__PURE__*/_jsx(NoItems, {
+      secondary: i18n('collectionsTreeNoGroupsFoldersLabel'),
+      icon: NoCollections,
+      mt: 80
+    });
+  }
+  if (!filteredFolders.length) {
+    return /*#__PURE__*/_jsx(NoItems, {
+      iconWidth: 150,
+      iconHeight: 60,
+      mt: 80,
+      noSearchResults: true,
+      primary: i18n('mutualizedNoResults'),
+      secondary: i18n('mutualizedTryAnotherSearch')
+    });
+  }
+  return /*#__PURE__*/_jsx(Tree, {
+    activeCollectionVirtualFolders: filteredFolders,
+    activeCollectionVirtualFolder: activeCollectionVirtualFolder,
+    isActiveCollectionVirtualFoldersLoading: isActiveCollectionVirtualFoldersLoading,
+    activateFolder: activateFolder,
+    searchTerm: searchTerm
+  });
+};
+export default CollectionVirtualFoldersTree;

package/lib/components/CollectionsView/CollectionsSkeleton.js

@@ -0,0 +1,30 @@
+import { Skeleton } from '@scaleflex/ui/core';
+import Styled from './CollectionsView.styled';
+import CollectionFolderIcon from './CollectionFolderIcon';
+import StyledAssetsList from '../AssetsList/AssetsList.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var GridLayoutCollectionsSkeleton = function GridLayoutCollectionsSkeleton() {
+  return /*#__PURE__*/_jsx("div", {
+    className: "filerobot-Provider-ItemCategory-wrapper",
+    style: {
+      paddingTop: 0
+    },
+    children: /*#__PURE__*/_jsx(Styled.ItemCategoryList, {
+      children: Array(18).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(Styled.Item, {
+          children: [/*#__PURE__*/_jsx(CollectionFolderIcon, {}), /*#__PURE__*/_jsx(StyledAssetsList.FolderContent, {
+            role: "button",
+            $loading: true,
+            children: /*#__PURE__*/_jsx(StyledAssetsList.FolderInfo, {
+              height: "fit-content",
+              children: /*#__PURE__*/_jsx(Skeleton, {
+                width: 80
+              })
+            })
+          })]
+        }, index);
+      })
+    })
+  });
+};
+export default GridLayoutCollectionsSkeleton;

package/lib/components/CollectionsView/CollectionsTree/ActiveCollectionContent.js

@@ -0,0 +1,61 @@
+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 { useSelector } from 'react-redux';
+import { Search, EllipsedText } from '@scaleflex/ui/core';
+import { ArrowLeftOutline } from '@scaleflex/icons';
+import { useDebounce } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorerI18n } from '../../../hooks';
+import { selectActiveCollection, selectActiveCollectionsVirtualFoldersPaths, selectIsActiveVirtualFolderLoading } from '../../../slices/collections.slice';
+import CollectionVirtualFoldersTree from '../CollectionVirtualFoldersTree';
+import Styled from './CollectionsTree.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ActiveCollectionContent = function ActiveCollectionContent(_ref) {
+  var onClickBack = _ref.onClickBack;
+  var i18n = useExplorerI18n();
+  var activeCollection = useSelector(selectActiveCollection);
+  var activeCollectionVirtualFoldersPaths = useSelector(selectActiveCollectionsVirtualFoldersPaths);
+  var isActiveCollectionVirtualFoldersLoading = useSelector(selectIsActiveVirtualFolderLoading);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var debouncedSearchTerm = useDebounce(searchTerm, 300);
+  return /*#__PURE__*/_jsxs(Styled.Container, {
+    children: [/*#__PURE__*/_jsxs(Styled.Header, {
+      children: [/*#__PURE__*/_jsx(Styled.Title, {
+        children: /*#__PURE__*/_jsx(EllipsedText, {
+          maxLinesCount: 1,
+          children: activeCollection === null || activeCollection === void 0 ? void 0 : activeCollection.title
+        })
+      }), /*#__PURE__*/_jsx(Styled.BackToAllCollectionsBtn, {
+        color: "link-secondary",
+        startIcon: /*#__PURE__*/_jsx(ArrowLeftOutline, {
+          size: 14
+        }),
+        onClick: onClickBack,
+        children: i18n('collectionsTreeBackToAllCollectionsButton')
+      }), /*#__PURE__*/_jsx(Search, {
+        value: searchTerm,
+        onChange: function onChange(_ref2) {
+          var value = _ref2.target.value;
+          return setSearchTerm(value);
+        },
+        placeholder: i18n('collectionsTreeGroupsSearchPlaceholder'),
+        size: "sm",
+        fullWidth: true,
+        focusOnMount: true,
+        disabled: isActiveCollectionVirtualFoldersLoading || !activeCollectionVirtualFoldersPaths.length
+      })]
+    }), /*#__PURE__*/_jsx(Styled.Content, {
+      children: /*#__PURE__*/_jsx(CollectionVirtualFoldersTree, {
+        searchTerm: debouncedSearchTerm
+      })
+    })]
+  });
+};
+export default ActiveCollectionContent;

package/lib/components/CollectionsView/CollectionsTree/CollectionTreeItem.js

@@ -0,0 +1,44 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { EllipsedText, TextWithHighlights } from '@scaleflex/ui/core';
+import { Bookmark } from '@scaleflex/icons';
+import { collectionsDeselected, selectActiveCollection, selectCollections } from '../../../slices/collections.slice';
+import Styled from './CollectionsTree.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CollectionTreeItem = function CollectionTreeItem(_ref) {
+  var collectionUuid = _ref.collectionUuid,
+    activateCollection = _ref.activateCollection,
+    debouncedCollectionsSearchTerm = _ref.debouncedCollectionsSearchTerm;
+  var dispatch = useDispatch();
+  var activeCollection = useSelector(selectActiveCollection);
+  var collections = useSelector(selectCollections);
+  var deselectAllCollections = function deselectAllCollections() {
+    return dispatch(collectionsDeselected());
+  };
+  var handleActivateCollection = function handleActivateCollection(collectionUuid) {
+    deselectAllCollections();
+    activateCollection(collectionUuid);
+  };
+  var collectionName = collections[collectionUuid].title || '';
+  var hasSearch = debouncedCollectionsSearchTerm || debouncedCollectionsSearchTerm === 0;
+  return /*#__PURE__*/_jsxs(Styled.Item, {
+    $active: (activeCollection === null || activeCollection === void 0 ? void 0 : activeCollection.uuid) === collectionUuid,
+    onClick: function onClick() {
+      return handleActivateCollection(collectionUuid);
+    },
+    gap: hasSearch && '10px',
+    children: [/*#__PURE__*/_jsx(Styled.ItemIcon, {
+      children: /*#__PURE__*/_jsx(Bookmark, {
+        size: hasSearch ? 20 : 16
+      })
+    }), /*#__PURE__*/_jsx(Styled.ItemLabel, {
+      children: /*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: 1,
+        children: /*#__PURE__*/_jsx(TextWithHighlights, {
+          text: collectionName,
+          highlightText: debouncedCollectionsSearchTerm
+        })
+      })
+    })]
+  }, collectionUuid);
+};
+export default CollectionTreeItem;

package/lib/components/CollectionsView/CollectionsTree/CollectionsContent.js

@@ -0,0 +1,130 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 { useDispatch, useSelector } from 'react-redux';
+import { Search, Skeleton } from '@scaleflex/ui/core';
+import NoCollections from '@scaleflex/widget-icons/lib/NoCollections';
+import { useDebounce } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorer } from '../../../hooks';
+import { DEFAULT_COLLECTION_SORT, collectionsSearchTermUpdated, selectCollectionsSearchTerm, selectCollectionsUuids, selectCollectionsUuidsBySearchTerm, selectIsCollectionsLoading, sortCollections } from '../../../slices/collections.slice';
+import NoItems from '../../NoItems';
+import Styled from './CollectionsTree.styled';
+import CollectionTreeItem from './CollectionTreeItem';
+import { COLLECTIONS_SORT_OPTIONS } from '../../common/Sort/Sort.constants';
+import Sort from '../../common/Sort';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CollectionsContent = function CollectionsContent(_ref) {
+  var activateCollection = _ref.activateCollection;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    opts = _useExplorer.opts;
+  var showSort = opts.showSort;
+  var loading = useSelector(selectIsCollectionsLoading);
+  var collectionsUuids = useSelector(selectCollectionsUuids);
+  var collectionsSearchTerm = useSelector(selectCollectionsSearchTerm);
+  var _useState = useState({
+      by: DEFAULT_COLLECTION_SORT.BY,
+      order: DEFAULT_COLLECTION_SORT.ORDER
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    sort = _useState2[0],
+    setSort = _useState2[1];
+  var debouncedCollectionsSearchTerm = useDebounce(collectionsSearchTerm, 300);
+  var searchedCollectionsUuids = useSelector(function (state) {
+    return selectCollectionsUuidsBySearchTerm(state, debouncedCollectionsSearchTerm);
+  });
+  var isNoSearchedCollectionsFound = searchedCollectionsUuids.length === 0;
+  var setCollectionsSearchTerm = function setCollectionsSearchTerm(_ref2) {
+    var value = _ref2.target.value;
+    return dispatch(collectionsSearchTermUpdated(value));
+  };
+  var handleChangeSort = function handleChangeSort(sortBy, sortOrder) {
+    setSort({
+      by: sortBy,
+      order: sortOrder
+    });
+    dispatch(sortCollections({
+      sortBy: sortBy,
+      sortOrder: sortOrder
+    }));
+  };
+  var renderNoCollections = function renderNoCollections() {
+    if (loading) {
+      return /*#__PURE__*/_jsx("div", {
+        children: _toConsumableArray(new Array(12)).map(function (_, i) {
+          return /*#__PURE__*/_jsx(Styled.Item, {
+            padding: 0,
+            children: /*#__PURE__*/_jsx(Skeleton, {
+              width: "100%"
+            })
+          }, i);
+        })
+      });
+    }
+    if (!collectionsUuids.length) {
+      return /*#__PURE__*/_jsx(NoItems, {
+        icon: NoCollections,
+        mt: 80,
+        secondary: i18n('mutualizedNoCollectionsLabel'),
+        isTreeView: true
+      });
+    }
+    if (isNoSearchedCollectionsFound) {
+      return /*#__PURE__*/_jsx(NoItems, {
+        iconWidth: 150,
+        iconHeight: 60,
+        mt: 80,
+        noSearchResults: true,
+        smallItemsGap: true,
+        primary: i18n('mutualizedNoResults'),
+        secondary: i18n('mutualizedTryAnotherSearch')
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsxs(Styled.Container, {
+    children: [/*#__PURE__*/_jsxs(Styled.Header, {
+      children: [/*#__PURE__*/_jsx(Styled.Title, {
+        children: i18n('collectionsTreeTitle')
+      }), /*#__PURE__*/_jsx(Search, {
+        value: collectionsSearchTerm,
+        onChange: setCollectionsSearchTerm,
+        placeholder: i18n('collectionsTreeSearchPlaceholder'),
+        size: "sm",
+        fullWidth: true,
+        focusOnMount: true,
+        disabled: (collectionsUuids || []).length === 0
+      })]
+    }), !isNoSearchedCollectionsFound && /*#__PURE__*/_jsx(Styled.SettingsWrapper, {
+      children: showSort && /*#__PURE__*/_jsx(Styled.SortingWrapper, {
+        children: /*#__PURE__*/_jsx(Sort, {
+          options: COLLECTIONS_SORT_OPTIONS,
+          sortBy: sort.by,
+          sortOrder: sort.order,
+          onChange: handleChangeSort,
+          dontDisableIfNoFiles: true
+        })
+      })
+    }), /*#__PURE__*/_jsxs(Styled.Content, {
+      children: [!loading && !isNoSearchedCollectionsFound && /*#__PURE__*/_jsx("div", {
+        children: searchedCollectionsUuids.map(function (collectionUuid) {
+          return /*#__PURE__*/_jsx(CollectionTreeItem, {
+            collectionUuid: collectionUuid,
+            activateCollection: activateCollection,
+            debouncedCollectionsSearchTerm: debouncedCollectionsSearchTerm
+          }, collectionUuid);
+        })
+      }), renderNoCollections()]
+    })]
+  });
+};
+export default CollectionsContent;