@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
548 lines • 26.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";
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; }
import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { motion } from "framer-motion";
import HUDProgressBar from "./HUDProgressBar.js";
import HUDList from "./HUDList.js";
import HUDIcon from "./HUDIcon.js";
function resolveItemState(item) {
if (!item || _typeof(item) !== "object") {
return "pending";
}
if (item.done === true || item.state === "success") {
return "success";
}
if (item.error === true || item.state === "error") {
return "error";
}
return item.state || "pending";
}
;
function mergeProgressProps(base, overrides) {
var out = _objectSpread(_objectSpread({}, base), overrides);
var keys = ["progressPercentageLabelConfigurationSettings", "progressBarBackgroundConfigurationSettings", "progressBarConfigurationSettings"];
keys.forEach(function (k) {
out[k] = _objectSpread(_objectSpread({}, base[k] || {}), (overrides === null || overrides === void 0 ? void 0 : overrides[k]) || {});
});
return out;
}
;
function resolveStateCellStyle(state, palette) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var stateBackgroundResolverConfigurationSettings = options.stateBackgroundResolverConfigurationSettings,
listCellStateConfigurationSettings = options.listCellStateConfigurationSettings,
_options$base = options.base,
base = _options$base === void 0 ? {} : _options$base;
var computedBackground = typeof stateBackgroundResolverConfigurationSettings === "function" ? stateBackgroundResolverConfigurationSettings(state, palette) : state === "pending" ? "#ffffff" : palette.bg;
var derived = {
borderLeft: "2px solid ".concat(palette.bar),
background: computedBackground
};
var perState = listCellStateConfigurationSettings && listCellStateConfigurationSettings[state];
var override = typeof perState === "function" ? perState({
state: state,
palette: palette
}) : perState || {};
return _objectSpread(_objectSpread(_objectSpread({}, base), derived), override);
}
;
function resolveStateTextStyle(state, palette) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var listTextStateResolverConfigurationSettings = options.listTextStateResolverConfigurationSettings,
listTextStateConfigurationSettings = options.listTextStateConfigurationSettings,
listTextConfigurationSettings = options.listTextConfigurationSettings,
item = options.item,
_options$base2 = options.base,
base = _options$base2 === void 0 ? {} : _options$base2;
var derived = {
color: state === "pending" ? "#374151" : palette.text
};
var rawState = listTextStateConfigurationSettings && listTextStateConfigurationSettings[state];
var stateOverride = typeof rawState === "function" ? rawState({
state: state,
palette: palette,
item: item
}) : rawState || {};
var resolverOverride = typeof listTextStateResolverConfigurationSettings === "function" ? listTextStateResolverConfigurationSettings(state, palette, item) || {} : {};
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, base), derived), listTextConfigurationSettings || {}), stateOverride), resolverOverride);
}
;
function HUDFeatureProgress(configurations) {
var _configurations$state = configurations.stateBackgroundResolverConfigurationSettings,
stateBackgroundResolverConfigurationSettings = _configurations$state === void 0 ? null : _configurations$state,
_configurations$listT = configurations.listTextStateResolverConfigurationSettings,
listTextStateResolverConfigurationSettings = _configurations$listT === void 0 ? null : _configurations$listT,
_configurations$progr = configurations.progressContainerConfigurationSettings,
progressContainerConfigurationSettings = _configurations$progr === void 0 ? {} : _configurations$progr,
_configurations$featu = configurations.featureTitleTextConfigurationSettings,
featureTitleTextConfigurationSettings = _configurations$featu === void 0 ? {} : _configurations$featu,
_configurations$detai = configurations.detailsContainerConfigurationSettings,
detailsContainerConfigurationSettings = _configurations$detai === void 0 ? {} : _configurations$detai,
_configurations$toggl = configurations.toggleButtonIconConfigurationSettings,
toggleButtonIconConfigurationSettings = _configurations$toggl === void 0 ? {} : _configurations$toggl,
_configurations$listC = configurations.listCellContentConfigurationSettings,
listCellContentConfigurationSettings = _configurations$listC === void 0 ? {} : _configurations$listC,
_configurations$featu2 = configurations.featureProgressConfigurationSettings,
featureProgressConfigurationSettings = _configurations$featu2 === void 0 ? {} : _configurations$featu2,
_configurations$curre = configurations.currentLineTextConfigurationSettings,
currentLineTextConfigurationSettings = _configurations$curre === void 0 ? {} : _configurations$curre,
_configurations$curre2 = configurations.currentLineRowConfigurationSettings,
currentLineRowConfigurationSettings = _configurations$curre2 === void 0 ? {} : _configurations$curre2,
_configurations$curre3 = configurations.currentLineDotConfigurationSettings,
currentLineDotConfigurationSettings = _configurations$curre3 === void 0 ? {} : _configurations$curre3,
_configurations$listC2 = configurations.listCellStateConfigurationSettings,
listCellStateConfigurationSettings = _configurations$listC2 === void 0 ? {} : _configurations$listC2,
_configurations$listT2 = configurations.listTimestampConfigurationSettings,
listTimestampConfigurationSettings = _configurations$listT2 === void 0 ? {} : _configurations$listT2,
_configurations$listT3 = configurations.listTextStateConfigurationSettings,
listTextStateConfigurationSettings = _configurations$listT3 === void 0 ? {} : _configurations$listT3,
_configurations$toggl2 = configurations.toggleButtonConfigurationSettings,
toggleButtonConfigurationSettings = _configurations$toggl2 === void 0 ? {} : _configurations$toggl2,
_configurations$state2 = configurations.stateStylesConfigurationSettings,
stateStylesConfigurationSettings = _configurations$state2 === void 0 ? {} : _configurations$state2,
_configurations$statu = configurations.statusBadgeConfigurationSettings,
statusBadgeConfigurationSettings = _configurations$statu === void 0 ? {} : _configurations$statu,
_configurations$accen = configurations.accentRailConfigurationSettings,
accentRailConfigurationSettings = _configurations$accen === void 0 ? {} : _configurations$accen,
_configurations$heade = configurations.headerLeftConfigurationSettings,
headerLeftConfigurationSettings = _configurations$heade === void 0 ? {} : _configurations$heade,
_configurations$outer = configurations.outerWrapConfigurationSettings,
outerWrapConfigurationSettings = _configurations$outer === void 0 ? {} : _configurations$outer,
_configurations$listC3 = configurations.listCellConfigurationSettings,
listCellConfigurationSettings = _configurations$listC3 === void 0 ? {} : _configurations$listC3,
_configurations$listI = configurations.listIconConfigurationSettings,
listIconConfigurationSettings = _configurations$listI === void 0 ? {} : _configurations$listI,
_configurations$listT4 = configurations.listTextConfigurationSettings,
listTextConfigurationSettings = _configurations$listT4 === void 0 ? {} : _configurations$listT4,
_configurations$heade2 = configurations.headerConfigurationSettings,
headerConfigurationSettings = _configurations$heade2 === void 0 ? {} : _configurations$heade2,
_configurations$cardC = configurations.cardConfigurationSettings,
cardConfigurationSettings = _configurations$cardC === void 0 ? {} : _configurations$cardC,
_configurations$listC4 = configurations.listConfigurationSettings,
listConfigurationSettings = _configurations$listC4 === void 0 ? {} : _configurations$listC4,
_configurations$toggl3 = configurations.toggleButtonIconConfigurations,
toggleButtonIconConfigurations = _configurations$toggl3 === void 0 ? {} : _configurations$toggl3,
_configurations$detai2 = configurations.detailsContainerConfigurations,
detailsContainerConfigurations = _configurations$detai2 === void 0 ? {} : _configurations$detai2,
_configurations$progr2 = configurations.progressConfigurations,
progressConfigurations = _configurations$progr2 === void 0 ? {} : _configurations$progr2,
_configurations$accen2 = configurations.accentColor,
accentColor = _configurations$accen2 === void 0 ? "#1A73E8" : _configurations$accen2,
featureTitle = configurations.featureTitle,
actions = configurations.actions,
icon = configurations.icon,
_configurations$showS = configurations.showStatusBadge,
showStatusBadge = _configurations$showS === void 0 ? true : _configurations$showS,
_configurations$statu2 = configurations.status,
status = _configurations$statu2 === void 0 ? "running" : _configurations$statu2,
statusLabel = configurations.statusLabel,
_configurations$previ = configurations.previousMessages,
previousMessages = _configurations$previ === void 0 ? [] : _configurations$previ,
message = configurations.message,
_configurations$defau = configurations.defaultExpanded,
defaultExpanded = _configurations$defau === void 0 ? false : _configurations$defau,
_configurations$showA = configurations.showAccentRail,
showAccentRail = _configurations$showA === void 0 ? true : _configurations$showA,
_configurations$showT = configurations.showTimestamp,
showTimestamp = _configurations$showT === void 0 ? true : _configurations$showT,
_configurations$colla = configurations.collapsible,
collapsible = _configurations$colla === void 0 ? true : _configurations$colla,
onExpandedChange = configurations.onExpandedChange,
expanded = configurations.expanded,
_configurations$size = configurations.size,
size = _configurations$size === void 0 ? "md" : _configurations$size,
_configurations$value = configurations.value,
value = _configurations$value === void 0 ? 0 : _configurations$value;
var _useState = useState(defaultExpanded),
_useState2 = _slicedToArray(_useState, 2),
internalExpanded = _useState2[0],
setInternalExpanded = _useState2[1];
var detailsRef = useRef(null);
var controlled = typeof expanded === "boolean";
var open = controlled ? expanded : internalExpanded;
var dateFormatter = useMemo(function () {
try {
return new Intl.DateTimeFormat(undefined, {
dateStyle: "medium",
timeStyle: "short"
});
} catch (_unused) {
return {
format: function format(d) {
return d instanceof Date ? d.toLocaleString() : String(d);
}
};
}
}, []);
var formatTimestamp = useCallback(function (ts) {
try {
var d = ts instanceof Date ? ts : new Date(ts);
return dateFormatter.format(d);
} catch (_unused2) {
return String(ts);
}
}, [dateFormatter]);
var outerWrapStyle = useMemo(function () {
return _objectSpread(_objectSpread({
borderRadius: 14,
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
background: "linear-gradient(145deg, #ffffff, #f3f4f6)",
padding: 1
}, outerWrapConfigurationSettings), featureProgressConfigurationSettings !== null && featureProgressConfigurationSettings !== void 0 ? featureProgressConfigurationSettings : {});
}, [outerWrapConfigurationSettings, featureProgressConfigurationSettings]);
var cardStyle = useMemo(function () {
return _objectSpread({
border: "1px solid rgba(0, 0, 0, 0.06)",
borderRadius: 12,
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.08)",
background: "linear-gradient(180deg, #ffffff, #fafafa)"
}, cardConfigurationSettings !== null && cardConfigurationSettings !== void 0 ? cardConfigurationSettings : {});
}, [cardConfigurationSettings]);
var accentRailStyle = useMemo(function () {
return _objectSpread({
borderTopRightRadius: 12,
borderTopLeftRadius: 12,
boxShadow: "inset 0 -1px 0 rgba(0, 0, 0, 0.04)",
background: "linear-gradient(90deg, ".concat(accentColor, "40, ").concat(accentColor, "20, transparent)"),
height: 3
}, accentRailConfigurationSettings);
}, [accentColor, accentRailConfigurationSettings]);
var headerStyle = useMemo(function () {
return _objectSpread({
display: "flex",
alignItems: "center",
gap: 12,
padding: 14
}, headerConfigurationSettings);
}, [headerConfigurationSettings]);
var headerLeftStyle = useMemo(function () {
return _objectSpread({
display: "flex",
alignItems: "center",
minHeight: 24,
gap: 10
}, headerLeftConfigurationSettings);
}, [headerLeftConfigurationSettings]);
var titleTextStyle = useMemo(function () {
return _objectSpread({
letterSpacing: 0.2,
fontWeight: 700,
fontSize: 17,
background: "transparent",
color: "#4b5563"
}, featureTitleTextConfigurationSettings);
}, [featureTitleTextConfigurationSettings]);
var badgeStyle = useMemo(function () {
return _objectSpread({
whiteSpace: "nowrap",
lineHeight: "18px",
fontWeight: 469,
fontSize: 12,
border: "1px solid ".concat(accentColor, "44"),
borderRadius: 999,
boxShadow: "inset 0 1px 0 #ffffffaa, 0 1px 6px rgba(0, 0, 0, 0.06)",
background: "linear-gradient(180deg, ".concat(accentColor, "18, #ffffff)"),
color: accentColor,
padding: "4px 10px"
}, statusBadgeConfigurationSettings);
}, [accentColor, statusBadgeConfigurationSettings]);
var progressContainerStyle = useMemo(function () {
return _objectSpread({
padding: "0 14px 6px 14px"
}, progressContainerConfigurationSettings);
}, [progressContainerConfigurationSettings]);
var currentRowStyle = useMemo(function () {
return _objectSpread({
display: "flex",
alignItems: "center",
fontSize: 14,
lineHeight: "20px",
color: "#111827",
gap: 12,
padding: "6px 14px 12px 14px"
}, currentLineRowConfigurationSettings);
}, [currentLineRowConfigurationSettings]);
var currentDotStyle = useMemo(function () {
return _objectSpread({
borderRadius: 8,
boxShadow: "0 0 8px ".concat(accentColor, "88"),
background: accentColor,
height: 6,
width: 6
}, currentLineDotConfigurationSettings);
}, [accentColor, currentLineDotConfigurationSettings]);
var currentTextStyle = useMemo(function () {
return _objectSpread({
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}, currentLineTextConfigurationSettings);
}, [currentLineTextConfigurationSettings]);
var toggleButtonStyle = useMemo(function () {
return _objectSpread({
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
border: "1px solid rgba(0, 0, 0, 0.08)",
borderRadius: 8,
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)",
background: "#ffffff",
color: accentColor,
height: 28,
width: 28
}, toggleButtonConfigurationSettings);
}, [accentColor, toggleButtonConfigurationSettings]);
var detailsContainerStyle = useMemo(function () {
return _objectSpread({
msOverflowStyle: "none",
scrollbarWidth: "none",
overflow: "auto",
transition: "all 0.269s ease",
maxHeight: 240,
padding: "0 12px 14px 12px"
}, detailsContainerConfigurationSettings);
}, [detailsContainerConfigurationSettings]);
var computedListConfig = useMemo(function () {
return _objectSpread({
gap: "8px",
marginTop: "0.25rem"
}, listConfigurationSettings);
}, [listConfigurationSettings]);
var barHeight = useMemo(function () {
var map = {
sm: "6px",
md: "10px",
lg: "14px"
};
return map[size] || map.md;
}, [size]);
var statusFallback = useMemo(function () {
return {
idle: "Idle",
running: "In Progress",
success: "Completed",
error: "Error"
};
}, []);
var stateStyles = useMemo(function () {
return {
success: _objectSpread({
icon: "check-circle",
text: "#065F46",
bar: "#10B981",
bg: "#F1FBF6"
}, stateStylesConfigurationSettings.success || {}),
pending: _objectSpread({
icon: "spinner",
text: "#374151",
bar: accentColor,
bg: "#FFFFFF"
}, stateStylesConfigurationSettings.pending || {}),
error: _objectSpread({
icon: "triangle-exclamation",
text: "#7F1D1D",
bar: "#EF4444",
bg: "#FEF3F2"
}, stateStylesConfigurationSettings.error || {})
};
}, [accentColor, stateStylesConfigurationSettings]);
var mergedProgressProps = useMemo(function () {
var base = {
progressPercentageLabelConfigurationSettings: {
fontWeight: 600,
color: "#1f2937"
},
progressBarBackgroundConfigurationSettings: {
background: "rgba(0, 0, 0, 0.08)"
},
progressBarConfigurationSettings: {
background: accentColor,
height: barHeight
},
currentPercentage: value,
displayPercentage: true
};
return mergeProgressProps(base, progressConfigurations);
}, [value, barHeight, accentColor, progressConfigurations]);
var containsAnyDetails = useMemo(function () {
return !!message || previousMessages && previousMessages.length > 0;
}, [message, previousMessages]);
var listItems = useMemo(function () {
var out = [];
if (message) {
out.push({
timestamp: "now-current-message-marker",
state: "pending",
text: message
});
}
if (Array.isArray(previousMessages)) {
for (var i = 0; i < previousMessages.length; i++) {
out.push(previousMessages[i]);
}
}
return out;
}, [message, previousMessages]);
var toggle = useCallback(function () {
var next = !open;
if (controlled) {
onExpandedChange && onExpandedChange(next);
} else {
setInternalExpanded(next);
onExpandedChange && onExpandedChange(next);
}
}, [open, controlled, onExpandedChange]);
var currentMsg = useCallback(function (item) {
return item && item.timestamp === "now-current-message-marker";
}, []);
var hudListKeyExtractor = useCallback(function (item, idx) {
var _ref;
return (_ref = item && (item.id || item.timestamp || item.text)) !== null && _ref !== void 0 ? _ref : idx;
}, []);
var hudListCellStyle = useCallback(function (item) {
var currentTime = currentMsg(item);
var st = currentTime ? "pending" : resolveItemState(item);
var palette = stateStyles[st] || stateStyles.pending;
var baseDefaults = {
display: "flex",
alignItems: "center",
lineHeight: "19px",
fontSize: "13.5px",
borderRadius: 12,
boxShadow: "0 1px 0 rgba(0, 0, 0, 0.03), 0 1px 6px rgba(0, 0, 0, 0.04)",
background: "#ffffff",
color: "#374151",
gap: "12px",
padding: "10px 12px"
};
var userCellCfg = typeof listCellConfigurationSettings === "function" ? listCellConfigurationSettings(item) : listCellConfigurationSettings || {};
return resolveStateCellStyle(st, palette, {
listCellStateConfigurationSettings: listCellStateConfigurationSettings,
stateBackgroundResolverConfigurationSettings: stateBackgroundResolverConfigurationSettings,
base: _objectSpread(_objectSpread({}, baseDefaults), userCellCfg)
});
}, [stateBackgroundResolverConfigurationSettings, listCellStateConfigurationSettings, listCellConfigurationSettings, currentMsg, stateStyles]);
var hudListRenderCell = useCallback(function (item) {
var currentTime = currentMsg(item);
var st = currentTime ? "pending" : resolveItemState(item);
var palette = stateStyles[st] || stateStyles.pending;
var dynamicTextStyle = resolveStateTextStyle(st, palette, {
listTextConfigurationSettings: listTextConfigurationSettings,
listTextStateConfigurationSettings: listTextStateConfigurationSettings,
listTextStateResolverConfigurationSettings: listTextStateResolverConfigurationSettings,
item: item,
base: {
flex: 1
}
});
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
fontSize: 14,
color: palette.bar,
minWidth: 14,
marginLeft: "0.469rem"
}, listIconConfigurationSettings !== null && listIconConfigurationSettings !== void 0 ? listIconConfigurationSettings : {}),
name: (stateStyles[st] || {}).icon,
spin: st === "pending"
}), /*#__PURE__*/React.createElement("div", {
style: dynamicTextStyle
}, item && item.text !== undefined ? item.text : String(item !== null && item !== void 0 ? item : "")), showTimestamp && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
fontSize: 12,
color: "#6b7280",
whiteSpace: "nowrap"
}, listTimestampConfigurationSettings)
}, currentTime ? new Date().toLocaleTimeString() : item && item.timestamp ? formatTimestamp(item.timestamp) : ""));
}, [listTextStateResolverConfigurationSettings, listTextStateConfigurationSettings, listTimestampConfigurationSettings, listIconConfigurationSettings, listTextConfigurationSettings, formatTimestamp, showTimestamp, currentMsg, stateStyles]);
useEffect(function () {
if (open && detailsRef.current) {
detailsRef.current.scrollTop = detailsRef.current.scrollHeight;
}
}, [open, message, previousMessages]);
return /*#__PURE__*/React.createElement("div", {
style: outerWrapStyle,
"aria-busy": status === "running",
"aria-live": "polite",
role: "group"
}, /*#__PURE__*/React.createElement("div", {
style: cardStyle
}, showAccentRail ? /*#__PURE__*/React.createElement("div", {
style: accentRailStyle
}) : null, /*#__PURE__*/React.createElement("div", {
style: headerStyle
}, /*#__PURE__*/React.createElement("div", {
style: headerLeftStyle
}, icon ? /*#__PURE__*/React.createElement("span", {
"aria-hidden": true
}, icon) : null, /*#__PURE__*/React.createElement("span", {
style: titleTextStyle
}, featureTitle || "Processing")), /*#__PURE__*/React.createElement("div", {
style: {
marginLeft: "auto",
display: "flex",
gap: 8,
alignItems: "center"
}
}, showStatusBadge && /*#__PURE__*/React.createElement("span", {
style: badgeStyle
}, statusLabel != null ? statusLabel : statusFallback[status] || "Status"), actions)), /*#__PURE__*/React.createElement("div", {
style: progressContainerStyle
}, /*#__PURE__*/React.createElement(HUDProgressBar, mergedProgressProps)), containsAnyDetails && /*#__PURE__*/React.createElement("div", {
style: currentRowStyle
}, /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
flex: 1,
alignItems: "center",
overflow: "hidden",
gap: 10
}
}, /*#__PURE__*/React.createElement("span", {
style: currentDotStyle
}), /*#__PURE__*/React.createElement("span", {
style: currentTextStyle,
title: typeof message === "string" ? message : undefined
}, message || "—")), collapsible && /*#__PURE__*/React.createElement("button", {
style: toggleButtonStyle,
onClick: toggle,
"aria-controls": "hud-feature-progress-details",
"aria-expanded": open,
"aria-label": "".concat(open ? "Hide" : "Show", " details").concat(featureTitle ? " for " + featureTitle : ""),
type: "button"
}, /*#__PURE__*/React.createElement(HUDIcon, _extends({
iconConfigurationSettings: _objectSpread({
transition: "all 0.269s ease",
transform: open ? "rotate(180deg)" : "rotate(0deg)",
fontSize: 14
}, toggleButtonIconConfigurationSettings !== null && toggleButtonIconConfigurationSettings !== void 0 ? toggleButtonIconConfigurationSettings : {}),
name: "chevron-down"
}, toggleButtonIconConfigurations !== null && toggleButtonIconConfigurations !== void 0 ? toggleButtonIconConfigurations : {})))), open && containsAnyDetails && /*#__PURE__*/React.createElement(motion.div, _extends({
id: "hud-feature-progress-details",
ref: detailsRef,
initial: {
height: 0
},
animate: {
height: "auto"
},
transition: {
animate: "easeOut",
duration: 0.269
},
style: detailsContainerStyle
}, detailsContainerConfigurations !== null && detailsContainerConfigurations !== void 0 ? detailsContainerConfigurations : {}), /*#__PURE__*/React.createElement(HUDList, {
listConfigurationSettings: computedListConfig,
cellConfigurationSettings: hudListCellStyle,
renderCell: hudListRenderCell,
keyExtractor: hudListKeyExtractor,
items: listItems,
listType: "vertical"
}))));
}
;
export default HUDFeatureProgress;