@scaleflex/widget-explorer 4.3.0 → 4.4.0

package/lib/components/Details/MultipleItems.js

@@ -1,71 +0,0 @@
-import { useSelector } from 'react-redux';
-import { Assets, Folders } from '@scaleflex/icons';
-import { TooltipV2 } from '@scaleflex/ui/core';
-import { NoAssets } from '@scaleflex/widget-icons/lib';
-import { selectAllSelectedItemsCount, selectIsFileSelected, selectIsFolderSelected } from '../../slices/selections.slice';
-import { useExplorerI18n, useToLocaleNumber } from '../../hooks';
-import Styled from './DetailsSideBar.styled';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var MultipleItems = function MultipleItems(_ref) {
-  var details = _ref.details;
-  var i18n = useExplorerI18n();
-  var toLocaleNumber = useToLocaleNumber();
-  var selectedItemsCount = useSelector(selectAllSelectedItemsCount);
-  var isFolderSelected = useSelector(selectIsFolderSelected);
-  var isFileSelected = useSelector(selectIsFileSelected);
-  var renderAssetsPlaceholder = function renderAssetsPlaceholder() {
-    if (isFolderSelected && isFileSelected) {
-      return /*#__PURE__*/_jsx(Styled.AssetsIcon, {
-        children: /*#__PURE__*/_jsx(Assets, {
-          size: 120
-        })
-      });
-    }
-    if (isFolderSelected && selectedItemsCount) {
-      return /*#__PURE__*/_jsx(Styled.AssetsIcon, {
-        children: /*#__PURE__*/_jsx(Folders, {
-          size: 120
-        })
-      });
-    }
-    if (!selectedItemsCount) {
-      return /*#__PURE__*/_jsxs(Styled.AssetsPreview, {
-        children: [/*#__PURE__*/_jsx(NoAssets, {}), /*#__PURE__*/_jsx("label", {
-          children: i18n('detailSideBarPreviewAssetLabel')
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsx(Styled.AssetsIcon, {
-      children: /*#__PURE__*/_jsx(Assets, {
-        size: 120
-      })
-    });
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderAssetsPlaceholder(), /*#__PURE__*/_jsx(Styled.SideDetailsScrollableBody, {
-      children: !!selectedItemsCount && /*#__PURE__*/_jsx(Styled.SideDetailsNavWrapper, {
-        children: details.map(function (_ref2) {
-          var i18nKey = _ref2.i18nKey,
-            translatableValue = _ref2.translatableValue,
-            value = _ref2.value;
-          return /*#__PURE__*/_jsxs("li", {
-            children: [/*#__PURE__*/_jsx(Styled.ItemLabelWrapper, {
-              children: /*#__PURE__*/_jsx(TooltipV2, {
-                size: "md",
-                title: i18n(i18nKey),
-                children: /*#__PURE__*/_jsx(Styled.ItemLabel, {
-                  children: i18n(i18nKey)
-                })
-              })
-            }), /*#__PURE__*/_jsx("div", {
-              children: /*#__PURE__*/_jsx(Styled.MultipleItem, {
-                children: toLocaleNumber(translatableValue ? i18n(value) || value : value)
-              })
-            })]
-          }, i18nKey);
-        })
-      })
-    })]
-  });
-};
-export default MultipleItems;

package/lib/components/Details/TabChips.js

@@ -1,51 +0,0 @@
-import { useSelector } from 'react-redux';
-import { DETAILS_SIDEBAR_TAB, DETAILS_SIDEBAR_TABS } from './Details.constants';
-import { useExplorer } from '../../hooks';
-import Styled from './DetailsSideBar.styled';
-import { selectIsM0LegacyMeta } from '../../slices/metadata.slice';
-import { jsx as _jsx } from "react/jsx-runtime";
-var DetailsSidebarTabChips = function DetailsSidebarTabChips(_ref) {
-  var activeTabId = _ref.activeTabId,
-    setActiveTabId = _ref.setActiveTabId,
-    variantComponents = _ref.variantComponents;
-  var _useExplorer = useExplorer(),
-    hideMetadataTab = _useExplorer.opts.hideMetadataTab,
-    i18n = _useExplorer.i18n;
-  var isM0LegacyMeta = useSelector(selectIsM0LegacyMeta);
-  var isAtMaxOneTab = Object.values(variantComponents || {}).length < 2;
-  if (isAtMaxOneTab) {
-    return null;
-  }
-  var handleChangeTab = function handleChangeTab(newTabId) {
-    var _DETAILS_SIDEBAR_TAB$, _DETAILS_SIDEBAR_TAB$2;
-    var isTabDisabled = !variantComponents[newTabId] || ((_DETAILS_SIDEBAR_TAB$ = DETAILS_SIDEBAR_TAB[newTabId]) === null || _DETAILS_SIDEBAR_TAB$ === void 0 ? void 0 : (_DETAILS_SIDEBAR_TAB$2 = _DETAILS_SIDEBAR_TAB$.disabled) === null || _DETAILS_SIDEBAR_TAB$2 === void 0 ? void 0 : _DETAILS_SIDEBAR_TAB$2.call(_DETAILS_SIDEBAR_TAB$, {
-      isM0LegacyMeta: isM0LegacyMeta
-    }));
-    if (isTabDisabled) {
-      return;
-    }
-    setActiveTabId(newTabId);
-  };
-  return /*#__PURE__*/_jsx(Styled.Tabs, {
-    onChange: handleChangeTab,
-    value: activeTabId,
-    children: DETAILS_SIDEBAR_TABS.map(function (_ref2) {
-      var i18nKey = _ref2.i18nKey,
-        id = _ref2.id,
-        disabled = _ref2.disabled,
-        hide = _ref2.hide;
-      return hide !== null && hide !== void 0 && hide({
-        hideMetadataTab: hideMetadataTab
-      }) ? false : /*#__PURE__*/_jsx(Styled.Tab, {
-        size: "lg",
-        label: i18n(i18nKey),
-        value: id,
-        disabled: !variantComponents[id] || (disabled === null || disabled === void 0 ? void 0 : disabled({
-          isM0LegacyMeta: isM0LegacyMeta
-        })),
-        active: id === activeTabId
-      }, id);
-    }).filter(Boolean)
-  });
-};
-export default DetailsSidebarTabChips;

package/lib/components/Details/TabPanels.js

@@ -1,42 +0,0 @@
-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); }
-var _excluded = ["SharedDataComponent"];
-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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import Styled from './DetailsSideBar.styled';
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-var TabPanels = function TabPanels(_ref) {
-  var _ref$variantComponent = _ref.variantComponents,
-    _ref$variantComponent2 = _ref$variantComponent === void 0 ? {} : _ref$variantComponent,
-    SharedDataComponent = _ref$variantComponent2.SharedDataComponent,
-    itemVariantComponents = _objectWithoutProperties(_ref$variantComponent2, _excluded),
-    activeTabId = _ref.activeTabId,
-    setActiveTabId = _ref.setActiveTabId;
-  var renderTabPanel = function renderTabPanel(id) {
-    var sharedData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var ItemVariantComponent = itemVariantComponents[id];
-    return activeTabId === id && /*#__PURE__*/_createElement(ItemVariantComponent, _objectSpread(_objectSpread({}, sharedData), {}, {
-      TabPanelWrapper: Styled.TabPanel,
-      key: id,
-      activeTabId: activeTabId
-    }));
-  };
-  var renderTabPanels = function renderTabPanels(sharedData) {
-    return Object.keys(itemVariantComponents || {}).map(function (id) {
-      return renderTabPanel(id, sharedData);
-    });
-  };
-
-  // If we have shared/common data to be shared between the item's variants/tabs then we wrap the item's tabs function to get the shared data as param.
-  return SharedDataComponent ? /*#__PURE__*/_jsx(SharedDataComponent, {
-    setActiveTabId: setActiveTabId,
-    activeTabId: activeTabId,
-    renderTabPanels: renderTabPanels
-  }) : renderTabPanels();
-};
-export default TabPanels;

package/lib/components/Details/Title.js

@@ -1,52 +0,0 @@
-import { useSelector } from 'react-redux';
-import { TooltipV2 } from '@scaleflex/ui/core';
-import { selectSelectedFiles, selectSelectedFilesUuids, selectSelectedFolders, selectSelectedFoldersUuids } from '../../slices/selections.slice';
-import { prepareHeader } from './Details.utils';
-import { useExplorerI18n, useToLocaleNumber } from '../../hooks';
-import Styled from './DetailsSideBar.styled';
-import { selectIsFoldersView } from '../../slices/views.slice';
-import { selectCurrentFolder } from '../../slices/folders.slice';
-import { jsx as _jsx } from "react/jsx-runtime";
-var selectSelectedItemName = function selectSelectedItemName(state) {
-  var currentFoldersCount = selectSelectedFoldersUuids(state).length;
-  var currentFilesCount = selectSelectedFilesUuids(state).length;
-  if (currentFoldersCount === 1 && currentFilesCount === 0) {
-    var _selectSelectedFolder;
-    return (_selectSelectedFolder = selectSelectedFolders(state)[0]) === null || _selectSelectedFolder === void 0 ? void 0 : _selectSelectedFolder.name;
-  }
-  if (currentFilesCount === 1 && currentFoldersCount === 0) {
-    var _selectSelectedFiles$;
-    return (_selectSelectedFiles$ = selectSelectedFiles(state)[0]) === null || _selectSelectedFiles$ === void 0 ? void 0 : _selectSelectedFiles$.name;
-  }
-  return selectIsFoldersView(state) && currentFoldersCount + currentFilesCount === 0 && selectCurrentFolder(state).name;
-};
-var DetailsSidebarTitle = function DetailsSidebarTitle() {
-  var i18n = useExplorerI18n();
-  var toLocaleNumber = useToLocaleNumber();
-  var selectedFoldersCount = useSelector(function (state) {
-    return selectSelectedFoldersUuids(state).length;
-  });
-  var selectedFilesCount = useSelector(function (state) {
-    return selectSelectedFilesUuids(state).length;
-  });
-  var itemName = useSelector(selectSelectedItemName);
-  var title = prepareHeader({
-    itemName: itemName,
-    selectedFoldersCount: selectedFoldersCount,
-    selectedFilesCount: selectedFilesCount,
-    i18n: i18n,
-    toLocaleNumber: toLocaleNumber
-  });
-  return /*#__PURE__*/_jsx(Styled.SideDetailsTitle, {
-    children: /*#__PURE__*/_jsx(TooltipV2, {
-      position: "left",
-      size: "md",
-      title: title,
-      arrow: true,
-      children: /*#__PURE__*/_jsx("span", {
-        children: title
-      })
-    })
-  });
-};
-export default DetailsSidebarTitle;

package/lib/components/Details/index.js

@@ -1,53 +0,0 @@
-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 } from 'react';
-import { useSelector } from 'react-redux';
-import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
-import { selectSelectedFiles, selectSelectedFolders } from '../../slices/selections.slice';
-import { DETAILS_SIDEBAR_TAB_IDS } from './Details.constants';
-import { detailsVariantToComponents, getDetailsType } from './Details.utils';
-import Styled from './DetailsSideBar.styled';
-import DetailsSidebarTabs from './TabChips';
-import TabPanels from './TabPanels';
-import DetailsSidebarTitle from './Title';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var defaultTabId = DETAILS_SIDEBAR_TAB_IDS.GENERAL;
-var Details = function Details(_ref) {
-  var showCurrentFolderIfNoneSelected = _ref.showCurrentFolderIfNoneSelected;
-  var selectedFolders = useSelector(selectSelectedFolders);
-  var selectedFiles = useSelector(selectSelectedFiles);
-  var _useState = useState(defaultTabId),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeTabId = _useState2[0],
-    setActiveTabId = _useState2[1];
-  var variantType = getDetailsType({
-    showCurrentFolderIfNoneSelected: showCurrentFolderIfNoneSelected,
-    selectedFiles: selectedFiles,
-    selectedFolders: selectedFolders
-  });
-  var variantComponents = detailsVariantToComponents[variantType];
-  useUpdateEffect(function () {
-    if (selectedFolders.length + selectedFiles.length === 0 || !(variantComponents !== null && variantComponents !== void 0 && variantComponents[activeTabId])) {
-      setActiveTabId(defaultTabId);
-    }
-  }, [selectedFolders, selectedFiles]);
-  return /*#__PURE__*/_jsxs(Styled.DetailsWrapper, {
-    className: "filerobot-Explorer-Details",
-    children: [/*#__PURE__*/_jsxs(Styled.DetailsHeader, {
-      children: [/*#__PURE__*/_jsx(DetailsSidebarTitle, {}), /*#__PURE__*/_jsx(DetailsSidebarTabs, {
-        activeTabId: activeTabId,
-        setActiveTabId: setActiveTabId,
-        variantComponents: variantComponents
-      })]
-    }), variantComponents && /*#__PURE__*/_jsx(TabPanels, {
-      activeTabId: activeTabId,
-      variantComponents: variantComponents,
-      setActiveTabId: setActiveTabId
-    })]
-  });
-};
-export default Details;

package/lib/components/DnD/Dnd.styled.js

@@ -1,11 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { PC } from '@scaleflex/widget-common';
-import styled from 'styled-components';
-var DragImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  min-width: 200px;\n  background-color: ", ";\n  z-index: 1400;\n  pointer-events: none;\n"])), function (props) {
-  return props.theme.palette[PC.BackgroundPrimaryHover];
-});
-var Styled = {
-  DragImage: DragImage
-};
-export default Styled;

