@scaleflex/widget-explorer 0.0.1

package/lib/components/common/FolderSelector/BrowseFoldersMenu.js

@@ -0,0 +1,114 @@
+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 { useEffect, useState } from 'react';
+import { Button } from '@scaleflex/ui/core';
+import { PlusOutline } from '@scaleflex/icons';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import FoldersTree from '../../FoldersView/FoldersTree';
+import { useExplorerI18n } from '../../../hooks';
+import useAddFolder from '../../FoldersView/hooks/useAddFolder';
+import Styled from './FolderSelector.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var NEW_FOLDER = 'New folder';
+var BrowseFoldersMenu = function BrowseFoldersMenu(_ref) {
+  var confirmFolderSelection = _ref.confirmFolderSelection,
+    toggleBrowseFolderMenu = _ref.toggleBrowseFolderMenu,
+    browseFolderMenuAnchorEl = _ref.browseFolderMenuAnchorEl,
+    hideAddNewFolderButton = _ref.hideAddNewFolderButton,
+    notSelectableFolders = _ref.notSelectableFolders,
+    noRootFolder = _ref.noRootFolder,
+    selectedFolder = _ref.selectedFolder;
+  var i18n = useExplorerI18n();
+  var _useAddFolder = useAddFolder(),
+    addFolder = _useAddFolder.addFolder,
+    isAddingFolder = _useAddFolder.isAddingFolder,
+    isNewFolderInputError = _useAddFolder.isNewFolderInputError;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showAddFolderInput = _useState2[0],
+    setShowAddFolderInput = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    disableAddFolderButton = _useState4[0],
+    setDisableAddFolderButton = _useState4[1];
+  var _useState5 = useState(selectedFolder || {}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tmpSelectedFolder = _useState6[0],
+    setTmpSelectedFolder = _useState6[1];
+  var _useState7 = useState(NEW_FOLDER),
+    _useState8 = _slicedToArray(_useState7, 2),
+    newFolderName = _useState8[0],
+    setNewFolderName = _useState8[1];
+  var onConfirmFolderSelection = function onConfirmFolderSelection() {
+    if (showAddFolderInput) {
+      addFolder({
+        selectedPath: tmpSelectedFolder.path,
+        folderName: newFolderName,
+        onSuccess: function onSuccess(folder) {
+          confirmFolderSelection(folder);
+        }
+      });
+    } else {
+      confirmFolderSelection(tmpSelectedFolder);
+    }
+  };
+  var handleAddNewFolder = function handleAddNewFolder() {
+    setShowAddFolderInput(true);
+    setNewFolderName(NEW_FOLDER);
+  };
+  useEffect(function () {
+    setDisableAddFolderButton(!tmpSelectedFolder.path);
+  }, [tmpSelectedFolder]);
+  useUpdateEffect(function () {
+    if ((selectedFolder === null || selectedFolder === void 0 ? void 0 : selectedFolder.path) !== (tmpSelectedFolder === null || tmpSelectedFolder === void 0 ? void 0 : tmpSelectedFolder.path)) {
+      setTmpSelectedFolder(selectedFolder || {});
+    }
+  }, [selectedFolder]);
+  return /*#__PURE__*/_jsxs(Styled.Menu, {
+    onClose: toggleBrowseFolderMenu,
+    open: Boolean(browseFolderMenuAnchorEl),
+    anchorEl: browseFolderMenuAnchorEl,
+    children: [/*#__PURE__*/_jsx(Styled.FolderTreeWrapper, {
+      children: /*#__PURE__*/_jsx(FoldersTree, {
+        onFolderClick: setTmpSelectedFolder,
+        openFolderOnDblClick: true,
+        disabledFoldersUuids: notSelectableFolders,
+        selectedPath: tmpSelectedFolder.path || true // true for avoiding checking the current opened folder path and use only the provided selectedPath.
+        ,
+        showAddFolderInput: showAddFolderInput,
+        setShowAddFolderInput: setShowAddFolderInput,
+        noRootFolder: noRootFolder,
+        enableContextMenu: false,
+        isNewFolderInputError: isNewFolderInputError,
+        setNewFolderName: setNewFolderName,
+        addFolder: addFolder,
+        hideHeader: true
+      })
+    }), /*#__PURE__*/_jsxs(Styled.BrowseFoldersFooterOverlay, {
+      hideAddNewFolderButton: hideAddNewFolderButton,
+      children: [!hideAddNewFolderButton && /*#__PURE__*/_jsx(Button, {
+        color: "link-primary",
+        size: "sm",
+        disabled: disableAddFolderButton,
+        onClick: handleAddNewFolder,
+        startIcon: /*#__PURE__*/_jsx(PlusOutline, {
+          size: 14
+        }),
+        "data-testid": "move-modal-add-new-folder-button",
+        children: i18n('moveToModalAddNewFolderLabel')
+      }), /*#__PURE__*/_jsx(Styled.SelectButton, {
+        color: "primary",
+        disabled: !tmpSelectedFolder.path,
+        size: "sm",
+        loading: isAddingFolder,
+        onClick: onConfirmFolderSelection,
+        children: i18n('mutualizedSelectLabel')
+      })]
+    })]
+  });
+};
+export default BrowseFoldersMenu;

package/lib/components/common/FolderSelector/FolderSearchMenu.js

@@ -0,0 +1,45 @@
+import FoldersSkeleton from '../../Filters/Groups/Folders/FoldersSkeleton';
+import NoFoldersResult from '../../FoldersView/FoldersTree/NoFoldersResult';
+import Styled from './FolderSelector.styled';
+import SearchedFoldersItem from '../../FoldersView/FoldersTree/SearchedFoldersItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FolderSearchMenu = function FolderSearchMenu(_ref) {
+  var loading = _ref.loading,
+    searchedFolders = _ref.searchedFolders,
+    confirmFolderSelection = _ref.confirmFolderSelection,
+    notSelectableFolders = _ref.notSelectableFolders,
+    searchQuery = _ref.searchQuery,
+    handleCloseSearchMenu = _ref.handleCloseSearchMenu,
+    searchInputAnchorEl = _ref.searchInputAnchorEl;
+  var isMenuVisible = Boolean(searchInputAnchorEl || loading);
+  var renderMoveToModalOverlayContent = function renderMoveToModalOverlayContent() {
+    if (loading) {
+      return /*#__PURE__*/_jsx(FoldersSkeleton, {
+        styles: {
+          border: 'none'
+        }
+      });
+    } else if (searchedFolders !== null && searchedFolders !== void 0 && searchedFolders.length) {
+      return (searchedFolders || []).map(function (folder) {
+        return /*#__PURE__*/_jsx(SearchedFoldersItem, {
+          folder: folder,
+          searchQuery: searchQuery,
+          onFolderClick: confirmFolderSelection,
+          disabledFoldersUuids: notSelectableFolders
+        }, folder.uuid);
+      });
+    }
+    if (searchQuery && !(searchedFolders !== null && searchedFolders !== void 0 && searchedFolders.length)) {
+      return /*#__PURE__*/_jsx(NoFoldersResult, {
+        margin: "24px 24px 36px"
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(Styled.Menu, {
+    onClose: handleCloseSearchMenu,
+    open: isMenuVisible,
+    anchorEl: searchInputAnchorEl,
+    children: renderMoveToModalOverlayContent()
+  });
+};
+export default FolderSearchMenu;

package/lib/components/common/FolderSelector/FolderSelector.styled.js

@@ -0,0 +1,41 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+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 { Button, Menu as SfxMenu } from '@scaleflex/ui/core';
+import { CrossOutline } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+var SelectedFolderWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: start;\n  column-gap: 12px;\n  position: relative;\n"])));
+var SelectedFolderCross = styled(CrossOutline)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 12px;\n  cursor: pointer;\n  color: ", ";\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.IconsSecondary];
+});
+var FoldersTreeWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 12px;\n  ", "\n"])), function (_ref2) {
+  var applyMarginBottom = _ref2.applyMarginBottom;
+  return applyMarginBottom && 'margin-bottom: 16px;';
+});
+var Menu = styled(SfxMenu)(function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n   background-color: ", ";\n   width: 350px;\n   box-shadow: 0 2px 6px ", ";\n   max-height: 258px;\n"])), palette[PC.BackgroundStateless], palette[PC.LargeShadow]);
+});
+var BrowseFoldersFooterOverlay = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 12px;\n  border-top: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content:", " ;\n  position: fixed;\n  bottom: 0;\n  width: 100%;\n  border-radius: 0 0 4px 4px;\n\n  .SfxButton-StartIcon {\n    margin-right: 4px;\n  }\n"])), function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PC.BordersSecondary];
+}, function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref6) {
+  var hideAddNewFolderButton = _ref6.hideAddNewFolderButton;
+  return hideAddNewFolderButton ? 'flex-end' : 'space-between';
+});
+var SelectButton = styled(Button)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100px;\n"])));
+var FolderTreeWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0px;\n  height: 250px;\n"])));
+var Styled = {
+  SelectedFolderWrapper: SelectedFolderWrapper,
+  SelectedFolderCross: SelectedFolderCross,
+  FoldersTreeWrapper: FoldersTreeWrapper,
+  BrowseFoldersFooterOverlay: BrowseFoldersFooterOverlay,
+  SelectButton: SelectButton,
+  FolderTreeWrapper: FolderTreeWrapper,
+  Menu: Menu
+};
+export default Styled;

