xmlui 0.10.10 → 0.10.11

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceMd = void 0;
+const abstractions_1 = require("../abstractions");
+const metadata_helpers_1 = require("../metadata-helpers");
+// NOTE: Original component this is based on is the `Loader` component
+const COMP = "DataSource";
+exports.DataSourceMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
+    description: "`DataSource` fetches and caches data from API endpoints, versus " +
+        "[`APICall`](/components/APICall) which creates, updates or deletes data.",
+    props: {
+        method: {
+            description: `Set the HTTP method.`,
+            defaultValue: "get",
+            availableValues: abstractions_1.httpMethodNames,
+        },
+        id: {
+            description: `Set the ID used by other components to access the retrieved data in the \`value\`` +
+                "property of a \`DataSource\`, or status info in the \`loaded\` and \`error\` properties." +
+                "When no `id` is set, the component cannot be used programmatically.",
+            isRequired: true,
+            valueType: "string",
+        },
+        url: {
+            description: `Set the URL.`,
+            isRequired: true,
+            valueType: "string",
+        },
+        body: {
+            description: `Set the optional request body. The object you pass is serialized as a JSON string.`,
+            valueType: "any",
+        },
+        rawBody: {
+            description: `Set the request body with no serialization. Use it to send a payload  ` +
+                `that has already been serialized to a JSON string.`,
+            valueType: "string",
+        },
+        queryParams: {
+            description: `Append optional key-value pairs to the URL.`,
+            valueType: "any",
+        },
+        headers: {
+            description: `Set request headers. Pass an object whose keys are header names and values are header values.`,
+            valueType: "any",
+        },
+        pollIntervalInSeconds: {
+            description: "Set the interval for periodic data fetching. If the data changes on refresh, " +
+                "XMLUI will re-render components that refer directly or indirectly to the \`DataSource\`. " +
+                "If not set or set to zero, the component does not poll for data.",
+            valueType: "number",
+        },
+        inProgressNotificationMessage: {
+            description: "Set the message to display when the data fetch is in progress. " +
+                "If the property value is not set, no progress message is displayed.",
+            valueType: "string",
+        },
+        completedNotificationMessage: {
+            description: "Set the message to display when the data fetch completes." +
+                "If the property value is not set, no completion message is displayed.",
+            valueType: "string",
+        },
+        errorNotificationMessage: {
+            description: "Set the message to display when the there is an error. " +
+                "You can use the `$error` context value in an expression to " +
+                "refer to the original error message.",
+            valueType: "string",
+        },
+        resultSelector: {
+            description: "Set an optional object key to extract a subset of the response data. If this " +
+                "value is not set, the entire response body is considered the result.",
+            valueType: "string",
+        },
+        transformResult: {
+            description: "Set an optional function to perform a final transformation of the " +
+                "response data. If this value is not set, the result is not transformed.",
+        },
+        prevPageSelector: {
+            description: `When using \`${COMP}\` with paging, the response may contain information about the ` +
+                `previous and next page. This property defines the selector that extracts the ` +
+                `previous page information from the response deserialized to an object.`,
+        },
+        nextPageSelector: {
+            description: `When using \`${COMP}\` with paging, the response may contain information about ` +
+                `the previous and next page. This property defines the selector that extracts ` +
+                `the next page information from the response deserialized to an object.`,
+        },
+        structuralSharing: {
+            description: "This property allows structural sharing. When turned on, `DataSource` will keep " +
+                "the original reference if nothing has changed in the data. If a subset has " +
+                "changed, `DataSource` will keep the unchanged parts and only replace the changed " +
+                "parts. If you do not need this behavior, set this property to `false`.",
+            defaultValue: "true",
+        },
+    },
+    events: {
+        loaded: (0, metadata_helpers_1.d)("The component triggers this event when the fetch operation has been completed " +
+            "and the data is loaded. The event has two arguments. The first is the data " +
+            "loaded; the second indicates if the event is a result of a refetch."),
+        error: (0, metadata_helpers_1.d)(`This event fires when a request results in an error.`),
+    },
+    apis: {
+        value: {
+            description: `This property retrieves the data queried from the source after optional transformations.`,
+            signature: "get value(): any",
+        },
+        inProgress: {
+            description: "This property indicates if the data is being fetched.",
+            signature: "get inProgress(): boolean",
+        },
+        isRefetching: {
+            description: "This property indicates if the data is being re-fetched.",
+            signature: "get isRefetching(): boolean",
+        },
+        loaded: {
+            description: "This property indicates if the data has been loaded.",
+            signature: "get loaded(): boolean",
+        },
+        refetch: {
+            description: "This method requests the re-fetch of the data.",
+            signature: "refetch(): void",
+        },
+    },
+});

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

