@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/CropPanel/index.js

@@ -0,0 +1,22 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { SlideTransition } from '@scaleflex/widget-common';
+import { selectCropPanelFile, cropPanelFileSet } from '../../slices/panels.slice';
+import CropPanelContent from './CropPanelContent';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CropPanel = function CropPanel(_ref) {
+  var zIndex = _ref.zIndex;
+  var dispatch = useDispatch();
+  // uses crop panel for specific state, for future supporting files for crop, and others for download (in-case it's needed)
+  var cropPanelFile = useSelector(selectCropPanelFile);
+  var closeCropPanel = function closeCropPanel() {
+    return dispatch(cropPanelFileSet(null));
+  };
+  return /*#__PURE__*/_jsx(SlideTransition, {
+    zIndex: zIndex,
+    handleClose: closeCropPanel,
+    children: cropPanelFile && /*#__PURE__*/_jsx(CropPanelContent, {
+      imageFile: cropPanelFile
+    })
+  });
+};
+export default CropPanel;

package/lib/components/Details/Details.constants.js

@@ -0,0 +1,76 @@
+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 _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 { CommentOutline, MoreDetails } from '@scaleflex/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DETAILS_VARIANTS = {
+  NO_ITEMS: 'no_items',
+  MULTI_ITEMS: 'multiple_items',
+  LABEL: 'label',
+  FILE: 'file',
+  FOLDER: 'folder',
+  PRODUCT: 'product',
+  COLLECTION: 'collection',
+  NO_ITEM_SELECTED: 'no_item_selected',
+  FAVORITES: 'favorites',
+  NO_ITEM_SELECTED_IN_FOLDERS: 'no_item_selected_folders'
+};
+var DETAILS_VIEW_TABS_IDS = {
+  DETAILS: 'SIDE_VIEW_DETAILS',
+  COMMENTS: 'SIDE_VIEW_COMMENTS'
+};
+var DETAILS_VIEW_TABS_OBJECTS = {
+  DETAILS: {
+    i18nStr: 'mutualizedDetailsTabLabel',
+    icon: function icon(color) {
+      return /*#__PURE__*/_jsx(MoreDetails, {
+        size: 16,
+        color: color
+      });
+    }
+  },
+  COMMENTS: {
+    i18nStr: 'mutualizedCommentsTabLabel',
+    icon: function icon(color) {
+      return /*#__PURE__*/_jsx(CommentOutline, {
+        size: 16,
+        color: color
+      });
+    }
+  }
+};
+var PRODUCT_OPTION_TAB = [{
+  id: DETAILS_VIEW_TABS_IDS.DETAILS,
+  i18nStr: DETAILS_VIEW_TABS_OBJECTS.DETAILS.i18nStr,
+  icon: function icon(color) {
+    return DETAILS_VIEW_TABS_OBJECTS.DETAILS.icon(color);
+  }
+}];
+var DETAILS_SIDEBAR_TAB_IDS = {
+  GENERAL: 'general',
+  CUSTOM_METADATA: 'custom-metadata'
+};
+var DETAILS_SIDEBAR_TAB = _defineProperty(_defineProperty({}, DETAILS_SIDEBAR_TAB_IDS.GENERAL, {
+  id: DETAILS_SIDEBAR_TAB_IDS.GENERAL,
+  i18nKey: 'explorerDetailsSidebarGeneralTabLabel'
+}), DETAILS_SIDEBAR_TAB_IDS.CUSTOM_METADATA, {
+  id: DETAILS_SIDEBAR_TAB_IDS.CUSTOM_METADATA,
+  i18nKey: 'explorerDetailsSidebarCustomMetaTabLabel',
+  disabled: function disabled(_ref) {
+    var isM0LegacyMeta = _ref.isM0LegacyMeta;
+    return isM0LegacyMeta;
+  },
+  hide: function hide() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      hideMetadataTab = _ref2.hideMetadataTab;
+    return hideMetadataTab;
+  }
+});
+var DETAILS_SIDEBAR_TABS = [DETAILS_SIDEBAR_TAB[DETAILS_SIDEBAR_TAB_IDS.GENERAL], DETAILS_SIDEBAR_TAB[DETAILS_SIDEBAR_TAB_IDS.CUSTOM_METADATA]];
+var DETAILS_SIDEBAR_WIDTHS = {
+  minWidth: 360,
+  defaultWidth: 420,
+  maxWidth: 500
+};
+export { DETAILS_VARIANTS, PRODUCT_OPTION_TAB, DETAILS_SIDEBAR_TAB_IDS, DETAILS_SIDEBAR_TAB, DETAILS_SIDEBAR_TABS, DETAILS_SIDEBAR_WIDTHS };