package/lib/components/common/FolderSelector/index.js

@@ -0,0 +1,186 @@
+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, useEffect, useRef } from 'react';
+import { IconButton } from '@scaleflex/ui/core';
+import { FolderTree } from '@scaleflex/icons';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import BrowseFoldersMenu from './BrowseFoldersMenu';
+import FolderSearchMenu from './FolderSearchMenu';
+import FoldersTreeSearch from '../../FoldersView/FoldersTree/FoldersTreeSearch';
+import SearchedFoldersItem from '../../FoldersView/FoldersTree/SearchedFoldersItem';
+import Styled from './FolderSelector.styled';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var FolderSelector = function FolderSelector(_ref) {
+  var setPrimaryButtonDisabled = _ref.setPrimaryButtonDisabled,
+    selectedFolder = _ref.selectedFolder,
+    onSelect = _ref.onSelect,
+    onRemoveSelectedFolder = _ref.onRemoveSelectedFolder,
+    notSelectableFolderUuids = _ref.notSelectableFolderUuids,
+    _ref$fullWidthSearchI = _ref.fullWidthSearchInput,
+    fullWidthSearchInput = _ref$fullWidthSearchI === void 0 ? false : _ref$fullWidthSearchI,
+    _ref$hideAddNewFolder = _ref.hideAddNewFolderButton,
+    hideAddNewFolderButton = _ref$hideAddNewFolder === void 0 ? false : _ref$hideAddNewFolder,
+    _ref$selectedFolderHe = _ref.selectedFolderHeadlineLabel,
+    selectedFolderHeadlineLabel = _ref$selectedFolderHe === void 0 ? '' : _ref$selectedFolderHe,
+    _ref$dontHideSearchIn = _ref.dontHideSearchInputIfSelected,
+    dontHideSearchInputIfSelected = _ref$dontHideSearchIn === void 0 ? false : _ref$dontHideSearchIn,
+    _ref$noRootFolder = _ref.noRootFolder,
+    noRootFolder = _ref$noRootFolder === void 0 ? false : _ref$noRootFolder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var theme = useTheme();
+  var hasFolderSelected = selectedFolder && Object.keys(selectedFolder).length > 0;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    browseFolderMenuAnchorEl = _useState2[0],
+    setBrowseFolderMenuAnchorEl = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchInputAnchorEl = _useState4[0],
+    setSearchInputAnchorEl = _useState4[1];
+  var _useState5 = useState(hasFolderSelected),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFolderSelectionConfirmed = _useState6[0],
+    setIsFolderSelectionConfirmed = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchedFolders = _useState8[0],
+    setSearchedFolders = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchQuery = _useState10[0],
+    setSearchQuery = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    loading = _useState12[0],
+    setLoading = _useState12[1];
+  var foldersTreeWrapper = useRef();
+  var toggleBrowseFolderMenu = function toggleBrowseFolderMenu() {
+    if (disabled) {
+      return;
+    }
+    setBrowseFolderMenuAnchorEl(browseFolderMenuAnchorEl ? undefined : foldersTreeWrapper.current);
+  };
+  useEffect(function () {
+    if (typeof setPrimaryButtonDisabled === 'function') {
+      setPrimaryButtonDisabled(!(selectedFolder !== null && selectedFolder !== void 0 && selectedFolder.path));
+    }
+  }, [selectedFolder]);
+  var handleCloseSearchMenu = function handleCloseSearchMenu() {
+    return setSearchInputAnchorEl(undefined);
+  };
+  var confirmFolderSelection = function confirmFolderSelection(folder) {
+    if (!folder || Object.keys(folder || {}).length === 0) {
+      return;
+    }
+    setIsFolderSelectionConfirmed(true);
+    onSelect(folder);
+    setSearchQuery('');
+    if (typeof setPrimaryButtonDisabled === 'function') {
+      setPrimaryButtonDisabled(Boolean(folder));
+    }
+    if (searchInputAnchorEl) {
+      handleCloseSearchMenu();
+    }
+    if (browseFolderMenuAnchorEl) {
+      toggleBrowseFolderMenu();
+    }
+  };
+  var handleSearchChange = function handleSearchChange(event) {
+    if (disabled) {
+      return;
+    }
+    var value = event.target.value;
+    if (value) {
+      setLoading(true);
+      setSearchQuery(value);
+      setSearchInputAnchorEl(foldersTreeWrapper.current);
+    } else {
+      setSearchQuery('');
+      setSearchedFolders([]);
+      setLoading(false);
+      setSearchInputAnchorEl(undefined);
+    }
+  };
+  var renderFoldersWrapper = function renderFoldersWrapper() {
+    var applyMarginBottom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return /*#__PURE__*/_jsxs(Styled.FoldersTreeWrapper, {
+      ref: foldersTreeWrapper,
+      applyMarginBottom: applyMarginBottom,
+      children: [/*#__PURE__*/_jsx(FoldersTreeSearch, {
+        inputSize: "md",
+        searchInputProps: {
+          style: {
+            minWidth: 300
+          },
+          disabled: disabled
+        },
+        query: searchQuery,
+        onChange: handleSearchChange,
+        onSuccess: setSearchedFolders,
+        onFinish: function onFinish() {
+          return setLoading(false);
+        },
+        fullWidth: fullWidthSearchInput
+      }), /*#__PURE__*/_jsx(IconButton, {
+        onClick: toggleBrowseFolderMenu,
+        size: "md",
+        disabled: disabled,
+        children: /*#__PURE__*/_jsx(FolderTree, {})
+      })]
+    });
+  };
+  var renderSelectedFolder = function renderSelectedFolder() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [selectedFolderHeadlineLabel, /*#__PURE__*/_jsxs(Styled.SelectedFolderWrapper, {
+        children: [/*#__PURE__*/_jsx(SearchedFoldersItem, {
+          folder: selectedFolder,
+          theme: theme,
+          onFolderClick: function onFolderClick() {},
+          noHorizontalPadding: dontHideSearchInputIfSelected,
+          disabled: disabled,
+          noHover: true
+        }), /*#__PURE__*/_jsx(Styled.SelectedFolderCross, {
+          size: 16,
+          disabled: disabled,
+          onClick: function onClick() {
+            if (disabled) {
+              return;
+            }
+            setIsFolderSelectionConfirmed(false);
+            if (typeof onRemoveSelectedFolder === 'function') {
+              onRemoveSelectedFolder(selectedFolder);
+            }
+          }
+        })]
+      })]
+    });
+  };
+  if (!dontHideSearchInputIfSelected && isFolderSelectionConfirmed) {
+    return renderSelectedFolder();
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderFoldersWrapper(dontHideSearchInputIfSelected && isFolderSelectionConfirmed), hasFolderSelected && dontHideSearchInputIfSelected && renderSelectedFolder(), /*#__PURE__*/_jsx(FolderSearchMenu, {
+      loading: loading,
+      searchedFolders: searchedFolders,
+      handleCloseSearchMenu: handleCloseSearchMenu,
+      searchQuery: searchQuery,
+      searchInputAnchorEl: searchInputAnchorEl,
+      confirmFolderSelection: confirmFolderSelection,
+      notSelectableFolders: notSelectableFolderUuids
+    }), /*#__PURE__*/_jsx(BrowseFoldersMenu, {
+      notSelectableFolders: notSelectableFolderUuids,
+      confirmFolderSelection: confirmFolderSelection,
+      toggleBrowseFolderMenu: toggleBrowseFolderMenu,
+      browseFolderMenuAnchorEl: browseFolderMenuAnchorEl,
+      hideAddNewFolderButton: hideAddNewFolderButton,
+      noRootFolder: noRootFolder,
+      selectedFolder: selectedFolder
+    })]
+  });
+};
+export default FolderSelector;

