@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/TopBar/Search/SimilarSearchTag.js

@@ -0,0 +1,60 @@
+import { useSelector } from 'react-redux';
+import { Skeleton } from '@scaleflex/ui/core';
+import { ImagePreview } from '@scaleflex/widget-common';
+import isTransparencySupported from '@scaleflex/widget-utils/lib/isTransparencySupported';
+import addUrlParams from '@scaleflex/widget-utils/lib/addUrlParams';
+import getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import getFileExtension from '@scaleflex/widget-utils/lib/getFileExtension';
+import { useExplorer } from '../../../hooks';
+import { selectSimilarSearchOriginalFile } from '../../../slices/search.slice';
+import Styled from '../TopBar.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SimilarSearchTag = function SimilarSearchTag() {
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    isDevEnv = _useExplorer.isDevEnv,
+    container = _useExplorer.container;
+  var similarSearchOriginalFile = useSelector(selectSimilarSearchOriginalFile);
+  if (similarSearchOriginalFile !== null && similarSearchOriginalFile !== void 0 && similarSearchOriginalFile.error) {
+    return /*#__PURE__*/_jsx(Styled.SimilarFileTag, {
+      size: "sm",
+      crossIcon: false,
+      children: i18n('explorerSimilarSearchTagInvalidFileLabel')
+    });
+  }
+  if (!(similarSearchOriginalFile !== null && similarSearchOriginalFile !== void 0 && similarSearchOriginalFile.name)) {
+    return /*#__PURE__*/_jsxs(Styled.SimilarFileTag, {
+      size: "sm",
+      crossIcon: false,
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        width: 24,
+        height: 18
+      }), /*#__PURE__*/_jsx(Skeleton, {
+        width: 120
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Styled.SimilarFileTag, {
+    size: "sm",
+    crossIcon: false,
+    children: [/*#__PURE__*/_jsx(Styled.ImageContainer, {
+      children: /*#__PURE__*/_jsx(ImagePreview, {
+        thumbnailUrl: addUrlParams(similarSearchOriginalFile.info.thumbnail, {
+          w: 100,
+          h: 100
+        }),
+        srcUrl: getItemIcon({
+          fileOrFolder: similarSearchOriginalFile
+        }),
+        extension: getFileExtension(similarSearchOriginalFile),
+        isDevEnv: isDevEnv,
+        container: container,
+        isTransparencySupported: isTransparencySupported(similarSearchOriginalFile)
+      })
+    }), /*#__PURE__*/_jsx(Styled.SimilarTagEllipsedText, {
+      maxLinesCount: 1,
+      children: similarSearchOriginalFile.name
+    })]
+  });
+};
+export default SimilarSearchTag;

package/lib/components/TopBar/Search/index.js

@@ -0,0 +1,251 @@
+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 _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 _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 { useCallback, useState, useRef, useMemo, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchGroup } from '@scaleflex/widget-common';
+import { PERMISSION_MODELS } from '@scaleflex/widget-utils/lib/constants';
+import { checkIsFilterThere } from './Search.utils';
+import ContextDropdown from './ContextDropdown';
+import { useExplorer, useSearchSuggestions } from '../../../hooks';
+import { selectSearchSuggestionsTags, updateSearchSuggestions, selectSearchSuggestionsFilters, searchSending, selectDefaultSearchQuery, selectIsSendingSearch, selectSearchQuery, selectSearchSuggestionsAttributesTags, updateSearchQuery, searchSimilarToggled, selectIsSimilarSearchActive, selectIsAiSearch } from '../../../slices/search.slice';
+import { selectionsCleared } from '../../../slices/selections.slice';
+import { selectIsFiltersActive, updateFilteredFiles } from '../../../slices/filters.slice';
+import { searchOrListViewFiles, selectIsAssetsView } from '../../../slices/views.slice';
+import { fetchInitialFiles, selectIsSearchOrFilesLoading } from '../../../slices/files.slice';
+import { MODE_CHAR, MODE_ID } from '../../../utils/SearchSuggestions/constants';
+import TempFilterRegexInput from './PrependedOptions/TempFilterRegexInput';
+import AiSwitcher from '../../AiSwitcher';
+import { selectPermissionModel } from '../../../slices/common.slice';
+import SimilarSearchTag from './SimilarSearchTag';
+
+// TODO: refactor this component and SearchGroup
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var Search = function Search(_ref) {
+  var lastSearchValueRef = _ref.lastSearchValueRef;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    opts = _useExplorer.opts;
+  var searchQuery = useSelector(selectSearchQuery);
+  var defaultSearchQuery = useSelector(selectDefaultSearchQuery);
+  var isFiltersActive = useSelector(selectIsFiltersActive);
+  var isAssetsView = useSelector(selectIsAssetsView);
+  var isSendingSearch = useSelector(selectIsSendingSearch);
+  var searchSuggestionsTags = useSelector(selectSearchSuggestionsTags);
+  var searchSuggestionsAttributesTags = useSelector(selectSearchSuggestionsAttributesTags);
+  var isSearchLoading = useSelector(selectIsSearchOrFilesLoading);
+  var hasAnySearchSuggestion = useSelector(function (state) {
+    var _selectSearchSuggesti;
+    return (searchSuggestionsTags === null || searchSuggestionsTags === void 0 ? void 0 : searchSuggestionsTags.length) > 0 || ((_selectSearchSuggesti = selectSearchSuggestionsFilters(state)) === null || _selectSearchSuggesti === void 0 ? void 0 : _selectSearchSuggesti.length) > 0;
+  });
+  var permissionModel = useSelector(selectPermissionModel);
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var isAiSearchActive = useSelector(selectIsAiSearch);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    foundFilterCode = _useState2[0],
+    setFoundFilterCode = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchInputFocused = _useState4[0],
+    setSearchInputFocused = _useState4[1];
+  var _useState5 = useState(searchQuery || ''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchQueryState = _useState6[0],
+    setSearchQueryState = _useState6[1];
+  var searchInputRef = useRef();
+  var containerRef = useRef();
+  var _useSearchSuggestions = useSearchSuggestions({
+      searchContainerRef: containerRef,
+      searchInputFocused: searchInputFocused,
+      searchQuery: searchQueryState,
+      searchInputRef: searchInputRef
+    }),
+    SuggestionsMenu = _useSearchSuggestions.SuggestionsMenu,
+    onKeyDown = _useSearchSuggestions.onKeyDown,
+    onKeyUp = _useSearchSuggestions.onKeyUp,
+    mode = _useSearchSuggestions.mode,
+    onClickSearch = _useSearchSuggestions.onClickSearch;
+  var isTagModeOn = useMemo(function () {
+    return mode === MODE_ID.TAG;
+  }, [mode]);
+  var defaultFilters = opts.defaultFilters,
+    disableFiltersAndSearch = opts.disableFiltersAndSearch,
+    forceFilters = opts.forceFilters,
+    _opts$search = opts.search,
+    search = _opts$search === void 0 ? {} : _opts$search,
+    enableAIEmbed = opts.enableAIEmbed;
+  var searchInput = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current;
+  var showAiSwitcher = enableAIEmbed && permissionModel === PERMISSION_MODELS.PT_ADVANCED && !isSimilarSearchActive;
+  var aiSearchDisabled = !isSimilarSearchActive && !(isAiSearchActive && isAssetsView);
+  var handleUpdateFilters = function handleUpdateFilters(updatedFilters) {
+    return dispatch(updateFilteredFiles({
+      filters: updatedFilters
+    }));
+  };
+  var valueChangeChecking = useCallback(function (value, handleSearchClearing) {
+    var existedFilterCode = checkIsFilterThere(value);
+    if (existedFilterCode) {
+      setFoundFilterCode(existedFilterCode);
+      handleSearchClearing();
+    }
+  }, []);
+  var clearSelection = function clearSelection() {
+    dispatch(selectionsCleared());
+  };
+  var clearAllFilters = function clearAllFilters() {
+    dispatch(updateFilteredFiles({
+      dismissApiCall: true,
+      noUrlUpdate: true
+    }));
+    dispatch(updateSearchSuggestions({
+      filters: [],
+      tags: [],
+      dismissApiCall: true,
+      noUrlUpdate: true
+    }));
+  };
+  var clearSearch = function clearSearch() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      clearFilters = _ref2.clearFilters;
+    dispatch(updateSearchQuery({
+      query: '',
+      noUrlUpdate: true
+    }));
+    if (clearFilters && !disableFiltersAndSearch && !forceFilters) {
+      clearAllFilters();
+    }
+    if (isSimilarSearchActive) {
+      dispatch(searchSimilarToggled(false));
+    }
+    dispatch(fetchInitialFiles({
+      deleteFiltersAndSearchUrlQueries: true
+    }));
+  };
+  var toggleSendingSearch = function toggleSendingSearch(value) {
+    if (value === isSendingSearch) {
+      return;
+    }
+    dispatch(searchSending(value));
+  };
+  var sendSearch = function sendSearch(value) {
+    var _trimmedValue$split;
+    var trimmedValue = (value || '').trim();
+    // On search we need to add the words with # to the selected tags if they exist in the tags list
+    var tagChar = MODE_CHAR[MODE_ID.TAG];
+    var searchedTags = (_trimmedValue$split = trimmedValue.split(/\s/)) === null || _trimmedValue$split === void 0 ? void 0 : _trimmedValue$split.filter(function (word) {
+      return (word === null || word === void 0 ? void 0 : word.charAt(0)) === tagChar;
+    });
+    if ((searchedTags === null || searchedTags === void 0 ? void 0 : searchedTags.length) > 0) {
+      var attachedExistingTags = [];
+      searchedTags === null || searchedTags === void 0 ? void 0 : searchedTags.forEach(function (tag) {
+        var existingTag = searchSuggestionsAttributesTags === null || searchSuggestionsAttributesTags === void 0 ? void 0 : searchSuggestionsAttributesTags.find(function (attrTag) {
+          var _attrTag$name;
+          return (tag === null || tag === void 0 ? void 0 : tag.slice(1)) === (attrTag === null || attrTag === void 0 ? void 0 : (_attrTag$name = attrTag.name) === null || _attrTag$name === void 0 ? void 0 : _attrTag$name.toLowerCase());
+        });
+        if (existingTag) {
+          attachedExistingTags.push(existingTag);
+        }
+      });
+      if ((attachedExistingTags === null || attachedExistingTags === void 0 ? void 0 : attachedExistingTags.length) > 0) {
+        searchInputRef.current.value = '';
+        dispatch(updateSearchSuggestions({
+          tags: [].concat(_toConsumableArray(searchSuggestionsTags || []), attachedExistingTags)
+        }));
+        return;
+      }
+    }
+    dispatch(updateSearchQuery({
+      query: trimmedValue
+    }));
+    dispatch(searchOrListViewFiles({
+      withStats: true,
+      applyActiveViewItemCheck: false
+    }));
+    toggleSendingSearch(true);
+  };
+  var isSearchDisabled = disableFiltersAndSearch && typeof search.query !== 'undefined';
+  var searchGroupProps = {
+    i18n: i18n,
+    searchInputRef: searchInputRef,
+    loading: isSearchLoading,
+    handleUpdateFilters: handleUpdateFilters,
+    sendSearch: sendSearch,
+    onClickSearch: onClickSearch,
+    clearSearch: clearSearch,
+    clearSelection: clearSelection,
+    setSearchInputFocused: setSearchInputFocused,
+    lastSearchValueRef: lastSearchValueRef,
+    isFiltersActive: isFiltersActive || hasAnySearchSuggestion || isSimilarSearchActive,
+    defaultSearchQuery: searchQuery || defaultSearchQuery,
+    searchInputFocused: searchInputFocused,
+    forceHideClearBtn: isSearchDisabled || forceFilters && !searchQuery && !hasAnySearchSuggestion && isFiltersActive,
+    disableSearch: isSearchDisabled,
+    enableAIEmbed: enableAIEmbed,
+    isReadOnly: isSimilarSearchActive
+  };
+  var handleInputChange = function handleInputChange(value) {
+    setSearchQueryState(value);
+  };
+  useEffect(function () {
+    setSearchQueryState(searchQuery || '');
+  }, [searchQuery]);
+  useEffect(function () {
+    var hasDefaultFilters = Object.keys(defaultFilters || {}).length > 0;
+    if (hasDefaultFilters || defaultSearchQuery) {
+      sendSearch(defaultSearchQuery);
+    }
+  }, [defaultSearchQuery]);
+  var renderAfterPrependix = function renderAfterPrependix() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [isSimilarSearchActive && /*#__PURE__*/_jsx(SimilarSearchTag, {}), /*#__PURE__*/_jsx(TempFilterRegexInput, {
+        foundFilterCode: foundFilterCode,
+        setFoundFilterCode: setFoundFilterCode
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SearchGroup, _objectSpread({
+      ref: containerRef,
+      onValueChangeCbk: valueChangeChecking,
+      onInputChange: handleInputChange,
+      placeholder: i18n('topBarSearchPlaceholder'),
+      prependix: aiSearchDisabled && /*#__PURE__*/_jsx(ContextDropdown, {}),
+      afterPrependix: renderAfterPrependix(),
+      hideSearchInput: isSimilarSearchActive,
+      showAfterPrependix: true,
+      preappendix: /*#__PURE__*/_jsx(AiSwitcher, {
+        searchInput: searchInput,
+        sendSearch: sendSearch,
+        clearSearch: clearSearch
+      }),
+      showPreappendix: showAiSwitcher,
+      onInputFocus: function onInputFocus() {
+        return setSearchInputFocused(true);
+      },
+      onInputBlur: function onInputBlur() {
+        return setSearchInputFocused(false);
+      },
+      onInputKeyDown: onKeyDown,
+      onInputKeyUp: onKeyUp,
+      disableDefaultKeyPressHandler: Boolean(mode) && !isTagModeOn,
+      isSendingSearch: isSendingSearch,
+      toggleSendingSearch: toggleSendingSearch
+    }, searchGroupProps)), !(isAiSearchActive && isAssetsView) && SuggestionsMenu]
+  });
+};
+export default Search;

