@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/Details/FileItem/FileItem.styled.js

@@ -0,0 +1,47 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import { PC, PSH, FV } from '@scaleflex/widget-common';
+import { Button } from '@scaleflex/ui/core';
+var FilePreview = styled.div(function (_ref) {
+  var palette = _ref.theme.palette;
+  return "\n    position: relative;\n    flex-shrink: 0;\n\n    .filerobot-common-ItemIcon {\n      position: relative;\n      width: 100%;\n      padding-bottom: 75%;\n      border: 1px solid ".concat(palette[PC.BordersItem], ";\n      background: ").concat(palette[PC.BackgroundHover], ";\n      border-radius: 4px;\n      overflow: hidden;\n\n      .filerobot-common-ItemIcon-img {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n      }\n    }\n  ");
+});
+var EmptyValueWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.TextPlaceholder];
+});
+var ActionButtons = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: none;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 24px;\n  transform: translateY(100%);\n  transition: transform 0.2s ease-in-out;\n  background: ", ";\n  border-top: 1px solid ", ";\n  box-shadow: ", ";\n\n  ", "\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.BordersSecondary];
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.shadows[PSH.FooterPopup];
+}, function (_ref6) {
+  var isEditing = _ref6.isEditing;
+  return isEditing && "\n    display: flex;\n    transform: translateY(0);\n  ";
+});
+var ActionButton = styled(Button)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px 32px;\n  width: 120px;\n  height: 40px;\n  flex-shrink: 1;\n\n  .SfxButton-Label {\n    ", ";\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.typography.font[FV.ButtonLgEmphasis];
+});
+var ManageAssetButtonWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
+var ManageAssetButton = styled(Button)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.palette[PC.Extra_0_7_Overlay];
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.palette[PC.Extra_0_9_Overlay];
+});
+var Styled = {
+  FilePreview: FilePreview,
+  EmptyValueWrapper: EmptyValueWrapper,
+  ActionButtons: ActionButtons,
+  ActionButton: ActionButton,
+  ManageAssetButtonWrapper: ManageAssetButtonWrapper,
+  ManageAssetButton: ManageAssetButton
+};
+export default Styled;

package/lib/components/Details/FileItem/GeneralTab.js

