@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/BulkEditPanel/components/MainContent/MainContent.js

@@ -0,0 +1,110 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RegionalVariantFilters } from '@scaleflex/widget-common';
+import { BULK_EDIT_GENERAL_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { metadataRegionalFiltersSet, selectMetadataRegionalFilters, selectMetadataRegionalGroups } from '../../../../slices/metadata.slice';
+import AssetsList from '../AssetsList/AssetsList';
+import generateActiveTab, { generateLastCellLabel } from '../Tabs/tabs';
+import Styled from './MainContent.styled';
+import { REGIONAL_VARIANT_TYPE } from '../../../metadata.adapter';
+import { useExplorerI18n } from '../../../../hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MainContent = function MainContent(_ref) {
+  var activeSidebarItem = _ref.activeSidebarItem,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups,
+    onRequestApply = _ref.onRequestApply,
+    assets = _ref.assets,
+    isOnUpload = _ref.isOnUpload,
+    changedMetadataFields = _ref.changedMetadataFields,
+    setChangedMetadataFields = _ref.setChangedMetadataFields,
+    tagsDetails = _ref.tagsDetails,
+    setTagsDetails = _ref.setTagsDetails,
+    metadataEmptyAssetsValues = _ref.metadataEmptyAssetsValues,
+    fetchedFiles = _ref.fetchedFiles,
+    setFetchedFiles = _ref.setFetchedFiles,
+    textFieldsDetails = _ref.textFieldsDetails,
+    setTextFieldsDetails = _ref.setTextFieldsDetails,
+    noImgTransformations = _ref.noImgTransformations;
+  var i18n = useExplorerI18n();
+  var dispatch = useDispatch();
+  var metaRegionalGroups = useSelector(selectMetadataRegionalGroups);
+  var metaRegionalFilters = useSelector(selectMetadataRegionalFilters);
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedAssets = _useState2[0],
+    setSelectedAssets = _useState2[1];
+  var generatedTab = generateActiveTab(activeSidebarItem);
+  var ActiveTab = generatedTab === null || generatedTab === void 0 ? void 0 : generatedTab.Component;
+  if (!ActiveTab) return null;
+  var _activeSidebarItem$na = activeSidebarItem.name,
+    name = _activeSidebarItem$na === void 0 ? '' : _activeSidebarItem$na,
+    _activeSidebarItem$uu = activeSidebarItem.uuid,
+    uuid = _activeSidebarItem$uu === void 0 ? '' : _activeSidebarItem$uu,
+    regionalVariantsGroupId = activeSidebarItem.regional_variants_group_uuid;
+  var tabId = "".concat(name).concat(uuid);
+  var tabSelectedAssets = selectedAssets[tabId] || [];
+  var lastCellLabel = generateLastCellLabel(generatedTab, activeSidebarItem);
+  var activeMetadataValue = metaRegionalFilters[regionalVariantsGroupId];
+  var activeMetadataGroup = metaRegionalGroups.filter(function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      uuid = _ref2.uuid,
+      type = _ref2.type,
+      isRoot = _ref2.isRoot;
+    return uuid === regionalVariantsGroupId || isRoot && type === REGIONAL_VARIANT_TYPE.LANGUAGES && Object.values(BULK_EDIT_GENERAL_IDS).includes(tabId);
+  });
+  var setMetaRegionalFilters = function setMetaRegionalFilters(newRegionalFilters) {
+    dispatch(metadataRegionalFiltersSet(newRegionalFilters));
+  };
+  return /*#__PURE__*/_jsx(Styled.ContentWrapper, {
+    children: /*#__PURE__*/_jsxs(Styled.MainContentWrapper, {
+      children: [!!activeMetadataGroup.length && /*#__PURE__*/_jsx(Styled.FiltersWrapper, {
+        children: /*#__PURE__*/_jsx(RegionalVariantFilters, {
+          i18n: i18n,
+          groups: activeMetadataGroup,
+          filters: metaRegionalFilters,
+          onChangeFilters: setMetaRegionalFilters
+        })
+      }), /*#__PURE__*/_jsx(ActiveTab, {
+        activeSidebarItem: activeSidebarItem,
+        activeMetadataValue: activeMetadataValue,
+        fileCustomMetadataGroups: fileCustomMetadataGroups,
+        changedMetadataFields: changedMetadataFields,
+        setChangedMetadataFields: setChangedMetadataFields,
+        tabSelectedAssets: tabSelectedAssets,
+        tagsDetails: tagsDetails,
+        assets: assets,
+        setTagsDetails: setTagsDetails,
+        isOnUpload: isOnUpload,
+        onRequestApply: onRequestApply,
+        textFieldsDetails: textFieldsDetails,
+        setTextFieldsDetails: setTextFieldsDetails
+      }), /*#__PURE__*/_jsx(AssetsList, {
+        tabId: tabId,
+        tabSelectedAssets: tabSelectedAssets,
+        activeMetadataValue: activeMetadataValue,
+        selectedAssets: selectedAssets,
+        activeSidebarItem: activeSidebarItem,
+        lastCellLabel: lastCellLabel,
+        changedMetadataFields: changedMetadataFields,
+        tagsDetails: tagsDetails,
+        assets: assets,
+        fileCustomMetadataGroups: fileCustomMetadataGroups,
+        isOnUpload: isOnUpload,
+        noImgTransformations: noImgTransformations,
+        metadataEmptyAssetsValues: metadataEmptyAssetsValues,
+        fetchedFiles: fetchedFiles,
+        setFetchedFiles: setFetchedFiles,
+        textFieldsDetails: textFieldsDetails,
+        setTextFieldsDetails: setTextFieldsDetails,
+        setSelectedAssets: setSelectedAssets
+      })]
+    })
+  });
+};
+export default MainContent;