package/lib/components/TopBar/TopBar.styled.js

@@ -0,0 +1,37 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+import { MenuItem as SfxMenuItem, Tag, EllipsedText } from '@scaleflex/ui/core';
+var TopBar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n  padding: 24px 24px 16px;\n  background-color: ", ";\n  outline: none;\n  flex-direction: column;\n\n  ", "\n"])), function (props) {
+  return props.theme.palette[PC.BackgroundStateless];
+}, function (_ref) {
+  var breakpoints = _ref.theme.breakpoints;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      padding-left: 13px;\n    }\n\n    ", " & {\n      padding-left: 13px;\n    }\n\n    ", " & {\n      padding-left: 13px;\n    }\n  "])), breakpoints.down('md'), breakpoints.classes.sm, breakpoints.classes.xs);
+});
+var TopBarRowLayout = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  align-items: center;\n"])));
+var LeftSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  margin-right: 12px;\n"])));
+var RightSide = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n"])));
+var CenterSide = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  height: 40px;\n  overflow: hidden;\n  display: flex;\n  outline: none;\n"])));
+var MenuItem = styled(SfxMenuItem)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  justify-content: flex-start;\n  gap: 10px;\n"])));
+var SimilarFileTag = styled(Tag)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  outline: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n\n  .SfxTag-Label {\n   display: flex;\n   align-items: center;\n   gap: 8px;\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.BordersItem];
+});
+var SimilarTagEllipsedText = styled(EllipsedText)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  white-space: break-spaces;\n"])));
+var ImageContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: 24px;\n min-width: 24px;\n height: 18px;\n"])));
+var Styled = {
+  TopBar: TopBar,
+  LeftSide: LeftSide,
+  RightSide: RightSide,
+  CenterSide: CenterSide,
+  MenuItem: MenuItem,
+  TopBarRowLayout: TopBarRowLayout,
+  SimilarFileTag: SimilarFileTag,
+  ImageContainer: ImageContainer,
+  SimilarTagEllipsedText: SimilarTagEllipsedText
+};
+export default Styled;

