xmlui 0.9.51 → 0.9.52

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

@@ -17,7 +17,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is an input component that allows users to input and edit textual data.`,
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: TextBoxNative_1.defaultProps.initialValue }),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
@@ -26,14 +26,15 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        enabled: Object.assign(Object.assign({}, (0, metadata_helpers_1.dEnabled)()), { defaultValue: TextBoxNative_1.defaultProps.enabled }),
+        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: TextBoxNative_1.defaultProps.validationStatus }),
         startText: (0, metadata_helpers_1.dStartText)(),
         startIcon: (0, metadata_helpers_1.dStartIcon)(),
         endText: (0, metadata_helpers_1.dEndText)(),
         endIcon: (0, metadata_helpers_1.dEndIcon)(),
         gap: {
-            description: "This property defines the gap between the adornments and the input area.",
+            description: "This property defines the gap between the adornments and the input area. If not " +
+                "set, the gap declared by the current theme is used.",
         },
     },
     events: {

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextBox = void 0;
+exports.TextBox = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = __importStar(require("react"));
@@ -46,7 +46,19 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, onKeyDown = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
+exports.defaultProps = {
+    type: "text",
+    value: "",
+    initialValue: "",
+    enabled: true,
+    validationStatus: "none",
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+    onKeyDown: constants_1.noop,
+    updateState: constants_1.noop,
+};
+exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = exports.defaultProps.type, value = exports.defaultProps.value, updateState = exports.defaultProps.updateState, initialValue = exports.defaultProps.initialValue, style, maxLength, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onKeyDown = exports.defaultProps.onKeyDown, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
     const _id = (0, react_1.useId)();
     id = id || _id;
     const inputRef = (0, react_2.useRef)(null);

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

@@ -31,7 +31,7 @@ exports.ThemeMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "string",
             defaultValue: "light",
         },
-        root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`),
+        root: (0, ComponentDefs_1.d)(`This property indicates whether the component is at the root of the application.`, undefined, "boolean", ThemeNative_1.defaultProps.root),
     },
     opaque: true,
 });

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.Theme = Theme;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -15,7 +16,6 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const ErrorBoundary_1 = require("../../components-core/rendering/ErrorBoundary");
 const NotificationToast_1 = require("./NotificationToast");
-const InspectorContext_1 = require("../../components-core/InspectorContext");
 const IndexerContext_1 = require("../App/IndexerContext");
 function getClassName(css) {
     return `theme-${calculateHash(css)}`;
@@ -31,7 +31,13 @@ function calculateHash(str) {
     }
     return hash;
 }
-function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 5000, themeVars = constants_1.EMPTY_OBJECT, layoutContext, children, }) {
+exports.defaultProps = {
+    isRoot: false,
+    toastDuration: 5000,
+    themeVars: constants_1.EMPTY_OBJECT,
+    root: false,
+};
+function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, tone, toastDuration = exports.defaultProps.toastDuration, themeVars = exports.defaultProps.themeVars, layoutContext, children, }) {
     const generatedId = (0, react_1.useId)();
     const { themes, resources, resourceMap, activeThemeId, setRoot, root } = (0, ThemeContext_1.useThemes)();
     const { activeTheme, activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -112,16 +118,6 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         getResourceUrl,
         getThemeVar,
     ]);
-    const { devToolsSize, devToolsSide, devToolsEnabled } = (0, InspectorContext_1.useDevTools)();
-    const inspectStyle = (0, react_1.useMemo)(() => {
-        return devToolsEnabled
-            ? {
-                paddingBottom: devToolsSide === "bottom" ? devToolsSize : 0,
-                paddingLeft: devToolsSide === "left" ? devToolsSize : 0,
-                paddingRight: devToolsSide === "right" ? devToolsSize : 0,
-            }
-            : {};
-    }, [devToolsEnabled, devToolsSide, devToolsSize]);
     const { indexing } = (0, IndexerContext_1.useIndexerContext)();
     if (indexing) {
         return children;
@@ -130,7 +126,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
         return (
         // <ThemeContext.Provider value={currentThemeContextValue}>
-        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", "data-theme-root": true, children: `.${className}  {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
+        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", "data-theme-root": true, dangerouslySetInnerHTML: { __html: `.${className}  {${css}}` } }), (0, jsx_runtime_1.jsxs)("div", { id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
                         if (el) {
                             setRoot(el);
                         }
@@ -138,7 +134,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         // </ThemeContext.Provider>
         );
     }
