@bigbinary/neeto-molecules 1.1.7 → 1.1.8

package/dist/ThemeSidebar.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useEffect, useLayoutEffect, useCallback, useMemo, forwardRef, createElement, useImperativeHandle, Fragment, useReducer, useState } from 'react';
-import { Typography, Toastr, Button, Select, ColorPicker, Tag, Dropdown, Input as Input$1, Spinner } from '@bigbinary/neetoui';
+import { Typography, Toastr, Button, Select, ColorPicker, Dropdown, Tooltip, Tag, Input as Input$1, Spinner } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
 import * as yup from 'yup';
 import { Switch, Input, Form } from '@bigbinary/neetoui/formik';
-import { isNotEmpty, findBy, noop as noop$2, capitalize } from '@bigbinary/neeto-commons-frontend/pure';
-import { isEmpty, mergeLeft, path } from 'ramda';
-import { ImageUpload, LeftAlign, CenterAlign, MenuHorizontal, Search, LeftArrow, Plus } from '@bigbinary/neeto-icons';
+import { isNotEmpty, findBy, noop as noop$2, isPresent as isPresent$1, capitalize } from '@bigbinary/neeto-commons-frontend/pure';
+import { isEmpty, mergeLeft, mergeRight, path } from 'ramda';
+import { ImageUpload, LeftAlign, CenterAlign, MenuVertical, MenuHorizontal, Search, LeftArrow, Plus } from '@bigbinary/neeto-icons';
 import { Field } from 'formik';
 import { Slider } from 'antd';
 
@@ -11263,9 +11263,9 @@ var _default = function (file, acceptedFiles) {
   return true;
 };
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -11451,12 +11451,12 @@ function filePickerOptionsTypes(accept) {
     ? accept.filter(function (item) {
       return item === 'audio/*' || item === 'video/*' || item === 'image/*' || item === 'text/*' || /\w+\/[-+.\w]+/g.test(item);
     }).reduce(function (a, b) {
-      return _objectSpread$4(_objectSpread$4({}, a), {}, _defineProperty$1({}, b, []));
+      return _objectSpread$5(_objectSpread$5({}, a), {}, _defineProperty$1({}, b, []));
     }, {}) : {}
   }];
 }
 
-var _excluded$1 = ["children"],
+var _excluded$2 = ["children"],
     _excluded2 = ["open"],
     _excluded3 = ["refKey", "role", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"],
     _excluded4 = ["refKey", "onChange", "onClick"];
@@ -11481,9 +11481,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -11507,7 +11507,7 @@ function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null)
 
 var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      params = _objectWithoutProperties$1(_ref, _excluded$1);
+      params = _objectWithoutProperties$1(_ref, _excluded$2);
 
   var _useDropzone = useDropzone(params),
       open = _useDropzone.open,
