@scaleflex/widget-explorer 0.0.1

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

@@ -0,0 +1,263 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button, IconButton } from '@scaleflex/ui/core';
+import { CrossOutline, Rename } from '@scaleflex/icons';
+import { Spinner } from '@scaleflex/widget-common';
+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 isValidUri from '@scaleflex/widget-utils/lib/isValidUri';
+import { DIRECT_SUBMIT_FIELDS, FIELD_PROPS, MULTI_SELECT_FIELD_TYPE, TEXT_FIELDS_TYPES } from '../../Tabs/tabs.constants';
+import { generateTabI18nKey, adaptMetadataBeforeSaveLocally, getUpdateSingleFileMetadata, isFileMetaChanged } from '../../Tabs/tabs.utils';
+import { getFieldMetaValue } from './columns.utils';
+import { fetchFileByUuid, updateFileMeta } from '../../../../../slices/files.slice';
+import useFetchMetadataTagsBySearchQuery from '../../../../../hooks/useFetchMetadataTagsBySearchQuery';
+import FormattedUriLink from '../../../../common/FormattedUriLink';
+import Styled from './Columns.styled';
+import { useExplorer } from '../../../../../hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FileMetadataField = function FileMetadataField(_ref) {
+  var _fileCustomMetadataGr;
+  var activeSidebarItem = _ref.activeSidebarItem,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups,
+    isOnUpload = _ref.isOnUpload,
+    file = _ref.file,
+    activeMetadataValue = _ref.activeMetadataValue,
+    fileMetadata = _ref.fileMetadata,
+    metadataEmptyAssetsValues = _ref.metadataEmptyAssetsValues,
+    fetchedFiles = _ref.fetchedFiles,
+    setFetchedFiles = _ref.setFetchedFiles,
+    currentFetchedFile = _ref.currentFetchedFile,
+    oldTags = _ref.oldTags,
+    isEditMode = _ref.isEditMode,
+    setIsEditMode = _ref.setIsEditMode;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts,
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n;
+  var _useFetchMetadataTags = useFetchMetadataTagsBySearchQuery(),
+    fetchSearchQueryTags = _useFetchMetadataTags.fetchSearchQueryTags,
+    isFetchingTags = _useFetchMetadataTags.isFetchingTags;
+  var numberFormatLocale = opts.config.numberFormatLocale;
+  var groupUuid = activeSidebarItem.groupUuid,
+    uuid = activeSidebarItem.uuid,
+    key = activeSidebarItem.key,
+    type = activeSidebarItem.type;
+  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 isDirectSubmit = DIRECT_SUBMIT_FIELDS.includes(type);
+  var isMultiSelect = type === MULTI_SELECT_FIELD_TYPE;
+  var isTextFieldAfterUpload = !isOnUpload && TEXT_FIELDS_TYPES.includes(type);
+  var _useState = useState(fileMetadata),
+    _useState2 = _slicedToArray(_useState, 2),
+    fieldValue = _useState2[0],
+    setFieldValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSubmitting = _useState4[0],
+    setIsSubmitting = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFetchingFileData = _useState6[0],
+    setIsFetchingFileData = _useState6[1];
+  var inputRef = useRef();
+  var fieldValueWithMeta = getFieldMetaValue(fieldValue, type, activeMetadataValue);
+  var fileValueWithMeta = getFieldMetaValue(fileMetadata, type, activeMetadataValue);
+  var isFieldChanged = isFileMetaChanged(fieldValueWithMeta, fileValueWithMeta);
+  var isAttachmentUriField = type === 'attachment-uri';
+  var disableSaveButton = !isFieldChanged || isSubmitting || isAttachmentUriField && !(isValidUri(fieldValue) || fieldValue === '');
+  var isFieldRequiredAndEmpty = (metadataEmptyAssetsValues[key] || []).some(function (_ref3) {
+    var uuid = _ref3.uuid;
+    return uuid === file.uuid;
+  });
+  var onSaveSuccessfully = function onSaveSuccessfully() {
+    setIsSubmitting(false);
+    setIsEditMode(false);
+    info(i18n(generateTabI18nKey('successfullyInfo'), {
+      count: 1
+    }), 'success', 3000);
+  };
+  var handleSubmitLocally = function handleSubmitLocally(nextValue) {
+    setIsSubmitting(false);
+    try {
+      var changes = _objectSpread(_objectSpread({}, activeField), {}, {
+        value: nextValue
+      });
+      var updatedMetadata = adaptMetadataBeforeSaveLocally(changes, activeMetadataValue, file.meta);
+      dispatch(updateUploadInfoMetaTags({
+        filesIds: [file.id],
+        meta: updatedMetadata
+      }));
+      onSaveSuccessfully();
+    } catch (error) {
+      handleError(error, info);
+    }
+  };
+  var handleSubmit = function handleSubmit(valueToSubmit) {
+    setIsSubmitting(true);
+    var adaptedMetadata = getUpdateSingleFileMetadata({
+      file: currentFetchedFile || file,
+      changedField: _objectSpread(_objectSpread({}, activeField), {}, {
+        value: valueToSubmit
+      }),
+      activeMetadataValue: activeMetadataValue
+    }).meta;
+    dispatch(updateFileMeta({
+      uuid: file.uuid,
+      meta: adaptedMetadata
+    })).then(onSaveSuccessfully)["finally"](function () {
+      setIsSubmitting(false);
+    });
+  };
+  var handleFieldSubmit = function handleFieldSubmit(valueToSubmit) {
+    if (!isFileMetaChanged(valueToSubmit, fileMetadata)) return;
+    info(i18n('mutualizedSubmittingLabel'), 'success', 3000);
+    if (isOnUpload) {
+      handleSubmitLocally(valueToSubmit);
+    } else {
+      handleSubmit(valueToSubmit);
+    }
+  };
+  var handleChangeFieldValue = function handleChangeFieldValue(nextValue) {
+    if (nextValue === fieldValue) return;
+    if (isDirectSubmit) handleFieldSubmit(nextValue);
+    setFieldValue(nextValue);
+  };
+  var handleSelectMenuClose = function handleSelectMenuClose() {
+    setFieldValue(function (currentFieldValue) {
+      if (type === MULTI_SELECT_FIELD_TYPE) {
+        handleFieldSubmit(currentFieldValue);
+      }
+      return currentFieldValue;
+    });
+  };
+  var onChangeSearchQuery = function onChangeSearchQuery(_ref4) {
+    var debouncedSearchValue = _ref4.debouncedSearchValue,
+      cb = _ref4.cb,
+      metadataFieldCKey = _ref4.metadataFieldCKey;
+    fetchSearchQueryTags({
+      debouncedSearchValue: debouncedSearchValue,
+      cb: cb,
+      metadataFieldCKey: metadataFieldCKey
+    });
+  };
+  useEffect(function () {
+    setFieldValue(fileMetadata);
+  }, [key, fileMetadata]);
+  useEffect(function () {
+    setIsSubmitting(false);
+    setIsEditMode(false);
+  }, [key]);
+  useEffect(function () {
+    setIsEditMode(false);
+  }, [activeMetadataValue]);
+  if (isTextFieldAfterUpload && !isEditMode) {
+    var _oldTags$props;
+    var fetchFileData = function fetchFileData() {
+      setIsFetchingFileData(true);
+      dispatch(fetchFileByUuid({
+        uuid: file.uuid
+      })).then(function (res) {
+        var nextFetchedFiles = _toConsumableArray(fetchedFiles);
+        if (res) {
+          nextFetchedFiles.push(res);
+        }
+        setIsEditMode(true);
+        setFetchedFiles(nextFetchedFiles);
+      })["finally"](function () {
+        return setIsFetchingFileData(false);
+      });
+    };
+    var handleToggleEditMode = function handleToggleEditMode() {
+      if (!currentFetchedFile) {
+        fetchFileData();
+      } else {
+        setIsEditMode(true);
+      }
+    };
+    return /*#__PURE__*/_jsxs(Styled.TagsWrapper, {
+      $showMinHeight: isTextFieldAfterUpload,
+      children: [type === 'attachment-uri' ? /*#__PURE__*/_jsx(FormattedUriLink, {
+        uri: (oldTags === null || oldTags === void 0 ? void 0 : (_oldTags$props = oldTags.props) === null || _oldTags$props === void 0 ? void 0 : _oldTags$props.title) || ''
+      }) : oldTags, /*#__PURE__*/_jsx(Styled.FloatyButtonWrapper, {
+        className: "filerobot-bulkEdit-edit-button-wrapper",
+        children: /*#__PURE__*/_jsx(Styled.FloatyEditButton, {
+          size: "sm",
+          $loading: isFetchingFileData,
+          onClick: handleToggleEditMode,
+          children: isFetchingFileData ? /*#__PURE__*/_jsx(Spinner, {
+            size: 14
+          }) : /*#__PURE__*/_jsx(Rename, {
+            size: 14
+          })
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Styled.FieldWrapper, {
+    children: [/*#__PURE__*/_jsx(FilterMetaDataField, {
+      i18n: i18n,
+      numberFormatLocale: numberFormatLocale,
+      value: fieldValueWithMeta || '',
+      inputRef: inputRef,
+      extraFieldProps: _objectSpread(_objectSpread({}, FIELD_PROPS), {}, {
+        disabled: isSubmitting,
+        error: isFieldRequiredAndEmpty,
+        onBlur: function onBlur() {
+          return !isDirectSubmit && !isTextFieldAfterUpload && handleFieldSubmit(fieldValue);
+        }
+      }, isMultiSelect ? {
+        handleSelectMenuClose: handleSelectMenuClose
+      } : {}),
+      onChange: handleChangeFieldValue,
+      onChangeSearchQuery: onChangeSearchQuery,
+      isFetching: isFetchingTags,
+      field: activeField,
+      considerAutoHeight: true
+    }), isTextFieldAfterUpload && /*#__PURE__*/_jsxs(Styled.FieldActionsWrapper, {
+      $disableCross: isSubmitting,
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "sm",
+        color: "primary",
+        loading: isSubmitting,
+        disabled: disableSaveButton,
+        onClick: function onClick() {
+          return handleFieldSubmit(fieldValue);
+        },
+        children: i18n('mutualizedSaveButton')
+      }), /*#__PURE__*/_jsx(IconButton, {
+        size: "sm",
+        color: "basic",
+        onClick: function onClick() {
+          return setIsEditMode(false);
+        },
+        children: /*#__PURE__*/_jsx(CrossOutline, {
+          size: 12
+        })
+      })]
+    })]
+  });
+};
+export default FileMetadataField;

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

@@ -0,0 +1,228 @@
+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); }
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useDebounce } from '@scaleflex/widget-common/lib/hooks';
+import { updateUploadInfoMetaTags } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import handleError from '@scaleflex/widget-utils/lib/handleError';
+import { useExplorer } from '../../../../../hooks';
+import { adaptFileTags, generateTabI18nKey, tagFilterFn, splitTagsToAdaptedAndSuggested } from '../../Tabs/tabs.utils';
+import StyledAssetsList from '../AssetsList.styled';
+import TagsField from './TagsField';
+import { selectActiveRegionalLang } from '../../../../../slices/metadata.slice';
+import { updateFileTags } from '../../../../../slices/files.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileTagField = function FileTagField(_ref) {
+  var isAddingTags = _ref.isAddingTags,
+    file = _ref.file,
+    isOnUpload = _ref.isOnUpload;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts$con = _useExplorer.opts.config,
+    _useExplorer$opts$con2 = _useExplorer$opts$con === void 0 ? {} : _useExplorer$opts$con,
+    _useExplorer$opts$con3 = _useExplorer$opts$con2.tagging,
+    _useExplorer$opts$con4 = _useExplorer$opts$con3.suggestionList,
+    allTags = _useExplorer$opts$con4 === void 0 ? [] : _useExplorer$opts$con4,
+    suggestedTagsOnly = _useExplorer$opts$con3.suggestedTagsOnly;
+  var currentLanguage = useSelector(selectActiveRegionalLang);
+  var fileTags = useMemo(function () {
+    var _file$tags;
+    return ((_file$tags = file.tags) === null || _file$tags === void 0 ? void 0 : _file$tags[currentLanguage]) || [];
+  }, [file, currentLanguage]);
+  var fileAdaptedTags = useMemo(function () {
+    return adaptFileTags(fileTags, currentLanguage);
+  }, [fileTags, currentLanguage]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTagsPaperOpen = _useState2[0],
+    setIsTagsPaperOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var _useState5 = useState(fileAdaptedTags),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tagsValue = _useState6[0],
+    _setTagsValue = _useState6[1];
+  var debouncedSearchValue = useDebounce(searchTerm, 150);
+  var tagsInputRef = useRef();
+  var tagsValueRef = useRef(tagsValue);
+  var fileTagsRef = useRef(fileTags);
+  var currentLanguageRef = useRef(currentLanguage);
+  var setTagsValue = function setTagsValue(data) {
+    tagsValueRef.current = data;
+    _setTagsValue(data);
+  };
+  var _useMemo = useMemo(function () {
+      return splitTagsToAdaptedAndSuggested(allTags, currentLanguage, tagFilterFn, debouncedSearchValue, tagsValue);
+    }, [allTags, currentLanguage, tagsValue, debouncedSearchValue]),
+    adaptedAllTags = _useMemo.adaptedAllTags,
+    suggestedTags = _useMemo.suggestedTags;
+  var allAndSuggestedTags = [].concat(_toConsumableArray(adaptedAllTags), _toConsumableArray(suggestedTags));
+  var focusTagsInput = function focusTagsInput() {
+    var tagsContainerEl = tagsInputRef.current;
+    if (tagsContainerEl) {
+      var tagsInput = tagsContainerEl.querySelector('input');
+      tagsInput === null || tagsInput === void 0 ? void 0 : tagsInput.focus();
+      setIsTagsPaperOpen(true);
+    }
+  };
+  var handleAddTag = useCallback(function (tagLabel) {
+    var targetTag = allAndSuggestedTags.find(function (_ref2) {
+      var label = _ref2.label;
+      return new RegExp(tagLabel.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'i').test(label);
+    });
+    focusTagsInput();
+    setSearchTerm('');
+    if (targetTag && suggestedTagsOnly) {
+      var nextTags = [].concat(_toConsumableArray(tagsValue), [targetTag]);
+      setTagsValue(nextTags);
+      return;
+    }
+    if (tagLabel.length >= 3 && !suggestedTagsOnly) {
+      var newTag = {
+        label: tagLabel,
+        sid: null
+      };
+      var _nextTags = [].concat(_toConsumableArray(tagsValue), [newTag]);
+      setTagsValue(_nextTags);
+    }
+  }, [tagsValue, allAndSuggestedTags]);
+  var handleRemoveTag = useCallback(function (tagIndex) {
+    var nextTags = _toConsumableArray(tagsValue);
+    nextTags.splice(tagIndex, 1);
+    focusTagsInput();
+    setTagsValue(nextTags);
+  }, [tagsValue]);
+  var handleClearTags = function handleClearTags() {
+    focusTagsInput();
+    setTagsValue([]);
+  };
+  var onSaveSuccessfully = function onSaveSuccessfully(newFile) {
+    info(i18n(generateTabI18nKey('successfullyInfo'), {
+      count: 1
+    }), 'success', 3000);
+    if (newFile) {
+      var _newFile$tags;
+      var newfileTags = ((_newFile$tags = newFile.tags) === null || _newFile$tags === void 0 ? void 0 : _newFile$tags[currentLanguage]) || [];
+      setTagsValue(adaptFileTags(newfileTags, currentLanguage));
+    }
+  };
+  var saveTags = function saveTags(existingTagsBySid, newTagsByLabel) {
+    handlePromise(dispatch(updateFileTags({
+      uuid: file.uuid,
+      languageKey: currentLanguageRef.current,
+      existingTags: existingTagsBySid,
+      newTags: newTagsByLabel
+    })), onSaveSuccessfully, function (error) {
+      setTagsValue(adaptFileTags(fileTagsRef.current, currentLanguage));
+      handleError(error, info);
+    });
+  };
+  var saveTagsLocally = function saveTagsLocally(existingTagsByLabel, newTagsByLabel) {
+    try {
+      var uniqueTags = _toConsumableArray(new Set([].concat(_toConsumableArray(existingTagsByLabel), _toConsumableArray(newTagsByLabel)))).map(function (label) {
+        return {
+          label: label,
+          sid: null
+        };
+      });
+      dispatch(updateUploadInfoMetaTags({
+        filesIds: [file.id],
+        tags: _defineProperty({}, currentLanguage, uniqueTags),
+        tagsForceUpdate: true
+      }));
+      onSaveSuccessfully();
+    } catch (error) {
+      handleError(error, info);
+    }
+  };
+  var handleTagsSubmit = function handleTagsSubmit() {
+    var availableTagSids = tagsValueRef.current.map(function (_ref3) {
+      var sid = _ref3.sid;
+      return sid;
+    });
+    var existingTags = fileTagsRef.current.filter(function (fileTag) {
+      return availableTagSids.includes(fileTag.sid);
+    });
+    var existingTagsByLabel = existingTags.map(function (_ref4) {
+      var label = _ref4.label;
+      return label;
+    });
+    var existingTagsBySid = existingTags.map(function (_ref5) {
+      var sid = _ref5.sid;
+      return sid;
+    });
+    var newTagsByLabel = tagsValueRef.current.filter(function (_ref6) {
+      var label = _ref6.label;
+      return !existingTagsByLabel.includes(label);
+    }).map(function (_ref7) {
+      var label = _ref7.label;
+      return label;
+    });
+    var isTagsChanged = JSON.stringify(fileTagsRef.current.map(function (_ref8) {
+      var label = _ref8.label;
+      return label;
+    }).sort()) !== JSON.stringify(tagsValueRef.current.map(function (_ref9) {
+      var label = _ref9.label;
+      return label;
+    }).sort());
+    if (!isTagsChanged) return;
+    if (isOnUpload) {
+      saveTagsLocally(existingTagsByLabel, newTagsByLabel);
+    } else {
+      saveTags(existingTagsBySid, newTagsByLabel);
+    }
+  };
+  useEffect(function () {
+    fileTagsRef.current = fileTags;
+    var adaptedFileTags = adaptFileTags(fileTags, currentLanguage);
+    setTagsValue(adaptedFileTags);
+  }, [fileTags]);
+  useEffect(function () {
+    currentLanguageRef.current = currentLanguage;
+    setTagsValue(adaptFileTags(fileTags, currentLanguage));
+    setSearchTerm('');
+  }, [currentLanguage]);
+  return /*#__PURE__*/_jsx(StyledAssetsList.TableCell, {
+    children: /*#__PURE__*/_jsx(StyledAssetsList.TagFieldWrapper, {
+      children: /*#__PURE__*/_jsx(TagsField, {
+        defaultTagStyle: true,
+        isAdding: isAddingTags,
+        tagsValue: tagsValue,
+        allTags: adaptedAllTags,
+        suggestedTags: suggestedTags,
+        isTagsPaperOpen: isTagsPaperOpen,
+        searchTerm: searchTerm,
+        tagsInputRef: tagsInputRef,
+        fieldId: file.uuid,
+        addedOrRemovedLength: Math.abs(tagsValue.length - fileAdaptedTags.length),
+        disabled: file.loading,
+        loading: file.loading,
+        clickOutSideHandler: handleTagsSubmit,
+        setIsTagsPaperOpen: setIsTagsPaperOpen,
+        handleAddTag: handleAddTag,
+        handleRemoveTag: handleRemoveTag,
+        handleClearTags: handleClearTags,
+        setSearchTerm: setSearchTerm,
+        debouncedSearchValue: debouncedSearchValue
+      })
+    })
+  });
+};
+export default FileTagField;

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

