@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/UrlBuilderModal/index.js

@@ -0,0 +1,97 @@
+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 { ModalContent } from '@scaleflex/ui/core';
+import { UrlBuilder } from '@scaleflex/react-url-builder';
+import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
+import { useConfirmationModal } from '../Modals';
+import { removeExtraUrlParams } from '../../utils/removeExtraUrlParams';
+import Styled from './UrlBuilderModal.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var modalStyles = {
+  zIndex: 1300
+};
+var UrlBuilderModal = function UrlBuilderModal(_ref) {
+  var showUrlBuilderModal = _ref.showUrlBuilderModal,
+    setShowUrlBuilderModal = _ref.setShowUrlBuilderModal,
+    originalFile = _ref.originalFile,
+    urlTitle = _ref.urlTitle,
+    headerTitle = _ref.headerTitle,
+    actionButtonLabel = _ref.actionButtonLabel,
+    onNewSave = _ref.onNewSave,
+    i18n = _ref.i18n,
+    selectedVariant = _ref.selectedVariant,
+    submitVariantEdit = _ref.submitVariantEdit,
+    queryString = _ref.queryString,
+    info = _ref.info,
+    extractVariantQuery = _ref.extractVariantQuery;
+  var triggerConfirmationModal = useConfirmationModal();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isValueChanged = _useState2[0],
+    setIsValueChanged = _useState2[1];
+  if (!showUrlBuilderModal || !originalFile) return null;
+  var imageInfo = originalFile.info;
+  var url = getFileLink(originalFile, 'cdn');
+  var originalUrl = removeExtraUrlParams(url);
+  var urlWithParams = queryString ? "".concat(originalUrl, "?").concat(queryString) : originalUrl;
+  var triggerVariantEdit = function triggerVariantEdit(newUrl) {
+    info(i18n('explorerFileWindowVariationSavedInfo'));
+    submitVariantEdit({
+      uuid: selectedVariant.uuid,
+      url: newUrl,
+      query: extractVariantQuery(newUrl)
+    });
+  };
+  var handleClose = function handleClose() {
+    if (isValueChanged) {
+      triggerConfirmationModal({
+        title: i18n('fileWindowDiscardChangesModalTitle'),
+        description: i18n('fileWindowDiscardUrlBuilderModalDesc'),
+        rootModalStyles: {
+          zIndex: 1500
+        },
+        onConfirm: function onConfirm() {
+          return setShowUrlBuilderModal(false);
+        }
+      });
+    } else {
+      setShowUrlBuilderModal(false);
+    }
+  };
+  var handleSave = function handleSave(nextUrl) {
+    if (queryString) {
+      triggerVariantEdit(nextUrl);
+      setShowUrlBuilderModal(false);
+    } else {
+      onNewSave(nextUrl);
+    }
+  };
+  return /*#__PURE__*/_jsx(Styled.Modal, {
+    fullWidth: true,
+    open: showUrlBuilderModal,
+    onClose: handleClose,
+    modalStyles: modalStyles,
+    children: /*#__PURE__*/_jsx(ModalContent, {
+      children: /*#__PURE__*/_jsx(UrlBuilder, {
+        url: urlWithParams,
+        onSave: function onSave(_, nextUrl) {
+          return handleSave(nextUrl);
+        },
+        headerTitle: headerTitle,
+        urlTitle: urlTitle,
+        onClose: handleClose,
+        imageInfo: imageInfo,
+        actionButtonLabel: actionButtonLabel,
+        checkValueChanged: setIsValueChanged,
+        withExtraParams: true,
+        withWatermark: true
+      })
+    })
+  });
+};
+export default UrlBuilderModal;