-    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, Theme_module_scss_1.default.wrapper, className), children: renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })) }), root &&
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", dangerouslySetInnerHTML: { __html: `.${className}  {${css}}` } }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, Theme_module_scss_1.default.wrapper, className), children: renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })) }), root &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {
                         if (el) {
                             setThemeRoot(el);

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toneChangerButtonComponentRenderer = exports.ToneChangerButtonMd = void 0;
+exports.toneChangerButtonComponentRenderer = exports.ToneChangerButtonMd = exports.defaultProps = void 0;
 exports.ToneChangerButton = ToneChangerButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
@@ -11,19 +11,29 @@ const IconNative_1 = require("../Icon/IconNative");
 const COMP = "ToneChangerButton";
 const LIGHT_TO_DARK_ICON = "lightToDark:ToneChangerButton";
 const DARK_TO_LIGHT_ICON = "darkToLight:ToneChangerButton";
+exports.defaultProps = {
+    lightToDarkIcon: LIGHT_TO_DARK_ICON,
+    darkToLightIcon: DARK_TO_LIGHT_ICON
+};
 exports.ToneChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: `The \`${COMP}\` component is a component that allows the user to change the tone of the app.`,
     props: {
-        lightToDarkIcon: (0, ComponentDefs_1.d)(`The icon displayed when the theme is in light mode and will switch to dark. You can change ` +
-            `the default icon for all ${COMP} instances with the "icon.lightToDark:ToneChangerButton" ` +
-            `declaration in the app configuration file.`),
-        darkToLightIcon: (0, ComponentDefs_1.d)(`The icon displayed when the theme is in dark mode and will switch to light. You can change ` +
-            `the default icon for all ${COMP} instances with the "icon.darkToLight:ToneChangerButton" ` +
-            `declaration in the app configuration file.`),
+        lightToDarkIcon: {
+            description: `The icon displayed when the theme is in light mode and will switch to dark. You can change ` +
+                `the default icon for all ${COMP} instances with the "icon.lightToDark:ToneChangerButton" ` +
+                `declaration in the app configuration file.`,
+            defaultValue: exports.defaultProps.lightToDarkIcon,
+        },
+        darkToLightIcon: {
+            description: `The icon displayed when the theme is in dark mode and will switch to light. You can change ` +
+                `the default icon for all ${COMP} instances with the "icon.darkToLight:ToneChangerButton" ` +
+                `declaration in the app configuration file.`,
+            defaultValue: exports.defaultProps.darkToLightIcon,
+        },
     },
 });
-function ToneChangerButton({ lightToDarkIcon = LIGHT_TO_DARK_ICON, darkToLightIcon = DARK_TO_LIGHT_ICON }) {
+function ToneChangerButton({ lightToDarkIcon = exports.defaultProps.lightToDarkIcon, darkToLightIcon = exports.defaultProps.darkToLightIcon }) {
     const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
     // Use the direct icon name as both the main icon and the fallback
     // This ensures we always have a working icon

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

@@ -26,7 +26,7 @@ exports.TreeDisplayMd = (0, ComponentDefs_1.createMetadata)({
         itemHeight: {
             description: "The height of each tree item in pixels.",
             valueType: "number",
-            defaultValue: 24,
+            defaultValue: TreeDisplayNative_1.defaultProps.itemHeight,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(TreeDisplay_module_scss_1.default.themeVars),

package/dist/scripts/src/components/TreeDisplay/TreeDisplayNative.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const TreeDisplay_module_scss_1 = __importDefault(require("./TreeDisplay.module.scss"));
 exports.defaultProps = {
     content: "",
+    itemHeight: 24
 };
 // Parse the indented text into a tree structure
 const parseTreeContent = (content) => {
@@ -95,7 +96,7 @@ const renderTreeNode = (node, index, itemHeight, level = 0, ancestorLines = [])
                     return renderTreeNode(child, i, itemHeight, level + 1, newAncestorLines);
                 }) }))] }, `${node.label}-${index}`));
 };
