@scaleflex/widget-progress-panel 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.5.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.4.0...v4.5.0) (2025-10-08)
+
+**Note:** Version bump only for package @scaleflex/widget-progress-panel
+
+
+
+
+
 # [4.4.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.4.0) (2025-10-07)
 
 **Note:** Version bump only for package @scaleflex/widget-progress-panel

package/lib/components/Activity.js

@@ -0,0 +1,84 @@
+import { Divider } from '@scaleflex/ui/core';
+import { PROGRESS_PANEL_STATUS } from '@scaleflex/widget-utils/lib/constants';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { isProgressPanelActive } from '../progressPanel.slice';
+import ActivityActions from './ActivityActions';
+import ActivityStatus from './ActivityStatus';
+import ProgressPanelFileIcon from './common/ProgressPanelFileIcon';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Activity = function Activity(_ref) {
+  var _activity$progress, _activity$progress2, _statusData$status, _statusData$PROGRESS_, _statusData$PROGRESS_2, _statusData$status2;
+  var activity = _ref.activity,
+    isLastItem = _ref.isLastItem,
+    i18n = _ref.i18n,
+    role = _ref.role;
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var id = activity.id,
+    _activity$statusData = activity.statusData,
+    statusData = _activity$statusData === void 0 ? {} : _activity$statusData,
+    name = activity.name,
+    _activity$hideRetryBu = activity.hideRetryButton,
+    hideRetryButton = _activity$hideRetryBu === void 0 ? false : _activity$hideRetryBu;
+  var percentage = activity === null || activity === void 0 ? void 0 : (_activity$progress = activity.progress) === null || _activity$progress === void 0 ? void 0 : _activity$progress.percentage;
+  var status = activity === null || activity === void 0 ? void 0 : (_activity$progress2 = activity.progress) === null || _activity$progress2 === void 0 ? void 0 : _activity$progress2.status;
+  var isStatusComplete = status === PROGRESS_PANEL_STATUS.COMPLETE;
+  var actionButtons = (_statusData$status = statusData[status]) === null || _statusData$status === void 0 ? void 0 : _statusData$status.actionButtons;
+  var completeActionButton = (_statusData$PROGRESS_ = statusData[PROGRESS_PANEL_STATUS.COMPLETE]) === null || _statusData$PROGRESS_ === void 0 ? void 0 : (_statusData$PROGRESS_2 = _statusData$PROGRESS_.actionButtons) === null || _statusData$PROGRESS_2 === void 0 ? void 0 : _statusData$PROGRESS_2[0];
+  var hasCompleteActionButtons = isStatusComplete && !!completeActionButton;
+  var almostCompleted = status === PROGRESS_PANEL_STATUS.PROGRESSING && percentage === 100;
+  var isErrorStatus = status === PROGRESS_PANEL_STATUS.ERROR;
+  var hideActivityRetryButton = isErrorStatus && hideRetryButton;
+  var handleAction = function handleAction(event, activityActionType) {
+    event.stopPropagation();
+    emit('activity-action', {
+      id: id,
+      activity: activity,
+      activityActionType: activityActionType
+    });
+  };
+  var activityStatusLabel = i18n((_statusData$status2 = statusData[status]) === null || _statusData$status2 === void 0 ? void 0 : _statusData$status2.labelI18nKey);
+  var activityTitle = name || activityStatusLabel || status;
+  return /*#__PURE__*/_jsxs(Styled.ProgressPanelActivityContainerNew, {
+    showActivityButton: !hideActivityRetryButton,
+    disableAction: isStatusComplete && !actionButtons || almostCompleted,
+    showBackgroundHover: hasCompleteActionButtons,
+    onClick: hasCompleteActionButtons ? function (event) {
+      return handleAction(event, completeActionButton.type);
+    } : undefined,
+    role: role,
+    children: [/*#__PURE__*/_jsx(Styled.ProgressPanelActivityWrapper, {
+      children: /*#__PURE__*/_jsxs(Styled.ProgressPanelActivity, {
+        children: [/*#__PURE__*/_jsxs(Styled.ActivityInfo, {
+          $opacity: isProgressPanelActive(status) && 0.7,
+          "aria-label": activityTitle,
+          title: activityTitle,
+          children: [/*#__PURE__*/_jsx(ProgressPanelFileIcon, {
+            activity: activity
+          }), /*#__PURE__*/_jsxs(Styled.ActivityInfoMain, {
+            children: [/*#__PURE__*/_jsx(Styled.ActivityFileState, {
+              children: activityStatusLabel
+            }), name && /*#__PURE__*/_jsx(Styled.ActivityFileName, {
+              children: name
+            })]
+          })]
+        }), !almostCompleted && /*#__PURE__*/_jsx(ActivityActions, {
+          hideRetryButton: hideRetryButton,
+          id: id,
+          status: status,
+          i18n: i18n,
+          actionButtons: actionButtons,
+          handleAction: handleAction
+        }), /*#__PURE__*/_jsx(ActivityStatus, {
+          status: status,
+          statusTitle: activityStatusLabel,
+          percentage: percentage,
+          almostCompleted: almostCompleted,
+          i18n: i18n
+        })]
+      })
+    }), !isLastItem && /*#__PURE__*/_jsx(Divider, {})]
+  });
+};
+export default Activity;