package/lib/components/Views/ErroredViewPlaceholder.js

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { Button } from '@scaleflex/ui/core';
+import { RESPONSE_CODES } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorerI18n, useIsSmallScreen } from '../../hooks';
+import Styled from './Views.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ErroredViewPlaceholder = function ErroredViewPlaceholder(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    backTo = _ref.backTo,
+    backToLabel = _ref.backToLabel,
+    error = _ref.error;
+  var i18n = useExplorerI18n();
+  var isSmallScreen = useIsSmallScreen();
+  var adaptedProps = useMemo(function () {
+    var nextAdaptedProps = {
+      icon: icon,
+      title: title,
+      description: description,
+      backTo: backTo,
+      backToLabel: backToLabel
+    };
+    if ((error === null || error === void 0 ? void 0 : error.codeLabel) === RESPONSE_CODES.KEY_EXPIRED) {
+      nextAdaptedProps.description = i18n('sassKeyExpiredErrorMessage');
+      nextAdaptedProps.backToLabel = null;
+      nextAdaptedProps.backTo = null;
+    }
+    return nextAdaptedProps;
+  }, [icon, title, description, backTo, backToLabel, error]);
+  return /*#__PURE__*/_jsxs(Styled.ViewErrorPlaceholder, {
+    isSmallScreen: isSmallScreen,
+    children: [adaptedProps.icon || /*#__PURE__*/_jsx(Styled.ViewErrorIcon, {
+      size: 150
+    }), /*#__PURE__*/_jsx(Styled.ViewErrorTitle, {
+      children: adaptedProps.title
+    }), (adaptedProps.description || adaptedProps.backTo && adaptedProps.backToLabel) && /*#__PURE__*/_jsxs(Styled.ViewDescriptionWrapper, {
+      children: [adaptedProps.description && /*#__PURE__*/_jsxs(Styled.ViewErrorDescription, {
+        children: [adaptedProps.description, adaptedProps.description[adaptedProps.description.length - 1] !== '.' && '.']
+      }), adaptedProps.backTo && adaptedProps.backToLabel && /*#__PURE__*/_jsx(Button, {
+        onClick: adaptedProps.backTo,
+        color: "link-primary",
+        children: adaptedProps.backToLabel
+      })]
+    })]
+  });
+};
+export default ErroredViewPlaceholder;

package/lib/components/Views/Views.constants.js