-exports.TreeDisplay = (0, react_1.forwardRef)(function TreeDisplay({ style, children, content = "", itemHeight = 24 }, forwardedRef) {
+exports.TreeDisplay = (0, react_1.forwardRef)(function TreeDisplay({ style, children, content = exports.defaultProps.content, itemHeight = exports.defaultProps.itemHeight }, forwardedRef) {
     const contentString = (content || (children === null || children === void 0 ? void 0 : children.toString()) || "").toString();
     const treeNodes = (0, react_1.useMemo)(() => parseTreeContent(contentString), [contentString]);
     return ((0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.treeDisplay, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.content, children: treeNodes.map((node, index) => renderTreeNode(node, index, itemHeight, 0, [])) }) }));

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

@@ -1,59 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidationSummary = ValidationSummary;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@formkit/auto-animate/react");
-const classnames_1 = __importDefault(require("classnames"));
-const ValidationSummary_module_scss_1 = __importDefault(require("./ValidationSummary.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const StackNative_1 = require("../Stack/StackNative");
-const IconNative_1 = require("../Icon/IconNative");
-const TextNative_1 = require("../Text/TextNative");
-const SpaceFillerNative_1 = require("../SpaceFiller/SpaceFillerNative");
-const ButtonNative_1 = require("../Button/ButtonNative");
-function ValidationSummary({ fieldValidationResults = constants_1.EMPTY_OBJECT, generalValidationResults = constants_1.EMPTY_ARRAY, }) {
-    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
-    const groupedInvalidResults = (0, react_1.useMemo)(() => {
-        const ret = {};
-        Object.entries(fieldValidationResults).forEach(([field, validationResult]) => {
-            validationResult.validations.forEach((singleValidationResult) => {
-                if (!singleValidationResult.isValid) {
-                    ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
-                    ret[singleValidationResult.severity].push({
-                        field,
-                        message: singleValidationResult.invalidMessage || "",
-                    });
-                }
-            });
-        });
-        generalValidationResults.forEach((singleValidationResult) => {
-            ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
-            ret[singleValidationResult.severity].push({
-                message: singleValidationResult.invalidMessage || "",
-            });
-        });
-        return ret;
-    }, [fieldValidationResults, generalValidationResults]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: animateContainerRef, className: ValidationSummary_module_scss_1.default.summaryContainer, "data-validation-summary": true, children: [(0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.warning, severity: "warning", heading: "Validation warnings" }), (0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.error, severity: "error", heading: "Validation errors" })] }));
-}
-const ValidationDisplay = ({ heading, issues = constants_1.EMPTY_ARRAY, severity = "error", onClose, }) => {
-    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
-    if (issues.length === 0) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ValidationSummary_module_scss_1.default.validationContainer, {
-            [ValidationSummary_module_scss_1.default.valid]: severity === "valid",
-            [ValidationSummary_module_scss_1.default.info]: severity === "info",
-            [ValidationSummary_module_scss_1.default.warning]: severity === "warning",
-            [ValidationSummary_module_scss_1.default.error]: severity === "error",
-        }), style: { paddingTop: !onClose ? "0.5rem" : undefined }, "data-validation-display-severity": severity, children: [(0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { className: ValidationSummary_module_scss_1.default.heading, name: severity, size: "md" }), (0, jsx_runtime_1.jsx)("div", { className: ValidationSummary_module_scss_1.default.heading, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: heading }) }), !!onClose && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpaceFillerNative_1.SpaceFiller, {}), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: onClose, variant: "ghost", themeColor: "secondary", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" })] }))] }), (0, jsx_runtime_1.jsx)("ul", { ref: animateContainerRef, children: issues.map((issue, i) => ((0, jsx_runtime_1.jsx)(ValidationEntry, { issue: issue }, i))) })] }));
-};
-// --- ValidationEntry
-const ValidationEntry = ({ issue }) => {
-    const { field, message } = issue;
-    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("span", { style: { display: "inline-flex", gap: field ? "0.25rem" : undefined }, children: [field && (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", fontWeight: "bold", children: `${field}:` }), (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", preserveLinebreaks: true, children: message })] }) }));
-};
+exports.ValidationSummary = void 0;
+const ValidationSummaryNative_1 = require("./ValidationSummaryNative");
+exports.ValidationSummary = ValidationSummaryNative_1.ValidationSummary;

