xmlui 0.10.8 → 0.10.11

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/Input/PartialInput.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -24,7 +35,8 @@ const PartialInput_module_scss_1 = __importDefault(require("./PartialInput.modul
  * @param props - PartialInputProps configuration
  * @returns A configured input element with enhanced multi-field input behavior
  */
-function PartialInput({ value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false, }) {
+function PartialInput(_a) {
+    var { value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false } = _a, restProps = __rest(_a, ["value", "placeholder", "onChange", "onBlur", "onKeyDown", "emptyCharacter", "placeholderLength", "max", "min", "maxLength", "validateFn", "onBeep", "nextInputRef", "nextButtonRef", "name", "ariaLabel", "className", "invalidClassName", "disabled", "readOnly", "required", "autoFocus", "inputRef", "step", "isInvalid"]);
     /**
      * Process emptyCharacter according to requirements.
      * Handles null/empty values, multi-character strings, and unicode characters.
@@ -122,9 +134,22 @@ function PartialInput({ value, placeholder, onChange, onBlur, onKeyDown, emptyCh
         // Call the enhanced onBlur handler with direction
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(direction, event);
     }, [onBlur, nextInputRef, nextButtonRef]);
-    return ((0, jsx_runtime_1.jsx)("input", { "aria-label": ariaLabel, autoComplete: "off", 
+    /**
+     * Enhanced key down handler that prevents space character input.
+     * Filters out space key presses while allowing other keys to pass through.
+     */
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        // Prevent space character input
+        if (event.key === " " || event.code === "Space") {
+            event.preventDefault();
+            return;
+        }
+        // Call the original onKeyDown handler for other keys
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [onKeyDown]);
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { "aria-label": ariaLabel, autoComplete: "off", 
         // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
         autoFocus: autoFocus, className: (0, classnames_1.default)(PartialInput_module_scss_1.default.partialInput, className, {
             [invalidClassName]: isInvalid,
-        }), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, maxLength: maxLength, min: min, name: name, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleInternalFocus, onKeyDown: onKeyDown, placeholder: finalPlaceholder, readOnly: readOnly, ref: inputRef, required: required, step: step, type: "text", value: value !== null ? value : "" }));
+        }), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, maxLength: maxLength, min: min, name: name, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleInternalFocus, onKeyDown: handleKeyDown, placeholder: finalPlaceholder, readOnly: readOnly, ref: inputRef, required: required, step: step, type: "text", value: value !== null ? value : "" })));
 }

package/dist/scripts/src/components/List/ListNative.js

@@ -66,7 +66,6 @@ const constants_1 = require("../../components-core/constants");
 const CardNative_1 = require("../Card/CardNative");
 const virtua_1 = require("virtua");
 const hooks_1 = require("../../components-core/utils/hooks");