package/lib/components/common/FormattedUriLink/FormattedUriLink.styled.js

@@ -0,0 +1,15 @@
+var _templateObject;
+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 { PC, FV } from '@scaleflex/widget-common';
+var Uri = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n  cursor: pointer;\n  text-decoration: underline;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.AccentStateless];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.typography.font[FV.LinkMedium];
+});
+var Styled = {
+  Uri: Uri
+};
+export default Styled;

package/lib/components/common/FormattedUriLink/index.js

@@ -0,0 +1,21 @@
+import { EllipsedText } from '@scaleflex/ui/core';
+import Styled from './FormattedUriLink.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FormattedUriLink = function FormattedUriLink(_ref) {
+  var uri = _ref.uri;
+  if (!uri) return null;
+  var prefix = 'www.';
+  var uriVariantValue = uri.startsWith(prefix) ? "https://".concat(uri) : uri;
+  return /*#__PURE__*/_jsx(Styled.Uri, {
+    href: uriVariantValue,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: /*#__PURE__*/_jsx(EllipsedText, {
+      as: "span",
+      element: "span",
+      maxLinesCount: 1,
+      children: uriVariantValue
+    })
+  });
+};
+export default FormattedUriLink;

package/lib/components/common/OriginalBadge/OriginalBadge.styled.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { StatusLabel } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+import { PC, FV } from '@scaleflex/widget-common';
+var OriginalBadge = styled(StatusLabel)(function (_ref) {
+  var _ref$theme = _ref.theme,
+    palette = _ref$theme.palette,
+    typography = _ref$theme.typography,
+    isHidden = _ref.isHidden,
+    showOnTop = _ref.showOnTop;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  display: ", ";\n  padding: 3px 6px;\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n"])), typography.font[FV.LabelMediumEmphasis], isHidden ? 'none' : 'flex', palette[PC.AccentStateless], palette[PC.ButtonPrimaryText], showOnTop && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0%;\n  z-index: 2;\n  margin: 12px;\n  "]))));
+});
+var Styled = {
+  OriginalBadge: OriginalBadge
+};
+export default Styled;