package/dist/scripts/src/components/ValidationSummary/ValidationSummaryNative.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
+exports.ValidationSummary = ValidationSummary;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@formkit/auto-animate/react");
+const classnames_1 = __importDefault(require("classnames"));
+const ValidationSummary_module_scss_1 = __importDefault(require("./ValidationSummary.module.scss"));
+const constants_1 = require("../../components-core/constants");
+const StackNative_1 = require("../Stack/StackNative");
+const IconNative_1 = require("../Icon/IconNative");
+const TextNative_1 = require("../Text/TextNative");
+const SpaceFillerNative_1 = require("../SpaceFiller/SpaceFillerNative");
+const ButtonNative_1 = require("../Button/ButtonNative");
+exports.defaultProps = {
+    fieldValidationResults: constants_1.EMPTY_OBJECT,
+    generalValidationResults: constants_1.EMPTY_ARRAY,
+};
+function ValidationSummary({ fieldValidationResults = exports.defaultProps.fieldValidationResults, generalValidationResults = exports.defaultProps.generalValidationResults, }) {
+    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    const groupedInvalidResults = (0, react_1.useMemo)(() => {
+        const ret = {};
+        Object.entries(fieldValidationResults).forEach(([field, validationResult]) => {
+            validationResult.validations.forEach((singleValidationResult) => {
+                if (!singleValidationResult.isValid) {
+                    ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+                    ret[singleValidationResult.severity].push({
+                        field,
+                        message: singleValidationResult.invalidMessage || "",
+                    });
+                }
+            });
+        });
+        generalValidationResults.forEach((singleValidationResult) => {
+            ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+            ret[singleValidationResult.severity].push({
+                message: singleValidationResult.invalidMessage || "",
+            });
+        });
+        return ret;
+    }, [fieldValidationResults, generalValidationResults]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: animateContainerRef, className: ValidationSummary_module_scss_1.default.summaryContainer, "data-validation-summary": true, children: [(0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.warning, severity: "warning", heading: "Validation warnings" }), (0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.error, severity: "error", heading: "Validation errors" })] }));
+}
+const ValidationDisplay = ({ heading, issues = constants_1.EMPTY_ARRAY, severity = "error", onClose, }) => {
+    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    if (issues.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ValidationSummary_module_scss_1.default.validationContainer, {
+            [ValidationSummary_module_scss_1.default.valid]: severity === "valid",
+            [ValidationSummary_module_scss_1.default.info]: severity === "info",
+            [ValidationSummary_module_scss_1.default.warning]: severity === "warning",
+            [ValidationSummary_module_scss_1.default.error]: severity === "error",
+        }), style: { paddingTop: !onClose ? "0.5rem" : undefined }, "data-validation-display-severity": severity, children: [(0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { className: ValidationSummary_module_scss_1.default.heading, name: severity, size: "md" }), (0, jsx_runtime_1.jsx)("div", { className: ValidationSummary_module_scss_1.default.heading, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: heading }) }), !!onClose && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpaceFillerNative_1.SpaceFiller, {}), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: onClose, variant: "ghost", themeColor: "secondary", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" })] }))] }), (0, jsx_runtime_1.jsx)("ul", { ref: animateContainerRef, children: issues.map((issue, i) => ((0, jsx_runtime_1.jsx)(ValidationEntry, { issue: issue }, i))) })] }));
+};
+// --- ValidationEntry
+const ValidationEntry = ({ issue }) => {
+    const { field, message } = issue;
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("span", { style: { display: "inline-flex", gap: field ? "0.25rem" : undefined }, children: [field && (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", fontWeight: "bold", children: `${field}:` }), (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", preserveLinebreaks: true, children: message })] }) }));
+};

