@scaleflex/widget-explorer 4.3.0 → 4.4.0

package/lib/components/FoldersView/hooks/useAddFolder.js

@@ -1,60 +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 { useDispatch } from 'react-redux';
-import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
-import { checkFileOrFolderNameValidation } from '@scaleflex/widget-utils/lib/checkFileOrFolderNameValidation';
-import { useExplorerI18n, useExplorerInformer } from '../../../hooks';
-import { addNewFolder } from '../../../slices/folders.slice';
-var useAddFolder = function useAddFolder() {
-  var dispatch = useDispatch();
-  var info = useExplorerInformer();
-  var i18n = useExplorerI18n();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isNewFolderInputError = _useState2[0],
-    setIsNewFolderInputError = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isAddingFolder = _useState4[0],
-    setIsAddingFolder = _useState4[1];
-  var addFolder = function addFolder(_ref) {
-    var selectedPath = _ref.selectedPath,
-      folderName = _ref.folderName,
-      onSuccess = _ref.onSuccess,
-      onError = _ref.onError;
-    if (!selectedPath) {
-      return;
-    }
-    if (checkFileOrFolderNameValidation(folderName) || folderName.length === 0) {
-      if (typeof onError === 'function') {
-        onError();
-      }
-      setIsNewFolderInputError(true);
-      return info(i18n('mutualizedFolderInvalidNameError'), 'error');
-    }
-    setIsAddingFolder(true);
-    handlePromise(dispatch(addNewFolder({
-      path: selectedPath,
-      name: folderName
-    })), function (_ref2) {
-      var folder = _ref2.folder;
-      onSuccess(folder);
-      setIsAddingFolder(false);
-    }, function () {
-      setIsAddingFolder(false);
-      onError();
-    });
-    setIsNewFolderInputError(false);
-  };
-  return {
-    addFolder: addFolder,
-    isNewFolderInputError: isNewFolderInputError,
-    isAddingFolder: isAddingFolder
-  };
-};
-export default useAddFolder;

package/lib/components/FoldersView/index.js

