@scaleflex/widget-explorer 0.0.1

package/lib/components/ContextMenu/SharedMenus/DownloadSubMenu.js

@@ -0,0 +1,70 @@
+import { Original, Image } from '@scaleflex/icons';
+import isPdf from '@scaleflex/widget-utils/lib/isPdf';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../hooks';
+import { useTransformedDownloadModal } from '../../Modals';
+import { DEFAULT_ICON_SIZE } from '../ContextMenu.constants';
+import TransformationOption from '../MenuOptions/TransformationOption';
+import DownloadOption from '../MenuOptions/DownloadOption';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DownloadSubMenu = function DownloadSubMenu(_ref) {
+  var folders = _ref.folders,
+    files = _ref.files;
+  var triggerTransformedDownloadModal = useTransformedDownloadModal();
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions;
+  var noFoldersSelected = folders.length === 0;
+  var downloadAsOriginalOption = DownloadOption({
+    key: 'DOWNLOAD_AS_ORIGINAL',
+    content: 'mutualizedAsOriginalLabel',
+    prefix: function prefix(_ref2) {
+      var iconPrimaryColor = _ref2.iconPrimaryColor;
+      return /*#__PURE__*/_jsx(Original, {
+        color: iconPrimaryColor,
+        size: DEFAULT_ICON_SIZE
+      });
+    },
+    disabled: function disabled(_ref3) {
+      var _folders$, _folderTree$, _files$;
+      var _ref3$folderTree = _ref3.folderTree,
+        folderTree = _ref3$folderTree === void 0 ? [] : _ref3$folderTree;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.DISPLAY],
+        permissionsList: ((_folders$ = folders[0]) === null || _folders$ === void 0 ? void 0 : _folders$.permissions) || ((_folderTree$ = folderTree[0]) === null || _folderTree$ === void 0 ? void 0 : _folderTree$.permissions) || ((_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.permissions)
+      });
+    },
+    disabledTooltip: 'explorerContextMenuPermissionMutedHint',
+    keepItemSelected: true
+  });
+  var downloadAsImageOption = DownloadOption({
+    key: 'DOWNLOAD_AS_IMAGE',
+    content: 'downloadOptionsDownloadAsImage',
+    prefix: function prefix(_ref4) {
+      var iconPrimaryColor = _ref4.iconPrimaryColor;
+      return /*#__PURE__*/_jsx(Image, {
+        color: iconPrimaryColor,
+        size: DEFAULT_ICON_SIZE
+      });
+    },
+    keepItemSelected: true,
+    onClick: function onClick() {
+      return triggerTransformedDownloadModal(files);
+    },
+    disabled: function disabled(_ref5) {
+      var _folders$2, _folderTree$2, _files$2;
+      var _ref5$folderTree = _ref5.folderTree,
+        folderTree = _ref5$folderTree === void 0 ? [] : _ref5$folderTree;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.DISPLAY],
+        permissionsList: ((_folders$2 = folders[0]) === null || _folders$2 === void 0 ? void 0 : _folders$2.permissions) || ((_folderTree$2 = folderTree[0]) === null || _folderTree$2 === void 0 ? void 0 : _folderTree$2.permissions) || ((_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.permissions)
+      });
+    },
+    disabledTooltip: 'explorerContextMenuPermissionMutedHint'
+  });
+  var transformationOption = TransformationOption();
+  var downloadSubMenuItems = [downloadAsOriginalOption, noFoldersSelected && files.every(function (file) {
+    return isPdf(file);
+  }) ? downloadAsImageOption : transformationOption];
+  return [].concat(downloadSubMenuItems);
+};
+export default DownloadSubMenu;

package/lib/components/ContextMenu/index.js