@@ -11519,7 +11519,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
-  return /*#__PURE__*/React__default.createElement(Fragment, null, children(_objectSpread$3(_objectSpread$3({}, props), {}, {
+  return /*#__PURE__*/React__default.createElement(Fragment, null, children(_objectSpread$4(_objectSpread$4({}, props), {}, {
     open: open
   })));
 });
@@ -11876,7 +11876,7 @@ var initialState = {
 function useDropzone() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaultProps$options = _objectSpread$3(_objectSpread$3({}, defaultProps), options),
+  var _defaultProps$options = _objectSpread$4(_objectSpread$4({}, defaultProps), options),
       accept = _defaultProps$options.accept,
       disabled = _defaultProps$options.disabled,
       getFilesFromEvent = _defaultProps$options.getFilesFromEvent,
@@ -12240,7 +12240,7 @@ function useDropzone() {
           onDrop = _ref2.onDrop,
           rest = _objectWithoutProperties$1(_ref2, _excluded3);
 
-      return _objectSpread$3(_objectSpread$3(_defineProperty({
+      return _objectSpread$4(_objectSpread$4(_defineProperty({
         onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
         onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
         onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -12280,7 +12280,7 @@ function useDropzone() {
         tabIndex: -1
       }, refKey, inputRef);
 
-      return _objectSpread$3(_objectSpread$3({}, inputProps), rest);
+      return _objectSpread$4(_objectSpread$4({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
   var fileCount = draggedFiles.length;
@@ -12293,7 +12293,7 @@ function useDropzone() {
     maxFiles: maxFiles
   });
   var isDragReject = fileCount > 0 && !isDragAccept;
-  return _objectSpread$3(_objectSpread$3({}, state), {}, {
+  return _objectSpread$4(_objectSpread$4({}, state), {}, {
     isDragAccept: isDragAccept,
     isDragReject: isDragReject,
     isFocused: isFocused && !disabled,
@@ -12309,22 +12309,22 @@ function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
     case 'focus':
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$4(_objectSpread$4({}, state), {}, {
         isFocused: true
       });
 
     case 'blur':
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$4(_objectSpread$4({}, state), {}, {
         isFocused: false
       });
 
     case 'openDialog':
-      return _objectSpread$3(_objectSpread$3({}, initialState), {}, {
+      return _objectSpread$4(_objectSpread$4({}, initialState), {}, {
         isFileDialogActive: true
       });
 
     case 'closeDialog':
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$4(_objectSpread$4({}, state), {}, {
         isFileDialogActive: false
       });
 
@@ -12332,19 +12332,19 @@ function reducer(state, action) {
       /* eslint no-case-declarations: 0 */
       var isDragActive = action.isDragActive,
           draggedFiles = action.draggedFiles;
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$4(_objectSpread$4({}, state), {}, {
         draggedFiles: draggedFiles,
         isDragActive: isDragActive
       });
 
     case 'setFiles':
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$4(_objectSpread$4({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections
       });
 
     case 'reset':
-      return _objectSpread$3({}, initialState);
+      return _objectSpread$4({}, initialState);
 
     default:
       return state;
@@ -12353,8 +12353,8 @@ function reducer(state, action) {
 
 function noop() {}
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var readFile = function readFile(file) {
   return new Promise(function (resolve) {
     var reader = new FileReader();
@@ -12401,7 +12401,7 @@ var transformTheme = function transformTheme(values) {
       answerColor: values.answerColor,
       answerTextColor: values.answerTextColor
     },
-    backgroundImage: _objectSpread$2(_objectSpread$2({}, values.backgroundImage), {}, {
+    backgroundImage: _objectSpread$3(_objectSpread$3({}, values.backgroundImage), {}, {
       backgroundColor: values.backgroundColor,
       backgroundOverlayOpacity: values.backgroundOverlayOpacity,
       isDominantBackgroundColorEnabled: values.isDominantBackgroundColorEnabled,
@@ -12884,8 +12884,8 @@ var ColorBlock = function ColorBlock(_ref) {
   }));
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FontPickerBlock = function FontPickerBlock(_ref) {
   var label = _ref.label,
     _ref$placeholder = _ref.placeholder,
@@ -12907,7 +12907,7 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
     styles: {
       option: function option(styles, _ref2) {
         var data = _ref2.data;
-        return _objectSpread$1(_objectSpread$1({}, styles), {}, {
+        return _objectSpread$2(_objectSpread$2({}, styles), {}, {
           fontFamily: data.value
         });
       }
@@ -13213,6 +13213,76 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
+var MENU_ITEM_TYPES = {
+  menuItem: "menuItem",
+  divider: "divider"
+};
+var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom"
+};
+
+var _excluded$1 = ["key", "onClick", "label", "type", "isVisible"];
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem,
+  Divider = Dropdown.Divider;
+var MoreDropdown = function MoreDropdown(_ref) {
+  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
+    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    menuTopChildren = _ref.menuTopChildren,
+    menuBottomChildren = _ref.menuBottomChildren,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
+  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Button, _extends({
+      disabled: true,
+      "data-testid": "nui-dropdown-button",
+      icon: targetIcon,
+      iconPosition: "right",
+      size: "medium",
+      style: "text"
+    }, dropdownButtonProps))));
+  }
+  return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
+    autoWidth: true,
+    className: "flex",
+    disabled: isDisabled,
+    icon: targetIcon,
+    buttonProps: _objectSpread$1({
+      className: "min-h-0 flex-shrink-0",
+      style: "text"
+    }, dropdownButtonProps)
+  }, dropdownProps), /*#__PURE__*/React__default.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
+    var key = _ref2.key,
+      onClick = _ref2.onClick,
+      label = _ref2.label,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref2$type,
+      _ref2$isVisible = _ref2.isVisible,
+      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      menuItemProps = _objectWithoutProperties(_ref2, _excluded$1);
+    if (!isVisible) return null;
+    return type === MENU_ITEM_TYPES.menuItem ? /*#__PURE__*/React__default.createElement(MenuItem.Button, _extends({
+      key: key
+    }, _objectSpread$1({
+      onClick: onClick
+    }, menuItemProps)), label) : /*#__PURE__*/React__default.createElement(Divider, {
+      key: key
+    });
+  }), menuBottomChildren));
+};
+
 var _excluded = ["name"];
 var ThemeCard = function ThemeCard(_ref) {
   var _ref$active = _ref.active,
@@ -13234,6 +13304,35 @@ var ThemeCard = function ThemeCard(_ref) {
     if (isApplyingTheme) return;
     onApplyTheme(theme);
   };
+  var moreMenuItems = [{
+    "data-cy": "theme-edit-button",
+    key: "theme-edit-button",
+    onClick: function onClick() {
+      return onEditTheme(theme);
+    },
+    label: t("neetoMolecules.common.actions.edit"),
+    isVisible: isPresent$1(onEditTheme)
+  }, {
+    isVisible: isPresent$1(onCloneTheme),
+    "data-cy": "theme-clone-button",
+    key: "theme-clone-button",
+    onClick: function onClick() {
+      return onCloneTheme(theme);
+    },
+    label: t("neetoMolecules.themeSidebar.themeOptions.clone")
+  }, {
+    isVisible: isPresent$1(onDeleteTheme),
+    type: "divider",
+    key: "divider"
+  }, {
+    isVisible: isPresent$1(onDeleteTheme),
+    "data-cy": "theme-delete-button",
+    key: "theme-delete-button",
+    onClick: function onClick() {
+      return onDeleteTheme(theme);
+    },
+    label: t("neetoMolecules.themeSidebar.themeOptions.delete")
+  }];
   return /*#__PURE__*/React__default.createElement("div", {
     className: "group space-y-2",
     "data-cy": active ? "active-theme-card" : "theme-card",
@@ -13299,31 +13398,16 @@ var ThemeCard = function ThemeCard(_ref) {
     size: "small",
     style: "link",
     onClick: handleApplyTheme
-  }), /*#__PURE__*/React__default.createElement(Dropdown, {
+  }), /*#__PURE__*/React__default.createElement(MoreDropdown, {
     buttonProps: {
-      "data-cy": "theme-card-options"
+      buttonSize: "small"
     },
-    buttonSize: "small",
-    buttonStyle: "text",
-    className: "flex flex-shrink-0",
-    icon: MenuHorizontal,
-    strategy: "fixed"
-  }, /*#__PURE__*/React__default.createElement(Dropdown.Menu, null, onEditTheme && /*#__PURE__*/React__default.createElement(Dropdown.MenuItem.Button, {
-    "data-cy": "theme-edit-button",
-    onClick: function onClick() {
-      return onEditTheme(theme);
-    }
-  }, t("neetoMolecules.common.actions.edit")), onCloneTheme && /*#__PURE__*/React__default.createElement(Dropdown.MenuItem.Button, {
-    "data-cy": "theme-clone-button",
-    onClick: function onClick() {
-      return onCloneTheme(theme);
-    }
-  }, t("neetoMolecules.themeSidebar.themeOptions.clone")), onDeleteTheme && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Dropdown.Divider, null), /*#__PURE__*/React__default.createElement(Dropdown.MenuItem.Button, {
-    "data-cy": "theme-delete-button",
-    onClick: function onClick() {
-      return onDeleteTheme(theme);
+    menuItems: moreMenuItems,
+    dropdownButtonProps: {
+      "data-cy": "theme-card-options",
+      strategy: "fixed"
     }
-  }, t("neetoMolecules.themeSidebar.themeOptions.delete"))))))));
+  }))));
 };
 
 var Themes = function Themes(_ref) {
@@ -13396,9 +13480,9 @@ var Themes = function Themes(_ref) {
       isApplyingTheme: applyingThemeId === theme.id,
       isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
-      theme: theme,
       onApplyTheme: onApplyTheme,
       onCloneTheme: onCloneTheme,
+      theme: theme,
       onSetPreviewTheme: setPreviewingTheme
     });
   })))), isNotEmpty(filteredThemes) && /*#__PURE__*/React__default.createElement("div", {
@@ -13417,11 +13501,11 @@ var Themes = function Themes(_ref) {
       isHighLightedTheme: theme.id === themeToHighlight,
       isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
-      theme: theme,
       onApplyTheme: onApplyTheme,
       onCloneTheme: onCloneTheme,
-      onDeleteTheme: !isActive && onDeleteTheme,
       onEditTheme: onEditTheme,
+      theme: theme,
+      onDeleteTheme: !isActive ? onDeleteTheme : null,
       onSetPreviewTheme: setPreviewingTheme
     });
   }))));