@@ -1,282 +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 { 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';
-import Details from '../Details';
-import DragImage from '../DnD/DragImage';
-import TopSection from '../TopSection';
-import AssetsStyled from '../AssetsView/AssetsView.styled';
-import FoldersTree from './FoldersTree';
-import { selectFilesOffset, selectFilesSortOrder, selectFilesSortedBy } from '../../slices/files.slice';
-import { fetchSortedFolders, selectIsFoldersTreeOpened, selectFoldersUuids, selectIsFoldersLoading, selectFoldersError, toggleFoldersTree, fetchFolderFiles, openBaseFolder, selectFoldersSortOrder, selectFoldersSortedBy, activateFoldersView, selectCurrentFolder, selectBaseFolderPath } from '../../slices/folders.slice';
-import Sort from '../common/Sort';
-import { selectIsListLayout } from '../../slices/views.slice';
-import { selectIsDraggingMultipleItems } from '../../slices/drag.slice';
-import ErroredViewPlaceholder from '../Views/ErroredViewPlaceholder';
-import { DEFAULT_SORT_OPTION, MAIN_SORT_OPTIONS } from '../common/Sort/Sort.constants';
-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 { 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']
-};
-var FoldersView = function FoldersView() {
-  var dispatch = useDispatch();
-  var _useExplorer = useExplorer(),
-    opts = _useExplorer.opts,
-    i18n = _useExplorer.i18n,
-    requestCloseModal = _useExplorer.requestCloseModal;
-  var isWidgetSmallSize = useIsSmallScreen();
-  var triggerAddNewFolderModal = useAddNewFolderModal();
-  var isSearchFetchType = useSelector(selectIsSearchFetchType);
-  var isDetailsViewOpened = useSelector(selectIsDetailsViewOpened);
-  var isFoldersTreeOpened = useSelector(selectIsFoldersTreeOpened);
-  var foldersUuids = useSelector(selectFoldersUuids);
-  var isLoading = useSelector(selectIsFoldersLoading);
-  var currentFolder = useSelector(selectCurrentFolder);
-  var currentFolderPath = useSelector(function (state) {
-    return (currentFolder === null || currentFolder === void 0 ? void 0 : currentFolder.path) || selectBaseFolderPath(state);
-  });
-  var filesOffset = useSelector(selectFilesOffset);
-  var isListLayout = useSelector(selectIsListLayout);
-  var error = useSelector(selectFoldersError);
-  var isDraggingMultipleItems = useSelector(selectIsDraggingMultipleItems);
-  var foldersSortedBy = useSelector(selectFoldersSortedBy);
-  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;
-  });
-  var isDraggingOver = useSelector(selectIsDraggingOver);
-  var isFileWindowOpened = useSelector(selectFileWindowFor);
-  var offsetRef = useRef();
-  var hideHeaderBar = opts.hideHeaderBar,
-    showBar = opts.showBar,
-    ExploreViewComponent = opts.ExploreViewComponent,
-    hideLeftSideBar = opts.hideLeftSideBar,
-    useAssetsPicker = opts.useAssetsPicker,
-    assetsPickerModelTitle = opts.assetsPickerModelTitle,
-    hideTopBarAddFolderButton = opts.hideTopBarAddFolderButton;
-  useEffect(function () {
-    offsetRef.current = filesOffset;
-  }, [filesOffset]);
-
-  // Reset the folders (re-call the folders) with the latest state -- sorting...etc. -- after coming from search state as folders are not called in search mode.
-  useUpdateEffect(function () {
-    if (!isSearchFetchType) {
-      dispatch(fetchSortedFolders({
-        path: currentFolderPath,
-        fetchFiles: false,
-        replaceOldFolders: true,
-        sortBy: filesSortBy,
-        sortOrder: filesSortOrder
-      }));
-    }
-  }, [isSearchFetchType]);
-
-  // This case for handling switching from List to Grid layout while having folders/files sorted from the list headers
-  // (which are different from the global sort), in that case we are fetching the folders & files again with a unified sort
-  // as sorting in Grid layout for folders view is unified, not separated as in list layout so we need to be aligned.
-  useUpdateEffect(function () {
-    if (!isListLayout && isFilesAndFoldersSortDifferent) {
-      var isSortOptionNotMutual = !MAIN_SORT_OPTIONS.some(function (option) {
-        return option.value === foldersSortedBy;
-      });
-      var sortBy = isSortOptionNotMutual && DEFAULT_SORT_OPTION.by;
-      dispatch(fetchSortedFolders({
-        path: currentFolderPath,
-        sortBy: sortBy,
-        sortOrder: sortBy && DEFAULT_SORT_OPTION.order,
-        replaceOldFolders: true,
-        fetchFiles: true,
-        withStats: false
-      }));
-    }
-  }, [isListLayout]);
-  var fetchNextFiles = useCallback(function () {
-    dispatch(fetchFolderFiles({
-      offset: offsetRef.current,
-      withStats: false
-    }));
-  }, []);
-  var fetchNextFolders = function fetchNextFolders() {
-    dispatch(fetchSortedFolders({
-      path: currentFolderPath,
-      replaceOldFolders: false,
-      skipPendingDispatch: true,
-      withStats: false
-    }));
-  };
-  var renderEmptyFoldersViewDnDWrapper = function renderEmptyFoldersViewDnDWrapper(_ref) {
-    var children = _ref.children;
-    return /*#__PURE__*/_jsx(DnD, {
-      disableDrag: true,
-      disableDrop: false,
-      item: currentFolder,
-      applyBgOnCurrentTargetOnly: true,
-      children: children
-    });
-  };
-  var openRootFolder = function openRootFolder() {
-    // As already folders tree is fetch no need to re-fetch it again.
-    dispatch(openBaseFolder({
-      dontFetchFoldersTree: true
-    }));
-  };
-  var applyLeftSideNavigation = function applyLeftSideNavigation(child, closeFunc) {
-    return /*#__PURE__*/_jsx(Drawer, {
-      direction: "e",
-      position: "left",
-      closeFn: closeFunc,
-      showCloseIcon: !isLoading,
-      children: child
-    });
-  };
-  var applyRightSideNavigation = function applyRightSideNavigation(child, closeFunc) {
-    return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
-      direction: "w",
-      position: "right",
-      closeFn: closeFunc,
-      showCloseIcon: true
-    }, DETAILS_SIDEBAR_WIDTHS), {}, {
-      children: child
-    }));
-  };
-  var renderLeftSideNavigation = function renderLeftSideNavigation(showSideTree) {
-    return showSideTree && applyLeftSideNavigation(/*#__PURE__*/_jsx(FoldersTree, {}), function () {
-      return dispatch(toggleFoldersTree());
-    });
-  };
-  var renderRightSideNavigation = function renderRightSideNavigation() {
-    return isDetailsViewOpened && applyRightSideNavigation(/*#__PURE__*/_jsx(Details, {
-      showCurrentFolderIfNoneSelected: true
-    }), function () {
-      return dispatch(detailsViewToggled());
-    });
-  };
-  var handleChangeSort = function handleChangeSort(sortedBy, order) {
-    dispatch(fetchSortedFolders({
-      path: currentFolderPath,
-      sortBy: sortedBy,
-      sortOrder: order,
-      fetchFiles: true,
-      withStats: false,
-      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__*/_jsxs(_Fragment, {
-      children: [isAllowedToCreateFolder && !hideTopBarAddFolderButton && renderAddFolderButton(), /*#__PURE__*/_jsx(TopBarUploadButton, {})]
-    });
-  };
-  var handleRefreshFolder = function handleRefreshFolder() {
-    if (!currentFolderPath) {
-      return dispatch(activateFoldersView({
-        skipViewDispatch: true
-      }));
-    }
-    return dispatch(fetchSortedFolders({
-      path: currentFolderPath,
-      replaceOldFolders: true,
-      fetchFiles: true,
-      withStats: true
-    }));
-  };
-  var sortProps = _objectSpread(_objectSpread({
-    disabled: isLoading
-  }, !isListLayout && {
-    sortBy: foldersSortedBy,
-    sortOrder: foldersSortOrder
-  }), {}, {
-    defaultSortOption: {
-      by: foldersSortedBy,
-      order: foldersSortOrder
-    },
-    dontDisableIfNoFiles: true
-  });
-  var SortElement = /*#__PURE__*/_jsx(Sort, _objectSpread({
-    onChange: handleChangeSort
-  }, sortProps));
-  var renderTopSection = function renderTopSection(hideTopSection) {
-    return /*#__PURE__*/_jsx(TopSection, {
-      showTopBar: showBar && Boolean(ExploreViewComponent),
-      showHeaderBar: !hideHeaderBar,
-      SortElement: SortElement,
-      hideTopSection: hideTopSection,
-      TopBarRightComponent: renderTopBarRightComponent,
-      onRefresh: handleRefreshFolder,
-      showFilters: Boolean(currentFolderPath)
-    });
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [useAssetsPicker && !isFileWindowOpened && /*#__PURE__*/_jsx(AssetsStyled.ModalTitle, {
-      onClose: requestCloseModal,
-      primary: i18n(assetsPickerModelTitle)
-    }), renderTopSection(!isWidgetSmallSize), /*#__PURE__*/_jsxs(AssetsStyled.BrowserBody, {
-      isListLayout: isListLayout,
-      className: "filerobot-ProviderBrowser-body",
-      children: [isDraggingMultipleItems && /*#__PURE__*/_jsx(DragImage, {}), !hideLeftSideBar && renderLeftSideNavigation(isFoldersTreeOpened), /*#__PURE__*/_jsxs("div", {
-        className: "filerobot-ProviderBrowser-mainContent",
-        children: [renderTopSection(isWidgetSmallSize), !isLoading && error ? /*#__PURE__*/_jsx(ErroredViewPlaceholder, {
-          title: (error === null || error === void 0 ? void 0 : error.message) || error,
-          description: error === null || error === void 0 ? void 0 : error.details,
-          backTo: openRootFolder,
-          backToLabel: i18n('foldersViewGoToRootLabel'),
-          error: error
-        }) : /*#__PURE__*/_jsx(AssetsList, {
-          foldersUuids: foldersUuids,
-          fetchNextFiles: fetchNextFiles,
-          fetchNextFolders: fetchNextFolders,
-          isFoldersLoading: isLoading,
-          sortProps: sortProps,
-          isDraggingOver: isDraggingOver,
-          emptyViewPlaceholderData: _objectSpread(_objectSpread({}, EMPTY_FOLDERS_VIEW_PLACEHOLDER_DATA), {}, {
-            WrapperComponent: renderEmptyFoldersViewDnDWrapper
-          }),
-          dndProps: {
-            disableDrop: false,
-            disableDrag: true,
-            item: currentFolder
-          }
-        })]
-      }), renderRightSideNavigation()]
-    })]
-  });
-};
-export default /*#__PURE__*/memo(FoldersView);

package/lib/components/GalleryRoleSelect/CustomRolesTab.js

@@ -1,47 +0,0 @@
-import { EllipsedText, RadioGroup, TooltipV2 } from '@scaleflex/ui/core';
-import Styled from './CustomRolesTab.styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-var CustomRolesTab = function CustomRolesTab(_ref) {
-  var i18n = _ref.i18n,
-    roles = _ref.roles,
-    getGalleryRoleLabel = _ref.getGalleryRoleLabel,
-    setHoveredRole = _ref.setHoveredRole,
-    _onChange = _ref.onChange,
-    activeRole = _ref.activeRole,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled;
-  var renderRoleLabel = function renderRoleLabel(role) {
-    return /*#__PURE__*/_jsx(EllipsedText, {
-      maxLinesCount: 1,
-      children: getGalleryRoleLabel(role.name, i18n)
-    });
-  };
-  return /*#__PURE__*/_jsx(Styled.Container, {
-    children: (roles || []).map(function (role) {
-      return /*#__PURE__*/_jsx(Styled.RoleItem, {
-        children: /*#__PURE__*/_jsx(RadioGroup, {
-          label: role.selectable ? renderRoleLabel(role) : /*#__PURE__*/_jsx(TooltipV2, {
-            title: i18n('galleryRoleSelectorLessRolePermsTooltip'),
-            children: /*#__PURE__*/_jsx("span", {
-              children: renderRoleLabel(role)
-            })
-          }),
-          size: "md",
-          onMouseEnter: function onMouseEnter() {
-            return setHoveredRole(role);
-          },
-          onMouseLeave: function onMouseLeave() {
-            return setHoveredRole(null);
-          },
-          disabled: disabled || !role.selectable,
-          readOnly: readOnly,
-          checked: (activeRole === null || activeRole === void 0 ? void 0 : activeRole.id) === role.id,
-          onChange: function onChange() {
-            return _onChange(role);
-          }
-        })
-      }, role.id);
-    })
-  });
-};
-export default CustomRolesTab;