@@ -130,7 +130,7 @@ exports.MenuItemMd = (0, metadata_helpers_1.createMetadata)({
         [`color-${MICOMP}`]: "$textColor-primary",
         [`color-${MICOMP}--disabled`]: "$textColor--disabled",
         [`fontFamily-${MICOMP}`]: "$fontFamily",
-        [`fontSize-${MICOMP}`]: "$fontSize-small",
+        [`fontSize-${MICOMP}`]: "$fontSize-sm",
         [`paddingVertical-${MICOMP}`]: "$space-2",
         [`paddingHorizontal-${MICOMP}`]: "$space-3",
         [`backgroundColor-${MICOMP}--hover`]: "$backgroundColor-dropdown-item--hover",

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

@@ -22,7 +22,7 @@ exports.FooterMd = (0, metadata_helpers_1.createMetadata)({
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor-AppHeader",
         [`verticalAlignment-${COMP}`]: "center",
-        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontSize-${COMP}`]: "$fontSize-sm",
         [`textColor-${COMP}`]: "$textColor-secondary",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
         [`borderTop-${COMP}`]: `1px solid $borderColor`,

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

@@ -193,7 +193,7 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(FormItem_module_scss_1.default.themeVars),
     defaultThemeVars: {
         "textColor-FormItemLabel": "$textColor-primary",
-        "fontSize-FormItemLabel": "$fontSize-small",
+        "fontSize-FormItemLabel": "$fontSize-sm",
         "fontWeight-FormItemLabel": "$fontWeight-medium",
         "fontStyle-FormItemLabel": "normal",
         "textTransform-FormItemLabel": "none",

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

@@ -43,6 +43,22 @@ const OMIT_FROM_TOC_DESC = {
     type: "boolean",
     defaultValue: HeadingNative_1.defaultProps.omitFromToc,
 };
+const SHOW_ANCHOR_DESC = {
+    description: "This property indicates whether an anchor link should be displayed next to the heading. " +
+        "If set to `true`, an anchor link will be displayed on hover next to the heading.",
+    type: "boolean",
+    defaultValue: HeadingNative_1.defaultProps.showAnchor,
+};
+const APIS_DESC = {
+    scrollIntoView: {
+        signature: "scrollIntoView()",
+        description: "Scrolls the heading into view.",
+    },
+    hasOverflow: {
+        signature: "hasOverflow()",
+        description: "Returns true when the displayed text overflows the bounds of this heading component.",
+    },
+};
 exports.HeadingMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`Heading` displays hierarchical text headings with semantic importance levels " +
@@ -60,18 +76,9 @@ exports.HeadingMd = (0, metadata_helpers_1.createMetadata)({
         ellipses: ELLIPSES_DESC,
         preserveLinebreaks: PRESERVE_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
-        showAnchor: {
-            description: "This property indicates whether an anchor link should be displayed next to the heading. " +
-                "If set to `true`, an anchor link will be displayed on hover next to the heading.",
-            type: "boolean",
-        },
-    },
-    apis: {
-        scrollIntoView: {
-            signature: "scrollIntoView()",
-            description: "Scrolls the heading into view.",
-        },
+        showAnchor: SHOW_ANCHOR_DESC,
     },
+    apis: APIS_DESC,
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
@@ -98,14 +105,20 @@ exports.H1Md = (0, metadata_helpers_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        ellipses: ELLIPSES_DESC,
+        preserveLinebreaks: PRESERVE_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
+        showAnchor: SHOW_ANCHOR_DESC,
     },
+    apis: APIS_DESC,
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`fontSize-${H1}`]: "$fontSize-large",
+        [`fontSize-${H1}`]: "$fontSize-2xl",
+        [`lineHeight-${H1}`]: "$lineHeight-2xl",
         [`marginTop-${H1}`]: "0",
         [`marginBottom-${H1}`]: "0",
-        [`fontSize-${H1}-markdown`]: "$fontSize-large",
+        [`fontSize-${H1}-markdown`]: "$fontSize-2xl",
+        [`lineHeight-${H1}-markdown`]: "$lineHeight-2xl",
         [`marginTop-${H1}-markdown`]: "0",
         [`marginBottom-${H1}-markdown`]: "$space-6",
         light: {
@@ -124,13 +137,20 @@ exports.H2Md = (0, metadata_helpers_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        ellipses: ELLIPSES_DESC,
+        preserveLinebreaks: PRESERVE_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
+        showAnchor: SHOW_ANCHOR_DESC,
     },
+    apis: APIS_DESC,
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`fontSize-${H2}`]: "$fontSize-medium",
+        [`fontSize-${H2}`]: "$fontSize-xl",
+        [`lineHeight-${H2}`]: "$lineHeight-xl",
         [`marginTop-${H2}`]: "0",
         [`marginBottom-${H2}`]: "0",
+        [`fontSize-${H2}-markdown`]: "$fontSize-xl",
+        [`lineHeight-${H2}-markdown`]: "$lineHeight-xl",
         [`marginTop-${H2}-markdown`]: "$space-10",
         [`marginBottom-${H2}-markdown`]: "$space-3",
         light: {
@@ -149,13 +169,20 @@ exports.H3Md = (0, metadata_helpers_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
+        ellipses: ELLIPSES_DESC,
+        preserveLinebreaks: PRESERVE_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
+        showAnchor: SHOW_ANCHOR_DESC,
     },
+    apis: APIS_DESC,
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`fontSize-${H3}`]: "$fontSize-normal",
+        [`fontSize-${H3}`]: "$fontSize-lg",
+        [`lineHeight-${H3}`]: "$lineHeight-lg",
         [`marginTop-${H3}`]: "0",
         [`marginBottom-${H3}`]: "0",
+        [`fontSize-${H3}-markdown`]: "$fontSize-lg",
+        [`lineHeight-${H3}-markdown`]: "$lineHeight-lg",
         [`marginTop-${H3}-markdown`]: "$space-6",
         [`marginBottom-${H3}-markdown`]: "$space-2",
         light: {
@@ -175,12 +202,19 @@ exports.H4Md = (0, metadata_helpers_1.createMetadata)({
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
+        ellipses: ELLIPSES_DESC,
+        preserveLinebreaks: PRESERVE_DESC,
+        showAnchor: SHOW_ANCHOR_DESC,
     },
+    apis: APIS_DESC,
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`fontSize-${H4}`]: "$fontSize-small",
+        [`fontSize-${H4}`]: "$fontSize-base",
+        [`lineHeight-${H4}`]: "$lineHeight-base",
         [`marginTop-${H4}`]: "0",
         [`marginBottom-${H4}`]: "0",
+        [`fontSize-${H4}-markdown`]: "$fontSize-base",
+        [`lineHeight-${H4}-markdown`]: "$lineHeight-base",
         [`marginTop-${H4}-markdown`]: "$space-5",
         [`marginBottom-${H4}-markdown`]: "$space-1",
         light: {
@@ -200,12 +234,19 @@ exports.H5Md = (0, metadata_helpers_1.createMetadata)({
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
+        ellipses: ELLIPSES_DESC,
+        preserveLinebreaks: PRESERVE_DESC,
+        showAnchor: SHOW_ANCHOR_DESC,
     },
+    apis: APIS_DESC,
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`fontSize-${H5}`]: "$fontSize-smaller",
+        [`fontSize-${H5}`]: "$fontSize-sm",
+        [`lineHeight-${H5}`]: "$lineHeight-sm",
         [`marginTop-${H5}`]: "0",
         [`marginBottom-${H5}`]: "0",
+        [`fontSize-${H5}-markdown`]: "$fontSize-sm",
+        [`lineHeight-${H5}-markdown`]: "$lineHeight-sm",
         [`marginTop-${H5}-markdown`]: "0",
         [`marginBottom-${H5}-markdown`]: "$space-0",
         light: {
@@ -225,12 +266,19 @@ exports.H6Md = (0, metadata_helpers_1.createMetadata)({
         value: VALUE_DESC,
         maxLines: MAX_LINES_DESC,
         omitFromToc: OMIT_FROM_TOC_DESC,
+        ellipses: ELLIPSES_DESC,
+        preserveLinebreaks: PRESERVE_DESC,
+        showAnchor: SHOW_ANCHOR_DESC,
     },
+    apis: APIS_DESC,
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`fontSize-${H6}`]: "$fontSize-tiny",
+        [`fontSize-${H6}`]: "$fontSize-xs",
+        [`lineHeight-${H6}`]: "$lineHeight-xs",
         [`marginTop-${H6}`]: "0",
         [`marginBottom-${H6}`]: "0",
+        [`fontSize-${H6}-markdown`]: "$fontSize-xs",
+        [`lineHeight-${H6}-markdown`]: "$lineHeight-xs",
         [`marginTop-${H6}-markdown`]: "0",
         [`marginBottom-${H6}-markdown`]: "$space-0",
         light: {
@@ -241,72 +289,79 @@ exports.H6Md = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-function renderHeading({ node, extractValue, className, level, showAnchor, renderChild, }) {
+function renderHeading({ node, extractValue, className, level, showAnchor, renderChild, registerComponentApi, }) {
     var _a, _b;
     const _c = node.props, { maxLines, preserveLinebreaks, ellipses } = _c, restProps = __rest(_c, ["maxLines", "preserveLinebreaks", "ellipses"]);
     delete restProps.level; // Remove level from restProps as it is handled separately
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: extractValue.asOptionalBoolean(showAnchor), className: className, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc) }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: extractValue.asOptionalBoolean(showAnchor), className: className, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc), registerComponentApi: registerComponentApi }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
 }
-exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, className, renderChild }) => {
+exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({
-        node,
+        node: node,
         extractValue,
         className,
         level: node.props.level,
         renderChild,
+        registerComponentApi,
     });
 });
-exports.h1ComponentRenderer = (0, renderers_1.createComponentRenderer)(H1, exports.H1Md, ({ node, extractValue, className, renderChild }) => {
+exports.h1ComponentRenderer = (0, renderers_1.createComponentRenderer)(H1, exports.H1Md, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({
         node,
         extractValue,
         className,
         level: "h1",
         renderChild,
+        registerComponentApi,
     });
 });
-exports.h2ComponentRenderer = (0, renderers_1.createComponentRenderer)(H2, exports.H2Md, ({ node, extractValue, className, renderChild }) => {
+exports.h2ComponentRenderer = (0, renderers_1.createComponentRenderer)(H2, exports.H2Md, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({
         node,
         extractValue,
         className,
         level: "h2",
         renderChild,
+        registerComponentApi,
     });
 });
-exports.h3ComponentRenderer = (0, renderers_1.createComponentRenderer)(H3, exports.H3Md, ({ node, extractValue, className, renderChild }) => {
+exports.h3ComponentRenderer = (0, renderers_1.createComponentRenderer)(H3, exports.H3Md, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({
         node,
         extractValue,
         className,
         level: "h3",
         renderChild,
+        registerComponentApi,
     });
 });
-exports.h4ComponentRenderer = (0, renderers_1.createComponentRenderer)(H4, exports.H4Md, ({ node, extractValue, className, renderChild }) => {
+exports.h4ComponentRenderer = (0, renderers_1.createComponentRenderer)(H4, exports.H4Md, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({
         node,
         extractValue,
         className,
         level: "h4",
         renderChild,
+        registerComponentApi,
     });
 });
-exports.h5ComponentRenderer = (0, renderers_1.createComponentRenderer)(H5, exports.H5Md, ({ node, extractValue, className, renderChild }) => {
+exports.h5ComponentRenderer = (0, renderers_1.createComponentRenderer)(H5, exports.H5Md, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({
         node,
         extractValue,
         className,
         level: "h5",
         renderChild,
+        registerComponentApi,
     });
 });
-exports.h6ComponentRenderer = (0, renderers_1.createComponentRenderer)(H6, exports.H6Md, ({ node, extractValue, className, renderChild }) => {
+exports.h6ComponentRenderer = (0, renderers_1.createComponentRenderer)(H6, exports.H6Md, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({
         node,
         extractValue,
         className,
         level: "h6",
         renderChild,
+        registerComponentApi,
     });
 });

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -31,6 +31,7 @@ exports.defaultProps = {
     omitFromToc: false,
     maxLines: 0,
     preserveLinebreaks: false,
+    showAnchor: false,
 };
 exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
     var _b, _c;
@@ -51,11 +52,19 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
             elementRef.current.scrollIntoView(Object.assign({ behavior: 'smooth', block: 'start' }, options));
         }
     }, []);
+    const hasOverflow = (0, react_1.useCallback)(() => {
+        if (elementRef.current) {
+            const element = elementRef.current;
+            return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+        }
+        return false;
+    }, []);
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             scrollIntoView,
+            hasOverflow,
         });
-    }, [registerComponentApi, scrollIntoView]);
+    }, [registerComponentApi, scrollIntoView, hasOverflow]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
         if (elementRef.current) {

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

@@ -1336,7 +1336,7 @@ exports.HtmlTrMd = (0, metadata_helpers_1.createMetadata)({
     isHtmlTag: true,
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsTr),
     defaultThemeVars: {
-        "fontSize-HtmlTr": "$fontSize-small",
+        "fontSize-HtmlTr": "$fontSize-sm",
         "backgroundColor-row-HtmlTr": "inherit",
         //"backgroundColor-HtmlTr--hover": "$color-primary-50",
     },

package/dist/scripts/src/components/Image/ImageNative.js

@@ -26,7 +26,20 @@ exports.defaultProps = {
 };
 exports.Image = (0, react_1.forwardRef)(function Img(_a, ref) {
     var { src, alt, fit = exports.defaultProps.fit, style, className, onClick, aspectRatio, lazyLoad = exports.defaultProps.lazyLoad, inline = exports.defaultProps.inline } = _a, rest = __rest(_a, ["src", "alt", "fit", "style", "className", "onClick", "aspectRatio", "lazyLoad", "inline"]);
+    src = safeConvertPropToString(src);
+    alt = safeConvertPropToString(alt);
     return ((0, jsx_runtime_1.jsx)("img", Object.assign({}, rest, { 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,
         }, className), style: Object.assign(Object.assign(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { flexShrink: 1, aspectRatio: aspectRatio }), (inline ? { display: "inline" } : {})), onClick: onClick })));
 });
+function safeConvertPropToString(prop) {
+    if (typeof prop === "string")
+        return prop;
+    if (prop != null &&
+        typeof prop !== "object" &&
+        typeof prop !== "function" &&
+        !Number.isNaN(prop)) {
+        return String(prop);
+    }
+    return undefined;
+}

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

@@ -62,7 +62,7 @@ exports.NavLinkMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-${COMP}`]: "transparent",
         [`paddingHorizontal-${COMP}`]: "$space-4",
         [`paddingVertical-${COMP}`]: "$space-2",
-        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontSize-${COMP}`]: "$fontSize-sm",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`textColor-${COMP}`]: "$textColor-primary",

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

@@ -30,13 +30,13 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, className, renderChild, layoutContext }) => {
     var _a, _b;
     const label = extractValue.asOptionalString(node.props.label);
-    const value = extractValue.asOptionalString(node.props.value);
+    let value = extractValue(node.props.value);
     if (label === undefined && value === undefined) {
         return null;
     }
     const hasTextNodeChild = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) === 1 && (node.children[0].type === "TextNode" || node.children[0].type === "TextNodeCData");
     const textNodeChild = hasTextNodeChild ? renderChild(node.children) : undefined;
-    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value || label, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
+    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { label: label || textNodeChild, value: value !== undefined && value !== "" ? value : label, enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, optionRenderer: ((_b = node.children) === null || _b === void 0 ? void 0 : _b.length) > 0
             ? !hasTextNodeChild ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.children, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext })) : undefined
             : undefined, children: !hasTextNodeChild && renderChild(node.children) }));
 });

package/dist/scripts/src/components/Option/OptionNative.js

@@ -1,13 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionNative = exports.defaultProps = void 0;
+exports.convertOptionValue = convertOptionValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OptionTypeProvider_1 = require("./OptionTypeProvider");
 // Default props for Option component
 exports.defaultProps = {
-    enabled: true
+    enabled: true,
 };
+function convertOptionValue(value) {
+    if (typeof value !== "string" &&
+        (typeof value !== "number" ||
+            (typeof value === "number" && isNaN(value))) &&
+        typeof value !== "boolean" &&
+        value !== null) {
+        return "";
+    }
+    return value;
+}
 exports.OptionNative = (0, react_1.memo)((props) => {
     const OptionType = (0, OptionTypeProvider_1.useOptionType)();
     if (!OptionType) {

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

@@ -17,7 +17,11 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
     description: "`RadioGroup` creates a mutually exclusive selection interface where users can " +
         "choose only one option from a group of radio buttons. It manages the selection " +
         "state and ensures that selecting one option automatically deselects all others in " +
-        "the group.",
+        "the group." +
+        "\n\n" +
+        "Radio options store their values as strings. Numbers and booleans are converted to strings " +
+        "when assigned, while objects, functions and arrays default to an empty string unless resolved " +
+        "via binding expressions.",
     props: {
         initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: RadioGroupNative_1.defaultProps.initialValue }),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
@@ -52,10 +56,10 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
         [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
         [`backgroundColor-checked-${RGOption}--disabled`]: `$textColor--disabled`,
-        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontSize-${RGOption}`]: "$fontSize-sm",
         [`fontWeight-${RGOption}`]: "$fontWeight-bold",
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, className, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { autofocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), children: renderChild(node.children) }));
 });

