@scaleflex/widget-explorer 0.0.1

package/lib/components/GalleryRoleSelect/StandardRolesTab.js

@@ -0,0 +1,58 @@
+import { Fragment } from 'react';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import Styled from './GalleryRoleSelect.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var StandardRolesTab = function StandardRolesTab(_ref) {
+  var i18n = _ref.i18n,
+    roles = _ref.roles,
+    selectorPaddingX = _ref.selectorPaddingX,
+    activeAccessRoleIndex = _ref.activeAccessRoleIndex,
+    actualAccessRoleIndex = _ref.actualAccessRoleIndex,
+    getGalleryRoleLabel = _ref.getGalleryRoleLabel,
+    setHoveredRole = _ref.setHoveredRole,
+    onChange = _ref.onChange,
+    itemLabelWidth = _ref.itemLabelWidth,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    onMouseLeave = _ref.onMouseLeave;
+  return /*#__PURE__*/_jsx(Styled.Selector, {
+    selectorPaddingX: selectorPaddingX,
+    onMouseLeave: onMouseLeave,
+    children: roles.map(function (role, index) {
+      var _roles;
+      var isRoleDisabled = !role.selectable;
+      var isActive = !isRoleDisabled && index <= Math.max(actualAccessRoleIndex, activeAccessRoleIndex);
+      var isSelected = index === activeAccessRoleIndex;
+      var isHovered = !isRoleDisabled && actualAccessRoleIndex !== activeAccessRoleIndex && index === actualAccessRoleIndex;
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [index > 0 && /*#__PURE__*/_jsx(Styled.SelectorSeparator, {
+          active: isActive && ((_roles = roles[index - 1]) === null || _roles === void 0 ? void 0 : _roles.selectable),
+          disabled: isRoleDisabled
+        }), /*#__PURE__*/_jsx(TooltipV2, {
+          arrow: true,
+          position: "top",
+          size: "md",
+          title: i18n('explorerGalleryRoleLowerRoleWarning'),
+          disabled: !isRoleDisabled,
+          children: /*#__PURE__*/_jsx(Styled.SelectorDot, {
+            hovered: isHovered,
+            active: isActive,
+            selected: isSelected,
+            $label: getGalleryRoleLabel(role.name, i18n),
+            onMouseEnter: function onMouseEnter() {
+              return setHoveredRole(role);
+            },
+            onClick: disabled || isRoleDisabled ? undefined : function () {
+              return onChange(role);
+            },
+            itemLabelWidth: itemLabelWidth,
+            odd: !(index % 2),
+            readOnly: readOnly,
+            disableDot: isRoleDisabled
+          })
+        })]
+      }, role.id);
+    })
+  });
+};
+export default StandardRolesTab;

package/lib/components/GalleryRoleSelect/index.js

