xmlui 0.4.1 → 0.4.2-beta.1

package/dist/scripts/xmlui/src/components/FormSection/FormSection.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formSectionRenderer = void 0;
+exports.formSectionRenderer = {
+    compoundComponentDef: {
+        name: "FormSection",
+        component: {
+            type: "VStack",
+            props: {
+                paddingBottom: "{$props.paddingBottom ?? '1rem'}",
+            },
+            children: [
+                {
+                    type: "Heading",
+                    when: "{!!$props.heading}",
+                    props: {
+                        marginBottom: "0.5rem",
+                        level: "{$props.headingLevel ?? 'h3'}",
+                        fontWeight: "{$props.headingWeight ?? 'bold'}",
+                        value: "{$props.heading}",
+                    },
+                },
+                {
+                    type: "Text",
+                    when: "{!!$props.info}",
+                    props: {
+                        fontSize: "{$props.infoFontSize ?? '0.8rem'}",
+                        paddingBottom: "1.25rem",
+                        value: "{$props.info}",
+                    },
+                },
+                {
+                    type: "FlowLayout",
+                    props: {
+                        columnGap: "{$props.columnGap ?? '3rem'}",
+                        rowGap: "{$props.rowGap ?? '1rem'}",
+                    },
+                    children: [
+                        {
+                            type: "ChildrenSlot",
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+};

package/dist/scripts/{src → xmlui/src}/components/Heading/Heading.js

@@ -84,7 +84,7 @@ const h2Metadata = {
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
         "font-size-H2": "$font-size-medium",
-        "line-height-H2": "$line-height-relaxed",
+        "line-height-H2": "$line-height-snug",
         "margin-top-H2": "$space-2",
         "margin-bottom-H2": "$space-4",
         light: {

package/dist/scripts/{src → xmlui/src}/components/Icon/Icon.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconComponentRenderer = exports.Icon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const renderers_1 = require("@components-core/renderers");
 const Icon_module_scss_1 = __importDefault(require("./Icon.module.scss"));
 const IconRegistryContext_1 = require("@components/IconRegistryContext");
@@ -23,7 +24,8 @@ const classnames_1 = __importDefault(require("@components-core/utils/classnames"
 const ThemeContext_1 = require("@components-core/theming/ThemeContext");
 const themeVars_1 = require("@components-core/theming/themeVars");
 const descriptorHelper_1 = require("@components-core/descriptorHelper");
-const Icon = (_a) => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var { name, fallback, layout, className } = _a, restProps = __rest(_a, ["name", "fallback", "layout", "className"]);
     const lowerCaseIconName = name === null || name === void 0 ? void 0 : name.toLowerCase();
     const iconRegistry = (0, IconRegistryContext_1.useIconRegistry)();
@@ -44,8 +46,7 @@ const Icon = (_a) => {
         return ((0, jsx_runtime_1.jsx)(CustomIcon, Object.assign({}, computedProps, { url: customIconUrl, name: name })));
     }
     return renderIcon ? renderIcon(computedProps) : null;
-};
-exports.Icon = Icon;
+});
 function CustomIcon(props) {
     var _a;
     const { url, width, height, name, style, className } = props;

package/dist/scripts/xmlui/src/components/Icon/TrendingDownIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrendingDownIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const trending_down_svg_react_1 = __importDefault(require("./svg/trending-down.svg?react"));
+const TrendingDownIcon = (props) => ((0, jsx_runtime_1.jsx)(trending_down_svg_react_1.default, Object.assign({}, props)));
+exports.TrendingDownIcon = TrendingDownIcon;

package/dist/scripts/xmlui/src/components/Icon/TrendingUpIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrendingUpIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const trending_up_svg_react_1 = __importDefault(require("./svg/trending-up.svg?react"));
+const TrendingUpIcon = (props) => ((0, jsx_runtime_1.jsx)(trending_up_svg_react_1.default, Object.assign({}, props)));
+exports.TrendingUpIcon = TrendingUpIcon;

package/dist/scripts/xmlui/src/components/IconInfoCard/IconInfoCard.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconInfoCardRenderer = void 0;
+exports.iconInfoCardRenderer = {
+    compoundComponentDef: {
+        name: "IconInfoCard",
+        component: {
+            type: "Card",
+            props: {
+                height: "{$props.height}",
+            },
+            children: [
+                {
+                    type: "HStack",
+                    props: {
+                        gap: "$space-4",
+                        verticalAlignment: "center",
+                    },
+                    children: [
+                        {
+                            type: "CHStack",
+                            props: {
+                                backgroundColor: "{$props.iconBackgroundColor}",
+                                color: "white",
+                                width: "$space-10",
+                                height: "$space-10",
+                                radius: "$radius",
+                            },
+                            children: [
+                                {
+                                    type: "Icon",
+                                    props: {
+                                        name: "{$props.iconName}",
+                                        size: "$space-6",
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: "VStack",
+                            children: [
+                                {
+                                    type: "ChildrenSlot",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+};

package/dist/scripts/{src → xmlui/src}/components/IconProvider.js

@@ -73,6 +73,8 @@ const UserIcon_1 = require("@components/Icon/UserIcon");
 const WarningIcon_1 = require("@components/Icon/WarningIcon");
 const XlsIcon_1 = require("@components/Icon/XlsIcon");
 const ErrorIcon_1 = require("@components/Icon/ErrorIcon");
+const TrendingUpIcon_1 = require("./Icon/TrendingUpIcon");
+const TrendingDownIcon_1 = require("./Icon/TrendingDownIcon");
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -187,12 +189,13 @@ registerIconRenderer("share", (props) => (0, jsx_runtime_1.jsx)(ShareIcon_1.Shar
 registerIconRenderer("new-window", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, Object.assign({}, props)));
 registerIconRenderer("paint", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiOutlinePaintBrush, Object.assign({}, props)));
 registerIconRenderer("palette", (props) => (0, jsx_runtime_1.jsx)(md_1.MdOutlinePalette, Object.assign({}, props)));
+registerIconRenderer("trending-up", (props) => (0, jsx_runtime_1.jsx)(TrendingUpIcon_1.TrendingUpIcon, Object.assign({}, props)));
+registerIconRenderer("trending-down", (props) => (0, jsx_runtime_1.jsx)(TrendingDownIcon_1.TrendingDownIcon, Object.assign({}, props)));
 // --- IDE extras (temporary)
 registerIconRenderer("arrowdown", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrowDownShort, Object.assign({}, props)));
 registerIconRenderer("square", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquare, Object.assign({}, props)));
 registerIconRenderer("squarehalf", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquareHalf, Object.assign({}, props)));
 registerIconRenderer("squarefill", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquareFill, Object.assign({}, props)));
-registerIconRenderer("chevronright", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsChevronRight, Object.assign({}, props)));
 function IconProvider({ children }) {
     const getRegisteredIconNames = (0, react_1.useCallback)(() => {
         return Array.from(pool.keys());

package/dist/scripts/{src → xmlui/src}/components/Image/Image.js

@@ -7,15 +7,15 @@ exports.imageComponentRenderer = exports.Image = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const renderers_1 = require("@components-core/renderers");
 const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
+const react_1 = require("react");
 const themeVars_1 = require("@components-core/theming/themeVars");
 const descriptorHelper_1 = require("@components-core/descriptorHelper");
 const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
-const Image = ({ src, alt, fit = "contain", layout, onClick, aspectRatio, lazyLoad }) => {
-    return ((0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, loading: lazyLoad ? "lazy" : "eager", className: (0, classnames_1.default)(Image_module_scss_1.default.img, {
+exports.Image = (0, react_1.forwardRef)(function Img({ src, alt, fit = "contain", layout, onClick, aspectRatio, lazyLoad }, ref) {
+    return ((0, jsx_runtime_1.jsx)("img", { src: src, ref: ref, alt: alt, loading: lazyLoad ? "lazy" : "eager", className: (0, classnames_1.default)(Image_module_scss_1.default.img, {
             [Image_module_scss_1.default.clickable]: !!onClick,
         }), style: Object.assign(Object.assign({ objectFit: fit }, layout), { aspectRatio: aspectRatio }), onClick: onClick }));
-};
-exports.Image = Image;
+});
 const metadata = {
     displayName: "Image",
     description: "Display an image (.jpg, .png, etc.)",

package/dist/scripts/{src → xmlui/src}/components/Link/Link.js

@@ -54,12 +54,12 @@ const metadata = {
         "style-outline-Link--focus": "$style-outline--focus",
         "offset-outline-Link--focus": "$offset-outline--focus",
         light: {
-            "color-text-Link": "$color-surface-950",
-            "color-text-Link--active": "$color-primary-700",
+            "color-text-Link": "$color-primary-500",
+            "color-text-Link--active": "$color-primary-500",
         },
         dark: {
-            "color-text-Link": "$color-surface-50",
-            "color-text-Link--active": "$color-primary-300",
+            "color-text-Link": "$color-primary-500",
+            "color-text-Link--active": "$color-primary-500",
         },
     },
 };

package/dist/scripts/{src → xmlui/src}/components/Map/Map.js

@@ -34,9 +34,15 @@ const PieChart_module_scss_1 = __importDefault(require("@components/PieChart/Pie
 const renderers_1 = require("@components-core/renderers");
 const react_1 = __importStar(require("react"));
 const world_countries_json_1 = __importDefault(require("./world_countries.json"));
+const lodash_es_1 = require("lodash-es");
 const ResponsiveChoropleth = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("@nivo/geo"))).then((module) => ({ default: module.ResponsiveChoropleth })));
 const Map = ({ data = [], style }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ResponsiveChoropleth, { data: data, margin: { top: 0, right: 0, bottom: 0, left: 0 }, colors: "nivo", domain: [0, 1000000], unknownColor: "#666666", label: "properties.name", valueFormat: ".2s", projectionTranslation: [0.5, 0.5], projectionRotation: [0, 0, 0], enableGraticule: true, graticuleLineColor: "#dddddd", borderWidth: 0.5, borderColor: "#152538", features: world_countries_json_1.default.features }) }) }));
+    // lot of extra props, the issue is here: https://github.com/plouc/nivo/issues/2634
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ResponsiveChoropleth, { data: data, margin: { top: 0, right: 0, bottom: 0, left: 0 }, colors: "blues", domain: [0, 1000000], unknownColor: "transparent", label: "properties.name", valueFormat: ".2s", projectionTranslation: [0.5, 0.6], projectionRotation: [0, 0, 0], enableGraticule: true, graticuleLineColor: "#dddddd", borderWidth: 0.1, borderColor: "#152538", features: world_countries_json_1.default.features, 
+                // projectionType={"mercator"}
+                projectionType: "equirectangular", projectionScale: 100, fillColor: "transparent", graticuleLineWidth: 0, isInteractive: true, onMouseEnter: lodash_es_1.noop, onMouseMove: lodash_es_1.noop, onMouseLeave: lodash_es_1.noop, onClick: lodash_es_1.noop, role: "", match: "id", value: "value", 
+                // @ts-ignore
+                layers: ['graticule', 'features'] }) }) }));
 };
 const metadata = {
     displayName: "Map",

package/dist/scripts/{src → xmlui/src}/components/ModalDialog/ModalDialog.js

@@ -106,7 +106,11 @@ exports.ModalDialog = react_1.default.forwardRef(({ children, style, isInitially
     }
     return ((0, jsx_runtime_1.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => (open ? doOpen() : doClose()), children: (0, jsx_runtime_1.jsxs)(Dialog.Portal, { container: root, children: [!fullScreen && (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.overlayBg }), (0, jsx_runtime_1.jsx)(Dialog.Overlay, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.overlay, {
                         [ModalDialog_module_scss_1.default.fullScreen]: fullScreen,
-                    }), children: (0, jsx_runtime_1.jsxs)(Dialog.Content, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content), ref: composedRef, style: style, children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, children: isOpen && (typeof children === "function" ? children === null || children === void 0 ? void 0 : children() : children) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: doClose, variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] }) })] }) }));
+                    }), children: (0, jsx_runtime_1.jsxs)(Dialog.Content, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content), onPointerDownOutside: (event) => {
+                            if (event.target instanceof Element && event.target.closest('._debug-inspect-button') !== null) { //we prevent the auto modal close on clicking the inspect button
+                                event.preventDefault();
+                            }
+                        }, ref: composedRef, style: style, children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, children: isOpen && (typeof children === "function" ? children === null || children === void 0 ? void 0 : children() : children) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: doClose, variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] }) })] }) }));
 });
 exports.ModalDialog.displayName = "ModalDialog";
 const metadata = {

package/dist/scripts/{src → xmlui/src}/components/MultiCombobox/MultiCombobox.js

@@ -180,7 +180,7 @@ const MultiCombobox = ({ id, initialValue = constants_1.EMPTY_ARRAY, value = con
     }, [referenceElement]);
     return ((0, jsx_runtime_1.jsxs)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: [children, (0, jsx_runtime_1.jsxs)("div", { className: MultiCombobox_module_scss_1.default.comboboxContainer, style: layout, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(MultiCombobox_module_scss_1.default.comboboxToggleButton, MultiCombobox_module_scss_1.default[validationStatus], {
                             [MultiCombobox_module_scss_1.default.disabled]: !enabled,
-                        }), ref: (el) => setReferenceElement(el), children: [(0, jsx_runtime_1.jsxs)("div", { className: MultiCombobox_module_scss_1.default.selectedOptions, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: MultiCombobox_module_scss_1.default.adornment }), options
+                        }), ref: setReferenceElement, children: [(0, jsx_runtime_1.jsxs)("div", { className: MultiCombobox_module_scss_1.default.selectedOptions, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: MultiCombobox_module_scss_1.default.adornment }), options
                                         .filter((option) => value.includes(option.value))
                                         .map(function renderSelectedItem(selectedItemForRender, index) {
                                         return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-multi-value-container": true, className: MultiCombobox_module_scss_1.default.multiValue }, getSelectedItemProps({

package/dist/scripts/{src → xmlui/src}/components/NavLink/NavLink.js

@@ -44,7 +44,7 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
         }
     }, [to]);
     const styleObj = Object.assign(Object.assign({}, sx), style);
-    const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.base, {
+    const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
         [NavLink_module_scss_1.default.disabled]: disabled,
         [NavLink_module_scss_1.default.vertical]: safeVertical,
         [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
@@ -85,10 +85,10 @@ const metadata = {
         "color-bg-NavLink": "transparent",
         "padding-horizontal-NavLink": "$space-4",
         "padding-vertical-NavLink": "$space-2",
-        "font-size-NavLink": "$font-size",
+        "font-size-NavLink": "$font-size-small",
         "font-weight-NavLink": "$font-weight-normal",
+        "font-family-NavLink": "$font-family",
         "color-text-NavLink": "$color-text-primary",
-        "color-icon-NavLink": "$color-text-NavLink",
         "font-weight-NavLink--pressed": "$font-weight-normal",
         "thickness-indicator-NavLink": "$space-0_5",
         "color-outline-NavLink--focus": "$color-outline--focus",
@@ -97,6 +97,7 @@ const metadata = {
         "offset-outline-NavLink--focus": "-1px",
         "radius-indicator-NavLink": "$radius",
         light: {
+            "color-icon-NavLink": "$color-surface-500",
             "color-indicator-NavLink--active": "$color-primary-500",
             "color-indicator-NavLink--pressed": "$color-primary-500",
             "color-indicator-NavLink--hover": "$color-primary-600",

package/dist/scripts/{src → xmlui/src}/components/NavPanel/NavPanel.js

@@ -40,6 +40,7 @@ const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
 const react_dom_1 = require("react-dom");
 const App_1 = require("@components/App/App");
 const hooks_1 = require("@components-core/utils/hooks");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.NavPanelContext = react_1.default.createContext(null);
 const contextValue = {
     inDrawer: true,
@@ -48,9 +49,10 @@ function DrawerNavPanel({ logoContent, children, className, style, }) {
     const scrollContainerRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(Logo_1.Logo, { inDrawer: true }) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }) }));
 }
-function NavPanel({ children, style, logoContent, className, }) {
+const NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, }, forwardedRef) {
     const id = (0, react_1.useId)();
     const scrollContainerRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const horizontal = (0, App_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
     const showLogo = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky";
@@ -70,16 +72,16 @@ function NavPanel({ children, style, logoContent, className, }) {
         const { navPanelRoot, navPanelVisible, drawerVisible, drawerRoot } = appLayoutContext;
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [navPanelRoot &&
                     navPanelVisible &&
-                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
+                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
                             [NavPanel_module_scss_1.default.horizontal]: horizontal,
                         }), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: logoContent || (0, jsx_runtime_1.jsx)(Logo_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }), navPanelRoot), drawerRoot &&
                     drawerVisible &&
                     (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(DrawerNavPanel, { className: className, style: style, logoContent: logoContent, children: children }), drawerRoot)] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
             [NavPanel_module_scss_1.default.horizontal]: horizontal,
         }), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: logoContent || (0, jsx_runtime_1.jsx)(Logo_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }));
