@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsContent.js

@@ -0,0 +1,92 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { VariantPlaceholder, PlusOutline } from '@scaleflex/icons';
+import { selectIsUserPermittedTo, selectIsUserAuth } from '@scaleflex/widget-core/lib/slices/user.slice';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import VariationItem from './VariationItem';
+import StyledVariants from './Variations.styled';
+import { filesVariationsUpdated } from '../../../../slices/files.slice';
+import NoItems from '../../../NoItems';
+import { VARIATIONS_TAB_IDS } from './Variations.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var VariationsContent = function VariationsContent(_ref) {
+  var originalFile = _ref.originalFile,
+    addNewVariant = _ref.addNewVariant,
+    addNewPreset = _ref.addNewPreset,
+    isLoading = _ref.isLoading,
+    variants = _ref.variants,
+    searchQuery = _ref.searchQuery,
+    originalVariantsCount = _ref.originalVariantsCount,
+    displayedFileVariant = _ref.displayedFileVariant,
+    deleteVariant = _ref.deleteVariant,
+    editVariantFile = _ref.editVariantFile,
+    editVariantName = _ref.editVariantName,
+    setSelectedVariant = _ref.setSelectedVariant,
+    i18n = _ref.i18n,
+    activeTabId = _ref.activeTabId,
+    showAddPresetButton = _ref.showAddPresetButton;
+  var dispatch = useDispatch();
+  var hasUserVariantEditPermission = useSelector(function (state) {
+    return selectIsUserPermittedTo(state, PERMISSIONS.FILE_IMAGE_EDITOR);
+  });
+  var isUserAuth = useSelector(selectIsUserAuth);
+  var isUserPermittedToEditVariant = isUserAuth && hasUserVariantEditPermission;
+  var showAddVariantButton = isUserPermittedToEditVariant && activeTabId === VARIATIONS_TAB_IDS.MANUAL;
+  var isShowAddPresetButton = showAddPresetButton && isUserPermittedToEditVariant && activeTabId === VARIATIONS_TAB_IDS.AUTOMATIC;
+  var onSelectVariant = function onSelectVariant(variant) {
+    setSelectedVariant(variant);
+    dispatch(filesVariationsUpdated(variant));
+  };
+  if (!isLoading && variants.length === 0 && originalVariantsCount > 0) {
+    return /*#__PURE__*/_jsx(NoItems, {
+      iconWidth: 150,
+      iconHeight: 60,
+      mt: 120,
+      noSearchResults: true,
+      smallItemsGap: true,
+      primary: i18n('mutualizedNoResults'),
+      secondary: i18n('mutualizedTryAnotherSearch')
+    });
+  }
+  return /*#__PURE__*/_jsxs(StyledVariants.VariantsWrapper, {
+    children: [showAddVariantButton && /*#__PURE__*/_jsxs(StyledVariants.AddVariantBtn, {
+      onClick: addNewVariant,
+      "data-testid": "add-variant-button",
+      children: [/*#__PURE__*/_jsx(VariantPlaceholder, {
+        size: 115,
+        height: 58
+      }), /*#__PURE__*/_jsxs(StyledVariants.AddVariantBtnLabel, {
+        children: [/*#__PURE__*/_jsx(PlusOutline, {
+          size: 14
+        }), i18n('explorerFileWindowAddVariationButton')]
+      })]
+    }), isShowAddPresetButton && /*#__PURE__*/_jsxs(StyledVariants.AddVariantBtn, {
+      onClick: addNewPreset,
+      "data-testid": "add-preset-button",
+      children: [/*#__PURE__*/_jsx(VariantPlaceholder, {
+        size: 115,
+        height: 58
+      }), /*#__PURE__*/_jsxs(StyledVariants.AddVariantBtnLabel, {
+        children: [/*#__PURE__*/_jsx(PlusOutline, {
+          size: 14
+        }), i18n('explorerFileWindowAddPresetButton')]
+      })]
+    }), variants.map(function (variant) {
+      return /*#__PURE__*/_jsx(VariationItem, {
+        variant: variant,
+        searchQuery: searchQuery,
+        isOriginal: originalFile.uuid === variant.uuid,
+        isActive: variant.uuid === displayedFileVariant.uuid,
+        isRemovedBackground: variant.bgRemoved,
+        onClick: function onClick() {
+          return onSelectVariant(variant);
+        },
+        deleteVariant: deleteVariant,
+        editVariantFile: editVariantFile,
+        editVariantName: editVariantName,
+        isUserPermittedToEditVariant: isUserPermittedToEditVariant,
+        activeTabId: activeTabId
+      }, variant.uuid);
+    })]
+  });
+};
+export default VariationsContent;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsEditModalContent.js