@@ -0,0 +1,34 @@
+import { useDispatch } from 'react-redux';
+import { useContextMenuData } from '@scaleflex/widget-core/lib/hooks';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import ContextMenuContent from './ContextMenuContent';
+import { fetchFileFolderPermissions } from '../../thunks/permissions.thunks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ContextMenu = function ContextMenu() {
+  var dispatch = useDispatch();
+  var _useContextMenuData = useContextMenuData(),
+    _useContextMenuData$i = _useContextMenuData.isOpen,
+    isOpen = _useContextMenuData$i === void 0 ? false : _useContextMenuData$i,
+    _useContextMenuData$f = _useContextMenuData.foldersUuids,
+    foldersUuids = _useContextMenuData$f === void 0 ? [] : _useContextMenuData$f,
+    _useContextMenuData$f2 = _useContextMenuData.filesUuids,
+    filesUuids = _useContextMenuData$f2 === void 0 ? [] : _useContextMenuData$f2;
+  useUpdateEffect(function () {
+    var abortFunc;
+    if (isOpen) {
+      var _dispatch = dispatch(fetchFileFolderPermissions({
+          foldersUuids: foldersUuids,
+          filesUuids: filesUuids
+        })),
+        abort = _dispatch.abort;
+      abortFunc = abort;
+    }
+    return function () {
+      if (abortFunc) {
+        abortFunc();
+      }
+    };
+  }, [isOpen]);
+  return isOpen && /*#__PURE__*/_jsx(ContextMenuContent, {});
+};
+export default ContextMenu;

package/lib/components/ContextMenu/utils/calculateMenuHeight.js

@@ -0,0 +1,20 @@
+import { MENU_CONSTANTS } from '../ContextMenu.constants';
+import isFileContextMenu from './isFileContextMenu';
+var calculateMenuHeight = function calculateMenuHeight(filteredOptions, contextMenuType) {
+  var menuPadding = isFileContextMenu(contextMenuType) ? 9 : 4;
+  var buttonHeight = isFileContextMenu(contextMenuType) ? 64 : 44;
+  var menuHeight = menuPadding * 2 + buttonHeight; // top and bottom padding
+
+  filteredOptions.forEach(function (option) {
+    var _option$key;
+    if ((_option$key = option.key) !== null && _option$key !== void 0 && _option$key.includes('SEPARATOR')) {
+      menuHeight += MENU_CONSTANTS.SEPARATOR_HEIGHT;
+    } else if (option.disabled) {
+      menuHeight += MENU_CONSTANTS.OPTION_HEIGHT;
+    } else {
+      menuHeight += MENU_CONSTANTS.OPTION_HEIGHT;
+    }
+  });
+  return menuHeight;
+};
+export default calculateMenuHeight;

package/lib/components/ContextMenu/utils/calculateMenuPosition.js

@@ -0,0 +1,42 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { MENU_CONSTANTS } from '../ContextMenu.constants';
+var calculateMenuPosition = function calculateMenuPosition(_ref) {
+  var containerWidth = _ref.containerWidth,
+    containerHeight = _ref.containerHeight,
+    left = _ref.left,
+    top = _ref.top,
+    menuHeight = _ref.menuHeight,
+    isSubList = _ref.isSubList,
+    subListLeft = _ref.subListLeft,
+    currSubListBottom = _ref.currSubListBottom,
+    zIndex = _ref.zIndex;
+  var contextMenuWidth = MENU_CONSTANTS.MENU_WIDTH;
+  var verticalMargin = MENU_CONSTANTS.VERTICAL_MARGIN;
+  var distanceKeys = {
+    x: 'left',
+    y: isSubList ? 'bottom' : 'top'
+  };
+  var distanceVals = {
+    x: left + Math.abs(subListLeft),
+    y: Math.abs(currSubListBottom) || top
+  };
+  if (distanceVals.x + contextMenuWidth > containerWidth) {
+    distanceKeys.x = 'right';
+    distanceVals.x = containerWidth - left;
+    if (isSubList && subListLeft < 0) {
+      distanceVals.x += Math.abs(subListLeft);
+    }
+  }
+  if (!isSubList && distanceVals.y + menuHeight >= containerHeight) {
+    distanceVals.y -= distanceVals.y + menuHeight + verticalMargin - containerHeight;
+  }
+  if (distanceVals.y <= 0) {
+    distanceVals.y = verticalMargin;
+  }
+  var menuStyles = _defineProperty(_defineProperty(_defineProperty({}, distanceKeys.y, distanceVals.y), distanceKeys.x, distanceVals.x), "zIndex", zIndex);
+  return menuStyles;
+};
+export default calculateMenuPosition;

