@scaleflex/widget-explorer 0.0.1

package/lib/components/BulkEditPanel/components/AssetsList/Columns/columns.utils.js

@@ -0,0 +1,272 @@
+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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _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 { ARRAY_FIELDS, BOOLEAN_FIELDS, OPERATIONS, STRING_FIELDS } from '../../Tabs/tabs.constants';
+import { generateTabI18nKey } from '../../Tabs/tabs.utils';
+var getBooleanFieldValue = function getBooleanFieldValue(fieldValue) {
+  var _ref;
+  return (_ref = _typeof(fieldValue) === 'object' && fieldValue !== null ? fieldValue.actualValue : fieldValue) !== null && _ref !== void 0 ? _ref : null;
+};
+var adaptFieldValue = function adaptFieldValue() {
+  var changedMetadataField = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var oldValues = arguments.length > 1 ? arguments[1] : undefined;
+  var value = changedMetadataField.value,
+    type = changedMetadataField.type;
+  var possibleValues = changedMetadataField.possible_values,
+    activeMetadataValue = changedMetadataField.activeMetadataValue;
+  var hasProperty = !!(activeMetadataValue && value && Object.prototype.hasOwnProperty.call(value, activeMetadataValue));
+  if (hasProperty) {
+    value = value[activeMetadataValue];
+  }
+  if (Array.isArray(possibleValues) && possibleValues.length > 0) {
+    if (Array.isArray(value)) {
+      var nextValues = _toConsumableArray(value);
+      if (Array.isArray(oldValues)) {
+        nextValues = nextValues.filter(function (nextValue) {
+          return !oldValues.includes(nextValue);
+        });
+      }
+      return nextValues.map(function (fieldValue) {
+        var _possibleValues$find;
+        return (_possibleValues$find = possibleValues.find(function (possibleValue) {
+          return possibleValue.internal_unique_value === fieldValue;
+        })) === null || _possibleValues$find === void 0 ? void 0 : _possibleValues$find.label;
+      });
+    }
+    if (value) {
+      var _possibleValues$find2;
+      return (_possibleValues$find2 = possibleValues.find(function (fieldValue) {
+        return fieldValue.internal_unique_value === value;
+      })) === null || _possibleValues$find2 === void 0 ? void 0 : _possibleValues$find2.label;
+    }
+  }
+  if (type === 'boolean') {
+    if (value === oldValues) {
+      return '';
+    }
+    return {
+      translatable: true,
+      actualValue: value,
+      label18nKey: value ? generateTabI18nKey('trueLabel') : generateTabI18nKey('falseLabel')
+    };
+  }
+  if (!hasProperty && activeMetadataValue && _typeof(value) === 'object' || value === oldValues) {
+    return '';
+  }
+  return value;
+};
+var adaptFieldOldValue = function adaptFieldOldValue(_ref2) {
+  var value = _ref2.value,
+    activeSidebarItem = _ref2.activeSidebarItem,
+    activeLanguage = _ref2.activeLanguage;
+  var type = activeSidebarItem.type,
+    possibleValues = activeSidebarItem.possible_values;
+  var isPossibleValuesExist = possibleValues && Array.isArray(possibleValues);
+  var findPossibleValueFn = function findPossibleValueFn(possibleValue, searchValue) {
+    return possibleValue.internal_unique_value === searchValue;
+  };
+  switch (type) {
+    case 'tags':
+      {
+        if (activeLanguage && value && _typeof(value) === 'object') {
+          return value[activeLanguage];
+        }
+        return value;
+      }
+    case 'numeric':
+    case 'date':
+    case 'textarea':
+    case 'attachment-uri':
+    case 'text':
+      {
+        if (activeLanguage && value && _typeof(value) === 'object') {
+          return value[activeLanguage];
+        }
+        return value;
+      }
+    case 'multi-select':
+      {
+        if (isPossibleValuesExist && Array.isArray(value)) {
+          return value.map(function (fieldValue) {
+            var _possibleValues$find3;
+            return (_possibleValues$find3 = possibleValues.find(function (possibleValue) {
+              return findPossibleValueFn(possibleValue, fieldValue);
+            })) === null || _possibleValues$find3 === void 0 ? void 0 : _possibleValues$find3.label;
+          });
+        }
+        return value;
+      }
+    case 'select-one':
+      {
+        if (isPossibleValuesExist) {
+          var _possibleValues$find4;
+          return (_possibleValues$find4 = possibleValues.find(function (possibleValue) {
+            return findPossibleValueFn(possibleValue, value);
+          })) === null || _possibleValues$find4 === void 0 ? void 0 : _possibleValues$find4.label;
+        }
+        return value;
+      }
+    case 'boolean':
+      {
+        return {
+          translatable: true,
+          actualValue: value,
+          label18nKey: value ? generateTabI18nKey('trueLabel') : generateTabI18nKey('falseLabel')
+        };
+      }
+  }
+};
+var adaptFieldNewValue = function adaptFieldNewValue(_ref3) {
+  var oldValue = _ref3.oldValue,
+    value = _ref3.value,
+    activeSidebarItem = _ref3.activeSidebarItem,
+    activeLanguage = _ref3.activeLanguage,
+    operator = _ref3.operator;
+  var type = activeSidebarItem.type,
+    possibleValues = activeSidebarItem.possible_values;
+  var isPossibleValuesExist = possibleValues && Array.isArray(possibleValues);
+  var findPossibleValueFn = function findPossibleValueFn(possibleValue, searchValue) {
+    return possibleValue.internal_unique_value === searchValue;
+  };
+  var oldValueWithLang = (oldValue === null || oldValue === void 0 ? void 0 : oldValue[activeLanguage]) || oldValue;
+  var newValueWithLang = (value === null || value === void 0 ? void 0 : value[activeLanguage]) || value;
+  switch (type) {
+    case 'tags':
+      {
+        if (Array.isArray(newValueWithLang) && Array.isArray(oldValueWithLang)) {
+          return newValueWithLang.filter(function (tag) {
+            return !oldValueWithLang.includes(tag);
+          });
+        }
+        return newValueWithLang;
+      }
+    case 'numeric':
+    case 'date':
+    case 'textarea':
+    case 'attachment-uri':
+    case 'text':
+      {
+        if (newValueWithLang && oldValueWithLang !== newValueWithLang) return newValueWithLang;
+        return null;
+      }
+    case 'multi-select':
+      {
+        var appliedValues = _toConsumableArray(newValueWithLang || []);
+        var isEqual = JSON.stringify(_toConsumableArray(oldValueWithLang || []).sort()) === JSON.stringify(_toConsumableArray(appliedValues).sort());
+        if (operator !== OPERATIONS.DELETE && isEqual) return null;
+        if (isPossibleValuesExist && Array.isArray(appliedValues)) {
+          if (operator === OPERATIONS.ADD) {
+            appliedValues = appliedValues.filter(function (fieldValue) {
+              return !(oldValueWithLang || []).includes(fieldValue);
+            });
+          }
+          appliedValues = appliedValues.map(function (fieldValue) {
+            var _possibleValues$find5;
+            return (_possibleValues$find5 = possibleValues.find(function (possibleValue) {
+              return findPossibleValueFn(possibleValue, fieldValue);
+            })) === null || _possibleValues$find5 === void 0 ? void 0 : _possibleValues$find5.label;
+          });
+        }
+        return appliedValues;
+      }
+    case 'select-one':
+      {
+        if (!newValueWithLang || oldValueWithLang === newValueWithLang) return null;
+        if (isPossibleValuesExist) {
+          var _possibleValues$find6;
+          return (_possibleValues$find6 = possibleValues.find(function (possibleValue) {
+            return findPossibleValueFn(possibleValue, newValueWithLang);
+          })) === null || _possibleValues$find6 === void 0 ? void 0 : _possibleValues$find6.label;
+        }
+        return value;
+      }
+    case 'boolean':
+      {
+        var appliedOldValue = getBooleanFieldValue(oldValueWithLang);
+        var appliedNewValue = getBooleanFieldValue(newValueWithLang);
+        if (appliedNewValue === null || appliedOldValue === newValueWithLang) return null;
+        return {
+          translatable: true,
+          actualValue: newValueWithLang,
+          label18nKey: newValueWithLang ? generateTabI18nKey('trueLabel') : generateTabI18nKey('falseLabel')
+        };
+      }
+  }
+};
+var checkHasValue = function checkHasValue(_ref4) {
+  var value = _ref4.value,
+    type = _ref4.type,
+    activeLanguage = _ref4.activeLanguage;
+  var newValueWithLang = (value === null || value === void 0 ? void 0 : value[activeLanguage]) || value;
+  switch (type) {
+    case 'numeric':
+    case 'date':
+    case 'textarea':
+    case 'text':
+      {
+        return !!newValueWithLang;
+      }
+    case 'tags':
+    case 'multi-select':
+      {
+        return Array.isArray(newValueWithLang) && !!newValueWithLang.length;
+      }
+    case 'boolean':
+      {
+        return typeof getBooleanFieldValue(newValueWithLang) === 'boolean';
+      }
+    default:
+      {
+        return ![null, undefined].includes(newValueWithLang);
+      }
+  }
+};
+/*
+  Avoid errors if the asset contain invalid data type
+*/
+
+var getFieldMetaValue = function getFieldMetaValue(fieldValue, type, activeMetadataValue) {
+  var value = _typeof(fieldValue) === 'object' && activeMetadataValue ? fieldValue[activeMetadataValue] : fieldValue;
+  if (ARRAY_FIELDS.includes(type) && !Array.isArray(value)) {
+    value = [];
+  }
+  if (STRING_FIELDS.includes(type) && typeof value !== 'string') {
+    value = '';
+  }
+  if (BOOLEAN_FIELDS.includes(type) && typeof value !== 'boolean') {
+    value = null;
+  }
+  return value;
+};
+var getFileTagsWithRemovedLabel = function getFileTagsWithRemovedLabel(fileTags, removedTags) {
+  return fileTags.map(function (fileTag) {
+    var isRemoved = removedTags.some(function (_ref5) {
+      var label = _ref5.label;
+      return fileTag.label === label;
+    });
+    return _objectSpread(_objectSpread({}, fileTag), {}, {
+      isRemoved: isRemoved
+    });
+  });
+};
+var getAddedTags = function getAddedTags() {
+  var addedTags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var fileTags = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return addedTags.filter(function (addedTag) {
+    return !fileTags.some(function (_ref6) {
+      var label = _ref6.label,
+        isRemoved = _ref6.isRemoved;
+      return isRemoved || addedTag.label === label;
+    });
+  });
+};
+export { adaptFieldValue, getFieldMetaValue, getAddedTags, getFileTagsWithRemovedLabel, adaptFieldOldValue, adaptFieldNewValue, checkHasValue };