@@ -0,0 +1,234 @@
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 _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, useMemo, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { Cross, Tick } from '@scaleflex/icons';
+import { EllipsedText, Label } from '@scaleflex/ui/core';
+import Styled from './GalleryRoleSelect.styled';
+import { findGalleryRoleIndexById, generateCamelCaseName, generatePrettyName, getGalleryRoleLabel } from './GalleryRoleSelect.utils';
+import { useExplorerI18n } from '../../hooks';
+import { selectAccessRoles, selectAccessRolesPermissions } from '../../slices/common.slice';
+import StandardRolesTab from './StandardRolesTab';
+import { GALLERY_ROLE_TABS, GALLERY_ROLE_TABS_IDS } from './GalleryRoleSelect.constants';
+import CustomRolesTab from './CustomRolesTab';
+
+/**
+ * @param {object} props
+ * @param {string} props.value - Role ID
+ * @param {function} props.onChange
+ * @param {boolean} [props.showPermissionsInfo=true]
+ * @param {number} [props.selectorPaddingX=17]
+ * @param {boolean} [props.disabled=false]
+ * @param {boolean} [props.readOnly=false]
+ * @param {boolean} [props.defaultValueFirstItem=false]
+ * @param {number} [props.minPermissions] - Use to specify which roles could be selectable
+ * @returns
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var GalleryRoleSelect = function GalleryRoleSelect(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$showPermissionsI = _ref.showPermissionsInfo,
+    showPermissionsInfo = _ref$showPermissionsI === void 0 ? true : _ref$showPermissionsI,
+    _ref$selectorPaddingX = _ref.selectorPaddingX,
+    selectorPaddingX = _ref$selectorPaddingX === void 0 ? 17 : _ref$selectorPaddingX,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$defaultValueFirs = _ref.defaultValueFirstItem,
+    defaultValueFirstItem = _ref$defaultValueFirs === void 0 ? false : _ref$defaultValueFirs,
+    minPermissions = _ref.minPermissions,
+    _ref$skipDefaultGalle = _ref.skipDefaultGalleryRole,
+    skipDefaultGalleryRole = _ref$skipDefaultGalle === void 0 ? true : _ref$skipDefaultGalle;
+  var accessRoles = useSelector(selectAccessRoles);
+  var accessRolesPermissions = useSelector(selectAccessRolesPermissions);
+  var i18n = useExplorerI18n();
+  var _useState = useState(GALLERY_ROLE_TABS_IDS.STANDARD),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var tabsInitedRef = useRef(false);
+  var _useMemo = useMemo(function () {
+      return (accessRoles || []).reduce(function (accum, role) {
+        if (skipDefaultGalleryRole && role !== null && role !== void 0 && role.default_gallery_role_only) {
+          return accum;
+        }
+        var formattedRole = _objectSpread(_objectSpread({}, role), {}, {
+          selectable: !minPermissions || !Array.isArray(minPermissions) || (role.permissions || []).length > (minPermissions || []).length && !(minPermissions || []).some(function (permId) {
+            return !(role.permissions || []).includes(permId);
+          })
+        });
+        accum.availableRoles.push(formattedRole);
+        accum[role !== null && role !== void 0 && role.is_custom ? 'customRoles' : 'standardRoles'].push(formattedRole);
+        return accum;
+      }, {
+        availableRoles: [],
+        standardRoles: [],
+        customRoles: []
+      });
+    }, [accessRoles, skipDefaultGalleryRole, minPermissions]),
+    availableRoles = _useMemo.availableRoles,
+    standardRoles = _useMemo.standardRoles,
+    customRoles = _useMemo.customRoles;
+  var allRolesPermsIds = useMemo(function () {
+    return _toConsumableArray(new Set((availableRoles || []).reduce(function (accum, role) {
+      return [].concat(_toConsumableArray(accum), _toConsumableArray((role === null || role === void 0 ? void 0 : role.permissions) || []));
+    }, [])));
+  }, [availableRoles]);
+
+  // It's useless to show full perms list, instead of that need to show only those which is used in provided roles
+  var filteredAccessRolesPermissions = useMemo(function () {
+    return (accessRolesPermissions || []).filter(function (_ref2) {
+      var id = _ref2.id;
+      return allRolesPermsIds.includes(id);
+    });
+  }, [accessRolesPermissions, allRolesPermsIds]);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoveredRole = _useState4[0],
+    setHoveredRole = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    containerWidth = _useState6[0],
+    setContainerWidth = _useState6[1];
+  var activeAccessRoleIndex = useMemo(function () {
+    return findGalleryRoleIndexById(value, availableRoles);
+  }, [value, availableRoles]);
+  var activeRole = availableRoles === null || availableRoles === void 0 ? void 0 : availableRoles[activeAccessRoleIndex];
+  var actualRole = hoveredRole || activeRole;
+  var actualAccessRoleIndex = useMemo(function () {
+    return findGalleryRoleIndexById(actualRole === null || actualRole === void 0 ? void 0 : actualRole.id, standardRoles);
+  }, [actualRole, standardRoles]);
+  var itemLabelWidth = useMemo(function () {
+    return Math.max(75, Math.round(containerWidth / ((standardRoles === null || standardRoles === void 0 ? void 0 : standardRoles.length) || 0)) + 20);
+  }, [containerWidth, standardRoles]);
+  var getPermLabel = function getPermLabel(permId, label) {
+    var i18nKey = generateCamelCaseName(permId, 'galleryRolePerm');
+    var defaultValue = label || generatePrettyName(permId);
+    return i18n(i18nKey, defaultValue) || defaultValue;
+  };
+  var renderPermissionIcon = function renderPermissionIcon(permission) {
+    var isActive = ((actualRole === null || actualRole === void 0 ? void 0 : actualRole.permissions) || []).includes(permission);
+    var IconComponent = isActive ? Tick : Cross;
+    return /*#__PURE__*/_jsx(Styled.PermissionItemIcon, {
+      active: isActive,
+      children: /*#__PURE__*/_jsx(IconComponent, {
+        size: 5
+      })
+    });
+  };
+  var renderPermissions = function renderPermissions() {
+    return (filteredAccessRolesPermissions || []).map(function (_ref3) {
+      var id = _ref3.id,
+        name = _ref3.name;
+      return /*#__PURE__*/_jsxs(Styled.PermissionItem, {
+        children: [renderPermissionIcon(id), /*#__PURE__*/_jsx(Styled.PermissionItemLabel, {
+          children: getPermLabel(id, name)
+        })]
+      }, id);
+    });
+  };
+  var handleHoveredRoleChange = function handleHoveredRoleChange() {
+    var newHoveredRole = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (!readOnly) {
+      setHoveredRole(newHoveredRole);
+    }
+  };
+  var renderTabContent = function renderTabContent() {
+    var tabProps = {
+      i18n: i18n,
+      getGalleryRoleLabel: getGalleryRoleLabel,
+      setHoveredRole: handleHoveredRoleChange,
+      onChange: onChange,
+      readOnly: readOnly,
+      disabled: disabled
+    };
+    if (activeTab === GALLERY_ROLE_TABS_IDS.CUSTOM) {
+      return /*#__PURE__*/_jsx(CustomRolesTab, _objectSpread(_objectSpread({}, tabProps), {}, {
+        roles: customRoles,
+        disabled: disabled,
+        activeRole: activeRole
+      }));
+    }
+    return /*#__PURE__*/_jsx(StandardRolesTab, _objectSpread(_objectSpread({}, tabProps), {}, {
+      roles: standardRoles,
+      selectorPaddingX: selectorPaddingX,
+      itemLabelWidth: itemLabelWidth,
+      actualAccessRoleIndex: actualAccessRoleIndex,
+      activeAccessRoleIndex: activeAccessRoleIndex,
+      onMouseLeave: function onMouseLeave() {
+        return handleHoveredRoleChange(null);
+      }
+    }));
+  };
+  useEffect(function () {
+    if (defaultValueFirstItem && !value && standardRoles.length) {
+      var firstSelectableStandardRole = standardRoles === null || standardRoles === void 0 ? void 0 : standardRoles.find(function (role) {
+        return role === null || role === void 0 ? void 0 : role.selectable;
+      });
+      if (firstSelectableStandardRole) {
+        onChange(firstSelectableStandardRole);
+      }
+    }
+  }, [defaultValueFirstItem, value, standardRoles]);
+  useEffect(function () {
+    // Activate "Custom" tab if activeRole is_custom = TRUE
+    if (!tabsInitedRef.current && activeRole !== null && activeRole !== void 0 && activeRole.is_custom && activeTab !== GALLERY_ROLE_TABS_IDS.CUSTOM && customRoles.length > 0) {
+      setActiveTab(GALLERY_ROLE_TABS_IDS.CUSTOM);
+      tabsInitedRef.current = true;
+    }
+  }, [activeRole, customRoles]);
+  return /*#__PURE__*/_jsxs(Styled.Container, {
+    onMouseLeave: function onMouseLeave() {
+      return handleHoveredRoleChange(null);
+    },
+    ref: function ref(node) {
+      if (node) {
+        setContainerWidth(node.getBoundingClientRect().width);
+      }
+    },
+    disabled: disabled,
+    children: [/*#__PURE__*/_jsx(Label, {
+      children: i18n('accessTabGalleryRoleLabel')
+    }), customRoles.length > 0 && /*#__PURE__*/_jsx(Styled.Tabs, {
+      children: GALLERY_ROLE_TABS.map(function (tab) {
+        return /*#__PURE__*/_jsx(Styled.Tab, {
+          active: activeTab === tab.id,
+          onClick: function onClick() {
+            return setActiveTab(tab.id);
+          },
+          children: i18n(tab.labelI18nKey)
+        }, tab.id);
+      })
+    }), renderTabContent(), showPermissionsInfo && /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsxs(Styled.Permissions, {
+        children: [/*#__PURE__*/_jsx(Styled.PermissionsLabel, {
+          children: /*#__PURE__*/_jsx(EllipsedText, {
+            maxLinesCount: 1,
+            children: actualRole ? i18n('accessTabRolePermissionLabel', {
+              role: getGalleryRoleLabel(actualRole === null || actualRole === void 0 ? void 0 : actualRole.name, i18n)
+            }) : i18n('accessTabSelectRolePermissionLabel')
+          })
+        }), /*#__PURE__*/_jsx(Styled.PermissionsContainer, {
+          children: renderPermissions()
+        })]
+      })
+    })]
+  });
+};
+export default GalleryRoleSelect;