package/lib/components/ActivityActions.js

@@ -0,0 +1,63 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { PROGRESS_PANEL_STATUS } from '@scaleflex/widget-utils/lib/constants';
+import CancelButton from './CancelButton';
+import { ACTIVITY_BUTTON_ICONS } from '../ProgressPanel.constants';
+import RetryButton from './RetryButton';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ActivityActions = function ActivityActions(_ref) {
+  var _activityActions$stat;
+  var id = _ref.id,
+    status = _ref.status,
+    actionButtons = _ref.actionButtons,
+    i18n = _ref.i18n,
+    handleAction = _ref.handleAction,
+    hideRetryButton = _ref.hideRetryButton;
+  var activityActions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PROGRESS_PANEL_STATUS.PREPARING, function () {
+    return /*#__PURE__*/_jsx(CancelButton, {
+      id: id,
+      i18n: i18n
+    });
+  }), PROGRESS_PANEL_STATUS.PROGRESSING, function () {
+    return /*#__PURE__*/_jsx(CancelButton, {
+      id: id,
+      i18n: i18n
+    });
+  }), PROGRESS_PANEL_STATUS.PAUSED, function () {
+    return /*#__PURE__*/_jsx(CancelButton, {
+      id: id,
+      i18n: i18n
+    });
+  }), PROGRESS_PANEL_STATUS.ERROR, function () {
+    return !hideRetryButton && /*#__PURE__*/_jsx(RetryButton, {
+      id: id,
+      i18n: i18n
+    });
+  });
+  return /*#__PURE__*/_jsxs(Styled.ActionButtonsWrapper, {
+    children: [(_activityActions$stat = activityActions[status]) === null || _activityActions$stat === void 0 ? void 0 : _activityActions$stat.call(activityActions), actionButtons && actionButtons.map(function (button) {
+      var ButtonIcon = ACTIVITY_BUTTON_ICONS[button.icon];
+      return ButtonIcon && /*#__PURE__*/_jsx(Styled.ActionButton, {
+        size: "sm",
+        color: "primary",
+        onClick: function onClick(event) {
+          return handleAction(event, button.type);
+        },
+        "aria-label": i18n(button.titleI18nKey),
+        title: i18n(button.titleI18nKey),
+        isResumeButton: button.type === 'play',
+        children: function children(iconProps) {
+          return /*#__PURE__*/_jsx(ButtonIcon, _objectSpread(_objectSpread({}, iconProps), {}, {
+            size: 12
+          }));
+        }
+      }, i18n(button.titleI18nKey));
+    })]
+  });
+};
+export default ActivityActions;

package/lib/components/ActivityCircularProgress/ActivityCircularProgress.styled.js