package/lib/components/BulkEditPanel/components/MainContent/MainContent.styled.js

@@ -0,0 +1,12 @@
+var _templateObject, _templateObject2, _templateObject3;
+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';
+var ContentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  height: 100%;\n  flex: 1;\n  z-index: 100;\n  max-width: 100%;\n  overflow-x: auto;\n"])));
+var MainContentWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 24px;\n  display: flex;\n  flex-direction: column;\n  row-gap: 24px;\n"])));
+var FiltersWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: flex-end;\n"])));
+var Styled = {
+  ContentWrapper: ContentWrapper,
+  MainContentWrapper: MainContentWrapper,
+  FiltersWrapper: FiltersWrapper
+};
+export default Styled;

package/lib/components/BulkEditPanel/components/MainContent/index.js

@@ -0,0 +1,2 @@
+import MainContent from './MainContent';
+export default MainContent;

package/lib/components/BulkEditPanel/components/Sidebar/Sidebar.styled.js

@@ -0,0 +1,53 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC } from '@scaleflex/widget-common';
+import { Drawer as SfxDrawer, IconButton, EllipsedText } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+import { DrawerItemButton as SfxDrawerItemButton } from '@scaleflex/ui/core/drawer';
+var Drawer = styled(SfxDrawer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  transition: none;\n  transform: none;\n  box-shadow: 6px 0 12px rgba(146, 166, 188, 0.14);\n\n  .SfxDrawer-body {\n    .SfxDrawer-list {\n      padding: 24px;\n    }\n\n    .SfxDrawer-item-button {\n      padding: 11px 16px;\n      margin-bottom: 0;\n    }\n\n    &~.SfxDrawer-item-button {\n      display: none;\n    }\n  }\n\n  ", "\n"])), function (_ref) {
+  var breakpoints = _ref.theme.breakpoints;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      visibility: visible;\n    }\n\n    ", " & {\n      visibility: visible;\n    }\n  "])), breakpoints.up('xl'), breakpoints.classes.xl);
+});
+var DrawerHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 24px;\n  padding-bottom: 8px;\n\n  ", "\n"])), function (_ref2) {
+  var breakpoints = _ref2.theme.breakpoints;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", " {\n      display: none;\n    }\n\n    ", " & {\n      display: none;\n    }\n  "])), breakpoints.up('xl'), breakpoints.classes.xl);
+});
+var BurgerButton = styled(IconButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 40px;\n"])));
+var Title = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  line-height: 18px;\n  font-weight: 400;\n  color: ", ";\n  display: ", ";\n  margin-bottom: 4px;\n\n  &:not(:first-child) {\n    margin-top: 30px;\n  }\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref4) {
+  var $hidden = _ref4.$hidden;
+  return $hidden ? 'none' : 'block';
+});
+var Subtitle = styled(Title)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  line-height: 16px;\n\n  &:not(:first-child) {\n    margin-top: 20px;\n  }\n"])));
+var DrawerItemButton = styled(SfxDrawerItemButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n\n  .SfxDrawer-text {\n    display: flex;\n    position: relative;\n  }\n\n  ", "\n\n  ", ";\n\n  svg {\n    flex-shrink: 0;\n    color: ", ";\n    margin-left: 10px;\n  }\n\n  &:hover {\n    svg {\n      color: ", ";\n    }\n  }\n\n  ", "\n"])), function (_ref5) {
+  var isRequired = _ref5.isRequired,
+    theme = _ref5.theme;
+  return isRequired && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    .SfxDrawer-text::after {\n      color: ", ";\n      content: '*';\n      display: inline;\n      margin-left: 4px;\n    }\n  "])), theme.palette[PC.Error]);
+}, function (_ref6) {
+  var theme = _ref6.theme,
+    changed = _ref6.changed,
+    isInvalidRequiredField = _ref6.isInvalidRequiredField;
+  return changed && !isInvalidRequiredField && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    &::after {\n      content: \"\";\n      position: absolute;\n      right: 16px;\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: ", ";\n    }\n  "])), theme.palette[PC.Orange]);
+}, function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.Error];
+}, function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.Error];
+}, function (_ref9) {
+  var $hidden = _ref9.$hidden;
+  return $hidden && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: none;\n  "])));
+});
+var EllipsedFieldTitle = styled(EllipsedText)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: auto;\n"])));
+var Styled = {
+  Drawer: Drawer,
+  Title: Title,
+  Subtitle: Subtitle,
+  DrawerItemButton: DrawerItemButton,
+  DrawerHeader: DrawerHeader,
+  BurgerButton: BurgerButton,
+  EllipsedFieldTitle: EllipsedFieldTitle
+};
+export default Styled;

