@scaleflex/widget-explorer 4.4.0 → 4.5.0

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

@@ -0,0 +1,183 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Asc, Desc } from '@scaleflex/icons';
+import { MenuItem } from '@scaleflex/ui/core';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { useExplorerI18n } from '../../../hooks';
+import { DEFAULT_SORT_OPTION, MAIN_SORT_OPTIONS, SEARCH_MODE_SORT_OPTIONS, SORT_BY, SORT_ORDER } from './Sort.constants';
+import Styled from './Sort.styled';
+import { selectIsAiSearch, selectIsSearchFetchType, selectIsSimilarSearchActive } from '../../../slices/search.slice';
+import { selectFilesSortOrder, selectFilesSortedBy, selectIsNoFilesFound, selectIsSearchOrFilesLoading } from '../../../slices/files.slice';
+import { selectIsAssetsView, selectIsSearchMode } from '../../../slices/views.slice';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Sort = function Sort(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? MAIN_SORT_OPTIONS : _ref$options,
+    sortBy = _ref.sortBy,
+    sortOrder = _ref.sortOrder,
+    _ref$defaultSortOptio = _ref.defaultSortOption,
+    defaultSortOption = _ref$defaultSortOptio === void 0 ? DEFAULT_SORT_OPTION : _ref$defaultSortOptio,
+    disabled = _ref.disabled,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$useFilesSort = _ref.useFilesSort,
+    useFilesSort = _ref$useFilesSort === void 0 ? false : _ref$useFilesSort,
+    _ref$dontDisableIfNoF = _ref.dontDisableIfNoFiles,
+    dontDisableIfNoFiles = _ref$dontDisableIfNoF === void 0 ? false : _ref$dontDisableIfNoF,
+    _ref$preventSortButto = _ref.preventSortButtonFocus,
+    preventSortButtonFocus = _ref$preventSortButto === void 0 ? false : _ref$preventSortButto;
+  var i18n = useExplorerI18n();
+  var isSearchViewSorting = useSelector(function (state) {
+    return selectIsSearchFetchType(state) || selectIsSearchMode(state);
+  });
+  var isFilesSortUsed = useFilesSort || isSearchViewSorting;
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var isAiSearchActive = useSelector(selectIsAiSearch);
+  var isAssetsView = useSelector(selectIsAssetsView);
+  var isFilesLoading = useSelector(selectIsSearchOrFilesLoading);
+  var filesSortedBy = useSelector(function (state) {
+    return isFilesSortUsed ? selectFilesSortedBy(state) : defaultSortOption.by;
+  });
+  var filesSortedOrder = useSelector(function (state) {
+    return isFilesSortUsed ? selectFilesSortOrder(state) : defaultSortOption.order;
+  });
+  var isNoFilesFound = useSelector(selectIsNoFilesFound);
+  var isSortDisabledFromSearch = isSimilarSearchActive || isAiSearchActive && isAssetsView;
+  var _useState = useState({
+      by: sortBy || filesSortedBy,
+      order: sortOrder || filesSortedOrder
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    sort = _useState2[0],
+    setSort = _useState2[1];
+  var currentOptions = isSearchViewSorting || isSortDisabledFromSearch ? SEARCH_MODE_SORT_OPTIONS : options;
+  var _currentOptions = _slicedToArray(currentOptions, 1),
+    _currentOptions$ = _currentOptions[0],
+    _currentOptions$2 = _currentOptions$ === void 0 ? {} : _currentOptions$,
+    defaultValue = _currentOptions$2.value;
+  var currentSortBy = isSortDisabledFromSearch ? currentOptions[0].value : isFilesSortUsed && filesSortedBy || sort.by || defaultValue;
+  var currentSortOrder = isFilesSortUsed ? filesSortedOrder : sort.order;
+  var isDisabled = Boolean(!isSearchViewSorting && disabled || isSortDisabledFromSearch || isFilesLoading || isNoFilesFound && !dontDisableIfNoFiles);
+  var isAscOrder = isSortDisabledFromSearch ? false : currentSortOrder === SORT_ORDER.ASC;
+  var isActiveOption = function isActiveOption(value) {
+    return currentSortBy === (value || defaultValue);
+  };
+  useUpdateEffect(function () {
+    var newSort = {};
+    if (sortBy !== currentSortBy) {
+      newSort.by = useFilesSort ? filesSortedBy : sortBy || filesSortedBy;
+    }
+    if (sortOrder !== currentSortOrder) {
+      newSort.order = useFilesSort ? filesSortedOrder : sortOrder || filesSortedOrder;
+    }
+    if (Object.keys(newSort).length > 0) {
+      setSort(_objectSpread(_objectSpread({}, sort), newSort));
+    }
+  }, [sortBy, sortOrder, filesSortedBy, filesSortedOrder, useFilesSort]);
+  var updateInternalSort = function updateInternalSort(newSort) {
+    setSort(_objectSpread(_objectSpread({}, sort), newSort));
+  };
+  var handleChangeSortOrder = function handleChangeSortOrder() {
+    if (isDisabled) {
+      return;
+    }
+    var nextSortOrder = isAscOrder ? SORT_ORDER.DSC : SORT_ORDER.ASC;
+    updateInternalSort({
+      order: nextSortOrder
+    });
+    onChange(currentSortBy || defaultValue, nextSortOrder);
+  };
+  var handleClickSortArrow = function handleClickSortArrow(nextSortOrder, nextSortBy) {
+    return function (event) {
+      if (event) {
+        event.stopPropagation();
+      }
+      if (isDisabled) {
+        return;
+      }
+      var isSortChanged = nextSortOrder !== currentSortOrder || nextSortBy !== currentSortBy;
+      if (!isSortChanged) return;
+      updateInternalSort({
+        by: nextSortBy,
+        order: nextSortOrder
+      });
+      onChange(nextSortBy || defaultValue, nextSortOrder);
+    };
+  };
+  var handleOnChange = function handleOnChange(nextSortBy, sortOrder) {
+    if (isDisabled) {
+      return;
+    }
+    // if sort by doesn't change we change the order then sort
+    if (nextSortBy === currentSortOrder) {
+      handleChangeSortOrder();
+      return;
+    }
+    updateInternalSort({
+      by: nextSortBy,
+      order: sortOrder
+    });
+    onChange(nextSortBy, currentSortOrder);
+  };
+  return /*#__PURE__*/_jsxs(Styled.SortWrapper, {
+    children: [/*#__PURE__*/_jsx(Styled.SortMenu, {
+      size: "md",
+      disabled: isDisabled,
+      onChange: function onChange(nextSortBy) {
+        return handleOnChange(nextSortBy, currentSortOrder);
+      },
+      value: currentSortBy,
+      "data-testid": "sort-dropdown",
+      children: currentOptions.map(function (_ref2) {
+        var value = _ref2.value,
+          i18nLabelKey = _ref2.i18nLabelKey;
+        return /*#__PURE__*/_jsx(MenuItem, {
+          active: isActiveOption(value),
+          value: value,
+          className: "sort-menuitem",
+          "data-testid": i18nLabelKey,
+          children: /*#__PURE__*/_jsxs(Styled.SortItem, {
+            children: [i18n(i18nLabelKey), /*#__PURE__*/_jsx(Styled.ArrowDown, {
+              size: 12,
+              $isActive: !isAscOrder && isActiveOption(value),
+              $isActiveOption: isActiveOption(value),
+              onClick: handleClickSortArrow(SORT_ORDER.DSC, value)
+            }), /*#__PURE__*/_jsx(Styled.ArrowUp, {
+              size: 12,
+              $isActive: isAscOrder && isActiveOption(value),
+              $isActiveOption: isActiveOption(value),
+              onClick: value === SORT_BY.RELEVANCE ? ignoreEvent : handleClickSortArrow(SORT_ORDER.ASC, value),
+              disabled: value === SORT_BY.RELEVANCE
+            })]
+          })
+        }, value);
+      })
+    }), /*#__PURE__*/_jsx(Styled.IconButton, {
+      color: "basic",
+      size: "lg",
+      disabled: currentSortBy === SORT_BY.RELEVANCE,
+      onClick: handleChangeSortOrder,
+      "data-testid": "sort-icon",
+      preventSortButtonFocus: preventSortButtonFocus,
+      children: isAscOrder ? /*#__PURE__*/_jsx(Asc, {
+        size: 18
+      }) : /*#__PURE__*/_jsx(Desc, {
+        size: 18
+      })
+    })]
+  });
+};
+export default Sort;

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

@@ -0,0 +1,44 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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, FV } from '@scaleflex/widget-common';
+import CopyOutlineIcon from '@scaleflex/icons/copy-outline';
+var TextWithCopyIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  \n  >:first-child {\n    color: ", ";\n  }\n\n  &:hover > * {\n    display: block;\n  }\n"])), function (_ref) {
+  var isCopyIconHovered = _ref.isCopyIconHovered,
+    theme = _ref.theme;
+  return isCopyIconHovered ? theme.palette[PC.AccentStateless] : theme.palette[PC.TextPrimary];
+});
+var TextWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 90%;\n\n  &:hover {\n    color: ", ";  \n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.LinkPressed];
+});
+var CopyIcon = styled(CopyOutlineIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  margin-top: 2px;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.IconsSecondary];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.IconsSecondaryHover];
+});
+var NotificationBox = styled.div(function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    max-height: 34px;\n    width: 178px;\n    padding: 8px 12px;\n    box-shadow: 0px 2px 6px ", ";\n    background-color: ", ";\n    border-radius: 4px;\n    bottom: 32px;\n    right: 2px;\n  "])), palette[PC.LargeShadow], palette[PC.BackgroundStateless]);
+});
+var NotificationIcon = styled.span(function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin-right: 4px;\n    color: ", ";\n  "])), palette[PC.Success]);
+});
+var NotificationText = styled.span(function (_ref7) {
+  var _ref7$theme = _ref7.theme,
+    palette = _ref7$theme.palette,
+    typography = _ref7$theme.typography;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", ";\n    white-space: nowrap;\n    color: ", ";\n    position: relative;\n    top: -4px;\n  "])), typography.font[FV.TextSmall], palette[PC.TextPrimary]);
+});
+var Styled = {
+  TextWithCopyIconWrapper: TextWithCopyIconWrapper,
+  TextWrapper: TextWrapper,
+  CopyIcon: CopyIcon,
+  NotificationBox: NotificationBox,
+  NotificationIcon: NotificationIcon,
+  NotificationText: NotificationText
+};
+export default Styled;

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