package/lib/components/Details/Details.utils.js

@@ -0,0 +1,232 @@
+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 _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); }
+import { convertToLocaleNumber } from '@scaleflex/widget-utils/lib/formatNumbers';
+import humanReadableDateWithTranslations from '@scaleflex/widget-utils/lib/humanReadableDateWithTranslations';
+import formatDuration from '@scaleflex/widget-utils/lib/formatDuration';
+import formatSeconds from '@scaleflex/widget-utils/lib/formatSeconds';
+import formatResolution from '@scaleflex/widget-utils/lib/formatResolution';
+import { getActualVisibility, getVisibilityI18nLabel } from '@scaleflex/widget-utils/lib/visibility';
+import prettierBytes from '@transloadit/prettier-bytes';
+import { DETAILS_SIDEBAR_TAB_IDS, DETAILS_VARIANTS } from './Details.constants';
+import MultiItemsDetails from './MultiItemsDetails';
+import FolderDetails from './FolderDetails';
+import { DetailsSidebarFileGeneralTab, DetailsSidebarFileCustomMetadataTab } from './FileItem';
+import DetailsSidebarSharedFileEditData from './FileItem/SharedFileEditData';
+import TrimmedFolderPathWithLocate from '../common/TrimmedFolderPathWithLocate';
+import TextWithCopyIcon from '../common/TextWithCopyIcon';
+// import DetailsSidebarFileMetadata from '../FileItem'
+
+var getDetailsType = function getDetailsType(_ref) {
+  var showCurrentFolderIfNoneSelected = _ref.showCurrentFolderIfNoneSelected,
+    selectedFolders = _ref.selectedFolders,
+    selectedFiles = _ref.selectedFiles;
+  var selectedFoldersLength = selectedFolders.length;
+  var selectedFilesLength = selectedFiles.length;
+  var isNoItemSelected = selectedFoldersLength === 0 && selectedFilesLength === 0;
+  var isMultipleItemsSelected = !isNoItemSelected && selectedFoldersLength + selectedFilesLength > 1;
+  if (isNoItemSelected && showCurrentFolderIfNoneSelected || !isMultipleItemsSelected && selectedFoldersLength === 1) {
+    return DETAILS_VARIANTS.FOLDER;
+  }
+  if (isNoItemSelected || isMultipleItemsSelected) {
+    return DETAILS_VARIANTS.MULTI_ITEMS;
+  }
+  return DETAILS_VARIANTS.FILE;
+};
+var generateFolderDetails = function generateFolderDetails(_ref2) {
+  var _ref2$folder = _ref2.folder,
+    folder = _ref2$folder === void 0 ? {} : _ref2$folder,
+    numberFormatLocale = _ref2.numberFormatLocale,
+    i18n = _ref2.i18n,
+    findAssetLocationEnabled = _ref2.findAssetLocationEnabled;
+  var _folder$size = folder.size,
+    size = _folder$size === void 0 ? {} : _folder$size,
+    _folder$count = folder.count,
+    _folder$count2 = _folder$count === void 0 ? {} : _folder$count,
+    directFiles = _folder$count2.files_direct,
+    recursiveFiles = _folder$count2.files_recursive,
+    createdAt = folder.created_at,
+    modifiedAt = folder.updated_at,
+    visibility = folder.visibility,
+    location = folder.path,
+    owner = folder.owner,
+    uuid = folder.uuid;
+  var createdBy = owner === null || owner === void 0 ? void 0 : owner.name;
+  var subFiles = recursiveFiles - directFiles;
+  var actualVisibility = getActualVisibility(visibility);
+  var totalRecursivePretty = size.total_recursive_pretty,
+    totalRecursiveBytes = size.total_recursive_bytes;
+  return [{
+    i18nKey: 'mutualizedTypeLabel',
+    value: 'mutualizedFolderLabel',
+    translatableValue: true
+  }, {
+    i18nKey: 'mutualizedSizeKey',
+    value: convertToLocaleNumber(totalRecursivePretty || totalRecursiveBytes, numberFormatLocale)
+  }, {
+    i18nKey: 'explorerDetailSideBarLocation',
+    value: location,
+    Component: TrimmedFolderPathWithLocate({
+      path: location
+    }),
+    hidden: !findAssetLocationEnabled
+  }, {
+    i18nKey: 'detailSideBarDirectAssetsLabel',
+    value: convertToLocaleNumber(directFiles, numberFormatLocale)
+  }, {
+    i18nKey: 'detailSideBarSubAssetsLabel',
+    value: convertToLocaleNumber(subFiles, numberFormatLocale)
+  }, {
+    i18nKey: 'detailSideBarTotalAssetsLabel',
+    value: convertToLocaleNumber(recursiveFiles, numberFormatLocale)
+  }, {
+    i18nKey: 'mutualizedVisibilityLabel',
+    value: getVisibilityI18nLabel(actualVisibility || visibility),
+    translatableValue: true
+  }, {
+    i18nKey: 'mutualizedCreatedAtText',
+    value: humanReadableDateWithTranslations(createdAt, i18n),
+    createdAt: true,
+    showTooltip: true
+  }, {
+    i18nKey: 'mutualizedCreatedByText',
+    createdBy: true,
+    value: createdBy || null
+  }, {
+    i18nKey: 'mutualizedModifiedAtText',
+    value: humanReadableDateWithTranslations(modifiedAt, i18n),
+    showTooltip: true
+  }, {
+    i18nKey: 'explorerGeneralFileDetailsUuidLabel',
+    value: uuid,
+    Component: TextWithCopyIcon({
+      value: uuid
+    }),
+    labelIconTooltip: i18n('explorerGeneralFileDetailsUuidHint')
+  }].filter(function (_ref3) {
+    var value = _ref3.value,
+      hidden = _ref3.hidden;
+    return !hidden && (typeof value === 'number' || value && _typeof(value) !== 'object');
+  });
+};
+var generateFileDetails = function generateFileDetails(_ref4) {
+  var file = _ref4.file,
+    numberFormatLocale = _ref4.numberFormatLocale,
+    i18n = _ref4.i18n;
+  var videoDuration = file.videoDuration,
+    transcodingProgress = file.transcodingProgress,
+    type = file.type,
+    pretty = file.size.pretty,
+    createdAt = file.created_at,
+    _file$info = file.info,
+    imageWidth = _file$info.img_w,
+    imageHeight = _file$info.img_h,
+    videoWidth = _file$info.video_w,
+    videoHeight = _file$info.video_h,
+    sport = _file$info.sport,
+    visibility = file.visibility;
+  var width = imageWidth || videoWidth;
+  var height = imageHeight || videoHeight;
+  var ratio = width && height ? (width / height).toPrecision(3) : 0;
+  var resolution = width && height ? width + '×' + height : null;
+  var actualVisibility = getActualVisibility(visibility);
+  return [{
+    i18nKey: 'mutualizedTypeLabel',
+    value: type
+  }, {
+    i18nKey: 'mutualizedSizeKey',
+    value: convertToLocaleNumber(pretty, numberFormatLocale)
+  }, {
+    i18nKey: 'mutualizedCreatedText',
+    value: humanReadableDateWithTranslations(createdAt, i18n),
+    showFileTooltip: true,
+    created_at: createdAt
+  }, {
+    i18nKey: 'mutualizedResolutionLabel',
+    value: resolution && formatResolution(convertToLocaleNumber(resolution, numberFormatLocale), '×', '×', true)
+  }, {
+    i18nKey: 'itemsCardRatioTitle',
+    value: convertToLocaleNumber(ratio, numberFormatLocale)
+  }, {
+    i18nKey: 'mutualizedDurationLabel',
+    value: videoDuration && "".concat(formatDuration(formatSeconds(videoDuration), i18n))
+  }, {
+    i18nKey: 'mutualizedTranscoded',
+    value: transcodingProgress
+  }, {
+    i18nKey: 'mutualizedVisibilityLabel',
+    value: getVisibilityI18nLabel(actualVisibility),
+    translatableValue: true
+  }, {
+    i18nKey: 'mutualizedSportLabel',
+    value: sport
+  }].filter(function (_ref5) {
+    var value = _ref5.value;
+    return value && _typeof(value) !== 'object';
+  });
+};
+var generateMultiItemsDetails = function generateMultiItemsDetails(_ref6) {
+  var totalSizeBytes = _ref6.totalSizeBytes,
+    totalFilesCount = _ref6.totalFilesCount,
+    directFilesCount = _ref6.directFilesCount,
+    subFilesCount = _ref6.subFilesCount,
+    selectedFoldersCount = _ref6.selectedFoldersCount,
+    numberFormatLocale = _ref6.numberFormatLocale,
+    visibility = _ref6.visibility,
+    selectedFilesCount = _ref6.selectedFilesCount;
+  return [{
+    i18nKey: 'mutualizedSizeKey',
+    value: convertToLocaleNumber(prettierBytes(totalSizeBytes), numberFormatLocale)
+  }, {
+    i18nKey: 'explorerDetailSideBarFoldersSelectedLabel',
+    value: convertToLocaleNumber(selectedFoldersCount, numberFormatLocale)
+  }, {
+    i18nKey: 'detailSideBarSubAssetsLabel',
+    value: convertToLocaleNumber(subFilesCount, numberFormatLocale)
+  }, {
+    i18nKey: 'explorerDetailSideBarAssetsSelectedLabel',
+    value: convertToLocaleNumber(selectedFilesCount, numberFormatLocale)
+  }, {
+    i18nKey: 'detailSideBarTotalAssetsLabel',
+    value: convertToLocaleNumber(totalFilesCount, numberFormatLocale)
+  }, {
+    i18nKey: 'mutualizedVisibilityLabel',
+    value: visibility || 'detailSideBarVisibilityMixedLabel',
+    translatableValue: true
+  }].filter(function (_ref7) {
+    var value = _ref7.value;
+    return value && _typeof(value) !== 'object';
+  });
+};
+var prepareHeader = function prepareHeader(_ref8) {
+  var selectedFoldersCount = _ref8.selectedFoldersCount,
+    selectedFilesCount = _ref8.selectedFilesCount,
+    i18n = _ref8.i18n,
+    toLocaleNumber = _ref8.toLocaleNumber,
+    itemName = _ref8.itemName;
+  if (itemName) {
+    return itemName;
+  }
+  var showComma = selectedFoldersCount > 0 && selectedFilesCount > 0;
+  var folderHeaderText = '';
+  var fileHeaderText = '';
+  var assetHeaderText = '';
+  var selectedText = '';
+  if (selectedFoldersCount) {
+    folderHeaderText = "".concat(toLocaleNumber(selectedFoldersCount), " ").concat(i18n('mutualizedFoldersLabel')).toLocaleLowerCase();
+  }
+  if (selectedFilesCount) {
+    fileHeaderText = "".concat(toLocaleNumber(selectedFilesCount), " ").concat(i18n('mutualizedFilesLabel')).toLocaleLowerCase();
+  }
+  if (!selectedFilesCount && !selectedFoldersCount) {
+    assetHeaderText = i18n('mutualizedPreviewLabel');
+  }
+  if (selectedFilesCount || selectedFilesCount) selectedText = i18n('mutualizedSelectedLabel');
+  return "".concat(folderHeaderText).concat(showComma ? ', ' : '').concat(fileHeaderText).concat(assetHeaderText, " ").concat(selectedText);
+};
+var detailsVariantToComponents = _defineProperty(_defineProperty(_defineProperty({}, DETAILS_VARIANTS.MULTI_ITEMS, _defineProperty({}, DETAILS_SIDEBAR_TAB_IDS.GENERAL, MultiItemsDetails)), DETAILS_VARIANTS.FILE, _defineProperty(_defineProperty({
+  // A higher order component that wraps the common/mutual data needed between both tabs for the same variant/file-type.
+  SharedDataComponent: DetailsSidebarSharedFileEditData
+}, DETAILS_SIDEBAR_TAB_IDS.GENERAL, DetailsSidebarFileGeneralTab), DETAILS_SIDEBAR_TAB_IDS.CUSTOM_METADATA, DetailsSidebarFileCustomMetadataTab)), DETAILS_VARIANTS.FOLDER, _defineProperty({}, DETAILS_SIDEBAR_TAB_IDS.GENERAL, FolderDetails));
+export { getDetailsType, generateFolderDetails, generateFileDetails, generateMultiItemsDetails, prepareHeader, detailsVariantToComponents };

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

