@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -0,0 +1,52 @@
+import { useRef } from 'react';
+import { EllipsedText } from '@scaleflex/ui/core';
+import Styled from './Breadcrumbs.styled';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var Breadcrumb = function Breadcrumb(_ref) {
+  var Icon = _ref.Icon,
+    title = _ref.title,
+    isLast = _ref.isLast,
+    isFirst = _ref.isFirst,
+    isMenuOpen = _ref.isMenuOpen,
+    activeLabel = _ref.activeLabel,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    _ref$noMinWidth = _ref.noMinWidth,
+    noMinWidth = _ref$noMinWidth === void 0 ? false : _ref$noMinWidth;
+  var titleRef = useRef();
+  var renderBreadcrumbTitle = function renderBreadcrumbTitle() {
+    if (isFirst) {
+      return title;
+    }
+    return /*#__PURE__*/_jsx(Styled.TitleWrapper, {
+      children: /*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: 1,
+        children: title
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Styled.Breadcrumb, {
+      type: "button",
+      color: "link-secondary",
+      ref: titleRef,
+      onClick: onClick,
+      isLast: isLast,
+      isRootPath: title === 'Root',
+      noTitle: !title,
+      activeLabel: activeLabel,
+      noMinWidth: noMinWidth,
+      children: [Icon && /*#__PURE__*/_jsx(Styled.IconButton, {
+        color: "primary",
+        size: "xs",
+        active: isMenuOpen,
+        children: /*#__PURE__*/_jsx(Icon, {
+          size: 12
+        })
+      }), renderBreadcrumbTitle(), activeLabel]
+    }), !isLast && /*#__PURE__*/_jsx(Styled.ArrowIcon, {
+      size: 11
+    })]
+  });
+};
+export default Breadcrumb;

package/lib/components/Breadcrumbs/Breadcrumbs.styled.js