package/lib/components/BulkEditPanel/components/AssetsList/Columns/getActiveColumn.js

@@ -0,0 +1,23 @@
+import { BULK_EDIT_GENERAL_IDS, BULK_EDIT_METADATA_ID } from '@scaleflex/widget-utils/lib/constants';
+import MetadataColumn from './MetadataColumn';
+import TagsColumn from './TagsColumn';
+import TextColumn from './TextColumn';
+var getActiveColumn = function getActiveColumn(activeSidebarItem) {
+  return [{
+    name: BULK_EDIT_GENERAL_IDS.TAGS,
+    Component: TagsColumn
+  }, {
+    name: BULK_EDIT_METADATA_ID,
+    Component: MetadataColumn
+  }, {
+    name: BULK_EDIT_GENERAL_IDS.TITLE,
+    Component: TextColumn
+  }, {
+    name: BULK_EDIT_GENERAL_IDS.DESCRIPTION,
+    Component: TextColumn
+  }].find(function (_ref) {
+    var name = _ref.name;
+    return name === activeSidebarItem.name;
+  });
+};
+export default getActiveColumn;

package/lib/components/BulkEditPanel/components/AssetsList/FloatyPreview.js

@@ -0,0 +1,55 @@
+import { LAYOUTS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import _getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import { Popper } from '@scaleflex/ui/core';
+import AssetPreview from '@scaleflex/widget-common/lib/AssetPreview';
+import { useExplorer } from '../../../../hooks';
+import Styled from './FloatyPreview.styled';
+import { PREIVEW_MODAL_STATUS } from './AssetsList.constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FloatyPreview = function FloatyPreview(_ref) {
+  var file = _ref.file,
+    previewAnchorEl = _ref.previewAnchorEl,
+    previewStatus = _ref.previewStatus,
+    setPreviewStatus = _ref.setPreviewStatus,
+    noImgTransformations = _ref.noImgTransformations,
+    isHubMode = _ref.isHubMode,
+    container = _ref.container;
+  var _useExplorer = useExplorer(),
+    isDevEnv = _useExplorer.isDevEnv;
+  var handleMouseEnter = function handleMouseEnter() {
+    setPreviewStatus(PREIVEW_MODAL_STATUS.KEEP);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setPreviewStatus(PREIVEW_MODAL_STATUS.CLOSE);
+  };
+  if (!previewAnchorEl) return null;
+  return /*#__PURE__*/_jsx(Popper, {
+    anchorEl: previewAnchorEl,
+    open: [PREIVEW_MODAL_STATUS.OPEN, PREIVEW_MODAL_STATUS.KEEP].includes(previewStatus),
+    position: "right-start",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: /*#__PURE__*/_jsx(Styled.PreviewWrapper, {
+      children: /*#__PURE__*/_jsx(AssetPreview, {
+        file: file,
+        isDevEnv: isDevEnv,
+        container: container,
+        isLargeSizePreview: true,
+        lazyloading: true,
+        getItemIcon: function getItemIcon() {
+          return _getItemIcon({
+            fileOrFolder: file,
+            viewLayout: LAYOUTS_IDS.GRID,
+            showVideoGif: true
+          });
+        },
+        viewLayout: LAYOUTS_IDS.GRID,
+        containerHeight: "100%",
+        fixedContainerWidth: 350,
+        noImgTransformations: noImgTransformations,
+        isHubMode: isHubMode
+      })
+    })
+  });
+};
+export default FloatyPreview;