@@ -0,0 +1,139 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+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';
+import styled, { css } from 'styled-components';
+import { Home, InfoOutline } from '@scaleflex/icons';
+import { Input as SfxInput, Skeleton, Tabs as SfxTabs, Tab as SfxTab } from '@scaleflex/ui/core';
+var SideDetailsNavWrapper = styled.ul(function (_ref) {
+  var palette = _ref.theme.palette;
+  return "\n    font-size: 12px;\n    margin: 0;\n    padding: 0;\n    > li {\n        display: flex;\n        list-style: none;\n        padding: 6px 0px;\n        gap: 12px;\n        align-items: baseline;\n\n        > div:nth-of-type(1) {\n            display: flex;\n            font-weight: 400;\n            min-width: 76px;\n            color: ".concat(palette[PC.TextSecondary], ";\n\n            > span {\n                text-overflow: ellipsis;\n                white-space: nowrap;\n                overflow: hidden;\n                line-height: 14px;\n                color: ").concat(palette[PC.TextSecondary], ";\n            }\n\n        }\n\n        > div:nth-of-type(2) {\n            color: ").concat(palette[PC.TextPrimary], ";\n            font-size: 14px;\n            line-height: 20px;\n            text-overflow: ellipsis;\n        }\n    }\n");
+});
+var SideDetailsTagsWrapper = styled.div(function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return "\n    border-top: 1px solid ".concat(palette[PC.BordersSecondary], ";\n    margin-top: 16px;\n    padding-top: 16px;\n    display: flex;\n    flex-direction: column;\n    font-size: 12px;\n    color: ").concat(palette[PC.TextSecondary], ";\n\n    > label {\n        padding-bottom: 8px;\n    }\n");
+});
+var SideDetailsTagsList = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  list-style: none;\n  gap: 8px;\n"])));
+var SideDetailsTitle = styled.p(function (_ref3) {
+  var _ref3$theme = _ref3.theme,
+    palette = _ref3$theme.palette,
+    font = _ref3$theme.typography.font;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n    margin: 0;\n    max-width: 80%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex-shrink: 0;\n    ", "\n"])), palette[PC.BackgroundStateless], palette[PC.BackgroundStateless], palette[PC.TextPrimary], font[FV.TitleH4]);
+});
+var FolderSectionIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  pointer-events: none;\n    position: relative;\n\n  > svg path {\n    fill: ", ";\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.BackgroundActive];
+});
+var HomeIcon = styled(Home)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 50%;\n  top: 20%;\n"])));
+var AssetsIcon = styled.div(function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return "\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  gap: 10px;\n  padding-bottom: 75%;\n  border: 1px solid ".concat(palette[PC.BordersItem], ";\n  background: ").concat(palette[PC.BackgroundHover], ";\n  border-radius: 4px;\n\n  > * {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    margin-top: -60px;\n    margin-left: -60px;\n  }\n\n  > svg {\n    color: ").concat(palette[PC.BorderPrimaryStateless], ";\n  }\n");
+});
+var FolderInnerIcon = styled.div(function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return "\n    position: absolute;\n    top: 26px;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    color: ".concat(palette[PC.TextPlaceholder], ";\n\n    > label {\n      font-size: 14px;\n      line-height: 20px;\n      padding-top: 8px;\n    }\n\n    > svg {\n      color: ").concat(palette[PC.BorderPrimaryStateless], ";\n    }\n  ");
+});
+var AssetsPreview = styled.div(function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return "\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    label {\n      line-height: 16px;\n      color: ".concat(palette[PC.TextSecondary], ";\n      padding-top: 16px;\n    }\n    svg {\n      width: 150px;\n      height: 60px;\n    }\n  ");
+});
+var DetailsWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var DetailsHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin: 32px 24px 0;\n"])));
+var ClickableText = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n  cursor: pointer;\n  ", ";\n"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.palette[PC.AccentStateless];
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.typography.font[FV.ButtonSm];
+}, function (_ref10) {
+  var typography = _ref10.theme.typography;
+  return typography.font[FV.LinkMedium];
+});
+var DetailsSkeleton = styled(Skeleton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n  border-radius: 4px;\n  width: 80%;\n\n  &:nth-child(even) {\n    width: 70%\n  }\n"])));
+var LabelsContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+var LabelValue = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 4px;\n"])));
+var SideDetailsScrollableBody = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow: unset;\n  height: 400px;\n  margin-top: 12px;\n"])));
+var Tabs = styled(SfxTabs)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  align-items: center;\n  border-bottom: 1px solid ", ";\n\n  .SfxTab-root {\n    height: 100%;\n  }\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.palette[PC.BordersItem];
+});
+var Tab = styled(SfxTab)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  justify-content: center;\n  ", ";\n\n  &.active {\n    /*\n    * Overriding the box-shadow of sfx/ui cause it shows a shadow on the right side, fixing that by increasing 1 px the y and subtract the spread by that added 1 px\n    * So that the negative of added px spread will reduce the added pixels from the y side and also the other sides (that eliminates the right side too.)\n    */\n    box-shadow: inset 0px -3px 0px -1px ", ";\n  }\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.typography.font[FV.LabelMedium];
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.palette[PC.AccentStateless];
+});
+var TabPanel = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  flex-grow: 1;\n  height: 100%;\n  padding: 12px 12px 24px 24px;\n  margin-right: 2px; // for showing the whole scrollbar without issues.\n"])));
+var FolderItem = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.palette[PC.TextPrimary];
+});
+var ValueWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  margin-top: 16px;\n  ", "\n  ", ";\n"])), function (_ref15) {
+  var _ref15$marginRight = _ref15.marginRight,
+    marginRight = _ref15$marginRight === void 0 ? 0 : _ref15$marginRight;
+  return marginRight && "margin-right: ".concat(marginRight, ";");
+}, function (_ref16) {
+  var theme = _ref16.theme,
+    smallerFont = _ref16.smallerFont;
+  return theme.typography.font[smallerFont ? FV.TextMedium : FV.TextLarge];
+});
+var NameLabel = styled.label(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n  margin-right: 56px;\n  color: ", ";\n  ", ";\n"])), function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.palette[PC.IconsPrimary];
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.typography.font[FV.TextSmall];
+});
+var BtnAndValueWrapper = styled.div(function (_ref19) {
+  var palette = _ref19.theme.palette;
+  return "\n    border-top: 1px solid ".concat(palette[PC.BordersSecondary], ";\n    position: relative;\n    margin-top: 16px;\n    margin-bottom: 36px;\n  ");
+});
+var MultipleItem = styled.span(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.palette[PC.IconsPrimary];
+});
+var Input = styled(SfxInput)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  padding: 0 0 0 5px;\n  height: 30px;\n  flex-grow: 1;\n"])));
+var ItemLabelWrapper = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  width: 25%;\n"])));
+var ItemLabel = styled.span(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  white-space: wrap !important;\n"])));
+var FolderItemTitle = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  white-space: wrap !important;\n"])));
+var FolderItemTitleWrapper = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  width: 25%;\n\n  svg {\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref21) {
+  var theme = _ref21.theme;
+  return theme.palette[PC.IconsSecondaryHover];
+});
+var InfoOutlineIcon = styled(InfoOutline)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  color: ", ";\n"])), function (_ref22) {
+  var theme = _ref22.theme;
+  return theme.palette[PC.IconsSecondary];
+});
+var Styled = {
+  SideDetailsNavWrapper: SideDetailsNavWrapper,
+  SideDetailsTagsWrapper: SideDetailsTagsWrapper,
+  SideDetailsTagsList: SideDetailsTagsList,
+  SideDetailsTitle: SideDetailsTitle,
+  FolderSectionIcon: FolderSectionIcon,
+  HomeIcon: HomeIcon,
+  AssetsIcon: AssetsIcon,
+  FolderInnerIcon: FolderInnerIcon,
+  AssetsPreview: AssetsPreview,
+  DetailsWrapper: DetailsWrapper,
+  DetailsHeader: DetailsHeader,
+  ClickableText: ClickableText,
+  DetailsSkeleton: DetailsSkeleton,
+  LabelsContainer: LabelsContainer,
+  LabelValue: LabelValue,
+  SideDetailsScrollableBody: SideDetailsScrollableBody,
+  Tabs: Tabs,
+  Tab: Tab,
+  TabPanel: TabPanel,
+  FolderItem: FolderItem,
+  ValueWrapper: ValueWrapper,
+  NameLabel: NameLabel,
+  BtnAndValueWrapper: BtnAndValueWrapper,
+  MultipleItem: MultipleItem,
+  Input: Input,
+  ItemLabelWrapper: ItemLabelWrapper,
+  ItemLabel: ItemLabel,
+  FolderItemTitle: FolderItemTitle,
+  FolderItemTitleWrapper: FolderItemTitleWrapper,
+  InfoOutlineIcon: InfoOutlineIcon
+};
+export default Styled;

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