@@ -0,0 +1,81 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { Arrow, Folder } from '@scaleflex/icons';
+import { Menu as SfxMenu, MenuItem as SfxMenuItem, IconButton as SfxIconButton } from '@scaleflex/ui/core';
+import styled, { keyframes, css } from 'styled-components';
+import { PC, FV } from '@scaleflex/widget-common';
+var popupKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; transform: scale(0) }\n  to { opacity: 1; transform: scale(1) }\n"])));
+var fadeInAnimation = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  animation: ", " 300ms ease;\n"])), popupKeyframes);
+var BreadcrumbsWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  column-gap: 6px;\n  min-width: 0;\n"])));
+var Breadcrumb = styled.div.attrs(function (_ref) {
+  var title = _ref.title;
+  return {
+    title: title
+  };
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: ", ";\n  ", ";\n  cursor: pointer;\n  transition: all 100ms ease-out;\n  overflow: hidden;\n\n  ", "\n\n  ", "\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette,
+    isLast = _ref2.isLast;
+  return palette[isLast ? PC.TextPrimary : PC.TextSecondary];
+}, function (_ref3) {
+  var typography = _ref3.theme.typography;
+  return typography.font[FV.LabelLarge];
+}, function (_ref4) {
+  var isRootPath = _ref4.isRootPath,
+    noTitle = _ref4.noTitle;
+  return (isRootPath || noTitle) && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    flex-shrink: 0;\n  "])));
+}, function (_ref5) {
+  var activeLabel = _ref5.activeLabel,
+    noMinWidth = _ref5.noMinWidth;
+  return activeLabel && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " // to make sure the active label is always visible\n  "])), !noMinWidth && 'min-width: 150px;');
+}, function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.LinkHover];
+});
+var ArrowIcon = styled(Arrow)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  color: ", ";\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.IconsSecondary];
+});
+var TitleWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: block;\n"])));
+var IconButton = styled(SfxIconButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border: 0;\n  background-color: transparent;\n  color: ", ";\n  transition: all 100ms ease-out;\n\n  ", "\n\n  &:focus-visible,\n  &:focus,\n  &:hover {\n    outline: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.IconsPrimary];
+}, function (_ref9) {
+  var active = _ref9.active,
+    palette = _ref9.theme.palette;
+  return active && "\n    background-color: ".concat(palette[PC.BackgroundActive], ";\n    color: ").concat(palette[PC.LinkActive], ";\n  ");
+}, function (_ref10) {
+  var palette = _ref10.theme.palette;
+  return palette[PC.BackgroundActive];
+}, function (_ref11) {
+  var palette = _ref11.theme.palette;
+  return palette[PC.LinkActive];
+});
+var BreadCrumbTitle = styled.div(function (_ref12) {
+  var isLast = _ref12.isLast,
+    isFirst = _ref12.isFirst,
+    palette = _ref12.theme.palette;
+  return "\n  margin: 0;\n  font-weight: 400;\n\n  ".concat(!isFirst && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  "]))), "\n\n  ").concat(!isLast && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    span {\n      color: ", ";\n    }\n  "])), palette[PC.TextSecondary]), "\n");
+});
+var Menu = styled(SfxMenu)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  min-width: 240px;\n  max-width: 600px;\n  width: 100%;\n  transform-origin: top left;\n  margin-top: 8px;\n  ", "\n"])), fadeInAnimation);
+var FolderIcon = styled(Folder)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref13) {
+  var palette = _ref13.theme.palette;
+  return palette[PC.IconsPrimary];
+});
+var MenuItem = styled(SfxMenuItem)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 9px 12px;\n  justify-content: flex-start;\n  column-gap: 10px;\n  padding-left: ", "; // 22px is the summation of folder icon width and half the space between it and label\n\n  svg {\n    flex-shrink: 0;\n  }\n"])), function (_ref14) {
+  var paddingIndex = _ref14.paddingIndex;
+  return "".concat(12 + 22 * paddingIndex, "px}");
+});
+var MenuItemLabel = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
+var Styled = {
+  BreadcrumbsWrapper: BreadcrumbsWrapper,
+  Breadcrumb: Breadcrumb,
+  ArrowIcon: ArrowIcon,
+  IconButton: IconButton,
+  BreadCrumbTitle: BreadCrumbTitle,
+  TitleWrapper: TitleWrapper,
+  Menu: Menu,
+  MenuItem: MenuItem,
+  FolderIcon: FolderIcon,
+  MenuItemLabel: MenuItemLabel
+};
+export default Styled;

package/lib/components/Breadcrumbs/BreadcrumbsSkeleton.js

@@ -0,0 +1,12 @@
+import { Skeleton } from '@scaleflex/ui/core';
+import Styled from './Breadcrumbs.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var BreadcrumbsSkeleton = function BreadcrumbsSkeleton() {
+  return /*#__PURE__*/_jsx(Styled.BreadcrumbsWrapper, {
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: 150,
+      height: 16
+    })
+  });
+};
+export default BreadcrumbsSkeleton;

package/lib/components/Breadcrumbs/index.js