package/lib/components/BulkEditPanel/components/AssetsList/FloatyPreview.styled.js

@@ -0,0 +1,21 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC, PSH } from '@scaleflex/widget-common';
+import styled, { css, keyframes } from 'styled-components';
+var opacityKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0;  }\n  to { opacity: 1; }\n"])));
+var transformKeyframes = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {  transform: scale(0); }\n  to { transform: scale(1); }\n"])));
+var fadeInAnimation = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  animation: ", " 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1),\n  ", " 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n"])), opacityKeyframes, transformKeyframes);
+var PreviewWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 350px;\n  height: 260px;\n  border-radius: 4px;\n  border: 1px solid;\n  margin: 8px;\n  padding: 10px;\n  border-color: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  ", "\n  .filerobot-common-ItemIcon {\n    height: 100%;\n  }\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BordersItem];
+}, function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref3) {
+  var shadows = _ref3.theme.shadows;
+  return shadows[PSH.HeaderPopup];
+}, fadeInAnimation);
+var Styled = {
+  PreviewWrapper: PreviewWrapper
+};
+export default Styled;

package/lib/components/BulkEditPanel/components/AssetsList/TableBody.js

@@ -0,0 +1,64 @@
+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 { useContext } from 'react';
+import { VirtualList } from '@scaleflex/widget-common';
+import { VirtualListDataContext } from '@scaleflex/widget-core/lib/Providers';
+import Styled from './AssetsList.styled';
+import TableRow from './Columns/TableRow';
+import { jsx as _jsx } from "react/jsx-runtime";
+var renderTableRowSpacer = function renderTableRowSpacer(props) {
+  return /*#__PURE__*/_jsx("tr", _objectSpread({}, props));
+};
+var TableBody = function TableBody(_ref) {
+  var tabSelectedAssets = _ref.tabSelectedAssets,
+    sortedFiles = _ref.sortedFiles,
+    isOnUpload = _ref.isOnUpload,
+    metadataEmptyAssetsValues = _ref.metadataEmptyAssetsValues,
+    handleSelectAsset = _ref.handleSelectAsset,
+    ActiveColumnElement = _ref.ActiveColumnElement,
+    activeMetadataValue = _ref.activeMetadataValue,
+    noImgTransformations = _ref.noImgTransformations,
+    activeSidebarItem = _ref.activeSidebarItem,
+    changedMetadataFields = _ref.changedMetadataFields,
+    tagsDetails = _ref.tagsDetails,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups,
+    fetchedFiles = _ref.fetchedFiles,
+    setFetchedFiles = _ref.setFetchedFiles,
+    textFieldsDetails = _ref.textFieldsDetails,
+    setTextFieldsDetails = _ref.setTextFieldsDetails;
+  var _useContext = useContext(VirtualListDataContext),
+    apiRef = _useContext.apiRef,
+    parentRef = _useContext.parentRef;
+  return /*#__PURE__*/_jsx(Styled.TableBody, {
+    ref: parentRef,
+    children: /*#__PURE__*/_jsx(VirtualList, {
+      items: sortedFiles,
+      injectedItemPropName: "file",
+      renderSpacer: renderTableRowSpacer,
+      parentRef: parentRef,
+      apiRef: apiRef,
+      children: /*#__PURE__*/_jsx(TableRow, {
+        tabSelectedAssets: tabSelectedAssets,
+        handleSelectAsset: handleSelectAsset,
+        ActiveColumnElement: ActiveColumnElement,
+        activeSidebarItem: activeSidebarItem,
+        changedMetadataFields: changedMetadataFields,
+        tagsDetails: tagsDetails,
+        isOnUpload: isOnUpload,
+        noImgTransformations: noImgTransformations,
+        activeMetadataValue: activeMetadataValue,
+        fileCustomMetadataGroups: fileCustomMetadataGroups,
+        metadataEmptyAssetsValues: metadataEmptyAssetsValues,
+        fetchedFiles: fetchedFiles,
+        setFetchedFiles: setFetchedFiles,
+        textFieldsDetails: textFieldsDetails,
+        setTextFieldsDetails: setTextFieldsDetails
+      })
+    })
+  });
+};
+export default TableBody;