package/lib/components/ContextMenu/utils/createSeparator.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var createSeparator = function createSeparator(_ref) {
+  var key = _ref.key,
+    hideOption = _ref.hideOption;
+  return {
+    key: key,
+    content: /*#__PURE__*/_jsx("div", {
+      className: "filerobot-c-horizontal-separator"
+    }),
+    disabled: true,
+    hideOption: hideOption
+  };
+};
+export default createSeparator;

package/lib/components/ContextMenu/utils/editMedia.js

@@ -0,0 +1,17 @@
+import { IMAGE_EDITOR_MODES } from '@scaleflex/widget-utils/lib/constants';
+import { imageEditorOpened } from '../../../slices/panels.slice';
+var editMedia = function editMedia(_ref) {
+  var files = _ref.files,
+    dispatch = _ref.dispatch,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? IMAGE_EDITOR_MODES.DEFAULT : _ref$mode,
+    showBackButton = _ref.showBackButton,
+    hideSavingOptions = _ref.hideSavingOptions;
+  dispatch(imageEditorOpened({
+    file: files[0],
+    mode: mode,
+    showBackButton: showBackButton,
+    hideSavingOptions: hideSavingOptions
+  }));
+};
+export default editMedia;

package/lib/components/ContextMenu/utils/getFileLocation.js

@@ -0,0 +1,8 @@
+import getDecodedUriComponent from '@scaleflex/widget-utils/lib/getDecodedUriComponent';
+var getFileLocation = function getFileLocation(i18n, file) {
+  var _file$folder;
+  var fileLocation = (_file$folder = file.folder) === null || _file$folder === void 0 ? void 0 : _file$folder.name;
+  if (fileLocation === '/') return i18n('explorerContextMenuLocateAssetRootFolderInfo');
+  return getDecodedUriComponent(fileLocation);
+};
+export default getFileLocation;

package/lib/components/ContextMenu/utils/getFilteredOptions.js

@@ -0,0 +1,20 @@
+var getFilteredOptions = function getFilteredOptions(options, passedCommonProps) {
+  // First filter hidden options
+  var filteredOptions = options.filter(function (option) {
+    var _option$hideOption;
+    return !((_option$hideOption = option.hideOption) !== null && _option$hideOption !== void 0 && _option$hideOption.call(option, passedCommonProps));
+  });
+
+  // Remove separator duplications and trailing separators
+  return filteredOptions.reduce(function (accum, currentOption, currentIndex) {
+    var _currentOption$key, _accum$key;
+    var isSeparator = (_currentOption$key = currentOption.key) === null || _currentOption$key === void 0 ? void 0 : _currentOption$key.includes('SEPARATOR');
+    var isLastItem = currentIndex === filteredOptions.length - 1;
+    var previousWasSeparator = accum.length && ((_accum$key = accum[accum.length - 1].key) === null || _accum$key === void 0 ? void 0 : _accum$key.includes('SEPARATOR'));
+    if (!isSeparator || !previousWasSeparator && !isLastItem) {
+      accum.push(currentOption);
+    }
+    return accum;
+  }, []);
+};
+export default getFilteredOptions;

package/lib/components/ContextMenu/utils/getProperFolderSelections.js

@@ -0,0 +1,7 @@
+import isEmptyFolderSelection from './isEmptyFolderSelection';
+var getProperFolderSelections = function getProperFolderSelections(folders, currentFolder) {
+  return isEmptyFolderSelection({
+    folders: folders
+  }) ? [currentFolder] : folders;
+};
+export default getProperFolderSelections;

package/lib/components/ContextMenu/utils/isEmptyFolderSelection.js

@@ -0,0 +1,5 @@
+var isEmptyFolderSelection = function isEmptyFolderSelection(_ref) {
+  var folders = _ref.folders;
+  return folders.length === 0;
+};
+export default isEmptyFolderSelection;