@@ -0,0 +1,187 @@
+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 _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 _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState, useEffect, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { FolderTree, More } from '@scaleflex/icons';
+import { EllipsedText } from '@scaleflex/ui/core';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { VIEW_OPTIONS } from '../Views/Views.constants';
+import { useExplorer } from '../../hooks';
+import { selectActiveView, selectAllViews, selectIsFoldersView } from '../../slices/views.slice';
+import Breadcrumb from './Breadcrumb';
+import { openFolderByPath, selectIsFoldersTreeOpened, selectOpenedFolders } from '../../slices/folders.slice';
+import Styled from './Breadcrumbs.styled';
+
+// TODO: Refactor this component to be more dynamic and not rely on conditions (isView...).
+// TODO: We need to refactor some namings here and some related components to fit all the view modes not only folder
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Breadcrumbs = function Breadcrumbs() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    opts = _useExplorer.opts;
+  var hideLeftSideBar = opts.hideLeftSideBar;
+  var openedFolders = useSelector(selectOpenedFolders);
+  var activeView = useSelector(selectActiveView);
+  var isFoldersView = useSelector(selectIsFoldersView);
+  var allViews = useSelector(selectAllViews);
+  var showFoldersTree = useSelector(selectIsFoldersTreeOpened);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    foldersMenuAnchorEl = _useState2[0],
+    setFoldersMenuAnchorEl = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    newBreadcrumbs = _useState4[0],
+    setNewBreadcrumbs = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    moreFolders = _useState6[0],
+    setMoreFolders = _useState6[1];
+  var showTreeToggleIcon = !hideLeftSideBar && isFoldersView && !showFoldersTree;
+  var handleOpenFoldersMenu = function handleOpenFoldersMenu(event) {
+    return setFoldersMenuAnchorEl(event.currentTarget);
+  };
+  var moreOptions = {
+    id: 'moreFolders',
+    value: [],
+    active: 'active',
+    Icon: More,
+    onClick: function onClick(event) {
+      if (newBreadcrumbs) {
+        handleOpenFoldersMenu(event);
+      }
+    }
+  };
+  var breadcrumbs = useMemo(function () {
+    var adaptedOpenedFolders = _toConsumableArray(openedFolders);
+    var getMainItemName = function getMainItemName() {
+      return i18n(VIEW_OPTIONS[activeView].i18nKey);
+    };
+    var Icon = VIEW_OPTIONS[activeView].icon;
+    var mainItem = {
+      uuid: "view-mode-".concat(activeView),
+      name: getMainItemName(),
+      icon: function icon(props) {
+        return /*#__PURE__*/_jsx(Icon, _objectSpread({}, props));
+      }
+    };
+    if (openedFolders[0] && isFoldersView) {
+      var _Icon = VIEW_OPTIONS[activeView].icon;
+      adaptedOpenedFolders[0] = _objectSpread(_objectSpread({}, adaptedOpenedFolders[0]), {}, {
+        name: i18n('mutualizedBaseFolderTitle'),
+        icon: function icon(props) {
+          return /*#__PURE__*/_jsx(_Icon, _objectSpread({}, props));
+        }
+      });
+      return adaptedOpenedFolders;
+    }
+    return [mainItem].concat(adaptedOpenedFolders);
+  }, [openedFolders, activeView, allViews]);
+  var breadcrumbsLength = breadcrumbs.length;
+  var maxNumberOfBreadcrumbsToShow = 3;
+  var breadcrumbsFolders = breadcrumbsLength >= maxNumberOfBreadcrumbsToShow ? newBreadcrumbs : breadcrumbs;
+  var closeMenu = function closeMenu() {
+    setFoldersMenuAnchorEl(undefined);
+  };
+  useEffect(function () {
+    var _openedFolders$, _openedFolders$2;
+    var newBreadcrumbsArray = _toConsumableArray(breadcrumbs);
+    var extraBreadcrumbs = newBreadcrumbsArray.slice(1, -2);
+    var homeItemName = 'root';
+    var isDefaultBaseFolder = [(_openedFolders$ = openedFolders[0]) === null || _openedFolders$ === void 0 ? void 0 : _openedFolders$.name, (_openedFolders$2 = openedFolders[0]) === null || _openedFolders$2 === void 0 ? void 0 : _openedFolders$2.title].includes(homeItemName);
+    if (isDefaultBaseFolder) openedFolders[0] = i18n('mutualizedBaseFolderTitle');
+    var breadcrumbsList = extraBreadcrumbs.map(function (breadcrumb, index) {
+      return _objectSpread(_objectSpread({}, breadcrumb), {}, {
+        index: index,
+        content: breadcrumb.name || breadcrumb.title,
+        path: breadcrumb.path,
+        key: (breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.uuid) || (breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.path) || (breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.id),
+        id: breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.id,
+        onClick: breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.onClick
+      });
+    });
+    newBreadcrumbsArray.splice(1, extraBreadcrumbs.length);
+    if (extraBreadcrumbs.length) {
+      var _moreOptions$value;
+      newBreadcrumbsArray.splice(1, 0, moreOptions);
+      (_moreOptions$value = moreOptions.value).push.apply(_moreOptions$value, _toConsumableArray(extraBreadcrumbs));
+    }
+    setMoreFolders(breadcrumbsList);
+    setNewBreadcrumbs(newBreadcrumbsArray);
+  }, [openedFolders]);
+  var handleToggleTree = function handleToggleTree() {
+    var activeViewToggleTreeAction = VIEW_OPTIONS[activeView].toggleTreeAction;
+    if (activeViewToggleTreeAction) {
+      dispatch(activeViewToggleTreeAction());
+    }
+  };
+  var handleBreadcrumbClick = function handleBreadcrumbClick(event, breadcrumb) {
+    if (breadcrumb.onClick) {
+      return breadcrumb.onClick(event);
+    }
+    dispatch(openFolderByPath({
+      folderPath: breadcrumb.path
+    }));
+  };
+  return /*#__PURE__*/_jsxs(Styled.BreadcrumbsWrapper, {
+    onContextMenu: ignoreEvent,
+    children: [showTreeToggleIcon && /*#__PURE__*/_jsx(Styled.IconButton, {
+      color: "primary",
+      onClick: handleToggleTree,
+      children: /*#__PURE__*/_jsx(FolderTree, {
+        width: 18,
+        height: 16.5
+      })
+    }), breadcrumbsFolders.map(function (breadcrumb, i) {
+      return Object.keys(breadcrumb).length > 0 && /*#__PURE__*/_jsx(Breadcrumb, {
+        onClick: function onClick(event) {
+          return handleBreadcrumbClick(event, breadcrumb);
+        },
+        title: breadcrumb.name || breadcrumb.title,
+        isLast: i + 1 === breadcrumbsFolders.length,
+        isFirst: i === 0,
+        Icon: breadcrumb.Icon,
+        isMenuOpen: Boolean(foldersMenuAnchorEl)
+      }, breadcrumb.uuid || breadcrumb.id || breadcrumb.path || breadcrumb.name || breadcrumb.title);
+    }), /*#__PURE__*/_jsx(Styled.Menu, {
+      anchorEl: foldersMenuAnchorEl,
+      open: Boolean(foldersMenuAnchorEl),
+      onClose: closeMenu,
+      onClick: closeMenu,
+      hideScroll: false,
+      position: "bottom-start",
+      children: moreFolders.map(function (folder, index) {
+        return /*#__PURE__*/_jsxs(Styled.MenuItem, {
+          paddingIndex: index,
+          onClick: function onClick(event) {
+            return handleBreadcrumbClick(event, folder);
+          },
+          children: [/*#__PURE__*/_jsx(Styled.FolderIcon, {
+            size: 14
+          }), /*#__PURE__*/_jsx(Styled.MenuItemLabel, {
+            children: /*#__PURE__*/_jsx(EllipsedText, {
+              maxLinesCount: 1,
+              children: folder.content
+            })
+          })]
+        }, folder.key);
+      })
+    })]
+  });
+};
+export default Breadcrumbs;