package/lib/components/BulkEditPanel/components/AssetsList/TableHeader.js

@@ -0,0 +1,67 @@
+import capitalizeFirstLetter from '@scaleflex/widget-utils/lib/capitalizeFirstLetter';
+import { TableHead, TableRow } from '@scaleflex/ui/core';
+import { useExplorer } from '../../../../hooks';
+import { SORT_ORDERS, STATIC_TABLE_HEADER } from './AssetsList.constants';
+import Styled from './AssetsList.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TableHeader = function TableHeader(_ref) {
+  var _ref$lastCellLabel = _ref.lastCellLabel,
+    lastCellLabel = _ref$lastCellLabel === void 0 ? {} : _ref$lastCellLabel,
+    isAllSelected = _ref.isAllSelected,
+    handleToggleSelectAll = _ref.handleToggleSelectAll,
+    sortBy = _ref.sortBy,
+    sortOrder = _ref.sortOrder,
+    handleSort = _ref.handleSort;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  var translatable = lastCellLabel.translatable,
+    value = lastCellLabel.value;
+  var lastCellTitle = translatable ? i18n(value) : value;
+  var renderCellContent = function renderCellContent(cell) {
+    if (cell.withCheckbox) {
+      return /*#__PURE__*/_jsxs(Styled.ActionCellWrapper, {
+        children: [/*#__PURE__*/_jsx(Styled.Checkbox, {
+          checked: isAllSelected,
+          onChange: handleToggleSelectAll,
+          type: isAllSelected ? 'intermediate' : 'checkbox'
+        }), /*#__PURE__*/_jsxs(Styled.TitleWrapper, {
+          onClick: function onClick() {
+            return handleSort(cell.sortBy);
+          },
+          children: [/*#__PURE__*/_jsx(Styled.Title, {
+            $active: sortBy,
+            $sortable: !!cell.sortBy,
+            children: i18n(cell.labelI18nKey)
+          }), /*#__PURE__*/_jsx(Styled.SortArrow, {
+            size: 12,
+            $active: sortBy,
+            onClick: function onClick() {
+              return handleSort(cell.sortBy);
+            },
+            $fliped: sortOrder === SORT_ORDERS.ASC
+          })]
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(Styled.Title, {
+      children: i18n(cell.labelI18nKey)
+    });
+  };
+  return /*#__PURE__*/_jsx(TableHead, {
+    children: /*#__PURE__*/_jsxs(TableRow, {
+      children: [STATIC_TABLE_HEADER.map(function (staticCell) {
+        return /*#__PURE__*/_jsx(Styled.TableCell, {
+          width: staticCell.width,
+          children: renderCellContent(staticCell)
+        }, staticCell.key);
+      }), /*#__PURE__*/_jsx(Styled.TableCell, {
+        width: "45%",
+        children: /*#__PURE__*/_jsx(Styled.CellLabel, {
+          title: lastCellTitle,
+          children: capitalizeFirstLetter(lastCellTitle || '')
+        })
+      })]
+    })
+  });
+};
+export default TableHeader;

package/lib/components/BulkEditPanel/components/BulkEditFooter.js

@@ -0,0 +1,33 @@
+import { ArrowLeftOutline, Upload } from '@scaleflex/icons';
+import { useExplorerI18n } from '../../../hooks';
+import { generateTabI18nKey } from './Tabs/tabs.utils';
+import Styled from '../BulkEditPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BulkEditFooter = function BulkEditFooter(_ref) {
+  var onRequestClose = _ref.onRequestClose,
+    handleClickUpload = _ref.handleClickUpload;
+  var i18n = useExplorerI18n();
+  return /*#__PURE__*/_jsxs(Styled.ModalFooter, {
+    children: [/*#__PURE__*/_jsx(Styled.FooterButton, {
+      startIcon: /*#__PURE__*/_jsx(ArrowLeftOutline, {
+        size: 14
+      }),
+      color: "link-basic-secondary",
+      onClick: onRequestClose,
+      children: i18n(generateTabI18nKey('fillBackToSettings'))
+    }), /*#__PURE__*/_jsx(Styled.FooterButton, {
+      size: "lg",
+      onClick: onRequestClose,
+      children: i18n('mutualizedCancelButtonLabel')
+    }), /*#__PURE__*/_jsx(Styled.FooterButton, {
+      size: "lg",
+      color: "primary",
+      onClick: handleClickUpload,
+      startIcon: /*#__PURE__*/_jsx(Upload, {
+        size: 18
+      }),
+      children: i18n('mutualizedUploadLabel')
+    })]
+  });
+};
+export default BulkEditFooter;

package/lib/components/BulkEditPanel/components/ConfirmationModal/ConfirmationModal.js

@@ -0,0 +1,47 @@
+import { Warning } from '@scaleflex/icons';
+import { Button } from '@scaleflex/ui/core';
+import { useExplorerI18n } from '../../../../hooks';
+import Styled from './ConfirmationModal.styled';
+
+// TODO: We should use useConfirmationModal from Modals and drop this
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ConfirmationModal = function ConfirmationModal(_ref) {
+  var showConfirmationModal = _ref.showConfirmationModal,
+    confirmationModalData = _ref.confirmationModalData,
+    setShowConfirmationModal = _ref.setShowConfirmationModal;
+  var i18n = useExplorerI18n();
+  var _confirmationModalDat = confirmationModalData.title,
+    title = _confirmationModalDat === void 0 ? '' : _confirmationModalDat,
+    _confirmationModalDat2 = confirmationModalData.desc,
+    desc = _confirmationModalDat2 === void 0 ? '' : _confirmationModalDat2,
+    handleConfirm = confirmationModalData.handleConfirm;
+  var handleClose = function handleClose() {
+    setShowConfirmationModal(false);
+  };
+  return /*#__PURE__*/_jsxs(Styled.Modal, {
+    open: showConfirmationModal,
+    onClose: handleClose,
+    children: [/*#__PURE__*/_jsx(Styled.ModalTitle, {
+      icon: /*#__PURE__*/_jsx(Warning, {
+        size: 29
+      }),
+      variant: "with-icon",
+      iconShadow: true,
+      onClose: handleClose,
+      primary: title
+    }), /*#__PURE__*/_jsx(Styled.ModalContent, {
+      children: desc
+    }), /*#__PURE__*/_jsxs(Styled.ModalActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        color: "basic",
+        children: i18n('mutualizedCancelButtonLabel')
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleConfirm,
+        color: "warning-primary",
+        children: i18n('mutualizedConfirmButtonLabel')
+      })]
+    })]
+  });
+};
+export default ConfirmationModal;

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