package/lib/components/BulkEditPanel/components/Sidebar/Sidebar.utils.js

@@ -0,0 +1,28 @@
+import { BULK_EDIT_GENERAL_IDS, BULK_EDIT_OPTIONS } from '@scaleflex/widget-utils/lib/constants';
+var generateSidebarTabs = function generateSidebarTabs(_ref) {
+  var activeSidebarItem = _ref.activeSidebarItem,
+    isOnUpload = _ref.isOnUpload;
+  return [{
+    key: BULK_EDIT_GENERAL_IDS.NAME,
+    contentI18nStr: BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS.NAME].contentI18nStr,
+    active: (activeSidebarItem === null || activeSidebarItem === void 0 ? void 0 : activeSidebarItem.name) === BULK_EDIT_GENERAL_IDS.NAME,
+    hidden: true
+  }, {
+    key: BULK_EDIT_GENERAL_IDS.TITLE,
+    contentI18nStr: BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS.TITLE].contentI18nStr,
+    active: (activeSidebarItem === null || activeSidebarItem === void 0 ? void 0 : activeSidebarItem.name) === BULK_EDIT_GENERAL_IDS.TITLE
+  }, {
+    key: BULK_EDIT_GENERAL_IDS.DESCRIPTION,
+    contentI18nStr: BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS.DESCRIPTION].contentI18nStr,
+    active: (activeSidebarItem === null || activeSidebarItem === void 0 ? void 0 : activeSidebarItem.name) === BULK_EDIT_GENERAL_IDS.DESCRIPTION
+  }, {
+    key: BULK_EDIT_GENERAL_IDS.TAGS,
+    contentI18nStr: BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS.TAGS].contentI18nStr,
+    active: (activeSidebarItem === null || activeSidebarItem === void 0 ? void 0 : activeSidebarItem.name) === BULK_EDIT_GENERAL_IDS.TAGS,
+    hidden: isOnUpload
+  }].filter(function (_ref2) {
+    var hidden = _ref2.hidden;
+    return !hidden;
+  });
+};
+export { generateSidebarTabs };

package/lib/components/BulkEditPanel/components/Sidebar/index.js

