@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/EmptyViewPlaceholder/index.js

@@ -0,0 +1,58 @@
+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 { useSelector } from 'react-redux';
+import { NoResult } from '@scaleflex/icons';
+import { useExplorer, useIsSmallScreen } from '../../hooks';
+import Styled from './EmptyViewPlaceholder.styled';
+import { selectIsSearchOrFiltersMode } from '../../slices/views.slice';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var EmptyViewPlaceholder = function EmptyViewPlaceholder(_ref) {
+  var onContextMenu = _ref.onContextMenu,
+    _ref$titleI18nKey = _ref.titleI18nKey,
+    titleI18nKey = _ref$titleI18nKey === void 0 ? 'explorerEmptyViewDefaultTitle' : _ref$titleI18nKey,
+    _ref$hintI18nKeys = _ref.hintI18nKeys,
+    hintI18nKeys = _ref$hintI18nKeys === void 0 ? ['explorerEmptyViewDefaultHint'] : _ref$hintI18nKeys,
+    _ref$useSearchAndFilt = _ref.useSearchAndFilterKeysIfApplied,
+    useSearchAndFilterKeysIfApplied = _ref$useSearchAndFilt === void 0 ? true : _ref$useSearchAndFilt,
+    SuffixComponent = _ref.SuffixComponent,
+    WrapperComponent = _ref.WrapperComponent;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  var isSmallScreen = useIsSmallScreen();
+  var isSearchOrFiltersApplied = useSelector(function (state) {
+    return useSearchAndFilterKeysIfApplied && selectIsSearchOrFiltersMode(state);
+  });
+  var usedTitleKey = isSearchOrFiltersApplied ? 'mutualizedNoResults' : titleI18nKey;
+  var usedHintKeys = isSearchOrFiltersApplied ? 'mutualizedTryAnotherSearch' : hintI18nKeys;
+  var iconProps = isSearchOrFiltersApplied ? {
+    as: NoResult,
+    width: 150,
+    height: 60
+  } : {};
+  var renderHint = function renderHint(hintI18nKey) {
+    return /*#__PURE__*/_jsx(Styled.Hint, {
+      children: i18n(hintI18nKey) || hintI18nKey
+    }, hintI18nKey);
+  };
+  var emptyViewContent = /*#__PURE__*/_jsxs(Styled.Wrapper, {
+    isSmallScreen: isSmallScreen,
+    onContextMenu: onContextMenu,
+    children: [/*#__PURE__*/_jsx(Styled.NoFilesIcon, _objectSpread({
+      $isSearchOrFiltersApplied: isSearchOrFiltersApplied
+    }, iconProps)), (usedTitleKey || usedHintKeys) && /*#__PURE__*/_jsxs(Styled.TextsWrapper, {
+      children: [usedTitleKey && /*#__PURE__*/_jsx(Styled.Title, {
+        children: i18n(usedTitleKey) || usedTitleKey
+      }), Array.isArray(usedHintKeys) ? /*#__PURE__*/_jsx("div", {
+        children: usedHintKeys.map(renderHint)
+      }) : renderHint(usedHintKeys)]
+    }), !isSearchOrFiltersApplied && SuffixComponent && /*#__PURE__*/_jsx(SuffixComponent, {})]
+  });
+  return WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
+    children: emptyViewContent
+  }) : emptyViewContent;
+};
+export default EmptyViewPlaceholder;

package/lib/components/ExploreView.js