package/lib/components/ContextMenu/utils/isFileContextMenu.js

@@ -0,0 +1,5 @@
+import { CONTEXTMENU_TYPES } from '@scaleflex/widget-utils/lib/constants';
+var isFileContextMenu = function isFileContextMenu(type) {
+  return type === CONTEXTMENU_TYPES.FILE;
+};
+export default isFileContextMenu;

package/lib/components/ContextMenu/utils/isFirstFileVisibilityPublic.js

@@ -0,0 +1,9 @@
+import { isVisibilityPublic } from '@scaleflex/widget-utils/lib/visibility';
+var isFirstFileVisibilityPublic = function isFirstFileVisibilityPublic(files) {
+  if (files.length === 1) {
+    var _files$;
+    var visibility = (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.visibility;
+    return isVisibilityPublic(visibility);
+  }
+};
+export default isFirstFileVisibilityPublic;

package/lib/components/ContextMenu/utils/isMenuItemVisible.js

@@ -0,0 +1,5 @@
+var isMenuItemVisible = function isMenuItemVisible(option, props) {
+  var _option$hideOption;
+  return !((_option$hideOption = option.hideOption) !== null && _option$hideOption !== void 0 && _option$hideOption.call(option, props));
+};
+export default isMenuItemVisible;

package/lib/components/ContextMenu/utils/isMixedFiles.js

@@ -0,0 +1,9 @@
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import isPdf from '@scaleflex/widget-utils/lib/isPdf';
+var isMixedFiles = function isMixedFiles(files) {
+  return files.some(function (file) {
+    var _file$type;
+    return isImage(file) || isPdf(file) || (file === null || file === void 0 ? void 0 : (_file$type = file.type) === null || _file$type === void 0 ? void 0 : _file$type.includes('video'));
+  });
+};
+export default isMixedFiles;

package/lib/components/ContextMenu/utils/isMultipleSelection.js

@@ -0,0 +1,6 @@
+var isMultipleSelection = function isMultipleSelection(_ref) {
+  var folders = _ref.folders,
+    files = _ref.files;
+  return folders.length + files.length > 1;
+};
+export default isMultipleSelection;

package/lib/components/ContextMenu/utils/isSeparatorHidden.js

@@ -0,0 +1,7 @@
+import isMenuItemVisible from './isMenuItemVisible';
+var isSeparatorHidden = function isSeparatorHidden(menuItems, props) {
+  return menuItems.filter(function (option) {
+    return isMenuItemVisible(option, props);
+  }).length === 0;
+};
+export default isSeparatorHidden;

package/lib/components/ContextMenu/utils/triggerDownload.js

@@ -0,0 +1,45 @@
+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; }
+import { downloadItems, downloadOneFile, emitExportEvent } from '../../../thunks/downloads.thunks';
+import { ANIMATED_IMG_ACCEPT_HEADER } from '../../../utils/constants';
+import prepareExportedFilesLinks from '../../../utils/prepareExportedFilesLinks';
+import isEmptyFolderSelection from './isEmptyFolderSelection';
+
+// This function handles the following cases:
+// Single file downloads
+// Multiple file/folder downloads
+// Empty folder selection using currentFolder
+// Export-only functionality
+var triggerDownload = function triggerDownload(_ref) {
+  var _ref$files = _ref.files,
+    files = _ref$files === void 0 ? [] : _ref$files,
+    _ref$folders = _ref.folders,
+    folders = _ref$folders === void 0 ? [] : _ref$folders,
+    currentFolder = _ref.currentFolder,
+    preventDownloadDefaultBehavior = _ref.preventDownloadDefaultBehavior,
+    dispatch = _ref.dispatch,
+    triggerDownloadConsentModal = _ref.triggerDownloadConsentModal;
+  if (preventDownloadDefaultBehavior) {
+    return dispatch(emitExportEvent(prepareExportedFilesLinks(files)));
+  }
+  var isFolderSelected = folders.length > 0;
+  var isOneItem = folders.length + files.length === 1;
+  var onConfirmHandler = function onConfirmHandler() {
+    var items = isEmptyFolderSelection({
+      folders: folders
+    }) && files.length === 0 ? [currentFolder] : [].concat(_toConsumableArray(folders), _toConsumableArray(files));
+    var action = isOneItem && !isFolderSelected ? downloadOneFile({
+      file: files[0],
+      headers: ANIMATED_IMG_ACCEPT_HEADER
+    }) : downloadItems({
+      items: items
+    });
+    dispatch(action);
+  };
+  triggerDownloadConsentModal(onConfirmHandler);
+};
+export default triggerDownload;