@@ -0,0 +1,27 @@
+var _templateObject, _templateObject2;
+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 ActionButtons = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 24px;\n  transform: translateY(100%);\n  width: 100%;\n  z-index: 100;\n  transition: transform 0.2s ease-in-out;\n  background: ", ";\n  border-top: 1px solid ", ";\n  box-shadow: ", ";\n  \n  ", "\n\n  .SfxButton-Label {\n    ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.BordersSecondary];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.shadows[PSH.FooterPopup];
+}, function (_ref4) {
+  var isEditing = _ref4.isEditing;
+  return isEditing && "\n    display: flex;\n    transform: translateY(0);\n  ";
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.typography.font[FV.ButtonLgEmphasis];
+});
+var ActionButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 32px;\n  width: 120px;\n  height: 40px;\n  flex-shrink: 1;\n"])));
+var Styled = {
+  ActionButtons: ActionButtons,
+  ActionButton: ActionButton
+};
+export default Styled;

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

@@ -0,0 +1,38 @@
+import { useExplorer } from '../../../hooks';
+import Styled from './EditActionButtons.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var EditActionButtons = function EditActionButtons(_ref) {
+  var isEditing = _ref.isEditing,
+    cancelEditing = _ref.cancelEditing,
+    isSaving = _ref.isSaving,
+    saveEditedDetails = _ref.saveEditedDetails,
+    isSaveDisabled = _ref.isSaveDisabled;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    useAssetsPicker = _useExplorer$opts2.useAssetsPicker;
+  if (useAssetsPicker) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Styled.ActionButtons, {
+    isEditing: isEditing,
+    children: [/*#__PURE__*/_jsx(Styled.ActionButton, {
+      size: "sm",
+      color: "basic",
+      onClick: function onClick() {
+        return cancelEditing();
+      },
+      disabled: isSaving,
+      children: i18n('mutualizedCancelButtonLabel')
+    }), /*#__PURE__*/_jsx(Styled.ActionButton, {
+      size: "sm",
+      color: "primary",
+      onClick: saveEditedDetails,
+      disabled: isSaveDisabled || isSaving,
+      loading: isSaving,
+      children: i18n('mutualizedSaveButton')
+    })]
+  });
+};
+export default EditActionButtons;