@@ -0,0 +1,29 @@
+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 _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 { VIEW_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { Assets, Folders } from '@scaleflex/icons';
+import AssetsView from '../AssetsView';
+import FoldersView from '../FoldersView';
+import { activateFoldersView, selectCurrentFolder, toggleFoldersTree } from '../../slices/folders.slice';
+import { activateAssetsView } from '../AssetsView/AssetsView.thunks';
+
+// VIEW_IDS not in this file but inside @scaleflex/widget-utils/lib/constants
+// so it's easier to be imported from external project to be re-used in opts.
+
+export var VIEW_COMPONENTS = _defineProperty(_defineProperty({}, VIEW_IDS.ASSETS, AssetsView), VIEW_IDS.FOLDERS, FoldersView);
+export var VIEW_OPTIONS = _defineProperty(_defineProperty({}, VIEW_IDS.ASSETS, {
+  id: VIEW_IDS.ASSETS,
+  i18nKey: 'viewModeAllAssetsLabel',
+  icon: Assets,
+  activateAction: activateAssetsView,
+  activeItemSelector: selectCurrentFolder
+}), VIEW_IDS.FOLDERS, {
+  id: VIEW_IDS.FOLDERS,
+  i18nKey: 'viewModeFoldersLabel',
+  icon: Folders,
+  activateAction: activateFoldersView,
+  toggleTreeAction: toggleFoldersTree,
+  activeItemSelector: selectCurrentFolder
+});

package/lib/components/Views/Views.styled.js

@@ -0,0 +1,87 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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 { LAYOUTS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { FV, PC } from '@scaleflex/widget-common';
+import { NoResult } from '@scaleflex/icons';
+var listLayoutMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  [data-filerobot-theme=\"dark\"] & {\n    /* TODO: TO be checked about this static color? */\n    background-color: #1f1f1f;\n  }\n\n  .filerobot-Provider-list-cell {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    white-space: nowrap;\n    text-align: left;\n    cursor: pointer;\n    font-size: 14px;\n    flex: 0.5 0;\n\n    &-cursor-default {\n      cursor: default !important;\n    }\n  }\n\n  .filerobot-Provider-list-cell-icon {\n    max-width: 24px;\n    min-width: 20px;\n  }\n\n  .filerobot-Provider-list-firstColumn {\n    display: flex;\n    align-items: center;\n    flex: 1 0;\n\n    input, label {\n      width: 80%;\n    }\n\n    label {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n  }\n\n  .filerobot-ProviderBrowser-list { outline: none; }\n\n  li.filerobot-ProviderBrowserItem {\n    outline: none;\n    display: flex;\n    align-items: center;\n    padding: 11px 12px;\n    margin: 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n\n    [data-filerobot-theme=\"dark\"] & {\n      /* TODO: TO be checked about this static color? */\n      color: #eaeaea;\n    }\n  }\n\n  .filerobot-ProviderBrowser-body {\n    width: 100%;\n    overflow-x: auto;\n  }\n\n  .filerobot-Provider-ItemCategory {\n    &-header {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      text-align: left;\n      padding: 12px;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 16px;\n      border-bottom: 1.5px solid rgba(0, 0, 0, 0.07);\n      position: sticky;\n      top: -1px;\n      background-color: #fff;\n      z-index: 11;\n\n      &:last-child { margin-right: 0; }\n\n      .filerobot-c-icon { vertical-align: middle; }\n    }\n\n    &-wrapper-list { padding: 0; }\n  }\n\n\n  // Checkbox\n  .filerobot-ProviderBrowserItem-fakeCheckbox {\n    margin-right: 8px;\n    vertical-align: middle;\n  }\n\n  // Either a <label/> for a file,\n  // or a <button/> we can click on for a folder\n  .filerobot-ProviderBrowserItem {\n    /* TODO: TO be checked about this static color? */\n    color: #4D4E4E;\n\n    &-inner {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      width: 100%;\n      line-height: 1.3;\n      outline: none;\n\n    input { height: 17px; }\n\n      img,\n      svg {\n        max-width: 20px;\n        max-height: 20px;\n      }\n    }\n\n    &--selected {\n      background: ", ";\n      color: ", ";\n      border-bottom: 1px solid ", " !important;\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n\n  .filerobot-Provider-listHead-checkbox {\n    min-width: 16px;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.BackgroundPrimaryActive];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.IconsPlaceholder];
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.palette[PC.IconsPlaceholder];
+});
+var gridLayoutMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ul.filerobot-ProviderBrowser-list {\n      &::after {\n        content: '';\n        flex: auto;\n      }\n\n      &:focus { outline: none; }\n    }\n\n    .filerobot-Provider-ItemCategory {\n      &-header {\n        display: flex;\n        align-items: center;\n        font-weight: 400;\n        width: 100%;\n        max-width: 130px;\n        padding: 0 12px;\n        margin-top: 12px;\n        cursor: pointer;\n        font-size: 12px;\n      }\n\n      &-wrapper {\n        padding: 12px 24px 24px;\n\n        &-list {\n          list-style: none;\n          padding: 0;\n          width: 100%;\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        }\n      }\n    }\n\n    li.filerobot-ProviderBrowserItem {\n      min-width: 200px;\n      position: relative;\n      margin: 0;\n\n      &::before {\n        content: '';\n        padding-top: 88%;\n        display: block;\n      }\n\n      &--selected.item-folder,\n      &.item-folder:hover {\n        .filerobot-ProviderBrowserItem-folderSelectBox {\n          display: flex;\n        }\n      }\n\n      &:not(.filerobot-ProviderBrowserItem--beingRenamed):hover {\n        .filerobot-Explorer-dots-menu-icon {\n          display: block;\n        }\n      }\n\n      &:not(.item-folder) {\n        outline: none;\n        border: 4px solid transparent;\n\n        [data-filerobot-theme=\"dark\"] & {\n          /* TODO: TO be checked about this static color? */\n          border: 4px solid #000000;\n          /* TODO: TO be checked about this static color? */\n          background-color: #4D4E4E;\n\n          &:hover *,\n          &:focus * {\n            /* TODO: TO be checked about this static color? */\n            color: #000000;\n          }\n        }\n\n        &.no-selection {\n          .filerobot-ProviderBrowserItem-inner {\n            cursor: auto;\n          }\n        }\n\n        &:not(.no-selection) {\n          .filerobot-ProviderBrowserItem-inner:hover {\n            background-color: ", ";\n          }\n        }\n      }\n    }\n\n    .filerobot-ProviderBrowserItem-videoDuration {\n      position: absolute;\n      bottom: 33%;\n      z-index: 2;\n      background: rgba(79, 98, 118, 0.7);\n      border-radius: 2px;\n      left: 16px;\n      padding: 2px 4px;\n      text-align: center;\n      font-weight: 500;\n      line-height: 12px;\n      font-size: 11px;\n      box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);\n      color: #fff !important;\n    }\n\n    li.filerobot-ProviderBrowserItem--selected {\n      .filerobot-ProviderBrowserItem-inner {\n        background-color: ", " !important;\n\n        * {\n          fill: ", ";\n          color: ", ";\n        }\n      }\n\n      // As with-meta is related to the explorer only so that the styles would be applied to the explorer cards only.\n      &.with-meta {\n        input {\n          text-align: center;\n          color: #000 !important;\n          margin-top: 4px;\n          margin-bottom: -1px;\n        }\n\n        button.filerobot-ProviderBrowserItem-inner {\n          &:focus {\n            box-shadow: none !important;\n          }\n        }\n      }\n\n      .filerobot-Explorer-Item-fileInfoAndButtons {\n        background-color: inherit;\n      }\n    }\n\n    li.filerobot-ProviderBrowserItem--noPreview {\n      .filerobot-ProviderBrowserItem-inner {\n        /* TODO: TO be checked about this static color? */\n        background-color: rgba(147, 147, 147, 0.2);\n\n        [data-filerobot-theme=\"dark\"] & {\n          /* TODO: TO be checked about this static color? */\n          background-color: rgba(234, 234, 234, 0.2);\n        }\n      }\n\n      svg {\n        /* TODO: TO be checked about this static color? */\n        fill: rgba(0, 0, 0, 0.7);\n        width: 30%;\n        height: 30%;\n\n        [data-filerobot-theme=\"dark\"] & {\n          fill: rgba(", ", 0.8);\n        }\n      }\n    }\n\n    // button with a large picture\n    button.filerobot-ProviderBrowserItem-inner {\n      overflow: hidden;\n      position: absolute;\n      text-align: center;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);\n      background-color: ", ";\n\n      &:focus {\n        outline: none;\n      }\n\n      &.with-meta {\n        display: flex;\n        flex-direction: column-reverse;\n        align-items: center;\n        justify-content: flex-end;\n\n        &:focus {\n          box-shadow: none;\n        }\n\n        img {\n          object-fit: contain;\n          width: 100%;\n          height: 100%;\n          max-width: 100%;\n          max-height: 100%;\n        }\n      }\n    }\n\n    // Checkbox\n    .filerobot-ProviderBrowserItem-fakeCheckbox {\n      display: none;\n      position: absolute;\n      z-index: 3;\n      top: 8px;\n      left: 8px;\n    }\n\n    .filerobot-ProviderBrowserItem-folderSelectBox {\n      top: 26px;\n      left: 14px;\n      position: absolute;\n      display: none;\n    }\n\n  .filerobot-ProviderBrowserItem--selected {\n    .filerobot-ProviderBrowserItem-fakeCheckbox {\n      display: block;\n    }\n  }\n\n  .filerobot-ProviderBrowserItem-fakeCheckbox {\n    *:hover > & {\n      display: block;\n    }\n  }\n\n\n  .filerobot-Dragging-folders,\n  .filerobot-Dragging-files {\n    & > * {\n      pointer-events: none;\n    }\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette[PC.BackgroundPrimaryHover];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette[PC.BackgroundPrimaryActive];
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.palette[PC.BackgroundPrimaryHover];
+});
+var getLayoutMixin = function getLayoutMixin(_ref12) {
+  var viewLayout = _ref12.viewLayout;
+  switch (viewLayout) {
+    case LAYOUTS_IDS.LAYOUT:
+      return listLayoutMixin;
+    case LAYOUTS_IDS.GRID:
+    default:
+      return gridLayoutMixin;
+  }
+};
+var ViewWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  font-size: 14px;\n  font-weight: 400;\n  height: 100%;\n  position: relative;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, getLayoutMixin);
+var ViewErrorPlaceholder = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 16px;\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  svg {\n    color: ", ";\n  }\n"])), function (_ref14) {
+  var isSmallScreen = _ref14.isSmallScreen;
+  return isSmallScreen ? 'height: 100%;' : 'padding-top: 150px;';
+}, function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.palette[PC.IconsPlaceholder];
+});
+var ViewErrorTitle = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 8px 0;\n  ", ";\n  color: ", ";\n"])), function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.typography.font[FV.TitleH4];
+}, function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var ViewDescriptionWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  text-align: center;\n"])));
+var ViewErrorDescription = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 8px 4px 8px 0;\n  color: ", ";\n"])), function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var ViewErrorIcon = styled(NoResult)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.palette[PC.IconsPlaceholder];
+});
+var Styled = {
+  ViewWrapper: ViewWrapper,
+  ViewErrorPlaceholder: ViewErrorPlaceholder,
+  ViewErrorIcon: ViewErrorIcon,
+  ViewErrorTitle: ViewErrorTitle,
+  ViewDescriptionWrapper: ViewDescriptionWrapper,
+  ViewErrorDescription: ViewErrorDescription
+};
+export default Styled;