@@ -0,0 +1,39 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css, keyframes } from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+var circulate = keyframes({
+  '0%': {
+    // let the progress start at the top of the ring
+    transform: 'rotate(-90deg)'
+  },
+  '100%': {
+    transform: 'rotate(270deg)'
+  }
+});
+var CircularProgressRoot = styled.span(function (_ref) {
+  var palette = _ref.theme.palette,
+    determinate = _ref.determinate;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 22px;\n  height: 22px;\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), palette[PC.Success], determinate && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: rotate(-90deg);\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  "]))), !determinate && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["animation: 0.5s linear 0s infinite normal none running ", ";"])), circulate));
+});
+var CircularProgressSvg = styled.svg(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: block\n"])));
+var CircularProgressTrack = styled.circle(function (_ref2) {
+  var palette = _ref2.theme.palette,
+    size = _ref2.size,
+    thickness = _ref2.thickness;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  cx:  ", ";\n  cy:   ", ";\n  r:  ", ";\n  fill: transparent;\n  stroke: ", ";\n  stroke-width: ", " ;\n"])), size, size, (size - thickness) / 2, palette[PC.BackgroundGrey], thickness);
+});
+var CircularProgress = styled.circle(function (_ref3) {
+  var size = _ref3.size,
+    thickness = _ref3.thickness,
+    strokeDasharray = _ref3.strokeDasharray,
+    strokeDashoffset = _ref3.strokeDashoffset;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  cx:   ", ";\n  cy:   ", ";\n  r:  ", ";\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray:  ", ";\n  stroke-dashoffset: ", ";\n  stroke-width: ", " ;\n  transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n"])), size, size, (size - thickness) / 2, strokeDasharray, strokeDashoffset, thickness);
+});
+var Styled = {
+  CircularProgressRoot: CircularProgressRoot,
+  CircularProgress: CircularProgress,
+  CircularProgressTrack: CircularProgressTrack,
+  CircularProgressSvg: CircularProgressSvg
+};
+export default Styled;

package/lib/components/ActivityCircularProgress/index.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import Styled from './ActivityCircularProgress.styled';
+import StyledProgressPanel from '../../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SIZE = 44;
+var ActivityCircularProgress = function ActivityCircularProgress(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 6 : _ref$thickness,
+    determinate = _ref.determinate,
+    statusTitle = _ref.statusTitle;
+  var circumference = useMemo(function () {
+    return 2 * Math.PI * ((SIZE - thickness) / 2);
+  }, [thickness]);
+  return /*#__PURE__*/_jsx(StyledProgressPanel.ActivityStatus, {
+    "aria-label": statusTitle,
+    title: statusTitle,
+    children: /*#__PURE__*/_jsx(Styled.CircularProgressRoot, {
+      "aria-valuenow": value,
+      determinate: determinate,
+      children: /*#__PURE__*/_jsxs(Styled.CircularProgressSvg, {
+        viewBox: "22 22 44 44",
+        children: [/*#__PURE__*/_jsx(Styled.CircularProgressTrack, {
+          size: SIZE,
+          thickness: thickness
+        }), /*#__PURE__*/_jsx(Styled.CircularProgress, {
+          size: SIZE,
+          thickness: thickness,
+          strokeDasharray: circumference.toFixed(3),
+          strokeDashoffset: ((100 - value) / 100 * circumference).toFixed(3)
+        })]
+      })
+    })
+  });
+};
+export default ActivityCircularProgress;

package/lib/components/ActivityStatus.js

@@ -0,0 +1,51 @@
+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 { useTheme } from '@scaleflex/ui/theme/hooks';
+import { Success, WarningRound } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+import { PROGRESS_PANEL_STATUS } from '@scaleflex/widget-utils/lib/constants';
+import Styled from '../ProgressPanel.styled';
+import ActivityCircularProgress from './ActivityCircularProgress';
+import { jsx as _jsx } from "react/jsx-runtime";
+var activityStatusToComponent = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PROGRESS_PANEL_STATUS.PREPARING, ActivityCircularProgress), PROGRESS_PANEL_STATUS.PROGRESSING, ActivityCircularProgress), PROGRESS_PANEL_STATUS.PAUSED, ActivityCircularProgress), PROGRESS_PANEL_STATUS.DELAYED, function (_ref) {
+  var theme = _ref.theme;
+  return /*#__PURE__*/_jsx(Success, {
+    size: 22,
+    color: theme.palette[PC.Success]
+  });
+}), PROGRESS_PANEL_STATUS.COMPLETE, function (_ref2) {
+  var theme = _ref2.theme;
+  return /*#__PURE__*/_jsx(Success, {
+    size: 22,
+    color: theme.palette[PC.Success]
+  });
+}), PROGRESS_PANEL_STATUS.ERROR, function (_ref3) {
+  var theme = _ref3.theme;
+  return /*#__PURE__*/_jsx(WarningRound, {
+    size: 22,
+    color: theme.palette[PC.Error]
+  });
+});
+var ActivityStatus = function ActivityStatus(_ref4) {
+  var status = _ref4.status,
+    statusTitle = _ref4.statusTitle,
+    percentage = _ref4.percentage,
+    almostCompleted = _ref4.almostCompleted,
+    i18n = _ref4.i18n;
+  var theme = useTheme();
+  var indeterminate = status === PROGRESS_PANEL_STATUS.PREPARING || almostCompleted;
+  var title = statusTitle || status;
+  var ActivityStatusComp = activityStatusToComponent[status];
+  return /*#__PURE__*/_jsx(Styled.ActivityStatus, {
+    title: title,
+    children: ActivityStatusComp && /*#__PURE__*/_jsx(ActivityStatusComp, {
+      theme: theme,
+      value: indeterminate ? 25 : percentage,
+      determinate: !indeterminate,
+      statusTitle: almostCompleted ? i18n('progressPanelAssetProcessingTitle') : title
+    })
+  });
+};
+export default ActivityStatus;