@@ -0,0 +1,46 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["mainMenuProps", "containerProps"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+// !!!!! This component path, name and default export must kept the same,
+// !!!!! as this is expected to be used by the widget usage in other projects.
+import { useSelector } from 'react-redux';
+import { PoweredBy } from '@scaleflex/widget-common/lib';
+import { selectIsMainMenuCollapsed } from '../slices/panels.slice';
+import { useExplorer, useIsSmallScreen } from '../hooks';
+import MainMenu from './MainMenu';
+import Styled from '../Explorer.styled';
+import Views from './Views';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ExploreView = function ExploreView(_ref) {
+  var mainMenuProps = _ref.mainMenuProps,
+    containerProps = _ref.containerProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isWidgetSmallSize = useIsSmallScreen();
+  var isMainMenuCollapsed = useSelector(selectIsMainMenuCollapsed);
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts;
+  var showScaleflexCopyright = opts.showScaleflexCopyright;
+  return /*#__PURE__*/_jsxs(Styled.Wrapper, _objectSpread(_objectSpread({
+    className: "filerobot-Explorer-innerContainer"
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(MainMenu, _objectSpread({}, mainMenuProps)), /*#__PURE__*/_jsxs(Styled.Container, _objectSpread(_objectSpread({
+      className: "filerobot-Explorer-main",
+      isMainMenuCollapsed: isMainMenuCollapsed,
+      isWidgetSmallSize: isWidgetSmallSize
+    }, containerProps), {}, {
+      children: [/*#__PURE__*/_jsx(Views, {}), showScaleflexCopyright && /*#__PURE__*/_jsx(PoweredBy, {
+        normalText: i18n('mutualizedPoweredByText'),
+        strongText: "Scaleflex"
+      })]
+    }))]
+  }));
+};
+export default ExploreView;

package/lib/components/ExplorerUI.js

@@ -0,0 +1,17 @@
+import { useSelector } from 'react-redux';
+import { selectUserSassKey } from '@scaleflex/widget-core/lib/slices/user.slice';
+import LoginScreen from './LoginScreen';
+import { useExplorer } from '../hooks';
+import AuthExplorerView from './AuthExplorerView';
+
+// Previous ExplorerView moved into `AuthExplorerView`
+import { jsx as _jsx } from "react/jsx-runtime";
+var ExplorerUI = function ExplorerUI() {
+  var _useExplorer = useExplorer(),
+    useLoginMode = _useExplorer.opts.useLoginMode;
+  var isSassKeyAvailable = useSelector(function (state) {
+    return Boolean(selectUserSassKey(state));
+  });
+  return useLoginMode && !isSassKeyAvailable ? /*#__PURE__*/_jsx(LoginScreen, {}) : /*#__PURE__*/_jsx(AuthExplorerView, {});
+};
+export default ExplorerUI;

package/lib/components/ExplorerWrapper.js

@@ -0,0 +1,114 @@
+import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import isDragDropSupported from '@scaleflex/widget-utils/lib/isDragDropSupported';
+import { LoaderView } from '@scaleflex/widget-common';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { selectCoreLoading } from '@scaleflex/widget-core/lib/slices/common.slice';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorer } from '../hooks';
+import ActionBar from './ActionBar';
+import { selectActivePickerPanel } from '../slices/panels.slice';
+import { selectAreInsidesReadyToBeVisible, selectDarkMode, selectIsExplorerPluginLoading, selectIsPluginModalClosing, selectIsPluginModalHidden } from '../slices/common.slice';
+import { changeView } from '../slices/views.slice';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var ExplorerWrapper = function ExplorerWrapper(_ref) {
+  var children = _ref.children,
+    showChildrenOnly = _ref.showChildrenOnly;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    isTargetDomEl = _useExplorer.isTargetDomEl,
+    handleClickOutside = _useExplorer.handleClickOutside,
+    requestCloseModal = _useExplorer.requestCloseModal,
+    handleDragOver = _useExplorer.handleDragOver,
+    handleDragLeave = _useExplorer.handleDragLeave,
+    handleDrop = _useExplorer.handleDrop;
+  var theme = useTheme();
+  var activePickerPanel = useSelector(selectActivePickerPanel);
+  var isClosing = useSelector(selectIsPluginModalClosing);
+  var isHidden = useSelector(selectIsPluginModalHidden);
+  var areInsidesReadyToBeVisible = useSelector(selectAreInsidesReadyToBeVisible);
+  var themeMode = useSelector(function (state) {
+    return selectDarkMode(state) ? 'dark' : 'light';
+  });
+  var isCoreLoading = useSelector(selectCoreLoading);
+  var isExplorerLoading = useSelector(selectIsExplorerPluginLoading);
+  var isLoading = isCoreLoading || isExplorerLoading;
+  var animateOpenClose = opts.animateOpenClose,
+    inline = opts.inline,
+    width = opts.width,
+    height = opts.height,
+    ExploreViewComponent = opts.ExploreViewComponent,
+    useAssetsPicker = opts.useAssetsPicker,
+    disableMultipleSelect = opts.disableMultipleSelect;
+
+  // TODO: we are adding this check until we support string and percentage in @scaleflex/ui
+  var containerBreakpointClass = typeof width === 'string' ? '' : theme.breakpoints.getBreakpointClass(width, true);
+  var explorerClassName = classNames({
+    'filerobot-Root': isTargetDomEl,
+    'filerobot-Explorer--animateOpenClose': animateOpenClose,
+    'filerobot-Explorer--isClosing': isClosing,
+    'filerobot-Explorer--modal': !inline,
+    'filerobot-Explorer-assets-picker-modal': useAssetsPicker,
+    'filerobot-Explorer--isInnerWrapVisible': areInsidesReadyToBeVisible
+  }, containerBreakpointClass, 'filerobot-Explorer');
+  var explorerInnerClassName = classNames({
+    'filerobot-size--fullscreen': width === '100%' && height === '100%'
+  }, 'filerobot-Explorer-inner');
+  useUpdateEffect(function () {
+    if (isLoading && opts.view) {
+      dispatch(changeView({
+        view: opts.view
+      }));
+    }
+  }, [opts.view]);
+  var renderAuthContent = function renderAuthContent() {
+    return isLoading ? /*#__PURE__*/_jsx(LoaderView, {
+      loaderLabel: i18n('loaderLoadingLabel')
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [Boolean(ExploreViewComponent) && /*#__PURE__*/_jsx(ExploreViewComponent, {}), children, !activePickerPanel && !(useAssetsPicker && disableMultipleSelect) && /*#__PURE__*/_jsx(ActionBar, {})]
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: explorerClassName,
+    "data-filerobot-theme": themeMode,
+    "data-filerobot-drag-drop-supported": isDragDropSupported(),
+    "aria-hidden": inline ? 'false' : isHidden,
+    "aria-label": !inline ? i18n('explorerWindowTitle') : i18n('explorerTitle'),
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "filerobot-Explorer-overlay",
+      tabIndex: -1,
+      onClick: handleClickOutside
+    }), /*#__PURE__*/_jsxs("div", {
+      className: explorerInnerClassName,
+      "aria-modal": !inline ? 'true' : undefined,
+      role: !inline ? 'dialog' : undefined,
+      style: {
+        width: width,
+        height: height
+      },
+      tabIndex: -1,
+      "aria-label": "Scaleflex widget modal",
+      children: [!inline && Boolean(ExploreViewComponent) && !useAssetsPicker && /*#__PURE__*/_jsx("button", {
+        className: "filerobot-u-reset filerobot-Explorer-close",
+        type: "button",
+        "aria-label": i18n('widgetCloseModalTitle'),
+        title: i18n('widgetCloseModalTitle'),
+        onClick: requestCloseModal,
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          children: "\xD7"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "filerobot-Explorer-innerWrap",
+        children: showChildrenOnly ? children : renderAuthContent()
+      })]
+    })]
+  });
+};
+export default ExplorerWrapper;