package/lib/components/CropPanel/CropOptions.js

@@ -0,0 +1,155 @@
+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 { useMemo, useState, useEffect } from 'react';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorer } from '../../hooks';
+import { DEFAULT_CROP_TYPE } from './CropPanel.constants';
+import { convertObjToArray, roundNum } from './CropPanel.utils';
+import ImageResize from './ImageResize';
+import Option from './Option';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var CropOptions = function CropOptions(_ref) {
+  var _selectedCropTypePres;
+  var _ref$imageParams = _ref.imageParams,
+    imageParams = _ref$imageParams === void 0 ? {} : _ref$imageParams,
+    _ref$cropDimensions = _ref.cropDimensions,
+    cropDimensions = _ref$cropDimensions === void 0 ? {} : _ref$cropDimensions,
+    updateTransformations = _ref.updateTransformations,
+    handleCropChange = _ref.handleCropChange,
+    setImageParams = _ref.setImageParams,
+    selections = _ref.selections;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    _useExplorer$opts2$cr = _useExplorer$opts2.cropPresets,
+    cropPresets = _useExplorer$opts2$cr === void 0 ? {} : _useExplorer$opts2$cr;
+  var _useState = useState(DEFAULT_CROP_TYPE),
+    _useState2 = _slicedToArray(_useState, 2),
+    cropType = _useState2[0],
+    setCropType = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cropPreset = _useState4[0],
+    setCropPreset = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isRatioLocked = _useState6[0],
+    setIsRatioLocked = _useState6[1];
+  var file = selections[0];
+  var isRatioButtonDisabled = ![DEFAULT_CROP_TYPE, 'ellipse'].includes(cropType);
+  useEffect(function () {
+    var newParams = _objectSpread(_objectSpread({}, imageParams), {}, {
+      func: ''
+    });
+    setImageParams(newParams);
+    updateTransformations(newParams);
+  }, []);
+  useUpdateEffect(function () {
+    if (isRatioButtonDisabled) {
+      setIsRatioLocked(true);
+    }
+  }, [isRatioButtonDisabled]);
+  var availableCropTypes = useMemo(function () {
+    return [DEFAULT_CROP_TYPE].concat(_toConsumableArray(convertObjToArray(cropPresets)));
+  }, [cropPresets]);
+  var selectedCropTypePresets = cropPresets[cropType];
+  var changeCropPreset = function changeCropPreset(value) {
+    var _value$split = value.split(':'),
+      _value$split2 = _slicedToArray(_value$split, 3),
+      widthOrRatio = _value$split2[0],
+      height = _value$split2[1],
+      autoResize = _value$split2[2];
+    setCropPreset(value);
+    if (!widthOrRatio && !height) {
+      return;
+    }
+    if (widthOrRatio && !height) {
+      handleCropChange(_objectSpread(_objectSpread({}, imageParams), {}, {
+        crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+          autoResize: false,
+          ratio: widthOrRatio
+        })
+      }));
+      return;
+    }
+    var isAutoResizeEnabled = autoResize === 'true';
+    var newWidth = roundNum(parseInt(widthOrRatio));
+    var newHeight = roundNum(parseInt(height));
+    handleCropChange(_objectSpread(_objectSpread(_objectSpread({}, imageParams), isAutoResizeEnabled ? {
+      width: newWidth,
+      height: newHeight
+    } : {}), {}, {
+      crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+        width: newWidth,
+        height: newHeight,
+        autoResize: isAutoResizeEnabled,
+        ratio: newWidth / newHeight
+      })
+    }));
+  };
+  var updateCropType = function updateCropType(newCropType) {
+    setCropType(newCropType);
+    var newSelectedCropTypePresets = cropPresets[newCropType];
+    if (newSelectedCropTypePresets) {
+      var _newSelectedCropTypeP;
+      changeCropPreset(Array.isArray(newSelectedCropTypePresets) ? (_newSelectedCropTypeP = newSelectedCropTypePresets[0]) === null || _newSelectedCropTypeP === void 0 ? void 0 : _newSelectedCropTypeP.value : newSelectedCropTypePresets === null || newSelectedCropTypePresets === void 0 ? void 0 : newSelectedCropTypePresets.value);
+    } else {
+      handleCropChange(_objectSpread(_objectSpread({}, imageParams), {}, {
+        crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+          autoResize: false,
+          ratio: DEFAULT_CROP_TYPE === newCropType ? 'custom' : newCropType
+        })
+      }));
+    }
+  };
+  var updateImageParams = function updateImageParams(newCropDimens) {
+    // TODO(Amr): this function overwrites the image resize params used in imageOptions
+    // we should split the state
+    handleCropChange(_objectSpread(_objectSpread({}, imageParams), {}, {
+      crop: _objectSpread(_objectSpread({}, cropDimensions), {}, {
+        width: roundNum(parseInt(newCropDimens.width)),
+        height: roundNum(parseInt(newCropDimens.height))
+      })
+    }));
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Option, {
+      label: i18n('exportOptionsPresetLabel'),
+      value: cropType,
+      options: availableCropTypes,
+      onChange: updateCropType,
+      block: true
+    }), selectedCropTypePresets && Array.isArray(selectedCropTypePresets) && selectedCropTypePresets.length > 0 && /*#__PURE__*/_jsx(Option, {
+      label: i18n(cropType) || cropType,
+      value: cropPreset || ((_selectedCropTypePres = selectedCropTypePresets[0]) === null || _selectedCropTypePres === void 0 ? void 0 : _selectedCropTypePres.value),
+      options: selectedCropTypePresets,
+      onChange: changeCropPreset,
+      block: true
+    }), /*#__PURE__*/_jsx(ImageResize, {
+      imageParams: cropDimensions,
+      setImageParams: updateImageParams,
+      isRatioLocked: isRatioLocked,
+      setIsRatioLocked: setIsRatioLocked,
+      ratio: cropDimensions.width / cropDimensions.height,
+      file: file,
+      isRatioButtonDisabled: isRatioButtonDisabled,
+      hideOptions: true
+    })]
+  });
+};
+export default CropOptions;