@@ -0,0 +1,113 @@
+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 { useDispatch, useSelector } from 'react-redux';
+import { ImagePreview } from '@scaleflex/widget-common';
+import getFileExtension from '@scaleflex/widget-utils/lib/getFileExtension';
+import isTransparencySupported from '@scaleflex/widget-utils/lib/isTransparencySupported';
+import { Settings } from '@scaleflex/icons';
+import getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import Styled from './FileItem.styled';
+import { useExplorer } from '../../../hooks';
+import GeneralSection from '../../FileWindowPanel/FileTabs/GeneralTab/GeneralSection';
+import { fileWindowUpdated } from '../../../slices/panels.slice';
+import OriginalBadge from '../../common/OriginalBadge';
+import { selectIsSimilarSearchActive, selectSimilarSearchOriginalFile } from '../../../slices/search.slice';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DetailsSidebarFileGeneralTab = function DetailsSidebarFileGeneralTab(_ref) {
+  var enableEditing = _ref.enableEditing,
+    editedDetails = _ref.editedDetails,
+    isEditing = _ref.isEditing,
+    setDetails = _ref.setDetails,
+    metaErrors = _ref.metaErrors,
+    setMetaErrors = _ref.setMetaErrors,
+    isUserNotAllowedToEdit = _ref.isUserNotAllowedToEdit,
+    file = _ref.file,
+    checkUserPermissions = _ref.checkUserPermissions,
+    i18n = _ref.i18n,
+    renderNoValue = _ref.renderNoValue,
+    scrollToMetaField = _ref.scrollToMetaField,
+    TabPanelWrapper = _ref.TabPanelWrapper,
+    activeTabId = _ref.activeTabId;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    isDevEnv = _useExplorer.isDevEnv,
+    container = _useExplorer.container,
+    useAssetsPicker = _useExplorer.opts.useAssetsPicker;
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var similarSearchOriginalFile = useSelector(selectSimilarSearchOriginalFile);
+  if (!file) {
+    return null;
+  }
+  var extension = getFileExtension(file);
+  var isImageTransparencySupported = isTransparencySupported(file);
+  var itemIconString = getItemIcon({
+    fileOrFolder: file
+  });
+  var uuid = file.uuid,
+    _file$info = file.info,
+    _file$info2 = _file$info === void 0 ? {} : _file$info,
+    thumbnail = _file$info2.thumbnail,
+    preview = _file$info2.preview,
+    _file$size = file.size,
+    _file$size2 = _file$size === void 0 ? {} : _file$size,
+    bytes = _file$size2.bytes;
+  var openFileWindow = function openFileWindow() {
+    if (uuid) {
+      dispatch(fileWindowUpdated(uuid));
+    }
+  };
+  var renderImageOverlayContent = function renderImageOverlayContent() {
+    return /*#__PURE__*/_jsx(Styled.ManageAssetButtonWrapper, {
+      children: /*#__PURE__*/_jsx(Styled.ManageAssetButton, {
+        color: "primary",
+        onClick: openFileWindow,
+        startIcon: function startIcon(props) {
+          return /*#__PURE__*/_jsx(Settings, _objectSpread({}, props));
+        },
+        children: i18n('explorerDetailsSidebarFilePreviewManageLabel')
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(TabPanelWrapper, {
+    children: [/*#__PURE__*/_jsxs(Styled.FilePreview, {
+      children: [isSimilarSearchActive && similarSearchOriginalFile.uuid === uuid && /*#__PURE__*/_jsx(OriginalBadge, {
+        showOnTop: true
+      }), /*#__PURE__*/_jsx(ImagePreview, {
+        file: file,
+        containerClassName: "filerobot-Explorer-Details-imageContainer",
+        size: bytes,
+        srcUrl: itemIconString,
+        thumbnailUrl: thumbnail,
+        previewUrl: preview,
+        isFileDetailsPreview: true,
+        extension: extension,
+        isTransparencySupported: isImageTransparencySupported,
+        isDevEnv: isDevEnv,
+        container: container,
+        renderImageOverlayContent: !useAssetsPicker && renderImageOverlayContent
+      })]
+    }), /*#__PURE__*/_jsx(GeneralSection, {
+      checkUserPermissions: checkUserPermissions,
+      file: file,
+      isEditing: isEditing,
+      updateEditedDetails: setDetails,
+      editedDetails: editedDetails,
+      setMetaErrors: setMetaErrors,
+      metaErrors: metaErrors,
+      renderNoValue: renderNoValue,
+      isUserNotAllowedToEdit: isUserNotAllowedToEdit,
+      enableEditing: enableEditing,
+      scrollToMetaField: scrollToMetaField,
+      tagsFieldMaxWidth: 300,
+      activeTabId: activeTabId,
+      size: "sm",
+      smallerFont: true,
+      showEditButton: true
+    })]
+  });
+};
+export default DetailsSidebarFileGeneralTab;

package/lib/components/Details/FileItem/SharedFileEditData.js

@@ -0,0 +1,97 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 { useSelector } from 'react-redux';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { BackdropOverlay } from '@scaleflex/widget-common';
+import isPromise from '@scaleflex/widget-utils/lib/isPromise';
+import { useEditFileDetails, useExplorer } from '../../../hooks';
+import Styled from './FileItem.styled';
+import { selectSelectedFiles } from '../../../slices/selections.slice';
+import { DETAILS_SIDEBAR_TAB_IDS } from '../Details.constants';
+import EditActionButtons from '../EditActionButtons';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var DetailsSidebarSharedFileEditData = function DetailsSidebarSharedFileEditData(_ref) {
+  var renderTabPanels = _ref.renderTabPanels,
+    setActiveTabId = _ref.setActiveTabId,
+    activeTabId = _ref.activeTabId;
+  var _useSelector = useSelector(selectSelectedFiles),
+    _useSelector2 = _slicedToArray(_useSelector, 1),
+    file = _useSelector2[0];
+  var sharedData = useEditFileDetails({
+    file: file
+  });
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    checkUserPermissions = _useExplorer.checkUserPermissions;
+  var isEditing = sharedData.isEditing,
+    cancelEditing = sharedData.cancelEditing,
+    isSaving = sharedData.isSaving,
+    saveEditedDetails = sharedData.saveEditedDetails,
+    isSaveDisabled = sharedData.isSaveDisabled,
+    _scrollToMetaField = sharedData.scrollToMetaField,
+    _enableEditing = sharedData.enableEditing;
+  var openCustomMetadataTab = function openCustomMetadataTab() {
+    return setActiveTabId(DETAILS_SIDEBAR_TAB_IDS.CUSTOM_METADATA);
+  };
+  var scrollToMetaField = function scrollToMetaField(metaFieldKey) {
+    openCustomMetadataTab();
+    _scrollToMetaField(metaFieldKey);
+  };
+  var enableEditing = function enableEditing() {
+    _enableEditing({
+      forceUseFileWindow: false,
+      onMetaErrorConfirmed: openCustomMetadataTab,
+      forceUseSameTabConfirmationMsg: activeTabId === DETAILS_SIDEBAR_TAB_IDS.CUSTOM_METADATA
+    });
+  };
+  var cancelEditingFromOverlay = function cancelEditingFromOverlay(underlyingEventFn) {
+    var cancellationPromise = cancelEditing();
+    if (isPromise(cancellationPromise)) {
+      cancellationPromise.then(underlyingEventFn);
+    }
+  };
+  useUpdateEffect(function () {
+    cancelEditing(false, true);
+  }, [file.uuid]);
+  if (!file) {
+    return null;
+  }
+  var renderNoValue = function renderNoValue() {
+    return /*#__PURE__*/_jsx(Styled.EmptyValueWrapper, {
+      children: "\u2014"
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isEditing && /*#__PURE__*/_jsx(BackdropOverlay, {
+      zIndex: -1,
+      onClick: cancelEditingFromOverlay,
+      returnUnderlyingEventFn: true,
+      acceptScroll: true
+    }), renderTabPanels(_objectSpread(_objectSpread({}, sharedData), {}, {
+      scrollToMetaField: scrollToMetaField,
+      file: file,
+      i18n: i18n,
+      checkUserPermissions: checkUserPermissions,
+      renderNoValue: renderNoValue,
+      enableEditing: enableEditing,
+      activeTabId: activeTabId
+    })), /*#__PURE__*/_jsx(EditActionButtons, {
+      isEditing: isEditing,
+      cancelEditing: cancelEditing,
+      isSaving: isSaving,
+      isSaveDisabled: isSaveDisabled,
+      saveEditedDetails: saveEditedDetails
+    })]
+  });
+};
+export default DetailsSidebarSharedFileEditData;

package/lib/components/Details/FileItem/index.js

@@ -0,0 +1,2 @@
+export { default as DetailsSidebarFileGeneralTab } from './GeneralTab';
+export { default as DetailsSidebarFileCustomMetadataTab } from './CustomMetadataTab';

package/lib/components/Details/FolderDetails.js

@@ -0,0 +1,138 @@
+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, useMemo, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import { checkFileOrFolderNameValidation } from '@scaleflex/widget-utils/lib/checkFileOrFolderNameValidation';
+import { selectSelectedFolders } from '../../slices/selections.slice';
+import { generateFolderDetails } from './Details.utils';
+import { useExplorer } from '../../hooks';
+import FolderItemList from './FolderItemList';
+import { renameFolder, selectBaseFolderPath, selectCurrentFolder, selectIsFoldersLoading } from '../../slices/folders.slice';
+import Styled from './DetailsSideBar.styled';
+import CustomMetadataFieldValue from '../common/FileMetadataFieldValue/CustomMetadataFieldValue';
+import EditActionButtons from './EditActionButtons';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var DetailsSidebarFolderItem = function DetailsSidebarFolderItem(_ref) {
+  var TabPanelWrapper = _ref.TabPanelWrapper;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    info = _useExplorer.info,
+    opts = _useExplorer.opts,
+    checkUserPermissions = _useExplorer.checkUserPermissions;
+  var loading = useSelector(selectIsFoldersLoading);
+  var currentFolder = useSelector(selectCurrentFolder);
+  var rootFolderPath = useSelector(selectBaseFolderPath);
+  var _useSelector = useSelector(selectSelectedFolders),
+    _useSelector2 = _slicedToArray(_useSelector, 1),
+    _useSelector2$ = _useSelector2[0],
+    folder = _useSelector2$ === void 0 ? currentFolder : _useSelector2$;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var _useState3 = useState(folder === null || folder === void 0 ? void 0 : folder.name),
+    _useState4 = _slicedToArray(_useState3, 2),
+    newFolderName = _useState4[0],
+    setNewFolderName = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSaveDisabled = _useState6[0],
+    setIsSaveDisabled = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSaving = _useState8[0],
+    setIsSaving = _useState8[1];
+  var showEditButton = (folder === null || folder === void 0 ? void 0 : folder.path) !== rootFolderPath && !isEditing && (currentFolder === null || currentFolder === void 0 ? void 0 : currentFolder.uuid) !== (folder === null || folder === void 0 ? void 0 : folder.uuid);
+  var config = opts.config,
+    findAssetLocationEnabled = opts.findAssetLocationEnabled;
+  var numberFormatLocale = config.numberFormatLocale;
+  var folderDetails = generateFolderDetails({
+    folder: folder,
+    i18n: i18n,
+    numberFormatLocale: numberFormatLocale,
+    findAssetLocationEnabled: findAssetLocationEnabled
+  });
+  var isUserNotAllowedToEdit = useMemo(function () {
+    return !checkUserPermissions([PERMISSIONS.FOLDER_RENAME]);
+  }, [checkUserPermissions]);
+  var enableEditing = function enableEditing() {
+    setIsEditing(true);
+    setNewFolderName(folder === null || folder === void 0 ? void 0 : folder.name);
+    setIsSaveDisabled(true);
+  };
+  var saveEditedDetails = function saveEditedDetails() {
+    setIsSaving(true);
+    handlePromise(dispatch(renameFolder({
+      uuid: folder.uuid,
+      name: newFolderName
+    })), function () {
+      setIsEditing(false);
+      setIsSaving(false);
+    }, function () {
+      setIsSaving(false);
+    });
+  };
+  var cancelEditing = function cancelEditing() {
+    setIsEditing(false);
+  };
+  var handleInputChange = function handleInputChange(event) {
+    var newName = event.target.value;
+    setNewFolderName(event.target.value);
+    setIsSaveDisabled(newName === folder.name);
+    if (checkFileOrFolderNameValidation(newName)) {
+      setIsSaveDisabled(true);
+      info(i18n('mutualizedFolderInvalidNameError'));
+    } else if (newName === '') {
+      setIsSaveDisabled(true);
+      info(i18n('explorerInvalidNameInfo'));
+    }
+  };
+  useEffect(function () {
+    if (isEditing) {
+      cancelEditing();
+    }
+  }, [folder === null || folder === void 0 ? void 0 : folder.uuid]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(TabPanelWrapper, {
+      children: [/*#__PURE__*/_jsx(FolderItemList, {
+        folder: folder,
+        details: folderDetails,
+        showEditButton: showEditButton,
+        enableEditing: enableEditing,
+        isUserNotAllowedToEdit: isUserNotAllowedToEdit
+      }), !loading && /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(Styled.BtnAndValueWrapper, {
+          children: /*#__PURE__*/_jsxs(Styled.ValueWrapper, {
+            smallerFont: true,
+            children: [/*#__PURE__*/_jsx(Styled.NameLabel, {
+              children: i18n('mutualizedNameFieldLabel')
+            }), isEditing ? /*#__PURE__*/_jsx(Styled.Input, {
+              background: "primary",
+              onChange: handleInputChange,
+              size: "md",
+              value: newFolderName,
+              focusOnMount: true
+            }) : /*#__PURE__*/_jsx(CustomMetadataFieldValue, {
+              field: "name",
+              value: folder === null || folder === void 0 ? void 0 : folder.name
+            })]
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(EditActionButtons, {
+      isEditing: isEditing,
+      cancelEditing: cancelEditing,
+      isSaving: isSaving,
+      isSaveDisabled: isSaveDisabled,
+      saveEditedDetails: saveEditedDetails
+    })]
+  });
+};
+export default DetailsSidebarFolderItem;

package/lib/components/Details/FolderItemList/FolderListItem.js

@@ -0,0 +1,77 @@
+import { TooltipV2 } from '@scaleflex/ui/core';
+import dateStrToClearDateTime from '@scaleflex/widget-utils/lib/dateStrToClearDateTime';
+import { useExplorerI18n, useToLocaleNumber } from '../../../hooks';
+import { useSelector } from 'react-redux';
+import { selectIsFoldersLoading } from '../../../slices/folders.slice';
+import Styled from '../DetailsSideBar.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FolderListItem = function FolderListItem(_ref) {
+  var item = _ref.item,
+    folder = _ref.folder;
+  var i18n = useExplorerI18n();
+  var toLocaleNumber = useToLocaleNumber();
+  var loading = useSelector(selectIsFoldersLoading);
+  var i18nKey = item.i18nKey,
+    labelIconTooltip = item.labelIconTooltip;
+  var createdAt = folder.created_at,
+    modifiedAt = folder.updated_at;
+  if (loading) return /*#__PURE__*/_jsx(Styled.DetailsSkeleton, {});
+  var renderDetailsItem = function renderDetailsItem(_ref2) {
+    var value = _ref2.value,
+      showTooltip = _ref2.showTooltip,
+      translatableValue = _ref2.translatableValue,
+      Component = _ref2.Component,
+      createdBy = _ref2.createdBy;
+    if (Component) {
+      return Component;
+    }
+    if (showTooltip) {
+      return /*#__PURE__*/_jsx(TooltipV2, {
+        size: "md",
+        title: dateStrToClearDateTime({
+          dateStr: createdAt || modifiedAt
+        }),
+        children: /*#__PURE__*/_jsx(Styled.FolderItem, {
+          children: value
+        })
+      });
+    }
+    if (translatableValue) {
+      return /*#__PURE__*/_jsx(Styled.FolderItem, {
+        children: i18n(value)
+      });
+    }
+    if (createdBy) {
+      return /*#__PURE__*/_jsx(Styled.FolderItem, {
+        children: value
+      });
+    }
+    return /*#__PURE__*/_jsx(Styled.FolderItem, {
+      children: toLocaleNumber(value)
+    });
+  };
+  return /*#__PURE__*/_jsxs("li", {
+    children: [/*#__PURE__*/_jsxs(Styled.FolderItemTitleWrapper, {
+      children: [/*#__PURE__*/_jsx(TooltipV2, {
+        size: "md",
+        title: i18n(i18nKey),
+        children: /*#__PURE__*/_jsx(Styled.FolderItemTitle, {
+          children: i18n(i18nKey)
+        })
+      }), labelIconTooltip && /*#__PURE__*/_jsx(TooltipV2, {
+        position: "top",
+        size: "md",
+        title: labelIconTooltip,
+        arrow: true,
+        children: /*#__PURE__*/_jsx(Styled.InfoOutlineIcon, {
+          size: 12
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx("span", {
+        children: renderDetailsItem(item)
+      })
+    })]
+  });
+};
+export default FolderListItem;

package/lib/components/Details/FolderItemList/index.js

@@ -0,0 +1,62 @@
+import { Home, Assets } from '@scaleflex/icons';
+import { FolderIcon } from '@scaleflex/widget-icons/lib';
+import FolderCell from '../../AssetsList/GridView/FoldersSection/FolderCell';
+import Styled from '../DetailsSideBar.styled';
+import FolderListItem from './FolderListItem';
+import { useExplorerI18n } from '../../../hooks';
+import { useSelector } from 'react-redux';
+import { selectBaseFolderPath } from '../../../slices/folders.slice';
+import EditDetailsButton from '../../common/EditDetailsButton';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var FolderItemList = function FolderItemList(_ref) {
+  var folder = _ref.folder,
+    details = _ref.details,
+    showEditButton = _ref.showEditButton,
+    enableEditing = _ref.enableEditing,
+    isUserNotAllowedToEdit = _ref.isUserNotAllowedToEdit;
+  var i18n = useExplorerI18n();
+  var baseFolderPath = useSelector(selectBaseFolderPath);
+  var path = folder.path,
+    _folder$count = folder.count,
+    _folder$count2 = _folder$count === void 0 ? {} : _folder$count,
+    filesCount = _folder$count2.files_direct;
+  var isBaseFolder = path === baseFolderPath || !filesCount;
+  var renderAssetsSection = function renderAssetsSection() {
+    return !filesCount ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Assets, {
+        size: 40
+      }), /*#__PURE__*/_jsx("label", {
+        children: i18n('mutualizedNoAssetsLabel')
+      })]
+    }) : /*#__PURE__*/_jsx(Home, {
+      size: 40
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isBaseFolder ? /*#__PURE__*/_jsxs(Styled.FolderSectionIcon, {
+      children: [/*#__PURE__*/_jsx(FolderIcon, {}), /*#__PURE__*/_jsx(Styled.FolderInnerIcon, {
+        children: renderAssetsSection()
+      })]
+    }) : /*#__PURE__*/_jsx(Styled.FolderSectionIcon, {
+      children: /*#__PURE__*/_jsx(FolderCell, {
+        hideTopOptions: true,
+        folderUuid: folder.uuid,
+        DetailsView: true
+      })
+    }), /*#__PURE__*/_jsxs(Styled.SideDetailsScrollableBody, {
+      children: [/*#__PURE__*/_jsx(Styled.SideDetailsNavWrapper, {
+        children: details.map(function (item) {
+          return /*#__PURE__*/_jsx(FolderListItem, {
+            item: item,
+            folder: folder
+          }, item.i18nKey);
+        })
+      }), showEditButton && /*#__PURE__*/_jsx(EditDetailsButton, {
+        enableEditing: enableEditing,
+        isUserNotAllowedToEdit: isUserNotAllowedToEdit,
+        bottom: "90%"
+      })]
+    })]
+  });
+};
+export default FolderItemList;

package/lib/components/Details/MultiItemsDetails.js

@@ -0,0 +1,69 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { getActualVisibility, getVisibilityI18nLabel } from '@scaleflex/widget-utils/lib/visibility';
+import { selectAllSelectedItems, selectSelectedFiles, selectSelectedFolders } from '../../slices/selections.slice';
+import { generateMultiItemsDetails } from './Details.utils';
+import MultipleItems from './MultipleItems';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DetailsSidebarMultipleItems = function DetailsSidebarMultipleItems(_ref) {
+  var TabPanelWrapper = _ref.TabPanelWrapper;
+  var allSelectedItems = useSelector(selectAllSelectedItems);
+  var selectedFolders = useSelector(selectSelectedFolders);
+  var selectedFiles = useSelector(selectSelectedFiles);
+  var selectedFoldersCount = selectedFolders.length;
+  var selectedFilesCount = selectedFiles.length;
+  var visibility = useMemo(function () {
+    var _allSelectedItems$, _selectedItemsVisibil;
+    var selectedItemsVisibility = (_allSelectedItems$ = allSelectedItems[0]) === null || _allSelectedItems$ === void 0 ? void 0 : _allSelectedItems$.visibility;
+    var firstVisibility = selectedItemsVisibility === null || selectedItemsVisibility === void 0 ? void 0 : (_selectedItemsVisibil = selectedItemsVisibility.in_cdn) === null || _selectedItemsVisibil === void 0 ? void 0 : _selectedItemsVisibil.actual;
+    var isMixed = allSelectedItems.some(function (obj) {
+      return obj.visibility.in_cdn.actual !== firstVisibility;
+    });
+    var actualVisibility = getActualVisibility(selectedItemsVisibility);
+    return isMixed ? 'detailSideBarVisibilityMixedLabel' : getVisibilityI18nLabel(actualVisibility);
+  }, [allSelectedItems]);
+  var selectedFoldersDetails = selectedFolders.reduce(function (acc, _ref2) {
+    var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? {} : _ref2$size,
+      _ref2$count = _ref2.count,
+      count = _ref2$count === void 0 ? {} : _ref2$count;
+    var totalRecursiveBytes = size.total_recursive_bytes;
+    var filesDirect = count.files_direct,
+      filesRecursive = count.files_recursive;
+    acc.sizeBytes += totalRecursiveBytes;
+    acc.directFilesCount += filesDirect;
+    acc.subFilesCount += filesRecursive - filesDirect;
+    acc.totalFilesCount += filesRecursive;
+    return acc;
+  }, {
+    sizeBytes: 0,
+    directFilesCount: 0,
+    subFilesCount: 0,
+    totalFilesCount: 0
+  });
+  var selectedFilesDetails = selectedFiles.reduce(function (acc, _ref3) {
+    var size = _ref3.size;
+    var bytes = size.bytes;
+    acc.sizeBytes += bytes;
+    return acc;
+  }, {
+    sizeBytes: 0
+  });
+  var totalSizeBytes = selectedFoldersDetails.sizeBytes + selectedFilesDetails.sizeBytes;
+  var totalFilesCount = selectedFoldersDetails.totalFilesCount + selectedFilesCount;
+  var multiItemsDetails = generateMultiItemsDetails({
+    totalSizeBytes: totalSizeBytes,
+    totalFilesCount: totalFilesCount,
+    directFilesCount: selectedFoldersDetails.directFilesCount,
+    subFilesCount: selectedFoldersDetails.subFilesCount,
+    selectedFoldersCount: selectedFoldersCount,
+    selectedFilesCount: selectedFilesCount,
+    visibility: visibility
+  });
+  return /*#__PURE__*/_jsx(TabPanelWrapper, {
+    children: /*#__PURE__*/_jsx(MultipleItems, {
+      details: multiItemsDetails
+    })
+  });
+};
+export default DetailsSidebarMultipleItems;