package/lib/components/FacetedSearch/DrawerBody/index.js

@@ -0,0 +1,42 @@
+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 _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 _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 _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; }
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import Field from '../Field';
+import GroupWrapper from '../GroupWrapper';
+import { SIDE_FACETED_SEARCH_FIELDS_TYPE, STATIC_FIELDS } from '../FacetedSearch.constants';
+import { selectSortedMetadataFields } from '../../../slices/metadata.slice';
+import { useExplorerI18n } from '../../../hooks';
+import { isBooleanField } from '../../../utils/filters';
+import Styled from '../FacetedSearch.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DrawerBody = function DrawerBody() {
+  var i18n = useExplorerI18n();
+  var sortedMetadataFields = useSelector(selectSortedMetadataFields);
+  var fields = useMemo(function () {
+    return [].concat(_toConsumableArray(STATIC_FIELDS), _toConsumableArray(sortedMetadataFields)).filter(function (_ref) {
+      var type = _ref.type;
+      return SIDE_FACETED_SEARCH_FIELDS_TYPE.includes(type);
+    });
+  }, [sortedMetadataFields]);
+  return /*#__PURE__*/_jsx(Styled.GroupsContainer, {
+    children: fields.map(function (field) {
+      var _field$title;
+      return /*#__PURE__*/_jsx(GroupWrapper, {
+        isStatic: field.isStatic,
+        title: field.i18nLabel ? i18n(field.i18nLabel) : field.title,
+        fieldKey: field.key,
+        type: field.type,
+        hiddenTitle: isBooleanField(field),
+        children: /*#__PURE__*/_jsx(Field, {
+          field: field
+        })
+      }, "".concat(field.key, "-").concat((_field$title = field.title) !== null && _field$title !== void 0 ? _field$title : ''));
+    })
+  });
+};
+export default DrawerBody;