package/lib/components/BulkEditPanel/BulkEdit.js

@@ -0,0 +1,330 @@
+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 _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 _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 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 { useMemo, useState, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { CrossOutline, Menu } from '@scaleflex/icons';
+import { BULK_EDIT_GENERAL_IDS, BULK_EDIT_METADATA_ID, BULK_EDIT_OPTIONS } from '@scaleflex/widget-utils/lib/constants';
+import getFileCustomMetadataGroup from '@scaleflex/widget-utils/lib/metadata/getFileCustomMetadataGroups';
+import getRequiredMetadataFields from '@scaleflex/widget-utils/lib/metadata/getRequiredMetadataFields';
+import { getMetadataEmptyAssets } from '@scaleflex/widget-utils/lib/metadata/getMetadataEmptyAssets';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { VirtualListDataContext } from '@scaleflex/widget-core/lib/Providers';
+import { useExplorer } from '../../hooks';
+import Sidebar from './components/Sidebar';
+import MainContent from './components/MainContent/MainContent';
+import { generateModalTitleI18nKey, getDefaultSidebarTab } from './BulkEditPanel.utils';
+import { CONFIRMATION_MODAL_DEFAULT_STATE, TAGS_DEFAULT_STATE, TEXT_DEFAULT_STATE } from './components/Tabs/tabs.constants';
+import ConfirmationModal from './components/ConfirmationModal/ConfirmationModal';
+import { generateTabI18nKey } from './components/Tabs/tabs.utils';
+import BulkEditFooter from './components/BulkEditFooter';
+import { selectMetadataFieldByKey, selectMetadataForceFillingOnUpload, selectMetadataModel } from '../../slices/metadata.slice';
+import { bulkEditPanelOpened, selectIsUploadsPanelOpened } from '../../slices/panels.slice';
+import { selectCurrentFilesByIdsOrUuids } from '../../slices/files.slice';
+import Styled from './BulkEditPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BulkEdit = function BulkEdit(_ref) {
+  var assetsIdsOrUuids = _ref.assetsIdsOrUuids;
+  var dispatch = useDispatch();
+  var _useCore = useCore(),
+    upload = _useCore.upload;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    info = _useExplorer.info,
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    defaultFieldKeyOfBulkEditPanel = _useExplorer$opts2.defaultFieldKeyOfBulkEditPanel;
+  var _useContext = useContext(VirtualListDataContext),
+    apiRef = _useContext.apiRef;
+  var metadataModel = useSelector(selectMetadataModel);
+  var forceFillingMetadataOnUpload = useSelector(selectMetadataForceFillingOnUpload);
+  // As bulk edit modal is used for both pre-uploads or new uploads and current files,
+  // we need to get assets from the right place depending on the ids/uuids
+  var assets = useSelector(function (state) {
+    return selectCurrentFilesByIdsOrUuids(state, assetsIdsOrUuids);
+  });
+  var isOnUpload = useSelector(selectIsUploadsPanelOpened);
+  var defaultConfiguredTab = useSelector(function (state) {
+    return BULK_EDIT_GENERAL_IDS[defaultFieldKeyOfBulkEditPanel === null || defaultFieldKeyOfBulkEditPanel === void 0 ? void 0 : defaultFieldKeyOfBulkEditPanel.toUpperCase()] || selectMetadataFieldByKey(state, defaultFieldKeyOfBulkEditPanel);
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSidebarOpen = _useState2[0],
+    setIsSideBarOpen = _useState2[1];
+  var _useState3 = useState(function () {
+      return getDefaultSidebarTab({
+        defaultConfiguredTab: defaultConfiguredTab,
+        isOnUpload: isOnUpload
+      });
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeSidebarItem = _useState4[0],
+    setActiveSidebarItem = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    changedMetadataFields = _useState6[0],
+    setChangedMetadataFields = _useState6[1];
+  var _useState7 = useState(TAGS_DEFAULT_STATE),
+    _useState8 = _slicedToArray(_useState7, 2),
+    tagsDetails = _useState8[0],
+    setTagsDetails = _useState8[1];
+  var _useState9 = useState(TEXT_DEFAULT_STATE),
+    _useState10 = _slicedToArray(_useState9, 2),
+    textFieldsDetails = _useState10[0],
+    setTextFieldsDetails = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showConfirmationModal = _useState12[0],
+    setShowConfirmationModal = _useState12[1];
+  var _useState13 = useState(CONFIRMATION_MODAL_DEFAULT_STATE),
+    _useState14 = _slicedToArray(_useState13, 2),
+    confirmationModalData = _useState14[0],
+    setConfirmationModalData = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isRequestedInvalidUpload = _useState16[0],
+    setIsRequestInValidUpload = _useState16[1];
+  var _useState17 = useState([]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    fetchedFiles = _useState18[0],
+    setFetchedFiles = _useState18[1];
+  var _apiRef$current = apiRef.current,
+    _apiRef$current2 = _apiRef$current === void 0 ? {} : _apiRef$current,
+    scrollToItem = _apiRef$current2.scrollToItem;
+  var modalTitleI18nKey = useMemo(function () {
+    return generateModalTitleI18nKey(isOnUpload, activeSidebarItem);
+  }, [activeSidebarItem]);
+  var changedMetadata = useMemo(function () {
+    return changedMetadataFields.filter(function (_ref2) {
+      var value = _ref2.value;
+      return value;
+    });
+  }, [changedMetadataFields]);
+  var adaptedAssets = useMemo(function () {
+    return assets.map(function (asset) {
+      return _objectSpread(_objectSpread({}, asset), {}, {
+        uuid: asset.uuid || asset.id
+      });
+    });
+  }, [assets]);
+  var fileCustomMetadataGroups = useMemo(function () {
+    return getFileCustomMetadataGroup(metadataModel);
+  }, [metadataModel]);
+  var requiredMetadataFields = useMemo(function () {
+    return getRequiredMetadataFields(fileCustomMetadataGroups);
+  }, [fileCustomMetadataGroups]);
+  var metadataEmptyAssetsValues = useMemo(function () {
+    return getMetadataEmptyAssets(requiredMetadataFields, adaptedAssets);
+  }, [adaptedAssets, requiredMetadataFields]);
+  var requiredEmptyFields = useMemo(function () {
+    return Object.keys(metadataEmptyAssetsValues).map(function (metadataKey) {
+      return requiredMetadataFields.find(function (_ref3) {
+        var key = _ref3.key;
+        return key === metadataKey;
+      }) || {};
+    });
+  }, [metadataEmptyAssetsValues, requiredMetadataFields]);
+  var isTagsChanged = !![].concat(_toConsumableArray(tagsDetails.addedTags), _toConsumableArray(tagsDetails.removedTags)).length;
+  var checkTextChange = function checkTextChange(fieldKey) {
+    var _Object$values$filter;
+    return !!((_Object$values$filter = Object.values(textFieldsDetails[fieldKey].value || {}).filter(function (i) {
+      return i;
+    })) !== null && _Object$values$filter !== void 0 && _Object$values$filter.length);
+  };
+  var isTitleChanged = checkTextChange(BULK_EDIT_GENERAL_IDS.TITLE.toLowerCase());
+  var isDescriptionChanged = checkTextChange(BULK_EDIT_GENERAL_IDS.DESCRIPTION.toLowerCase());
+  var toggleSidebar = function toggleSidebar() {
+    return setIsSideBarOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  var getChangedFieldsLabels = function getChangedFieldsLabels() {
+    var changedMetadataLabels = changedMetadata.map(function (_ref4) {
+      var key = _ref4.key;
+      return "\"".concat(key, "\"");
+    });
+    var changedFields = _toConsumableArray(changedMetadataLabels);
+    if (isTagsChanged) {
+      changedFields.unshift("\"".concat(i18n(BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS.TAGS].contentI18nStr), "\""));
+    }
+    if (isDescriptionChanged) {
+      changedFields.unshift("\"".concat(i18n(BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS.DESCRIPTION].contentI18nStr), "\""));
+    }
+    if (isTitleChanged) {
+      changedFields.unshift("\"".concat(i18n(BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS.TITLE].contentI18nStr), "\""));
+    }
+    return changedFields.join(', ');
+  };
+  var navigateToFirstRequiredEmptyField = function navigateToFirstRequiredEmptyField() {
+    var isOnRequiredEmptyField = activeSidebarItem.required && Object.keys(metadataEmptyAssetsValues).includes(activeSidebarItem.key);
+    var _requiredEmptyFields = _slicedToArray(requiredEmptyFields, 1),
+      firstRequiredMetadataField = _requiredEmptyFields[0];
+    var _ref5 = metadataEmptyAssetsValues[firstRequiredMetadataField.key] || [],
+      _ref6 = _slicedToArray(_ref5, 1),
+      firstRequiredEmptyField = _ref6[0];
+    if (firstRequiredMetadataField && !isOnRequiredEmptyField) {
+      var requiredFieldGroup = fileCustomMetadataGroups.find(function (_ref7) {
+        var _ref7$fields = _ref7.fields,
+          fields = _ref7$fields === void 0 ? [] : _ref7$fields;
+        return fields.some(function (_ref8) {
+          var uuid = _ref8.uuid;
+          return uuid === firstRequiredMetadataField.uuid;
+        });
+      }) || {};
+      setIsSideBarOpen(true);
+      setActiveSidebarItem(_objectSpread(_objectSpread({}, firstRequiredMetadataField), {}, {
+        groupUuid: requiredFieldGroup.uuid,
+        name: BULK_EDIT_METADATA_ID
+      }));
+    }
+    scrollToItem({
+      key: firstRequiredEmptyField.uuid
+    });
+  };
+  var checkAndShowConfirmModal = function checkAndShowConfirmModal(_ref9) {
+    var descI18n = _ref9.descI18n,
+      confirmCallback = _ref9.confirmCallback,
+      fallback = _ref9.fallback;
+    if (isTagsChanged || changedMetadata.length || isTitleChanged || isDescriptionChanged) {
+      setShowConfirmationModal(true);
+      setConfirmationModalData({
+        handleConfirm: confirmCallback,
+        title: i18n(generateTabI18nKey('closeConfirmationModalTitle')),
+        desc: i18n(generateTabI18nKey(descI18n), {
+          changes: getChangedFieldsLabels()
+        })
+      });
+    } else {
+      fallback();
+    }
+  };
+  var closeBulkEditPanel = function closeBulkEditPanel() {
+    dispatch(bulkEditPanelOpened(null));
+  };
+  var handleClickUpload = function handleClickUpload() {
+    setIsRequestInValidUpload(!!requiredEmptyFields.length && forceFillingMetadataOnUpload);
+    if (requiredEmptyFields.length && forceFillingMetadataOnUpload) {
+      navigateToFirstRequiredEmptyField();
+      info(i18n(generateTabI18nKey('uploadErrorMessage')), 'error', 4000);
+    } else {
+      checkAndShowConfirmModal({
+        descI18n: 'closeConfirmationModalToUploadDesc',
+        confirmCallback: function confirmCallback() {
+          closeBulkEditPanel();
+          upload();
+        },
+        fallback: closeBulkEditPanel
+      });
+    }
+  };
+  var onRequestClose = function onRequestClose() {
+    var handleConfirm = function handleConfirm() {
+      setShowConfirmationModal(false);
+      closeBulkEditPanel();
+    };
+    checkAndShowConfirmModal({
+      descI18n: 'closeConfirmationModalDescription',
+      confirmCallback: handleConfirm,
+      fallback: closeBulkEditPanel
+    });
+  };
+  var onRequestApply = function onRequestApply(assetsCount, callback) {
+    var _BULK_EDIT_OPTIONS$BU, _activeSidebarItem$ke;
+    setShowConfirmationModal(true);
+    var handleConfirm = function handleConfirm() {
+      setShowConfirmationModal(false);
+      callback();
+    };
+    var changesLabelI18n = (_BULK_EDIT_OPTIONS$BU = BULK_EDIT_OPTIONS[BULK_EDIT_GENERAL_IDS[(_activeSidebarItem$ke = activeSidebarItem.key) === null || _activeSidebarItem$ke === void 0 ? void 0 : _activeSidebarItem$ke.toUpperCase()]]) === null || _BULK_EDIT_OPTIONS$BU === void 0 ? void 0 : _BULK_EDIT_OPTIONS$BU.contentI18nStr;
+    setConfirmationModalData({
+      handleConfirm: handleConfirm,
+      title: i18n(generateTabI18nKey('applyConfirmationModalTitle')),
+      desc: i18n(generateTabI18nKey('applyConfirmationModalDescription'), {
+        changes: "\"".concat(changesLabelI18n ? i18n(changesLabelI18n) : activeSidebarItem.title || activeSidebarItem.name, "\""),
+        count: assetsCount
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(Styled.PanelWrapper, {
+    children: [/*#__PURE__*/_jsxs(Styled.PanelHeader, {
+      children: [/*#__PURE__*/_jsx(Styled.BurgerButton, {
+        onClick: toggleSidebar,
+        color: "basic",
+        children: /*#__PURE__*/_jsx(Menu, {
+          size: 18,
+          color: "warning"
+        })
+      }), /*#__PURE__*/_jsx(Styled.PanelTitle, {
+        children: i18n(modalTitleI18nKey, {
+          smart_count: adaptedAssets.length
+        })
+      }), /*#__PURE__*/_jsx(Styled.CloseButton, {
+        onClick: onRequestClose,
+        color: "basic",
+        children: /*#__PURE__*/_jsx(CrossOutline, {
+          size: 16
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Styled.PanelBody, {
+      isOpen: isSidebarOpen,
+      $isOnUpload: isOnUpload,
+      children: [/*#__PURE__*/_jsx(Sidebar, {
+        isSidebarOpen: isSidebarOpen,
+        activeSidebarItem: activeSidebarItem,
+        setActiveSidebarItem: setActiveSidebarItem,
+        setIsSideBarOpen: setIsSideBarOpen,
+        toggleSidebar: toggleSidebar,
+        tagsDetails: tagsDetails,
+        changedMetadataFields: changedMetadataFields,
+        fileCustomMetadataGroups: fileCustomMetadataGroups,
+        requiredEmptyFields: requiredEmptyFields,
+        isRequestedInvalidUpload: isRequestedInvalidUpload,
+        isOnUpload: isOnUpload,
+        textFieldsDetails: textFieldsDetails
+      }), /*#__PURE__*/_jsx(Styled.Overlay, {
+        isOpen: isSidebarOpen,
+        onClick: toggleSidebar
+      }), /*#__PURE__*/_jsx(MainContent, {
+        fileCustomMetadataGroups: fileCustomMetadataGroups,
+        activeSidebarItem: activeSidebarItem,
+        changedMetadataFields: changedMetadataFields,
+        isSidebarOpen: isSidebarOpen,
+        tagsDetails: tagsDetails,
+        assets: adaptedAssets,
+        isOnUpload: isOnUpload,
+        fetchedFiles: fetchedFiles,
+        textFieldsDetails: textFieldsDetails,
+        metadataEmptyAssetsValues: isRequestedInvalidUpload ? metadataEmptyAssetsValues : [],
+        setTagsDetails: setTagsDetails,
+        onRequestApply: onRequestApply,
+        setChangedMetadataFields: setChangedMetadataFields,
+        toggleSidebar: toggleSidebar,
+        setFetchedFiles: setFetchedFiles,
+        setTextFieldsDetails: setTextFieldsDetails,
+        noImgTransformations: true
+      })]
+    }), isOnUpload && /*#__PURE__*/_jsx(BulkEditFooter, {
+      isOnUpload: isOnUpload,
+      onRequestClose: onRequestClose,
+      handleClickUpload: handleClickUpload
+    }), showConfirmationModal && /*#__PURE__*/_jsx(ConfirmationModal, {
+      showConfirmationModal: showConfirmationModal,
+      confirmationModalData: confirmationModalData,
+      setShowConfirmationModal: setShowConfirmationModal
+    })]
+  });
+};
+export default BulkEdit;