package/lib/components/GalleryRoleSelect/CustomRolesTab.styled.js

@@ -1,10 +0,0 @@
-var _templateObject, _templateObject2;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import styled from 'styled-components';
-var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  gap: 16px;\n  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));\n"])));
-var RoleItem = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-var Styled = {
-  Container: Container,
-  RoleItem: RoleItem
-};
-export default Styled;

package/lib/components/GalleryRoleSelect/GalleryRoleSelect.constants.js

@@ -1,11 +0,0 @@
-export var GALLERY_ROLE_TABS_IDS = {
-  STANDARD: 'STANDARD',
-  CUSTOM: 'CUSTOM'
-};
-export var GALLERY_ROLE_TABS = [{
-  id: GALLERY_ROLE_TABS_IDS.STANDARD,
-  labelI18nKey: 'galleryRoleSelectorStandardTabLabel'
-}, {
-  id: GALLERY_ROLE_TABS_IDS.CUSTOM,
-  labelI18nKey: 'galleryRoleSelectorCustomTabLabel'
-}];

package/lib/components/GalleryRoleSelect/GalleryRoleSelect.styled.js

@@ -1,132 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { FV, PC } from '@scaleflex/widget-common';
-import styled, { css } from 'styled-components';
-var strTruncateMixin = "\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n";
-var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  min-width: 310px;\n  ", "\n\n  .SfxNotification-Notification {\n    margin-right: 0;\n  }\n  .SfxNotification-Close {\n    display: none;\n  }\n\n  .SfxNotification-root {\n    margin-right: 0;\n    width: 100%;\n  }\n"])), function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled && 'filter: grayscale(1);';
-});
-var Selector = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 60px;\n  margin-top: 8px;\n  margin-bottom: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_ref2) {
-  var _ref2$selectorPadding = _ref2.selectorPaddingX,
-    selectorPaddingX = _ref2$selectorPadding === void 0 ? 17 : _ref2$selectorPadding;
-  return "".concat(selectorPaddingX, "px");
-}, function (_ref3) {
-  var _ref3$selectorPadding = _ref3.selectorPaddingX,
-    selectorPaddingX = _ref3$selectorPadding === void 0 ? 17 : _ref3$selectorPadding;
-  return "".concat(selectorPaddingX, "px");
-});
-var SelectorSeparator = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2px;\n  background: ", ";\n  flex: 1 1;\n  margin: 0 2px;\n"])), function (_ref4) {
-  var active = _ref4.active,
-    theme = _ref4.theme,
-    disabled = _ref4.disabled;
-  return theme.palette[active && !disabled ? PC.AccentStateless_0_4_Opacity : PC.BorderPrimaryStateless];
-});
-var selectedOrHoveredSpacesMixin = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:after {\n    content: ' ';\n    position: absolute;\n    top: -6px;\n    bottom: -6px;\n    right: -6px;\n    left: -6px;\n    border-radius: 50px;\n  }\n\n  &:before {\n    height: 35px;\n  }\n\n  &:first-child {\n    &:before {\n      left: -22px;\n      transform: none;\n    }\n  }\n\n  &:last-child {\n    &:before {\n      left: auto;\n      right: -22px;\n      transform: none;\n    }\n  }\n"])));
-var SelectorDot = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: ", ";\n  border: ", ";\n  position: relative;\n  ", "\n\n  &:before {\n    ", "\n    content: '", "';\n    position: absolute;\n    left: 50%;\n    max-width: ", ";\n    transform: translate(-50%, 0);\n    height: 40px;\n    color: ", ";\n    display: flex;\n    ", "\n\n    ", "\n  }\n\n  &:first-child {\n    &:before {\n      left: -17px;\n      transform: none;\n    }\n  }\n  &:last-child {\n    &:before {\n      left: auto;\n      right: -17px;\n      transform: none;\n    }\n  }\n\n  // Cover different cases\n  ", "\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.palette[PC.BackgroundStateless];
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return "1px solid ".concat(theme.palette[PC.BorderPrimaryStateless]);
-}, function (_ref7) {
-  var readOnly = _ref7.readOnly;
-  return !readOnly && 'cursor: pointer;';
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.typography.font[FV.LabelMedium];
-}, function (_ref9) {
-  var $label = _ref9.$label;
-  return $label;
-}, function (_ref10) {
-  var _ref10$itemLabelWidth = _ref10.itemLabelWidth,
-    itemLabelWidth = _ref10$itemLabelWidth === void 0 ? 92 : _ref10$itemLabelWidth;
-  return "".concat(Math.max(92, itemLabelWidth), "px");
-}, function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.palette[PC.ButtonDisabledText];
-}, strTruncateMixin, function (_ref12) {
-  var odd = _ref12.odd;
-  return odd ? 'top: 0; align-items: end;' : 'bottom: 0; align-items: start;';
-}, function (_ref13) {
-  var theme = _ref13.theme,
-    selected = _ref13.selected,
-    disableDot = _ref13.disableDot,
-    active = _ref13.active,
-    hovered = _ref13.hovered;
-  if (selected) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        && {\n          background: ", ";\n          border: 6px solid ", ";\n\n          ", "\n\n          &::before {\n            ", "\n            color: ", ";\n          }\n        }\n      "])), theme.palette[PC.BackgroundStateless], theme.palette[PC.AccentPrimary], selectedOrHoveredSpacesMixin, theme.typography.font[FV.LabelMediumEmphasis], theme.palette[PC.AccentStateless]);
-  }
-  if (disableDot) {
-    return "\n        background: ".concat(theme.palette[PC.BorderPrimaryStateless], ";\n        border: ", "1px solid ".concat(theme.palette[PC.BorderPrimaryStateless]), ";\n\n        &::before {\n          color: ").concat(function (_ref14) {
-      var theme = _ref14.theme;
-      return theme.palette[PC.ButtonDisabledText];
-    }, ";\n        }\n      ");
-  }
-  if (hovered) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        && {\n          background: ", ";\n          border: 5px solid ", ";\n          box-shadow: 0 0 0 1px ", ";\n\n          ", "\n\n          &::before {\n            color: ", ";\n            height: 35.5px;\n          }\n        }\n      "])), theme.palette[PC.AccentStateless_0_4_Opacity], theme.palette[PC.BackgroundStateless], theme.palette[PC.BorderPrimaryStateless], selectedOrHoveredSpacesMixin, theme.palette[PC.AccentPrimaryHover]);
-  }
-  if (active) {
-    return "\n        background: ".concat(theme.palette[PC.AccentStateless_0_4_Opacity], ";\n        border-color: ").concat(theme.palette[PC.AccentStateless_0_4_Opacity], ";\n\n        &::before {\n          color: ").concat(theme.palette[PC.Accent_0_7_Opacity], ";\n        }\n      ");
-  }
-  return '';
-});
-var Permissions = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  border-radius: 4px;\n  margin-top: ", ";\n"])), function (_ref15) {
-  var noMarginTop = _ref15.noMarginTop;
-  return noMarginTop ? '0' : '24px';
-});
-var PermissionsLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n"])), function (_ref16) {
-  var theme = _ref16.theme;
-  return theme.typography.font[FV.LabelMedium];
-}, function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.palette[PC.TextSecondary];
-});
-var PermissionsContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: 12px;\n  flex-wrap: wrap;\n  gap: 0 12px;\n"])));
-var PermissionItem = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 4px 0;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n"])));
-var PermissionItemIcon = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: #ffffff;\n  border-radius: 50%;\n  width: 12px;\n  height: 12px;\n  margin-right: 4px;\n"])), function (_ref18) {
-  var active = _ref18.active,
-    theme = _ref18.theme;
-  return theme.palette[active ? PC.Success : PC.Error];
-});
-var PermissionItemLabel = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  ", "\n"])), function (_ref19) {
-  var theme = _ref19.theme;
-  return theme.typography.font[FV.LabelSmall];
-}, function (_ref20) {
-  var theme = _ref20.theme;
-  return theme.palette[PC.TextPrimary];
-}, strTruncateMixin);
-var Tabs = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 40px;\n  align-items: center;\n  border-radius: 4px;\n  margin: 12px 0 16px 0;\n"])));
-var Tab = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  padding: 0px 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  color: ", ";\n  cursor: pointer;\n\n  &:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  &:first-child {\n    border-radius: 4px 0px 0px 4px;\n  }\n\n  &:last-child {\n    border-radius: 0px 4px 4px 0px;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref21) {
-  var theme = _ref21.theme;
-  return theme.typography.font[FV.LabelMedium];
-}, function (_ref22) {
-  var theme = _ref22.theme;
-  return theme.palette[PC.BorderPrimaryStateless];
-}, function (_ref23) {
-  var theme = _ref23.theme;
-  return theme.palette[PC.TextPrimary];
-}, function (_ref24) {
-  var active = _ref24.active,
-    theme = _ref24.theme;
-  return !active && "\n    &:hover {\n      z-index: 1;\n      border: 1px solid ".concat(theme.palette[PC.AccentPrimaryActive], ";\n      background: ").concat(theme.palette[PC.BackgroundHover], ";\n    }\n  ");
-}, function (_ref25) {
-  var active = _ref25.active,
-    theme = _ref25.theme;
-  return active && "\n    z-index: 1;\n    border: 1px solid ".concat(theme.palette[PC.AccentPrimaryActive], ";\n    background: ").concat(theme.palette[PC.Accent_1_2_Opacity], ";\n    color: ").concat(theme.palette[PC.AccentPrimaryActive], ";\n  ");
-});
-var Styled = {
-  Container: Container,
-  Selector: Selector,
-  SelectorSeparator: SelectorSeparator,
-  SelectorDot: SelectorDot,
-  Permissions: Permissions,
-  PermissionsLabel: PermissionsLabel,
-  PermissionsContainer: PermissionsContainer,
-  PermissionItem: PermissionItem,
-  PermissionItemIcon: PermissionItemIcon,
-  PermissionItemLabel: PermissionItemLabel,
-  Tabs: Tabs,
-  Tab: Tab
-};
-export default Styled;