package/dist/scripts/src/components/metadata-helpers.js

@@ -71,7 +71,8 @@ function dIndeterminate(defaultValue) {
 }
 function dLabel() {
     return {
-        description: `This property sets the label of the component.`,
+        description: "This property sets the label of the component.  " +
+            "If not set, the component will not display a label.",
         valueType: "string",
     };
 }
@@ -84,12 +85,13 @@ function dLabelPosition(def) {
 }
 function dLabelWidth(comp) {
     return {
-        description: `This property sets the width of the \`${comp}\`.`,
+        description: `This property sets the width of the \`${comp}\` component's label. ` +
+            "If not defined, the label's width will be determined by its content and the available space.",
     };
 }
 function dLabelBreak(comp) {
     return {
-        description: `This boolean value indicates if the \`${comp}\` labels can be split into multiple ` +
+        description: `This boolean value indicates if the \`${comp}\` label can be split into multiple ` +
             `lines if it would overflow the available label width.`,
         valueType: "boolean",
         defaultValue: false,
@@ -156,7 +158,7 @@ function dComponent(description) {
 }
 function dPlaceholder() {
     return {
-        description: `A placeholder text that is visible in the input field when its empty.`,
+        description: `An optional placeholder text that is visible in the input field when its empty.`,
         valueType: "string",
     };
 }
@@ -171,32 +173,33 @@ function dRequired() {
         description: `Set this property to \`true\` to indicate it must have a value ` +
             `before submitting the containing form.`,
         valueType: "boolean",
+        defaultValue: false,
     };
 }
 function dStartText() {
     return {
-        description: `This property sets a text to appear at the start (left side when the ` +
+        description: `This property sets an optional text to appear at the start (left side when the ` +
             `left-to-right direction is set) of the input.`,
         valueType: "string",
     };
 }
 function dStartIcon() {
     return {
-        description: `This property sets an icon to appear at the start (left side when the ` +
+        description: `This property sets an optional icon to appear at the start (left side when the ` +
             `left-to-right direction is set) of the input.`,
         valueType: "string",
     };
 }
 function dEndText() {
     return {
-        description: `This property sets a text to appear on the end (right side when the ` +
+        description: `This property sets an optional text to appear on the end (right side when the ` +
             `left-to-right direction is set) of the input.`,
         valueType: "string",
     };
 }
 function dEndIcon() {
     return {
-        description: `This property sets an icon to appear on the end (right side when the ` +
+        description: `This property sets an optional icon to appear on the end (right side when the ` +
             `left-to-right direction is set) of the input.`,
         valueType: "string",
     };

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

@@ -209,10 +209,6 @@ function useDevTools() {
         inspectedNode: context === null || context === void 0 ? void 0 : context.inspectedNode,
         sources: context === null || context === void 0 ? void 0 : context.sources,
         setIsOpen: context === null || context === void 0 ? void 0 : context.setIsOpen,
-        devToolsSize: context === null || context === void 0 ? void 0 : context.devToolsSize,
-        setDevToolsSize: context === null || context === void 0 ? void 0 : context.setDevToolsSize,
-        devToolsSide: context === null || context === void 0 ? void 0 : context.devToolsSide,
-        setDevToolsSide: context === null || context === void 0 ? void 0 : context.setDevToolsSide,
         devToolsEnabled: context === null || context === void 0 ? void 0 : context.devToolsEnabled,
         mockApi: context === null || context === void 0 ? void 0 : context.mockApi,
     };

package/dist/scripts/src/components-core/interception/ApiInterceptor.js

@@ -170,7 +170,7 @@ class ApiInterceptor {
                         status: successStatusCode,
                     });
                 }