@@ -0,0 +1,25 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 { Modal as SfxModal, ModalTitle as SfxModalTitle, ModalContent as SfxModalContent, ModalActions as SfxModalActions } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+var Modal = styled(SfxModal)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 24px;\n  width: 400px;\n  max-width: none;\n  position: relative;\n"])));
+var ModalTitle = styled(SfxModalTitle)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0;\n\n  .SfxModalTitle-Close {\n    top: -16px;\n    right: -16px;\n  }\n\n  .SfxModalTitle-LabelSecondary {\n    margin: 0;\n  }\n\n  .SfxModalTitle-Icon {\n    width: 58px;\n    height: 58px;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.Orange_0_1_Overlay];
+}, function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.Warning];
+});
+var ModalContent = styled(SfxModalContent)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 24px;\n  padding: 0;\n  ", ";\n"])), function (_ref3) {
+  var typography = _ref3.theme.typography;
+  return typography.font[FV.TextLarge];
+});
+var ModalActions = styled(SfxModalActions)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-top: 24px;\n\n  button {\n    flex-grow: 1;\n  }\n"])));
+var Styled = {
+  Modal: Modal,
+  ModalTitle: ModalTitle,
+  ModalContent: ModalContent,
+  ModalActions: ModalActions
+};
+export default Styled;