package/lib/components/Views/index.js

@@ -0,0 +1,100 @@
+import { memo, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { FMAW_URL_QUERY_PARAMS, PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { useContextMenu, useCore } from '@scaleflex/widget-core/lib/hooks';
+import { useExplorer, useLocateFile } from '../../hooks';
+import { VIEW_COMPONENTS } from './Views.constants';
+import { activateViewFromOutside, searchOrListViewFiles, selectActiveView, selectViewLayout } from '../../slices/views.slice';
+import { fetchLabels } from '../../slices/common.slice';
+import Styled from './Views.styled';
+import { loadSearchFromOutside } from '../../slices/search.slice';
+import { loadFiltersFromOutside } from '../../slices/filters.slice';
+import decodeB64ToStr from '../../utils/decodeB64ToStr';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Views = function Views() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    checkUserPermissions = _useExplorer.checkUserPermissions,
+    opts = _useExplorer.opts,
+    getUrlQueryParam = _useExplorer.getUrlQueryParam,
+    isUrlPathUpdateDismissed = _useExplorer.isUrlPathUpdateDismissed;
+  var viewLayout = useSelector(selectViewLayout);
+  var activeViewId = useSelector(selectActiveView);
+  var locateFile = useLocateFile();
+  var toggleContextMenu = useContextMenu();
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var locateOrEmbedFileFromUrl = function locateOrEmbedFileFromUrl() {
+    var fileUuidToLocate = decodeB64ToStr(getUrlQueryParam(FMAW_URL_QUERY_PARAMS.LOCATE_FILE));
+    if (fileUuidToLocate) {
+      locateFile({
+        uuid: fileUuidToLocate,
+        disableUrlUpdate: true
+      });
+    }
+    return Boolean(fileUuidToLocate);
+  };
+  var activateViewFromUrl = function activateViewFromUrl() {
+    toggleContextMenu();
+    if (!locateOrEmbedFileFromUrl()) {
+      dispatch(activateViewFromOutside({
+        fromUrl: true
+      }));
+    }
+  };
+  useEffect(function () {
+    activateViewFromUrl();
+    if (checkUserPermissions([PERMISSIONS.LABELS_LIST])) {
+      dispatch(fetchLabels());
+    }
+    emit('view-loaded');
+    if (!isUrlPathUpdateDismissed()) {
+      // Applying navigation for the browser's back & forward
+      window.addEventListener('popstate', activateViewFromUrl);
+      window.addEventListener('replacestate', locateOrEmbedFileFromUrl);
+    }
+    return function () {
+      if (!isUrlPathUpdateDismissed()) {
+        window.removeEventListener('popstate', activateViewFromUrl);
+        window.removeEventListener('replacestate', locateOrEmbedFileFromUrl);
+      }
+    };
+  }, []);
+  useUpdateEffect(function () {
+    toggleContextMenu();
+    dispatch(activateViewFromOutside({
+      fromUrl: false
+    }));
+  }, [opts.views, opts.view, opts.viewItem, opts.viewSubItem]);
+  useUpdateEffect(function () {
+    dispatch(loadFiltersFromOutside({
+      triggerApi: false
+    }));
+  }, [opts.filters]);
+  useUpdateEffect(function () {
+    dispatch(loadSearchFromOutside({
+      triggerApi: false
+    }));
+  }, [opts.search]);
+  useUpdateEffect(function () {
+    toggleContextMenu();
+    dispatch(searchOrListViewFiles({
+      withStats: true
+    }));
+  }, [opts.search, opts.filters]);
+  var ActiveView = VIEW_COMPONENTS[activeViewId];
+  if (!ActiveView) {
+    // TODO: Add proper error component for this.
+    return 'Wrong view provided...';
+  }
+
+  // TODO: Rename the class name and refactor the classes applied there, also we should apply layoutType to state instead of opts?.
+  return /*#__PURE__*/_jsx(Styled.ViewWrapper, {
+    className: "filerobot-ProviderBrowser" // we are keeping this till we support all the related (parent/child ) classes
+    ,
+    viewLayout: viewLayout,
+    children: /*#__PURE__*/_jsx(ActiveView, {})
+  });
+};
+export default /*#__PURE__*/memo(Views);

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

@@ -0,0 +1,8 @@
+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';
+var EllipsedTextWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .SfxEllipsed-ellipsed-text-wrapper {\n    word-break: break-all;\n  } \n"])));
+var Styled = {
+  EllipsedTextWrapper: EllipsedTextWrapper
+};
+export default Styled;

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

@@ -0,0 +1,29 @@
+import { Fragment } from 'react';
+import { EllipsedText } from '@scaleflex/ui/core';
+import Styled from './DeleteModalItemText.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var TOOLTIP_PROPS = {
+  size: 'md',
+  zIndex: 500000
+};
+var DeleteModalItemText = function DeleteModalItemText(_ref) {
+  var itemText = _ref.itemText,
+    itemTitle = _ref.itemTitle,
+    _ref$forceTooltip = _ref.forceTooltip,
+    forceTooltip = _ref$forceTooltip === void 0 ? false : _ref$forceTooltip;
+  return /*#__PURE__*/_jsx(Styled.EllipsedTextWrapper, {
+    children: /*#__PURE__*/_jsx(EllipsedText, {
+      maxLinesCount: 2,
+      forceTooltip: forceTooltip,
+      tooltipProps: TOOLTIP_PROPS,
+      tooltipTitle: "\"".concat(itemTitle, "\""),
+      textSuffix: "\"?",
+      children: Array.isArray(itemText) ? itemText.map(function (text, index) {
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: text
+        }, index);
+      }) : itemText
+    })
+  });
+};
+export default DeleteModalItemText;

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

