xmlui 0.10.5 → 0.10.7

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.5",
+    "version": "0.10.7",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/AppHeader/AppHeader.js

@@ -41,7 +41,7 @@ exports.AppHeaderMd = (0, metadata_helpers_1.createMetadata)({
             "`padding` variants, such as `paddingLeft-logo-AppHeader` and others).",
         [`width‑logo‑${COMP}`]: "Sets the width of the displayed logo",
     },
-    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`padding-drawerToggle-${COMP}`]: "$space-0_5", [`height-${COMP}`]: "$space-14", [`maxWidth-content-${COMP}`]: "$maxWidth-content-App", [`maxWidth-${COMP}`]: "$maxWidth-App", [`borderBottom-${COMP}`]: "1px solid $borderColor" }, (0, base_utils_1.paddingSubject)(`logo-${COMP}`, { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)(COMP, { horizontal: "$space-4", vertical: "$space-0" })), { [`borderRadius-${COMP}`]: "0px", [`backgroundColor-${COMP}`]: "$color-surface-raised" }),
+    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`padding-drawerToggle-${COMP}`]: "$space-0_5", [`height-${COMP}`]: "$space-14", [`maxWidth-content-${COMP}`]: "$maxWidth-content-App", [`maxWidth-${COMP}`]: "$maxWidth-App", [`borderBottom-${COMP}`]: "1px solid $borderColor" }, (0, base_utils_1.paddingSubject)(`logo-${COMP}`, { horizontal: "$space-0", vertical: "$space-0" })), (0, base_utils_1.paddingSubject)(COMP, { horizontal: "$space-4", vertical: "$space-0" })), { [`borderRadius-${COMP}`]: "0px", [`backgroundColor-${COMP}`]: "$color-surface-raised" }),
 });
 exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppHeaderMd, ({ node, renderChild, className, layoutContext, extractValue }) => {
     var _a, _b;

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -59,9 +59,13 @@ exports.defaultProps = {
     tickFormatterY: (value) => value,
     showLegend: false,
 };
+const defaultChartParams = {
+    chartWidth: 800,
+    chartHeight: 300,
+};
 function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, stacked = exports.defaultProps.stacked, dataKeys = [], hideTickX = exports.defaultProps.hideTickX, hideTickY = exports.defaultProps.hideTickY, hideY = exports.defaultProps.hideY, hideX = exports.defaultProps.hideX, hideTooltip = exports.defaultProps.hideTooltip, tickFormatterX = exports.defaultProps.tickFormatterX, tickFormatterY = exports.defaultProps.tickFormatterY, style, className, children, showLegend = exports.defaultProps.showLegend, tooltipRenderer, }) {
     // Validate and normalize data
-    const validData = Array.isArray(data) ? data : [];
+    const validData = (0, react_2.useMemo)(() => (Array.isArray(data) ? data : []), [data]);
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
         if (!tooltipRenderer)
@@ -139,12 +143,21 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
     const wrapperRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const calc = () => {
-            var _a, _b, _c, _d, _e;
-            const width = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 800;
-            const spans = ((_b = labelsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("span")) || [];
+            var _a, _b, _c;
+            const chartWidth = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || defaultChartParams.chartWidth;
+            const chartHeight = ((_b = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || defaultChartParams.chartHeight;
+            const spans = ((_c = labelsRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll("span")) || [];
             const yTicks = Array.from(document.querySelectorAll(".recharts-y-axis .recharts-layer tspan"));
             const maxYTickWidth = yTicks.length > 0 ? Math.max(...yTicks.map((t) => t.getBBox().width)) : 40;
-            setYAxisWidth(maxYTickWidth);
+            // Only update if the value actually changed
+            // NOTE: This might cause recursive calls along with setting the state in here directly. Fix if necessary.
+            setYAxisWidth((prev) => {
+                // Add a small tolerance to prevent micro-adjustments
+                if (Math.abs(maxYTickWidth - prev) > 1) {
+                    return maxYTickWidth;
+                }
+                return prev;
+            });
             const maxWidth = Array.from(spans).reduce((mx, s) => Math.max(mx, s.offsetWidth), 50);
             let angle = 0;
             let anchor = "middle";
@@ -153,14 +166,14 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             let leftMargin = Math.ceil(maxWidth / 3);
             let rightMargin = Math.ceil(maxWidth / 3);
             let xAxisH = Math.ceil(fontSize * 1.2);
-            let maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
+            let maxTicks = Math.max(1, Math.floor(chartWidth / minTickSpacing));
             let skip = Math.max(0, Math.ceil(validData.length / maxTicks) - 1);
             if (skip > 0) {
                 angle = -60;
                 anchor = "end";
                 rad = (Math.abs(angle) * Math.PI) / 180;
                 minTickSpacing = Math.ceil(maxWidth * Math.cos(rad)) + 2;
-                maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
+                maxTicks = Math.max(1, Math.floor(chartWidth / minTickSpacing));
                 skip = Math.max(0, Math.ceil(validData.length / maxTicks) - 1);
                 leftMargin = Math.ceil((maxWidth * Math.cos(rad)) / 1.8);
                 rightMargin = Math.ceil((maxWidth * Math.cos(rad)) / 1.8);
@@ -179,22 +192,65 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
                 bottomMargin = Math.max(xAxisH, maxXTickHeight);
             }
             setChartMargin({ left: leftMargin, right: rightMargin, top: 10, bottom: bottomMargin });
-            const chartHeight = ((_c = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 300;
             const maxYTicks = Math.max(2, Math.floor(chartHeight / (fontSize * 3)));
             setYTickCount(maxYTicks);
             setXAxisHeight(Math.ceil(fontSize));
-            const containerHeight = ((_d = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
-            const containerWidth = ((_e = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _e === void 0 ? void 0 : _e.offsetWidth) || 0;
             const neededHeight = 10 + xAxisHeight + 10 + 32;
             const neededWidth = chartMargin.left + chartMargin.right + yAxisWidth + 32;
-            setMiniMode(neededHeight > containerHeight || neededWidth > containerWidth);
+            setMiniMode(neededHeight > chartHeight || neededWidth > chartWidth);
         };
         calc();
         window.addEventListener("resize", calc);
         return () => window.removeEventListener("resize", calc);
-    }, [data]);
+        // See note above: leaving out yAxisWidth may stop recursive calls but is hacky
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, chartMargin.left, chartMargin.right, layout, validData.length, xAxisHeight]);
     const content = (0, react_2.useMemo)(() => {
-        const chart = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, BarChart_module_scss_1.default.wrapper), style: style, ref: wrapperRef, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, minWidth: 60, minHeight: 60, debounce: 100, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: validData, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: miniMode || hideX, tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX, tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY, tick: miniMode || hideTickY ? false : { fill: "currentColor", fontSize } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: interval, tickLine: false, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize }, tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: miniMode || hideTickY ? false : { fill: "currentColor", fontSize }, hide: miniMode || hideY, tickCount: yTickCount, tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY, width: miniMode || hideY || hideTickY ? 0 : 40 })] })), !miniMode && !hideTooltip && ((0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer })), validData.length > 0 && Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1 }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+        // NOTE: Had to place props separately since, for some reason, Recharts cannot handle
+        // if the axes are placed in a React.Fragment. Unsure why, because this worked before.
+        const xAxisProps = layout === "vertical"
+            ? {
+                type: "number",
+                axisLine: false,
+                hide: miniMode || hideX,
+                height: miniMode || hideX ? 0 : xAxisHeight,
+                tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
+                tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
+            }
+            : {
+                type: "category",
+                dataKey: nameKey,
+                hide: miniMode || hideX,
+                height: miniMode || hideX ? 0 : xAxisHeight,
+                tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
+                tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
+                interval: interval,
+                tickLine: false,
+                angle: tickAngle,
+                textAnchor: tickAnchor,
+            };
+        const yAxisProps = layout === "vertical"
+            ? {
+                type: "category",
+                dataKey: nameKey,
+                hide: miniMode || hideY,
+                interval: "equidistantPreserveStart",
+                tickLine: false,
+                tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
+                tick: miniMode || hideTickY ? false : { fill: "currentColor", fontSize },
+                width: miniMode || hideY ? 0 : yAxisWidth,
+            }
+            : {
+                type: "number",
+                axisLine: false,
+                tick: miniMode || hideTickY ? false : { fill: "currentColor", fontSize },
+                hide: miniMode || hideY,
+                tickCount: yTickCount,
+                tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
+                width: miniMode || hideY ? 0 : yAxisWidth,
+            };
+        const chart = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, BarChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), ref: wrapperRef, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, minWidth: 60, minHeight: 60, debounce: 100, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: validData, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({}, xAxisProps)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({}, yAxisProps)), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), validData.length > 0 &&
+                            Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1 }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
                                 bottom: 0,
                                 left: 0,
                                 right: 0,