@@ -0,0 +1,107 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Success } from '@scaleflex/icons';
+import { updateUploadInfoMetaTags } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { BULK_EDIT_GENERAL_IDS } from '@scaleflex/widget-utils/lib/constants';
+import handleError from '@scaleflex/widget-utils/lib/handleError';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import { updateFileMeta } from '../../../../../slices/files.slice';
+import { useExplorer } from '../../../../../hooks';
+import { generateTabI18nKey } from '../../Tabs/tabs.utils';
+import StyledAssetsList from '../AssetsList.styled';
+import Styled from './Columns.styled';
+import { TEXT_FIELDS } from '../../Tabs/tabs.constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileTextField = function FileTextField(_ref) {
+  var file = _ref.file,
+    textValue = _ref.textValue,
+    currentLanguage = _ref.currentLanguage,
+    activeSidebarKey = _ref.activeSidebarKey,
+    isOnUpload = _ref.isOnUpload;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n;
+  var _useState = useState(textValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    fieldValue = _useState2[0],
+    setFieldValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSubmitting = _useState4[0],
+    setIsSubmitting = _useState4[1];
+  var isDesc = activeSidebarKey === BULK_EDIT_GENERAL_IDS.DESCRIPTION.toLowerCase();
+  var handleChangeFieldValue = function handleChangeFieldValue(_ref2) {
+    var value = _ref2.target.value;
+    setFieldValue(value);
+  };
+  var onSaveSuccessfully = function onSaveSuccessfully() {
+    setIsSubmitting(false);
+    info(i18n(generateTabI18nKey('successfullyInfo'), {
+      count: 1
+    }), 'success', 3000);
+  };
+  var handleSubmitLocally = function handleSubmitLocally() {
+    try {
+      var changes = _defineProperty({}, activeSidebarKey, currentLanguage ? _objectSpread(_objectSpread(_objectSpread({}, file[activeSidebarKey] || {}), file.meta[activeSidebarKey]), {}, _defineProperty({}, currentLanguage, fieldValue)) : fieldValue);
+      dispatch(updateUploadInfoMetaTags({
+        filesIds: [file.uuid],
+        meta: changes
+      }));
+      onSaveSuccessfully();
+    } catch (error) {
+      setIsSubmitting(false);
+      handleError(error, info);
+    }
+  };
+  var handleSubmit = function handleSubmit() {
+    var changedTextField = isDesc ? TEXT_FIELDS.DESCRIPTION : TEXT_FIELDS.TITLE;
+    var changes = currentLanguage ? _objectSpread(_objectSpread({}, file.meta[changedTextField]), {}, _defineProperty({}, currentLanguage, fieldValue)) : fieldValue;
+    var updatedFile = _objectSpread(_objectSpread({}, file), {}, {
+      meta: _objectSpread(_objectSpread({}, file.meta || {}), {}, _defineProperty({}, changedTextField, changes))
+    });
+    handlePromise(dispatch(updateFileMeta({
+      uuid: file.uuid,
+      meta: updatedFile.meta
+    })), onSaveSuccessfully, info);
+  };
+  var handleSubmitFieldValue = function handleSubmitFieldValue() {
+    if (textValue === fieldValue) return;
+    setIsSubmitting(true);
+    if (isOnUpload) handleSubmitLocally();else handleSubmit();
+  };
+  useEffect(function () {
+    setFieldValue(textValue);
+  }, [activeSidebarKey, textValue]);
+  return /*#__PURE__*/_jsx(StyledAssetsList.TableCell, {
+    children: /*#__PURE__*/_jsx(Styled.TextInput, {
+      value: fieldValue || '',
+      disabled: isSubmitting,
+      type: isDesc ? 'textarea' : 'input',
+      TextareaProps: {
+        rows: 3,
+        onBlur: handleSubmitFieldValue
+      },
+      onChange: handleChangeFieldValue,
+      onBlur: handleSubmitFieldValue,
+      hideCopyIcon: false,
+      copyTextMessage: i18n('mutualizedCopyLink'),
+      copySuccessIcon: /*#__PURE__*/_jsx(Success, {
+        size: 16
+      })
+    })
+  });
+};
+export default FileTextField;