package/lib/components/CancelButton.js

@@ -0,0 +1,34 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Cross } from '@scaleflex/icons';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CancelButton = function CancelButton(_ref) {
+  var id = _ref.id,
+    i18n = _ref.i18n;
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var handleCancel = function handleCancel() {
+    emit('activity-cancel', {
+      id: id
+    });
+  };
+  return /*#__PURE__*/_jsx(Styled.ActionButton, {
+    size: "sm",
+    color: "primary",
+    onClick: handleCancel,
+    "aria-label": i18n('progressPanelProgressActionTitle'),
+    title: i18n('progressPanelProgressActionTitle'),
+    children: function children(iconProps) {
+      return /*#__PURE__*/_jsx(Cross, _objectSpread(_objectSpread({}, iconProps), {}, {
+        size: 12
+      }));
+    }
+  });
+};
+export default CancelButton;

package/lib/components/ProgressPanel.js

@@ -0,0 +1,71 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { VirtualList } from '@scaleflex/widget-common';
+import { EVENTS } from '@scaleflex/widget-utils/lib/constants';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { selectProgressPanelActivitiesIds, selectIsProgressPanelMinimized, selectShowProgressPanel, selectProgressPanelDelayedActivitiesIds } from '../progressPanel.slice';
+import ProgressPanelItem from './ProgressPanelItem';
+import ProgressPanelHeader from './ProgressPanelHeader';
+import Styled from '../ProgressPanel.styled';
+import UploadDelayedNotification from './UploadDelayedNotification';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ProgressPanel = function ProgressPanel(_ref) {
+  var i18n = _ref.i18n,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 9999 : _ref$zIndex,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'fixed' : _ref$position;
+  var _useCore = useCore(),
+    on = _useCore.on,
+    off = _useCore.off;
+  var progressPanelActivitiesIds = useSelector(selectProgressPanelActivitiesIds);
+  var isPanelMinimized = useSelector(selectIsProgressPanelMinimized);
+  var showProgressPanel = useSelector(selectShowProgressPanel);
+  var progressPanelDelayedActivitiesIds = useSelector(selectProgressPanelDelayedActivitiesIds);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var handleOnStyleChange = function handleOnStyleChange(newStyle) {
+    setStyle(newStyle);
+  };
+  useEffect(function () {
+    on(EVENTS.CHANGE_PROGRESS_PANEL_STYLE, handleOnStyleChange);
+    return function () {
+      off(EVENTS.CHANGE_PROGRESS_PANEL_STYLE, handleOnStyleChange);
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs(Styled.ProgressPanelContainer, {
+    className: "filerobot-progressPanel",
+    zIndex: zIndex,
+    show: showProgressPanel,
+    isMinimized: isPanelMinimized,
+    position: position,
+    style: style,
+    role: "dialog",
+    "aria-label": "Progress panel",
+    children: [/*#__PURE__*/_jsx(ProgressPanelHeader, {
+      i18n: i18n
+    }), progressPanelDelayedActivitiesIds.length > 0 && /*#__PURE__*/_jsx(UploadDelayedNotification, {
+      i18n: i18n
+    }), !isPanelMinimized && /*#__PURE__*/_jsx(Styled.ProgressPanelList, {
+      role: "list",
+      children: /*#__PURE__*/_jsx(VirtualList, {
+        items: progressPanelActivitiesIds,
+        injectedItemPropName: "activityId",
+        children: /*#__PURE__*/_jsx(ProgressPanelItem, {
+          itemsCount: progressPanelActivitiesIds.length,
+          i18n: i18n,
+          role: "listitem"
+        })
+      })
+    })]
+  });
+};
+export default ProgressPanel;

package/lib/components/ProgressPanelHeader.js

@@ -0,0 +1,78 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useSelector, useDispatch } from 'react-redux';
+import throttle from 'lodash.throttle';
+import { Cross } from '@scaleflex/icons';
+import prettyETA from '@scaleflex/widget-utils/lib/prettyETA';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { selectProgressPanelInProgressActivitiesIds, selectProgressPanelCompletedActivitiesIds, selectProgressPanelTotalEta, selectIsProgressPanelMinimized, progressPanelMinimized, resetPanel } from '../progressPanel.slice';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ProgressPanelHeader = function ProgressPanelHeader(_ref) {
+  var i18n = _ref.i18n;
+  var dispatch = useDispatch();
+  var _useCore = useCore(),
+    cancelUploads = _useCore.cancelUploads,
+    emit = _useCore.emit;
+  var isPanelMinimized = useSelector(selectIsProgressPanelMinimized);
+  var inProgressActivitiesIds = useSelector(selectProgressPanelInProgressActivitiesIds);
+  var completedActivitiesIds = useSelector(selectProgressPanelCompletedActivitiesIds);
+  var totalEta = useSelector(selectProgressPanelTotalEta);
+  var togglePanel = function togglePanel() {
+    dispatch(progressPanelMinimized(!isPanelMinimized));
+    emit('progressPanel-minimize', !isPanelMinimized);
+  };
+  var closeProgressPanel = function closeProgressPanel() {
+    dispatch(resetPanel());
+    cancelUploads();
+  };
+  var ProgressPanelEta = throttle(function () {
+    return /*#__PURE__*/_jsx(Styled.ProgressPanelEta, {
+      children: i18n('progressPanelEtaLeftText', {
+        time: prettyETA(totalEta)
+      })
+    });
+  }, 500, {
+    leading: true,
+    trailing: true
+  });
+  var isPanelActive = inProgressActivitiesIds.length;
+  var panelItems = isPanelActive ? inProgressActivitiesIds : completedActivitiesIds;
+  return /*#__PURE__*/_jsxs(Styled.ProgressPanelHeader, {
+    isMinimized: isPanelMinimized,
+    children: [/*#__PURE__*/_jsxs(Styled.ProgressPanelInfo, {
+      children: [/*#__PURE__*/_jsx(Styled.ProgressPanelState, {
+        hasTotalEta: !!totalEta,
+        children: "".concat(isPanelActive ? i18n('progressPanelProcessingHeaderLabel') : i18n('progressPanelProcessedHeaderLabel'), "\n          (").concat(panelItems.length, " ").concat(i18n('progressPanelHeaderItemsText', {
+          smart_count: panelItems.length
+        }), ")")
+      }), !!totalEta && /*#__PURE__*/_jsx(ProgressPanelEta, {})]
+    }), /*#__PURE__*/_jsxs(Styled.ProgressPanelActions, {
+      children: [/*#__PURE__*/_jsx(Styled.ProgressPanelIconButton, {
+        onClick: togglePanel,
+        size: "xs",
+        color: "basic",
+        children: function children(iconProps) {
+          return /*#__PURE__*/_jsx(Styled.Arrow, _objectSpread(_objectSpread({}, iconProps), {}, {
+            $isMinimized: isPanelMinimized,
+            size: 12
+          }));
+        }
+      }), !isPanelActive && /*#__PURE__*/_jsx(Styled.ProgressPanelIconButton, {
+        onClick: closeProgressPanel,
+        size: "xs",
+        color: "basic",
+        children: function children(iconProps) {
+          return /*#__PURE__*/_jsx(Cross, _objectSpread(_objectSpread({}, iconProps), {}, {
+            size: 12
+          }));
+        }
+      })]
+    })]
+  });
+};
+export default ProgressPanelHeader;

package/lib/components/ProgressPanelItem.js

@@ -0,0 +1,21 @@
+import { useSelector } from 'react-redux';
+import { selectProgressPanelActivityById } from '../progressPanel.slice';
+import Activity from './Activity';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ProgressPanelItem = function ProgressPanelItem(_ref) {
+  var activityId = _ref.activityId,
+    index = _ref.index,
+    itemsCount = _ref.itemsCount,
+    i18n = _ref.i18n,
+    role = _ref.role;
+  var activity = useSelector(function (state) {
+    return selectProgressPanelActivityById(state, activityId);
+  });
+  return /*#__PURE__*/_jsx(Activity, {
+    activity: activity,
+    isLastItem: index === itemsCount - 1,
+    i18n: i18n,
+    role: role
+  }, activity.id);
+};
+export default ProgressPanelItem;

package/lib/components/RetryButton.js

@@ -0,0 +1,36 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Reload } from '@scaleflex/icons';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var RetryButton = function RetryButton(_ref) {
+  var id = _ref.id,
+    i18n = _ref.i18n;
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var handleRetry = function handleRetry() {
+    emit('activity-retry', {
+      id: id
+    });
+  };
+  return /*#__PURE__*/_jsx(Styled.ActionButton, {
+    size: "sm",
+    color: "primary",
+    onClick: function onClick() {
+      return handleRetry();
+    },
+    "aria-label": i18n('progressPanelErrorActionTitle'),
+    title: i18n('progressPanelErrorActionTitle'),
+    children: function children(iconProps) {
+      return /*#__PURE__*/_jsx(Reload, _objectSpread(_objectSpread({}, iconProps), {}, {
+        size: 12
+      }));
+    }
+  });
+};
+export default RetryButton;

package/lib/components/UploadDelayedNotification.js

@@ -0,0 +1,26 @@
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { Info } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var UploadDelayedNotification = function UploadDelayedNotification(_ref) {
+  var _theme$palette, _theme$palette2;
+  var i18n = _ref.i18n;
+  var theme = useTheme();
+  return /*#__PURE__*/_jsx(Styled.NotificationContainer, {
+    children: /*#__PURE__*/_jsx(Styled.ProgressPanelActivityWrapper, {
+      children: /*#__PURE__*/_jsxs(Styled.NotificationWrapper, {
+        children: [/*#__PURE__*/_jsx(Info, {
+          size: 22,
+          color: theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette[PC.Info]
+        }), /*#__PURE__*/_jsx(Styled.NotificationText, {
+          children: i18n('uploadDelayedHint')
+        }), /*#__PURE__*/_jsx(Styled.LoadingIcon, {
+          size: 22,
+          color: theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2[PC.AccentPrimary]
+        })]
+      })
+    })
+  });
+};
+export default UploadDelayedNotification;

package/lib/components/common/ProgressPanelFileIcon.js

@@ -0,0 +1,40 @@
+import { FILE_TYPES_AND_ICONS } from '@scaleflex/widget-utils/lib/constants';
+import getFileExtension from '@scaleflex/widget-utils/lib/getFileExtension';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import mimeTypes from '@scaleflex/widget-utils/lib/mimeTypes';
+import Styled from '../../ProgressPanel.styled';
+import { ACTIVITY_ICONS, PROGRESS_PANEL_FILE_ICONS, PROGRESS_PANEL_FILE_ICON_BY_EXT } from '../../ProgressPanel.constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ProgressPanelFileIcon = function ProgressPanelFileIcon(_ref) {
+  var _mimeTypes$extension;
+  var file = _ref.file,
+    activity = _ref.activity;
+  var theme = useTheme();
+  var _ref2 = activity || {},
+    _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? {} : _ref2$icon;
+  var ActivityIcon = ACTIVITY_ICONS[icon.name];
+  var themePalette = theme === null || theme === void 0 ? void 0 : theme.palette;
+  if (ActivityIcon) {
+    return /*#__PURE__*/_jsx(ActivityIcon, {
+      size: 22,
+      color: themePalette[icon.color]
+    });
+  }
+  var extension = getFileExtension(file || activity);
+  var type = (_mimeTypes$extension = mimeTypes[extension]) === null || _mimeTypes$extension === void 0 ? void 0 : _mimeTypes$extension.split('/')[0];
+  var fileIcon = PROGRESS_PANEL_FILE_ICONS[type] || PROGRESS_PANEL_FILE_ICON_BY_EXT[extension] || {};
+  var Icon = fileIcon.icon;
+  var iconColor = fileIcon.iconColor;
+  if (Icon) {
+    return /*#__PURE__*/_jsx(Icon, {
+      size: 22,
+      color: themePalette[iconColor]
+    });
+  }
+  return /*#__PURE__*/_jsx(Styled.FileIcon, {
+    alt: "icon",
+    src: FILE_TYPES_AND_ICONS[extension] || FILE_TYPES_AND_ICONS._default
+  });
+};
+export default ProgressPanelFileIcon;