@@ -0,0 +1,57 @@
+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 { InputGroup } from '@scaleflex/ui/core';
+import StyledVariants from './Variations.styled';
+import { VALID_QUERY_PARAMS_REGEX } from './Variations.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var VariationsEditModalContent = function VariationsEditModalContent(_ref) {
+  var _data$name;
+  var data = _ref.data,
+    updateData = _ref.updateData,
+    i18n = _ref.i18n,
+    setPrimaryButtonDisabled = _ref.setPrimaryButtonDisabled;
+  var isValidParam = VALID_QUERY_PARAMS_REGEX.test(data === null || data === void 0 ? void 0 : data.queryString);
+  var nameError = !data.name;
+  var queryStringError = !data.queryString || !isValidParam;
+  var updateInputData = function updateInputData(newData) {
+    updateData(_objectSpread(_objectSpread({}, data), newData));
+  };
+  var handleChangeName = function handleChangeName(_ref2) {
+    var value = _ref2.target.value;
+    updateInputData({
+      name: value
+    });
+    setPrimaryButtonDisabled(!value);
+  };
+  var handleChangeQueryString = function handleChangeQueryString(_ref3) {
+    var value = _ref3.target.value;
+    updateInputData({
+      queryString: value
+    });
+    setPrimaryButtonDisabled(!value);
+  };
+  return /*#__PURE__*/_jsxs(StyledVariants.EditModalContent, {
+    children: [/*#__PURE__*/_jsx(InputGroup, {
+      fullWidth: true,
+      size: "md",
+      label: "".concat(i18n('mutualizedNameFieldLabel'), " *"),
+      value: (_data$name = data === null || data === void 0 ? void 0 : data.name) !== null && _data$name !== void 0 ? _data$name : '',
+      onChange: handleChangeName,
+      error: nameError,
+      hint: nameError && i18n('mutualizedFieldRequired')
+    }), /*#__PURE__*/_jsx(InputGroup, {
+      fullWidth: true,
+      size: "md",
+      label: i18n('explorerFileWindowVariationsOperationsLabel'),
+      value: data === null || data === void 0 ? void 0 : data.queryString,
+      error: queryStringError,
+      onChange: handleChangeQueryString,
+      hint: queryStringError && i18n('explorerFileWindowEditVariationParamsError')
+    })]
+  });
+};
+export default VariationsEditModalContent;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsSearch.js

@@ -0,0 +1,44 @@
+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, useCallback } from 'react';
+import debounce from '@scaleflex/widget-utils/lib/debounce';
+import { useExplorer } from '../../../../hooks';
+import StyledVariants from './Variations.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var VariationsSearch = function VariationsSearch(_ref) {
+  var originalVariants = _ref.originalVariants,
+    setSearchQuery = _ref.setSearchQuery,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    isAutomaticTabActive = _ref.isAutomaticTabActive;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentSearchValue = _useState2[0],
+    setCurrentSearchValue = _useState2[1];
+  var changeSearchValue = function changeSearchValue(e) {
+    var value = e.target.value;
+    setCurrentSearchValue(value);
+    handleSearch(value);
+  };
+  var handleSearch = useCallback(debounce(function (value) {
+    setSearchQuery(value);
+  }, 50), [originalVariants]);
+  return /*#__PURE__*/_jsx(StyledVariants.SearchWrapper, {
+    disabled: disabled,
+    children: /*#__PURE__*/_jsx(StyledVariants.SearchInput, {
+      size: "sm",
+      placeholder: isAutomaticTabActive ? i18n('explorerFileWindowSearchPresetsPlaceholder') : i18n('explorerFileWindowSearchCustomVariationsPlaceholder'),
+      value: currentSearchValue,
+      onChange: changeSearchValue,
+      disabled: disabled,
+      fullWidth: true
+    })
+  });
+};
+export default VariationsSearch;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsSkeleton.js