package/lib/components/HeaderBar/FacetedSearchToggleButton.js

@@ -0,0 +1,28 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { Filters as FiltersIcon, FiltersOn as FiltersOnIcon } from '@scaleflex/icons';
+import { selectIsAnyFacetedSearchFilterActive, selectIsFacetedSearchActive } from '../../slices/filters.slice';
+import { facetedSearchSidebarToggled, selectFacetedSearchSidebarExpanded } from '../../slices/panels.slice';
+import Styled from './HeaderBar.styled';
+import { selectIsSimilarSearchActive } from '../../slices/search.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FacetedSearchToggleButton = function FacetedSearchToggleButton() {
+  var dispatch = useDispatch();
+  var isFacetedSearchActive = useSelector(selectIsFacetedSearchActive);
+  var facetedSearchSidebarExpanded = useSelector(selectFacetedSearchSidebarExpanded);
+  var isAnyFacetedSearchFilterActive = useSelector(selectIsAnyFacetedSearchFilterActive);
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  if (!isFacetedSearchActive || facetedSearchSidebarExpanded || isSimilarSearchActive) return null;
+  return /*#__PURE__*/_jsx(Styled.FacetedSearchButton, {
+    size: "lg",
+    color: "basic",
+    onClick: function onClick() {
+      dispatch(facetedSearchSidebarToggled());
+    },
+    children: isAnyFacetedSearchFilterActive ? /*#__PURE__*/_jsx(FiltersOnIcon, {
+      size: 18
+    }) : /*#__PURE__*/_jsx(FiltersIcon, {
+      size: 18
+    })
+  });
+};
+export default FacetedSearchToggleButton;