package/lib/components/common/OriginalBadge/index.js

@@ -0,0 +1,14 @@
+import { useExplorerI18n } from '../../../hooks';
+import Styled from './OriginalBadge.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var OriginalBadge = function OriginalBadge(_ref) {
+  var showOnTop = _ref.showOnTop,
+    isHidden = _ref.isHidden;
+  var il8n = useExplorerI18n();
+  return /*#__PURE__*/_jsx(Styled.OriginalBadge, {
+    label: il8n('mutualizedAsOriginalLabel'),
+    showOnTop: showOnTop,
+    isHidden: isHidden
+  });
+};
+export default OriginalBadge;

package/lib/components/common/SanitizedHtmlElement/index.js

@@ -0,0 +1,11 @@
+import htmlSanitizer from '@scaleflex/widget-utils/lib/htmlSanitizer';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SanitizedHtmlElement = function SanitizedHtmlElement(_ref) {
+  var html = _ref.html;
+  return /*#__PURE__*/_jsx("div", {
+    dangerouslySetInnerHTML: {
+      __html: htmlSanitizer(html)
+    }
+  });
+};
+export default SanitizedHtmlElement;

package/lib/components/common/Sort/Sort.constants.js

@@ -0,0 +1,61 @@
+var SORT_BY = {
+  RELEVANCE: 'relevance',
+  NAME: 'name',
+  TITLE: 'title',
+  CREATED_AT: 'created_at',
+  COLOR: 'color',
+  ASSETS_COUNT: 'assets_count',
+  LAST_MODIFY: 'updated_at',
+  UPLOADED: 'uploaded',
+  MODIFIED: 'modified_at',
+  SIZE: 'size',
+  TYPE: 'type'
+};
+var SORT_ORDER = {
+  ASC: 'asc',
+  DSC: 'desc'
+};
+var MAIN_SORT_OPTIONS = [{
+  i18nLabelKey: 'sortOptionsByNameLabel',
+  value: SORT_BY.NAME
+}, {
+  i18nLabelKey: 'sortOptionsByUploadDateLabel',
+  value: SORT_BY.CREATED_AT
+}, {
+  i18nLabelKey: 'sortOptionsByModifyDateLabel',
+  value: SORT_BY.MODIFIED
+}, {
+  i18nLabelKey: 'sortOptionsBySizeLabel',
+  value: SORT_BY.SIZE
+}, {
+  i18nLabelKey: 'sortOptionByTypeLabel',
+  value: SORT_BY.TYPE
+}];
+var RELEVANCE_OPTION = {
+  i18nLabelKey: 'sortOptionsByRelevanceLabel',
+  value: SORT_BY.RELEVANCE
+};
+var SEARCH_MODE_SORT_OPTIONS = [RELEVANCE_OPTION].concat(MAIN_SORT_OPTIONS);
+var FOLDER_TREE_SORT_OPTIONS = [{
+  i18nLabelKey: 'sortOptionsByNameLabel',
+  value: SORT_BY.NAME
+}, {
+  i18nLabelKey: 'sortOptionsByCreated',
+  value: SORT_BY.CREATED_AT
+}, {
+  i18nLabelKey: 'sortOptionsByModifyDateLabel',
+  value: SORT_BY.MODIFIED
+}, {
+  i18nLabelKey: 'sortOptionsByAssetsCount',
+  value: SORT_BY.ASSETS_COUNT
+}, {
+  i18nLabelKey: 'sortOptionsByAssetsSize',
+  value: SORT_BY.SIZE
+}];
+
+// The object's props (by & order ) be overridden with config.defaultSort if provided with any valid sort by/order value.
+var DEFAULT_SORT_OPTION = {
+  by: SORT_BY.NAME,
+  order: SORT_ORDER.ASC
+};
+export { SORT_BY, SORT_ORDER, MAIN_SORT_OPTIONS, FOLDER_TREE_SORT_OPTIONS, SEARCH_MODE_SORT_OPTIONS, DEFAULT_SORT_OPTION };