-const ScrollContext_1 = require("../../components-core/ScrollContext");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const List_module_scss_1 = __importDefault(require("./List.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -228,14 +227,16 @@ const useShift = (listData, idKey) => {
     return shouldShift.current;
 };
 exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref) {
-    var _b;
+    var _b, _c;
     var { items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = exports.defaultProps.scrollAnchor, requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = exports.defaultProps.idKey, style, className, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = exports.defaultProps.borderCollapse } = _a, rest = __rest(_a, ["items", "itemRenderer", "sectionRenderer", "sectionFooterRenderer", "loading", "limit", "groupBy", "orderBy", "availableGroups", "scrollAnchor", "requestFetchPrevPage", "requestFetchNextPage", "pageInfo", "idKey", "style", "className", "emptyListPlaceholder", "groupsInitiallyExpanded", "defaultGroups", "registerComponentApi", "borderCollapse"]);
     const virtualizerRef = (0, react_1.useRef)(null);
-    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
     const parentRef = (0, react_1.useRef)(null);
     const rootRef = ref ? (0, react_compose_refs_1.composeRefs)(parentRef, ref) : parentRef;
+    const scrollParent = (0, hooks_1.useScrollParent)((_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.parentElement);
+    const scrollRef = (0, react_1.useRef)(scrollParent);
+    scrollRef.current = scrollParent;
     const hasHeight = (0, hooks_1.useHasExplicitHeight)(parentRef);
-    const hasOutsideScroll = scrollRef && !hasHeight;
+    const hasOutsideScroll = scrollRef.current && !hasHeight;
     const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
     const shouldStickToBottom = (0, react_1.useRef)(scrollAnchor === "bottom");
     const [expanded, setExpanded] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
@@ -384,7 +385,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref)
     // REVIEW: I changed this code line because in the build version rows[index] was undefined
     // const rowTypeContextValue = useCallback((index: number) => rows[index]._row_type, [rows]);
     const rowTypeContextValue = (0, react_1.useCallback)((index) => { var _a; return (_a = rows === null || rows === void 0 ? void 0 : rows[index]) === null || _a === void 0 ? void 0 : _a._row_type; }, [rows]);
-    const rowCount = (_b = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _b !== void 0 ? _b : 0;
+    const rowCount = (_c = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _c !== void 0 ? _c : 0;
     const startMargin = (0, hooks_1.useStartMargin)(hasOutsideScroll, parentRef, scrollRef);
     return ((0, jsx_runtime_1.jsx)(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: rootRef, style: style, className: (0, classnames_1.default)(List_module_scss_1.default.outerWrapper, {
                     [List_module_scss_1.default.hasOutsideScroll]: hasOutsideScroll,

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/NavPanel/NavPanelNative.js

@@ -52,10 +52,8 @@ exports.buildNavHierarchy = buildNavHierarchy;
 exports.buildLinkMap = buildLinkMap;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
-const ScrollContext_1 = require("../../components-core/ScrollContext");
 const LogoNative_1 = require("../Logo/LogoNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const AppNative_1 = require("../App/AppNative");
@@ -193,14 +191,11 @@ const contextValue = {
 };
 function DrawerNavPanel(_a) {
     var { logoContent, children, className, style } = _a, rest = __rest(_a, ["logoContent", "children", "className", "style"]);
-    const scrollContainerRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), style: style, children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) })) }));
+    return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] })) }));
 }
 exports.NavPanel = (0, react_1.forwardRef)(function NavPanel(_a, forwardedRef) {
     var _b, _c;
     var { children, style, logoContent, className, inDrawer = exports.defaultProps.inDrawer, renderChild, navLinks } = _a, rest = __rest(_a, ["children", "style", "logoContent", "className", "inDrawer", "renderChild", "navLinks"]);
-    const scrollContainerRef = (0, react_1.useRef)(null);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const linkInfoContext = (0, LinkInfoContext_1.useLinkInfoContext)();
     const horizontal = (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
@@ -219,9 +214,9 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel(_a, forwardedRef) {
     if (inDrawer) {
         return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, Object.assign({}, rest, { style: style, logoContent: safeLogoContent, className: className, children: children })));
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: forwardedRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
             [NavPanel_module_scss_1.default.horizontal]: horizontal,
             [NavPanel_module_scss_1.default.vertical]: vertical,
             [NavPanel_module_scss_1.default.condensed]: isCondensed,
-        }), style: style, children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: safeLogoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) })), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) })));
+        }), style: style, children: [showLogo && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: safeLogoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) })), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] })));
 });

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -321,9 +321,9 @@ exports.NumberBox = (0, react_1.forwardRef)(function NumberBox(_a, forwardedRef)
             }), tabIndex: -1, onFocus: () => {
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_START_ADORNMENT), NumberBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_INPUT), NumberBox_module_scss_1.default.input, {
+            }, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, "data-part-id": parts_1.PART_INPUT, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, {
                         [NumberBox_module_scss_1.default.readOnly]: readOnly,
-                    }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_END_ADORNMENT), NumberBox_module_scss_1.default.adornment) }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", role: "spinbutton", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", role: "spinbutton", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "chevrondown", size: "sm" }) })] }))] }) })));
+                    }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: (0, classnames_1.default)(NumberBox_module_scss_1.default.adornment) }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", role: "spinbutton", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", role: "spinbutton", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: spinnerDownIcon || "spinnerDown:NumberBox", fallback: "chevrondown", size: "sm" }) })] }))] }) })));
 });
 function applyStep(valueStrRep, step, min, max, integersOnly) {
     const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);

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/Pagination/Pagination.js

@@ -23,7 +23,8 @@ exports.PaginationMd = (0, metadata_helpers_1.createMetadata)({
             "that are enabled/disabled using the `hasPrevPage` and `hasNextPage` props.", undefined, "number"),
         pageSize: (0, metadata_helpers_1.d)("Number of items per page", undefined, "number", PaginationNative_1.defaultProps.pageSize),
         pageIndex: (0, metadata_helpers_1.d)("Current page index (0-based)", undefined, "number", PaginationNative_1.defaultProps.pageIndex),
-        maxVisiblePages: (0, metadata_helpers_1.d)("Maximum number of page buttons to display", undefined, "number", PaginationNative_1.defaultProps.maxVisiblePages),
+        maxVisiblePages: (0, metadata_helpers_1.d)("Maximum number of page buttons to display. " +
+            "If the value is not among the allowed values, it will fall back to the default.", PaginationNative_1.PageNumberValues, "number", PaginationNative_1.defaultProps.maxVisiblePages),
         showPageInfo: (0, metadata_helpers_1.d)("Whether to show page information", undefined, "boolean", PaginationNative_1.defaultProps.showPageInfo),
         showPageSizeSelector: (0, metadata_helpers_1.d)("Whether to show the page size selector", undefined, "boolean", PaginationNative_1.defaultProps.showPageSizeSelector),
         showCurrentPage: (0, metadata_helpers_1.d)("Whether to show the current page indicator", undefined, "boolean", PaginationNative_1.defaultProps.showCurrentPage),

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) }));
 });