package/lib/components/FacetedSearch/DrawerWrapper/index.js

@@ -0,0 +1,83 @@
+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 { useDispatch, useSelector } from 'react-redux';
+import { SidebarLeft } from '@scaleflex/icons';
+import { useExplorerI18n, useForcedFilters } from '../../../hooks';
+import Drawer from '../../Drawer';
+import DrawerBody from '../DrawerBody';
+import { selectAppliedFilters, selectIsAnyFacetedSearchFilterActive, updateFilteredFiles } from '../../../slices/filters.slice';
+import { facetedSearchSidebarToggled, selectFacetedSearchSidebarExpanded } from '../../../slices/panels.slice';
+import Styled from '../FacetedSearch.styled';
+import { FILTER_SECTION_KEYS } from '../../Filters/Filters.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var WIDTH = 302;
+var DrawerWrapper = function DrawerWrapper() {
+  var i18n = useExplorerI18n();
+  var dispatch = useDispatch();
+  var _useForcedFilters = useForcedFilters(),
+    isForcedFilters = _useForcedFilters.isForcedFilters;
+  var appliedFilters = useSelector(selectAppliedFilters);
+  var facetedSearchSidebarExpanded = useSelector(selectFacetedSearchSidebarExpanded);
+  var isAnyFacetedSearchFilterActive = useSelector(selectIsAnyFacetedSearchFilterActive);
+  var _useState = useState(WIDTH),
+    _useState2 = _slicedToArray(_useState, 2),
+    drawerWidth = _useState2[0],
+    setDrawerWidth = _useState2[1];
+  var clearAllFilters = function clearAllFilters(event) {
+    event.stopPropagation();
+    if (!isAnyFacetedSearchFilterActive || isForcedFilters) return;
+    var nextAppliedFilters = _objectSpread({}, appliedFilters);
+    delete nextAppliedFilters[FILTER_SECTION_KEYS.DATE];
+    delete nextAppliedFilters[FILTER_SECTION_KEYS.METADATA];
+    dispatch(updateFilteredFiles({
+      filters: nextAppliedFilters
+    }));
+  };
+  var closeDrawer = function closeDrawer() {
+    dispatch(facetedSearchSidebarToggled());
+  };
+  return /*#__PURE__*/_jsx(Drawer, {
+    direction: "e",
+    resizerStyle: {
+      marginLeft: facetedSearchSidebarExpanded ? 0 : "-".concat(drawerWidth, "px"),
+      zIndex: 1000,
+      marginTop: 24
+    },
+    noTopMargin: true,
+    noResizerShadow: true,
+    defaultWidth: WIDTH,
+    showCloseIcon: false,
+    onResize: setDrawerWidth,
+    children: /*#__PURE__*/_jsxs(Styled.DrawerInnerContainer, {
+      collapsed: !facetedSearchSidebarExpanded,
+      children: [/*#__PURE__*/_jsx(Styled.DrawerButton, {
+        color: "basic",
+        size: "sm",
+        onClick: closeDrawer,
+        children: /*#__PURE__*/_jsx(SidebarLeft, {})
+      }), /*#__PURE__*/_jsxs(Styled.HeadingContainer, {
+        children: [/*#__PURE__*/_jsx(Styled.Heading, {
+          children: i18n('mutualizedFiltersLabel')
+        }), /*#__PURE__*/_jsx(Styled.ClearButton, {
+          tabIndex: 0,
+          color: "link-secondary",
+          disabled: !isAnyFacetedSearchFilterActive || isForcedFilters,
+          onClick: clearAllFilters,
+          children: i18n('filtersClearButton')
+        })]
+      }), /*#__PURE__*/_jsx(DrawerBody, {})]
+    })
+  });
+};
+export default DrawerWrapper;