@@ -0,0 +1,158 @@
+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 { Fragment, useCallback } from 'react';
+import { BULK_EDIT_GENERAL_IDS, BULK_EDIT_METADATA_ID, BULK_EDIT_HIDDEN_FIELDS } from '@scaleflex/widget-utils/lib/constants';
+import { DrawerBody, DrawerItemText, DrawerList } from '@scaleflex/ui/core/drawer';
+import { Menu, WarningRound } from '@scaleflex/icons';
+import { useSelector } from 'react-redux';
+import { useExplorerI18n } from '../../../../hooks';
+import { selectIsUploadsPanelOpened } from '../../../../slices/panels.slice';
+import { selectIsM0LegacyMeta } from '../../../../slices/metadata.slice';
+import { generateSidebarTabs } from './Sidebar.utils';
+import Styled from './Sidebar.styled';
+
+// TODO: (Dima) pass container to Sidebar as before it was done via useExplorerContext
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var Sidebar = function Sidebar(_ref) {
+  var isSidebarOpen = _ref.isSidebarOpen,
+    activeSidebarItem = _ref.activeSidebarItem,
+    setActiveSidebarItem = _ref.setActiveSidebarItem,
+    changedMetadataFields = _ref.changedMetadataFields,
+    setIsSideBarOpen = _ref.setIsSideBarOpen,
+    toggleSidebar = _ref.toggleSidebar,
+    tagsDetails = _ref.tagsDetails,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups,
+    requiredEmptyFields = _ref.requiredEmptyFields,
+    isRequestedInvalidUpload = _ref.isRequestedInvalidUpload,
+    textFieldsDetails = _ref.textFieldsDetails;
+  var i18n = useExplorerI18n();
+  var isOnUpload = useSelector(selectIsUploadsPanelOpened);
+  var isM0LegacyMeta = useSelector(selectIsM0LegacyMeta);
+  var sidebarTabs = generateSidebarTabs({
+    activeSidebarItem: activeSidebarItem,
+    isOnUpload: isOnUpload
+  });
+  var isGeneralFieldsChanged = function isGeneralFieldsChanged(fieldKey) {
+    if (fieldKey === BULK_EDIT_GENERAL_IDS.TAGS) {
+      var _tagsDetails$addedTag, _tagsDetails$removedT;
+      return (tagsDetails === null || tagsDetails === void 0 ? void 0 : (_tagsDetails$addedTag = tagsDetails.addedTags) === null || _tagsDetails$addedTag === void 0 ? void 0 : _tagsDetails$addedTag.length) || (tagsDetails === null || tagsDetails === void 0 ? void 0 : (_tagsDetails$removedT = tagsDetails.removedTags) === null || _tagsDetails$removedT === void 0 ? void 0 : _tagsDetails$removedT.length);
+    }
+    if ([BULK_EDIT_GENERAL_IDS.TITLE, BULK_EDIT_GENERAL_IDS.DESCRIPTION].includes(fieldKey)) {
+      return !!Object.values(textFieldsDetails[fieldKey.toLowerCase()].value || {}).filter(function (i) {
+        return i;
+      }).length;
+    }
+  };
+  var isMetadataFieldChanged = useCallback(function (metadataUuid) {
+    var _changedMetadataField;
+    return !!((_changedMetadataField = changedMetadataFields.find(function (_ref2) {
+      var uuid = _ref2.uuid;
+      return uuid === metadataUuid;
+    })) !== null && _changedMetadataField !== void 0 && _changedMetadataField.value);
+  }, [changedMetadataFields]);
+  var handleClickItem = function handleClickItem(item) {
+    setActiveSidebarItem({
+      name: item.key,
+      key: item.key.toLowerCase()
+    });
+    toggleSidebar();
+  };
+  var onClickMetadataItem = function onClickMetadataItem() {
+    var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var groupUuid = arguments.length > 1 ? arguments[1] : undefined;
+    toggleSidebar();
+    setActiveSidebarItem(_objectSpread({
+      name: BULK_EDIT_METADATA_ID,
+      groupUuid: groupUuid
+    }, field));
+  };
+
+  // TODO: remove when attachments-assets fields type ready for bulk
+  var getFilteredFields = function getFilteredFields(fields) {
+    return fields.filter(function (_ref3) {
+      var type = _ref3.type;
+      return type !== 'attachments-assets';
+    });
+  };
+  var isRequiredEmptyField = function isRequiredEmptyField(fieldKey) {
+    return isOnUpload && isRequestedInvalidUpload && requiredEmptyFields.some(function (_ref4) {
+      var key = _ref4.key;
+      return key === fieldKey;
+    });
+  };
+  var isFieldHidden = function isFieldHidden(fieldType) {
+    if (!fieldType) return false;
+    return BULK_EDIT_HIDDEN_FIELDS.includes(fieldType);
+  };
+  return /*#__PURE__*/_jsx(Styled.Drawer, {
+    open: isSidebarOpen,
+    onClose: function onClose() {
+      return setIsSideBarOpen(false);
+    },
+    variant: "persistent",
+    children: /*#__PURE__*/_jsxs(DrawerBody, {
+      children: [/*#__PURE__*/_jsx(Styled.DrawerHeader, {
+        children: /*#__PURE__*/_jsx(Styled.BurgerButton, {
+          onClick: toggleSidebar,
+          color: "basic",
+          children: /*#__PURE__*/_jsx(Menu, {
+            size: 18
+          })
+        })
+      }), /*#__PURE__*/_jsxs(DrawerList, {
+        children: [!!sidebarTabs.length && /*#__PURE__*/_jsx(Styled.Title, {
+          children: i18n('bulkEditModalSidebarGeneralLabel')
+        }), sidebarTabs.map(function (item) {
+          return /*#__PURE__*/_jsx(Styled.DrawerItemButton, {
+            selected: item.active,
+            changed: isGeneralFieldsChanged(item.key),
+            onClick: function onClick() {
+              return handleClickItem(item);
+            },
+            children: /*#__PURE__*/_jsx(DrawerItemText, {
+              children: i18n(item.contentI18nStr)
+            })
+          }, item.key);
+        }), !isM0LegacyMeta && (fileCustomMetadataGroups === null || fileCustomMetadataGroups === void 0 ? void 0 : fileCustomMetadataGroups.length) > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Styled.Title, {
+            $hidden: !(fileCustomMetadataGroups !== null && fileCustomMetadataGroups !== void 0 && fileCustomMetadataGroups.length),
+            children: i18n('bulkEditModalSidebarCustomMetadataLabel')
+          }), (fileCustomMetadataGroups || []).map(function (_ref5) {
+            var name = _ref5.name,
+              uuid = _ref5.uuid,
+              fields = _ref5.fields;
+            return /*#__PURE__*/_jsxs(Fragment, {
+              children: [/*#__PURE__*/_jsx(Styled.Subtitle, {
+                children: name
+              }), getFilteredFields(fields).map(function (field) {
+                return /*#__PURE__*/_jsxs(Styled.DrawerItemButton, {
+                  selected: (activeSidebarItem === null || activeSidebarItem === void 0 ? void 0 : activeSidebarItem.uuid) === field.uuid,
+                  changed: isMetadataFieldChanged(field.uuid),
+                  isRequired: !!field.required,
+                  isInvalidRequiredField: isRequiredEmptyField(field.key),
+                  onClick: function onClick() {
+                    return onClickMetadataItem(field, uuid);
+                  },
+                  $hidden: isFieldHidden(field === null || field === void 0 ? void 0 : field.type),
+                  children: [/*#__PURE__*/_jsx(DrawerItemText, {
+                    children: /*#__PURE__*/_jsx(Styled.EllipsedFieldTitle, {
+                      maxLinesCount: 1,
+                      children: field.title
+                    })
+                  }), isRequiredEmptyField(field.key) && /*#__PURE__*/_jsx(WarningRound, {
+                    size: 16
+                  })]
+                }, field.uuid);
+              })]
+            }, uuid);
+          })]
+        })]
+      })]
+    })
+  });
+};
+export default Sidebar;