package/lib/components/GalleryRoleSelect/GalleryRoleSelect.utils.js

@@ -1,87 +0,0 @@
-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 _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); }
-import capitalizeFirstLetter from '@scaleflex/widget-utils/lib/capitalizeFirstLetter';
-
-// propertyUsedInFilter => user/team
-// export const filterAccesses = (accesses, accessUuid, accessedToUuid, propertyUsedInFilter) => {
-//   const removedIndices = []
-//   const filteredAccesses = accesses.filter(
-//     (access, i) => {
-//       if (access.uuid === accessUuid && access[propertyUsedInFilter].uuid === accessedToUuid) {
-//         removedIndices.push(i)
-//         return false
-//       }
-
-//       return true
-//     }
-//   ).map((access) => access[propertyUsedInFilter].uuid)
-
-//   return {
-//     uuids: filteredAccesses,
-//     indices: removedIndices
-//   }
-// }
-
-export var isTeamProvided = function isTeamProvided() {
-  var providedObject = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return providedObject.isTeam || providedObject.count || providedObject.count === 0 || Object.keys(providedObject.members || {}).length > 0;
-};
-export var prepareAccessToEdit = function prepareAccessToEdit(accessToGetPrepared) {
-  return accessToGetPrepared && _typeof(accessToGetPrepared) === 'object' ? _objectSpread(_objectSpread(_objectSpread({}, accessToGetPrepared), accessToGetPrepared.user || accessToGetPrepared.team), accessToGetPrepared.role && {
-    role: accessToGetPrepared.role.id
-  }) : null;
-};
-export var convertStringToWordsArray = function convertStringToWordsArray(str) {
-  return str.toLowerCase().replace(/[^a-z0-9]+/gi, ' ').split(' ');
-};
-export var generateCamelCaseName = function generateCamelCaseName(str) {
-  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return convertStringToWordsArray(str).reduce(function (accum, item, index) {
-    return "".concat(accum).concat(index === 0 && !prefix ? item : capitalizeFirstLetter(item));
-  }, prefix);
-};
-export var generatePrettyName = function generatePrettyName(str) {
-  var eachWordUpperCase = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return eachWordUpperCase ? convertStringToWordsArray(str).map(capitalizeFirstLetter).join(' ') : capitalizeFirstLetter(convertStringToWordsArray(str).join(' '));
-};
-
-/**
- * @param {string} roleName - Like "GALLERY_EDITOR"
- * @returns {{longName: string, shortName: string, i18nKeyLongName: string, i18nKeyShortName: string}}
- */
-export var prettyGalleryRole = function prettyGalleryRole(roleName) {
-  var galleryRole = roleName ? roleName.toLowerCase() : 'unknown';
-  var galleryRoleShort = galleryRole.replace('gallery_', '');
-  var i18nKey = generateCamelCaseName(galleryRoleShort, 'galleryRole');
-  return {
-    longName: generatePrettyName(galleryRole, true),
-    shortName: generatePrettyName(galleryRoleShort),
-    i18nKeyLongName: i18nKey,
-    i18nKeyShortName: "".concat(i18nKey, "Short")
-  };
-};
-export var getGalleryRoleLabel = function getGalleryRoleLabel(roleName, i18n) {
-  var returnLongName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var _prettyGalleryRole = prettyGalleryRole(roleName),
-    shortName = _prettyGalleryRole.shortName,
-    longName = _prettyGalleryRole.longName,
-    i18nKeyLongName = _prettyGalleryRole.i18nKeyLongName,
-    i18nKeyShortName = _prettyGalleryRole.i18nKeyShortName;
-  var i18nKey = returnLongName ? i18nKeyLongName : i18nKeyShortName;
-  var defaultValue = returnLongName ? longName : shortName;
-  return i18n(i18nKey, defaultValue) || defaultValue;
-};
-export var findGalleryRoleById = function findGalleryRoleById(id, roles) {
-  return roles && isFinite(id) ? roles.find(function (role) {
-    return role.id === id;
-  }) : null;
-};
-export var findGalleryRoleIndexById = function findGalleryRoleIndexById(id, roles) {
-  return roles && isFinite(id) ? roles.findIndex(function (role) {
-    return role.id === id;
-  }) : -1;
-};