@@ -206,7 +262,6 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
     }, [
         chartMargin,
         config,
-        data,
         hideTickX,
         hideTickY,
         hideX,
@@ -224,8 +279,11 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
         tickFormatterX,
         tickFormatterY,
         xAxisHeight,
+        yAxisWidth,
         yTickCount,
         safeTooltipRenderer,
+        hideTooltip,
+        validData,
     ]);
     return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: validData
                     .map((d) => d[nameKey])

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -55,6 +55,9 @@ exports.defaultProps = {
     tickFormatterX: (value) => value,
     tickFormatterY: (value) => value,
 };
+const defaultChartParams = {
+    chartWidth: 800,
+};
 exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys = [], nameKey, style, className, hideX = exports.defaultProps.hideX, hideY = exports.defaultProps.hideY, hideTickX = exports.defaultProps.hideTickX, hideTickY = exports.defaultProps.hideTickY, hideTooltip = exports.defaultProps.hideTooltip, tickFormatterX = exports.defaultProps.tickFormatterX, tickFormatterY = exports.defaultProps.tickFormatterY, children, showLegend = exports.defaultProps.showLegend, tooltipRenderer, }, forwardedRef) {
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const colorValues = (0, react_1.useMemo)(() => {
@@ -122,7 +125,7 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
     (0, react_1.useEffect)(() => {
         const calc = () => {
             var _a, _b, _c;
-            const width = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 800;
+            const width = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || defaultChartParams.chartWidth;
             const spans = ((_b = labelsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("span")) || [];
             const maxWidth = Array.from(spans).reduce((mx, s) => Math.max(mx, s.offsetWidth), 50);
             let angle = 0;
@@ -157,14 +160,14 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
         calc();
         window.addEventListener("resize", calc);
         return () => window.removeEventListener("resize", calc);
-    }, [data, nameKey, xAxisHeight]);
+    }, [data, nameKey, xAxisHeight, safeData.length, fontSize]);
     // The stroke width of the lines
     const strokeWidth = getThemeVar("width-line-LineChart");
     return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: safeData.length > 0 && nameKey
                     ? safeData
                         .map((d) => d === null || d === void 0 ? void 0 : d[nameKey])
                         .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx)))