package/lib/components/BulkEditPanel/components/Tabs/Metadata/Metadata.js

@@ -0,0 +1,246 @@
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useRef, useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { MenuItem } from '@scaleflex/ui/core';
+import handleError from '@scaleflex/widget-utils/lib/handleError';
+import { updateUploadInfoMetaTags } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import FilterMetaDataField from '@scaleflex/widget-common/lib/MetaData/FilterMetadataFields';
+import { useExplorer } from '../../../../../hooks';
+import { FIELD_PROPS, METADATA_OPERATIONS, METADATA_PROPERTIES, OPERATIONS, METADATA_MULTI_SELECT_OPERATIONS, MULTI_SELECT_FIELD_TYPE, ADD_DELETE_OPERATORS, METADATA_TAGS_OPERATIONS } from '../tabs.constants';
+import { adaptMetadataBeforeSaveLocally, adaptMetadataChangesBeforeSave, checkFormValidation, generateTabI18nKey } from '../tabs.utils';
+import { applyBulkFilesPropertiesChanges, updateBulkFilesMeta } from '../../../../../slices/metadata.slice';
+import useFetchMetadataTagsBySearchQuery from '../../../../../hooks/useFetchMetadataTagsBySearchQuery';
+import Styled from './Metadata.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Metadata = function Metadata(_ref) {
+  var _fileCustomMetadataGr;
+  var _ref$activeSidebarIte = _ref.activeSidebarItem,
+    activeSidebarItem = _ref$activeSidebarIte === void 0 ? {} : _ref$activeSidebarIte,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups,
+    onRequestApply = _ref.onRequestApply,
+    isOnUpload = _ref.isOnUpload,
+    assets = _ref.assets,
+    changedMetadataFields = _ref.changedMetadataFields,
+    setChangedMetadataFields = _ref.setChangedMetadataFields,
+    tabSelectedAssets = _ref.tabSelectedAssets,
+    activeMetadataValue = _ref.activeMetadataValue;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts,
+    i18n = _useExplorer.i18n,
+    info = _useExplorer.info;
+  var _useFetchMetadataTags = useFetchMetadataTagsBySearchQuery(),
+    fetchSearchQueryTags = _useFetchMetadataTags.fetchSearchQueryTags,
+    isFetchingTags = _useFetchMetadataTags.isFetchingTags;
+  var inputRef = useRef();
+  // State to remember latest operation and don't switch it to default after multi-select update apply.
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    latestOperation = _useState2[0],
+    setLatestOperation = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSubmitting = _useState4[0],
+    setIsSubmitting = _useState4[1];
+  var numberFormatLocale = opts.config.numberFormatLocale;
+  var groupUuid = activeSidebarItem.groupUuid,
+    uuid = activeSidebarItem.uuid;
+  var activeGroupFields = ((_fileCustomMetadataGr = fileCustomMetadataGroups.find(function (_ref2) {
+    var uuid = _ref2.uuid;
+    return uuid === groupUuid;
+  })) === null || _fileCustomMetadataGr === void 0 ? void 0 : _fileCustomMetadataGr.fields) || [];
+  var activeField = activeGroupFields.find(function (field) {
+    return field.uuid === uuid;
+  }) || {};
+  var changedField = changedMetadataFields.find(function (field) {
+    return field.uuid === uuid;
+  });
+  var title = activeField.title,
+    type = activeField.type;
+  var changedFieldValue = changedField === null || changedField === void 0 ? void 0 : changedField.value;
+  var isMultiSelectFieldType = (activeField === null || activeField === void 0 ? void 0 : activeField.type) === MULTI_SELECT_FIELD_TYPE;
+  var isTagsType = (activeField === null || activeField === void 0 ? void 0 : activeField.type) === 'tags';
+  var operationValue = (changedField === null || changedField === void 0 ? void 0 : changedField.operator) || latestOperation || OPERATIONS.SET;
+  var isAddReplaceOperator = ADD_DELETE_OPERATORS.includes(operationValue);
+  var allAssetsHasEmptyValues = useMemo(function () {
+    return !(activeField !== null && activeField !== void 0 && activeField.key) || !(assets || []).some(function (asset) {
+      var _asset$meta;
+      var value = asset === null || asset === void 0 ? void 0 : (_asset$meta = asset.meta) === null || _asset$meta === void 0 ? void 0 : _asset$meta[activeField.key];
+      return Array.isArray(value) ? value.length : value;
+    });
+  }, [assets, activeField === null || activeField === void 0 ? void 0 : activeField.key]);
+  var operations = useMemo(function () {
+    if (isMultiSelectFieldType) {
+      return allAssetsHasEmptyValues ? METADATA_MULTI_SELECT_OPERATIONS.filter(function (op) {
+        return op.ID === OPERATIONS.SET;
+      }) : METADATA_MULTI_SELECT_OPERATIONS;
+    }
+    if (isTagsType) {
+      return METADATA_TAGS_OPERATIONS;
+    }
+    return METADATA_OPERATIONS;
+  }, [isMultiSelectFieldType, allAssetsHasEmptyValues, isTagsType]);
+  var checkAndCreateChanges = function checkAndCreateChanges(property, value) {
+    setChangedMetadataFields(function (latestChangedMetadataFields) {
+      var nextChangedMetadataFields = _toConsumableArray(latestChangedMetadataFields);
+      var indexOfChangedField = changedField && nextChangedMetadataFields.findIndex(function (field) {
+        return field.uuid === changedField.uuid;
+      });
+      if (changedField && typeof indexOfChangedField === 'number' && indexOfChangedField > -1) {
+        var nextChangedField = _objectSpread({}, changedField);
+        nextChangedField[property] = value;
+        nextChangedMetadataFields.splice(indexOfChangedField, 1, nextChangedField);
+      } else {
+        nextChangedMetadataFields.push(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, METADATA_PROPERTIES.UUID, activeField.uuid), METADATA_PROPERTIES.KEY, activeField.key), METADATA_PROPERTIES.OPERATOR, operationValue), METADATA_PROPERTIES.FIELD_TYPE, activeField.type), METADATA_PROPERTIES.POSSIBLE_VALUES, activeField[METADATA_PROPERTIES.POSSIBLE_VALUES]), property, value));
+      }
+      return nextChangedMetadataFields;
+    });
+  };
+  var handleChangeOperator = function handleChangeOperator(value) {
+    setLatestOperation(value);
+    checkAndCreateChanges(METADATA_PROPERTIES.OPERATOR, value);
+  };
+  var handleChangeValue = function handleChangeValue(value) {
+    checkAndCreateChanges(METADATA_PROPERTIES.VALUE, value);
+  };
+  var clearChangedField = function clearChangedField() {
+    var nextChangedMetadataFields = _toConsumableArray(changedMetadataFields);
+    var indexOfChangedField = nextChangedMetadataFields.findIndex(function (field) {
+      return field.uuid === changedField.uuid;
+    });
+    nextChangedMetadataFields.splice(indexOfChangedField, 1);
+    setChangedMetadataFields(nextChangedMetadataFields);
+  };
+  var onSaveSuccessfully = function onSaveSuccessfully() {
+    setIsSubmitting(false);
+    clearChangedField();
+    info(i18n(generateTabI18nKey('successfullyInfo'), {
+      count: tabSelectedAssets.length
+    }), 'success', 3000);
+  };
+  var handleSubmit = function handleSubmit() {
+    var adaptedChanges = adaptMetadataChangesBeforeSave(changedField, activeMetadataValue, operationValue);
+    setIsSubmitting(true);
+    dispatch(applyBulkFilesPropertiesChanges({
+      filesUuids: tabSelectedAssets,
+      changes: adaptedChanges,
+      activeMetadataValue: activeMetadataValue
+    })).throwRejection() // required to be able to use (.catch)
+    .then(function () {
+      dispatch(updateBulkFilesMeta({
+        filesUuids: tabSelectedAssets,
+        activeMetadataValue: activeMetadataValue,
+        updatedMetaField: changedField,
+        deepMergeMeta: isAddReplaceOperator,
+        removeMeta: operationValue === OPERATIONS.DELETE
+      }));
+      onSaveSuccessfully();
+    })["catch"](function () {
+      setIsSubmitting(false);
+    });
+  };
+  var handleSubmitLocally = function handleSubmitLocally() {
+    setIsSubmitting(true);
+    try {
+      var updatedMetadata = adaptMetadataBeforeSaveLocally(changedField, activeMetadataValue);
+      dispatch(updateUploadInfoMetaTags({
+        filesIds: tabSelectedAssets,
+        meta: updatedMetadata,
+        deepMergeMeta: isAddReplaceOperator,
+        removeMeta: operationValue === OPERATIONS.DELETE
+      }));
+      onSaveSuccessfully();
+    } catch (error) {
+      handleError(error, info);
+      setIsSubmitting(false);
+    }
+  };
+  var handleClickApply = function handleClickApply() {
+    var callBack = isOnUpload ? handleSubmitLocally : handleSubmit;
+    onRequestApply(tabSelectedAssets.length, callBack);
+  };
+  var onChangeSearchQuery = function onChangeSearchQuery(_ref3) {
+    var debouncedSearchValue = _ref3.debouncedSearchValue,
+      cb = _ref3.cb,
+      metadataFieldCKey = _ref3.metadataFieldCKey;
+    fetchSearchQueryTags({
+      debouncedSearchValue: debouncedSearchValue,
+      cb: cb,
+      metadataFieldCKey: metadataFieldCKey
+    });
+  };
+  useEffect(function () {
+    // Focus Inputs on mount
+    var containerEl = inputRef.current;
+    if (containerEl) {
+      var inputEl = containerEl.querySelectorAll('input,textarea');
+      if (inputEl) {
+        var targetInput = inputEl[0];
+        targetInput === null || targetInput === void 0 ? void 0 : targetInput.focus();
+      }
+    }
+    setLatestOperation(null);
+  }, [activeField]);
+  useEffect(function () {
+    if (isMultiSelectFieldType && allAssetsHasEmptyValues && operationValue !== OPERATIONS.SET) {
+      handleChangeOperator(OPERATIONS.SET);
+    }
+  }, [isMultiSelectFieldType, allAssetsHasEmptyValues]);
+  return /*#__PURE__*/_jsxs(Styled.FieldsWrapper, {
+    children: [/*#__PURE__*/_jsx(Styled.OperationSelect, {
+      disabled: !isMultiSelectFieldType && !isTagsType || operations.length === 1,
+      label: i18n(generateTabI18nKey('operationTitle')),
+      value: operationValue,
+      onChange: handleChangeOperator,
+      children: operations.map(function (operation) {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: operation.ID,
+          children: i18n(operation.LABEL_I18N_KEY)
+        }, operation.ID);
+      })
+    }), /*#__PURE__*/_jsxs(Styled.ValueSelect, {
+      children: [/*#__PURE__*/_jsx(Styled.Label, {
+        children: title
+      }), /*#__PURE__*/_jsx(FilterMetaDataField, {
+        i18n: i18n,
+        numberFormatLocale: numberFormatLocale,
+        title: title,
+        value: changedFieldValue || '',
+        extraFieldProps: FIELD_PROPS,
+        onChange: handleChangeValue,
+        onChangeSearchQuery: onChangeSearchQuery,
+        isFetching: isFetchingTags,
+        inputRef: inputRef,
+        field: activeField,
+        considerAutoHeight: true
+      })]
+    }), /*#__PURE__*/_jsx(Styled.ApplyButton, {
+      tabIndex: 0,
+      disabled: !checkFormValidation({
+        type: type,
+        changedFieldValue: changedFieldValue,
+        tabSelectedAssets: tabSelectedAssets
+      }),
+      onClick: handleClickApply,
+      color: "primary",
+      loading: isSubmitting,
+      children: i18n(generateTabI18nKey('applyButtonLabel'))
+    })]
+  });
+};
+export default Metadata;

