@scaleflex/widget-explorer 4.4.0 → 4.5.0

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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,282 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,87 @@
+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;
+};