@scaleflex/widget-explorer 0.0.1

package/lib/components/ActionBar/index.js

@@ -0,0 +1,105 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { useExplorer, useToLocaleNumber } from '../../hooks';
+import { selectAllFiles, selectAllFolders, selectAllItems, selectAllSelectedItems, selectIsFileSelected, selectIsFolderSelected, selectionsCleared } from '../../slices/selections.slice';
+import { selectIsActionBarHidden, selectActionBarZIndex } from '../../slices/panels.slice';
+import SelectionMenu from './SelectionMenu';
+import Styled from './ActionBar.styled';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var ActionBar = function ActionBar() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    opts = _useExplorer.opts;
+  var toLocaleNumber = useToLocaleNumber();
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var currentSelection = useSelector(selectAllSelectedItems);
+  var disableSelectionActions = opts.disableSelectionActions,
+    disableMultipleSelect = opts.disableMultipleSelect,
+    hideActionBarSelectionButtons = opts.hideActionBarSelectionButtons;
+  var hideActionBar = useSelector(function (state) {
+    return disableSelectionActions || selectIsActionBarHidden(state);
+  });
+  var isFolderSelected = useSelector(selectIsFolderSelected);
+  var isFileSelected = useSelector(selectIsFileSelected);
+  var actionBarZIndex = useSelector(selectActionBarZIndex);
+  var handleClearSelection = function handleClearSelection() {
+    dispatch(selectionsCleared());
+  };
+  var selectItems = function selectItems() {
+    if (disableMultipleSelect) {
+      return;
+    }
+    if (isFolderSelected && isFileSelected) {
+      return dispatch(selectAllItems());
+    }
+    if (isFolderSelected) {
+      return dispatch(selectAllFolders());
+    }
+    if (isFileSelected) {
+      return dispatch(selectAllFiles());
+    }
+  };
+  var getSelectionButtonLabel = function getSelectionButtonLabel() {
+    if (isFolderSelected && isFileSelected) {
+      return i18n('actionBarSelectAllFoldersAndAssets');
+    }
+    if (isFolderSelected) {
+      return i18n('actionBarSelectAllFolders');
+    }
+    if (isFileSelected) {
+      return i18n('actionBarSelectAllFiles');
+    }
+  };
+  var renderCount = function renderCount() {
+    return toLocaleNumber(currentSelection.length);
+  };
+  useEffect(function () {
+    emit('action-bar-visibility-changed', {
+      visible: !hideActionBar
+    });
+  }, [!hideActionBar]);
+  return /*#__PURE__*/_jsxs(Styled.ActionBar, {
+    hasSelection: !hideActionBar,
+    className: "filerobot-Explorer-ActionBar",
+    style: {
+      zIndex: actionBarZIndex
+    },
+    "data-testid": "action-bar",
+    role: "toolbar",
+    children: [/*#__PURE__*/_jsx(Styled.LeftSide, {
+      children: !hideActionBarSelectionButtons && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(Styled.SelectedSection, {
+          className: "filerobot-Explorer-BottomBar-selectedSection",
+          children: [/*#__PURE__*/_jsx(Styled.SelectedNumberCount, {
+            "data-testid": "action-bar",
+            children: renderCount()
+          }), /*#__PURE__*/_jsxs(Styled.SelectedLabel, {
+            children: [" ", i18n('topBarSelectedLabel'), " "]
+          })]
+        }), /*#__PURE__*/_jsxs(Styled.SelectLabel, {
+          children: [i18n('mutualizedSelectLabel'), ":"]
+        }), /*#__PURE__*/_jsx(Styled.ActionBarButton, {
+          color: "link-primary",
+          disabled: disableMultipleSelect,
+          size: "sm",
+          onClick: selectItems,
+          $mr: 32,
+          "data-testid": "action-bar-select-all-btn",
+          children: getSelectionButtonLabel()
+        }), /*#__PURE__*/_jsx(Styled.ActionBarButton, {
+          onClick: handleClearSelection,
+          color: "link-primary",
+          size: "sm",
+          "data-testid": "action-bar-select-none",
+          children: i18n('actionBarSelectNone')
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Styled.RightSide, {
+      children: /*#__PURE__*/_jsx(SelectionMenu, {})
+    })]
+  });
+};
+export default ActionBar;

package/lib/components/AddFilesPanel/AddFiles.js

@@ -0,0 +1,174 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { MyDevice, DamIcon } from '@scaleflex/widget-icons/lib';
+import { usePluginsType, useCore } from '@scaleflex/widget-core/lib/hooks';
+import toArray from '@scaleflex/widget-utils/lib/toArray';
+import { useAssetsPicker, useExplorer } from '../../hooks';
+import Styled from './AddFiles.styled';
+import { setNewPickerPanel } from '../../slices/panels.slice';
+import { selectIsDraggingOver } from '../../slices/common.slice';
+import getAcquirerTitle from '../../utils/getAcquirerTitle';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var AddFiles = function AddFiles() {
+  var dispatch = useDispatch();
+  var acquirers = usePluginsType('acquirer');
+  var _useExplorer = useExplorer(),
+    addUploads = _useExplorer.addFiles,
+    i18n = _useExplorer.i18n,
+    i18nArray = _useExplorer.i18nArray,
+    explorerOpts = _useExplorer.opts;
+  var _useCore = useCore(),
+    _useCore$opts$restric = _useCore.opts.restrictions,
+    restrictions = _useCore$opts$restric === void 0 ? {} : _useCore$opts$restric;
+  var isDraggingOver = useSelector(selectIsDraggingOver);
+  var _useAssetsPicker = useAssetsPicker(),
+    openAssetPicker = _useAssetsPicker.openAssetPicker;
+  var maxNumberOfFiles = restrictions.maxNumberOfFiles,
+    allowedFileTypes = restrictions.allowedFileTypes;
+  var note = explorerOpts.note,
+    hint = explorerOpts.hint,
+    showScaleflexCopyright = explorerOpts.showScaleflexCopyright,
+    showDragDropPanel = explorerOpts.showDragDropPanel,
+    showImportFromDamButton = explorerOpts.showImportFromDamButton,
+    onImportFromDam = explorerOpts.onImportFromDam,
+    ExploreViewComponent = explorerOpts.ExploreViewComponent;
+  var acquirersLength = acquirers.length;
+  var fileInput = useRef();
+  var handleFileInputChange = function handleFileInputChange(event) {
+    event.preventDefault();
+    var files = toArray(event.target.files);
+    addUploads(files);
+  };
+  var showPickerPanel = function showPickerPanel(acquirerId) {
+    dispatch(setNewPickerPanel({
+      pickerPanelId: acquirerId,
+      pickerPanelType: 'acquirer'
+    }));
+  };
+  var triggerFileInputClick = function triggerFileInputClick() {
+    fileInput.current.click();
+  };
+  var onFileInputChange = function onFileInputChange(event) {
+    handleFileInputChange(event);
+
+    // We clear the input after a file is selected, because otherwise
+    // change event is not fired in Chrome and Safari when a file
+    // with the same name is selected.
+    // ___Why not use value="" on <input/> instead?
+    //    Because if we use that method of clearing the input,
+    //    Chrome will not trigger change if we drop the same file twice.
+    event.target.value = null;
+  };
+  var renderHiddenFileInput = function renderHiddenFileInput() {
+    return /*#__PURE__*/_jsx("input", {
+      className: "filerobot-Explorer-input",
+      hidden: true,
+      "aria-hidden": "true",
+      tabIndex: -1,
+      type: "file",
+      name: "files[]",
+      multiple: maxNumberOfFiles !== 1,
+      onChange: onFileInputChange,
+      accept: allowedFileTypes,
+      ref: fileInput
+    });
+  };
+  var renderMyDeviceAcquirer = function renderMyDeviceAcquirer() {
+    return /*#__PURE__*/_jsx(Styled.AcquirerButtons, {
+      children: /*#__PURE__*/_jsxs(Styled.AcquirerButton, {
+        onClick: triggerFileInputClick,
+        children: [/*#__PURE__*/_jsx(MyDevice, {}), /*#__PURE__*/_jsx(Styled.AcquirerButtonsLabel, {
+          children: i18n('addFilesPanelMyDeviceOption')
+        })]
+      })
+    });
+  };
+
+  // We render Dam acquirer as an internal acquirer not as plugin because the upload process wont be completed,
+  // no extra logic needed except showing the button and pass the onImport function, no upload will occur
+  var renderDamAcquirer = function renderDamAcquirer() {
+    var importFromDam = function importFromDam() {
+      openAssetPicker({
+        onImport: onImportFromDam,
+        hideUploadButton: true,
+        ExploreViewComponent: ExploreViewComponent
+      });
+    };
+    return /*#__PURE__*/_jsx(Styled.AcquirerButtons, {
+      children: /*#__PURE__*/_jsxs(Styled.AcquirerButton, {
+        onClick: importFromDam,
+        children: [/*#__PURE__*/_jsx(DamIcon, {}), /*#__PURE__*/_jsx(Styled.AcquirerButtonsLabel, {
+          children: i18n('addFilesPanelDamOption')
+        })]
+      })
+    });
+  };
+  var renderDropPasteBrowseTagline = function renderDropPasteBrowseTagline() {
+    var browse = /*#__PURE__*/_jsx(Styled.BrowseButton, {
+      onClick: triggerFileInputClick,
+      children: i18n('addFilesPanelBrowseButton')
+    }, "filerobot-browseTaglineButton");
+    var labelonNoAcquirers = showDragDropPanel ? 'addFilesPanelDropHereClickLabel' : 'addFilesPanelDropPasteImportLabel';
+    return /*#__PURE__*/_jsx(Styled.DropFilesTitle, {
+      isDraggingOver: !showDragDropPanel && isDraggingOver,
+      children: i18nArray(labelonNoAcquirers, {
+        browse: browse
+      })
+    });
+  };
+  var renderImportFromLine = function renderImportFromLine() {
+    return !!acquirersLength && /*#__PURE__*/_jsx(Styled.DropFilesImportLabel, {
+      children: /*#__PURE__*/_jsx(Styled.ImportLabel, {
+        children: i18n('addFilesPanelImportFromLabel')
+      })
+    });
+  };
+  var renderDragDropNote = function renderDragDropNote() {
+    return /*#__PURE__*/_jsx(Styled.DragDropNote, {
+      children: note || i18n('mutualizedDragDropHereNote')
+    });
+  };
+  var renderAcquirer = function renderAcquirer(acquirer) {
+    return /*#__PURE__*/_jsx(Styled.Acquirer, {
+      children: /*#__PURE__*/_jsxs(Styled.AcquirerButton, {
+        onClick: function onClick() {
+          return showPickerPanel(acquirer.id);
+        },
+        children: [acquirer.icon && acquirer.icon(), /*#__PURE__*/_jsx(Styled.AcquirerButtonsLabel, {
+          children: getAcquirerTitle(acquirer.id) ? i18n(getAcquirerTitle(acquirer.id)) : acquirer.title
+        })]
+      })
+    }, acquirer.id);
+  };
+  var renderAcquirers = function renderAcquirers(acquirers) {
+    // Group last two buttons, so we don’t end up with
+    // just one button on a new line
+    var acquirersWithoutLastTwo = _toConsumableArray(acquirers);
+    var lastTwoAcquirers = acquirersWithoutLastTwo.splice(acquirersLength - 2, acquirersLength);
+    return /*#__PURE__*/_jsxs(Styled.AcquirersList, {
+      children: [showImportFromDamButton && Boolean(ExploreViewComponent) && renderDamAcquirer(), renderMyDeviceAcquirer(), acquirersWithoutLastTwo.map(renderAcquirer), lastTwoAcquirers.map(renderAcquirer)]
+    });
+  };
+  return /*#__PURE__*/_jsx(Styled.AcquirersMainBody, {
+    children: /*#__PURE__*/_jsxs(Styled.AcquirersWrapper, {
+      showScaleflexCopyright: showScaleflexCopyright,
+      hasAcquirers: !!acquirersLength,
+      showDragPlaceholder: !showDragDropPanel && isDraggingOver,
+      children: [renderHiddenFileInput(), renderDropPasteBrowseTagline(), renderImportFromLine(), showDragDropPanel && acquirersLength === 0 && renderDragDropNote(), acquirersLength > 0 && renderAcquirers(acquirers), hint && /*#__PURE__*/_jsx(Styled.InfoWrapper, {
+        hasAcquirers: !!acquirersLength,
+        children: hint
+      }), showScaleflexCopyright && /*#__PURE__*/_jsxs(Styled.PowerdByLabel, {
+        children: ["powered by", /*#__PURE__*/_jsx(Styled.FilerobotLabel, {
+          children: "Scaleflex"
+        })]
+      })]
+    })
+  });
+};
+export default AddFiles;

package/lib/components/AddFilesPanel/AddFiles.styled.js

@@ -0,0 +1,137 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC, FV } from '@scaleflex/widget-common';
+import styled, { css } from 'styled-components';
+import { CrossButton as SfxCrossButton } from '@scaleflex/ui/core';
+var AddFilesPanelWrapper = styled.div(function (_ref) {
+  var palette = _ref.theme.palette,
+    showDragDropPanel = _ref.showDragDropPanel;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    color: ", ";\n    box-shadow: 0px 2px 6px ", ";\n    overflow: hidden;\n    z-index: 1005;\n    border-radius: 4px;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    ", "\n  "])), palette[PC.BackgroundSecondary], palette[PC.HeavyShadow], showDragDropPanel && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-radius: 4px;\n      background: ", ";\n    "])), palette[PC.BackgroundSecondary]));
+});
+var AcquirersMainBody = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  padding: 24px;\n  overflow-y: auto;\n  background: ", ";\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BackgroundStateless];
+});
+var AcquirersWrapper = styled.div(function (_ref3) {
+  var _ref3$theme = _ref3.theme,
+    palette = _ref3$theme.palette,
+    breakpoints = _ref3$theme.breakpoints,
+    showScaleflexCopyright = _ref3.showScaleflexCopyright,
+    showDragPlaceholder = _ref3.showDragPlaceholder;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    min-height: 100%;\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: ", ";\n    border: 1px dashed ", ";\n    border-radius: 4px;\n\n    ", " {\n      padding: 24px 16px 16px 16px;\n    }\n\n    ", "\n  "])), showScaleflexCopyright ? '16px 16px 0 16px' : '16px', palette[PC.BordersPrimary], breakpoints.down('md'), showDragPlaceholder && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &::after {\n        content: '';\n        display: block;\n        background: ", ";\n        opacity: 0.8;\n        top: 0;\n        right: 0;\n        left: 0;\n        bottom: 0;\n        z-index: 1;\n        position: absolute;\n      }\n    "])), palette[PC.AccentStateless], palette[PC.BackgroundActive]));
+});
+var AcquirersList = styled.div(function (_ref4) {
+  var breakpoints = _ref4.theme.breakpoints;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat( auto-fill, minmax(130px, 130px));\n    justify-content: center;\n    width: 100%;\n    max-width: 556px;\n    flex-wrap: wrap;\n    gap: 12px;\n\n    ", " {\n      max-width: 1040px;\n      grid-template-columns: repeat( auto-fill, minmax(160px, 160px));\n      gap: 16px;\n    }\n  "])), breakpoints.up('xxl'));
+});
+var Acquirer = styled.div(function (_ref5) {
+  var breakpoints = _ref5.theme.breakpoints;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 130px;\n    height: 110px;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n      width: 42px;\n      height: 42px;\n    }\n\n    ", " {\n      width: 160px;\n      height: 160px;\n\n      svg {\n        width: 62px;\n        height: 62px;\n      }\n    }\n  "])), breakpoints.up('xxl'));
+});
+var AcquirerButtons = styled.div(function (_ref6) {
+  var breakpoints = _ref6.theme.breakpoints;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 130px;\n    height: 110px;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    cursor: pointer;\n\n    ", " {\n      width: 160px;\n      height: 160px;\n    }\n  "])), breakpoints.up('xxl'));
+});
+var AcquirerButton = styled.button(function (_ref7) {
+  var _ref7$theme = _ref7.theme,
+    palette = _ref7$theme.palette,
+    breakpoints = _ref7$theme.breakpoints;
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: 130px;\n    height: 110px;\n    border: 0;\n    padding: 0;\n    border-radius: 4px;\n    background-color: ", ";\n    box-shadow: 0px 2px 6px ", ";\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", "\n    }\n\n    svg {\n      width: 42px;\n      height: 42px;\n    }\n\n    ", " {\n      width: 160px;\n      height: 160px;\n\n      svg {\n        width: 62px;\n        height: 62px;\n      }\n    }\n  "])), palette[PC.BackgroundStateless], palette[PC.LargeShadow], palette[PC.BackgroundPrimaryHover], breakpoints.up('xxl'));
+});
+var DropFilesTitle = styled.div(function (_ref8) {
+  var _ref8$theme = _ref8.theme,
+    palette = _ref8$theme.palette,
+    breakpoints = _ref8$theme.breakpoints,
+    isDraggingOver = _ref8.isDraggingOver;
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 24px;\n    line-height: 28px;\n    margin-bottom: 16px;\n    color: ", ";\n    text-align: center;\n    ", "\n\n    ", " {\n      font-size: 32px;\n      line-height: 36px;\n      margin-bottom: 28px;\n    }\n  "])), palette[PC.TextPrimary], isDraggingOver && 'z-index: 2;', breakpoints.up('xxl'));
+});
+var BrowseButton = styled.button(function (_ref9) {
+  var _ref9$theme = _ref9.theme,
+    palette = _ref9$theme.palette,
+    breakpoints = _ref9$theme.breakpoints;
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    font-size: 24px;\n    line-height: 28px;\n    border: 0;\n    cursor: pointer;\n    color: ", ";\n    background: transparent;\n\n    ", " {\n      font-size: 32px;\n      line-height: 36px;\n    }\n  "])), palette[PC.AccentStateless], breakpoints.up('xxl'));
+});
+var ImportLabel = styled.span(function (_ref10) {
+  var _ref10$theme = _ref10.theme,
+    palette = _ref10$theme.palette,
+    breakpoints = _ref10$theme.breakpoints;
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin: 0 16px;\n    font-size: 14px;\n    line-height: 20px;\n    color: ", ";\n    white-space: nowrap;\n\n    ", " {\n      font-size: 16px;\n      line-height: 22px;\n    }\n  "])), palette[PC.TextSecondary], breakpoints.up('xxl'));
+});
+var PowerdByLabel = styled.span(function (_ref11) {
+  var palette = _ref11.theme.palette;
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    display: flex;\n    position: absolute;\n    align-items: center;\n    justify-content: flex-end;\n    width: 100%;\n    bottom: 0;\n    right: 16px;\n    margin-top: auto;\n    padding: 11px 0;\n    font-size: 12px;\n    line-height: 14px;\n    z-index: -1;\n    color: ", ";\n  "])), palette[PC.TextSecondary]);
+});
+var FilerobotLabel = styled.span(function (_ref12) {
+  var palette = _ref12.theme.palette;
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 14px;\n    font-weight: 500;\n    margin-left: 2px;\n    color: ", ";\n  "])), palette[PC.TextSecondary]);
+});
+var DragDropNote = styled.span(function (_ref13) {
+  var palette = _ref13.theme.palette;
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    font-size: 0.8em;\n    color: ", ";\n  "])), palette[PC.TextPrimary]);
+});
+var AcquirerButtonsLabel = styled.div(function (_ref14) {
+  var _ref14$theme = _ref14.theme,
+    palette = _ref14$theme.palette,
+    breakpoints = _ref14$theme.breakpoints;
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    margin-top: 10px;\n    color: ", ";\n    ", ";\n\n    ", " {\n      margin-top: 12px;\n\n      ", ";\n    }\n  "])), palette[PC.TextPrimary], function (_ref15) {
+    var theme = _ref15.theme;
+    return theme.typography.font[FV.LabelSmall];
+  }, breakpoints.up('xxl'), function (_ref16) {
+    var theme = _ref16.theme;
+    return theme.typography.font[FV.LabelLarge];
+  });
+});
+var DropFilesImportLabel = styled.div(function (_ref17) {
+  var _ref17$theme = _ref17.theme,
+    palette = _ref17$theme.palette,
+    breakpoints = _ref17$theme.breakpoints;
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    display: flex;\n    width: 100%;\n    max-width: 556px;\n    height: 22px;\n    margin-bottom: 16px;\n    text-align: center;\n\n    ", " {\n      margin-bottom: 28px;\n      max-width: 1040px;\n    }\n\n    &::before {\n      content: \"\";\n      height: 11px;\n      border-bottom: 1px solid ", ";\n      width: 50%;\n    }\n\n    &::after {\n      content: \"\";\n      height: 11px;\n      border-bottom: 1px solid ", ";\n      width: 50%;\n    }\n  "])), breakpoints.up('xxl'), palette[PC.BordersSecondary], palette[PC.BordersSecondary]);
+});
+var ExplorerTopBar = styled.div(function (_ref18) {
+  var _ref18$theme = _ref18.theme,
+    palette = _ref18$theme.palette,
+    breakpoints = _ref18$theme.breakpoints;
+  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    display: flex;\n    position: relative;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 64px;\n    padding: 24px 24px 20px 24px;\n    border: 1px solid ", ";\n    background: ", ";\n\n    ", " {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n  "])), palette[PC.BordersSecondary], palette[PC.BackgroundStateless], breakpoints.down('md'), breakpoints.classes.sm);
+});
+var ExplorerTopBarTitle = styled.div(function (_ref19) {
+  var _ref19$theme = _ref19.theme,
+    palette = _ref19$theme.palette,
+    breakpoints = _ref19$theme.breakpoints;
+  return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    font-size: 18px;\n    line-height: 20px;\n    color: ", ";\n\n    ", " {\n      padding: 16px 16px 14px 16px;\n    }\n  "])), palette[PC.TextPrimary], breakpoints.down('md'));
+});
+var CloseButton = styled(SfxCrossButton)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 12px;\n  height: 40px;\n  width: 40px;\n  padding: 0;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_ref20) {
+  var palette = _ref20.theme.palette;
+  return palette[PC.BackgroundHover];
+}, function (_ref21) {
+  var palette = _ref21.theme.palette;
+  return palette[PC.BackgroundActive];
+});
+var InfoWrapper = styled.div(function (_ref22) {
+  var hasAcquirers = _ref22.hasAcquirers,
+    _ref22$theme = _ref22.theme,
+    palette = _ref22$theme.palette,
+    breakpoints = _ref22$theme.breakpoints;
+  return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    text-align: center;\n    width: 100%;\n    font-size: 14px;\n    line-height: 20px;\n    color: ", ";\n    margin-top: ", ";\n\n    ", " {\n      font-size: 16px;\n      line-height: 22px;\n      margin-top: ", "\n    }\n\n    ", "\n  "])), palette[PC.TextSecondary], hasAcquirers ? '16px' : 0, breakpoints.up('xxl'), hasAcquirers ? '28px' : 0, hasAcquirers && css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      ", " & {\n        margin-top: 12px;\n      }\n    "])), breakpoints.classes.md));
+});
+var Styled = {
+  AddFilesPanelWrapper: AddFilesPanelWrapper,
+  AcquirersMainBody: AcquirersMainBody,
+  AcquirersWrapper: AcquirersWrapper,
+  AcquirersList: AcquirersList,
+  Acquirer: Acquirer,
+  AcquirerButtons: AcquirerButtons,
+  AcquirerButton: AcquirerButton,
+  DropFilesTitle: DropFilesTitle,
+  BrowseButton: BrowseButton,
+  DropFilesImportLabel: DropFilesImportLabel,
+  ImportLabel: ImportLabel,
+  PowerdByLabel: PowerdByLabel,
+  FilerobotLabel: FilerobotLabel,
+  AcquirerButtonsLabel: AcquirerButtonsLabel,
+  DragDropNote: DragDropNote,
+  ExplorerTopBar: ExplorerTopBar,
+  ExplorerTopBarTitle: ExplorerTopBarTitle,
+  CloseButton: CloseButton,
+  InfoWrapper: InfoWrapper
+};
+export default Styled;