@@ -0,0 +1,35 @@
+import { Skeleton } from '@scaleflex/ui/core';
+import VariationsSearch from './VariationsSearch';
+import Styled from './Variations.styled';
+import VariationsTabs from './VariationsTabs';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var VariationsSkeleton = function VariationsSkeleton(_ref) {
+  var i18n = _ref.i18n,
+    activeTabId = _ref.activeTabId;
+  return /*#__PURE__*/_jsxs(Styled.SkeletonWrapper, {
+    children: [/*#__PURE__*/_jsxs(Styled.SkeletonTitleWrapper, {
+      children: [/*#__PURE__*/_jsx(VariationsTabs, {
+        i18n: i18n,
+        activeTabId: activeTabId,
+        isLoading: true
+      }), /*#__PURE__*/_jsxs(Styled.SkeletonTitleContent, {
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          width: 100,
+          height: 24
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          width: 150,
+          height: 24
+        })]
+      }), /*#__PURE__*/_jsx(VariationsSearch, {
+        disabled: true
+      })]
+    }), /*#__PURE__*/_jsx(Styled.SkeletonContent, {
+      children: Array(4).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(Styled.SkeletonItemWrapper, {
+          children: [/*#__PURE__*/_jsx(Styled.ImageSkeleton, {}), /*#__PURE__*/_jsx(Styled.FooterSkeleton, {})]
+        }, index);
+      })
+    })]
+  });
+};
+export default VariationsSkeleton;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsTabNavigator.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { VARIATIONS_TAB_IDS } from './Variations.constants';
+import { filesVariationsUpdated } from '../../../../slices/files.slice';
+import VariationsTabs from './VariationsTabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+var VariationsTabNavigator = function VariationsTabNavigator(_ref) {
+  var i18n = _ref.i18n,
+    activeTabId = _ref.activeTabId,
+    setActiveTabId = _ref.setActiveTabId,
+    customVariants = _ref.customVariants,
+    presetsVariants = _ref.presetsVariants,
+    selectedVariant = _ref.selectedVariant;
+  var dispatch = useDispatch();
+  var getActiveVariant = useCallback(function (tabId) {
+    return tabId === VARIATIONS_TAB_IDS.AUTOMATIC ? selectedVariant && (presetsVariants === null || presetsVariants === void 0 ? void 0 : presetsVariants.find(function (variant) {
+      return variant.name === selectedVariant.name;
+    })) || (presetsVariants === null || presetsVariants === void 0 ? void 0 : presetsVariants[0]) : customVariants === null || customVariants === void 0 ? void 0 : customVariants[0];
+  }, [customVariants, presetsVariants, selectedVariant]);
+  var handleChangeTab = useCallback(function (newTabId) {
+    if ((presetsVariants === null || presetsVariants === void 0 ? void 0 : presetsVariants.length) === 0) {
+      return;
+    }
+    var firstVariant = getActiveVariant(newTabId);
+    dispatch(filesVariationsUpdated(firstVariant));
+    setActiveTabId(newTabId);
+  }, [dispatch]);
+  useEffect(function () {
+    if (activeTabId === VARIATIONS_TAB_IDS.AUTOMATIC) {
+      var firstVariant = getActiveVariant(activeTabId);
+      dispatch(filesVariationsUpdated(firstVariant));
+    }
+  }, []);
+  return /*#__PURE__*/_jsx(VariationsTabs, {
+    i18n: i18n,
+    activeTabId: activeTabId,
+    handleChangeTab: handleChangeTab,
+    presetsVariants: presetsVariants
+  });
+};
+export default VariationsTabNavigator;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsTabs.js

@@ -0,0 +1,40 @@
+import StyledVariants from './Variations.styled';
+import { VARIATIONS_TABS } from './Variations.constants';
+import { useExplorer } from '../../../../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var VariationsTabs = function VariationsTabs(_ref) {
+  var i18n = _ref.i18n,
+    activeTabId = _ref.activeTabId,
+    _ref$handleChangeTab = _ref.handleChangeTab,
+    handleChangeTab = _ref$handleChangeTab === void 0 ? function () {} : _ref$handleChangeTab,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    presetsVariants = _ref.presetsVariants;
+  var _useExplorer = useExplorer(),
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    variationsHideManualSubTab = _useExplorer$opts2.variationsHideManualSubTab;
+  return /*#__PURE__*/_jsx(StyledVariants.Tabs, {
+    onChange: handleChangeTab,
+    value: activeTabId,
+    isLoading: isLoading,
+    children: VARIATIONS_TABS.map(function (_ref2) {
+      var i18nKey = _ref2.i18nKey,
+        id = _ref2.id,
+        disabled = _ref2.disabled,
+        hide = _ref2.hide;
+      return !(hide !== null && hide !== void 0 && hide({
+        variationsHideManualSubTab: variationsHideManualSubTab
+      })) && /*#__PURE__*/_jsx(StyledVariants.Tab, {
+        size: "lg",
+        label: i18n(i18nKey),
+        value: id,
+        active: id === activeTabId,
+        disabled: isLoading || (disabled === null || disabled === void 0 ? void 0 : disabled({
+          presetsVariants: presetsVariants
+        }))
+      }, id);
+    }).filter(Boolean)
+  });
+};
+export default VariationsTabs;

