@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/BulkEditPanel/components/Tabs/tabs.utils.js

@@ -0,0 +1,239 @@
+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 _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; }
+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 capitalizeFirstLetter from '@scaleflex/widget-utils/lib/capitalizeFirstLetter';
+import { REGIONAL_VARIANT_TYPE } from '../../../metadata.adapter';
+import isValidUri from '@scaleflex/widget-utils/lib/isValidUri';
+import { trimmedLowerCase } from '../../BulkEditPanel.utils';
+import { METADATA_PROPERTIES, META_TYPE_BY_OPERATOR, TAGS_PROPERTIES, TEXT_FIELDS_TYPES, TEXT_PROPERTIES } from './tabs.constants';
+var TRANSLATION_KEY_PREFIX = 'bulkEditModal';
+var generateTabI18nKey = function generateTabI18nKey() {
+  var keySuffix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return "".concat(TRANSLATION_KEY_PREFIX).concat(capitalizeFirstLetter(keySuffix));
+};
+var adaptMetadataChangesBeforeSave = function adaptMetadataChangesBeforeSave(changes, activeMetadataValue) {
+  return [_objectSpread(_defineProperty(_defineProperty({
+    type: META_TYPE_BY_OPERATOR[changes[METADATA_PROPERTIES.OPERATOR]]
+  }, METADATA_PROPERTIES.KEY, changes[METADATA_PROPERTIES.KEY]), METADATA_PROPERTIES.VALUE, changes[METADATA_PROPERTIES.VALUE]), activeMetadataValue && {
+    variant: activeMetadataValue
+  })];
+};
+var checkFormValidation = function checkFormValidation(_ref) {
+  var type = _ref.type,
+    changedFieldValue = _ref.changedFieldValue,
+    tabSelectedAssets = _ref.tabSelectedAssets;
+  if (type === 'attachment-uri') {
+    return isValidUri(changedFieldValue);
+  }
+  if (!tabSelectedAssets.length > 0) {
+    return false;
+  }
+  if (!TEXT_FIELDS_TYPES.includes(type) && (changedFieldValue === null || changedFieldValue === void 0 ? void 0 : changedFieldValue.length) > 0) {
+    return true;
+  }
+  if ((changedFieldValue === null || changedFieldValue === void 0 ? void 0 : changedFieldValue.length) > 0) {
+    return true;
+  }
+  if (typeof changedFieldValue === 'boolean') {
+    return true;
+  }
+  return false;
+};
+var adaptMetadataBeforeSaveLocally = function adaptMetadataBeforeSaveLocally(changes, activeMetadataValue) {
+  var prevMeta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var adaptedValue = changes[METADATA_PROPERTIES.VALUE];
+  if (activeMetadataValue) {
+    adaptedValue = _defineProperty({}, activeMetadataValue, changes[METADATA_PROPERTIES.VALUE]);
+    return _defineProperty({}, changes[METADATA_PROPERTIES.KEY], _objectSpread(_objectSpread({}, prevMeta[changes[METADATA_PROPERTIES.KEY]] || {}), adaptedValue));
+  }
+  return _defineProperty({}, changes[METADATA_PROPERTIES.KEY], adaptedValue);
+};
+var adaptTagsChangesBeforeSave = function adaptTagsChangesBeforeSave(tagsDetails, activeLanguageVariant) {
+  var _tagsDetails$addedTag = tagsDetails.addedTags,
+    addedTags = _tagsDetails$addedTag === void 0 ? [] : _tagsDetails$addedTag,
+    _tagsDetails$removedT = tagsDetails.removedTags,
+    removedTags = _tagsDetails$removedT === void 0 ? [] : _tagsDetails$removedT;
+  var changes = [];
+  if (addedTags.length) {
+    var adaptedAddedTags = addedTags.reduce(function (acc, curr) {
+      var isRemoved = removedTags.some(function (_ref4) {
+        var sid = _ref4.sid;
+        return sid === curr.sid;
+      });
+      if (!isRemoved) {
+        acc.push(_objectSpread(_defineProperty({
+          type: TAGS_PROPERTIES.TYPE_ADD
+        }, TAGS_PROPERTIES.VALUE, curr.sid), activeLanguageVariant && {
+          variant: activeLanguageVariant
+        }));
+      }
+      return acc;
+    }, []);
+    changes.push.apply(changes, _toConsumableArray(adaptedAddedTags));
+  }
+  if (removedTags.length) {
+    var _adaptedAddedTags = removedTags.map(function (_ref5) {
+      var sid = _ref5.sid;
+      return _objectSpread(_defineProperty({
+        type: TAGS_PROPERTIES.TYPE_DEL
+      }, TAGS_PROPERTIES.VALUE, sid), activeLanguageVariant && {
+        variant: activeLanguageVariant
+      });
+    });
+    changes.push.apply(changes, _toConsumableArray(_adaptedAddedTags));
+  }
+  return changes;
+};
+var updateTagsLocally = function updateTagsLocally(_ref6) {
+  var tabAssets = _ref6.tabAssets,
+    currentLanguage = _ref6.currentLanguage,
+    tagsDetails = _ref6.tagsDetails;
+  var addedTags = tagsDetails.addedTags,
+    removedTags = tagsDetails.removedTags;
+  var getAdaptedAddedTags = function getAdaptedAddedTags() {
+    var assetTags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    return addedTags.filter(function (addedTag) {
+      return ![].concat(_toConsumableArray(assetTags), _toConsumableArray(removedTags)).some(function (_ref7) {
+        var label = _ref7.label;
+        return addedTag.label === label;
+      });
+    });
+  };
+  var updatedTabAssets = tabAssets.map(function (asset) {
+    var _asset$tags;
+    asset.tags = (_asset$tags = asset.tags) !== null && _asset$tags !== void 0 ? _asset$tags : {};
+    var assetTags = asset.tags[currentLanguage] || [];
+    var adaptedAssetTags = assetTags.filter(function (assetTag) {
+      return !removedTags.some(function (removedTag) {
+        return removedTag.label === assetTag.label;
+      });
+    });
+    var adaptedAddedTags = getAdaptedAddedTags(assetTags);
+    return _objectSpread(_objectSpread({}, asset), {}, {
+      tags: _objectSpread(_objectSpread({}, asset.tags || {}), {}, _defineProperty({}, currentLanguage, [].concat(_toConsumableArray(adaptedAssetTags), _toConsumableArray(adaptedAddedTags))))
+    });
+  });
+  return updatedTabAssets;
+};
+var getUpdateSingleFileMetadata = function getUpdateSingleFileMetadata(_ref8) {
+  var file = _ref8.file,
+    changedField = _ref8.changedField,
+    activeMetadataValue = _ref8.activeMetadataValue;
+  var assetMetadata = _objectSpread({}, file.meta || {});
+  var changedValue = changedField.value;
+  var assetMetadataField = assetMetadata[changedField.key] || {};
+  if (activeMetadataValue) {
+    changedValue = _objectSpread(_objectSpread({}, assetMetadataField), {}, _defineProperty({}, activeMetadataValue, changedField.value));
+  }
+  assetMetadata[changedField.key] = changedValue;
+  return _objectSpread(_objectSpread({}, file), {}, {
+    meta: _objectSpread(_objectSpread({}, file.meta || {}), {}, _defineProperty({}, changedField.key, changedValue))
+  });
+};
+var updateMetadataLocally = function updateMetadataLocally(_ref9) {
+  var tabAssets = _ref9.tabAssets,
+    changedField = _ref9.changedField,
+    activeMetadataValue = _ref9.activeMetadataValue;
+  return tabAssets.map(function (file) {
+    return getUpdateSingleFileMetadata({
+      file: file,
+      changedField: changedField,
+      activeMetadataValue: activeMetadataValue
+    });
+  });
+};
+var prepareTextChanges = function prepareTextChanges(textFieldDetails, fieldType) {
+  var _ref10 = textFieldDetails || {},
+    _ref10$value = _ref10.value,
+    value = _ref10$value === void 0 ? {} : _ref10$value;
+  var changes = {};
+  var hasValue = !!Object.keys(value || {}).length;
+  if (hasValue) changes[fieldType] = value;
+  return changes;
+};
+var getLanguageRegionalFilterUuid = function getLanguageRegionalFilterUuid(metaRegionalGroups) {
+  var _metaRegionalGroups$f;
+  return (_metaRegionalGroups$f = metaRegionalGroups.find(function (_ref11) {
+    var type = _ref11.type;
+    return type === REGIONAL_VARIANT_TYPE.LANGUAGES;
+  })) === null || _metaRegionalGroups$f === void 0 ? void 0 : _metaRegionalGroups$f.uuid;
+};
+var tagFilterFn = function tagFilterFn(tag, searchTerm, excludedTags) {
+  return new RegExp(trimmedLowerCase(searchTerm).replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'i').test(trimmedLowerCase(tag.label)) && !excludedTags.some(function (_ref12) {
+    var label = _ref12.label;
+    return label === tag.label;
+  });
+};
+var adaptFileTags = function adaptFileTags() {
+  var fileTags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var currentLanguage = arguments.length > 1 ? arguments[1] : undefined;
+  return fileTags.map(function (assetTag) {
+    return _objectSpread(_objectSpread({}, assetTag), {}, {
+      names: _defineProperty({}, currentLanguage, assetTag.label)
+    });
+  });
+};
+var isFileMetaChanged = function isFileMetaChanged(valueToSubmit, fileMetadata) {
+  return valueToSubmit !== undefined && valueToSubmit !== fileMetadata || Array.isArray(valueToSubmit) && Array.isArray(fileMetadata) && JSON.stringify(valueToSubmit) !== JSON.stringify(fileMetadata);
+};
+var updateTextMetaBeforeSave = function updateTextMetaBeforeSave(_ref13) {
+  var _textFieldsDetails$fi;
+  var fieldType = _ref13.fieldType,
+    languages = _ref13.languages,
+    textFieldsDetails = _ref13.textFieldsDetails;
+  var generatedValue = typeof ((_textFieldsDetails$fi = textFieldsDetails[fieldType]) === null || _textFieldsDetails$fi === void 0 ? void 0 : _textFieldsDetails$fi.value) === 'string' ? textFieldsDetails[fieldType].value : languages.reduce(function (acc, curr) {
+    var _textFieldsDetails$fi2, _textFieldsDetails$fi3;
+    if ((_textFieldsDetails$fi2 = textFieldsDetails[fieldType]) !== null && _textFieldsDetails$fi2 !== void 0 && (_textFieldsDetails$fi3 = _textFieldsDetails$fi2.value) !== null && _textFieldsDetails$fi3 !== void 0 && _textFieldsDetails$fi3[curr]) {
+      var _textFieldsDetails$fi4, _textFieldsDetails$fi5;
+      acc[curr] = (_textFieldsDetails$fi4 = textFieldsDetails[fieldType]) === null || _textFieldsDetails$fi4 === void 0 ? void 0 : (_textFieldsDetails$fi5 = _textFieldsDetails$fi4.value) === null || _textFieldsDetails$fi5 === void 0 ? void 0 : _textFieldsDetails$fi5[curr];
+    }
+    return acc;
+  }, {});
+  return _defineProperty({}, fieldType, generatedValue);
+};
+var adaptTextBeforeSave = function adaptTextBeforeSave() {
+  var changes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var fieldType = arguments.length > 1 ? arguments[1] : undefined;
+  var value = changes.value;
+  var adaptedChanges = [];
+  if (typeof value === 'string') {
+    return [_defineProperty(_defineProperty({}, TEXT_PROPERTIES.FIELD_TYPE, fieldType), TEXT_PROPERTIES.VALUE, value)];
+  }
+  Object.keys(value || {}).forEach(function (lang) {
+    adaptedChanges.push(_defineProperty(_defineProperty(_defineProperty({}, TEXT_PROPERTIES.FIELD_TYPE, fieldType), TEXT_PROPERTIES.VARIANT, lang), TEXT_PROPERTIES.VALUE, value[lang]));
+  });
+  return adaptedChanges;
+};
+var splitTagsToAdaptedAndSuggested = function splitTagsToAdaptedAndSuggested(tags, currentLanguage, tagFilterFn, debouncedSearchValue, excludedTags) {
+  return tags.reduce(function (allTags, tag) {
+    var _tag$names;
+    var currentTag = {
+      sid: tag.sid,
+      label: (_tag$names = tag.names) === null || _tag$names === void 0 ? void 0 : _tag$names[currentLanguage],
+      suggested: tag.primary
+    };
+    if (!currentTag.label) {
+      return allTags;
+    }
+    if (tagFilterFn(currentTag, debouncedSearchValue, excludedTags)) {
+      allTags.adaptedAllTags.push(currentTag);
+      if (currentTag.suggested) {
+        allTags.suggestedTags.push(currentTag);
+      }
+    }
+    return allTags;
+  }, {
+    adaptedAllTags: [],
+    suggestedTags: []
+  });
+};
+export { generateTabI18nKey, adaptMetadataChangesBeforeSave, adaptTagsChangesBeforeSave, updateTagsLocally, updateMetadataLocally, getLanguageRegionalFilterUuid, tagFilterFn, adaptFileTags, adaptMetadataBeforeSaveLocally, getUpdateSingleFileMetadata, isFileMetaChanged, updateTextMetaBeforeSave, adaptTextBeforeSave, checkFormValidation, prepareTextChanges, splitTagsToAdaptedAndSuggested };