-}
+});
 const metadata = {
     displayName: "NavPanel",
     description: "Display an avatar associated with an entity",

package/dist/scripts/xmlui/src/components/PageHeader/PageHeader.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageHeaderRenderer = void 0;
+exports.pageHeaderRenderer = {
+    compoundComponentDef: {
+        name: "PageHeader",
+        component: {
+            type: "HStack",
+            props: {
+                gap: "$gap-PageHeader",
+                verticalAlignment: "center",
+            },
+            children: [
+                {
+                    type: "VStack",
+                    children: [
+                        {
+                            type: "Text",
+                            props: {
+                                variant: "subheading",
+                                when: "{$props.preTitle !== undefined}",
+                                value: "{$props.preTitle}",
+                            },
+                        },
+                        {
+                            type: "H2",
+                            props: {
+                                value: "{$props.title}",
+                                margin: "0",
+                            },
+                        },
+                    ],
+                },
+                {
+                    type: "SpaceFiller",
+                },
+                {
+                    type: "ChildrenSlot",
+                },
+            ],
+        },
+    },
+    hints: {
+        defaultThemeVars: {
+            "gap-PageHeader": "$space-2",
+        }
+    }
+};

package/dist/scripts/{src → xmlui/src}/components/ProgressBar/ProgressBar.js

@@ -7,11 +7,12 @@ exports.progressBarComponentRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const renderers_1 = require("@components-core/renderers");
 const ProgressBar_module_scss_1 = __importDefault(require("./ProgressBar.module.scss"));
+const react_1 = require("react");
 const descriptorHelper_1 = require("@components-core/descriptorHelper");
 const themeVars_1 = require("@components-core/theming/themeVars");
-function ProgressBar({ value = 0, style }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: ProgressBar_module_scss_1.default.wrapper, style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { width: `${value * 100}%` }, className: ProgressBar_module_scss_1.default.bar }) }));
-}
+const ProgressBar = (0, react_1.forwardRef)(function ProgressBar({ value = 0, style }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: ProgressBar_module_scss_1.default.wrapper, style: style, ref: ref, children: (0, jsx_runtime_1.jsx)("div", { style: { width: `${value * 100}%` }, className: ProgressBar_module_scss_1.default.bar }) }));
+});
 const metadata = {
     displayName: "ProgressBar",
     description: "Display a progress value",
@@ -21,7 +22,7 @@ const metadata = {
     themeVars: (0, themeVars_1.parseScssVar)(ProgressBar_module_scss_1.default.themeVars),
     defaultThemeVars: {
         "radius-ProgressBar": "$radius",
-        "radius-indicator-ProgressBar": "$radius",
+        "radius-indicator-ProgressBar": "0px",
         "thickness-ProgressBar": "$space-2",
         light: {
             "color-bg-ProgressBar": "$color-surface-200",