package/lib/components/FileWindowPanel/FileTabs/VariationsTab/VariationsTopOptions.js

@@ -0,0 +1,204 @@
+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 { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { ItemHoverTopOptions, PC } from '@scaleflex/widget-common';
+import { Remove, Download, Rename, Link, EditImage } from '@scaleflex/icons';
+import copyText from '@scaleflex/widget-utils/lib/copyText';
+import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { useModal } from '@scaleflex/widget-core/lib/hooks';
+import { useExplorer } from '../../../../hooks';
+import Styled from './Variations.styled';
+import { downloadOneFile, emitExportEvent } from '../../../../thunks/downloads.thunks';
+import { useDeleteModal, useDownloadConsentModal } from '../../../Modals';
+import prepareExportedFilesLinks from '../../../../utils/prepareExportedFilesLinks';
+import VariationsEditModalContent from './VariationsEditModalContent';
+import getQueryStringFromUrl from '../../../../utils/getQueryStringFromUrl';
+import { removeExtraUrlParams } from '../../../../utils/removeExtraUrlParams';
+import { copyFileCdnLink } from '../../../../slices/files.slice';
+import { ANIMATED_IMG_ACCEPT_HEADER } from '../../../../utils/constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var VariationsTopOptions = function VariationsTopOptions(_ref) {
+  var variant = _ref.variant,
+    editName = _ref.editName,
+    deleteVariant = _ref.deleteVariant,
+    editVariantFile = _ref.editVariantFile,
+    hideUpdateOperations = _ref.hideUpdateOperations,
+    isOriginal = _ref.isOriginal;
+  var dispatch = useDispatch();
+  var toggleModal = useModal();
+  var deleteModal = useDeleteModal();
+  var toggleDownloadConsentModal = useDownloadConsentModal();
+  var theme = useTheme();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    info = _useExplorer.info,
+    _useExplorer$opts = _useExplorer.opts,
+    noImgOperationsAndDownload = _useExplorer$opts.noImgOperationsAndDownload,
+    preventDownloadDefaultBehavior = _useExplorer$opts.preventDownloadDefaultBehavior;
+  var uuid = variant.uuid,
+    name = variant.name,
+    url = variant.url;
+  var copyLinkToClipboard = function copyLinkToClipboard() {
+    var fileLink = dispatch(copyFileCdnLink(variant));
+
+    // TMP: quotes from Emil "force_format=png at the end of link to force PNG cause text looks shit in JPEG unfortunately on BE
+    // BE (we will deal with that in detail later)" afterwards we could remove the force format
+    copyText({
+      text: fileLink,
+      i18n: i18n,
+      info: info,
+      successMsgI18nKey: 'explorerFileWindowVariationLinkCopied'
+    });
+  };
+  var notifyAndDownload = function notifyAndDownload() {
+    if (preventDownloadDefaultBehavior) {
+      dispatch(emitExportEvent(prepareExportedFilesLinks([variant])));
+      return;
+    }
+    var variantName = variant.name;
+    var variantUrl = getFileLink(variant, 'cdn');
+    /*
+    * TODO: Check the following in-case BE supports it,
+    * Disabled download as zip due to this task: https://scaleflexhq.atlassian.net/browse/FRA-7213
+    * To re-enabled Remove dismissUsageRights: true.
+    */
+
+    var downloadParams = _objectSpread({
+      url: isOriginal ? variantUrl : "".concat(variantUrl, "&force_download=").concat(variant.name),
+      downloadedFileName: variantName,
+      dismissUsageRights: true,
+      headers: ANIMATED_IMG_ACCEPT_HEADER
+    }, isOriginal ? {} : {
+      noForceDownload: true
+    });
+    toggleDownloadConsentModal(function () {
+      return dispatch(downloadOneFile(downloadParams));
+    });
+  };
+  var startEditName = function startEditName() {
+    var variantNameInputId = 'filerobotVariantNameModalInput';
+    var nextUrl = removeExtraUrlParams(url);
+    var queryString = getQueryStringFromUrl(url);
+    var updatedUrl = "".concat(nextUrl).concat(queryString ? "?".concat(queryString) : '');
+    var updatedQueryString = queryString === null || queryString === void 0 ? void 0 : queryString.split('&').filter(function (param) {
+      return !param.startsWith('vh=');
+    }).join('&');
+    toggleModal({
+      icon: /*#__PURE__*/_jsx(Rename, {
+        size: 29,
+        color: theme.palette[PC.AccentPrimary]
+      }),
+      showTitleLabel: true,
+      title: i18n('explorerFileWindowEditVariationTitle'),
+      content: function content(_ref2) {
+        var data = _ref2.data,
+          updateData = _ref2.updateData,
+          setPrimaryButtonDisabled = _ref2.setPrimaryButtonDisabled;
+        return /*#__PURE__*/_jsx(VariationsEditModalContent, {
+          data: _objectSpread({
+            name: name,
+            queryString: updatedQueryString
+          }, data),
+          updateData: updateData,
+          i18n: i18n,
+          setPrimaryButtonDisabled: setPrimaryButtonDisabled
+        });
+      },
+      onButtonPrimaryClick: function onButtonPrimaryClick(_ref3) {
+        var data = _ref3.data;
+        return editName({
+          uuid: uuid,
+          name: data.name,
+          query: data.queryString,
+          url: updatedUrl
+        });
+      },
+      inputToFocus: variantNameInputId,
+      enterKeySubmits: true,
+      disableAutoClose: true,
+      modalStyle: {
+        width: 400,
+        maxWidth: 'none'
+      },
+      modalBodyStyle: {
+        textAlign: 'center',
+        padding: '12px 24px'
+      },
+      modalFooterStyle: {
+        flexDirection: 'row',
+        padding: 24
+      },
+      primaryTitleStyle: {
+        textAlign: 'center'
+      },
+      modalSecondaryButtonColor: 'basic',
+      contentStyle: {
+        textAlign: 'center'
+      },
+      modalPrimaryButton: {
+        width: 170
+      },
+      modalSecondaryButton: {
+        width: 170
+      },
+      inlineActionButtons: true
+    });
+  };
+  var handleVariantDeletion = function handleVariantDeletion() {
+    deleteModal({
+      title: i18n('explorerFileWindowDeleteVariationTitle'),
+      content: /*#__PURE__*/_jsx(Styled.VariantName, {
+        children: i18n('explorerFileWindowDeletedVariationInfo', {
+          variant_name: name
+        })
+      }),
+      onConfirm: function onConfirm() {
+        return deleteVariant(uuid);
+      }
+    });
+  };
+  var options = useMemo(function () {
+    return [{
+      key: 'GridLi-CopyLink',
+      Icon: Link,
+      iconSize: 12,
+      onClick: copyLinkToClipboard
+    }, {
+      key: 'GridLi-DownloadVariant',
+      Icon: Download,
+      iconSize: 12,
+      onClick: notifyAndDownload,
+      hidden: noImgOperationsAndDownload
+    }, {
+      key: 'GridLi-EditImage',
+      Icon: EditImage,
+      iconSize: 12,
+      onClick: function onClick() {
+        return editVariantFile(variant);
+      },
+      hidden: hideUpdateOperations
+    }, {
+      key: 'GridLi-EditName',
+      Icon: Rename,
+      iconSize: 12,
+      onClick: startEditName,
+      hidden: hideUpdateOperations
+    }, {
+      key: 'GridLi-DeleteVariant',
+      Icon: Remove,
+      iconSize: 12,
+      onClick: handleVariantDeletion,
+      hidden: hideUpdateOperations
+    }];
+  }, [variant, notifyAndDownload, hideUpdateOperations, noImgOperationsAndDownload]);
+  return /*#__PURE__*/_jsx(ItemHoverTopOptions, {
+    options: options
+  });
+};
+export default VariationsTopOptions;