@@ -0,0 +1,35 @@
+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 { IconButton } from '@scaleflex/ui/core';
+import { PC, PSH } from '@scaleflex/widget-common';
+var EditBtn = styled(IconButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  position: sticky;\n  z-index: 1;\n  bottom: ", ";\n  left: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.IconsPrimary];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.BackgroundStateless];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.shadows[PSH.ShadowMd];
+}, function (_ref4) {
+  var _ref4$bottom = _ref4.bottom,
+    bottom = _ref4$bottom === void 0 ? '100%' : _ref4$bottom;
+  return bottom;
+}, function (_ref5) {
+  var _ref5$left = _ref5.left,
+    left = _ref5$left === void 0 ? '100%' : _ref5$left;
+  return left;
+}, function (_ref6) {
+  var _ref6$mt = _ref6.mt,
+    mt = _ref6$mt === void 0 ? '0' : _ref6$mt;
+  return mt;
+}, function (_ref7) {
+  var _ref7$mr = _ref7.mr,
+    mr = _ref7$mr === void 0 ? '0' : _ref7$mr;
+  return mr;
+});
+var Styled = {
+  EditBtn: EditBtn
+};
+export default Styled;

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

@@ -0,0 +1,28 @@
+import { Rename } from '@scaleflex/icons';
+import Styled from './EditDetailsButton.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var EditDetailsButton = function EditDetailsButton(_ref) {
+  var _ref$isUserNotAllowed = _ref.isUserNotAllowedToEdit,
+    isUserNotAllowedToEdit = _ref$isUserNotAllowed === void 0 ? true : _ref$isUserNotAllowed,
+    _ref$enableEditing = _ref.enableEditing,
+    enableEditing = _ref$enableEditing === void 0 ? function () {} : _ref$enableEditing,
+    _ref$mt = _ref.mt,
+    mt = _ref$mt === void 0 ? '0' : _ref$mt,
+    _ref$mr = _ref.mr,
+    mr = _ref$mr === void 0 ? '0' : _ref$mr,
+    bottom = _ref.bottom;
+  return !isUserNotAllowedToEdit && /*#__PURE__*/_jsx(Styled.EditBtn, {
+    color: "basic",
+    size: "sm",
+    onClick: function onClick() {
+      return enableEditing();
+    },
+    mt: mt,
+    mr: mr,
+    bottom: bottom,
+    children: /*#__PURE__*/_jsx(Rename, {
+      size: 16
+    })
+  });
+};
+export default EditDetailsButton;

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