package/lib/components/DnD/DragImage.js

@@ -1,61 +0,0 @@
-import { useSelector } from 'react-redux';
-import { Badge } from '@scaleflex/ui/core';
-import { Assets, Folders } from '@scaleflex/icons';
-import { useTheme } from '@scaleflex/ui/theme/hooks';
-import { PC } from '@scaleflex/widget-common';
-import Styled from './Dnd.styled';
-import useExplorerI18n from '../../hooks/useExplorerI18n';
-import { selectSelectedFilesUuids, selectSelectedFoldersUuids } from '../../slices/selections.slice';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var DragImage = function DragImage() {
-  var i18n = useExplorerI18n();
-  var theme = useTheme();
-  var iconPrimaryColor = theme.palette[PC.IconsPrimary];
-  var selectedFoldersCount = useSelector(function (state) {
-    return selectSelectedFoldersUuids(state).length;
-  });
-  var selectedFilesCount = useSelector(function (state) {
-    return selectSelectedFilesUuids(state).length;
-  });
-  var getIcon = function getIcon() {
-    if (selectedFoldersCount === 0) {
-      return /*#__PURE__*/_jsx(Assets, {
-        color: iconPrimaryColor
-      });
-    }
-    return /*#__PURE__*/_jsx(Folders, {
-      color: iconPrimaryColor
-    });
-  };
-  var getText = function getText() {
-    if (selectedFilesCount === 0) {
-      return i18n('mutualizeFoldersLabel');
-    } else if (selectedFoldersCount === 0) {
-      return i18n('mutualizedFilesLabel');
-    } else {
-      return i18n('mutualizedFoldersFilesLabel');
-    }
-  };
-  return /*#__PURE__*/_jsx(Styled.DragImage, {
-    id: "filerobot-drag-img",
-    className: "filerobot-ProviderBrowserItem item-folder",
-    children: /*#__PURE__*/_jsxs("button", {
-      type: "button",
-      className: "filerobot-u-reset filerobot-ProviderBrowserItem-inner-folder",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "filerobot-ProviderBrowserItem-folderLiIcon",
-        children: getIcon()
-      }), /*#__PURE__*/_jsx("div", {
-        className: "filerobot-ProviderBrowserItem-inner-folder-title",
-        children: getText()
-      }), /*#__PURE__*/_jsx(Badge, {
-        badgeContent: selectedFoldersCount + selectedFilesCount,
-        color: "secondary",
-        fontSize: 12,
-        inline: true,
-        size: 20
-      })]
-    })
-  });
-};
-export default DragImage;