package/lib/components/FacetedSearch/FacetedSearch.constants.js

@@ -0,0 +1,27 @@
+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 _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 _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 _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; }
+import { DATE_OPTIONS_RANGE, METADATA_FIELDS_TYPES } from '../Filters/Filters.constants';
+var DATE_FIELD = {
+  key: METADATA_FIELDS_TYPES.DATE,
+  type: METADATA_FIELDS_TYPES.DATE,
+  i18nLabel: 'explorerFacetedSearchDateRecord',
+  isStatic: true
+};
+export var CUSTOM_DATE_RANGE_VALUE = 'custom';
+export var NONE_DATE_RANGE_VALUE = 'none';
+export var NONE_TIME_RANGE_OPTION = {
+  i18nStr: 'explorerFacetedSearchNone',
+  value: NONE_DATE_RANGE_VALUE
+};
+export var CUSTOM_TIME_RANGE_OPTION = {
+  i18nStr: 'filterGroupDateOptionsCustomRange',
+  value: CUSTOM_DATE_RANGE_VALUE
+};
+export var SIDE_FACETED_SEARCH_FIELDS_TYPE = [METADATA_FIELDS_TYPES.BOOLEAN, METADATA_FIELDS_TYPES.DATE, METADATA_FIELDS_TYPES.SELECT_ONE, METADATA_FIELDS_TYPES.MULTI_SELECT];
+export var TIME_RANGE_OPTIONS = [NONE_TIME_RANGE_OPTION].concat(_toConsumableArray(DATE_OPTIONS_RANGE));
+export var STATIC_FIELDS = [DATE_FIELD];
+export var BIG_OPTIONS_THRESHOLD = 8;

package/lib/components/FacetedSearch/FacetedSearch.styled.js