package/lib/components/TopBar/index.js

@@ -0,0 +1,61 @@
+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 { useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Menu } from '@scaleflex/icons';
+import { IconButton } from '@scaleflex/ui/core';
+import Search from './Search';
+import Styled from './TopBar.styled';
+import { useExplorer } from '../../hooks';
+import { mainMenuUpdated } from '../../slices/panels.slice';
+import { selectAllViews } from '../../slices/views.slice';
+import AppliedFilterChips from './AppliedFilterChips';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TopBar = function TopBar(_ref) {
+  var RightSideComponent = _ref.RightSideComponent;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts;
+  var availableViewsCount = useSelector(function (state) {
+    return selectAllViews(state).length;
+  });
+  var lastSearchValueRef = useRef('');
+  var hideSearch = opts.hideSearch;
+  var toggleMainMenu = function toggleMainMenu(open) {
+    dispatch(mainMenuUpdated({
+      opened: open
+    }));
+  };
+  var rightSideComponentValue = RightSideComponent && /*#__PURE__*/_jsx(RightSideComponent, {});
+  return /*#__PURE__*/_jsxs(Styled.TopBar, {
+    className: "filerobot-Explorer-TopBar",
+    tabIndex: -1,
+    children: [/*#__PURE__*/_jsxs(Styled.TopBarRowLayout, {
+      children: [/*#__PURE__*/_jsxs(Styled.CenterSide, {
+        className: "filerobot-Explorer-TopBar-centerSide",
+        children: [availableViewsCount > 1 && /*#__PURE__*/_jsx(Styled.LeftSide, {
+          children: /*#__PURE__*/_jsx(IconButton, {
+            size: "lg",
+            color: "basic",
+            onClick: function onClick() {
+              return toggleMainMenu(true);
+            },
+            "data-testid": "view-menu-toggle-btn",
+            children: function children(props) {
+              return /*#__PURE__*/_jsx(Menu, _objectSpread({}, props));
+            }
+          })
+        }), !hideSearch && /*#__PURE__*/_jsx(Search, {
+          lastSearchValueRef: lastSearchValueRef
+        })]
+      }), Boolean(rightSideComponentValue) && /*#__PURE__*/_jsx(Styled.RightSide, {
+        children: rightSideComponentValue
+      })]
+    }), /*#__PURE__*/_jsx(AppliedFilterChips, {})]
+  });
+};
+export default TopBar;

