@scaleflex/widget-explorer 4.1.0 → 4.3.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.3.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.3.0) (2025-10-02)
+
+
+### Features
+
+* add `hideTopBarAddFolderButton` option and implement new folder modal functionality in the explorer component ([7129309](https://code.scaleflex.cloud/scaleflex/widget/commits/712930995f6dfd4a0d874c0638dde61065fd0683))
+
+
+
+
+
+# [4.2.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.2.0) (2025-10-02)
+
+
+### Features
+
+* add `hideTopBarAddFolderButton` option and implement new folder modal functionality in the explorer component ([7129309](https://code.scaleflex.cloud/scaleflex/widget/commits/712930995f6dfd4a0d874c0638dde61065fd0683))
+
+
+
+
+
 # [4.1.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.0.8...v4.1.0) (2025-10-02)
 
 

package/README.md

@@ -1198,6 +1198,13 @@ If `true` force hides the manual sub-tab of variations tab in file window.
 
 If `true` shows the add preset button inside the automatic tab if the user allowed to add.
 
+### `hideTopBarAddFolderButton` ![asset-manager-supported]
+
+<u>Type:</u> `boolean`.
+
+<u>Default:</u> `false`
+
+If `true` hides the add folder button on the topright.
 
 ## Events
 

package/lib/components/FoldersView/index.js

@@ -8,6 +8,8 @@ import { memo, useCallback, useEffect, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
 import Drawer from '@scaleflex/widget-explorer/lib/components/Drawer';
+import { PlusOutline } from '@scaleflex/icons';
+import { Button } from '@scaleflex/ui/core';
 import { useExplorer, useIsSmallScreen } from '../../hooks';
 import { selectIsDetailsViewOpened, detailsViewToggled, selectFileWindowFor } from '../../slices/panels.slice';
 import AssetsList from '../AssetsList';
@@ -27,8 +29,11 @@ import TopBarUploadButton from '../common/TopBarUploadButton';
 import { selectIsDraggingOver } from '../../slices/common.slice';
 import { DETAILS_SIDEBAR_WIDTHS } from '../Details/Details.constants';
 import { selectIsSearchFetchType } from '../../slices/search.slice';
+import { useAddNewFolderModal } from '../Modals';
 import DnD from '../DnD';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { selectIsUserPermittedTo } from '@scaleflex/widget-core/lib/slices/user.slice';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var EMPTY_FOLDERS_VIEW_PLACEHOLDER_DATA = {
   titleI18nKey: 'explorerFoldersViewEmptyTitle',
   hintI18nKeys: ['explorerFoldersViewEmptyHint1', 'explorerFoldersViewEmptyHint2']
@@ -40,6 +45,7 @@ var FoldersView = function FoldersView() {
     i18n = _useExplorer.i18n,
     requestCloseModal = _useExplorer.requestCloseModal;
   var isWidgetSmallSize = useIsSmallScreen();
+  var triggerAddNewFolderModal = useAddNewFolderModal();
   var isSearchFetchType = useSelector(selectIsSearchFetchType);
   var isDetailsViewOpened = useSelector(selectIsDetailsViewOpened);
   var isFoldersTreeOpened = useSelector(selectIsFoldersTreeOpened);
@@ -57,6 +63,9 @@ var FoldersView = function FoldersView() {
   var foldersSortOrder = useSelector(selectFoldersSortOrder);
   var filesSortBy = useSelector(selectFilesSortedBy);
   var filesSortOrder = useSelector(selectFilesSortOrder);
+  var isAllowedToCreateFolder = useSelector(function (state) {
+    return selectIsUserPermittedTo(state, PERMISSIONS.FOLDER_CREATE);
+  });
   var isFilesAndFoldersSortDifferent = useSelector(function (state) {
     return foldersSortedBy !== filesSortBy || foldersSortOrder !== filesSortOrder;
   });
@@ -68,7 +77,8 @@ var FoldersView = function FoldersView() {
     ExploreViewComponent = opts.ExploreViewComponent,
     hideLeftSideBar = opts.hideLeftSideBar,
     useAssetsPicker = opts.useAssetsPicker,
-    assetsPickerModelTitle = opts.assetsPickerModelTitle;
+    assetsPickerModelTitle = opts.assetsPickerModelTitle,
+    hideTopBarAddFolderButton = opts.hideTopBarAddFolderButton;
   useEffect(function () {
     offsetRef.current = filesOffset;
   }, [filesOffset]);
@@ -176,8 +186,24 @@ var FoldersView = function FoldersView() {
       skipPendingDispatch: false
     }));
   };
+  var renderAddFolderButton = function renderAddFolderButton() {
+    return /*#__PURE__*/_jsx(Button, {
+      color: "secondary",
+      startIcon: function startIcon(props) {
+        return /*#__PURE__*/_jsx(PlusOutline, _objectSpread({}, props));
+      },
+      size: "md",
+      onClick: function onClick() {
+        return triggerAddNewFolderModal();
+      },
+      "data-testid": "add-folder-button",
+      children: i18n('explorerFoldersViewTopBarNewFolderButton')
+    });
+  };
   var renderTopBarRightComponent = function renderTopBarRightComponent() {
-    return /*#__PURE__*/_jsx(TopBarUploadButton, {});
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [isAllowedToCreateFolder && !hideTopBarAddFolderButton && renderAddFolderButton(), /*#__PURE__*/_jsx(TopBarUploadButton, {})]
+    });
   };
   var handleRefreshFolder = function handleRefreshFolder() {
     if (!currentFolderPath) {

package/lib/components/Modals/AddNewFolder/AddNewFolder.hooks.js

@@ -0,0 +1,99 @@
+import { useDispatch } from 'react-redux';
+import { useCallback } from 'react';
+import { AddFolder } from '@scaleflex/icons';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { useModal } from '@scaleflex/widget-core/lib/hooks';
+import { PC } from '@scaleflex/widget-common';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import { checkFileOrFolderNameValidation } from '@scaleflex/widget-utils/lib/checkFileOrFolderNameValidation';
+import { InputGroup } from '@scaleflex/ui/core';
+import { useExplorerI18n, useExplorerInformer } from '../../../hooks';
+import { addNewFolder } from '../../../slices/folders.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var useAddNewFolderModal = function useAddNewFolderModal() {
+  var dispatch = useDispatch();
+  var toggleModal = useModal();
+  var theme = useTheme();
+  var i18n = useExplorerI18n();
+  var info = useExplorerInformer();
+
+  // If no path is provided, then the folder will be created in the current folder.
+  var triggerAddNewFolderModal = useCallback(function () {
+    var toFolderPath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var addFolderHandler = function addFolderHandler(_ref) {
+      var data = _ref.data,
+        closeModal = _ref.closeModal,
+        setIsModalLoading = _ref.setIsModalLoading;
+      var folderName = data.folderName;
+      if (folderName) {
+        setIsModalLoading(true);
+        handlePromise(dispatch(addNewFolder({
+          path: toFolderPath,
+          name: folderName
+        })), function () {
+          closeModal();
+          info(i18n('explorerFolderCreatedInfo'), 'success', 5000);
+        }, undefined, function () {
+          setIsModalLoading(false);
+        });
+      } else {
+        info(i18n('explorerFolderNameRequiredInfo'), 'warning', 5000);
+      }
+    };
+    toggleModal({
+      icon: /*#__PURE__*/_jsx(AddFolder, {
+        color: theme.palette[PC.AccentPrimary],
+        width: 29,
+        height: 29
+      }),
+      showTitleLabel: true,
+      disableAutoClose: true,
+      title: i18n('explorerModelAddFolderTitle'),
+      content: function content(_ref2) {
+        var updateData = _ref2.updateData,
+          data = _ref2.data,
+          setPrimaryButtonDisabled = _ref2.setPrimaryButtonDisabled;
+        return /*#__PURE__*/_jsx(InputGroup, {
+          onChange: function onChange(_ref3) {
+            var target = _ref3.target;
+            var error = '';
+            if (checkFileOrFolderNameValidation(target.value)) {
+              error = i18n('mutualizedFolderInvalidNameError');
+            }
+            updateData({
+              folderName: target.value,
+              error: error
+            });
+            setPrimaryButtonDisabled(Boolean(error) || !target.value);
+          },
+          error: Boolean(data.error),
+          hint: data.error,
+          label: i18n('explorerModelNewFolderName'),
+          placeholder: i18n('explorerModelNewFolderPlaceholder'),
+          value: data.folderName || '',
+          fullWidth: true,
+          focusOnMount: true
+        });
+      },
+      buttonPrimaryLabel: i18n('explorerModelAddLabel'),
+      buttonSecondaryBg: 'basic',
+      onButtonPrimaryClick: addFolderHandler,
+      enterKeySubmits: true,
+      modalStyle: {
+        maxWidth: 400
+      },
+      modalFooterStyle: {
+        flexDirection: 'row'
+      },
+      modalSecondaryButton: {
+        width: 170
+      },
+      modalSecondaryButtonColor: 'basic',
+      modalPrimaryButton: {
+        width: 170
+      },
+      disablePrimaryButton: true
+    });
+  }, [i18n, theme]);
+  return triggerAddNewFolderModal;
+};

package/lib/components/Modals/AddNewFolder/index.js

@@ -0,0 +1 @@
+export { useAddNewFolderModal } from './AddNewFolder.hooks';

package/lib/components/Modals/index.js

@@ -1,4 +1,5 @@
 export { default } from './Modals';
+export * from './AddNewFolder';
 export * from './DeleteItems';
 export * from './DeleteModal';
 export * from './DownloadConsent';

package/lib/defaultLocale.js

@@ -1356,5 +1356,6 @@ export default {
   explorerFileWindowAddPresetDescPlaceholder: 'Enter description here',
   explorerFileWindowAddPresetDescLabel: 'Description',
   explorerFileWindowPresetAddedInfo: 'Preset is added!',
-  explorerFileWindowAddPresetNameRegexError: '{ , } , | , \\ , ^ , ~ , @ , spaces , ` and , characters are not allowed'
+  explorerFileWindowAddPresetNameRegexError: '{ , } , | , \\ , ^ , ~ , @ , spaces , ` and , characters are not allowed',
+  explorerFoldersViewTopBarNewFolderButton: 'Add folder'
 };

package/lib/index.js

@@ -1396,7 +1396,8 @@ var Explorer = /*#__PURE__*/function (_Plugin) {
       hideMetadataTab: false,
       hideFileSpecsMetadataFields: false,
       variationsHideManualSubTab: false,
-      variationsShowAddPresetButton: false
+      variationsShowAddPresetButton: false,
+      hideTopBarAddFolderButton: false
     };
 
     // merge default options with the ones set by user

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/widget-explorer",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "Scaleflex explorer for the files uploaded on filerobot, handling them & upload new files.",
   "main": "lib/index.js",
   "style": "dist/style.min.css",
@@ -18,12 +18,12 @@
     "@scaleflex/icons": "^3.0.0-beta.11",
     "@scaleflex/react-url-builder": "^0.0.72",
     "@scaleflex/ui": "^3.0.0-beta.11",
-    "@scaleflex/widget-common": "^4.1.0",
-    "@scaleflex/widget-icons": "^4.1.0",
-    "@scaleflex/widget-informer": "^4.1.0",
-    "@scaleflex/widget-provider-views": "^4.1.0",
-    "@scaleflex/widget-thumbnail-generator": "^4.1.0",
-    "@scaleflex/widget-utils": "^4.1.0",
+    "@scaleflex/widget-common": "^4.3.0",
+    "@scaleflex/widget-icons": "^4.3.0",
+    "@scaleflex/widget-informer": "^4.3.0",
+    "@scaleflex/widget-provider-views": "^4.3.0",
+    "@scaleflex/widget-thumbnail-generator": "^4.3.0",
+    "@scaleflex/widget-utils": "^4.3.0",
     "@transloadit/prettier-bytes": "0.1.0",
     "akamai-filerobot-converter": "^0.1.6",
     "classnames": "^2.2.6",
@@ -51,5 +51,5 @@
     "react-konva": ">=19.0.3"
   },
   "license": "MIT",
-  "gitHead": "471120d67066617a0d8824eae11b07d1f2259473"
+  "gitHead": "712930995f6dfd4a0d874c0638dde61065fd0683"
 }