@@ -0,0 +1,16 @@
+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 { Button as SfxButton } from '@scaleflex/ui/core';
+import { FV, PC } from '@scaleflex/widget-common';
+var Button = styled(SfxButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .SfxButton-Label {\n    ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.typography.font[FV.TextSmall];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.AccentStateless];
+});
+var Styled = {
+  Button: Button
+};
+export default Styled;

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

@@ -0,0 +1,29 @@
+import Styled from './ExpiryDateTooltipContent.styled';
+
+// This is a utility function not component, but separated it into a diff. file as it contains JSX, avoiding to rename the utility file with .jsx instead of .js
+import { jsx as _jsx } from "react/jsx-runtime";
+var ExpiryDateTooltipContent = function ExpiryDateTooltipContent(_ref) {
+  var expireDateMappedField = _ref.expireDateMappedField,
+    scrollToMetaField = _ref.scrollToMetaField,
+    i18nArray = _ref.i18nArray;
+  if (!expireDateMappedField) {
+    return;
+  }
+  var scrollToMappedField = function scrollToMappedField() {
+    if (typeof scrollToMetaField === 'function') {
+      scrollToMetaField(expireDateMappedField.key);
+    }
+  };
+  var openMappedFieldButton = /*#__PURE__*/_jsx(Styled.Button, {
+    color: "link-primary",
+    size: "sm",
+    onClick: scrollToMappedField,
+    children: expireDateMappedField.title
+  }, expireDateMappedField.title);
+  return /*#__PURE__*/_jsx("span", {
+    children: i18nArray('explorerGeneralFileDetailsExpiryDateHint', {
+      mapped_expiry_date_field: openMappedFieldButton
+    })
+  });
+};
+export default ExpiryDateTooltipContent;

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

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { PLUGINS_IDS, FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorerI18n } from '../../../hooks';
+import { fileWindowUpdated, selectFileWindowFor } from '../../../slices/panels.slice';
+import { selectSelectedFiles } from '../../../slices/selections.slice';
+import { selectCurrentFileByIdOrUuid } from '../../../slices/files.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileApprovalsInfoPopup = function FileApprovalsInfoPopup(_ref) {
+  var _approvalPlugin$isEna;
+  var smallerFont = _ref.smallerFont;
+  var dispatch = useDispatch();
+  var _useCore = useCore(),
+    getPlugin = _useCore.getPlugin;
+  var i18n = useExplorerI18n();
+  var originalFile = useSelector(function (state) {
+    return selectCurrentFileByIdOrUuid(state, selectFileWindowFor(state));
+  });
+  var selectedFiles = useSelector(selectSelectedFiles);
+  var file = originalFile || selectedFiles[0];
+  var approvalPlugin = getPlugin(PLUGINS_IDS.APPROVALS);
+  var isApprovalsEnabled = approvalPlugin === null || approvalPlugin === void 0 ? void 0 : (_approvalPlugin$isEna = approvalPlugin.isEnabled) === null || _approvalPlugin$isEna === void 0 ? void 0 : _approvalPlugin$isEna.call(approvalPlugin);
+  var openFileWindowAndUpdateTab = function openFileWindowAndUpdateTab(newTabId) {
+    dispatch(fileWindowUpdated({
+      "for": file.uuid,
+      tabId: newTabId
+    }));
+  };
+  var ApprovalInfoPopupComponent = useMemo(function () {
+    return approvalPlugin === null || approvalPlugin === void 0 ? void 0 : approvalPlugin.renderApprovalInfoPopup();
+  }, []);
+  if (!approvalPlugin || !isApprovalsEnabled) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ApprovalInfoPopupComponent, {
+    i18n: i18n,
+    file: file,
+    navigateToApprovalsTab: function navigateToApprovalsTab() {
+      return openFileWindowAndUpdateTab(FILE_WINDOW_TAB_IDS.APPROVALS);
+    },
+    smallerFont: smallerFont,
+    selectedFile: selectedFiles[0]
+  });
+};
+export default FileApprovalsInfoPopup;