package/lib/components/AddFilesPanel/index.js

@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SlideTransition } from '@scaleflex/widget-common';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { getResumableUploadFastestServer } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { UPLOAD_CONNECTOR_SERVER } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../hooks';
+import AddFiles from './AddFiles';
+import Styled from './AddFiles.styled';
+import { selectIsUploadsPanelOpened, selectShowAddFilesPanel, showAddFilesPanelUpdated } from '../../slices/panels.slice';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var AddFilesPanel = function AddFilesPanel(_ref) {
+  var zIndex = _ref.zIndex;
+  var dispatch = useDispatch();
+  var _useCore = useCore(),
+    autoProceed = _useCore.opts.autoProceed;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    requestCloseModal = _useExplorer.requestCloseModal,
+    _useExplorer$opts = _useExplorer.opts,
+    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts;
+  var ExploreViewComponent = opts.ExploreViewComponent,
+    showDragDropPanel = opts.showDragDropPanel;
+  var showAddFilesPanel = useSelector(selectShowAddFilesPanel);
+  var showUploadsPanel = useSelector(function (state) {
+    return !autoProceed && selectIsUploadsPanelOpened(state);
+  });
+  var shouldShowAddFilesPanel = showAddFilesPanel || !ExploreViewComponent && !showUploadsPanel;
+  var closeModalHandler = function closeModalHandler() {
+    if (!ExploreViewComponent && !showUploadsPanel) {
+      requestCloseModal();
+      return;
+    }
+    dispatch(showAddFilesPanelUpdated(false));
+  };
+  useEffect(function () {
+    if (showAddFilesPanel && !sessionStorage.getItem(UPLOAD_CONNECTOR_SERVER)) {
+      dispatch(getResumableUploadFastestServer());
+    }
+  }, [showAddFilesPanel]);
+  return /*#__PURE__*/_jsx(SlideTransition, {
+    zIndex: zIndex,
+    handleClose: closeModalHandler,
+    noDragDropEvents: false,
+    children: shouldShowAddFilesPanel && /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsxs(Styled.AddFilesPanelWrapper, {
+        showDragDropPanel: showDragDropPanel,
+        children: [(!showDragDropPanel || showUploadsPanel) && /*#__PURE__*/_jsxs(Styled.ExplorerTopBar, {
+          children: [/*#__PURE__*/_jsx(Styled.ExplorerTopBarTitle, {
+            children: i18n('topBarUploadLabel')
+          }), /*#__PURE__*/_jsx(Styled.CloseButton, {
+            onClick: closeModalHandler
+          })]
+        }), /*#__PURE__*/_jsx(AddFiles, {})]
+      })
+    })
+  });
+};
+export default AddFilesPanel;