@@ -0,0 +1,101 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC, PSH } from '@scaleflex/widget-common';
+import { Button, IconButton, SwitcherGroup as SfxSwitcherGroup, Search as SfxSearch } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+var DrawerInnerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  row-gap: 16px;\n  padding: 8px 0;\n  box-shadow: ", ";\n"])), function (_ref) {
+  var shadows = _ref.theme.shadows,
+    collapsed = _ref.collapsed;
+  return collapsed ? 'none' : shadows[PSH.LeftPanelMd];
+});
+var HeadingContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 16px;\n  padding: 0 24px;\n"])));
+var Heading = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  ", ";\n"])), function (_ref2) {
+  var font = _ref2.theme.typography.font;
+  return font[FV.TitleH4];
+});
+var ClearButton = styled(Button)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 1px;\n    height: 16px;\n    background-color: ", ";\n  }\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var GroupContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  max-height: ", ";\n  overflow: hidden;\n  transition: max-height 250ms ease-in-out, margin-top 250ms ease-in-out;\n  display: flex;\n  flex-direction: column;\n"])), function (_ref4) {
+  var collapsed = _ref4.collapsed,
+    hiddenTitle = _ref4.hiddenTitle;
+  return !collapsed && !hiddenTitle ? '8px' : 0;
+}, function (_ref5) {
+  var collapsed = _ref5.collapsed;
+  return !collapsed ? '1000px' : 0;
+});
+var GroupsContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  overflow: hidden auto;\n"])));
+var Divider = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 1px;\n  margin-top: 16px;\n  background-color: ", ";\n"])), function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var GroupContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 16px 24px 0 24px;\n\n  &:first-child {\n    padding-top: 0;\n  }\n\n  &:last-child ", " {\n    display: none;\n  }\n"])), Divider);
+var GroupHeading = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 7px 0;\n  max-height: 32px;\n  column-gap: 16px;\n  cursor: pointer;\n"])));
+var GroupName = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: 0;\n  user-select: none;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  ", ";\n"])), function (_ref7) {
+  var font = _ref7.theme.typography.font;
+  return font[FV.TitleH6];
+});
+var ToggleIconButton = styled(IconButton)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-left: auto;\n\n  svg {\n    transition: transform 250ms ease-in-out;\n    transform: ", ";\n  }\n"])), function (_ref8) {
+  var isFlipped = _ref8.isFlipped;
+  return isFlipped ? 'rotate(180deg)' : 'rotate(0)';
+});
+var SwitcherGroup = styled(SfxSwitcherGroup)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 7px 0;\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n\n  .SfxSwitcherGroup-Label {\n    display: inline-block;\n    margin-left: 0;\n    max-width: 100%;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    user-select: none;\n    ", ";\n  }\n"])), function (_ref9) {
+  var font = _ref9.theme.typography.font;
+  return font[FV.TitleH6];
+});
+var OptionsContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 12px;\n  max-height: ", ";\n  overflow: hidden;\n  transition: max-height 400ms ease-in-out;\n\n  .SfxInput-ClearIcon {\n    display: none !important;\n  }\n"])), function (_ref10) {
+  var isExpanded = _ref10.isExpanded,
+    initialHeight = _ref10.initialHeight;
+  return isExpanded ? '1000px' : "".concat(initialHeight, "px");
+});
+var Search = styled(SfxSearch)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n"])));
+var PlaceholderWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  row-gap: 16px;\n  padding: 40px 0;\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref11) {
+  var palette = _ref11.theme.palette;
+  return palette[PC.IconsPlaceholder];
+});
+var PlaceholderContent = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 4px;\n  text-align: center;\n"])));
+var PlaceholderText = styled.p(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  ", ";\n"])), function (_ref12) {
+  var palette = _ref12.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref13) {
+  var font = _ref13.theme.typography.font;
+  return font[FV.LabelLargeEmphasis];
+});
+var PlaceholderSubText = styled(PlaceholderText)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref14) {
+  var font = _ref14.theme.typography.font;
+  return font[FV.TextLarge];
+});
+var ToggleListButton = styled(Button)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-top: 12px;\n\n  svg {\n    transition: transform 450ms ease-in-out;\n    transform: ", ";\n  }\n"])), function (_ref15) {
+  var isFlipped = _ref15.isFlipped;
+  return isFlipped ? 'rotate(180deg)' : 'rotate(0)';
+});
+var DrawerButton = styled(IconButton)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 24px;\n  top: 4px;\n"])));
+var DateOptionsWrapper = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(2, calc(50% - 12px / 2)); // 12px for gap\n  grid-template-rows: auto;\n  gap: 12px;\n  height: ", ";\n  transition: height 250ms ease-out;\n\n  .SfxCrossButton-root {\n    display: none !important;\n  }\n\n  .SfxSelect-root {\n    width: 100%;\n  }\n\n  .SfxDate-picker-placeholder,\n  .SfxDate-picker-input,\n  .SfxDate-picker-root {\n    width: 100%;\n    gap: 0;\n\n    .SfxInput-Base {\n      font-size: 12px;\n      line-height: 12px;\n    }\n\n    .SfxInput-ClearIcon {\n      display: none;\n    }\n\n    .SfxInputGroup-root {\n      position: relative;\n    }\n  }\n\n  .SfxDate-picker-placeholder {\n    top: 50%;\n    left: 12px;\n    transform: translateY(-50%);\n    width: calc(100% - 14px - 24px); // 14px gap, 24px input width\n    height: fit-content;\n    font-size: 14px;\n  }\n"])), function (_ref16) {
+  var isExpanded = _ref16.isExpanded;
+  return isExpanded ? '76px' : '32px';
+});
+var Styled = {
+  DrawerInnerContainer: DrawerInnerContainer,
+  HeadingContainer: HeadingContainer,
+  Heading: Heading,
+  ClearButton: ClearButton,
+  GroupsContainer: GroupsContainer,
+  GroupContainer: GroupContainer,
+  GroupHeading: GroupHeading,
+  GroupName: GroupName,
+  GroupContent: GroupContent,
+  ToggleIconButton: ToggleIconButton,
+  Divider: Divider,
+  SwitcherGroup: SwitcherGroup,
+  OptionsContainer: OptionsContainer,
+  Search: Search,
+  PlaceholderWrapper: PlaceholderWrapper,
+  PlaceholderContent: PlaceholderContent,
+  PlaceholderText: PlaceholderText,
+  PlaceholderSubText: PlaceholderSubText,
+  ToggleListButton: ToggleListButton,
+  DrawerButton: DrawerButton,
+  DateOptionsWrapper: DateOptionsWrapper
+};
+export default Styled;