package/lib/utils/locallySavedActivities.js

@@ -0,0 +1,64 @@
+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); }
+var ACTIVITIES_STORAGE_KEY = 'activities';
+export var getActivitiesStorageName = function getActivitiesStorageName(token) {
+  return "FMAW_".concat(token || '', "_").concat(ACTIVITIES_STORAGE_KEY);
+};
+export var getSavedActivities = function getSavedActivities(token) {
+  var _window;
+  if (!((_window = window) !== null && _window !== void 0 && _window.localStorage) || !token) {
+    return [];
+  }
+  try {
+    var loadedActivities = JSON.parse(window.localStorage.getItem(getActivitiesStorageName(token))) || [];
+    return loadedActivities;
+  } catch (_unused) {
+    return [];
+  }
+};
+export var pushToSavedActivities = function pushToSavedActivities(token) {
+  var _window2;
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    id = _ref.id,
+    type = _ref.type,
+    name = _ref.name,
+    data = _ref.data;
+  if (!((_window2 = window) !== null && _window2 !== void 0 && _window2.localStorage) || !token || !id || !type || !data || Object.keys(data || {}).length === 0) {
+    return;
+  }
+  var loadedActivities = getSavedActivities(token).filter(function (activity) {
+    return activity.id !== id;
+  });
+  var pushedActivity = _objectSpread(_objectSpread({
+    id: id,
+    type: type
+  }, name && {
+    name: name
+  }), {}, {
+    data: data
+  });
+  loadedActivities.push(pushedActivity);
+  window.localStorage.setItem(getActivitiesStorageName(token), JSON.stringify(loadedActivities));
+  return loadedActivities;
+};
+export var removeSavedActivity = function removeSavedActivity(token, id) {
+  var _window3;
+  if (!((_window3 = window) !== null && _window3 !== void 0 && _window3.localStorage) || !token || !id) {
+    return;
+  }
+  var loadedActivities = getSavedActivities(token);
+  var newActivities = loadedActivities.filter(function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _id = _ref2.id;
+    return _id !== id;
+  });
+  if (newActivities.length === 0) {
+    window.localStorage.removeItem(getActivitiesStorageName(token));
+    return;
+  }
+  window.localStorage.setItem(getActivitiesStorageName(token), JSON.stringify(newActivities));
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scaleflex/widget-progress-panel",
   "description": "A progress panel for Scaleflex, handles upload, download, video transformation operation simultaneously",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "license": "MIT",
   "main": "lib/index.js",
   "style": "dist/style.min.css",
@@ -15,9 +15,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@scaleflex/widget-common": "^4.4.0",
-    "@scaleflex/widget-informer": "^4.4.0",
-    "@scaleflex/widget-utils": "^4.4.0",
+    "@scaleflex/widget-common": "^4.5.0",
+    "@scaleflex/widget-informer": "^4.5.0",
+    "@scaleflex/widget-utils": "^4.5.0",
     "lodash.throttle": "^4.1.1"
   },
   "devDependencies": {
@@ -29,5 +29,5 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
-  "gitHead": "04b8ec545c4f10be89f5a44eed954acf8433360c"
+  "gitHead": "df64ca68034ed6c33e123e7dfa215176aa0a1196"
 }