package/lib/components/AiSwitcher/AiSwitcher.constants.js

@@ -0,0 +1 @@
+export var AI_SEARCH_SUPPORTED_LANGS = ['ar', 'bg', 'cs', 'da', 'de', 'el', 'en', 'es', 'et', 'fi', 'fr', 'hu', 'id', 'it', 'ja', 'ko', 'lt', 'lv', 'nb', 'nl', 'pl', 'pt', 'ro', 'ru', 'sk', 'sl', 'sv', 'tr', 'uk', 'zh'];

package/lib/components/AiSwitcher/AiSwitcher.styled.js

@@ -0,0 +1,24 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+import { Switcher } from '@scaleflex/ui/core';
+import { Shine as SfxShine } from '@scaleflex/icons';
+var AiSwitcher = styled(Switcher)(function (_ref) {
+  var theme = _ref.theme,
+    checked = _ref.checked,
+    disabled = _ref.disabled;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 6px;\n  width: 59px;\n  height: 24px;\n\n  .SfxSwitcher-root {\n    width: 59px;\n    height: 24px;\n  }\n\n  .SfxSwitcher-switcher {\n    width: 59px;\n    height: 24px;\n    background: none;\n    border: 1px solid ", ";\n\n    &::before {\n      left: ", ";\n      width: 18px;\n      height: 18px;\n    }\n\n    &::after {\n      left: ", ";\n    }\n  }\n\n  &:hover .SfxSwitcher-switcher {\n    ", "\n  }\n\n  .SfxSwitcher-Input {\n    width: 59px;\n    height: 24px;\n  }\n\n  .SfxSwitcher-content-Wrapper {\n    max-width: 30px;\n    ", "\n    margin-left: 1px;\n  }\n\n  .SfxSwitcher-Input:checked + .SfxSwitcher-switcher::before {\n    background: ", ";\n  }\n\n  .SfxSwitcher-Input:checked + .SfxSwitcher-switcher::after {\n    background: ", ";\n  }\n\n  .SfxSwitcher-Input:checked + .SfxSwitcher-switcher {\n    background: none;\n  }\n"])), checked ? theme.palette[PC.AccentStateless_0_4_Opacity] : theme.palette[PC.BorderPrimaryStateless], checked && '18px', checked ? '21px' : '5px', !disabled && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-color: ", ";\n    "])), checked ? theme.palette[PC.Accent_0_7_Opacity] : theme.palette[PC.BordersButton]), disabled && "color: ".concat(theme.palette[PC.TextPlaceholder], ";"), theme.palette[PC.AccentStateless], theme.palette[PC.IconsInvert]);
+});
+var Shine = styled(SfxShine)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme,
+    checked = _ref2.checked;
+  return checked ? theme.palette[PC.Warning] : theme.palette[PC.LinkMuted];
+});
+var AiWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  font-weight: 500;\n"])));
+var Styled = {
+  Shine: Shine,
+  AiSwitcher: AiSwitcher,
+  AiWrapper: AiWrapper
+};
+export default Styled;