package/dist/scripts/src/components/RadioGroup/RadioGroupNative.js

@@ -58,32 +58,47 @@ const misc_1 = require("../../components-core/utils/misc");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
 const RadioItemNative_1 = require("./RadioItemNative");
+const OptionNative_1 = require("../Option/OptionNative");
 exports.defaultProps = {
     value: "",
     initialValue: "",
     enabled: true,
     validationStatus: "none",
     required: false,
+    readOnly: false,
 };
 const RadioGroupStatusContext = (0, react_1.createContext)({
     status: "none",
     enabled: exports.defaultProps.enabled,
 });
 exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup(_a, forwardedRef) {
-    var { id, value = exports.defaultProps.value, initialValue = exports.defaultProps.initialValue, enabled = exports.defaultProps.enabled, validationStatus = exports.defaultProps.validationStatus, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, className } = _a, rest = __rest(_a, ["id", "value", "initialValue", "enabled", "validationStatus", "label", "labelPosition", "labelWidth", "labelBreak", "required", "updateState", "onDidChange", "onFocus", "onBlur", "children", "registerComponentApi", "style", "className"]);
+    var { id, value = exports.defaultProps.value, initialValue = exports.defaultProps.initialValue, autofocus, enabled = exports.defaultProps.enabled, validationStatus = exports.defaultProps.validationStatus, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, readOnly = exports.defaultProps.readOnly, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, className } = _a, rest = __rest(_a, ["id", "value", "initialValue", "autofocus", "enabled", "validationStatus", "label", "labelPosition", "labelWidth", "labelBreak", "required", "readOnly", "updateState", "onDidChange", "onFocus", "onBlur", "children", "registerComponentApi", "style", "className"]);
     const [focused, setFocused] = react_1.default.useState(false);
+    const radioGroupRef = (0, react_1.useRef)(null);
     // --- Initialize the related field with the input's initial value
     (0, react_1.useEffect)(() => {
-        updateState({ value: initialValue }, { initial: true });
+        updateState({ value: (0, OptionNative_1.convertOptionValue)(initialValue) }, { initial: true });
     }, [initialValue, updateState]);
+    // --- Handle autofocus by focusing the first radio option
+    (0, react_1.useEffect)(() => {
+        if (autofocus && radioGroupRef.current) {
+            // Find the first radio item element
+            const firstRadioItem = radioGroupRef.current.querySelector('[role="radio"]');
+            if (firstRadioItem) {
+                firstRadioItem.focus();
+            }
+        }
+    }, [autofocus]);
     // --- Handle the value change events for this input
     const updateValue = (0, react_1.useCallback)((value) => {
         updateState({ value });
         onDidChange(value);
     }, [onDidChange, updateState]);
     const onInputChange = (0, react_1.useCallback)((value) => {
+        if (readOnly)
+            return;
         updateValue(value);
-    }, [updateValue]);
+    }, [updateValue, readOnly]);
     // --- Manage obtaining and losing the focus
     const handleOnFocus = (0, react_1.useCallback)((ev) => {
         setFocused(true);
@@ -105,7 +120,7 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup(_a, forwardedRe
     const contextValue = (0, react_1.useMemo)(() => {
         return { value, setValue: updateValue, status: validationStatus, enabled };
     }, [value, updateValue, validationStatus, enabled]);
-    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
+    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { ref: radioGroupRef, id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, required: required, "aria-readonly": readOnly, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
                         [RadioGroup_module_scss_1.default.focused]: focused,
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) })) }) }));
@@ -120,7 +135,7 @@ const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style,
         [RadioGroup_module_scss_1.default.valid]: value === radioGroupContext.value && radioGroupContext.status === "valid",
     }), [enabled, radioGroupContext, value]);
     const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RadioItemNative_1.UnwrappedRadioItem, { id: id, value: value, checked: value === radioGroupContext.value, disabled: !enabled, statusStyles: statusStyles }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value, radioGroupContext]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOptionContainer, className), style: style, children: !!optionRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: RadioGroup_module_scss_1.default.optionLabel, children: [(0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.itemContainer, children: item }), optionRenderer({
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOptionContainer, className), style: style, "data-radio-item": true, children: !!optionRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: RadioGroup_module_scss_1.default.optionLabel, children: [(0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.itemContainer, children: item }), optionRenderer({
                     $checked: value === radioGroupContext.value,
                     $setChecked: radioGroupContext.setValue,
                 })] })) : (item) }, id));