-                console.log(operationId, ret);
+                // console.log(operationId, ret)
                 return msw_1.HttpResponse.json(ret, {
                     headers: headers,
                     status: successStatusCode,

package/dist/scripts/src/components-core/interception/ApiInterceptorProvider.js

@@ -50,6 +50,7 @@ const useApiInterceptorContext_1 = require("./useApiInterceptorContext");
 // This React component injects the API interceptor into the application's context
 function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, }) {
     const [initialized, setInitialized] = (0, react_1.useState)(!interceptor);
+    const [interceptorWorker, setInterceptorWorker] = (0, react_1.useState)(null);
     // --- Whenever the interceptor changes, update the provider accordingly
     (0, react_1.useEffect)(() => {
         if (interceptor) {
@@ -62,6 +63,7 @@ function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBased
                     const { createApiInterceptorWorker } = yield Promise.resolve().then(() => __importStar(require("./apiInterceptorWorker")));
                     if (interceptor) {
                         interceptorWorker = yield createApiInterceptorWorker(interceptor, apiWorker);
+                        setInterceptorWorker(interceptorWorker);
                         // if the apiWorker comes from the outside, we don't handle the lifecycle here
                         if (!apiWorker) {
                             const workerFileLocation = (0, misc_1.normalizePath)(process.env.VITE_MOCK_WORKER_LOCATION || "mockServiceWorker.js");
@@ -87,8 +89,10 @@ function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBased
     }, [apiWorker, interceptor, useHashBasedRouting]);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
+            interceptorWorker,
+            initialized: initialized,
             isMocked: (url) => interceptor !== undefined && !!process.env.VITE_MOCK_ENABLED,
         };
-    }, [interceptor]);
-    return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: initialized ? children || null : null }));
+    }, [interceptorWorker, initialized, interceptor]);
+    return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: children }));
 }

package/dist/scripts/src/components-core/loader/DataLoader.js

@@ -275,7 +275,7 @@ function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, lo
                 return;
             }
         }