package/lib/components/Details/FileDetails.js

@@ -0,0 +1,31 @@
+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 { useExplorer } from '../../hooks';
+import { selectSelectedFiles } from '../../slices/selections.slice';
+import { generateFileDetails } from './Details.utils';
+import FileItem from './FileItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileDetails = function FileDetails() {
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    config = _useExplorer.opts.config;
+  var _useSelector = useSelector(selectSelectedFiles),
+    _useSelector2 = _slicedToArray(_useSelector, 1),
+    file = _useSelector2[0];
+  var numberFormatLocale = config.numberFormatLocale;
+  var fileDetails = generateFileDetails({
+    file: file,
+    numberFormatLocale: numberFormatLocale,
+    i18n: i18n
+  });
+  return /*#__PURE__*/_jsx(FileItem, {
+    file: file,
+    details: fileDetails
+  });
+};
+export default FileDetails;

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

@@ -0,0 +1,50 @@
+import { useExplorer } from '../../../hooks';
+import EditDetailsButton from '../../common/EditDetailsButton';
+import CustomMetadataSection from '../../FileWindowPanel/FileTabs/MetadataTab/CustomMetadataSection';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DetailsSidebarFileCustomMetadataTab = function DetailsSidebarFileCustomMetadataTab(_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,
+    scrollToMetaField = _ref.scrollToMetaField,
+    TabPanelWrapper = _ref.TabPanelWrapper,
+    renderNoValue = _ref.renderNoValue;
+  var _useExplorer = useExplorer(),
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    useAssetsPicker = _useExplorer$opts2.useAssetsPicker;
+  if (!file) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(TabPanelWrapper, {
+    children: [/*#__PURE__*/_jsx(CustomMetadataSection, {
+      i18n: i18n,
+      checkUserPermissions: checkUserPermissions,
+      file: file,
+      isEditing: isEditing,
+      updateEditedDetails: setDetails,
+      editedDetails: editedDetails,
+      setMetaErrors: setMetaErrors,
+      metaErrors: metaErrors,
+      isUserNotAllowedToEdit: isUserNotAllowedToEdit,
+      enableEditing: enableEditing,
+      scrollToMetaField: scrollToMetaField,
+      size: "sm",
+      dismissMarginTop: true,
+      tagsFieldMaxWidth: 300,
+      smallerFont: true
+    }), !isEditing && !useAssetsPicker && /*#__PURE__*/_jsx(EditDetailsButton, {
+      enableEditing: enableEditing,
+      isUserNotAllowedToEdit: isUserNotAllowedToEdit,
+      bottom: "calc(100% - 40px)"
+    })]
+  });
+};
+export default DetailsSidebarFileCustomMetadataTab;