package/lib/components/DnD/index.js

@@ -1,219 +0,0 @@
-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 { cloneElement } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import getDroppedFiles from '@scaleflex/widget-utils/lib/getDroppedFiles';
-import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
-import isFolder from '@scaleflex/widget-utils/lib/isFolder';
-import { useExplorer } from '../../hooks';
-import { moveItemsFromDragging } from '../../thunks/items.thunks';
-import { dragInternal, dragItemsUpdate, dragMultipleItems, dragOuter, dragToggle, selectDraggableItems, selectInternalDrag, selectIsDraggingMultipleItems, selectOuterDrag } from '../../slices/drag.slice';
-import { getAllSelectedItems } from '../../slices/selections.slice';
-var DnD = function DnD(_ref) {
-  var children = _ref.children,
-    _ref$disableDrop = _ref.disableDrop,
-    disableDrop = _ref$disableDrop === void 0 ? false : _ref$disableDrop,
-    _ref$disableDrag = _ref.disableDrag,
-    disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
-    draggedItem = _ref.item,
-    _ref$draggable = _ref.draggable,
-    draggable = _ref$draggable === void 0 ? true : _ref$draggable,
-    _ref$applyBgOnCurrent = _ref.applyBgOnCurrentTargetOnly,
-    applyBgOnCurrentTargetOnly = _ref$applyBgOnCurrent === void 0 ? false : _ref$applyBgOnCurrent;
-  var dispatch = useDispatch();
-  var draggableItems = useSelector(selectDraggableItems);
-  var outerDrag = useSelector(selectOuterDrag);
-  var internalDrag = useSelector(selectInternalDrag);
-  var isDraggingMultipleItems = useSelector(selectIsDraggingMultipleItems);
-  var _useExplorer = useExplorer(),
-    log = _useExplorer.log,
-    info = _useExplorer.info,
-    i18n = _useExplorer.i18n,
-    addFiles = _useExplorer.addFiles,
-    opts = _useExplorer.opts;
-  var disableDnDActions = opts.disableDnDActions,
-    disableUpload = opts.disableUpload;
-  var handleDraggedItem = function handleDraggedItem(id, type) {
-    var draggedElement = document.querySelector("[data-filerobot-focusable-uuid=\"".concat(id, "\"]"));
-    if (draggedElement) {
-      if (type === 'start') {
-        draggedElement.setAttribute('is_dragged', true);
-      } else {
-        draggedElement.removeAttribute('is_dragged');
-        draggedElement.style.opacity = '';
-      }
-    }
-  };
-  var dropToUpload = function dropToUpload(event, selectedFolder) {
-    onDragEnd();
-
-    // 3. Add all dropped files
-    var executedDropErrorOnce = false;
-    var logDropError = function logDropError(error) {
-      log(error, 'error');
-
-      // In practice all drop errors are most likely the same, so let's just show one to avoid overwhelming the user
-      if (!executedDropErrorOnce) {
-        info(error.message, 'error', 5000);
-        executedDropErrorOnce = true;
-      }
-    };
-    getDroppedFiles(event.dataTransfer, {
-      logDropError: logDropError
-    }).then(function (files) {
-      if (files.length > 0) {
-        log('[Explorer] Files were dropped');
-        addFiles(files, selectedFolder);
-      }
-    });
-  };
-  var getDraggedIds = function getDraggedIds(item) {
-    return item.map(function (item) {
-      return item === null || item === void 0 ? void 0 : item.uuid;
-    });
-  };
-  var isDropZone = function isDropZone(event) {
-    return event.target !== document.querySelector('[is_dragged]');
-  };
-  var onDragEnd = function onDragEnd() {
-    dispatch(dragToggle(false));
-    dispatch(dragMultipleItems(false));
-    dispatch(dragItemsUpdate([]));
-    dispatch(dragInternal(false));
-    dispatch(dragOuter(false));
-  };
-  var getItemIdAndUpdate = function getItemIdAndUpdate(arr, type) {
-    return arr.forEach(function (id) {
-      return handleDraggedItem(id, type);
-    });
-  };
-  var handleDragStart = function handleDragStart(event) {
-    var selectedItems = dispatch(getAllSelectedItems());
-    var uuids = getDraggedIds(selectedItems);
-    var items = selectedItems;
-    dispatch(dragInternal(true));
-    if (selectedItems.length > 1) {
-      getItemIdAndUpdate(uuids, 'start');
-      var img = new Image();
-      event.dataTransfer.setDragImage(img, 0, 0);
-      dispatch(dragMultipleItems(true));
-    } else {
-      items = [draggedItem];
-      getItemIdAndUpdate(getDraggedIds(items), 'start');
-    }
-    dispatch(dragItemsUpdate(items));
-    dispatch(dragToggle(true));
-  };
-  var getColorableTarget = function getColorableTarget(event) {
-    return applyBgOnCurrentTargetOnly ? event.currentTarget : event.target;
-  };
-  var handleDragEnd = function handleDragEnd(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    getColorableTarget(event).style.backgroundColor = '';
-    getItemIdAndUpdate(getDraggedIds(draggableItems), 'end');
-    onDragEnd();
-  };
-  var handleDragLeave = function handleDragLeave(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!applyBgOnCurrentTargetOnly) {
-      getColorableTarget(event).style.backgroundColor = '';
-    }
-  };
-  var handleDragOver = function handleDragOver(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (internalDrag) return;
-    event.dataTransfer.dropEffect = 'copy';
-    if (!outerDrag) {
-      dispatch(dragOuter(true));
-      dispatch(dragToggle(true));
-    }
-  };
-  var handleDragEnter = function handleDragEnter(event) {
-    event.stopPropagation();
-    event.preventDefault();
-
-    // TODO(Amr): find a way to show hover color only for the hovered target and not it is children
-    // We can check if the target has draggable attribute, i tested with folderTree and it works good
-    // The issue with gridView as the drag and drop target are big in the size and we can't find the element that has the draggable attribute
-    // as an idea we can have custom small drag image instead of the default one
-    if (isDropZone(event)) {
-      getColorableTarget(event).style.backgroundColor = '#EFF3F6';
-    }
-  };
-  var handleDrag = function handleDrag(event) {
-    var dragImg = document.getElementById('filerobot-drag-img');
-    var body = document.querySelector('.filerobot-ProviderBrowser-body');
-    var top = event.clientX - body.getBoundingClientRect().left - 45;
-    var left = event.clientY - body.getBoundingClientRect().top - 45;
-    dragImg.style.left = top + 'px';
-    dragImg.style.top = left + 'px';
-  };
-  var handleDrop = function handleDrop(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    getColorableTarget(event).style.backgroundColor = '';
-    var selectedFolder = draggedItem;
-    if (outerDrag) {
-      dropToUpload(event, selectedFolder);
-      return;
-    }
-    var toFolderPath = selectedFolder.path;
-    var isMovingToSameFolder = draggableItems.some(function (_ref2) {
-      var _ref2$folder = _ref2.folder,
-        folder = _ref2$folder === void 0 ? {} : _ref2$folder,
-        _ref2$path = _ref2.path,
-        path = _ref2$path === void 0 ? '' : _ref2$path;
-      return folder.name === toFolderPath || path.substring(0, path.lastIndexOf('/')) === toFolderPath;
-    });
-    var movedFolderToItsChild = !isMovingToSameFolder && draggableItems.find(function (item) {
-      return isFolder(item) && item.path && toFolderPath.includes("".concat(item.path, "/"));
-    });
-    if (isMovingToSameFolder) {
-      info(i18n('explorerMovedAlreadyExistsInfo', {
-        smart_count: draggableItems.length
-      }), 'warning');
-    } else if (movedFolderToItsChild) {
-      info(i18n('explorerMoveFolderToChildError', {
-        movable_path: movedFolderToItsChild.path,
-        to_path: toFolderPath
-      }), 'warning');
-    } else {
-      handlePromise(dispatch(moveItemsFromDragging({
-        items: draggableItems,
-        toFolder: selectedFolder
-      })), function () {
-        info(i18n('explorerMovedSuccessfullyInfo'), 'success');
-      }, function (errorCode) {
-        if (errorCode === 'SAME_PATH') {
-          info(i18n('explorerMovedAlreadyExistsInfo', {
-            smart_count: draggableItems.length
-          }));
-        }
-      });
-    }
-    getItemIdAndUpdate(getDraggedIds(draggableItems), 'end');
-    onDragEnd();
-  };
-  var onDrag = isDraggingMultipleItems ? handleDrag : null;
-  var dragEvents = {
-    draggable: draggable,
-    onDrag: onDrag,
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd
-  };
-  var dropEvents = {
-    onDrop: handleDrop,
-    onDragEnter: handleDragEnter,
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave
-  };
-  return /*#__PURE__*/cloneElement(children, _objectSpread({}, draggable ? _objectSpread(_objectSpread({}, disableDrag || disableDnDActions || disableUpload ? {} : dragEvents), disableDrop || disableDnDActions || disableUpload ? {} : dropEvents) : {}));
-};
-export default DnD;