package/lib/components/FacetedSearch/FacetedSearch.utils.js

@@ -0,0 +1,3 @@
+export var sanitizeQuery = function sanitizeQuery(query) {
+  return query.toLowerCase().trim().replaceAll(/\s+/g, ' ');
+};

package/lib/components/FacetedSearch/Field/Date.js

@@ -0,0 +1,69 @@
+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 { useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { DatePicker } from '@scaleflex/ui/core';
+import preventDefault from '@scaleflex/widget-utils/lib/preventDefault';
+import { selectAppliedFilters, selectMetadataAppliedFilters, updateFilteredFiles } from '../../../slices/filters.slice';
+import { useForcedFilters } from '../../../hooks';
+import { findMetadataFieldIndex, getOldMetadataDateFilterValFromArray, getUpdatedDateMetadataFields } from '../../../utils/filters';
+import Styled from '../FacetedSearch.styled';
+import { FILTER_SECTION_KEYS } from '../../Filters/Filters.constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Date = function Date(_ref) {
+  var _useMemo;
+  var field = _ref.field;
+  var dispatch = useDispatch();
+  var appliedFilters = useSelector(selectAppliedFilters);
+  var metadataValues = useSelector(selectMetadataAppliedFilters);
+  var _useForcedFilters = useForcedFilters(),
+    isForcedMetadataField = _useForcedFilters.isForcedMetadataField;
+  var metadataFieldIndex = useMemo(function () {
+    return findMetadataFieldIndex(metadataValues, field.key);
+  }, [metadataValues]);
+  var metadataField = (_useMemo = useMemo(function () {
+    return metadataValues[metadataFieldIndex];
+  }, [metadataValues])) !== null && _useMemo !== void 0 ? _useMemo : {};
+  var key = metadataField.key,
+    _metadataField$value = metadataField.value,
+    value = _metadataField$value === void 0 ? '' : _metadataField$value;
+  var forcedFilter = useMemo(function () {
+    return isForcedMetadataField(key);
+  }, [key]);
+  var updateDateField = function updateDateField(value) {
+    if (forcedFilter) return;
+    var nextMetadata = getUpdatedDateMetadataFields({
+      value: value,
+      metadata: metadataValues,
+      field: field,
+      metadataFieldIndex: metadataFieldIndex
+    });
+    var nextAppliedFilters = _objectSpread(_objectSpread({}, appliedFilters), {}, _defineProperty({}, FILTER_SECTION_KEYS.METADATA, {
+      value: nextMetadata
+    }));
+    dispatch(updateFilteredFiles({
+      filters: nextAppliedFilters
+    }));
+  };
+  return /*#__PURE__*/_jsx(Styled.OptionsContainer, {
+    children: /*#__PURE__*/_jsx(DatePicker, {
+      size: "sm",
+      value: Array.isArray(value) ? getOldMetadataDateFilterValFromArray(value[0]) : value,
+      onKeyDown: preventDefault,
+      fullWidth: true,
+      hideCopyIcon: true,
+      disabled: forcedFilter,
+      onChange: updateDateField,
+      calendarStyles: {
+        position: 'relative',
+        height: 300,
+        marginBottom: 9
+      }
+    })
+  });
+};
+export default Date;

package/lib/components/FacetedSearch/Field/Placeholder.js

@@ -0,0 +1,20 @@
+import { NoResult } from '@scaleflex/icons';
+import { useExplorerI18n } from '../../../hooks';
+import Styled from '../FacetedSearch.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Placeholder = function Placeholder() {
+  var i18n = useExplorerI18n();
+  return /*#__PURE__*/_jsxs(Styled.PlaceholderWrapper, {
+    children: [/*#__PURE__*/_jsx(NoResult, {
+      width: 150,
+      height: 60
+    }), /*#__PURE__*/_jsxs(Styled.PlaceholderContent, {
+      children: [/*#__PURE__*/_jsx(Styled.PlaceholderText, {
+        children: i18n('mutualizedNoResults')
+      }), /*#__PURE__*/_jsx(Styled.PlaceholderSubText, {
+        children: i18n('mutualizedTryAnotherSearch')
+      })]
+    })]
+  });
+};
+export default Placeholder;