@@ -0,0 +1,71 @@
+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 { EllipsedText } from '@scaleflex/ui/core';
+import copyText from '@scaleflex/widget-utils/lib/copyText';
+import Styled from './TextWithCopyIcon.styled';
+import { useExplorerI18n } from '../../../hooks';
+import { Success } from '@scaleflex/icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TextWithCopyIcon = function TextWithCopyIcon(_ref) {
+  var value = _ref.value,
+    _ref$copyIconSize = _ref.copyIconSize,
+    copyIconSize = _ref$copyIconSize === void 0 ? 16 : _ref$copyIconSize,
+    _ref$multiTooltipMaxL = _ref.multiTooltipMaxLines,
+    multiTooltipMaxLines = _ref$multiTooltipMaxL === void 0 ? 1 : _ref$multiTooltipMaxL;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showCopyMessage = _useState2[0],
+    setShowCopyMessage = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isCopyIconHovered = _useState4[0],
+    setIsCopyIconHovered = _useState4[1];
+  var i18n = useExplorerI18n();
+  var copyToClipboard = function copyToClipboard() {
+    copyText({
+      text: value,
+      disableSuccessMsg: true
+    });
+    setShowCopyMessage(true);
+  };
+  useEffect(function () {
+    setTimeout(function () {
+      return setShowCopyMessage(false);
+    }, 2000);
+  }, [showCopyMessage]);
+  var renderCopyText = function renderCopyText() {
+    return /*#__PURE__*/_jsxs(Styled.NotificationBox, {
+      children: [/*#__PURE__*/_jsx(Styled.NotificationIcon, {
+        children: /*#__PURE__*/_jsx(Success, {
+          size: 16
+        })
+      }), /*#__PURE__*/_jsx(Styled.NotificationText, {
+        children: i18n('explorerGeneralFileDetailsUuidCopiedText')
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(Styled.TextWithCopyIconWrapper, {
+    isCopyIconHovered: isCopyIconHovered,
+    children: [/*#__PURE__*/_jsx(Styled.TextWrapper, {
+      children: /*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: multiTooltipMaxLines,
+        children: value
+      })
+    }), /*#__PURE__*/_jsx(Styled.CopyIcon, {
+      onMouseEnter: function onMouseEnter() {
+        return setIsCopyIconHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsCopyIconHovered(false);
+      },
+      size: copyIconSize,
+      onClick: copyToClipboard
+    }), showCopyMessage && renderCopyText()]
+  });
+};
+export default TextWithCopyIcon;

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

@@ -0,0 +1,40 @@
+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 { useDispatch, useSelector } from 'react-redux';
+import { Upload } from '@scaleflex/icons';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { selectIsUserPermittedTo } from '@scaleflex/widget-core/lib/slices/user.slice';
+import { Button } from '@scaleflex/ui/core';
+import { useExplorer } from '../../../hooks';
+import { showAddFilesPanelUpdated } from '../../../slices/panels.slice';
+import { selectionsCleared } from '../../../slices/selections.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var TopBarUploadButton = function TopBarUploadButton() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    opts = _useExplorer.opts;
+  var isPermittedToUpload = useSelector(function (state) {
+    return selectIsUserPermittedTo(state, PERMISSIONS.UPLOAD);
+  });
+  var disableUpload = opts.disableUpload;
+  var openAddFilesPanel = function openAddFilesPanel() {
+    dispatch(showAddFilesPanelUpdated(true));
+    dispatch(selectionsCleared());
+  };
+  return !disableUpload && isPermittedToUpload && /*#__PURE__*/_jsx(Button, {
+    startIcon: function startIcon(props) {
+      return /*#__PURE__*/_jsx(Upload, _objectSpread({}, props));
+    },
+    title: i18n('topBarUploadFilesInCurrentFolderTitle'),
+    onClick: openAddFilesPanel,
+    color: "primary",
+    "data-testid": "topbar-upload-btn",
+    children: i18n('mutualizedUploadLabel')
+  });
+};
+export default TopBarUploadButton;

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

@@ -0,0 +1,3 @@
+export var getFilePathTooltipText = function getFilePathTooltipText(paths, i18n) {
+  return "".concat(i18n('mutualizedBaseFolderTitle')).concat(paths.join(' / ')).replace(/\s\/\s$/, '');
+};

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

@@ -0,0 +1,34 @@
+import { useLocateFile } from '../../../hooks';
+import TrimmedPathWithLocate from '../TrimmedPathWithLocate';
+import { jsx as _jsx } from "react/jsx-runtime";
+var TrimmedFilePathWithLocate = function TrimmedFilePathWithLocate(_ref) {
+  var _ref2, _file$folder;
+  var file = _ref.file,
+    size = _ref.size,
+    _ref$isClickable = _ref.isClickable,
+    isClickable = _ref$isClickable === void 0 ? true : _ref$isClickable,
+    smallerFont = _ref.smallerFont;
+  var locateFile = useLocateFile();
+  var splitPath = ((_ref2 = ((_file$folder = file.folder) === null || _file$folder === void 0 ? void 0 : _file$folder.name) || file.toFolder) === null || _ref2 === void 0 ? void 0 : _ref2.split('/')) || [];
+  var directParentFolderPath = splitPath[splitPath.length - 1];
+  var triggerFileLocating = function triggerFileLocating() {
+    if (isClickable) {
+      locateFile({
+        file: file
+      });
+    }
+  };
+  if (!splitPath || splitPath.length === 0) {
+    return;
+  }
+  return /*#__PURE__*/_jsx(TrimmedPathWithLocate, {
+    colored: isClickable,
+    size: size,
+    splitPath: splitPath,
+    triggerLocate: triggerFileLocating,
+    directParentFolderPath: directParentFolderPath,
+    hideTargetIcon: !isClickable,
+    smallerFont: smallerFont
+  });
+};
+export default TrimmedFilePathWithLocate;

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

@@ -0,0 +1,13 @@
+import TrimmedPathWithLocate from '../TrimmedPathWithLocate';
+import { jsx as _jsx } from "react/jsx-runtime";
+var TrimmedFolderPathWithLocate = function TrimmedFolderPathWithLocate(_ref) {
+  var path = _ref.path;
+  var splitPath = (path === null || path === void 0 ? void 0 : path.split('/')) || {};
+  var directParentFolderPath = splitPath[(splitPath === null || splitPath === void 0 ? void 0 : splitPath.length) - 2];
+  return /*#__PURE__*/_jsx(TrimmedPathWithLocate, {
+    splitPath: splitPath,
+    directParentFolderPath: directParentFolderPath,
+    hideTargetIcon: true
+  });
+};
+export default TrimmedFolderPathWithLocate;

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

@@ -0,0 +1,30 @@
+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, { css } from 'styled-components';
+import { Button } from '@scaleflex/ui/core';
+import { FV, PC } from '@scaleflex/widget-common';
+var TrimmedPathButton = styled(Button)(function (_ref) {
+  var _ref$theme = _ref.theme,
+    font = _ref$theme.typography.font,
+    palette = _ref$theme.palette,
+    size = _ref.size,
+    colored = _ref.colored;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  .SfxButton-Body {\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    overflow: hidden;\n  }\n\n  .SfxButton-Label {\n    color: ", ";\n    ", ";\n  }\n\n  .SfxButton-EndIcon {\n    margin-left: 0;\n  }\n\n  &:hover {\n    color: ", ";\n  }\n"])), colored ? palette[PC.AccentStateless] : palette[PC.IconsPrimary], size === 'sm' ? font[FV.LinkMedium] : font[FV.LinkLarge], colored ? palette[PC.AccentPrimaryHover] : palette[PC.IconsPrimaryHover]);
+});
+var TrimmedPath = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-width: 250px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: ", ";\n  text-decoration: none;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_ref2) {
+  var colored = _ref2.colored;
+  return colored ? 'pointer' : 'default';
+}, function (_ref3) {
+  var theme = _ref3.theme,
+    colored = _ref3.colored;
+  return colored ? theme.palette[PC.AccentStateless] : theme.palette[PC.TextPrimary];
+}, function (_ref4) {
+  var theme = _ref4.theme,
+    colored = _ref4.colored;
+  return colored ? theme.palette[PC.AccentPrimaryHover] : theme.palette[PC.IconsPrimaryHover];
+});
+var Styled = {
+  TrimmedPathButton: TrimmedPathButton,
+  TrimmedPath: TrimmedPath
+};
+export default Styled;

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

@@ -0,0 +1,40 @@
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { Target } from '@scaleflex/icons';
+import { useExplorer } from '../../../hooks';
+import { getFilePathTooltipText } from '../TrimmedFilePathWithLocate/TrimmedFilePathWithLocate.utils';
+import Styled from './TrimmedPathWithLocate.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var TrimmedPathWithLocate = function TrimmedPathWithLocate(_ref) {
+  var splitPath = _ref.splitPath,
+    triggerLocate = _ref.triggerLocate,
+    directParentFolderPath = _ref.directParentFolderPath,
+    size = _ref.size,
+    _ref$colored = _ref.colored,
+    colored = _ref$colored === void 0 ? false : _ref$colored,
+    _ref$hideTargetIcon = _ref.hideTargetIcon,
+    hideTargetIcon = _ref$hideTargetIcon === void 0 ? false : _ref$hideTargetIcon,
+    _ref$smallerFont = _ref.smallerFont,
+    smallerFont = _ref$smallerFont === void 0 ? false : _ref$smallerFont;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  return /*#__PURE__*/_jsx(TooltipV2, {
+    position: "top",
+    size: "md",
+    title: getFilePathTooltipText(splitPath, i18n),
+    arrow: true,
+    children: /*#__PURE__*/_jsx(Styled.TrimmedPathButton, {
+      size: size,
+      onClick: triggerLocate,
+      endIcon: !hideTargetIcon ? /*#__PURE__*/_jsx(Target, {
+        size: smallerFont ? 14 : 16
+      }) : undefined,
+      color: "link-primary",
+      colored: colored,
+      children: /*#__PURE__*/_jsx(Styled.TrimmedPath, {
+        colored: colored,
+        children: directParentFolderPath ? ".../".concat(directParentFolderPath) : i18n('mutualizedBaseFolderTitle')
+      })
+    })
+  });
+};
+export default TrimmedPathWithLocate;