package/lib/components/BulkEditPanel/index.js

@@ -0,0 +1,28 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { SlideTransition } from '@scaleflex/widget-common';
+import { bulkEditPanelOpened, selectShowBulkEditPanelFor } from '../../slices/panels.slice';
+import BulkEdit from './BulkEdit';
+import { jsx as _jsx } from "react/jsx-runtime";
+var transitionStyle = {
+  width: '100%',
+  height: '100%',
+  maxHeight: 'unset',
+  maxWidth: 'unset'
+};
+var BulkEditPanel = function BulkEditPanel(_ref) {
+  var zIndex = _ref.zIndex;
+  var dispatch = useDispatch();
+  var showBulkEditPanelFor = useSelector(selectShowBulkEditPanelFor);
+  var closeBulkEditPanel = function closeBulkEditPanel() {
+    return dispatch(bulkEditPanelOpened(null));
+  };
+  return /*#__PURE__*/_jsx(SlideTransition, {
+    transitionStyle: transitionStyle,
+    zIndex: zIndex,
+    handleClose: closeBulkEditPanel,
+    children: showBulkEditPanelFor && /*#__PURE__*/_jsx(BulkEdit, {
+      assetsIdsOrUuids: showBulkEditPanelFor
+    })
+  });
+};
+export default BulkEditPanel;

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;