package/lib/components/BulkEditPanel/components/Tabs/Metadata/Metadata.styled.js

@@ -0,0 +1,17 @@
+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 { SelectGroup, Label as SfxLabel, Button } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+var FieldsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  column-gap: 16px;\n  flex-shrink: 0;\n"])));
+var OperationSelect = styled(SelectGroup)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 350px;\n  max-width: 40%;\n\n  .SfxSelect-root,\n  .SfxSelect-Container {\n    width: 100%;\n  }\n"])));
+var ValueSelect = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 4px;\n  flex: 1;\n\n  .SfxDate-picker-root,\n  .SfxTextarea-root,\n  .SfxTagField-tagInputFieldWrapper,\n  .SfxTagField-tagFieldWrapper {\n    width: 100%;\n  }\n\n  .SfxTagField-tagFieldBottom {\n    display: none;\n  }\n\n  .SfxTagField-listWrapper {\n    min-height: auto;\n  }\n"])));
+var Label = styled(SfxLabel)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: grid;\n\n  span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n"])));
+var ApplyButton = styled(Button)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: 20px;\n"])));
+var Styled = {
+  FieldsWrapper: FieldsWrapper,
+  OperationSelect: OperationSelect,
+  ValueSelect: ValueSelect,
+  Label: Label,
+  ApplyButton: ApplyButton
+};
+export default Styled;