package/lib/components/common/FileMetadataFieldValue/CustomMetadataFieldValue.js

@@ -0,0 +1,48 @@
+import { useSelector } from 'react-redux';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { Cross, Tick } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+import { EllipsedText } from '@scaleflex/ui/core';
+import getMetadataFieldVariantValue from '@scaleflex/widget-utils/lib/metadata/getMetadataFieldVariantValue';
+import { selectMetadataRegionalFilters } from '../../../slices/metadata.slice';
+import FormattedUriLink from '../FormattedUriLink';
+import Styled from './FileMetadataFieldValue.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CustomMetadataFieldValue = function CustomMetadataFieldValue(_ref) {
+  var field = _ref.field,
+    value = _ref.value,
+    multiTooltipMaxLines = _ref.multiTooltipMaxLines;
+  var theme = useTheme();
+  var metaRegionalFilters = useSelector(selectMetadataRegionalFilters);
+  var fieldValue = value || field.value;
+  var iconPrimaryColor = theme.palette[PC.IconsPrimary];
+  var renderNoValue = function renderNoValue() {
+    return /*#__PURE__*/_jsx(Styled.NoValueWrapper, {
+      children: "\u2014"
+    });
+  };
+  if (!fieldValue) return renderNoValue();
+  var variantValue = getMetadataFieldVariantValue({
+    value: fieldValue,
+    possibleValues: field.possible_values,
+    regionalVariantsGroupUuid: field.regional_variants_group_uuid,
+    metaRegionalFilters: metaRegionalFilters
+  });
+  if (typeof variantValue === 'boolean') {
+    return variantValue ? /*#__PURE__*/_jsx(Tick, {
+      color: iconPrimaryColor
+    }) : /*#__PURE__*/_jsx(Cross, {
+      color: iconPrimaryColor
+    });
+  }
+  if (field.type === 'attachment-uri') {
+    return /*#__PURE__*/_jsx(FormattedUriLink, {
+      uri: variantValue
+    });
+  }
+  return /*#__PURE__*/_jsx(EllipsedText, {
+    maxLinesCount: multiTooltipMaxLines,
+    children: Array.isArray(variantValue) ? variantValue.join(', ') : variantValue || renderNoValue()
+  });
+};
+export default CustomMetadataFieldValue;