-                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: style, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 60, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize } }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize } }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
                                     bottom: 0,
                                     left: 0,
                                     right: 0,

package/dist/scripts/src/components/FormItem/ItemWithLabel.js

@@ -28,6 +28,12 @@ exports.defaultProps = {
 const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref) {
     var { id, labelPosition = "top", style = {}, className, label, labelBreak = exports.defaultProps.labelBreak, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false } = _a, rest = __rest(_a, ["id", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed"]);
+    // --- HACK: the "rest" may contain a "layoutContext" property with undefined value, and it
+    // --- would issue a warning in React.
+    if (rest.layoutContext === undefined) {
+        delete rest.layoutContext;
+    }
+    // --- END HACK
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     if (label === undefined && !validationResult) {

package/dist/scripts/src/components/Link/Link.js

@@ -35,6 +35,11 @@ exports.LinkMd = (0, metadata_helpers_1.createMetadata)({
         label: (0, metadata_helpers_1.dLabel)(),
         icon: (0, metadata_helpers_1.d)(`This property allows you to add an optional icon (specify the icon's name) to the link.`),
     },
+    events: {
+        click: {
+            description: "This event is triggered when the link is clicked."
+        }
+    },
     themeVars: (0, themeVars_1.parseScssVar)(Link_module_scss_1.default.themeVars),
     themeVarDescriptions: {
         [`gap-icon-${COMP}`]: "This property defines the size of the gap between the icon and the label.",
@@ -69,9 +74,9 @@ exports.LinkMd = (0, metadata_helpers_1.createMetadata)({
 /**
  * This function define the renderer for the Limk component.
  */
-exports.localLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LinkMd, ({ node, extractValue, renderChild, className }) => {
+exports.localLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LinkMd, ({ node, extractValue, renderChild, lookupEventHandler, className }) => {
     var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, { to: extractValue(node.props.to), icon: extractValue(node.props.icon), active: extractValue.asOptionalBoolean(node.props.active, false), target: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.target), className: className, disabled: !extractValue.asOptionalBoolean((_b = node.props.enabled) !== null && _b !== void 0 ? _b : true), children: node.props.label
+    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, { to: extractValue(node.props.to), icon: extractValue(node.props.icon), active: extractValue.asOptionalBoolean(node.props.active, false), target: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.target), className: className, disabled: !extractValue.asOptionalBoolean((_b = node.props.enabled) !== null && _b !== void 0 ? _b : true), onClick: lookupEventHandler("click"), children: node.props.label
             ? extractValue.asDisplayText(node.props.label)
             : renderChild(node.children) }));
 });

package/dist/scripts/src/components/ModalDialog/ModalDialog.js

@@ -73,5 +73,5 @@ exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, layoutContext: { _insideModalFrame: true }, contextVars: { $param: openParams === null || openParams === void 0 ? void 0 : openParams[0], $params: openParams } }));
             } }));
     }