package/lib/components/HeaderBar/HeaderBar.styled.js

@@ -0,0 +1,25 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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';
+import { IconButton as SfxIconButton } from '@scaleflex/ui/core';
+var HeaderBar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 0 24px;\n  gap: 16px;\n  height: 40px;\n\n  ", "\n"])), function (_ref) {
+  var showFoldersTreeIcon = _ref.showFoldersTreeIcon;
+  return showFoldersTreeIcon && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-left: 12px;\n  "])));
+});
+var RightSide = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  gap: 8px;\n"])));
+var ViewLabel = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0;\n  flex: 1;\n  ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n"])), function (_ref2) {
+  var typography = _ref2.theme.typography;
+  return typography.font[FV.LabelLarge];
+}, function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.TextPrimary];
+});
+var FacetedSearchButton = styled(SfxIconButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n"])));
+var Styled = {
+  HeaderBar: HeaderBar,
+  RightSide: RightSide,
+  ViewLabel: ViewLabel,
+  FacetedSearchButton: FacetedSearchButton
+};
+export default Styled;

package/lib/components/HeaderBar/RightSide.js

@@ -0,0 +1,127 @@
+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); }
+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, useDispatch } from 'react-redux';
+import { Refresh, Info, ViewOptions, ListView } from '@scaleflex/icons';
+import { IconButton } from '@scaleflex/ui/core';
+import { LAYOUTS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { RegionalVariantFilters } from '@scaleflex/widget-common';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { useExplorer } from '../../hooks';
+import { detailsViewToggled, selectIsDetailsViewOpened } from '../../slices/panels.slice';
+import { metadataRegionalFiltersSet, selectIsM1EdgyMeta, selectMetadataRegionalFilters, selectMetadataRegionalGroups } from '../../slices/metadata.slice';
+import { changeLayout, selectIsFoldersView, selectIsGridLayout } from '../../slices/views.slice';
+import Styled from './HeaderBar.styled';
+import { selectIsNoFilesFound } from '../../slices/files.slice';
+import { selectCurrentFolderPath } from '../../slices/folders.slice';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var RightSide = function RightSide(_ref) {
+  var onRefresh = _ref.onRefresh,
+    _ref$showLayoutAndDet = _ref.showLayoutAndDetailsBtns,
+    showLayoutAndDetailsBtns = _ref$showLayoutAndDet === void 0 ? true : _ref$showLayoutAndDet;
+  var _useExplorer = useExplorer(),
+    _useExplorer$opts = _useExplorer.opts,
+    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    i18n = _useExplorer.i18n;
+  var showGlobalRegVariants = opts.showGlobalRegVariants,
+    hideDetailsTab = opts.hideDetailsTab,
+    hideDetailsViewButton = opts.hideDetailsViewButton;
+  var dispatch = useDispatch();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isRefreshButtonDisabled = _useState2[0],
+    setIsRefreshButtonDisabled = _useState2[1];
+  var isM1EdgyMeta = useSelector(selectIsM1EdgyMeta);
+  var metaRegionalGroups = useSelector(selectMetadataRegionalGroups);
+  var metaRegionalFilters = useSelector(selectMetadataRegionalFilters);
+  var isGridLayout = useSelector(selectIsGridLayout);
+  var isDetailsSidebarOpened = useSelector(selectIsDetailsViewOpened);
+  var isNoFoldersFound = useSelector(function (state) {
+    return !selectIsFoldersView(state) || !selectCurrentFolderPath(state);
+  });
+  var isNoFilesFound = useSelector(selectIsNoFilesFound);
+  var areItemsBasedBtnsDisabled = isNoFilesFound && isNoFoldersFound;
+  var showDetailsButton = !hideDetailsViewButton && showLayoutAndDetailsBtns && !hideDetailsTab && !isDetailsSidebarOpened;
+  var handleRefresh = async function handleRefresh() {
+    if (!isRefreshButtonDisabled && typeof onRefresh === 'function') {
+      var res = onRefresh();
+      if (res instanceof Promise) {
+        try {
+          setIsRefreshButtonDisabled(true);
+          await res;
+        } catch (e) {} finally {
+          setIsRefreshButtonDisabled(false);
+        }
+      }
+    }
+  };
+  var handleToggleViewLayout = function handleToggleViewLayout() {
+    if (areItemsBasedBtnsDisabled) {
+      return;
+    }
+    var nextViewLayout = isGridLayout ? LAYOUTS_IDS.LIST : LAYOUTS_IDS.GRID;
+    dispatch(changeLayout(nextViewLayout));
+  };
+  return /*#__PURE__*/_jsxs(Styled.RightSide, {
+    className: "filerobot-Explorer-TopBar-rightSide",
+    children: [showGlobalRegVariants && isM1EdgyMeta && /*#__PURE__*/_jsx(RegionalVariantFilters, {
+      groups: metaRegionalGroups,
+      filters: metaRegionalFilters,
+      onChangeFilters: function onChangeFilters(newRegionalFilters) {
+        return dispatch(metadataRegionalFiltersSet(newRegionalFilters));
+      },
+      iconOnly: true,
+      iconColor: "#768184",
+      btnClassName: "filerobot-common-BaseButton-transparent filerobot-common-BaseButton-medium filerobot-common-LabeledIconButton",
+      i18n: i18n
+    }), typeof onRefresh === 'function' && /*#__PURE__*/_jsx(IconButton, {
+      size: "md",
+      color: "basic",
+      onContextMenu: ignoreEvent,
+      onClick: handleRefresh,
+      disabled: isRefreshButtonDisabled,
+      children: function children(props) {
+        return /*#__PURE__*/_jsx(Refresh, _objectSpread(_objectSpread({}, props), {}, {
+          size: 18
+        }));
+      }
+    }), showLayoutAndDetailsBtns && /*#__PURE__*/_jsx(IconButton, {
+      size: "md",
+      color: "basic",
+      onContextMenu: ignoreEvent,
+      onClick: handleToggleViewLayout,
+      disabled: areItemsBasedBtnsDisabled,
+      children: function children(props) {
+        return isGridLayout ? /*#__PURE__*/_jsx(ListView, _objectSpread(_objectSpread({}, props), {}, {
+          size: 18
+        })) : /*#__PURE__*/_jsx(ViewOptions, _objectSpread(_objectSpread({}, props), {}, {
+          size: 18
+        }));
+      }
+    }), showDetailsButton && /*#__PURE__*/_jsx(IconButton, {
+      size: "md",
+      color: "basic",
+      onContextMenu: ignoreEvent,
+      onClick: function onClick() {
+        return !areItemsBasedBtnsDisabled && dispatch(detailsViewToggled());
+      },
+      disabled: areItemsBasedBtnsDisabled,
+      children: function children(props) {
+        return /*#__PURE__*/_jsx(Info, _objectSpread(_objectSpread({}, props), {}, {
+          size: 18
+        }));
+      }
+    })]
+  });
+};
+export default RightSide;

package/lib/components/HeaderBar/index.js

@@ -0,0 +1,77 @@
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { BREADCRUMBS_VIEWS, VIEW_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer, useToLocaleNumber } from '../../hooks';
+import { selectFilesError, selectFilesStats, selectFilesUuids, selectIsFilesLoading } from '../../slices/files.slice';
+import { VIEW_OPTIONS } from '../Views/Views.constants';
+import BreadcrumbsSkeleton from '../Breadcrumbs/BreadcrumbsSkeleton';
+import RightSide from './RightSide';
+import Breadcrumbs from '../Breadcrumbs';
+import FacetedSearchToggleButton from './FacetedSearchToggleButton';
+import { selectActiveView, selectIsAssetsView, selectIsSearchMode } from '../../slices/views.slice';
+import { selectIsFoldersTreeOpened } from '../../slices/folders.slice';
+import { selectIsAiSearch } from '../../slices/search.slice';
+import Styled from './HeaderBar.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HeaderBar = function HeaderBar(_ref) {
+  var SortElement = _ref.SortElement,
+    onRefresh = _ref.onRefresh,
+    showLayoutAndDetailsBtns = _ref.showLayoutAndDetailsBtns;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts;
+  var toLocaleNumber = useToLocaleNumber();
+  var isFilesLoading = useSelector(selectIsFilesLoading);
+  var activeView = useSelector(selectActiveView);
+  var isAssetsView = useSelector(selectIsAssetsView);
+  var _useSelector = useSelector(selectFilesStats),
+    filesCount = _useSelector.filesCount,
+    statsLoading = _useSelector.loading;
+  // the number of files retrieved/shown not from the BE used in other view
+  var retrievedFilesCount = useSelector(function (state) {
+    return selectFilesUuids(state).length;
+  });
+  var showFoldersTree = useSelector(selectIsFoldersTreeOpened);
+  var filesError = useSelector(selectFilesError);
+  var isSearchMode = useSelector(selectIsSearchMode);
+  var isAiSearch = useSelector(selectIsAiSearch);
+  var isBreadcrumbsView = BREADCRUMBS_VIEWS.includes(activeView);
+  var showBreadcrumbsLoading = !isSearchMode && isFilesLoading;
+  var showBreadcrumbs = opts.showBreadcrumbs,
+    showSort = opts.showSort;
+  var getLabel = function getLabel() {
+    if (isSearchMode && !isAiSearch) {
+      return i18n('explorerHeaderBarLibraryLabel');
+    }
+    if (isAssetsView) {
+      var count = !filesError && filesCount || 0;
+      return i18n('mutualizedAssetsLabel', {
+        count: statsLoading ? '...' : toLocaleNumber(count)
+      });
+    }
+    return "".concat(i18n(VIEW_OPTIONS[activeView || VIEW_IDS.FOLDERS].i18nKey)).concat(retrievedFilesCount && !filesError ? " (".concat(toLocaleNumber(retrievedFilesCount), ")") : '');
+  };
+  var renderViewLabel = function renderViewLabel() {
+    return /*#__PURE__*/_jsxs(Styled.ViewLabel, {
+      children: [/*#__PURE__*/_jsx(FacetedSearchToggleButton, {}), getLabel()]
+    });
+  };
+  var renderViewBar = function renderViewBar() {
+    if (showBreadcrumbsLoading) return /*#__PURE__*/_jsx(BreadcrumbsSkeleton, {});
+    if (showBreadcrumbs && isBreadcrumbsView) return /*#__PURE__*/_jsx(Breadcrumbs, {});
+    return renderViewLabel();
+  };
+  var showSortComponent = showSort && SortElement;
+  return /*#__PURE__*/_jsxs(Styled.HeaderBar, {
+    showFoldersTreeIcon: !showFoldersTree && !isAssetsView,
+    className: classNames('filerobot-ProviderBrowser-headerBar', {
+      'filerobot-ProviderBrowser-headerBar--simple': !showBreadcrumbs
+    }),
+    children: [renderViewBar(), showSortComponent && SortElement, /*#__PURE__*/_jsx(RightSide, {
+      onRefresh: onRefresh,
+      showLayoutAndDetailsBtns: showLayoutAndDetailsBtns
+    })]
+  });
+};
+export default HeaderBar;