package/lib/components/Drawer/Drawer.styled.js

@@ -1,45 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import styled, { css } from 'styled-components';
-import { PC, PSH } from '@scaleflex/widget-common';
-import { IconButton } from '@scaleflex/ui/core';
-var resizerBoxShadowMixin = function resizerBoxShadowMixin(_ref) {
-  var position = _ref.position,
-    noResizerShadow = _ref.noResizerShadow,
-    _ref$theme = _ref.theme,
-    shadows = _ref$theme.shadows,
-    breakpoints = _ref$theme.breakpoints;
-  if (noResizerShadow) return;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    box-shadow: ", ";\n\n  ", " {\n    box-shadow: ", ";\n  }\n\n  ", " & {\n    box-shadow: ", ";\n  }\n\n  ", " & {\n    box-shadow: ", ";\n  }\n  "])), position === 'left' ? shadows[PSH.LeftPanelMd] : shadows[PSH.RightPanelMd], breakpoints.down('lg'), position === 'left' ? shadows[PSH.LeftPanelSm] : shadows[PSH.RightPanelSm], breakpoints.classes.md, position === 'left' ? shadows[PSH.LeftPanelSm] : shadows[PSH.RightPanelSm], breakpoints.classes.sm, position === 'left' ? shadows[PSH.LeftPanelSm] : shadows[PSH.RightPanelSm]);
-};
-var Resizer = styled.div(function (_ref2) {
-  var $size = _ref2.$size,
-    disableResizer = _ref2.disableResizer,
-    shouldApplyTopPadding = _ref2.shouldApplyTopPadding,
-    noTopMargin = _ref2.noTopMargin,
-    noBorderRadius = _ref2.noBorderRadius;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: stretch;\n  flex-flow: row nowrap;\n  z-index: 1200;\n  border-radius: ", ";\n  margin-top: ", ";\n  padding-bottom: 0px;\n  width: ", ";\n  flex-grow: ", ";\n  transition: padding-top 0.2s ease-in-out, margin-left 0.2s ease-out;\n  ", "\n  ", "\n"])), noBorderRadius ? 0 : '4px', noTopMargin ? 0 : '12px', $size !== 0 && !disableResizer && 'auto', $size !== 0 && !disableResizer && 0, shouldApplyTopPadding && 'padding-top: 38px;', resizerBoxShadowMixin);
-});
-var ResizerHandler = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: col-resize;\n  width: 12px;\n  height: 50px;\n\n  & > span {\n    display: inline-block;\n    overflow: hidden;\n    font-size: 12px;\n    font-weight: bold;\n    font-family: sans-serif;\n    letter-spacing: 1px;\n    color: #b3b3b3;\n    text-shadow: 1px 0 1px rgb(90, 90, 90);\n    line-height: 4px;\n  }\n"])));
-var ResizerBar = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: col-resize;\n  width: 2px;\n  background: transparent;\n  display: flex;\n  z-index: 1250;\n  align-items: center ;\n  align-content: center ;\n  justify-content: center;\n  margin: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref3) {
-  var position = _ref3.position;
-  return position === 'right' ? '0 0 0 4px;' : '0 4px 0 0';
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.palette[PC.AccentStateless];
-});
-var NavWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  min-width: 276px;\n  max-width: 500px;\n  height: 100%;\n"])));
-var NavContent = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-var CloseButton = styled(IconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 14px;\n  top: 26px;\n  z-index: 1000;\n\n  ", "\n"])), function (_ref5) {
-  var isLeftPosition = _ref5.isLeftPosition;
-  return isLeftPosition && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    rotate: 180deg;\n  "])));
-});
-var Styled = {
-  Resizer: Resizer,
-  ResizerHandler: ResizerHandler,
-  ResizerBar: ResizerBar,
-  NavWrapper: NavWrapper,
-  NavContent: NavContent,
-  CloseButton: CloseButton
-};
-export default Styled;