package/lib/components/common/Sort/Sort.styled.js

@@ -0,0 +1,47 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC } from '@scaleflex/widget-common';
+import { ArrowDown as SfxArrowDown, ArrowUp as SfxArrowUp } from '@scaleflex/icons';
+import { InputLocalization, IconButton as SfxIconButton } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var SortWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 5px;\n\n  .SfxMenuItem-Icon.SfxMenuItem-Actions {\n    display: none;\n  }\n\n  .SfxInputLocalization-Label,\n  .SfxInputLocalization-Container {\n    cursor: pointer;\n  }\n"])));
+var SortMenu = styled(InputLocalization)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.SfxInputLocalization-Container,\n  .SfxInputLocalization-root,\n  .SfxInputLocalization-Label {\n    cursor: ", ";\n  }\n"])), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+});
+var SortItem = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 0;\n\n  &:hover {\n    svg {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n"])));
+var ArrowDown = styled(SfxArrowDown)(function (_ref2) {
+  var $isActive = _ref2.$isActive,
+    $isActiveOption = _ref2.$isActiveOption,
+    palette = _ref2.theme.palette;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  visibility: ", ";\n  margin-left: auto;\n  margin-right: 4px;\n  color: ", ";\n  transition: all 150ms linear;\n  padding: 4px;\n  box-sizing: content-box;\n"])), $isActiveOption ? 1 : 0, $isActiveOption && 'visible', $isActive ? palette[PC.AccentStateless] : palette[PC.IconsSecondary]);
+});
+var ArrowUp = styled(SfxArrowUp)(function (_ref3) {
+  var $isActive = _ref3.$isActive,
+    $isActiveOption = _ref3.$isActiveOption,
+    disabled = _ref3.disabled,
+    palette = _ref3.theme.palette;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  visibility: ", ";\n  color: ", ";\n  transition: all 150ms ease-out;\n  padding: 4px;\n  box-sizing: content-box;\n\n  ", "\n"])), $isActiveOption ? 1 : 0, $isActiveOption && 'visible', $isActive ? palette[PC.AccentStateless] : palette[PC.IconsSecondary], disabled ? 'cursor: not-allowed;' : "\n      &:hover {\n        color: ".concat(palette[PC.IconsSecondaryHover], ";\n      }"));
+});
+var IconButton = styled(SfxIconButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var preventSortButtonFocus = _ref4.preventSortButtonFocus;
+  return preventSortButtonFocus && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    &:focus,\n    &:active {\n      background: transparent;\n      color: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n  "])), function (_ref5) {
+    var palette = _ref5.theme.palette;
+    return palette[PC.LinkStateless];
+  }, function (_ref6) {
+    var palette = _ref6.theme.palette;
+    return palette[PC.BackgroundHover];
+  }, function (_ref7) {
+    var palette = _ref7.theme.palette;
+    return palette[PC.IconsPrimaryHover];
+  });
+});
+var Styled = {
+  SortWrapper: SortWrapper,
+  SortItem: SortItem,
+  ArrowDown: ArrowDown,
+  ArrowUp: ArrowUp,
+  SortMenu: SortMenu,
+  IconButton: IconButton
+};
+export default Styled;

package/lib/components/common/Sort/Sort.utils.js

@@ -0,0 +1,14 @@
+import { MAIN_SORT_OPTIONS, SORT_ORDER, SEARCH_MODE_SORT_OPTIONS } from './Sort.constants';
+export var checkIsValidSortBy = function checkIsValidSortBy(sortByValue) {
+  return MAIN_SORT_OPTIONS.some(function (option) {
+    return option.value === sortByValue;
+  });
+};
+export var checkIsValidSearchSortBy = function checkIsValidSearchSortBy(searchSortByValue) {
+  return SEARCH_MODE_SORT_OPTIONS.some(function (option) {
+    return option.value === searchSortByValue;
+  });
+};
+export var checkIsValidSortOrder = function checkIsValidSortOrder(sortOrderValue) {
+  return Object.values(SORT_ORDER).includes(sortOrderValue);
+};