package/lib/components/AiSwitcher/index.js

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { PERMISSION_MODELS } from '@scaleflex/widget-utils/lib/constants';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { selectIsAiSearch, selectIsSimilarSearchActive, toggleAiSearch } from '../../slices/search.slice';
+import Styled from './AiSwitcher.styled';
+import { selectPermissionModel } from '../../slices/common.slice';
+import { useExplorer } from '../../hooks';
+import { selectIsAssetsView } from '../../slices/views.slice';
+import { AI_SEARCH_SUPPORTED_LANGS } from './AiSwitcher.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var AiSwitcher = function AiSwitcher(_ref) {
+  var searchInput = _ref.searchInput,
+    sendSearch = _ref.sendSearch,
+    clearSearch = _ref.clearSearch;
+  var dispatch = useDispatch();
+  var _useCore = useCore(),
+    _useCore$opts = _useCore.opts,
+    _useCore$opts2 = _useCore$opts === void 0 ? {} : _useCore$opts,
+    language = _useCore$opts2.language;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    i18nArray = _useExplorer.i18nArray,
+    opts = _useExplorer.opts;
+  var enableAIEmbed = opts.enableAIEmbed;
+  var isAiSearch = useSelector(selectIsAiSearch);
+  var permissionModel = useSelector(selectPermissionModel);
+  var isAssetsView = useSelector(selectIsAssetsView);
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var showAiSwitcher = enableAIEmbed && permissionModel === PERMISSION_MODELS.PT_ADVANCED && isAssetsView && !isSimilarSearchActive;
+  var isSupportedAiLanguage = useMemo(function () {
+    return showAiSwitcher && language && AI_SEARCH_SUPPORTED_LANGS.includes(language === null || language === void 0 ? void 0 : language.toLowerCase());
+  }, [showAiSwitcher, language]);
+  if (!showAiSwitcher) {
+    return;
+  }
+  var toggleAiSwitcher = function toggleAiSwitcher() {
+    if (!isSupportedAiLanguage && !isAiSearch) {
+      return;
+    }
+    dispatch(toggleAiSearch());
+    if (!isAiSearch && searchInput !== null && searchInput !== void 0 && searchInput.value) {
+      sendSearch(searchInput === null || searchInput === void 0 ? void 0 : searchInput.value);
+    } else if (isAiSearch) {
+      clearSearch({
+        clearFilters: true
+      });
+    }
+  };
+  var renderTooltipTitle = function renderTooltipTitle() {
+    return isSupportedAiLanguage ? /*#__PURE__*/_jsxs("div", {
+      children: [i18n('explorerAiSearchSwitcherTooltipTitle'), /*#__PURE__*/_jsx("br", {}), i18nArray('explorerAiSearchSwitcherTooltipLangHint', {
+        language: /*#__PURE__*/_jsx("strong", {
+          children: i18n(language) || language
+        }, "ai-search-language")
+      })]
+    }) : i18n('explorerAiSearchSwitcherTooltipNotSupportedLang');
+  };
+  return /*#__PURE__*/_jsx(TooltipV2, {
+    arrow: true,
+    position: "top",
+    size: "lg",
+    title: renderTooltipTitle(),
+    children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Styled.AiSwitcher, {
+        size: "md",
+        onChange: toggleAiSwitcher,
+        checked: isAiSearch,
+        disabled: !isSupportedAiLanguage && !isAiSearch,
+        children: /*#__PURE__*/_jsxs(Styled.AiWrapper, {
+          children: ["AI ", /*#__PURE__*/_jsx(Styled.Shine, {
+            checked: isAiSearch,
+            size: 10
+          })]
+        })
+      })
+    })
+  });
+};
+export default AiSwitcher;