-    return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { className: className, fullScreen: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), children: renderChild(node.children, { type: "Stack" }) }));
+    return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { className: className, fullScreen: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), children: renderChild(node.children, { type: "Stack" }) }));
 });

package/dist/scripts/src/components/Toggle/Toggle.js

@@ -160,7 +160,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle(_a, forwardedRef) {
         indeterminate,
         autoFocus,
     ]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, id: inputId, label: label, style: Object.assign(Object.assign({}, style), { width: "fit-content" }), className: className, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, isInputTemplateUsed: !!inputRenderer, shrinkToLabel: true, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: inputRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: Toggle_module_scss_1.default.label, children: [(0, jsx_runtime_1.jsx)("div", { className: Toggle_module_scss_1.default.inputContainer, children: input }), inputRenderer({
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, id: inputId, label: label, style: style, className: className, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, isInputTemplateUsed: !!inputRenderer, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: inputRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: Toggle_module_scss_1.default.label, children: [(0, jsx_runtime_1.jsx)("div", { className: Toggle_module_scss_1.default.inputContainer, children: input }), inputRenderer({
                     $checked: transformToLegitValue(value),
                     $setChecked: setValue,
                 })] })) : (input) })));

package/dist/scripts/src/components-core/RestApiProxy.js

@@ -41,6 +41,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_es_1 = require("lodash-es");
 const ScriptingSourceTree_1 = require("./script-runner/ScriptingSourceTree");
@@ -102,7 +103,7 @@ function appendFormFieldValue({ key, value }, formData, prevKey = key) {
         formData.append(key, value.toString());
     }
 }
-const origin = typeof window !== "undefined" && (window.location.href || 'http://localhost');
+const origin = (typeof window !== "undefined" && ((_a = window.location) === null || _a === void 0 ? void 0 : _a.href)) || 'http://localhost';
 const originUrl = new URL(origin);
 function isURLSameOrigin(url) {
     const urlObj = new URL(url, origin);