package/lib/components/TopSection/TopSection.styled.js

@@ -0,0 +1,22 @@
+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';
+import { ArrowBottom } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    background-color: ", ";\n    border-bottom: ", ";\n    width: 100%;\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref2) {
+  var palette = _ref2.theme.palette,
+    elevateTopSection = _ref2.elevateTopSection;
+  return elevateTopSection ? "1px solid  ".concat(palette[PC.BordersSecondary]) : '1px solid transparent';
+});
+var ArrowBottomIcon = styled(ArrowBottom)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  transition: transform 100ms ease;\n  ", "\n"])), function (_ref3) {
+  var $isCollapsed = _ref3.$isCollapsed;
+  return !$isCollapsed && "\n    transform: rotate(180deg);\n  ";
+});
+var Styled = {
+  Wrapper: Wrapper,
+  ArrowBottomIcon: ArrowBottomIcon
+};
+export default Styled;

package/lib/components/TopSection/index.js

@@ -0,0 +1,58 @@
+import { useRef, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectElevateTopSection, topSectionHeight } from '../../slices/topSection.slice';
+import { selectContainerWidth } from '../../slices/common.slice';
+import Filters from '../Filters';
+import { FiltersProvider } from '../Filters/FiltersContext';
+import HeaderBar from '../HeaderBar';
+import TopBar from '../TopBar';
+import { selectIsUploadsPanelOpened } from '../../slices/panels.slice';
+import { selectViewLayout } from '../../slices/views.slice';
+import Styled from './TopSection.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TopSection = function TopSection(_ref) {
+  var hideTopSection = _ref.hideTopSection,
+    showHeaderBar = _ref.showHeaderBar,
+    SortElement = _ref.SortElement,
+    TopBarRightComponent = _ref.TopBarRightComponent,
+    onRefresh = _ref.onRefresh,
+    _ref$showLayoutAndDet = _ref.showLayoutAndDetailsBtns,
+    showLayoutAndDetailsBtns = _ref$showLayoutAndDet === void 0 ? true : _ref$showLayoutAndDet,
+    _ref$showFilters = _ref.showFilters,
+    showFilters = _ref$showFilters === void 0 ? true : _ref$showFilters,
+    _ref$showTopBar = _ref.showTopBar,
+    showTopBar = _ref$showTopBar === void 0 ? true : _ref$showTopBar;
+  var dispatch = useDispatch();
+  var elevateTopSection = useSelector(selectElevateTopSection);
+  var isUploadPanelOpened = useSelector(selectIsUploadsPanelOpened);
+  var viewLayout = useSelector(selectViewLayout);
+  var containerWidth = useSelector(selectContainerWidth);
+  var topSectionRef = useRef();
+  useEffect(function () {
+    if (!hideTopSection) {
+      var _topSectionRef$curren;
+      dispatch(topSectionHeight(topSectionRef === null || topSectionRef === void 0 ? void 0 : (_topSectionRef$curren = topSectionRef.current) === null || _topSectionRef$curren === void 0 ? void 0 : _topSectionRef$curren.offsetHeight));
+    }
+  }, []);
+  useEffect(function () {
+    if (!hideTopSection) {
+      var _topSectionRef$curren2;
+      dispatch(topSectionHeight(topSectionRef === null || topSectionRef === void 0 ? void 0 : (_topSectionRef$curren2 = topSectionRef.current) === null || _topSectionRef$curren2 === void 0 ? void 0 : _topSectionRef$curren2.offsetHeight));
+    }
+  }, [containerWidth, viewLayout]);
+  if (hideTopSection || isUploadPanelOpened) return null;
+  return /*#__PURE__*/_jsxs(Styled.Wrapper, {
+    elevateTopSection: elevateTopSection,
+    ref: topSectionRef,
+    children: [showTopBar && /*#__PURE__*/_jsx(TopBar, {
+      RightSideComponent: TopBarRightComponent
+    }), showFilters && /*#__PURE__*/_jsx(FiltersProvider, {
+      children: /*#__PURE__*/_jsx(Filters, {})
+    }), showHeaderBar && /*#__PURE__*/_jsx(HeaderBar, {
+      SortElement: SortElement,
+      onRefresh: onRefresh,
+      showLayoutAndDetailsBtns: showLayoutAndDetailsBtns
+    })]
+  });
+};
+export default TopSection;