package/lib/components/ImageEditorPanel/index.js

@@ -0,0 +1,33 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { usePlugin } from '@scaleflex/widget-core/lib/hooks';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { SlideTransition } from '@scaleflex/widget-common';
+import { imageEditorOpened, selectImageEditor } from '../../slices/panels.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ImageEditorPanel = function ImageEditorPanel(_ref) {
+  var zIndex = _ref.zIndex;
+  var dispatch = useDispatch();
+  var imageEditor = usePlugin(PLUGINS_IDS.IMAGE_EDITOR);
+  var _useSelector = useSelector(selectImageEditor),
+    file = _useSelector.file,
+    mode = _useSelector.mode,
+    showBackButton = _useSelector.showBackButton,
+    hideSavingOptions = _useSelector.hideSavingOptions;
+  if (!imageEditor) {
+    return null;
+  }
+  var closeEditor = function closeEditor() {
+    return dispatch(imageEditorOpened(null));
+  };
+  return /*#__PURE__*/_jsx(SlideTransition, {
+    zIndex: zIndex,
+    handleClose: closeEditor,
+    children: file && /*#__PURE__*/_jsx(imageEditor.render, {
+      file: file,
+      mode: mode,
+      showBackButton: showBackButton,
+      hideSavingOptions: hideSavingOptions
+    })
+  });
+};
+export default ImageEditorPanel;