-        const errorMessage = (0, extractParam_1.extractParam)(Object.assign(Object.assign({}, stateRef.current.state), { $error: error }), loader.props.errorNotificationMessage, stateRef.current.appContext);
+        const errorMessage = (0, extractParam_1.extractParam)(Object.assign(Object.assign({}, stateRef.current.state), { $error: error === null || error === void 0 ? void 0 : error.toString() }), loader.props.errorNotificationMessage, stateRef.current.appContext);
         if (errorMessage) {
             react_hot_toast_1.default.error(errorMessage, {
                 id: loadingToastIdRef.current,

package/dist/scripts/src/components-core/loader/Loader.js

@@ -16,18 +16,22 @@ const immer_1 = require("immer");
 const extractParam_1 = require("../utils/extractParam");
 const AppContext_1 = require("../AppContext");
 const hooks_1 = require("../utils/hooks");
+const useApiInterceptorContext_1 = require("../interception/useApiInterceptorContext");
 function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, registerComponentApi, onLoaded, loaderLoaded, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, transformResult, structuralSharing = true }) {
     const { uid } = loader;
     const appContext = (0, AppContext_1.useAppContext)();
+    const { initialized } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
     // --- Rely on react-query to decide when data fetching should use the cache or when is should fetch the data from
     // --- its data source.
     // --- data: The data obtained by the query
     // --- status: Query execution status
     // --- error: Error information about the current query error (in "error" state)
     // --- refetch: The function that can be used to re-fetch the data (because of data/state changes)
-    const { data, status, isFetching, error, refetch, isRefetching } = (0, react_query_1.useQuery)({
+    const { data, status, isFetching, isLoading, error, refetch, isRefetching } = (0, react_query_1.useQuery)({
         queryKey: (0, react_1.useMemo)(() => (queryId ? queryId : [uid, (0, extractParam_1.extractParam)(state, loader.props, appContext)]), [appContext, loader.props, queryId, state, uid]),
         structuralSharing,
+        //we pause the loaders if the apiInterceptor is not initialized (true when the app is not using mockApi)
+        enabled: initialized,
         queryFn: (0, react_1.useCallback)((_a) => __awaiter(this, [_a], void 0, function* ({ signal }) {
             // console.log("[Loader queryFn] Starting to fetch data...");
             try {
@@ -77,8 +81,8 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
     const prevData = (0, hooks_1.usePrevious)(data);
     const prevError = (0, hooks_1.usePrevious)(error);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        loaderInProgressChanged(isFetching);
-    }, [isFetching, loaderInProgressChanged]);
+        loaderInProgressChanged(isFetching || isLoading);
+    }, [isLoading, isFetching, loaderInProgressChanged]);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         loaderIsRefetchingChanged(isRefetching);
     }, [isRefetching, loaderIsRefetchingChanged]);

package/dist/scripts/src/components-core/theming/themes/palette.js

@@ -6,17 +6,18 @@ exports.palette = {
     $colorSurface50: "$color-surface-50",
     $colorSurface100: "$color-surface-100",
     $colorSurface200: "$color-surface-200",
-    $colorSurface200A80: "rgba($color-surface-200-rgb, .8)",
+    $colorSurface200A70: "rgb(from $color-surface-200 r g b / 0.7)",
+    $colorSurface200A80: "rgb(from $color-surface-200 r g b / 0.8)",
     $colorSurface300: "$color-surface-300",
-    $colorSurface400A80: "rgba($color-surface-400-rgb, .8)",
+    $colorSurface400A80: "rgb(from $color-surface-400 r g b / 0.8)",
     $colorSurface400: "$color-surface-400",
     $colorSurface500: "$color-surface-500",
     $colorSurface500A80: "rgba($color-surface-500, .8)",
     $colorSurface500A60: "rgba($color-surface-500, .6)",
     $colorSurface600: "$color-surface-600",
     $colorSurface700: "$color-surface-700",
-    $colorSurface700A30: "rgba($color-surface-700-rgb, .3)",
-    $colorSurface700A90: "rgba($color-surface-700-rgb, .9)",
+    $colorSurface700A30: "rgb(from $color-surface-700 r g b / 0.3)",
+    $colorSurface700A90: "rgb(from $color-surface-700 r g b / 0.9)",
     $colorSurface800: "$color-surface-800",
     $colorSurface900: "$color-surface-900",
     $colorSurface950: "$color-surface-950",

package/dist/scripts/src/components-core/theming/themes/root.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RootThemeDefinition = void 0;
 const palette_1 = require("./palette");
-const { $colorSurface0, $colorSurface50, $colorSurface100, $colorSurface200, $colorSurface300, $colorSurface400, $colorSurface500, $colorSurface500A80, $colorSurface500A60, $colorSurface600, $colorSurface700, $colorSurface800, $colorSurface900, $colorSurface950, $colorPrimary50, $colorPrimary950, $colorWarn700, $colorDanger400, $colorDanger500, $colorDanger600, $colorDanger700, $colorSuccess600, $colorInfo600, $colorInfo800, } = palette_1.palette;
+const { $colorSurface0, $colorSurface50, $colorSurface100, $colorSurface200A80, $colorSurface200A70, $colorSurface200, $colorSurface300, $colorSurface400, $colorSurface500, $colorSurface500A80, $colorSurface500A60, $colorSurface600, $colorSurface700, $colorSurface800, $colorSurface900, $colorSurface950, $colorPrimary50, $colorPrimary950, $colorWarn700, $colorDanger400, $colorDanger500, $colorDanger600, $colorDanger700, $colorSuccess600, $colorInfo600, $colorInfo800, } = palette_1.palette;
 // --- This theme contains the application-bound base theme variables and their default values.
 // --- Individual controls also add their component-specific default theme variable values.
 exports.RootThemeDefinition = {
@@ -147,7 +147,7 @@ exports.RootThemeDefinition = {
         "maxWidth-large-desktop": "1400px",
         // --- The app's default radius value
         borderRadius: "4px",
-        "outlineColor--focus": "rgba($color-primary-500-rgb, .5)",
+        "outlineColor--focus": "rgb(from $color-primary-500 r g b / 0.5)",
         "outlineWidth--focus": "2px",
         "outlineStyle--focus": "solid",
         "outlineOffset--focus": "0",
@@ -160,6 +160,7 @@ exports.RootThemeDefinition = {
         "fontSize-medium": "1.25rem",
         "fontSize-normal": "1rem",
         "fontSize-small": "0.875rem",
+        "fontSize-code": "0.75rem",
         "fontSize-smaller": "0.75rem",
         "fontSize-tiny": "0.625rem",
         // --- The default font size
@@ -201,8 +202,8 @@ exports.RootThemeDefinition = {
         "backgroundColor-dropdown-item--active-hover": $colorSurface50,
         "backgroundColor-tree-row--selected--before": $colorPrimary50,
         // --- Border colors
-        "borderColor": $colorSurface200,
-        "borderColor--disabled": $colorSurface200,
+        "borderColor": "rgb(from $color-surface-900 r g b / 0.1)",
+        "borderColor--disabled": $colorSurface100,
         // --- Text colors
         "textColor-secondary": $colorSurface600,
         // --- Input is an abstract component, so we define its default theme variables here

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -35,8 +35,7 @@ function generateBaseTones(theme) {
         return {};
     }
     const resolvedTheme = resolveThemeVars(theme);
-    let colorTones = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generateBaseTonesForColor("color-primary", resolvedTheme)), generateBaseTonesForColor("color-secondary", resolvedTheme)), generateBaseTonesForColor("color-info", resolvedTheme)), generateBaseTonesForColor("color-success", resolvedTheme)), generateBaseTonesForColor("color-warn", resolvedTheme)), generateBaseTonesForColor("color-danger", resolvedTheme)), generateBaseTonesForColor("color-surface", resolvedTheme, { distributeEven: true }));
-    return Object.assign(Object.assign(Object.assign(Object.assign({}, colorTones), generateRbgChannelsForTone("color-surface", Object.assign(Object.assign({}, resolvedTheme), colorTones))), generateRbgChannelsForTone("color-primary", Object.assign(Object.assign({}, resolvedTheme), colorTones))), generateRbgChannelsForTone("color-secondary", Object.assign(Object.assign({}, resolvedTheme), colorTones)));
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generateBaseTonesForColor("color-primary", resolvedTheme)), generateBaseTonesForColor("color-secondary", resolvedTheme)), generateBaseTonesForColor("color-info", resolvedTheme)), generateBaseTonesForColor("color-success", resolvedTheme)), generateBaseTonesForColor("color-warn", resolvedTheme)), generateBaseTonesForColor("color-danger", resolvedTheme)), generateBaseTonesForColor("color-surface", resolvedTheme, { distributeEven: true }));
 }
 function generateBaseSpacings(theme) {
     if (!theme) {
@@ -688,21 +687,6 @@ function generateBaseTonesForColor(varName, theme, options = { distributeEven: f
         return {};
     }
 }
-function generateRbgChannelsForTone(varName, theme) {
-    return {
-        [`${varName}-50-rgb`]: getRgbChannelsString(theme[`${varName}-50`]),
-        [`${varName}-100-rgb`]: getRgbChannelsString(theme[`${varName}-100`]),
-        [`${varName}-200-rgb`]: getRgbChannelsString(theme[`${varName}-200`]),
-        [`${varName}-300-rgb`]: getRgbChannelsString(theme[`${varName}-300`]),
-        [`${varName}-400-rgb`]: getRgbChannelsString(theme[`${varName}-400`]),
-        [`${varName}-500-rgb`]: getRgbChannelsString(theme[`${varName}-500`]),
-        [`${varName}-600-rgb`]: getRgbChannelsString(theme[`${varName}-600`]),
-        [`${varName}-700-rgb`]: getRgbChannelsString(theme[`${varName}-700`]),
-        [`${varName}-800-rgb`]: getRgbChannelsString(theme[`${varName}-800`]),
-        [`${varName}-900-rgb`]: getRgbChannelsString(theme[`${varName}-900`]),
-        [`${varName}-950-rgb`]: getRgbChannelsString(theme[`${varName}-950`]),
-    };
-}
 function mapTones(baseColor, mapper) {
     const tones = generateTones(baseColor);
     if (!tones) {