package/lib/components/UploadBar/UploadBar.styled.js

@@ -0,0 +1,84 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+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 { Button } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var UploadBarWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  transform: ", ";\n  transition: transform 150ms ease-out;\n"])), function (_ref) {
+  var isHidden = _ref.isHidden;
+  return isHidden && 'translateY(100px)';
+});
+var UploadBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row-reverse;\n  align-items: center;\n  position: relative;\n  z-index: 5;\n  width: 100%;\n  padding: 0 24px;\n  border-top: 1px solid ", ";\n  background-color: ", ";\n  height: 96px;\n  gap: 12px;\n  flex-wrap: wrap;\n\n  ", "\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.BordersSecondary];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.BackgroundSecondary];
+}, function (_ref4) {
+  var breakpoints = _ref4.theme.breakpoints;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", " {\n      height: 72px;\n    }\n\n    ", " & {\n      height: 72px;\n    }\n\n    ", " & {\n      height: 72px;\n    }\n\n    ", " & {\n      height: 72px;\n    }\n\n    ", " & {\n      height: 72px;\n    }\n  "])), breakpoints.between('xs', 'lg'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
+});
+var SecondaryButtonsWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 12px;\n"])));
+var ActionWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 12px;\n"])));
+var ActionButton = styled(Button)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-width:  ", ";\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .SfxButton-Label {\n    ", "\n  }\n\n  svg {\n    width: 18px;\n    height: 18px;\n\n    ", "\n\n    ", ";\n  }\n\n  ", "\n    \n    ", ";\n"])), function (_ref5) {
+  var $backBtn = _ref5.$backBtn;
+  return !$backBtn ? '120px' : 'auto';
+}, function (_ref6) {
+  var typography = _ref6.theme.typography;
+  return typography.font[FV.ButtonLgEmphasis];
+}, function (_ref7) {
+  var palette = _ref7.theme.palette,
+    $backBtn = _ref7.$backBtn;
+  return !$backBtn && "\n      color: ".concat(palette[PC.IconsInvert], ";\n    ");
+}, function (_ref8) {
+  var disabled = _ref8.disabled;
+  return disabled && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (_ref9) {
+    var palette = _ref9.theme.palette;
+    return palette[PC.BordersDisabled];
+  });
+}, function (_ref10) {
+  var _ref10$theme = _ref10.theme,
+    breakpoints = _ref10$theme.breakpoints,
+    typography = _ref10$theme.typography;
+  return "\n    ".concat(breakpoints.between('xs', 'lg'), " {\n      height: 40px;\n\n      svg {\n        width: 16px;\n        height: 16px;\n\n        ").concat(function (_ref11) {
+    var disabled = _ref11.disabled;
+    return disabled && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), function (_ref12) {
+      var palette = _ref12.theme.palette;
+      return palette[PC.BordersDisabled];
+    });
+  }, ";\n      }\n\n      .SfxButton-Label {\n        ").concat(typography.font[FV.ButtonMdEmphasis], ";\n      }\n    }\n\n    ").concat(breakpoints.classes.lg, " & {\n      height: 40px;\n\n\n      svg {\n        width: 16px;\n        height: 16px;\n\n        ").concat(function (_ref13) {
+    var disabled = _ref13.disabled;
+    return disabled && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), function (_ref14) {
+      var palette = _ref14.theme.palette;
+      return palette[PC.BordersDisabled];
+    });
+  }, ";\n      }\n\n      .SfxButton-Label {\n        ").concat(typography.font[FV.ButtonMdEmphasis], ";\n      }\n    }\n\n    ").concat(breakpoints.classes.md, " & {\n      height: 40px;\n\n      svg {\n        width: 16px;\n        height: 16px;\n\n        ").concat(function (_ref15) {
+    var disabled = _ref15.disabled;
+    return disabled && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), function (_ref16) {
+      var palette = _ref16.theme.palette;
+      return palette[PC.BordersDisabled];
+    });
+  }, ";\n      }\n\n      .SfxButton-Label {\n        ").concat(typography.font[FV.ButtonMdEmphasis], ";\n      }\n    }\n\n    ").concat(breakpoints.classes.sm, " & {\n      height: 40px;\n\n      svg {\n        width: 16px;\n        height: 16px;\n\n        ").concat(function (_ref17) {
+    var disabled = _ref17.disabled;
+    return disabled && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), function (_ref18) {
+      var palette = _ref18.theme.palette;
+      return palette[PC.BordersDisabled];
+    });
+  }, ";\n      }\n\n      .SfxButton-Label {\n        ").concat(typography.font[FV.ButtonMdEmphasis], ";\n      }\n    }\n\n    ").concat(breakpoints.classes.xs, " & {\n      height: 40px;\n\n      svg {\n        width: 16px;\n        height: 16px;\n\n        ").concat(function (_ref19) {
+    var disabled = _ref19.disabled;
+    return disabled && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), function (_ref20) {
+      var palette = _ref20.theme.palette;
+      return palette[PC.BordersDisabled];
+    });
+  }, ";\n      }\n\n      .SfxButton-Label {\n        ").concat(typography.font[FV.ButtonMdEmphasis], ";\n      };\n    }\n    \n    ");
+}, function (_ref21) {
+  var $backBtn = _ref21.$backBtn;
+  return $backBtn && "\n      svg {\n        width: 8px;\n        height: 14px\n      };\n\n      .SfxButton-StartIcon {\n        margin-right: 6px;\n        width: 14px;\n        height: 14px;\n      };\n    ";
+});
+var Styled = {
+  UploadBarWrapper: UploadBarWrapper,
+  SecondaryButtonsWrapper: SecondaryButtonsWrapper,
+  UploadBar: UploadBar,
+  ActionWrapper: ActionWrapper,
+  ActionButton: ActionButton
+};
+export default Styled;