package/lib/components/CropPanel/CropPanel.constants.js

@@ -0,0 +1,44 @@
+var JPEG_QUALITY_OPTIONS = {
+  excellent: 90,
+  good: 75,
+  fair: 60
+};
+var WEBP_QUALITY_OPTIONS = {
+  excellent: 90,
+  good: 75,
+  fair: 60
+};
+var RESIZE_OPTIONS = {
+  large: 1200,
+  medium: 600,
+  small: 300
+};
+var DPI_OPTIONS = [{
+  label: '72 dpi',
+  value: 72
+}, {
+  label: '150 dpi',
+  value: 150
+}, {
+  label: '300 dpi',
+  value: 300
+}];
+var FORMAT_OPTIONS = [{
+  label: 'WEBP',
+  value: 'webp'
+}, {
+  label: 'JPEG',
+  value: 'jpeg'
+}, {
+  label: 'PNG',
+  value: 'png'
+}, {
+  label: 'GIF',
+  value: 'gif'
+}, {
+  label: 'PDF',
+  value: 'pdf'
+}];
+var DEFAULT_CROP_TYPE = 'exportOptionsFreehandLabel';
+var INVALID_INPUT_CHARS = ['-', '+', 'e'];
+export { JPEG_QUALITY_OPTIONS, FORMAT_OPTIONS, WEBP_QUALITY_OPTIONS, RESIZE_OPTIONS, DPI_OPTIONS, DEFAULT_CROP_TYPE, INVALID_INPUT_CHARS };